/* ==========================================================================
   Paradise Weeks — pw-componentes.css
   Los componentes reutilizables del sitio.

   Orden del archivo:
     1. Cabecera fija, navegación y hamburguesa
     2. Tarjeta de destino (+ banderas SVG, + hueco de foto, + ilustración)
     3. Paso numerado
     4. Ítem de FAQ
     5. Tarjeta de testimonio
     6. Tarjeta de beneficio
     7. Formulario de contacto
     8. Pie de página
     9. Botones flotantes (WhatsApp y volver arriba)
    10. Aviso de maqueta (solo con PW_CONTENIDO_APROBADO = false)

   Ningún hex hardcodeado: todo sale de las variables de css/pw-base.css.
   ========================================================================== */


/* ==========================================================================
   1. Cabecera fija, navegación y hamburguesa

   La base del header es SÓLIDA a propósito. Lo intuitivo sería "transparente
   por defecto, el JS lo solidifica al bajar", pero eso rompe sin JS: el header
   se quedaría transparente sobre "quiénes somos" y texto blanco sobre hueso da
   1.05 — invisible. Por eso la base es sólida (siempre legible, con o sin JS) y
   el JS solo QUITA el fondo mientras scrollY < 8, que es cuando el header está
   encima del hero oscuro y la transparencia es segura.
   ========================================================================== */

.pw-cabecera {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--pw-z-header);
    height: var(--pw-alto-header);
    background-color: var(--pw-azul-noche);        /* SÓLIDO por defecto */
    box-shadow: var(--pw-sombra-header);
    transition: background-color var(--pw-dur-media) var(--pw-ease),
                box-shadow var(--pw-dur-media) var(--pw-ease);

    /* Hereda la piel profunda para que sus hijos usen las variables de contexto */
    --pw-txt-actual:   var(--pw-texto-sobre-oscuro);
    --pw-txt-suave:    var(--pw-texto-suave-oscuro);
    --pw-borde-sutil:  var(--pw-borde-sutil-oscuro);
    --pw-borde-ui:     var(--pw-borde-ui-oscuro);
    --pw-acento-texto: var(--pw-dorado-claro);
}

/* Transparente SOLO cuando hay JS y estamos en el tope, sobre el hero oscuro */
.pw-js .pw-cabecera[data-pw-tope="si"] {
    background-color: transparent;
    box-shadow: none;
}

.pw-cabecera__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pw-e-4);
    height: 100%;
}

/* Marca de la cabecera: emblema sobre placa + wordmark tipográfico.
   El logo completo NO entra acá: en una cabecera de 68/84 px la palabra
   "PARADISE" quedaría en 6.4/8.7 px (fase 2 §4.1). Emblema arriba, logo
   completo en el pie. */
.pw-cabecera__marca {
    display: inline-flex;
    align-items: center;
    gap: var(--pw-e-3);
    text-decoration: none;
    border-radius: var(--pw-radio-sm);
}

/* Placa BLANCO PURO, nunca hueso: el fondo del JPEG es #FEFEFE y contra hueso
   deja una costura visible aunque el ratio (1.043) diga que da igual
   (fase 2 §4.2 b). Redondeada y no circular: el emblema ocupa el 99% del
   círculo inscrito y una placa circular no dejaría aire real (§4.3). */
.pw-cabecera__placa {
    display: inline-flex;
    flex: 0 0 auto;
    background-color: var(--pw-blanco);          /* 16.89 sobre azul noche */
    border-radius: var(--pw-radio-md);
    padding: var(--pw-placa-emblema-pad);
}
.pw-cabecera__placa img {
    display: block;
    width:  calc(var(--pw-placa-emblema) - var(--pw-placa-emblema-pad) * 2);
    height: calc(var(--pw-placa-emblema) - var(--pw-placa-emblema-pad) * 2);
}

/* A 320px de ancho el wordmark a --pw-txt-xl dejaría la fila en 261 de 280px
   útiles: entra, pero sin margen para nada. A --pw-txt-lg baja a 235px. */
.pw-cabecera__wordmark {
    font-family: var(--pw-fuente-titulo);
    font-size: var(--pw-txt-lg);
    font-weight: var(--pw-peso-titulo);
    letter-spacing: .02em;
    color: var(--pw-texto-sobre-oscuro);   /* 16.89 sobre azul noche */
    white-space: nowrap;
}
@media (min-width: 768px) {
    .pw-cabecera__wordmark { font-size: var(--pw-txt-xl); }
}

/* Navegación.
   Base (sin JS): fila que envuelve, siempre visible bajo la marca. */
.pw-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pw-e-2);
}

.pw-nav__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pw-e-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pw-nav__lista a {
    display: flex;
    align-items: center;
    min-height: var(--pw-tactil);
    padding-inline: var(--pw-e-3);
    color: var(--pw-texto-sobre-oscuro);
    text-decoration: none;
    font-size: var(--pw-txt-sm);
    border-radius: var(--pw-radio-sm);
}
@media (hover: hover) {
    .pw-nav__lista a:hover { color: var(--pw-dorado-claro); }   /* 10.08 sobre azul noche */
}

.pw-nav__cta {
    min-height: var(--pw-tactil);
    padding: var(--pw-e-2) var(--pw-e-5);
    font-size: var(--pw-txt-sm);
}

/* La hamburguesa NO se muestra sin JS: sin JS no haría nada, y el nav ya está
   visible como fila. */
.pw-hamburguesa { display: none; }

/* position + z-index NO son decorativos: son lo único que hace tocable la X.
   El panel del menú es HIJO de la cabecera y va posicionado con z-index 95;
   este botón, estático, pintaba DEBAJO de él aunque la cabecera entera esté en
   z-index 100 — ese 100 ordena la cabecera contra la página, no contra su
   propio hijo. Sin esto, tocar la X toca un enlace del panel: el menú se cierra
   pero además NAVEGA, y con el contenido aprobado no hace nada. Medido con
   elementFromPoint en el centro exacto del botón, a 320, 375 y 767. */
.pw-js .pw-hamburguesa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pw-tactil);
    height: var(--pw-tactil);
    background: none;
    border: 0;
    cursor: pointer;
    border-radius: var(--pw-radio-sm);
    color: var(--pw-texto-sobre-oscuro);
    flex: 0 0 auto;
    position: relative;
    z-index: var(--pw-z-menu-cierre);
}

.pw-hamburguesa__caja { display: grid; gap: 5px; }

.pw-hamburguesa__barra {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--pw-texto-sobre-oscuro);
    transition: transform var(--pw-dur-media) var(--pw-ease),
                opacity var(--pw-dur-rapida) var(--pw-ease);
}

