/* ============================================================================
   AdminGYM — Landing de campaña · sistema de diseño "Iron & Volt"
   ----------------------------------------------------------------------------
   Misma identidad del brochure y del panel web: chasis casi negro, acento volt
   (#B8E62E), tipografía condensada pesada y dos motivos que se repiten en toda
   la página —la CINTA VOLT (franjas diagonales tipo cinta de precaución) y el
   RIEL con nodos encendidos (la "corriente" que baja por el costado).

   Orden del archivo:
     1. Tokens          6. Riel y cinta          11. WhatsApp
     2. Base            7. Encabezado            12. Portal / web / sedes
     3. Tipografía      8. Portada (hero)        13. Precios
     4. Botones         9. Dolores               14. Proceso y FAQ
     5. Piezas          10. Acceso y módulos     15. Cierre, pie y móvil
   ========================================================================== */

@import url("fuentes.css");

/* ============================================================================
   RESPALDOS CON MÉTRICAS AJUSTADAS
   ----------------------------------------------------------------------------
   Mientras baja la webfont, el navegador pinta con la fuente del sistema. Barlow
   Semi Condensed mide 87.5% del ancho de Segoe UI al mismo tamaño (medido, no a
   ojo), así que el texto provisional salía 14% más ancho, rewrapeaba y al llegar
   la fuente real TODA la página daba un salto: 0.247 de CLS, el mayor lastre de
   rendimiento de la landing.

   Con size-adjust el respaldo ocupa casi exactamente el mismo espacio que la
   fuente definitiva y el cambio deja de notarse. Cuesta cero bytes.
   ========================================================================== */

/* Uno por peso: si se declaran los tres juntos, el navegador toma la REGULAR del
   sistema y le finge la negrita, que sale más ancha que la negrita de verdad y el
   ajuste deja de servir. Los porcentajes salen de medir cada peso contra su
   equivalente real del sistema. */
@font-face {
    font-family: "Barlow respaldo";
    src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
    size-adjust: 87.5%;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Barlow respaldo";
    src: local("Segoe UI Semibold"), local("Segoe UI"), local("Arial");
    size-adjust: 87.8%;
    font-weight: 500 600;
    font-display: swap;
}

@font-face {
    font-family: "Barlow respaldo";
    src: local("Segoe UI Bold"), local("Arial Bold"), local("Arial");
    size-adjust: 86.6%;
    font-weight: 700 900;
    font-display: swap;
}

/* Archivo Black y Arial Black miden lo mismo (100%): el respaldo va sin ajuste. */
@font-face {
    font-family: "Archivo respaldo";
    src: local("Arial Black"), local("Segoe UI Black"), local("Impact");
    size-adjust: 100%;
    font-display: swap;
}

/* ---------------------------------------------------------------- 1. Tokens */

:root {
    /* La landing es oscura a propósito; le decimos al navegador que no la
       "auto-oscurezca" ni la invierta. */
    color-scheme: dark;

    --ground: #0f1013;
    --ground-2: #131417;
    --card: #17191e;
    --card-2: #1c1f25;
    --card-3: #22262d;

    --ink: #eceef1;
    --ink-2: #9aa1ad;
    /* #6A7079 se veía bien pero no pasaba de 3.8:1 contra ningún fondo del tema.
       #8A9199 alcanza 4.8:1 o más en todos y mantiene la jerarquía de tres grises. */
    --ink-3: #8a9199;

    --volt: #b8e62e;
    --volt-claro: #d4f75e;
    --volt-tenue: #7fa023;
    --volt-hondo: #4d7c0f;

    --linea: #282b31;
    --linea-2: #34383f;
    --alerta: #d4553f;

    --fuente-ui: "Barlow Semi Condensed", "Barlow respaldo", "Segoe UI", system-ui, sans-serif;
    --fuente-display: "Archivo Black", "Archivo respaldo", "Arial Black", sans-serif;

    /* Un solo ritmo de espaciado para toda la página. */
    --e1: 0.5rem;
    --e2: 1rem;
    --e3: 1.5rem;
    --e4: 2.5rem;
    --e5: 4rem;
    --e6: 6.5rem;

    --ancho: 1200px;
    --canal: clamp(1.25rem, 5vw, 4rem);

    --radio: 10px;
    --radio-chico: 6px;

    --sombra: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
    --sombra-volt: 0 0 0 1px rgba(184, 230, 46, 0.25), 0 18px 50px -18px rgba(184, 230, 46, 0.35);

    --transicion: 180ms cubic-bezier(0.32, 0.72, 0.35, 1);
}

/* ------------------------------------------------------------------ 2. Base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    /* Solo para quien no haya pedido menos movimiento: el desplazamiento animado
       marea a algunas personas y el salto instantáneo funciona igual de bien. */
    scroll-behavior: auto;
    /* El encabezado es fijo: sin esto, los enlaces de ancla dejan el título debajo. */
    scroll-padding-top: 84px;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--fuente-ui);
    font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Textura: una rejilla técnica muy tenue + grano. Da "chasis" sin pesar un byte
   extra de imagen (todo es CSS). */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, transparent 75%);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

/* Red de seguridad: los atributos width/height del <img> (que están para reservar el
   hueco y evitar saltos) también cuentan como estilo. Si más adelante alguien fija el
   ancho por CSS y se olvida de la altura, la imagen se estira. Con height:auto el
   navegador usa la proporción de los atributos y nunca deforma. */
img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

::selection {
    background: var(--volt);
    color: #0b0c0e;
}

