/* Secciones de páginas estáticas (clases rq-ps1-*, las arma PageSectionCatalog::html()). Base neutra: el texto hereda
   el del portal y el único acento es su .btn-primary (un primario claro dejaba ilegibles cifras y precios pintados con
   él). Las páginas nativas se renderizan a 1076 px y se escalan: sin breakpoints xl. */
.rq-ps1 { padding: 3rem 0; font-size: 1rem; }
.rq-ps1-hero { padding: 5rem 0; }
.rq-ps1-center { text-align: center; max-width: 720px; margin: 0 auto; }
.rq-ps1-title { font-weight: 700; margin-bottom: 1rem; }
.rq-ps1-lead { margin-bottom: 1.5rem; }
.rq-ps1-text { margin-bottom: 1rem; }
.rq-ps1-img { border-radius: 12px; }
/* Proporción fija: fotos de distinto tamaño no desparejan la grilla ni la mueven al cargar (loading=lazy). */
.rq-ps1-team .rq-ps1-img, .rq-ps1-gallery .rq-ps1-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.rq-ps1-team .rq-ps1-img { aspect-ratio: 1; margin-bottom: .75rem; }
.rq-ps1-card { height: 100%; padding: 1.5rem; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; background: var(--bs-body-bg); }
.rq-ps1-icon { font-size: 1.75rem; margin-bottom: .75rem; }
.rq-ps1-card-title { font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }
.rq-ps1-price { font-size: 2rem; font-weight: 700; }
.rq-ps1-list { padding-left: 1.25rem; margin-bottom: 1rem; }
.rq-ps1-stat-value { font-size: 2.25rem; font-weight: 700; }
.rq-ps1-card-text, .rq-ps1-stat-value, .rq-ps1-stat-label { margin-bottom: 0; }
.rq-ps1-cta { background: var(--bs-tertiary-bg); }
/* El ítem abierto del FAQ en el mismo gris de la CTA, con el chevron del cerrado: sin el azul de Bootstrap. */
.rq-ps1-faq .accordion { --bs-accordion-active-color: currentColor; --bs-accordion-active-bg: var(--bs-tertiary-bg); --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon); }
/* La fila recupera los márgenes negativos de Bootstrap que anulan los .row (y el div{max-width:100%}) genéricos del
   canvas y de Page.html.twig: sin ellos el gutter se duplica y las tarjetas quedan corridas respecto del título. Lleva
   !important porque esas reglas también lo llevan; el margen inferior no se toca. */
.rq-ps1 > .container > .row { margin-top: calc(-1 * var(--bs-gutter-y)) !important; margin-inline: calc(-.5 * var(--bs-gutter-x)) !important; width: auto !important; max-width: none !important; }
/* Tonos: recuadro dentro del ancho actual (a sangre saldría del escalado de 1076 px). --rq-ps-marca y -texto los
   define la página con emailBrandColor()/emailTextOn() del portal. */