/* Abierto → X. Es FORMA, no color: sobrevive a daltonismo y a alto contraste. */
.pw-hamburguesa[aria-expanded="true"] .pw-hamburguesa__barra:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pw-hamburguesa[aria-expanded="true"] .pw-hamburguesa__barra:nth-child(2) { opacity: 0; }
.pw-hamburguesa[aria-expanded="true"] .pw-hamburguesa__barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767.98px) {
    /* Sin JS: nav visible bajo la marca (el header crece con el contenido).
       Con JS: panel a pantalla completa que entra desde la derecha. */
    .pw-js .pw-nav {
        position: fixed;
        inset: 0;
        z-index: var(--pw-z-menu);
        padding: calc(var(--pw-alto-header) + var(--pw-e-8)) var(--pw-margen-lateral) var(--pw-e-8);
        background-color: var(--pw-azul-noche);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--pw-e-2);
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--pw-dur-media) var(--pw-ease-salida),
                    visibility 0s linear var(--pw-dur-media);
    }
    .pw-js .pw-nav[data-pw-abierto="si"] {
        transform: translateX(0);
        visibility: visible;
        transition-delay: 0s;
    }

    /* QUINTA cosa que corre la franja de maqueta, además del padding del body,
       el top de la cabecera, el enlace de saltar y el scroll-margin-top: este
       panel, que también está anclado al viewport. Sin esto el panel arranca en
       top:0, la franja le pinta encima sus 172px y se come los dos primeros
       ítems del menú — que además son inalcanzables, porque el panel ocupa
       exactamente la ventana y no llega a tener scroll.

       El orden de los selectores no es libre: .pw-js va en <html> y
       .pw-con-aviso en <body>, en ese orden. */
    .pw-js .pw-con-aviso .pw-nav { top: var(--pw-alto-aviso); }

    /* DECISIÓN, para que quede escrita: con el panel abierto se ve la X y NO se
       ve la marca. Solo se sube el botón por encima del panel.

       El motivo es de foco, no estético: el foco atrapado del menú cicla por la
       X más los enlaces del panel. Si la marca quedara visible por encima,
       sería un enlace que se ve y no se puede alcanzar con el teclado —
       incoherencia peor que no verlo. Dejarla debajo también evita que el
       wordmark choque con el contenido del panel en 320.

       Si algún día se quiere la marca visible ahí, no alcanza con subirle el
       z-index: hay que sumarla al conjunto que cicla en pw-principal.js. */
    .pw-js .pw-nav__lista {
        flex-direction: column;
        align-items: stretch;
        gap: var(--pw-e-1);
    }
    .pw-js .pw-nav__lista a {
        font-size: var(--pw-txt-xl);
        min-height: 56px;
        font-family: var(--pw-fuente-titulo);
    }
    .pw-js .pw-nav__cta {
        margin-top: var(--pw-e-6);
        font-size: var(--pw-txt-base);
    }
}

/* Sin JS y bajo 768px el header no puede ser de alto fijo, o recortaría el nav. */
@media (max-width: 767.98px) {
    html:not(.pw-js) .pw-cabecera { position: static; height: auto; padding-block: var(--pw-e-3); }
    html:not(.pw-js) .pw-cabecera__fila { flex-wrap: wrap; }
    html:not(.pw-js) body { padding-top: 0; }
}

@media (min-width: 768px) {
    .pw-js .pw-hamburguesa { display: none; }
    .pw-nav { flex-wrap: nowrap; gap: var(--pw-e-4); }
}


/* ==========================================================================
   2. Tarjeta de destino
   ========================================================================== */

.pw-destinos {
    display: grid;
    gap: var(--pw-e-5);
    grid-template-columns: 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 768px)  { .pw-destinos { grid-template-columns: repeat(2, 1fr); gap: var(--pw-e-6); } }
@media (min-width: 1024px) { .pw-destinos { grid-template-columns: repeat(3, 1fr); } }

.pw-tarjeta-destino {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--pw-superficie);
    border: 1px solid var(--pw-borde-sutil);
    border-radius: var(--pw-radio-lg);
    overflow: hidden;
    box-shadow: var(--pw-sombra-suave);
    transition: transform var(--pw-dur-media) var(--pw-ease),
                box-shadow var(--pw-dur-media) var(--pw-ease),
                border-color var(--pw-dur-media) var(--pw-ease);
}

@media (hover: hover) {
    /* En táctil el hover pegado es un defecto, por eso va dentro del media. */
    .pw-tarjeta-destino:hover {
        transform: translateY(-3px);
        box-shadow: var(--pw-sombra-alta);
        border-color: var(--pw-borde-ui);
    }
}
.pw-tarjeta-destino:active {
    transform: translateY(0);
    box-shadow: var(--pw-sombra-suave);
}

.pw-tarjeta-destino__cuerpo {
    padding: var(--pw-e-5);
    display: flex;
    flex-direction: column;
    gap: var(--pw-e-2);
    flex: 1;
}
.pw-tarjeta-destino__pais { font-size: var(--pw-txt-xl); color: var(--pw-txt-actual); margin: 0; }
.pw-tarjeta-destino__nota { font-size: var(--pw-txt-sm); color: var(--pw-txt-suave); margin: 0; }

/* Enlace estirado: el área clicable es la tarjeta entera (muy por encima de
   44×44), pero el nombre accesible del enlace sigue siendo su texto. */
.pw-tarjeta-destino__enlace {
    margin-top: auto;
    padding-top: var(--pw-e-3);
    font-size: var(--pw-txt-sm);
    font-weight: var(--pw-peso-medio);
    color: var(--pw-acento-texto);            /* sobre claro = --pw-texto (13.67) */
    text-decoration-color: var(--pw-borde-ui);
    text-underline-offset: 4px;
}
.pw-tarjeta-destino__enlace::after { content: ""; position: absolute; inset: 0; }

/* La décima tarjeta: invertida a propósito, para que se lea como cierre y no
   como país faltante.

   Es una isla oscura dentro de una sección clara, así que REDEFINE las
   variables de contexto en vez de pisar colores uno por uno. Pisarlos a mano
   deja fuera los que nadie recuerda: el text-decoration-color del enlace toma
   --pw-borde-ui, y con el valor claro heredado daba 2.21 sobre marino. */