:focus-visible {
    outline: 2px solid var(--volt);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Salto al contenido: lo primero que encuentra quien navega con teclado. */
.saltar {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 200;
    background: var(--volt);
    color: #0b0c0e;
    font-weight: 700;
    padding: 0.6rem 1.4rem;
    border-radius: 0 0 var(--radio-chico) var(--radio-chico);
    transition: transform var(--transicion);
}

.saltar:focus {
    transform: translate(-50%, 0);
}

.oculto-visual {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ------------------------------------------------------------ 3. Tipografía */

.display {
    font-family: var(--fuente-display);
    font-weight: 400; /* Archivo Black ya es negra: pedirle 700 la falsifica */
    letter-spacing: -0.02em;
    line-height: 0.98;
    text-transform: uppercase;
    text-wrap: balance;
}

h1.display {
    /* El tope lo manda la línea más larga del titular ("DE LA PUERTA"): por encima de
       ~68px se parte en dos y se pierde el ritmo de tres líneas del brochure. */
    font-size: clamp(2.5rem, 1.7rem + 3.5vw, 4.25rem);
}

h2.display {
    font-size: clamp(2rem, 1.4rem + 2.8vw, 3.375rem);
}

h3 {
    font-family: var(--fuente-ui);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
    line-height: 1.15;
    letter-spacing: 0.005em;
}

/* El navegador aplica `bolder` a <b> y <strong>, que es RELATIVO al peso heredado:
   sobre 400 pide 700 y sobre 700 pide 900. Archivo Black solo existe en 400 y Barlow
   llega a 700, así que el navegador engordaba los trazos a la fuerza — justo en el
   precio y en los cuatro datos duros, que es donde más se nota. */
b,
strong {
    font-weight: 700;
}

.prueba b,
.tarifa__precio b {
    font-weight: 400;
}

.v {
    color: var(--volt);
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--volt);
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--volt);
    flex: none;
}

.entrada {
    color: var(--ink-2);
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    max-width: 56ch;
    text-wrap: pretty;
}

.mini {
    font-size: 0.875rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- 4. Botones */

.btn {
    --btn-fondo: transparent;
    --btn-tinta: var(--ink);
    --btn-borde: var(--linea-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.7rem;
    background: var(--btn-fondo);
    color: var(--btn-tinta);
    border: 1px solid var(--btn-borde);
    border-radius: var(--radio-chico);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.1;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    transition: transform var(--transicion), box-shadow var(--transicion),
        background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.btn svg {
    flex: none;
    width: 1.25em;
    height: 1.25em;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn--volt {
    --btn-fondo: var(--volt);
    --btn-tinta: #0b0c0e;
    --btn-borde: var(--volt);
    box-shadow: 0 10px 30px -12px rgba(184, 230, 46, 0.55);
}

.btn--volt:hover {
    --btn-fondo: var(--volt-claro);
    --btn-borde: var(--volt-claro);
    box-shadow: 0 16px 38px -12px rgba(184, 230, 46, 0.75);
}

.btn--linea:hover {
    --btn-borde: var(--volt);
    --btn-tinta: var(--volt);
}

.btn--grande {
    padding: 1.15rem 2.2rem;
    font-size: 1.1875rem;
}

.btn--ancho {
    width: 100%;
}

/* El botón principal "respira" una vez al cargar para llevarse la vista. */
@media (prefers-reduced-motion: no-preference) {
    .btn--volt.btn--pulso::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        border: 1px solid var(--volt);
        z-index: -1;
        animation: pulso 3.4s cubic-bezier(0.22, 1, 0.36, 1) 1.2s 3;
    }
}

@keyframes pulso {
    0% {
        opacity: 0.9;
        transform: scale(1);
    }
    60%,
    100% {
        opacity: 0;
        transform: scale(1.22);
    }
}

/* --------------------------------------------------------------- 5. Piezas */

.envoltura {
    width: min(100% - var(--canal) * 2, var(--ancho));
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

section {
    position: relative;
    padding-block: clamp(3.5rem, 2rem + 6vw, var(--e6));
}

/* La medida del titular NO es la medida del párrafo. Con un tope común de 62ch —que
   se resuelve contra la fuente del contenedor— los h2 en Archivo Black no cabían y
   nueve de once se partían en líneas que nadie eligió. Ahora cada pieza lleva su
   propia medida, y el aire entre ellas crece con la jerarquía en vez de ser el mismo
   para una etiqueta de 13px y un titular de 54px. */
.encabezado-seccion {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: none;
    margin-bottom: var(--e4);
}

.encabezado-seccion > .eyebrow {
    margin-bottom: 0.6rem;
}

.encabezado-seccion > .display {
    max-width: 30ch;
}

.encabezado-seccion > .display + .entrada {
    margin-top: clamp(1rem, 0.5rem + 1.3vw, 1.75rem);
}

/* Placa: la tarjeta base de toda la página. Borde de 1px, no sombras blandas. */
.placa {
    background: linear-gradient(180deg, var(--card-2), var(--card));
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: var(--e3);
    position: relative;
    transition: border-color var(--transicion), transform var(--transicion);
}

.placa--viva:hover {
    border-color: var(--linea-2);
    transform: translateY(-3px);
}

/* Marco de captura: integra pantallazos de UI clara sobre el fondo oscuro. */
.marco {
    border: 1px solid var(--linea-2);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--card);
    box-shadow: var(--sombra);
    position: relative;
}

.marco--volt {
    border-color: rgba(184, 230, 46, 0.35);
}

.marco img {
    width: 100%;
    height: auto;
}

.marco__barra {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    background: var(--ground-2);
    border-bottom: 1px solid var(--linea);
}

.marco__barra i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--linea-2);
}

.marco__barra span {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}

.pie-figura {
    margin-top: 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Fichas informativas de una línea. */
.fichas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ficha {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--linea-2);
    border-radius: 999px;
    background: var(--card);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.ficha::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 8px rgba(184, 230, 46, 0.9);
    flex: none;
}

/* ------------------------------------------------------- 6. Riel y cinta */

/* CINTA VOLT — franjas diagonales tipo cinta de precaución. Firma de la marca. */
.cinta {
    height: 10px;
    background: repeating-linear-gradient(
        -45deg,
        var(--volt) 0 12px,
        var(--ground) 12px 24px
    );
}

.cinta--fina {
    height: 6px;
    background: repeating-linear-gradient(
        -45deg,
        var(--volt) 0 8px,
        transparent 8px 16px
    );
}

/* RIEL — línea vertical con nodos que se encienden al pasar cada sección.
   Es decorativo, así que se oculta a lectores de pantalla desde el HTML. */
.riel {
    position: fixed;
    left: max(1rem, calc((100vw - var(--ancho)) / 2 - 2.5rem));
    top: 0;
    bottom: 0;
    width: 1px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent,
        var(--linea-2) 12%,
        var(--linea-2) 88%,
        transparent
    );
}