.rq-ps1[class*="rq-ps1-tono-"] { border-radius: 16px; margin: 1rem; padding-inline: 1.5rem; }
/* Tope del video: a todo el ancho mide casi una pantalla de alto. Gana a `.grapesjs-page-content .video-embed-wrapper`. */
.rq-ps1.rq-ps1-video .video-embed-wrapper { max-width: 40rem !important; }
.rq-ps1-tono-suave { background: var(--bs-tertiary-bg); }
.rq-ps1-tono-marca-suave { background: color-mix(in srgb, var(--rq-ps-marca) 12%, var(--bs-body-bg)); }
.rq-ps1-tono-marca { --rq-ps-fondo: var(--rq-ps-marca); --rq-ps-tinta: var(--rq-ps-marca-texto); }
.rq-ps1-tono-oscuro { --rq-ps-fondo: #191919; --rq-ps-tinta: #fff; }
.rq-ps1-tono-marca, .rq-ps1-tono-oscuro { background: var(--rq-ps-fondo); color: var(--rq-ps-tinta); }
/* El CSS del portal y Bootstrap (text-body-secondary con !important) pintan títulos, textos, etiquetas y enlaces: sobre
   color heredan la tinta del tono. El chevron del FAQ es un SVG oscuro: se usa de máscara para que tome la tinta. */
:is(.rq-ps1-tono-marca, .rq-ps1-tono-oscuro) :is(h1, h2, h3, p, i, li, label, small, a:not(.btn), .text-body-secondary, .accordion-item, .accordion-button) { color: inherit !important; }
:is(.rq-ps1-tono-marca, .rq-ps1-tono-oscuro) .accordion { --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem currentColor; --bs-accordion-bg: transparent; --bs-accordion-border-color: color-mix(in srgb, currentColor 25%, transparent); --bs-accordion-active-bg: color-mix(in srgb, currentColor 10%, transparent); }
:is(.rq-ps1-tono-marca, .rq-ps1-tono-oscuro) .accordion-button::after { background: currentColor; -webkit-mask: var(--bs-accordion-btn-icon) center / contain no-repeat; mask: var(--bs-accordion-btn-icon) center / contain no-repeat; }
@media (forced-colors: active) { :is(.rq-ps1-tono-marca, .rq-ps1-tono-oscuro) .accordion-button::after { background: ButtonText; } }
:is(.rq-ps1-tono-marca, .rq-ps1-tono-oscuro) .btn-primary { background: var(--rq-ps-tinta) !important; border-color: var(--rq-ps-tinta) !important; color: var(--rq-ps-fondo) !important; }
:is(.rq-ps1-tono-marca, .rq-ps1-tono-oscuro) .btn-primary:hover { filter: brightness(.92); }
:is(.rq-ps1-tono-marca, .rq-ps1-tono-oscuro) .rq-ps1-card { background: color-mix(in srgb, currentColor 8%, transparent); border-color: color-mix(in srgb, currentColor 25%, transparent); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    [class*="rq-ps1-anim-"] .rq-ps1-card { transition: transform .2s, box-shadow .2s; }
    /* Repite las transiciones de color de .btn de Bootstrap, que un transition solo de transform pisaría. */
    [class*="rq-ps1-anim-"] .rq-ps1-btn { transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .2s; }
    [class*="rq-ps1-anim-"] .rq-ps1-card:hover { transform: translateY(-4px); box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12); }
    [class*="rq-ps1-anim-"] .rq-ps1-btn:hover { transform: translateY(-2px); }
}
/* Entrada (page-sections.js pone .rq-ps-js y .rq-ps1-visible): sin JS o con movimiento reducido no se oculta nada. Es
   una animación y no una transición para no sumarle su retardo al hover. Debe ser el último bloque del archivo; solo screen, para que al imprimir no queden ocultas las no recorridas. */
@media screen and (prefers-reduced-motion: no-preference) {
    /* Una escalonada sin ítems (hero, text, cta, video) entra como aparecer. */
    .rq-ps-js :is(.rq-ps1-anim-aparecer, .rq-ps1-anim-escalonada:not(:has([data-rq-item]))):not(.rq-ps1-visible), .rq-ps-js .rq-ps1-anim-escalonada:not(.rq-ps1-visible) [data-rq-item] { opacity: 0; }
    .rq-ps-js :is(.rq-ps1-anim-aparecer, .rq-ps1-anim-escalonada:not(:has([data-rq-item]))).rq-ps1-visible, .rq-ps-js .rq-ps1-anim-escalonada.rq-ps1-visible [data-rq-item] { animation: rq-ps1-entrar .6s ease-out backwards; }
    .rq-ps1-anim-escalonada [data-rq-item]:nth-child(2) { animation-delay: .1s; }
    .rq-ps1-anim-escalonada [data-rq-item]:nth-child(3) { animation-delay: .2s; }
    .rq-ps1-anim-escalonada [data-rq-item]:nth-child(4) { animation-delay: .3s; }
    .rq-ps1-anim-escalonada [data-rq-item]:nth-child(5) { animation-delay: .4s; }
    .rq-ps1-anim-escalonada [data-rq-item]:nth-child(n+6) { animation-delay: .5s; }
    @keyframes rq-ps1-entrar { from { opacity: 0; transform: translateY(24px); } }
}