.pw-tarjeta-destino--mas {
    --pw-txt-actual:   var(--pw-texto-sobre-oscuro);   /* 14.38 sobre marino */
    --pw-txt-suave:    var(--pw-texto-suave-oscuro);   /*  9.48 */
    --pw-borde-ui:     var(--pw-borde-ui-oscuro);      /*  9.48 — subrayado del enlace */
    --pw-acento-texto: var(--pw-dorado-claro);         /*  8.58 — color del enlace */
    --pw-fondo-actual: var(--pw-azul-marino);
    background-color: var(--pw-azul-marino);
    border-color: var(--pw-dorado);
    justify-content: center;
    min-height: 220px;
}
.pw-tarjeta-destino--mas .pw-filete { margin-block: 0 var(--pw-e-3); }

/* --- La décima, como banda de cierre --------------------------------------
   No lleva ilustración, así que en tres columnas caía sola en una cuarta fila,
   más baja que las otras nueve y con dos huecos a la derecha: se leía como
   contenido que falta, no como cierre. Ocupa la fila entera.

   `1 / -1` resuelve los tres breakpoints con una sola regla: a una columna es
   esa columna (o sea, se comporta como hoy), a dos son dos y a tres son tres.
   El grid-column va en el <li>, que es el ítem de la grilla; la <article> es
   su hija y no participa del reparto. */
.pw-destinos__cierre { grid-column: 1 / -1; }

/* Los dos grupos son flex desde la base, no solo a partir de 768: al meter la
   nota y el enlace dentro de un <div> dejaron de ser hijos directos del cuerpo
   y perdieron su `gap`. Sin esto, en móvil el enlace queda pegado a la nota.
   A partir de 768 el grupo de acción pasa a fila; el de título nunca. */
.pw-tarjeta-destino__mas-titulo,
.pw-tarjeta-destino__mas-accion {
    display: flex;
    flex-direction: column;
    gap: var(--pw-e-2);
}

@media (min-width: 768px) {
    /* De tarjeta a banda: alto de contenido, no el alto de una tarjeta con
       foto. El min-height de 220px existía para que no quedara enana al lado
       de las otras; a todo el ancho la achataría al revés. */
    .pw-tarjeta-destino--mas { min-height: 0; }

    /* nowrap a propósito: en flexbox el envoltorio ocurre ANTES de que los
       ítems se encojan, así que con wrap la acción se iba entera a una segunda
       línea en cuanto el ancho apretaba (medido: se partía a 900px). Sin wrap,
       lo que cede es la nota dentro de su grupo y la banda sigue siendo una
       fila en los tres breakpoints. */
    .pw-tarjeta-destino--mas .pw-tarjeta-destino__cuerpo {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--pw-e-6) var(--pw-e-10);
        padding: var(--pw-e-6) var(--pw-e-8);
    }

    /* El título manda su ancho; la acción se queda con el resto y se alinea al
       borde derecho. Sin esto, a dos columnas (banda de ~817px) la nota a 46ch
       más el enlace no entraban y el grupo entero se iba a una segunda línea:
       medido en render, la banda se partía en dos. Ahora lo que se reacomoda
       es la nota dentro de su propio grupo, y la banda sigue siendo una fila. */
    .pw-tarjeta-destino__mas-titulo { flex: 0 1 auto; }

    .pw-tarjeta-destino__mas-accion {
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--pw-e-3) var(--pw-e-6);
    }

    /* En la banda el enlace ya no se empuja al fondo de una columna: va al
       lado de la nota. El nowrap evita que "Preguntar por otro destino" se
       parta en dos líneas contra el borde derecho. */
    .pw-tarjeta-destino--mas .pw-tarjeta-destino__enlace {
        margin-top: 0;
        padding-top: 0;
        white-space: nowrap;
    }
    .pw-tarjeta-destino--mas .pw-tarjeta-destino__nota { max-width: 46ch; }
}


/* --- Hueco de la foto real: SE FUE el 2026-08-02 --------------------------
   Era .pw-hueco-foto, un tramado diagonal tenue que reservaba el lugar de una
   foto que todavía no había. Le quedaba un solo uso, el de "quiénes somos", y
   ese dejó de existir cuando el cliente confirmó que NO tiene fotos del equipo
   ni de las oficinas: el hueco pasó a ser una ilustración definitiva
   (.pw-ilus--quienes). Con cero usos, la regla y su token --pw-tramado-hueco
   se borraron en vez de quedar de adorno.

   Si vuelve a hacer falta reservar el lugar de una foto, era esto, y se copia
   tal cual (NO hay historial de versiones donde buscarlo — el proyecto todavía
   no es un repo, CLAUDE.md §2.9):

       aspect-ratio: 4 / 3;  width: 100%;
       background-color: var(--pw-borde-sutil-claro);
       background-image: repeating-linear-gradient(135deg,
           transparent 0 10px, rgba(14,42,78,.045) 10px 20px);
       border-bottom: 1px solid var(--pw-dorado);

   El tramado no llevaba texto de placeholder a propósito: el visitante no
   tenía que enterarse de que faltaba una foto. */
.pw-tarjeta-destino__foto {
    display: block;
    width: 100%;
    object-fit: cover;
}


/* --- Ilustración de destino ------------------------------------------------
   Trazo fino dorado sobre azul marino, un motivo por país. Es PROVISIONAL:
   ocupa el lugar de la foto real hasta que el cliente entregue las fotos
   (ver el comentario de reemplazo en index.php).

   Las nueve comparten viewBox 0 0 320 240, horizonte en y=176, halo en
   (160,110) r=84 y stroke-width 2. Eso es lo que hace que se vean del mismo
   set y no como nueve dibujos sueltos.

   OJO: esto NO reemplaza a .pw-hueco-foto, que sigue en uso en "quiénes
   somos" (index.php, data-pw-foto="equipo"). Solo reemplaza su uso dentro de
   las tarjetas de destino. */
.pw-ilus {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;                          /* la misma que tenía el hueco de foto */
    background-color: var(--pw-azul-marino);
    border-bottom: 1px solid var(--pw-dorado);    /* filete decorativo: 2.40 sobre blanco */
}
.pw-ilus svg { display: block; width: 100%; height: 100%; }