/* La parte ya recorrida del riel se ilumina: hace de barra de avance. */
.riel__progreso {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 0;
    background: linear-gradient(180deg, transparent, var(--volt-tenue) 20%, var(--volt));
}

.riel__nodo {
    position: absolute;
    left: -3.5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--linea-2);
    transition: background-color 400ms ease, box-shadow 400ms ease, transform 400ms ease;
}

.riel__nodo.encendido {
    background: var(--volt);
    box-shadow: 0 0 12px rgba(184, 230, 46, 0.75);
    transform: scale(1.15);
}

@media (max-width: 1180px) {
    .riel {
        display: none;
    }
}

/* Aparición al hacer scroll. Sin JS o con "reducir movimiento", todo queda visible. */
@media (prefers-reduced-motion: no-preference) {
    .js .revelar {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .js .revelar.dentro {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------- 7. Encabezado */

.cabecera {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: rgba(15, 16, 19, 0.72);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: background-color var(--transicion), border-color var(--transicion);
}

.cabecera.pegada {
    background: rgba(15, 16, 19, 0.94);
    border-bottom-color: var(--linea);
}

.cabecera__fila {
    display: flex;
    align-items: center;
    gap: var(--e3);
    height: 68px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.45rem;
    flex: none;
}

.marca img {
    width: 30px;
    height: 30px;
}

.marca__texto {
    font-family: var(--fuente-display);
    font-size: 1.3125rem;
    letter-spacing: -0.01em;
    line-height: 1;
    text-transform: uppercase;
}

.nav {
    display: flex;
    gap: 1.6rem;
    margin-left: auto;
    font-weight: 600;
    font-size: 1.0625rem;
}

.nav a {
    color: var(--ink-2);
    position: relative;
    padding-block: 0.35rem;
    transition: color var(--transicion);
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--volt);
    transition: width var(--transicion);
}

.nav a:hover {
    color: var(--ink);
}

.nav a:hover::after {
    width: 100%;
}

.cabecera .btn {
    padding: 0.6rem 1.15rem;
    font-size: 0.9375rem;
}

.menu-boton {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--linea-2);
    border-radius: var(--radio-chico);
    align-items: center;
    justify-content: center;
}

.menu-boton span,
.menu-boton span::before,
.menu-boton span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    transition: transform var(--transicion), opacity var(--transicion);
}

.menu-boton span::before,
.menu-boton span::after {
    content: "";
    position: absolute;
}

.menu-boton span::before {
    transform: translateY(-6px);
}

.menu-boton span::after {
    transform: translateY(6px);
}

.menu-boton[aria-expanded="true"] span {
    background: transparent;
}

.menu-boton[aria-expanded="true"] span::before {
    transform: rotate(45deg);
}

.menu-boton[aria-expanded="true"] span::after {
    transform: rotate(-45deg);
}

/* --------------------------------------------------------- 8. Portada */

.portada {
    padding-top: clamp(6.5rem, 4rem + 8vw, 9.5rem);
    padding-bottom: clamp(3rem, 2rem + 5vw, 5.5rem);
    overflow: hidden;
}

/* Resplandor volt detrás de la captura. */
.portada::after {
    content: "";
    position: absolute;
    top: -12%;
    right: -12%;
    width: min(60vw, 720px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 230, 46, 0.24), transparent 66%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.portada__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
}

.portada__texto > * + * {
    margin-top: var(--e3);
}

.portada h1 {
    margin-top: 0.6rem;
}

.portada__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: var(--e4);
}

.portada__aval {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.4rem;
    margin-top: var(--e3);
    color: var(--ink-3);
    font-size: 0.9375rem;
    font-weight: 600;
}

.portada__aval span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.portada__aval svg {
    width: 1.05em;
    height: 1.05em;
    color: var(--volt);
}

.portada__visual {
    position: relative;
}

/* Etiqueta "acceso autorizado" flotando sobre la captura del kiosko. */
/* Cuelga del borde inferior izquierdo del marco para no tapar la captura. */
.sello {
    position: absolute;
    left: -1.25rem;
    bottom: -1.5rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1.1rem;
    background: var(--ground-2);
    border: 1px solid rgba(184, 230, 46, 0.4);
    border-radius: var(--radio-chico);
    box-shadow: var(--sombra);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
}