.pw-ilus path,
.pw-ilus line,
.pw-ilus circle {
    fill: none;
    stroke: var(--pw-dorado);                     /* 6.00 sobre azul marino */
    stroke-width: var(--pw-ilus-trazo);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Atmósfera pura: no dibujan el motivo, lo encuadran. El 45% da 2.26 sobre
   marino, el mismo orden que el filete ya autorizado. No bajarlo: por debajo
   el halo desaparece en pantallas con brillo bajo.

   OJO con el selector: tiene que ser MÁS específico que `.pw-ilus circle` y
   `.pw-ilus line` (0,1,1). Escrito como `.pw-ilus__halo` suelto (0,1,0) pierde
   y el trazo fino no se aplica nunca — medido en render: salía a 2px. */
.pw-ilus .pw-ilus__halo,
.pw-ilus .pw-ilus__horizonte {
    stroke-width: var(--pw-ilus-trazo-fino);
    opacity: var(--pw-ilus-atmosfera);
}


/* --- Banderas -------------------------------------------------------------
   viewBox 0 0 30 20 (3:2), 30×20px renderizados. Solo bandas, franjas y formas
   geométricas: ningún escudo, ninguna estrella detallada. Las estrellas de
   EE.UU. y Panamá se resuelven con <circle>.

   Los rellenos NO van en el atributo fill (`fill="var(--x)"` no es válido como
   atributo de presentación). Van por CSS, con clases de banda genéricas. */

.pw-bandera { display: inline-flex; flex: 0 0 auto; }
.pw-bandera svg {
    display: block;
    width: 30px;
    height: 20px;
    border-radius: var(--pw-radio-xs);
}

/* El marco existe para que las franjas blancas no desaparezcan sobre la
   tarjeta blanca. */
.pw-bandera__marco {
    fill: none;
    stroke: var(--pw-borde-ui-claro);
    stroke-width: .5;
    opacity: .45;
}

.pw-bandera--cr .pw-b-1 { fill: var(--pw-bandera-azul-cr); }
.pw-bandera--cr .pw-b-2 { fill: var(--pw-bandera-blanco); }
.pw-bandera--cr .pw-b-3 { fill: var(--pw-bandera-rojo); }

.pw-bandera--mx .pw-b-1 { fill: var(--pw-bandera-verde-mx); }
.pw-bandera--mx .pw-b-2 { fill: var(--pw-bandera-blanco); }
.pw-bandera--mx .pw-b-3 { fill: var(--pw-bandera-rojo); }

.pw-bandera--do .pw-b-1 { fill: var(--pw-bandera-azul-do); }
.pw-bandera--do .pw-b-2 { fill: var(--pw-bandera-rojo); }
.pw-bandera--do .pw-b-3 { fill: var(--pw-bandera-blanco); }

.pw-bandera--pa .pw-b-1 { fill: var(--pw-bandera-blanco); }
.pw-bandera--pa .pw-b-2 { fill: var(--pw-bandera-rojo-pa); }
.pw-bandera--pa .pw-b-3 { fill: var(--pw-bandera-azul-pa); }

.pw-bandera--co .pw-b-1 { fill: var(--pw-bandera-amarillo-co); }
.pw-bandera--co .pw-b-2 { fill: var(--pw-bandera-azul-co); }
.pw-bandera--co .pw-b-3 { fill: var(--pw-bandera-rojo); }

.pw-bandera--us .pw-b-1   { fill: var(--pw-bandera-rojo-us); }
.pw-bandera--us .pw-b-2   { fill: var(--pw-bandera-blanco); }
.pw-bandera--us .pw-b-3   { fill: var(--pw-bandera-azul-us); }
.pw-bandera--us .pw-b-est { fill: var(--pw-bandera-blanco); }

.pw-bandera--es .pw-b-1 { fill: var(--pw-bandera-rojo-es); }
.pw-bandera--es .pw-b-2 { fill: var(--pw-bandera-amarillo-es); }

.pw-bandera--it .pw-b-1 { fill: var(--pw-bandera-verde-it); }
.pw-bandera--it .pw-b-2 { fill: var(--pw-bandera-blanco); }
.pw-bandera--it .pw-b-3 { fill: var(--pw-bandera-rojo-it); }

.pw-bandera--fr .pw-b-1 { fill: var(--pw-bandera-azul-fr); }
.pw-bandera--fr .pw-b-2 { fill: var(--pw-bandera-blanco); }
.pw-bandera--fr .pw-b-3 { fill: var(--pw-bandera-rojo-fr); }


/* ==========================================================================
   3. Paso numerado
   El paso NO es interactivo: no tiene hover, ni foco, ni estado activo.
   ========================================================================== */

.pw-pasos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pw-e-10);
}
@media (min-width: 768px) {
    .pw-pasos { grid-template-columns: repeat(4, 1fr); gap: var(--pw-e-6); }
}

/* Sin position:relative: ya no hay nada absoluto adentro. El hilo conector se
   eliminó en fase 2 §2 — colgaba de .pw-paso:not(:last-child)::before, así que
   dibujaba tres segmentos sueltos entre cuatro pasos en vez de una línea. */
.pw-paso {
    display: flex;
    gap: var(--pw-e-4);
    align-items: flex-start;
}
@media (min-width: 768px) {
    .pw-paso { flex-direction: column; gap: var(--pw-e-4); }
}

/* Número dentro de un círculo de borde dorado fino. El paso NO es interactivo,
   así que no le aplica el mínimo táctil de 44px: 52/56 es una decisión
   tipográfica (el glifo ocupa ~45% del diámetro, la proporción a la que un
   número dentro de un círculo se lee como rótulo y no como botón). */
.pw-paso__numero {
    display: grid;
    place-items: center;
    width:  var(--pw-paso-circulo);
    height: var(--pw-paso-circulo);
    flex: 0 0 var(--pw-paso-circulo);      /* que no lo achique el flex al lado del título */
    border: 1px solid var(--pw-dorado);    /* 6.00 sobre marino */
    border-radius: var(--pw-radio-circulo);

    font-family: var(--pw-fuente-titulo);
    font-size: var(--pw-txt-xl);
    font-weight: var(--pw-peso-medio);     /* a 300 desaparece; a 600 pesa más que el h3 */
    line-height: 1;
    color: var(--pw-dorado-claro);         /* 8.58 sobre marino */
    font-variant-numeric: tabular-nums;    /* 01 y 04 ocupan lo mismo: los cuatro
                                              círculos con el número centrado */
    /* Si esta sección se pasara alguna vez a piel clara, el aro y el número
       dejan de ser dorados: dorado sobre hueso da 2.28 y dorado claro 1.59.
       Pasarían a --pw-borde-ui-claro (6.20) y --pw-texto (13.67). */
}
.pw-paso__titulo  { font-size: var(--pw-txt-xl); color: var(--pw-txt-actual); margin: 0 0 var(--pw-e-2); }
.pw-paso__detalle { color: var(--pw-txt-suave); font-size: var(--pw-txt-sm); margin: 0; }


/* ==========================================================================
   4. Ítem de FAQ — patrón disclosure, no tabs
   ========================================================================== */

.pw-faq { border-top: 1px solid var(--pw-borde-sutil); }