.sello small {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.sello__luz {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 10px var(--volt);
    flex: none;
}

@media (prefers-reduced-motion: no-preference) {
    .sello__luz {
        animation: latido 2.4s ease-in-out infinite;
    }
}

@keyframes latido {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}

/* Cintillo de recorrido bajo la portada: puerta → socio → caja → reporte. */
.cintillo {
    border-block: 1px solid var(--linea);
    background: var(--ground-2);
    padding-block: 1.1rem;
    overflow: hidden;
}

.cintillo__pista {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    flex-wrap: wrap;
    justify-content: center;
}

.cintillo__pista b {
    color: var(--ink);
    font-weight: 700;
}

.cintillo__pista i {
    color: var(--volt);
    font-style: normal;
}

/* --------------------------------------------------------------- 9. Dolores */

.dolores {
    background: var(--ground-2);
    border-block: 1px solid var(--linea);
}

.comparativa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--e3);
}

.columna-dolor,
.columna-alivio {
    border-radius: var(--radio);
    padding: var(--e3);
    border: 1px solid var(--linea);
}

.columna-dolor {
    background: var(--card);
}

.columna-alivio {
    background: linear-gradient(180deg, rgba(184, 230, 46, 0.07), rgba(184, 230, 46, 0));
    border-color: rgba(184, 230, 46, 0.3);
}

.columna-dolor h3,
.columna-alivio h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--e2);
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
}

.columna-dolor h3 {
    color: var(--ink-3);
}

.columna-alivio h3 {
    color: var(--volt);
}

.lista-marcada {
    list-style: none;
    display: grid;
    gap: 0.85rem;
}

.lista-marcada li {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: 0.7rem;
    align-items: start;
    color: var(--ink-2);
    line-height: 1.45;
}

.lista-marcada svg {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.25em;
}

/* Grosor por tamaño óptico: los iconos chicos necesitan más trazo para leerse, los
   grandes menos para no verse toscos. Antes todos iban a 1.4-2.2 sin criterio. */
.lista-marcada svg,
.portada__aval svg {
    stroke-width: 2;
}

.lector__icono {
    stroke-width: 1.6;
}

.modulo__icono {
    stroke-width: 1.75;
}

.columna-dolor .lista-marcada svg {
    color: var(--alerta);
}

.columna-alivio .lista-marcada svg {
    color: var(--volt);
}

.columna-alivio .lista-marcada li {
    color: var(--ink);
}

/* Banda de credibilidad: cuatro datos duros, sin adornos. */
.pruebas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 1px;
    background: var(--linea);
    border-block: 1px solid var(--linea);
}

.prueba {
    background: var(--ground);
    padding: var(--e3) var(--e2);
    display: grid;
    gap: 0.35rem;
    align-content: start;
}

.prueba b {
    font-family: var(--fuente-display);
    font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
    line-height: 0.9;
    color: var(--volt);
    letter-spacing: -0.03em;
}

.prueba span {
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.4;
    max-width: 30ch;
}

/* El sangrado se saca con un margen negativo del contenedor y no con una excepción
   al primer hijo: así el primer dato de CADA fila queda alineado con el texto,
   aunque la rejilla baje a tres, dos o una columna. */
@media (min-width: 640px) {
    .pruebas {
        margin-inline: calc(var(--e2) * -1);
    }

    .prueba {
        padding-inline: var(--e2);
    }
}

/* --------------------------------------------------- 10. Acceso y módulos */

.acceso__rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--e2);
    margin-bottom: var(--e4);
}

.lector {
    display: grid;
    gap: 0.75rem;
    padding: var(--e3);
    background: var(--card);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    position: relative;
    overflow: hidden;
}

/* Barra volt superior que crece en hover: "el lector se activa". */
.lector::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 34px;
    background: var(--volt);
    transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lector:hover::before {
    width: 100%;
}

.lector__icono {
    width: 42px;
    height: 42px;
    color: var(--volt);
}

.lector h3 {
    font-size: 1.3125rem;
}

.lector p {
    color: var(--ink-2);
    font-size: 1rem;
}

.lector__dato {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid var(--linea);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Flujo: rostro/huella/tarjeta → valida → abre. */
.flujo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: var(--e3);
    border: 1px solid var(--linea-2);
    border-radius: var(--radio);
    background: var(--ground-2);
}

.flujo__paso {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.9375rem;
}

.flujo__paso b {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(184, 230, 46, 0.14);
    color: var(--volt);
    font-size: 0.8125rem;
}

.flujo__flecha {
    color: rgba(184, 230, 46, 0.55);
    flex: none;
}

/* 330px de mínimo = 3 columnas en el ancho del contenedor: los 6 módulos quedan
   en dos filas parejas de 3, sin la celda vacía que dejaba una rejilla de 4. */
.modulos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: 1px;
    background: var(--linea);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
}

.modulo {
    background: var(--card);
    padding: var(--e3);
    display: grid;
    gap: 0.6rem;
    align-content: start;
    transition: background-color var(--transicion);
}

.modulo:hover {
    background: var(--card-2);
}

.modulo__icono {
    width: 34px;
    height: 34px;
    color: var(--volt);
    margin-bottom: 0.2rem;
}

.modulo p {
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.5;
}

/* Rejilla de "también incluye": lista densa a tres columnas. */
.incluye {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 0.7rem 2rem;
    margin-top: var(--e4);
}

.incluye li {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.65rem;
    align-items: start;
    color: var(--ink-2);
    font-size: 1.0625rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--linea);
}

/* Antes era un "✓" tipográfico, que en Barlow dibuja una palomita distinta a la de
   los 37 iconos SVG de la página. Ahora es LA MISMA, recortada con máscara. */