.pw-faq__item { border-bottom: 1px solid var(--pw-borde-sutil); }

.pw-faq__encabezado { margin: 0; font: inherit; }   /* el <h3> no aporta estilo, solo jerarquía */

.pw-faq__disparador {
    width: 100%;
    min-height: var(--pw-tactil);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pw-e-4);
    padding: var(--pw-e-5) var(--pw-e-1);
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--pw-fuente-cuerpo);
    font-size: var(--pw-txt-lg);
    font-weight: var(--pw-peso-medio);
    line-height: var(--pw-lh-compacto);
    color: var(--pw-txt-actual);          /* 13.67 sobre hueso */
    border-radius: var(--pw-radio-sm);
}
@media (hover: hover) {
    .pw-faq__disparador:hover .pw-faq__pregunta { text-decoration: underline; text-underline-offset: 4px; }
}
.pw-faq__disparador:active { transform: translateY(1px); }

/* Indicador: FORMA, no color. + cerrado → − abierto. Sobrevive a daltonismo,
   a alto contraste de Windows y a una impresión en blanco y negro. */
.pw-faq__indicador { flex: 0 0 auto; }
.pw-faq__indicador svg { display: block; width: 16px; height: 16px; overflow: visible; }
.pw-faq__indicador line {
    stroke: var(--pw-txt-actual);
    stroke-width: 1.5;
    stroke-linecap: round;
    transition: transform var(--pw-dur-media) var(--pw-ease),
                opacity var(--pw-dur-media) var(--pw-ease);
    transform-origin: 8px 8px;
}
.pw-faq__disparador[aria-expanded="true"] .pw-faq__barra-v { transform: scaleY(0); opacity: 0; }

/* Apertura sin medir alturas con JS. ABIERTO por defecto = estado sin JS. */
.pw-faq__panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--pw-dur-media) var(--pw-ease);
}
.pw-faq__interior { overflow: hidden; }
.pw-faq__interior > p {
    margin: 0;
    padding: 0 var(--pw-e-1) var(--pw-e-6);
    color: var(--pw-txt-suave);              /* 6.20 sobre hueso */
    max-width: var(--pw-ancho-lectura);
}
/* El colapso existe SOLO bajo .pw-js, y cuelga de un atributo que el JS
   escribe en el ÍTEM.

   Por qué no es un hermano adyacente del botón: el <button> vive dentro del
   <h3 class="pw-faq__encabezado">, así que el hermano del panel es el <h3>, no
   el botón — un `.pw-faq__disparador[aria-expanded="false"] + .pw-faq__panel`
   matchea cero elementos y el panel no colapsa nunca, con el aria-expanded
   diciendo lo contrario.

   Por qué tampoco `:has()`: si un navegador no lo soportara, degradaría
   exactamente al defecto que esto arregla (atributo que miente). Un atributo
   no depende del soporte de nada. */
.pw-js .pw-faq__item[data-pw-abierto="no"] .pw-faq__panel { grid-template-rows: 0fr; }


/* ==========================================================================
   5. Tarjeta de compromiso (sección 9: antes / durante / después)

   Reemplazó a la tarjeta de testimonio el 2026-08-02, cuando el cliente
   confirmó que no tiene testimonios. Conserva de ella el chasis que ya estaba
   medido —grilla de tres, superficie con borde sutil, mismo radio y mismo
   padding— y suelta todo lo que existía solo para una cita: el par de
   comillas, el avatar, la firma y el reserva de 40px que la comilla de cierre
   obligaba a dejar en la esquina.

   Grilla estática, NUNCA carrusel: un carrusel deja el contenido dependiendo
   del JS, se lleva mal con prefers-reduced-motion y esconde dos de cada tres
   tarjetas. No es interactiva: sin hover, sin foco, sin estado activo.

   Y ya no hace falta el apilado de 768–1069 que tenía la firma. Ese breakpoint
   existía porque avatar (56) + hueco (16) + reserva (40) le dejaban 57px al
   nombre en la columna más angosta. Sin avatar y sin reserva, la tarjeta es
   un bloque de texto de ancho completo: no hay nada que apilar.
   ========================================================================== */

.pw-compromisos { display: grid; gap: var(--pw-e-6); }
@media (min-width: 768px) { .pw-compromisos { grid-template-columns: repeat(3, 1fr); } }

.pw-compromiso {
    position: relative;
    margin: 0;
    /* min-width: 0 se queda aunque ya no haya avatar. Las pistas `1fr` toman
       como mínimo el contenido mínimo de la celda, y sin esto una palabra larga
       del texto puede volver a empujar la pista más allá de su ancho y desbordar
       la página en horizontal — que es el defecto que se midió acá en su día. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pw-e-3);
    padding: var(--pw-e-8) var(--pw-e-6) var(--pw-e-6);
    background-color: var(--pw-superficie);          /* #12325C */
    border: 1px solid var(--pw-borde-sutil);         /* la tarjeta se separa por BORDE, no por
                                                        relleno: superficie vs marino da 1.12 */
    border-radius: var(--pw-radio-lg);
}

/* El número ocupa el lugar exacto que tenía la comilla de apertura: misma
   esquina, misma familia de título, mismo dorado. Es lo que hace que la
   sección se siga viendo de la misma familia después del cambio.

   A diferencia de la comilla NO va absolute: es la primera línea real del
   flujo. La comilla tenía que salirse del flujo para no empujar la cita;
   el número sí quiere empujar, es parte de la jerarquía. */
.pw-compromiso__numero {
    font-family: var(--pw-fuente-titulo);
    font-style: italic;
    font-weight: var(--pw-peso-titulo);
    font-size: var(--pw-marca-tam);                  /* 3.25rem, el mismo tamaño que tenía
                                                        la comilla que estaba acá */
    line-height: 1;
    color: var(--pw-dorado);                         /* 5.35 sobre superficie oscura */
}
.pw-compromiso__fase {
    margin: 0;
    font-size: var(--pw-txt-lg);
    line-height: var(--pw-lh-titulo);
    color: var(--pw-txt-actual);                     /* 12.83 sobre superficie oscura */
}
.pw-compromiso__texto {
    margin: 0;
    font-size: var(--pw-txt-sm);
    line-height: var(--pw-lh-cuerpo);
    color: var(--pw-txt-suave);                      /* 8.46 sobre superficie oscura */
}


/* ==========================================================================
   6. Tarjeta de beneficio ("por qué elegirnos")
   Sección 8: clara, con tarjetas de superficie blanca sobre hueso. La sección
   7 también es clara y el par 7+8 es la única pausa de dos claras seguidas del
   sitio: por eso la 8 OBLIGA tarjetas, que es lo que las distingue.
   ========================================================================== */

.pw-beneficios {
    display: grid;
    gap: var(--pw-e-5);
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 768px)  { .pw-beneficios { grid-template-columns: repeat(2, 1fr); gap: var(--pw-e-6); } }
@media (min-width: 1024px) { .pw-beneficios { grid-template-columns: repeat(3, 1fr); } }

.pw-beneficio {
    display: flex;
    flex-direction: column;
    gap: var(--pw-e-3);
    height: 100%;
    padding: var(--pw-e-6);
    background-color: var(--pw-superficie);
    border: 1px solid var(--pw-borde-sutil);
    border-radius: var(--pw-radio-lg);
    box-shadow: var(--pw-sombra-suave);
}

/* El ícono es decoración de relleno acompañada de texto legible: ese es el
   único uso del dorado autorizado sobre fondo claro (CLAUDE.md §2.2 regla 1).
   Va aria-hidden: no transmite información que el texto no tenga. */
.pw-beneficio__icono {
    display: inline-flex;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
}
.pw-beneficio__icono svg {
    display: block;
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--pw-dorado);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pw-beneficio__titulo { margin: 0; font-size: var(--pw-txt-lg); color: var(--pw-txt-actual); }
.pw-beneficio__texto  { margin: 0; font-size: var(--pw-txt-sm); color: var(--pw-txt-suave); }


/* ==========================================================================
   7. Formulario de contacto
   Sin backend, sin endpoint, sin dato guardado. El JS valida en cliente y
   compone el enlace de wa.me. El error NUNCA se comunica solo por color:
   siempre hay texto.
   ========================================================================== */

.pw-formulario {
    display: grid;
    gap: var(--pw-e-5);
    text-align: left;
}

/* Sin `gap`: el <p role="alert"> de cada campo vive SIEMPRE en el DOM (si se
   ocultara con display:none, el lector de pantalla no anunciaría el error al
   aparecer, porque el nodo no estaba en el árbol de accesibilidad). Vacío mide
   cero, pero un `gap` de flex se aplicaría igual y dejaría un hueco. Por eso el
   espaciado va por margen. */
.pw-campo { display: flex; flex-direction: column; }

.pw-campo__etiqueta {
    margin-bottom: var(--pw-e-2);
    font-size: var(--pw-txt-sm);
    font-weight: var(--pw-peso-medio);
    color: var(--pw-txt-actual);
    letter-spacing: .02em;
}
.pw-campo__opcional {
    font-weight: var(--pw-peso-cuerpo);
    color: var(--pw-txt-suave);
}

.pw-campo__control {
    width: 100%;
    min-height: 48px;
    padding: var(--pw-e-3) var(--pw-e-4);
    font-family: var(--pw-fuente-cuerpo);
    font-size: var(--pw-txt-base);
    line-height: var(--pw-lh-compacto);
    color: var(--pw-txt-actual);
    background-color: transparent;
    border: 1px solid var(--pw-borde-ui);   /* borde FUNCIONAL: 9.48 sobre marino */
    border-radius: var(--pw-radio-sm);
}
textarea.pw-campo__control { min-height: 120px; resize: vertical; }

.pw-campo__control::placeholder { color: var(--pw-txt-suave); opacity: 1; }

.pw-campo__control[aria-invalid="true"] {
    border-color: var(--pw-error-actual);
    border-width: 2px;
}

/* El <select> nativo pinta su lista con los colores del sistema; forzamos el
   color de las <option> para que no quede texto claro sobre fondo claro. */
.pw-campo__control option { color: var(--pw-texto); background-color: var(--pw-blanco); }

.pw-campo__error {
    margin: var(--pw-e-2) 0 0;
    font-size: var(--pw-txt-sm);
    font-weight: var(--pw-peso-medio);
    color: var(--pw-error-actual);
}
/* Vacío no ocupa nada, pero SIGUE en el DOM: es lo que hace que el anuncio
   funcione cuando el JS le escribe el texto. */
.pw-campo__error:empty { margin-top: 0; }

/* Mismo criterio para el <p role="status"> del formulario. */
.pw-formulario__pie { display: flex; flex-direction: column; }
.pw-formulario__estado {
    margin: var(--pw-e-3) 0 0;
    font-size: var(--pw-txt-sm);
    color: var(--pw-txt-actual);
}
.pw-formulario__estado:empty { margin-top: 0; }
.pw-formulario__nota {
    margin: var(--pw-e-3) 0 0;
    font-size: var(--pw-txt-xs);
    color: var(--pw-txt-suave);
}


/* ==========================================================================
   8. Pie de página
   Es CHASIS, no sección: tipografía chica y padding menor que --pw-seccion-y.
   Por eso puede compartir familia de fondo con el CTA sin aplastarlo, y lo
   separa un filete dorado a todo el ancho (legal: sobre oscuro da 6.00).
   ========================================================================== */

.pw-pie {
    background-color: var(--pw-azul-noche);
    border-top: 1px solid var(--pw-dorado);
    padding-block: var(--pw-e-12);
    /* El pie reserva la altura de la pila de flotantes más su margen: el bloque
       legal y los enlaces de contacto son lo último de la página y son lo único
       que un flotante puede tapar sin que el usuario pueda destaparlo. */
    padding-bottom: calc(var(--pw-e-12)
                       + var(--pw-flotante-wa)
                       + var(--pw-flotante-hueco)
                       + var(--pw-flotante-subir)
                       + var(--pw-flotante-margen));
    color: var(--pw-texto-sobre-oscuro);

    --pw-txt-actual:   var(--pw-texto-sobre-oscuro);
    --pw-txt-suave:    var(--pw-texto-suave-oscuro);
    --pw-borde-sutil:  var(--pw-borde-sutil-oscuro);
    --pw-borde-ui:     var(--pw-borde-ui-oscuro);
    --pw-acento-texto: var(--pw-dorado-claro);
}

.pw-pie__rejilla {
    display: grid;
    gap: var(--pw-e-10);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .pw-pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--pw-e-8); }
}

/* Acá sí entra el logo completo: a 200px de ancho la palabra "PARADISE" queda
   en unos 27px de caja, muy legible (fase 2 §4.4). */
.pw-pie__marca {
    display: inline-block;
    border-radius: var(--pw-radio-lg);
    text-decoration: none;
}

/* Radio grande (14px) porque la placa es del tamaño de una tarjeta; la de la
   cabecera usa 8px porque es del tamaño de un botón.
   El relleno de 16px es OBLIGATORIO: la tinta del JPEG llega a los cuatro
   bordes (la P toca x=0 y la E final x=639), así que sin relleno el
   border-radius recorta las letras. Medido, no supuesto (fase 2 §4.2 a). */