.incluye li::before {
    content: "";
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.2em;
    background-color: var(--volt);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------------------------------- 11. Bloques alternados */

.bloque {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
}

.bloque__texto > * + * {
    margin-top: var(--e2);
}

.bloque__texto .lista-marcada,
.bloque__texto .fichas {
    margin-top: var(--e3);
}

.bloque--invertido .bloque__visual {
    order: -1;
}

@media (max-width: 780px) {
    .bloque--invertido .bloque__visual {
        order: 0;
    }
}

/* Muestra a ancho completo: texto corto arriba y la captura grande abajo. Es para
   las pantallas del programa de escritorio, que traen la ventana entera y a media
   columna quedaban ilegibles. */
.muestra {
    margin-top: var(--e5);
}

.muestra__texto {
    max-width: 72ch;
    margin-bottom: var(--e3);
}

.muestra__texto h3 {
    margin-bottom: 0.6rem;
}

/* Conversación de WhatsApp: la plantilla real que manda el sistema. */
.chat {
    max-width: 420px;
    margin-inline: auto;
    background: #0b141a;
    border: 1px solid var(--linea-2);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: var(--sombra);
    display: grid;
    gap: 0.7rem;
}

.chat__cabecera {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chat__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--volt);
    color: #0b0c0e;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.8125rem;
    flex: none;
}

.chat__cabecera b {
    display: block;
    font-size: 1rem;
}

.chat__cabecera small {
    color: #8696a0;
    font-size: 0.8125rem;
}

.burbuja {
    background: #1f2c33;
    color: #e9edef;
    padding: 0.7rem 0.9rem;
    border-radius: 8px 8px 8px 2px;
    font-size: 1rem;
    line-height: 1.45;
    max-width: 92%;
    position: relative;
}

.burbuja--saliente {
    background: #005c4b;
    border-radius: 8px 8px 2px 8px;
    margin-left: auto;
}

.burbuja time {
    display: block;
    text-align: right;
    font-size: 0.6875rem;
    color: #8696a0;
    margin-top: 0.25rem;
}

/* El verde de la burbuja saliente es más oscuro: la hora necesita aclararse
   para seguir siendo legible. */
.burbuja--saliente time {
    color: #bfcbd1;
}

/* Dos teléfonos lado a lado: la agenda de clases y la rutina. El segundo va un poco
   más abajo y girado, para que se lean como un par y no como dos imágenes pegadas. */
.telefonos {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(0.75rem, 2vw, 1.5rem);
}

.telefonos .telefono {
    width: min(240px, 42vw);
    margin: 0;
    flex: none;
}

.telefonos .telefono:first-child {
    transform: rotate(-2deg);
}

.telefonos .telefono:last-child {
    margin-top: clamp(1.5rem, 4vw, 3rem);
    transform: rotate(2deg);
}

@media (prefers-reduced-motion: reduce) {
    .telefonos .telefono {
        transform: none;
    }
}

/* Marco de teléfono para las capturas verticales del portal del socio. */
.telefono {
    width: min(280px, 74vw);
    margin-inline: auto;
    /* El bisel de arriba es más alto a propósito: ahí vive la muesca. Antes caía
       sobre la propia captura y tachaba la línea "ADMINGYM · Socio #2684". */
    padding: 22px 10px 16px;
    background: linear-gradient(160deg, #2a2e36, #15171b 45%, #101216);
    border: 1px solid #3c414a;
    border-radius: 34px;
    box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    position: relative;
}

.telefono::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 4px;
    border-radius: 3px;
    background: #000;
    z-index: 2;
}

/* El height:auto NO es decorativo: los atributos width/height del <img> valen como
   estilo del navegador. Al poner width:100% se pisaba el ancho pero la altura se
   quedaba en los 1212 px del atributo, y la captura salía estirada al doble. */
.telefono img {
    border-radius: 24px;
    width: 100%;
    height: auto;
}

/* Sedes: tarjetas conectadas por el riel volt. */
/* Mínimo chico a propósito: las sedes deben caber en UNA fila para que los puntos
   volt que las unen se lean como una cadena y no como una lista suelta. */
.sedes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: var(--e2);
    margin-top: var(--e3);
}

.sede {
    padding: 1rem 1.1rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-chico);
    background: var(--card);
    position: relative;
}

.sede b {
    display: block;
    font-size: 1.0625rem;
}

.sede span {
    font-size: 0.9375rem;
    color: var(--ink-3);
}

.sede::after {
    content: "";
    position: absolute;
    top: 1.35rem;
    right: -0.55rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--volt);
    box-shadow: 0 0 8px rgba(184, 230, 46, 0.8);
}

.sede:last-child::after {
    display: none;
}

/* ------------------------------------------------------------- 12. Hardware */

/* Igual que los módulos: 6 piezas en dos filas de 3, no 4 + 2 huérfanas. */
.hardware {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: var(--e2);
}

.pieza {
    display: grid;
    gap: 0.45rem;
    padding: 1.15rem;
    border: 1px solid var(--linea);
    border-left: 3px solid rgba(184, 230, 46, 0.45);
    border-radius: var(--radio-chico);
    background: var(--card);
    transition: border-left-color var(--transicion);
}

.pieza:hover {
    border-left-color: var(--volt);
}

.pieza b {
    font-size: 1.0625rem;
}

.pieza span {
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.45;
}

/* -------------------------------------------------------------- 13. Precios */

/* Un solo precio, no una tabla de planes: la cifra a la izquierda con el acento volt
   y lo que incluye a la derecha. El visitante no tiene que elegir nada para escribir. */
.tarifa {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 1px;
    background: var(--linea);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-volt);
}

.tarifa__cifra {
    display: grid;
    align-content: start;
    gap: var(--e2);
    padding: var(--e4) var(--e3);
    background: linear-gradient(180deg, rgba(184, 230, 46, 0.08), var(--card) 60%);
    text-align: center;
}

.tarifa__incluye {
    padding: var(--e4) var(--e3);
    background: var(--card);
}

.tarifa__incluye h3 {
    margin-bottom: var(--e2);
}

.tarifa__etiqueta {
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--volt);
}

.tarifa__precio {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.tarifa__precio b {
    font-family: var(--fuente-display);
    font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--volt);
}

.tarifa__precio span {
    color: var(--ink-2);
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: left;
    line-height: 1.35;
}

.tarifa__nota {
    color: var(--ink-2);
    font-size: 1rem;
    padding-bottom: var(--e2);
    border-bottom: 1px solid var(--linea);
}

@media (max-width: 780px) {
    .tarifa {
        grid-template-columns: 1fr;
    }

    .tarifa__cifra,
    .tarifa__incluye {
        padding: var(--e3) var(--e2);
    }
}

.nota-precio {
    margin-top: var(--e3);
    max-width: 62ch;
    padding: 1rem 1.2rem;
    border: 1px solid var(--linea);
    border-left: 3px solid var(--volt);
    border-radius: var(--radio-chico);
    background: var(--ground-2);
    color: var(--ink-2);
    font-size: 1rem;
}

/* --------------------------------------------------------- 14. Proceso y FAQ */

.pasos {
    list-style: none;
    counter-reset: paso;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--e3);
}

.paso {
    counter-increment: paso;
    position: relative;
    padding-top: var(--e3);
    border-top: 1px solid var(--linea);
}

.paso::before {
    content: counter(paso, decimal-leading-zero);
    display: block;
    font-family: var(--fuente-display);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--volt);
    margin-bottom: 0.6rem;
    letter-spacing: -0.03em;
}

.paso h3 {
    margin-bottom: 0.4rem;
}

.paso p {
    color: var(--ink-2);
    font-size: 1rem;
}

.faq {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--linea);
    max-width: 900px;
}

.faq details {
    border-bottom: 1px solid var(--linea);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    padding: 1.2rem 0.25rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
    list-style: none;
    transition: color var(--transicion);
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary:hover {
    color: var(--volt);
}

.faq summary::after {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    border-right: 2px solid var(--volt);
    border-bottom: 2px solid var(--volt);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform var(--transicion);
}

.faq details[open] summary::after {
    transform: rotate(-135deg) translate(-3px, -3px);
}

.faq details p {
    color: var(--ink-2);
    padding: 0 0.25rem 1.4rem;
    /* 78ch daba renglones de 183 caracteres: el ojo pierde el hilo al volver. */
    max-width: 62ch;
}

.faq details p + p {
    padding-top: 0;
    margin-top: -0.6rem;
}

/* ------------------------------------------------- 15. Cierre, pie y móvil */

.cierre {
    position: relative;
    background: var(--ground-2);
    border-block: 1px solid var(--linea);
    overflow: hidden;
}

.cierre::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 120% at 50% 118%, rgba(184, 230, 46, 0.28), transparent 68%);
    pointer-events: none;
}

.cierre__caja {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--e3);
}

.cierre__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
}

.contacto-directo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 2.5rem;
    margin-top: var(--e2);
}

/* El padding vertical no es estético: es para que el dedo tenga a dónde pegarle.
   Sin él, estos enlaces medían 23 px de alto y quedaban por debajo del mínimo
   recomendado para objetivos táctiles. */
.contacto-directo a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.6rem;
    color: var(--ink-2);
    font-weight: 600;
    transition: color var(--transicion);
}

.contacto-directo a:hover {
    color: var(--volt);
}

.contacto-directo svg {
    width: 1.1em;
    height: 1.1em;
    color: var(--volt);
}

.pie {
    padding-block: var(--e4) var(--e3);
    color: var(--ink-3);
    font-size: 0.9375rem;
}

.pie__fila {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3);
    justify-content: space-between;
    align-items: flex-start;
}

.pie__marca {
    display: grid;
    gap: 0.5rem;
    max-width: 34ch;
}

.pie__enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.4rem;
}

.pie__enlaces a {
    padding-block: 0.6rem;
}

/* En la línea legal el enlace convive con texto del mismo color y tamaño: sin
   subrayado no había forma de saber que era un enlace. */
.pie__legal a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pie__legal a:hover {
    color: var(--volt);
}

.pie__enlaces a:hover {
    color: var(--volt);
}

.pie__legal {
    margin-top: var(--e3);
    padding-top: var(--e2);
    border-top: 1px solid var(--linea);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
}

/* ------------------------------------------------- Botón flotante de WhatsApp */

/* Vive en la esquina inferior derecha del escritorio, que es donde la página no
   tiene ningún CTA fijo. En el celular NO se muestra: ahí manda la barra de abajo,
   y dos botones de WhatsApp encimados restan en vez de sumar. */
.flotante {
    position: fixed;
    right: clamp(1.25rem, 2.5vw, 2.25rem);
    bottom: clamp(1.25rem, 2.5vw, 2.25rem);
    z-index: 95;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--volt);
    color: #0b0c0e;
    box-shadow: 0 12px 30px -8px rgba(184, 230, 46, 0.55), 0 4px 12px rgba(0, 0, 0, 0.5);
    /* Arranca escondido: aparece cuando el visitante deja atrás la portada. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.85);
    transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 260ms, background-color var(--transicion);
}

.flotante.a-la-vista {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.flotante:hover {
    background: var(--volt-claro);
}

.flotante svg {
    width: 32px;
    height: 32px;
}

/* La etiqueta sale del propio botón al pasar el ratón. */
.flotante__globo {
    position: absolute;
    right: calc(100% + 12px);
    white-space: nowrap;
    background: var(--card-2);
    color: var(--ink);
    border: 1px solid var(--linea-2);
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    font-size: 0.9375rem;
    font-weight: 600;
    box-shadow: var(--sombra);
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity var(--transicion), transform var(--transicion);
}