.pw-pie__placa {
    display: inline-block;
    background-color: var(--pw-blanco);          /* 16.89 sobre azul noche */
    border-radius: var(--pw-radio-lg);
    padding: var(--pw-placa-pie-pad);            /* 16px */
}
.pw-pie__placa img {
    display: block;
    width: 100%;
    max-width: var(--pw-placa-pie-ancho);        /* 200px */
    height: auto;
}

/* La bajada del logo mide 4.7px dentro del JPEG a 200px de ancho: es textura,
   no texto. Es una frase de marca del cliente, así que va como texto real. */
.pw-pie__bajada {
    margin: var(--pw-e-4) 0 0;
    font-size: var(--pw-txt-sm);
    font-style: italic;
    letter-spacing: .04em;
    color: var(--pw-dorado-claro);               /* 10.08 sobre azul noche */
}

.pw-pie__lema {
    margin: var(--pw-e-3) 0 0;
    font-size: var(--pw-txt-sm);
    color: var(--pw-txt-suave);
    max-width: 38ch;
}

.pw-pie__titulo {
    margin: 0 0 var(--pw-e-3);
    font-family: var(--pw-fuente-cuerpo);
    font-size: var(--pw-txt-sm);
    font-weight: var(--pw-peso-medio);
    letter-spacing: var(--pw-track-etiqueta);
    text-transform: uppercase;
    color: var(--pw-acento-texto);          /* dorado claro: 10.08 sobre azul noche */
}

.pw-pie__lista { list-style: none; margin: 0; padding: 0; }
.pw-pie__lista li + li { margin-top: var(--pw-e-1); }
.pw-pie__lista a {
    display: inline-flex;
    align-items: center;
    min-height: var(--pw-tactil);
    font-size: var(--pw-txt-sm);
    color: var(--pw-txt-suave);             /* 11.14 sobre azul noche */
    text-decoration: none;
    border-radius: var(--pw-radio-sm);
}
@media (hover: hover) {
    .pw-pie__lista a:hover { color: var(--pw-texto-sobre-oscuro); text-decoration: underline; text-underline-offset: 4px; }
}

/* Redes sociales — ENLACES REALES desde el 2026-08-02.
   Hasta entonces eran .pw-redes__icono, tres <span> inertes: un <a> sin href o
   con href="#" es peor que ningún enlace. Ahora son dos <a> con destino, y el
   cambio de nombre de la clase es a propósito — "icono" describía un adorno y
   estos ya no lo son.

   El foco no se declara acá: lo da la regla global de pw-base.css, que cubre
   :where(a, button, …):focus-visible con el doble halo. Escribirlo de nuevo
   sería una segunda fuente para el mismo estado. */
.pw-redes {
    display: flex;
    gap: var(--pw-e-3);
    margin-top: var(--pw-e-4);
}
.pw-redes__enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 40px y no los 36 que tenían de adorno: ahora hay que poder TOCARLOS con
       el pulgar. Con los 12px de gap, dos objetivos de 40 quedan cómodos en
       móvil y el pie no cambia de alto (el bloque lo fija el logo). */
    width: 40px;
    height: 40px;
    border: 1px solid var(--pw-borde-sutil-oscuro);
    border-radius: var(--pw-radio-circulo);
    transition: border-color var(--pw-dur-rapida) var(--pw-ease),
                background-color var(--pw-dur-rapida) var(--pw-ease);
}
.pw-redes__enlace:hover {
    border-color: var(--pw-dorado);                  /* 6.00 sobre azul noche */
    background-color: var(--pw-superficie);
}
.pw-redes__enlace svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--pw-dorado-claro);                  /* 10.08 sobre azul noche */
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pw-pie__legal {
    margin-top: var(--pw-e-10);
    padding-top: var(--pw-e-6);
    border-top: 1px solid var(--pw-borde-sutil-oscuro);
    font-size: var(--pw-txt-xs);
    color: var(--pw-txt-suave);
}
.pw-pie__legal p { margin: 0; }

/* Crédito del estudio. Selector compuesto (.pw-pie__legal p.pw-pie__credito)
   a propósito: necesita ganarle en especificidad a ".pw-pie__legal p { margin:
   0 }" de arriba para poner su propio margin-top sin !important. */
.pw-pie__legal p.pw-pie__credito {
    display: flex;
    align-items: center;
    gap: var(--pw-e-2);
    margin-top: var(--pw-e-3);
}
.pw-pie__credito svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;      /* hereda --pw-txt-suave del <p>, igual que el texto */
    /* El <text> de adentro es texto real, seleccionable y copiable pese al
       aria-hidden (eso resuelve el lector de pantalla, no la selección). Sin
       esto, seleccionar el crédito arrastra un "<C/>" pegado al texto, y el
       glifo queda indexable como contenido. -webkit- primero por Safari/iOS,
       que todavía no reconoce la propiedad sin prefijo en todos sus motores. */
    -webkit-user-select: none;
    user-select: none;
}
.pw-pie__credito text {
    font-family: ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;
    font-weight: 700;
}
.pw-pie__credito a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: var(--pw-radio-sm);
}
@media (hover: hover) {
    .pw-pie__credito a:hover { color: var(--pw-texto-sobre-oscuro); }
}


/* ==========================================================================
   9. Botones flotantes
   Conviven: WhatsApp abajo (siempre), volver arriba encima (condicional).

   Por qué WhatsApp abajo: el que siempre está tiene que ser el anclado. Si el
   condicional ocupara la posición de abajo, al aparecer empujaría a WhatsApp
   hacia arriba y el botón permanente se movería solo mientras el usuario hace
   scroll.

   El problema de fondo: un flotante pasa por encima de secciones claras Y
   oscuras, así que su límite tiene que percibirse en las dos. Misma lógica
   bicolor que el anillo de foco — el relleno resuelve una piel, el aro la otra.
   ========================================================================== */

.pw-flotantes {
    position: fixed;
    right:  var(--pw-flotante-margen);
    bottom: var(--pw-flotante-margen);
    z-index: var(--pw-z-pegajoso);          /* 10 */
    width: var(--pw-flotante-wa);
    height: calc(var(--pw-flotante-wa) + var(--pw-flotante-hueco) + var(--pw-flotante-subir));
}

.pw-flotante {
    position: absolute;
    right: 0;                                /* los dos alineados por el borde derecho */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--pw-radio-circulo);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--pw-dur-rapida) var(--pw-ease),
                color            var(--pw-dur-rapida) var(--pw-ease),
                transform        var(--pw-dur-rapida) var(--pw-ease);
}
.pw-flotante svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- WhatsApp: la MISMA cara que .pw-boton--primario ----------------------
   La acción principal del sitio tiene una sola cara en toda la página; un
   flotante con color propio sería una cuarta identidad de botón. El verde de
   marca #25D366 está descartado y medido: blanco sobre él da 1.98 y él sobre
   hueso da 1.88. */
.pw-flotante--wa {
    bottom: 0;
    width:  var(--pw-flotante-wa);
    height: var(--pw-flotante-wa);
    background-color: var(--pw-dorado);
    color: var(--pw-azul-noche);              /* 7.04 — el ícono */
    border: 1px solid var(--pw-azul-noche);   /* 16.05 sobre hueso: es lo que le da
                                                 límite sobre las secciones claras,
                                                 donde el relleno dorado da 2.28 */
}
.pw-flotante--wa svg { width: 26px; height: 26px; }

@media (hover: hover) {
    .pw-flotante--wa:hover {
        background-color: var(--pw-dorado-claro);
        color: var(--pw-azul-noche);          /* 10.08 */
        transform: translateY(-2px);
    }
}
.pw-flotante--wa:active { background-color: var(--pw-dorado); transform: translateY(0); }

/* --- Volver arriba -------------------------------------------------------
   No compite con el CTA porque no comparte nada con él: ni el dorado, ni el
   tamaño, ni la posición. Sin JS no se muestra: su única función es una acción
   de JS, y un botón que no hace nada es peor que no tenerlo (mismo criterio
   que la hamburguesa). */
.pw-flotante--subir { display: none; }

.pw-js .pw-flotante--subir {
    display: inline-flex;
    bottom: calc(var(--pw-flotante-wa) + var(--pw-flotante-hueco));
    width:  var(--pw-flotante-subir);
    height: var(--pw-flotante-subir);
    /* El <button> se viste entero acá: fondo y aro propios, sin heredar
       ninguno de los estilos de agente de usuario. */
    background-color: var(--pw-azul-noche);
    color: var(--pw-texto-sobre-oscuro);      /* 16.89 — la flecha */
    border: 1px solid var(--pw-borde-ui-oscuro);  /* 9.48 sobre marino: es lo que le da
                                                     límite sobre las secciones oscuras,
                                                     donde el relleno da 1.17 */

    /* visibility, no solo opacity: con opacity:0 el botón sigue recibiendo
       foco por teclado. Mismo patrón que el panel del menú móvil. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--pw-e-2));
    transition: opacity   var(--pw-dur-media) var(--pw-ease),
                transform var(--pw-dur-media) var(--pw-ease),
                visibility 0s linear var(--pw-dur-media);
}
.pw-js .pw-flotante--subir[data-pw-visible="si"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
.pw-flotante--subir svg { width: 22px; height: 22px; }

@media (hover: hover) {
    .pw-flotante--subir:hover {
        background-color: var(--pw-azul-marino);
        transform: translateY(-2px);
    }
}
.pw-flotante--subir:active { transform: translateY(0); }

/* Con prefers-reduced-motion el bloque global de pw-base.css lleva las
   duraciones a .01ms: el botón sigue apareciendo y desapareciendo, pero de
   golpe. Se desactiva la animación, no la funcionalidad. Los desplazamientos
   de hover sí se anulan, como en el resto de los botones. */
@media (prefers-reduced-motion: reduce) {
    .pw-flotante:hover,
    .pw-flotante:active { transform: none !important; }
}


/* ==========================================================================
   10. Aviso de maqueta — contenido sin aprobar

   TODO este bloque está muerto cuando PW_CONTENIDO_APROBADO es true: index.php
   no imprime ni la franja ni la clase .pw-con-aviso, así que ningún selector de
   acá encuentra a nadie y el sitio queda exactamente como si esto no existiera.
   Ese es el motivo de que los desplazamientos del chasis se escriban como
   reglas NUEVAS colgadas de .pw-con-aviso en vez de tocar las reglas de
   body, .pw-cabecera o .pw-seccion: así no hay nada que "volver atrás".

   El día que el contenido quede aprobado para siempre, se borran: este bloque,
   los tokens --pw-aviso-* y --pw-alto-aviso, --pw-z-aviso, y la constante con
   su bloque en index.php.
   ========================================================================== */

.pw-aviso-maqueta {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--pw-z-aviso);
    min-height: var(--pw-alto-aviso);
    display: flex;
    align-items: center;
    padding-block: var(--pw-e-2);
    background-color: var(--pw-aviso-fondo);
    color: var(--pw-aviso-texto);              /* 12.16 sobre el amarillo — medido */
    border-bottom: 3px solid var(--pw-aviso-borde);
}

.pw-aviso-maqueta__titulo {
    margin: 0 0 var(--pw-e-1);
    font-family: var(--pw-fuente-cuerpo);
    font-size: var(--pw-txt-sm);
    font-weight: var(--pw-peso-fuerte);
    line-height: var(--pw-lh-compacto);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pw-aviso-maqueta__lista {
    margin: 0;
    font-size: var(--pw-txt-xs);
    line-height: var(--pw-lh-compacto);
}

/* --- Lo que la franja le corre al chasis ---------------------------------
   La franja va fija arriba de todo, así que el resto del chasis fijo baja lo
   que ella mide. Son cuatro cosas y las cuatro importan: el hueco que el body
   le reserva a la cabecera, la posición de la cabecera, dónde aterriza un
   ancla, y dónde aparece el enlace de saltar al contenido (que si no, sale
   por debajo de la franja y no se ve). */
.pw-con-aviso { padding-top: calc(var(--pw-alto-header) + var(--pw-alto-aviso)); }

.pw-con-aviso .pw-cabecera { top: var(--pw-alto-aviso); }

.pw-con-aviso .pw-saltar { top: calc(var(--pw-alto-aviso) + var(--pw-e-4)); }

.pw-con-aviso .pw-seccion,
.pw-con-aviso :target {
    scroll-margin-top: calc(var(--pw-alto-header) + var(--pw-alto-aviso) + var(--pw-e-4));
}

/* Sin JS y bajo 768px la cabecera no es fija (se vuelve estática para no
   recortar el nav), así que el body NO le reserva su alto — pero sí tiene que
   reservar el de la franja, que fija sigue siendo. Sin esta regla la franja
   tapa la cabecera entera. */
@media (max-width: 767.98px) {
    html:not(.pw-js) body.pw-con-aviso { padding-top: var(--pw-alto-aviso); }
}