.flotante:hover .flotante__globo,
.flotante:focus-visible .flotante__globo {
    opacity: 1;
    transform: none;
}

/* Anillo que late un par de veces al aparecer, para que se note sin ser molesto. */
@media (prefers-reduced-motion: no-preference) {
    .flotante.a-la-vista::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid var(--volt);
        animation: pulso 2.6s cubic-bezier(0.22, 1, 0.36, 1) 2;
    }
}

@media (max-width: 860px) {
    .flotante {
        display: none;
    }
}

/* Barra fija de acción en el celular: la conversión principal siempre a la mano. */
.barra-movil {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    padding: 0.65rem var(--canal) calc(0.65rem + env(safe-area-inset-bottom));
    background: rgba(15, 16, 19, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--linea);
    gap: 0.6rem;
}

.barra-movil .btn {
    flex: 1;
    padding: 0.9rem 0.75rem;
    font-size: 1rem;
}

.barra-movil .btn--linea {
    flex: 0 0 auto;
    padding-inline: 1.1rem;
}

/* ------------------------------------------------------------- Adaptación */

@media (max-width: 980px) {
    .portada__rejilla {
        grid-template-columns: 1fr;
    }

    .portada__visual {
        max-width: 620px;
    }

    .sello {
        left: 0.75rem;
    }
}

@media (max-width: 860px) {
    .menu-boton {
        display: flex;
    }

    .cabecera .btn--volt {
        display: none;
    }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        margin: 0;
        /* El bloque contenedor es .cabecera__fila, que también es .envoltura: sin los
           márgenes negativos el panel se quedaba corto y el fondo no llegaba a los
           bordes de la pantalla. */
        margin: 0 calc(var(--canal) * -1);
        padding: 0.5rem calc(var(--canal) * 2) 1.25rem;
        /* Opaco de verdad: el menú se despliega encima del titular del hero y con
           cualquier transparencia las dos capas de texto se encimaban. */
        background: var(--ground);
        border-bottom: 1px solid var(--linea);
        box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.9);
        display: none;
    }

    .nav.abierto {
        display: flex;
    }

    .nav a {
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--linea);
        font-size: 1.125rem;
    }

    .nav a::after {
        display: none;
    }

    .barra-movil {
        display: flex;
    }

    /* Que la barra fija no tape el final del contenido —solo en la página que la
       trae; el aviso de privacidad y el 404 no la tienen. */
    body:has(.barra-movil) {
        padding-bottom: 76px;
    }

    html {
        scroll-padding-top: 76px;
        /* Y que tampoco tape lo que se acaba de enfocar con el teclado ni el
           destino de un ancla. */
        scroll-padding-bottom: 84px;
    }

    .sede::after {
        display: none;
    }
}

@media (max-width: 560px) {
    .portada__acciones .btn {
        width: 100%;
    }

    .cierre__acciones .btn {
        width: 100%;
    }

    .sello {
        position: static;
        margin-top: 0.9rem;
        width: fit-content;
    }
}

/* ============================================================================
   16. CAPA VISUAL
   ----------------------------------------------------------------------------
   Todo lo de aquí abajo es atmósfera: grano, resplandores que respiran, luz que
   sigue al cursor, el cintillo que corre solo y el barrido sobre el titular.
   Ninguno cambia la maquetación —solo pintan— y todos se apagan con
   "prefers-reduced-motion", así que no cuestan ni un punto de rendimiento ni de
   accesibilidad.
   ========================================================================== */

/* ---- Grano. Le quita el plano digital al negro y hace que se sienta impreso. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}

/* ---- Resplandores que respiran, detrás de la portada y del cierre. */
@media (prefers-reduced-motion: no-preference) {
    .portada::after {
        animation: respirar 14s ease-in-out infinite alternate;
    }

    .cierre::before {
        animation: respirar 18s ease-in-out infinite alternate-reverse;
    }
}

@keyframes respirar {
    from {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.75;
    }
    to {
        transform: translate3d(-4%, 3%, 0) scale(1.14);
        opacity: 1;
    }
}

/* ---- Luz que sigue al cursor sobre las tarjetas.
   js/app.js escribe --mx/--my; sin JS simplemente no se enciende. */
.modulo,
.lector,
.pieza,
.plan,
.paso {
    position: relative;
}

.modulo::after,
.lector::after,
.pieza::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        260px circle at var(--mx, 50%) var(--my, 50%),
        rgba(184, 230, 46, 0.13),
        transparent 65%
    );
    opacity: 0;
    transition: opacity 260ms ease;
}

.modulo:hover::after,
.lector:hover::after,
.pieza:hover::after {
    opacity: 1;
}

/* ---- Barrido de luz sobre la palabra en volt del titular. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    @media (prefers-reduced-motion: no-preference) {
        h1.display .v,
        .cierre .display .v {
            background-image: linear-gradient(
                100deg,
                var(--volt) 30%,
                #f2ffc4 45%,
                var(--volt) 60%
            );
            background-size: 250% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: barrido 7s ease-in-out 1.2s infinite;
        }
    }
}

@keyframes barrido {
    0%,
    55% {
        background-position: 120% 0;
    }
    100% {
        background-position: -30% 0;
    }
}

/* ---- Cintillo que corre solo, como un tablero de gimnasio. */
.cintillo {
    --marquesina: 42s;
}

.cintillo__pista {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    /* El hueco final va DENTRO de cada copia, no entre las dos: así ambas miden
       exactamente lo mismo y el desplazamiento del 50% cae justo, sin costura. */
    padding-right: 2.2rem;
}

.cintillo .envoltura {
    width: 100%;
    max-width: none;
    overflow: hidden;
    /* Se difumina en los extremos para que no se corte en seco. */
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.cintillo__cinta {
    display: flex;
    width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
    .cintillo__cinta {
        animation: correr var(--marquesina) linear infinite;
    }

    .cintillo:hover .cintillo__cinta {
        animation-play-state: paused;
    }
}

@keyframes correr {
    to {
        transform: translateX(-50%);
    }
}

/* Aquí vivía un borde cónico giratorio en la tarjeta de precio. Se quitó: al ser un
   pseudo-elemento con z-index negativo se salía del recorte de la tarjeta y lanzaba
   un haz verde sobre el titular de la sección. La tarjeta ya destaca de sobra con su
   sombra volt, así que no valía la pena pelearse con el apilamiento. */

/* ---- Las capturas grandes suben un poco al entrar: profundidad al hacer scroll.
   Es una animación guiada por el scroll NATIVA: cero JavaScript. Los navegadores
   que no la soportan simplemente no la aplican. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .muestra .marco,
        #panel-web > .envoltura > .marco {
            animation: emerger linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 45%;
        }
    }
}

/* Solo movimiento, sin fundido: al bajar la opacidad, el texto dentro del marco
   (el rótulo de la barra) quedaba por debajo del contraste mínimo mientras duraba
   la animación, y las herramientas de accesibilidad lo marcaban con razón. El
   desplazamiento da la misma sensación de profundidad y no toca la legibilidad. */
@keyframes emerger {
    from {
        transform: translateY(26px) scale(0.985);
    }
    to {
        transform: none;
    }
}

/* ---- Canto de luz.
   En interfaz oscura el peso NO se hace con sombra negra —sobre un fondo casi negro
   es invisible— sino con un filo de luz arriba y una caída corta abajo. Es lo que
   convierte un rectángulo dibujado en una pieza montada sobre un chasis. */
.lector,
.pieza,
.sede,
.placa {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 1px 2px rgba(0, 0, 0, 0.55);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}

/* Estas dos viven en rejillas de gap:1px sobre --linea: la sombra exterior
   ensuciaría las costuras, así que solo llevan el filo. */
.modulo,
.prueba {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* En .marco el filo interior no se ve (overflow:hidden y la imagen lo tapa), así que
   la luz va en el borde superior, que ya existía. */
.marco {
    border-top-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
}

.marco--volt {
    border-top-color: rgba(184, 230, 46, 0.55);
}

/* ---- Respuesta al dedo. En el celular no existe :hover, y la única regla de
   pulsación que había deshacía el hover: al tocar el botón de la conversión no
   pasaba nada y con red lenta se sentía roto. */
.btn:active {
    transform: translateY(1px) scale(0.985);
}

.btn--volt:active {
    box-shadow: 0 6px 18px -10px rgba(184, 230, 46, 0.6);
}

.barra-movil .btn:active {
    transform: scale(0.97);
}

@media (hover: none) {
    .btn {
        -webkit-tap-highlight-color: transparent;
        transition-duration: 90ms;
    }

    .faq summary:active,
    .contacto-directo a:active,
    .pie__enlaces a:active {
        color: var(--volt);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn:active,
    .barra-movil .btn:active {
        transform: none;
    }
}

/* ---- El acordeón del FAQ se despliega en vez de saltar. Sigue siendo <details>
   nativo: cero JavaScript. Los navegadores que aún no soportan ::details-content
   se quedan con la apertura instantánea de siempre, nunca con contenido escondido. */
@media (prefers-reduced-motion: no-preference) {
    :root {
        interpolate-size: allow-keywords;
    }

    .faq details::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size 300ms cubic-bezier(0.22, 1, 0.36, 1),
            content-visibility 300ms allow-discrete;
    }

    .faq details[open]::details-content {
        block-size: auto;
    }
}

/* --------------------------------------------------- Páginas de texto legal */

.legal {
    padding-block: clamp(6.5rem, 4rem + 8vw, 9rem) var(--e5);
}

.legal .envoltura {
    max-width: 760px;
}

.legal h1 {
    margin: var(--e2) 0 var(--e3);
}

.legal h2 {
    font-family: var(--fuente-ui);
    font-weight: 700;
    font-size: 1.375rem;
    margin-top: var(--e4);
    margin-bottom: 0.6rem;
    padding-top: var(--e2);
    border-top: 1px solid var(--linea);
}

.legal p,
.legal li {
    color: var(--ink-2);
    max-width: 72ch;
}

.legal p + p,
.legal ul + p {
    margin-top: var(--e2);
}

.legal ul {
    margin: var(--e2) 0 0 1.2rem;
    display: grid;
    gap: 0.7rem;
}

.legal strong {
    color: var(--ink);
}

.legal a {
    color: var(--volt);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* En el celular los <br> se SUMAN al corte automático y el titular sale en cinco
   líneas desiguales. Debajo de 700px manda text-wrap:balance, que ya está declarado
   en .display y existe justo para esto. */
@media (max-width: 700px) {
    .display br {
        display: none;
    }
}

/* Seis pasos en una rejilla de cuatro dejaban dos celdas huérfanas. 6 se divide
   entre 3 y entre 2: no sobra ninguna en ningún escalón. */
@media (min-width: 900px) {
    .pasos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--e4);
    }
}

@media (min-width: 560px) and (max-width: 899px) {
    .pasos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* #portal trae el visual primero en el DOM, así que sin esto quedarían dos bloques
   invertidos seguidos y se perdería la alternancia. order en grid no toca el orden
   de lectura ni el del teclado. */
@media (min-width: 781px) {
    #portal .bloque__visual {
        order: 1;
    }
}

@media print {
    .cabecera,
    .barra-movil,
    .riel {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }
}