/* pages.css — estilos específicos de cada página. */

/* Deportistas: iluminación por scroll (Víctor, 03/09/2026) — mismos tres
   niveles que /metodo, un solo layer (aquí no hay 3 figuras separadas,
   es una sola composición). deportistas.js sube/baja el nivel según
   qué sección está cerca del centro de la pantalla. */
.deportistas-fondo {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    transition: opacity 0.7s ease, filter 0.7s ease;
}

.deportistas-fondo.nivel-0 { opacity: 0.18; filter: grayscale(0.8) brightness(0.8); }
.deportistas-fondo.nivel-1 { opacity: 0.42; filter: grayscale(0.45) brightness(0.9); }
.deportistas-fondo.nivel-2 { opacity: 0.85; filter: grayscale(0) brightness(1.05); }

/* Sombra arrojada sobre el texto de intro, ahora que la foto va a color
   real detrás (sin velo): mismo text-shadow fuerte que .main-nav a /
   .hero-content h1 para leerse sobre un fondo variable. El título usa
   degradado recortado al texto (.text-shine-gold) — ahí la sombra
   fuerte no se recorta a la letra y tapa el dorado (mismo bug ya
   resuelto en .hero-content h1 .accent), así que lleva la versión
   ligera en vez de la fuerte. */
/* Ampliado el 11/09/2026: esta sombra la llevaba SOLO la primera
   sección de Deportistas, porque era la única que caía sobre la
   ilustración. Al subir la tira a 480px las ilustraciones llegan hasta
   el texto en todas las secciones de las dos páginas, y "DESAFÍO ÉLITE"
   dejó de leerse sobre el naranja. Se les da la misma sombra exacta que
   ya tenía la primera — no es un valor nuevo, es el que ya estaba al
   lado funcionando. */
#deportistas-intro .eyebrow,
#deportistas-intro p,
#deportistas-intro h2,
#desafio-elite-promo .eyebrow,
#desafio-elite-promo p,
#desafio-elite-promo h2,
#cursos .eyebrow,
#cursos p,
#cursos h2,
#academia .eyebrow,
#academia p,
#academia h2,
#familias-intro .eyebrow,
#familias-intro p,
#familias-intro h2,
#familias-conceptos .eyebrow,
#familias-conceptos p,
#familias-conceptos h2,
#familias-testimonio .eyebrow,
#familias-testimonio p,
#familias-testimonio h2,
#familias-cierre-parcial .eyebrow,
#familias-cierre-parcial p,
#familias-cierre-parcial h2,
#familias-cta .eyebrow,
#familias-cta p,
#familias-cta h2 {
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.85), 0 2px 3px rgba(0, 0, 0, 0.95);
}

/* Los titulares con degradado dorado recortado a la letra
   (.text-shine-gold) no pueden llevar la sombra fuerte: al no recortarse
   a la letra, tapa el dorado. Versión ligera, la misma que ya usaba
   #deportistas-intro h1 (mismo bug resuelto en su día en el hero). */
#desafio-elite-promo h2.text-shine-gold,
#cursos h2.text-shine-gold,
#academia h2.text-shine-gold,
#familias-intro h2.text-shine-gold,
#familias-conceptos h2.text-shine-gold,
#familias-testimonio h2.text-shine-gold,
#familias-cierre-parcial h2.text-shine-gold,
#familias-cta h2.text-shine-gold {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Familias lleva la MISMA sombra que Deportistas (Víctor, 12/09/2026:
   "igualame las sombras arrojadas con la página anterior; el diseño es
   muy parecido en ambas y no tiene por qué diferir").

   Lo que había antes, del 11/09: una sombra desplazada de verdad —6px a
   la derecha y 8 abajo— para que el texto y el hilo proyectaran sobre el
   dibujo, y en los titulares dorados un `drop-shadow` porque un
   `text-shadow` taparía el degradado. Se retira entero: la desplazada
   cantaba al lado de Deportistas, y el `drop-shadow` sobre un texto con
   el fondo recortado dibuja la caja del fondo, no la letra — comprobado
   hoy en Deportistas, donde salió un rectángulo oscuro detrás del
   titular. Queda el halo de siempre, que es el que hace falta para leer
   sobre la ilustración, con el mismo remate corto que el resto del sitio. */
#familias-intro .eyebrow,
#familias-intro p,
#familias-conceptos .eyebrow,
#familias-conceptos p,
#familias-testimonio .eyebrow,
#familias-testimonio p,
#familias-cierre-parcial .eyebrow,
#familias-cierre-parcial p,
#familias-cta .eyebrow,
#familias-cta p {
    text-shadow:
        0 0 4px rgba(0, 0, 0, 0.95),
        0 0 10px rgba(0, 0, 0, 0.85),
        0 2px 3px rgba(0, 0, 0, 0.95);
}

/* Los titulares dorados, igual que en Deportistas: el remate corto y
   nada de filtros. */
#familias-intro h1.text-shine-gold,
#familias-intro h2.text-shine-gold,
#familias-conceptos h2.text-shine-gold,
#familias-testimonio h2.text-shine-gold,
#familias-cierre-parcial h2.text-shine-gold,
#familias-cta h2.text-shine-gold,
#familias-cta .section-heading {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    filter: none;
}

#deportistas-intro h1.text-shine-gold {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Boxeadora (derecha) y Canelo (izquierda) (Víctor, 04/09/2026): NO van
   dentro del recuadro de ninguna sección — van en los márgenes vacíos
   de la web entera, fuera de la columna de 1200px, a la altura del
   documento completo (con scroll incluido), no solo de la pantalla.
   <main> envuelve las 4 secciones de contenido — su alto real (auto,
   suma de las 4) es el alto total de scroll de la página. main:has()
   lo pone position:relative (scoped solo a esta página).
   Son DIVs con background-image, no <img>: un <img> con top:0/bottom:0
   NO se estira a la altura del contenedor — un elemento reemplazado
   como <img> usa su tamaño natural y solo ancla el borde superior, por
   eso se quedaba corto. background-size con un div normal (no
   reemplazado) sí resuelve el 100% de alto contra la caja real del
   elemento, sin ese problema — mismo principio que
   #deportistas-intro::after y .diagnostic-layout::before/after.
   z-index:-1 porque en páginas secundarias el header es
   position:static (.is-static le anula su z-index propio) — con -1
   el bloque queda siempre detrás de todo, sin competir nunca con él.
   Solo aparecen cuando el margen existe de verdad (viewport > 1200px
   + aire); por debajo, el contenido ya toca los bordes y no hay
   hueco. */
main:has(.deportistas-margen) {
    position: relative;
}

.deportistas-margen {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: left top, left top, left top, left top;
    pointer-events: none;
    z-index: -1;
}

@media (min-width: 1400px) {
    .deportistas-margen {
        display: block;
    }
}

/* Pegada por la izquierda al borde de la columna central (donde está
   la foto de fondo de la sección) — 600px es la mitad de
   --max-width-content (1200px). Ancho de sobra (100vw en
   .deportistas-margen) para que el fondo no se recorte por su propio
   contenedor; background-size con alto fijo al 100% y ancho en auto
   mantiene la proporción natural sin deformar. Si el resultado es más
   ancho que el hueco hasta el borde de la ventana, el sobrante sale de
   cámara por la derecha en vez de encogerlo — body ya tiene
   overflow-x:hidden (global.css), así que no genera scroll horizontal.
   Difuminado en los 3 bordes visibles (izquierdo, arriba, abajo — el
   derecho no hace falta, se pierde fuera de cámara) (Víctor,
   04/09/2026: "está un poco irregular de la imagen grande") — un
   degradado del color de fondo a transparente en cada uno, encima de
   la foto, funde el corte recto con el navy de la web en vez de
   mask-image (soporte desigual entre navegadores, ver nota de
   mask-mode en memoria del proyecto). */
/* Corregido 11/09/2026 tras un reporte real de Inés ("no veo las imágenes
   laterales", en un portátil que da 1470px de ancho). Dos fallos sumados,
   los dos medidos:

   1) La posición dependía de `50% + 600px`, donde 600 es la mitad de la
      columna central. La tira que quedaba era (ancho - 1200) / 2: 360px en
      1920, pero solo 135px en 1470. El número 600 no tiene nada que ver con
      lo que mide la pantalla de quien mira.
   2) El difuminado del borde estaba en PORCENTAJE sobre una capa de 100vw,
      así que se comía 88 de esos 135 — dos tercios de lo poco que había.
      Castigo doble: cuanta menos pantalla, menos tira y más proporción se
      lleva el difuminado. A Inés le quedaban 47px de foto.

   Ahora la tira tiene un mínimo garantizado de 260px en cualquier pantalla,
   y el difuminado mide 40px fijos. En 1920 y 2560 no cambia nada: ahí el
   `50% + 600px` sigue siendo el valor menor y gana él. Por debajo de 1400px
   de ancho las imágenes se siguen ocultando (regla de arriba), que es lo
   correcto: ahí no hay sitio ni con mínimo garantizado.
   Nada de mask-image: ya se descartó en este archivo por soporte desigual
   entre navegadores, y en el diagnóstico pasó lo mismo. */
.deportistas-boxeadora {
    left: min(calc(50% + var(--media-columna)), calc(100% - var(--tira-minima)));
    background-image:
        linear-gradient(to right, var(--bg-dark) 0px, transparent 90px),
        linear-gradient(to bottom, var(--bg-dark) 0%, transparent 4%),
        linear-gradient(to top, var(--bg-dark) 0%, transparent 4%),
        url('../images/boxeadora.jpg');
    background-size: 100% 100%, 100% 100%, 100% 100%, auto 100%;
}

/* Familias, mismo mecanismo que .deportistas-margen/.deportistas-boxeadora
   (Víctor, 07/09/2026: "mismo difuminado, mismas características que la
   otra imagen") — solo lado derecho, no hay pareja a la izquierda aquí.
   `familia.jpg` es la misma proporción muy alta y estrecha que
   boxeadora.jpg/canelo.jpg (comprobado con ffprobe), así que no hace
   falta ajustar nada del mecanismo, solo apuntar al archivo nuevo. */
main:has(.familias-margen) {
    position: relative;
}

.familias-margen {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: left top, left top, left top, left top;
    pointer-events: none;
    z-index: -1;
}

@media (min-width: 1400px) {
    .familias-margen {
        display: block;
    }
}

/* Hilo rojo del destino (Víctor, 07/09/2026). z-index:0, sin tocar el
   z-index de las secciones (quedan en auto) — por detrás del texto y de
   las cajas de .reveal-zone (tienen fondo propio), por delante del navy
   de fondo. Color reutilizado de los triángulos (--tri-burgundy), no
   uno nuevo. */
.familias-hilo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Por delante del dibujo, pero POR DEBAJO de las letras (Víctor,
       12/09/2026: "el hilo rojo va por debajo de las letras, no por
       encima"). El 11/09 se subió a 1 para ponerlo por delante del dibujo
       y de paso se puso también por delante del texto, que no era la
       intención — el comentario de arriba, del 07/09, ya decía "por
       detrás del texto".
       Con -1 se consigue lo uno y lo otro: el dibujo también está en -1 y
       el hilo va después en el HTML, así que queda por encima de él; y al
       ser negativo, el texto en flujo se pinta por encima de los dos. */
    z-index: -1;
    pointer-events: none;
}

.familias-hilo path {
    fill: none;
    stroke: var(--tri-burgundy);
    stroke-width: 4;
    stroke-linecap: round;
    /* Su resplandor de siempre, y el mismo remate corto que ahora llevan
       los textos de esta página (12/09/2026). La sombra larga y desplazada
       del 11/09 se retiró al igualar Familias con Deportistas: el hilo iba
       en la misma dirección que el texto, así que se le quita también o se
       queda solo proyectando. Aquí `drop-shadow` sí es lo correcto —es un
       trazo de SVG, no un texto con el fondo recortado. */
    filter:
        drop-shadow(0 0 6px var(--tri-burgundy-glow))
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85));
    opacity: 0.85;
}

/* Mismo arreglo que .deportistas-boxeadora (ver el comentario largo de
   arriba): mínimo garantizado de tira y difuminado en píxeles. */
.familias-familia {
    left: min(calc(50% + var(--media-columna)), calc(100% - var(--tira-minima)));
    background-image:
        linear-gradient(to right, var(--bg-dark) 0px, transparent 90px),
        linear-gradient(to bottom, var(--bg-dark) 0%, transparent 4%),
        linear-gradient(to top, var(--bg-dark) 0%, transparent 4%),
        url('../images/familia.jpg');
    background-size: 100% 100%, 100% 100%, 100% 100%, auto 100%;
    /* La ilustración entera dentro de la pantalla (Víctor, 11/09/2026):
       pegada al borde derecho y con su borde izquierdo visible, no
       recortada por ningún lado. El bloque toma el ancho exacto del
       dibujo a partir de su alto (`aspect-ratio`, 1000×4532 reales), así
       que el fundido de 90px cae justo en el borde izquierdo de la
       figura. Va por delante del texto, no por detrás. */
    left: auto;
    right: 0;
    width: auto;
    aspect-ratio: 1000 / 4532;
    background-position: left top, left top, left top, right top;
}

/* Espejo de .deportistas-boxeadora en el margen izquierdo: pegada por
   la derecha al borde de la columna central (right en vez de left),
   imagen anclada por SU borde derecho (background-position: right top,
   no left) para que la parte visible sea la que toca el contenido y
   el sobrante se pierda por la izquierda. Difuminado del lado que
   toca el contenido con "to left" (el degradado empieza opaco en el
   borde derecho del bloque) en vez de "to right". */
/* Mismo arreglo que .deportistas-boxeadora, en espejo: aquí la tira se
   mide desde el borde izquierdo, y el difuminado va "to left" porque el
   lado que toca el contenido es el derecho. */
.deportistas-canelo {
    right: min(calc(50% + var(--media-columna)), calc(100% - var(--tira-minima)));
    background-image:
        linear-gradient(to left, var(--bg-dark) 0px, transparent 90px),
        linear-gradient(to bottom, var(--bg-dark) 0%, transparent 4%),
        linear-gradient(to top, var(--bg-dark) 0%, transparent 4%),
        url('../images/canelo.jpg');
    background-position: right top, right top, right top, right top;
    background-size: 100% 100%, 100% 100%, 100% 100%, auto 100%;
}

/* Víctor, 04/09/2026: quita el hueco entre el eyebrow y el título en
   estas 3 secciones concretas — .eyebrow es clase compartida en toda
   la web (margin-bottom:1rem), así que se anula aquí por id, no en
   la clase global. */
#deportistas-intro .eyebrow,
#desafio-elite-promo .eyebrow,
#academia .eyebrow {
    margin-bottom: 0;
}

/* Todos los párrafos justificados a los dos lados (Víctor, 04/09/2026)
   — la última línea de un párrafo justificado ya queda a la izquierda
   por defecto del propio CSS (nunca se estira), así que las palabras
   sueltas del final no salen repartidas raro. Escopado a las 4
   secciones propias de Deportistas, no toca el resto de la web. */
#deportistas-intro p,
#desafio-elite-promo p,
#cursos p {
    text-align: justify;
}

/* Causa real (Víctor, 04/09/2026): Academia era la única sección de
   la página con los párrafos centrados (margin-left/right:auto en el
   HTML) — el resto (intro, Desafío Élite, cursos) los deja pegados al
   margen izquierdo de forma natural, sin centrar. Título y párrafos
   vuelven a ese mismo punto de arranque, quitando el centrado de
   .text-center solo para estos dos. */
#academia h2,
#academia p {
    text-align: left;
}

/* Víctor, 04/09/2026: el hueco tras el botón "Descubrir Academia AKENA"
   venía del padding-bottom de .section (8rem, igual en toda la web) —
   mucho más que el padding de las tarjetas de curso de arriba (3rem).
   Se iguala aquí, solo en Academia, sin tocar --section-padding-y. */
#academia {
    padding-bottom: 3rem;
}

.deportistas-particulas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Portal embebido del Typeform real (/diagnostico), 03/09/2026 — mismo
   lenguaje visual que .constellation-center y .diagnostic-widget (borde
   dorado sutil, fondo de superficie, sombra), para que se sienta parte
   de la web y no una ventana ajena pegada encima. */
.diagnostico-ri-portal {
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-gold);
    box-shadow: 0 0 60px rgba(150, 126, 78, 0.15);
    overflow: hidden;
    background: var(--bg-surface);
}

.diagnostico-ri-portal iframe {
    display: block;
    width: 100%;
    height: 78vh;
    min-height: 560px;
    border: 0;
}

/* ---------- Hero (Home) ---------- */

.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* Sin desenfoque: el arranque ya no deja ver nada de la web real por
   detrás, ni siquiera borroso — lo tapa el vídeo propio del arranque
   (.intro-overlay). Este vídeo aparece nítido en el instante en que esa
   capa se funde a 0 (Víctor, 01/09/2026). */
.hero-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: min(94vw, 1300px);
    margin: 0 auto;
    padding: 0 5% 4rem 5%;
    text-align: center;
    width: 100%;
}

.hero-content h1 {
    font-size: 2.6rem;
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text-main);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.9), 0 2px 3px rgba(0, 0, 0, 0.95);
}

@media (min-width: 769px) and (min-height: 601px) {
    /* Corregido 03/09/2026 (Víctor/Inés): 5.5rem fijo se veía bien en 2K
       pero "muy grande" en 1080 — un tamaño fijo no distingue entre
       resoluciones de escritorio. clamp() con vw interpola entre 4.2rem
       a 1600px (1080p) y 5.5rem a 2560px (2K), con los extremos fijos en
       rem para que nunca se salga de ese rango. Esto no es el mismo bug
       del 28/08 (vw puro, sin límites, rompía con el escalado del SO):
       aquí los mínimos/máximos están en píxeles reales y acotan el
       resultado en cualquier caso. */
    .hero-content h1 {
        font-size: clamp(5.25rem, 2.03rem + 2.17vw, 5.5rem);
    }
}

/* Efecto: brillo dorado lento (misma técnica que .title-gold en
   vessence.es — degradado de tres paradas recortado al texto, animado
   por background-position, sin prisa). Ver .text-shine-gold en
   components.css. */
.hero-content h1 .accent {
    font-weight: var(--font-weight-semibold);
    /* Con -webkit-text-fill-color:transparent la sombra del padre se ve
       entera (no recortada a la letra) y tapa el degradado dorado de
       negro — sombra propia, mucho más ligera. */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Efecto aprobado 1 (PROYECTO.md sección 3): cada línea del titular se
   descubre de abajo a arriba al cargar, con clip-path + traslación.
   Solo CSS. inset(100% 0 0 0) tapa desde arriba hasta abajo del todo;
   al bajar a 0% el borde de la máscara sube desde la base — así se lee
   "de abajo a arriba" y no al revés. */
.hero-line {
    display: block;
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(40px);
    animation: revealHeroLine 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.2s;
}

.hero-line:nth-child(2) {
    animation-delay: 0.32s;
}

@keyframes revealHeroLine {
    to {
        opacity: 1;
        clip-path: inset(0% 0 0 0);
        transform: translateY(0);
    }
}

.hero-content p {
    font-size: 1.15rem;
    max-width: 640px;
    margin: 0 auto 2.5rem auto;
    line-height: 1.6;
    color: var(--text-main);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95);
}

@media (min-width: 769px) and (min-height: 601px) {
    .hero-content p {
        font-size: clamp(1.4531rem, 0.96875vw, 1.55rem);
        max-width: min(90vw, 900px);
    }
}

/* El botón de entrada al relato tenía el mismo tamaño que cualquier
   .btn de la web y quedaba pegado al borde inferior — casi invisible
   para quien entra (Víctor, 02/09/2026). Mucho más grande, con aire
   propio, y un glow dorado constante (no solo al hover, que en móvil
   no existe) para que llame la atención sin que nadie tenga que
   pasarle el ratón por encima. */
/* En mitad de la PANTALLA (.hero, 100vh), no del bloque de texto — el
   título y el párrafo se quedan donde estaban abajo, el botón no
   depende de dónde acaba ese texto (Víctor, 02/09/2026: "muy, muy, muy
   a la vista y grande en mitad de la pantalla"). */
.btn-hero-inicio {
    /* Reposicionado 03/09/2026 (Víctor): al 50% tapaba la cara del chico
       del vídeo — sube a la franja superior del hero, por encima de las
       cabezas. Más grande y con más padding, letra casi blanca (ver
       keyframe: ya no oscila a dorado, que se leía mal aquí encima). */
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    padding: 2rem 4.5rem;
    font-size: 1.4rem;
    letter-spacing: 0.25em;
    white-space: nowrap;
    border-width: 6px;
    border-color: var(--text-main);
    forced-color-adjust: none;
    /* Sombra y brillo fijos aquí, no solo en el keyframe de abajo: con
       movimiento reducido la animación no corre y el borde se quedaba
       pelado mientras la letra conservaba su sombra (Víctor, 04/09/2026:
       "que sea coherente, el borde no tenía ni sombra ni brillo, y con
       la misma intensidad que la letra"). Misma sombra negra exacta que
       el text-shadow de abajo, como box-shadow, más el halo dorado. */
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.9),
        0 2px 3px rgba(0, 0, 0, 0.95), 0 0 22px var(--tri-gold-glow);
    /* Misma sombra que .hero-content h1 — el negro de fondo detrás de la
       letra, no solo el brillo dorado, es lo que la separa del vídeo
       (Víctor, 02/09/2026: "aplícale sombra como en el potencial"). */
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.9), 0 2px 3px rgba(0, 0, 0, 0.95);
    animation: heroInicioRefulge 3.5s ease-in-out infinite;
}

/* Móvil en horizontal (Víctor, 11/09/2026).
   Dos fallos encadenados, los dos reales y comprobados en el móvil de
   Víctor (Redmi Note 13 Pro 5G, 904x407 de viewport):

   1) El hero mide 100vh. En Chrome de Android, 100vh es la pantalla SIN
      la barra de direcciones, así que el fondo del hero cae por DEBAJO de
      lo que se ve. Todo lo que se coloque por porcentaje cerca del fondo
      queda detrás de la barra. Con 100dvh el alto es el realmente
      visible y los porcentajes vuelven a significar algo. (dvh ya se usa
      en global.css para body.page-no-scroll, no es técnica nueva aquí.)

   2) Con el padding de escritorio el botón se comía a la vez la cabecera
      y el titular. Encoge, pero se queda en la mitad de la pantalla, no
      abajo: al bajarlo al 82% Víctor no podía pulsarlo en su móvil.

   Escritorio sin tocar: ningún monitor baja de 500px de alto. */
@media (max-height: 600px) {
    .hero {
        height: 100dvh;
    }

    /* El botón se queda en su sitio de siempre (top:20%, el de
       escritorio). Solo encoge. Antes lo bajé al 82% por mi cuenta y en
       el móvil de Víctor quedaba detrás de la barra de direcciones, sin
       poder pulsarlo. El centro de la cabecera está libre en horizontal
       (la navegación es ya la hamburguesa), así que aquí no pisa nada. */
    .btn-hero-inicio {
        padding: 0.7rem 2rem;
        font-size: 0.9rem;
        border-width: 3px;
    }
}

/* La sombra negra de arriba es para separar la letra del vídeo, pero en
   hover el texto pasa a degradado dorado transparente (.btn:hover en
   components.css) y esa misma sombra lo tapa, dejando la letra como un
   borrón negro en vez de dorado. Se quita solo en ese estado. */
.btn-hero-inicio:hover,
.btn-hero-inicio:focus-visible {
    text-shadow: none;
}

/* Refulge como un solo bloque (Víctor, 02/09/2026: "o me pones todo a
   refulgir como bloque, o no me vale") — borde, halo y letra suben de
   brillo juntos, no el texto solo con el borde quieto. */
@keyframes heroInicioRefulge {
    0%, 100% {
        border-color: var(--text-main);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.9),
            0 2px 3px rgba(0, 0, 0, 0.95), 0 0 22px var(--tri-gold-glow);
    }
    50% {
        border-color: var(--text-main);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.9),
            0 2px 3px rgba(0, 0, 0, 0.95), 0 0 40px var(--tri-gold-glow);
    }
}

/* Igual que shineGold en el texto (components.css .btn:hover), misma
   velocidad (2.5s) para que borde y letra respiren juntos en hover
   (Víctor, 04/09/2026: "el mismo efecto de dorado y a la misma
   velocidad que tiene las letras"). Solo este botón, no toca .btn:hover
   global. */
.btn-hero-inicio:hover,
.btn-hero-inicio:focus-visible {
    /* Repite el estado 0% del keyframe como valor fijo: con movimiento
       reducido la animación se reduce a 0.01ms (global.css) y sin esto
       el hover caía al blanco de reposo en vez de quedarse dorado. */
    border-color: var(--brand-gold-dim);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.9),
        0 2px 3px rgba(0, 0, 0, 0.95), 0 0 20px var(--tri-gold-glow);
    animation: heroInicioShineBorde 2.5s ease-in-out infinite;
}

@keyframes heroInicioShineBorde {
    0%, 100% {
        border-color: var(--brand-gold-dim);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.9),
            0 2px 3px rgba(0, 0, 0, 0.95), 0 0 20px var(--tri-gold-glow);
    }
    50% {
        border-color: var(--brand-gold-light);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.9),
            0 2px 3px rgba(0, 0, 0, 0.95), 0 0 40px var(--tri-gold-glow);
    }
}

@media (min-width: 769px) and (min-height: 601px) {
    .btn-hero-inicio {
        padding: 2.2rem 5.5rem;
        font-size: clamp(1.4063rem, 0.9375vw, 1.5rem);
    }
}

/* En vertical no entraba ninguna de las dos versiones: la de apaisado va
   por alto de pantalla (max-height: 600px) y un móvil de pie mide 664 de
   alto, así que se quedaba con la de escritorio —4,5rem de relleno a cada
   lado y sin partir la línea—. Resultado medido el 12/09/2026: 516px de
   ancho en una pantalla de 390, cortado por los dos lados contra el borde
   del hero. Mismo encogido que ya se hacía tumbado, y con tope de ancho
   para que no vuelva a pasar con un texto más largo. */
@media (max-width: 768px) {
    .btn-hero-inicio {
        padding: 0.8rem 1.6rem;
        font-size: 0.85rem;
        letter-spacing: 0.18em;
        border-width: 3px;
        max-width: calc(100vw - 2.5rem);
        white-space: normal;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-hero-inicio { animation: none; }
}

/* Efecto aprobado 7 (PROYECTO.md sección 3): mesh gradient animado, solo
   en las secciones de scroll de la Home (nunca sobre el vídeo del hero).
   Las páginas secundarias llevan la clase page-no-scroll y quedan fuera. */
body:not(.page-no-scroll) .section {
    position: relative;
    isolation: isolate;
}

body:not(.page-no-scroll) .section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 20% 30%, var(--brand-navy-mid) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, var(--brand-gold) 0%, transparent 35%),
        radial-gradient(circle at 50% 90%, var(--brand-navy) 0%, transparent 50%);
    background-size: 150% 150%;
    opacity: 0.12;
    animation: meshMove 20s ease-in-out infinite;
}

@keyframes meshMove {
    0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
    50% { background-position: 30% 20%, 70% 80%, 40% 60%; }
}

/* ---------- Home: Acto II — capa fija con fundido, sobre el test ---------- */
/* Arquitectura de webpersonal (#escenario/.pantalla sobre #vagon), no
   scroll normal: la capa flota fija sobre el diagnóstico, que ya está
   ahí debajo desde el principio. Al fundir la última escena, la capa se
   apaga y el usuario aparece delante del test — a efectos, solo hay
   entrada y test; los capítulos son la transición, no "más página"
   (Víctor, sesión del 31/08). Avance por clic, rueda, teclado o toque —
   ver home.js. */

.relato-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    opacity: 0;
    /* Ligera transparencia: el vídeo del hero (que sigue debajo, el
       scroll real no se ha movido) se ve por detrás, en vez de tapar
       con navy sólido. */
    background: rgba(0, 30, 52, 0.8);
    pointer-events: none;
    transition: opacity 1.8s ease;
}

.relato-overlay.activo {
    opacity: 1;
    pointer-events: auto;
}

/* Cabecera y titular del hero se apagan mientras corre el relato — si no,
   compiten con el texto de las escenas por detrás de la transparencia. */
body.relato-activo .site-header,
body.relato-activo .hero-content {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.relato-plancton {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.relato-escena {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6vw;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.8s ease;
    cursor: pointer;
}

.relato-escena.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Fraunces, no manuscrita: a este tamaño la cursiva se lee mal —
   Víctor, 31/08/2026. Sigue siendo la voz de Inés, pero tiene que
   leerse bien de un vistazo. */
.relato-texto {
    font-family: var(--font-body);
    /* Corregido 06/09/2026: el tope (5.6rem = 89.6px) es el tamaño ya
       aprobado en 2K — no se toca. El fallo estaba en el multiplicador
       (5.6vw): llegaba a ese tope ya a 1600px de ancho, así que en
       1920 Y en 2560 se veía el mismo número de píxeles — y ese mismo
       número de píxeles ocupa más porcentaje en la pantalla más
       estrecha, por eso se veía más grande en 1080p. Bajado a 3.5vw
       para que el tope se alcance justo a 2560px: en 2560 sale
       idéntico a antes (89.6px), en 1920 sale a un 75% real
       (67.2px = 1920/2560). */
    font-size: clamp(2.625rem, 3.5vw, 5.6rem);
    line-height: 1.3;
    /* 20ch dejaba menos sitio del que ocupa la línea más larga entre
       los <br> manuales del texto (hasta 44 caracteres) — el navegador
       volvía a partir esa línea por su cuenta, sacando palabras sueltas
       en su propia línea (Víctor, 02/09/2026). */
    max-width: min(90vw, 46ch);
}

/* Escenas 1 y 2: azul turquesa con brillo (color sólido + text-shadow,
   no gradiente animado — el background-clip:text no se pintaba de forma
   fiable, Víctor 31/08/2026). La 2 lleva un pelín más de verde que la 1. */
/* Fluctúa entre blanco y azulillo/turquesa (color plano animado, no
   degradado — lo del gradiente con background-clip:text no se pintaba
   fiable, esto sí funciona en cualquier navegador). No es un barrido
   espacial de lado a lado; es un pulso de color, más simple y sin
   riesgo de fallo. */
@keyframes relatoFluctuaAzul {
    0%, 100% { color: #ffffff; }
    50% { color: #8fd0f5; }
}

@keyframes relatoFluctuaVerde {
    0%, 100% { color: #ffffff; }
    50% { color: #7de8c9; }
}

.relato-escena[data-escena="1"] .relato-texto {
    animation: relatoFluctuaAzul 5s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(200, 240, 255, 0.75),
        0 0 55px rgba(0, 66, 135, 0.6),
        0 0 110px rgba(0, 66, 135, 0.35);
}

.relato-escena[data-escena="2"] .relato-texto {
    animation: relatoFluctuaVerde 5s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(215, 255, 240, 0.75),
        0 0 55px rgba(0, 100, 90, 0.55),
        0 0 110px rgba(0, 100, 90, 0.3);
}

/* Escena 4 (antes 3, antes de corregir la renumeración de escenas del
   02/09/2026): la frase que más pesa. Más grande que las demás, y
   "leyenda" con un brillo propio por encima del resto — el color
   corporativo (dorado) llevado al máximo. */
.relato-escena[data-escena="4"] .relato-texto {
    /* Corregido 06/09/2026, mismo criterio que .relato-texto: el tope
       (6.65rem = 106.4px) es el tamaño ya aprobado en 2K, no se toca.
       Multiplicador bajado de 6.65vw a 4.156vw para que ese tope se
       alcance justo a 2560px: en 2560 sale idéntico a antes, en 1920
       sale al 75% real (79.8px). */
    font-size: clamp(3.15rem, 4.156vw, 6.65rem);
}

.relato-oro {
    color: #fff8d0;
    text-shadow: 0 0 20px #fff8d0,
        0 0 55px rgba(200, 169, 104, 0.8),
        0 0 130px rgba(150, 126, 78, 0.55),
        0 0 220px rgba(150, 126, 78, 0.3);
}

/* Sin barrido lado a lado aquí (ya lo tiene el amarillo de sobra con el
   pulso) — en su lugar, el halo se abre mucho más ancho que la propia
   letra, para que "refleje" más allá de su contorno. */
.relato-leyenda {
    /* Sin clamp a propósito (06/09/2026): em, no rem — ya hereda el
       tamaño de .relato-texto (que sí es clamp), así que escala sola
       con su padre. Ponerle un clamp propio la desconectaría de él. */
    font-size: 1.35em;
    text-shadow: 0 0 26px #fff8d0,
        0 0 70px rgba(255, 248, 208, 0.95),
        0 0 150px rgba(200, 169, 104, 0.8),
        0 0 260px rgba(200, 169, 104, 0.55),
        0 0 380px rgba(200, 169, 104, 0.3);
    animation: relatoLeyendaPulso 2.2s ease-in-out infinite;
}

@keyframes relatoLeyendaPulso {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}

@media (prefers-reduced-motion: reduce) {
    .relato-leyenda,
    .relato-escena[data-escena="1"] .relato-texto,
    .relato-escena[data-escena="2"] .relato-texto,
    .home-finale.is-built .elite-letters {
        animation: none;
    }
    .relato-escena {
        transition: none;
    }
}

/* ---------- Home: Acto IV — mecánica de revelado (cierre) ---------- */

.home-space {
    height: 20vh;
}

@media (prefers-reduced-motion: reduce) {
    .home-space {
        height: 4rem;
    }
}

[data-reveal] {
    opacity: 0;
}

[data-reveal]:not(.is-visible) {
    transform: translateY(16px);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ---------- Home: Acto IV — cierre + cuadrícula ÉLITE ---------- */

/* Barlow Condensed, no manuscrita ni Fraunces (Víctor: la de Fraunces le
   resulta "demasiado pictórica" para este texto) — la marca hablando de
   estructura, no la voz personal de Inés como en el relato. */
.home-finale-text {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.3125vw, 2.1rem);
    line-height: 1.55;
    color: var(--text-main);
    max-width: 640px;
    margin: 0 auto;
}

/* Mismo dorado que "improvisa." en el hero (.text-shine-gold) — el
   degradado va en el propio h3 (no en cada span) para que las cinco
   letras brillen como una sola palabra, no una suelta. Encima, el
   mismo pulso que "leyenda" en el relato: toda ÉLITE refulge. */
.elite-letters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15em;
    /* clamp() por vh, no rem fijo (Víctor, 03/09/2026: "falta aire, y
       en 1080 se descontrola") — el bloque tiene padding de sección fijo
       pero contenido de altura fija, así que en 1080 se empuja contra
       los bordes. Con vh, el margen crece en 2K y se contiene en 1080. */
    margin: clamp(2rem, 6vh, 4.5rem) 0 0;
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    /* Bajado de 6.5rem a 4.6rem el 03/09/2026: "DESAFÍO ÉLITE" (13
       caracteres) es mucho más ancho que "ÉLITE" (5) — al mismo tamaño
       se salía de pantalla. Sigue siendo grande, cabe sin desbordar.
       Corregido 06/09/2026: el tope (4.6rem) no cambia — es el tamaño
       ya aprobado en 2K. Multiplicador bajado de 6.2vw a 2.875vw para
       que el tope se alcance justo a 2560px en vez de a 1187px: en
       2560 sale idéntico a antes, en 1920 sale al 75% real (55.2px).
       No crece más que antes en ningún punto — sin riesgo nuevo de
       desbordar. */
    font-size: clamp(2.5rem, 2.875vw, 4.6rem);
    line-height: 1.1;
    background: linear-gradient(90deg,
        var(--brand-gold-dim) 0%, var(--brand-gold) 18%,
        var(--brand-gold-light) 42%, var(--brand-gold-light) 58%,
        var(--brand-gold) 82%, var(--brand-gold-dim) 100%
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* "DESAFÍO" en blanco sólido, misma fuente/tamaño que "ÉLITE" — anula el
   degradado heredado del padre solo en estas letras (Víctor, 03/09/2026). */
.elite-letters-blanco {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--text-main);
    color: var(--text-main);
}

.home-finale.is-built .elite-letters {
    animation: shineGold 9s ease-in-out infinite, relatoLeyendaPulso 2.2s ease-in-out infinite;
}

.elite-letters span {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
    transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
}

.home-finale.is-built .elite-letters span {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

/* Ancla para la gota de agua y los pétalos: se necesita
   position:relative para que se centren/cubran el bloque, no la
   página entera. */
.home-finale {
    position: relative;
}

/* "El Método" en el menú duplicado del footer, resaltado tras Élite
   (Víctor, 04/09/2026): mismo redondel que .nav-cta (Hablemos), pero
   sin ser el mismo — naranja, no dorado, y parpadeando, para que se
   note aparte de "Hablemos" y llame la atención hacia allí. */
.footer-main-nav .metodo-aviso {
    color: var(--text-main);
    border: 1px solid var(--accent-orange);
    padding: 0.5rem 1.2rem;
    border-radius: var(--radius-pill);
    animation: metodoParpadeo 1.6s ease-in-out infinite;
}

@keyframes metodoParpadeo {
    0%, 100% {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        opacity: 0.5;
    }
    50% {
        box-shadow: 0 0 22px var(--accent-orange-glow);
        opacity: 1;
    }
}

/* Pétalos de cerezo cayendo (Víctor, 02/09/2026) — canvas por encima
   del texto pero sin bloquear clics. */
.elite-petalos {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Gota cayendo en un lago en reposo (Víctor, 02/09/2026): en el centro
   de la pantalla, justo cuando ÉLITE termina de desenfocarse, un
   punto se abre en anillos concéntricos hasta salir de campo. Tres
   anillos con retraso escalonado, mismo mecanismo que un ripple de
   agua. Puramente decorativo, no bloquea clics (pointer-events:none). */
.elite-ripple {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1;
}

.elite-ripple-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    border: 6px solid var(--brand-gold-light);
    box-shadow: 0 0 40px var(--tri-gold-glow);
    filter: blur(2px);
    opacity: 0;
}

/* Muy tenue y muy rápido a la primera (Víctor, 02/09/2026): "ondas de
   radio tipo RKO", a una quinta parte de la velocidad, con más
   desenfoque y el triple de gruesas. 17.5s por anillo (antes 3.5s),
   6px de grosor inicial (antes 2px), más desenfoque al crecer. */
/* Dispara por proximidad de scroll, no por tiempo fijo (Víctor,
   02/09/2026) — la clase is-active la pone un IntersectionObserver
   propio en home.js cuando el bloque llega cerca del centro de la
   pantalla, no .is-built. Tres veces más rápido que la primera
   versión: 5.8s por anillo (antes 17.5s). */
.elite-ripple-ring.is-active {
    animation: eliteRipple 5.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes eliteRipple {
    0% {
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;
        opacity: 0.85;
        border-width: 6px;
        filter: blur(2px);
    }
    100% {
        width: 160vh;
        height: 160vh;
        margin: -80vh 0 0 -80vh;
        opacity: 0;
        border-width: 3px;
        filter: blur(7px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .elite-ripple-ring.is-active { animation: none; }
}

/* Extendido de 5 a 13 letras el 03/09/2026 ("DESAFÍO ÉLITE") — mismo
   incremento proporcional, para que el conjunto siga terminando sobre
   el mismo instante que antes (~1.3s) en vez de alargarse el triple. */
.home-finale.is-built .elite-letters span:nth-child(1) { transition-delay: 0.02s; }
.home-finale.is-built .elite-letters span:nth-child(2) { transition-delay: 0.13s; }
.home-finale.is-built .elite-letters span:nth-child(3) { transition-delay: 0.24s; }
.home-finale.is-built .elite-letters span:nth-child(4) { transition-delay: 0.35s; }
.home-finale.is-built .elite-letters span:nth-child(5) { transition-delay: 0.46s; }
.home-finale.is-built .elite-letters span:nth-child(6) { transition-delay: 0.57s; }
.home-finale.is-built .elite-letters span:nth-child(7) { transition-delay: 0.68s; }
.home-finale.is-built .elite-letters span:nth-child(8) { transition-delay: 0.79s; }
.home-finale.is-built .elite-letters span:nth-child(9) { transition-delay: 0.90s; }
.home-finale.is-built .elite-letters span:nth-child(10) { transition-delay: 1.01s; }
.home-finale.is-built .elite-letters span:nth-child(11) { transition-delay: 1.12s; }
.home-finale.is-built .elite-letters span:nth-child(12) { transition-delay: 1.23s; }
.home-finale.is-built .elite-letters span:nth-child(13) { transition-delay: 1.34s; }

.elite-lines {
    list-style: none;
    max-width: 820px;
    margin: clamp(1.8rem, 5vh, 3.2rem) auto 0;
    text-align: left;
}

/* Doble de tamaño (Víctor) + el mismo desenfoque→enfoque que los
   capítulos del relato, línea a línea en el mismo orden escalonado que
   ya tenía — no un barrido espacial nuevo, el mecanismo ya probado. */
.elite-lines li {
    font-family: var(--font-display);
    /* Techo en px (13/09/2026, lo vio Inés en su MacBook 13"): el mínimo
       del clamp va en rem y CRECE con el ajuste de letra del navegador,
       pero la caja son 820px fijos. Medido: la línea de la I —la más
       larga de las cinco— parte a partir de unos 23px. Con el techo, cabe
       siempre. En monitor normal no cambia nada. */
    font-size: min(clamp(1.75rem, 1.375vw, 2.2rem), 22px, 1.5vw);
    color: var(--text-muted);
    line-height: 1.4;
    padding: clamp(0.5rem, 1.5vh, 1rem) 0;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(8px);
    transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
}

.elite-lines li b {
    color: var(--text-main);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
}

.home-finale.is-built .elite-lines li {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

.home-finale.is-built .elite-lines li:nth-child(1) { transition-delay: 1.7s; }
.home-finale.is-built .elite-lines li:nth-child(2) { transition-delay: 2.0s; }
.home-finale.is-built .elite-lines li:nth-child(3) { transition-delay: 2.3s; }
.home-finale.is-built .elite-lines li:nth-child(4) { transition-delay: 2.6s; }
.home-finale.is-built .elite-lines li:nth-child(5) { transition-delay: 2.9s; }

.home-finale-buttons {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: clamp(1.8rem, 5vh, 3.5rem);
}

@media (prefers-reduced-motion: reduce) {
    .elite-letters span,
    .elite-lines li {
        transition-delay: 0s !important;
    }
}

/* ---------- Section grid genérico ---------- */

.section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
    margin-top: 4rem;
}

/* ---------- Dos puertas (Home) ---------- */

.doors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 4rem;
}

.door {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 400px;
    padding: 2.5rem;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease,
        background 0.3s ease, opacity 0.4s ease, filter 0.4s ease;
}

/* Apagar en vez de superponer (misma técnica que Origen): al señalar
   una puerta, la otra baja de brillo en vez de solo agrandar la
   señalada — se lee más claro cuál es tu camino. */
.doors:has(.door:hover) .door:not(:hover) {
    opacity: 0.5;
    filter: saturate(0.6) brightness(0.8);
}

/* Efecto aprobado 5 (PROYECTO.md sección 3): las dos puertas de la Home
   como formas triangulares que al juntarse evocan el símbolo de Víctor.
   Solo estas dos — la tarjeta de Desafío Élite en Sport usa la misma
   .door base sin el pico, porque no forma parte de ese momento. El pico
   apunta arriba, como el .triangle-shape de los pilares; el contenido
   vive en la base rectangular, fuera del recorte, para seguir siendo
   legible. */
.doors .door {
    padding-top: 4.5rem;
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 22%, 100% 100%, 0% 100%, 0% 22%);
}

.door:hover,
.door:focus-visible {
    transform: scale(1.03);
    border-color: var(--door-glow, var(--border-gold));
    background: var(--bg-surface-hover);
}

.door p {
    opacity: 0.75;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.door:hover p,
.door:focus-visible p {
    opacity: 1;
    transform: translateY(0);
}

.door h3 {
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

@media (min-width: 769px) and (min-height: 601px) {
    .door h3 {
        font-size: clamp(1.9688rem, 1.3125vw, 2.1rem);
    }
}

.door p {
    color: var(--text-muted);
    font-size: 1rem;
}

@media (min-width: 769px) and (min-height: 601px) {
    .door p {
        font-size: clamp(1.0781rem, 0.71875vw, 1.15rem);
    }
}

/* Sport en oro cálido, Executive en plata fría — dos líneas de marca,
   dos temperaturas. Mismas .text-shine-* que el resto de la web. */
.door-sport { --door-glow: var(--border-gold); }
.door-executive { --door-glow: rgba(200, 204, 214, 0.4); }

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

/* ---------- Escena a pantalla completa (páginas cortas) ---------- */

.scene {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8rem 5%;
    max-width: var(--max-width-content);
    margin: 0 auto;
}

.scene-narrow {
    max-width: 800px;
}

/* ---------- Diagnóstico (adelanto visual en Home) ---------- */

/* Menos padding vertical que el resto de secciones (8rem de .section):
   este bloque tiene que caber entero en pantalla junto al dibujo — con
   los 8rem de serie no dejaba sitio ni en 1080 (Víctor, 01/09/2026). */
.diagnostic-teaser {
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 5rem;
}

.diagnostic-teaser .btn {
    margin-top: 2rem;
}

/* Título sintetizado a una línea corta (Víctor, 02/09/2026): el bloque
   título+párrafo largo se comía casi un quinto del alto de pantalla,
   robándoselo al vídeo. Bastante más pequeño que un .section-heading
   normal — aquí es un rótulo de entrada al bloque, no un título de
   sección. */
/* +50%/doble (Víctor, 03/09/2026: "se lee muy pequeñito todo") */
.diagnostic-heading {
    font-size: 2.25rem;
    margin-bottom: 0.4rem;
}

@media (min-width: 769px) and (min-height: 601px) {
    .diagnostic-heading {
        font-size: clamp(2.6719rem, 1.78125vw, 2.85rem);
    }
}

.diagnostic-subheading {
    color: var(--text-muted);
    font-size: clamp(1.7813rem, 1.1875vw, 1.9rem);
    max-width: 780px;
    margin: 0 auto;
}

/* Pequeño y discreto a propósito (Víctor, 02/09/2026) — para quien
   llegó aquí directo, no compite con el botón grande de Home. */
/* Los dos enlaces previos al test, uno al lado del otro: "Ver la
   experiencia de entrada" y "Repetir el diagnóstico" (Inés,
   11/09/2026). Se envuelven para poder ponerlos en fila sin tocar el
   estilo de cada uno; en pantalla estrecha se apilan solos. */
.diagnostic-enlaces-previos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.6rem;
}

.diagnostic-ver-experiencia {
    display: block;
    margin: 0.8rem auto 0;
    background: none;
    border: none;
    color: var(--text-muted);
    text-decoration: underline;
    font-family: var(--font-display);
    /* El mismo tamaño que su pareja de la derecha, .diagnostic-restart
       (Víctor, 12/09/2026: "hay uno que no se lee ni harto de vino"). Los
       dos botones están uno al lado del otro y hasta ahora este iba a
       0,8rem y el otro a 1,1: parecían dos cosas distintas. Si se cambia
       uno, se cambia el otro. */
    font-size: clamp(1.0313rem, 0.6875vw, 1.1rem);
    cursor: pointer;
    transition: color 0.3s ease;
}

.diagnostic-ver-experiencia:hover,
.diagnostic-ver-experiencia:focus-visible {
    color: var(--brand-gold-light);
}

/* ---------- Formulario (Hablemos) ---------- */

.hablemos-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
    margin-top: 1.5rem;
    align-items: start;
}

@media (max-width: 950px), (max-height: 600px) {
    .hablemos-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
}

.contact-form label {
    font-size: clamp(0.75rem, 0.5vw, 0.8rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    display: block;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-square);
    padding: 0.9rem 1rem;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 0.625vw, 1rem);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--brand-gold);
}

.contact-form .field-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: clamp(0.8906rem, 0.59375vw, 0.95rem);
    color: var(--text-muted);
}

.contact-form .field-consent input {
    width: auto;
    margin-top: 0.2rem;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.2rem;
}

.contact-info-grid dt {
    font-size: clamp(0.75rem, 0.5vw, 0.8rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-gold);
    margin-bottom: 0.4rem;
}

.contact-info-grid dd {
    color: var(--text-main);
    font-size: 1.05rem;
}

@media (min-width: 769px) and (min-height: 601px) {
    .contact-info-grid dd {
        font-size: clamp(1.0781rem, 0.71875vw, 1.15rem);
    }
}

/* ---------- Números como elementos gráficos (Desafío Élite) ----------
   Efecto aprobado 4: 16 / 15 / 4 como cifras editoriales, no lista de
   características. Ahora viven dentro de la ventana grande
   (.reveal-modal-card), no en la zona de revelado estrecha — caben de
   sobra al tamaño que pedía el documento. */

.stat-numbers {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.stat-number {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.stat-number-value {
    font-size: 3.2rem;
    font-weight: var(--font-weight-semibold);
    color: var(--brand-gold);
    line-height: 1;
}

@media (min-width: 769px) and (min-height: 601px) {
    .stat-number-value {
        font-size: clamp(6.5625rem, 4.375vw, 7rem);
    }
}

.stat-number-label {
    margin-top: 0.4rem;
    font-size: clamp(0.6563rem, 0.4375vw, 0.7rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* ---------- Pago por plazos (Desafío Élite) ---------- */

.installments-list {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.installments-list li {
    list-style: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.2rem;
    font-size: clamp(0.8906rem, 0.59375vw, 0.95rem);
    color: var(--text-muted);
}

/* ---------- Utilidades de página ---------- */

.text-center { text-align: center; }

.eyebrow {
    font-size: clamp(0.7969rem, 0.53125vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--brand-gold);
    margin-bottom: 1rem;
}

/* Dos píxeles más grandes en los rótulos dorados de Deportistas,
   Desafío Élite, Familias y Clubs — ahí se veían pequeños (Víctor,
   11/09/2026). Mismo criterio de clamp: 12,2px en 1080p y 15,6px en
   QHD. El resto de páginas conserva el tamaño de siempre. */
.eyebrow.eyebrow-lg {
    font-size: clamp(0.9531rem, 0.125rem + 0.53125vw, 0.975rem);
}

@media (max-width: 768px), (max-height: 600px) {
    .site-header { padding: 1.5rem 5%; }

    .triangles {
        margin: 1.2rem 0 !important;
        gap: 1rem;
    }

    .triangle-panel {
        padding: 0.3rem !important;
        min-height: 2.2rem !important;
    }
}

/* ---------- Origen: retrato de Inés como fondo, no como tarjeta ----------
   Segundo intento (28/08/2026): la primera versión (foto pequeña al lado
   del texto) le pareció "página cutre" a Víctor. Lo que pidió: la foto
   grande de verdad, a sangre por la izquierda, fundiéndose poco a poco
   hacia el fondo azul marino — como un telón, no como una caja. El texto
   y los botones van encima, pisando la imagen sin problema; el titular
   pasa a dorado porque ahora vive sobre la foto, no sobre el fondo liso. */

#origen {
    position: relative;
}

/* Fuera del centrado vertical normal de .scene a propósito: Víctor lo
   quiso en el primer tercio de la pantalla, no a media altura, para que
   no compita en el centro exacto con el panel espejo de los tres temas. */
.origin-content {
    position: fixed;
    left: 50%;
    top: 32vh;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    /* +30% (Víctor, 03/09/2026: "más espacio y más grande la fuente") */
    max-width: 830px;
    text-align: center;
    transition: opacity 0.4s ease;
}

/* +30% sobre section-heading base (1.9rem/3.4rem) — Víctor, 03/09/2026 */
.origin-content h1 {
    font-size: 2.47rem;
}

@media (min-width: 769px) and (min-height: 601px) {
    .origin-content h1 {
        font-size: clamp(4.1438rem, 2.7625vw, 4.42rem);
    }
}

.origin-content > p {
    font-size: clamp(1.4625rem, 0.975vw, 1.56rem);
    line-height: 1.5;
    margin-top: 1.6rem !important;
}

/* Con el panel espejo abierto, el título y el párrafo estorbaban al
   texto del tema (se pisaban en el mismo hueco vertical). Se apaga el
   principal en vez de superponer los dos. */
body.origin-topic-abierto .origin-content {
    opacity: 0.1;
}

.origin-content > p {
    margin-left: auto;
    margin-right: auto;
}

/* Norma fija, no un valor de prueba: la foto nunca puede pasar de la
   mitad de la pantalla, porque la mitad derecha es del texto. Por eso
   va en vw sin max-width — un tope en píxeles la limitaría por debajo
   de la mitad en monitores grandes, que es justo lo que no queremos. */
.origin-portrait {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    /* Un tercio, no la mitad (Víctor, 03/09/2026) — el degradado interno
       usa porcentajes de este mismo ancho, así que se reescala solo. */
    width: 33vw;
    z-index: 0;
    pointer-events: none;
}

/* Un poco de degradado, no mucho (Víctor, 03/09/2026) — foto casi
   entera, solo un fundido corto pegado al borde derecho. */
.origin-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: opacity 0.2s ease;
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
}

/* vignette superior/inferior, misma técnica que .diagnostic-visual::after,
   para que el corte de arriba y abajo no se sienta una foto recortada */
.origin-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 6rem 3rem var(--bg-dark);
    pointer-events: none;
}

.origin-content .eyebrow,
.origin-content h1,
.origin-content > p {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.origin-cta {
    /* Más aire (Víctor, 03/09/2026): estaba pegado al párrafo de arriba */
    margin: 3rem 0 0;
}

/* En Origen, el bloque entero (rótulo, "Por qué existe AKENA", el párrafo
   y el botón Hablemos) se centra en el hueco que queda a la derecha de la
   foto, no en la pantalla entera (Víctor, 11/09/2026). La foto ocupa 33vw
   por la izquierda, así que el centro del hueco está en 33vw + la mitad
   de lo que sobra. Escrito con la fórmula, no con el número ya resuelto,
   para que siga a la foto si su ancho cambia. Clubs no se toca: allí el
   bloque va centrado en la pantalla a propósito. */
#origen.scene .origin-content {
    left: calc(33vw + (100vw - 33vw) / 2);
}

/* El bloque de Origen va centrado en el 32% de la altura. En pantallas
   bajas ese 32% cae tan arriba que el rótulo "El Origen" se metía contra
   el menú. Aquí se cuenta desde la cabecera hacia abajo, que es lo que de
   verdad hay que respetar (11/09/2026). */
@media (max-height: 900px) {
    #origen.scene .origin-content {
        top: calc(var(--header-h) + 26vh);
    }
}

/* ---------- Origen: los tres temas como palabras, no botones ----------
   Igual que el menú de arriba (sin caja), pero más grandes, ancladas
   del todo abajo y MUY separadas entre sí — llegando hacia los bordes,
   no apiñadas al centro. En pantallas grandes (QHD) suben de tamaño:
   en rem se quedaban pequeñas de más en un monitor así. */

.origin-topics-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--footer-h) + 1.2rem);
    z-index: 2;
    display: flex;
    justify-content: center;
}

.rayo-lunar {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 74vw;
    max-width: 1300px;
    height: 6rem;
    transform: translate(-50%, -50%);
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.rayo-lunar path { fill: none; stroke-linecap: round; stroke-linejoin: round; mix-blend-mode: screen; }
/* Prueba en dorado corporativo (Víctor, 04/09/2026, tras probar rojo:
   "mejor en dorado") — mismo trazo, sin tocar el token
   --reflejo-lunar-dim que usan otras páginas, solo esta cinta. */
.rayo-lunar .rayo-halo { stroke: rgba(200, 169, 104, 0.4); stroke-width: 12; }
.rayo-lunar .rayo-trazo { stroke-width: 1.8; }

.origin-topics-wrap:has(.origin-topic:hover) .rayo-lunar,
.origin-topics-wrap:has(.origin-topic:focus-visible) .rayo-lunar,
.origin-topics-wrap:has(.origin-topic.is-active) .rayo-lunar {
    opacity: 0.95;
}

.origin-topics {
    position: relative;
    z-index: 1;
    width: 74vw;
    max-width: 1300px;
    display: flex;
    justify-content: space-between;
}

.origin-topic {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    /* Contraste garantizado (Víctor, 03/09/2026: "La historia de Inés
       no se lee sobre la foto") — al quitar casi todo el degradado
       de la foto, "La historia de Inés" quedó sin sombra encima de una
       imagen bastante más clara. Antes solo tenía sombra en hover. */
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.8);
}

.origin-topic:hover,
.origin-topic:focus-visible,
.origin-topic.is-active {
    color: #f0f2ff;
    text-shadow: 0 0 18px rgba(191, 200, 255, 0.9), 0 0 36px rgba(200, 184, 255, 0.6);
    outline: none;
}

/* Quitado en Origen (Víctor, 10/09/2026): el rayo que cruzaba de "La
   historia de Inés" a "Trayectoria" — mismo criterio ya aplicado en
   Clubs ese mismo día. Sustituido por el reflejo lunar de los propios
   botones y del texto revelado, de abajo. */
#origen.scene .rayo-lunar {
    display: none;
}

/* Mismo reflejo lunar y misma intensidad que ya lleva Clubs (tres capas,
   14px/34px/62px) en los tres apartados (Historia/Visión/Trayectoria) y
   en el texto que revelan a la derecha — pedido de Víctor, 10/09/2026. */
#origen.scene .origin-topic:hover,
#origen.scene .origin-topic:focus-visible,
#origen.scene .origin-topic.is-active {
    text-shadow: 0 0 14px var(--reflejo-lunar-light), 0 0 34px var(--reflejo-lunar-light), 0 0 62px var(--reflejo-lunar);
}

#origen.scene .origin-reveal-text {
    text-shadow: 0 0 14px var(--reflejo-lunar-light), 0 0 34px var(--reflejo-lunar-light), 0 0 62px var(--reflejo-lunar), 0 2px 4px rgba(0, 0, 0, 0.9);
}

@media (min-width: 1800px) {
    .origin-topic { font-size: clamp(1.4531rem, 0.96875vw, 1.55rem); }
    .rayo-lunar { height: 7.5rem; }
}

/* Espejo de .origin-portrait: misma franja, mismo ancho, a la derecha,
   fundida a negro (no a blanco: se decidió tras verla — se queda dentro
   de la misma paleta oscura de toda la página) y letras en blanco.
   Solo aparece mientras se está sobre uno de los tres temas. */
.origin-reveal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50vw;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4vw 6rem 8vw;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: linear-gradient(to left,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.8) 30%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0) 100%);
}

.origin-reveal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.origin-reveal-text {
    display: none;
    font-family: 'Nothing You Could Do', cursive;
    font-size: clamp(1.5938rem, 1.0625vw, 1.7rem);
    line-height: 1.27;
    text-align: left;
    color: var(--text-main);
    /* Triple de ancho (Víctor, 03/09/2026): antes 480px. En la
       práctica lo manda el ancho real del panel (`.origin-reveal`,
       50vw menos su padding) — este tope ya no es el que limita. */
    max-width: 1440px;
    /* Víctor, 03/09/2026, corrección: el 25% a la izquierda era para
       este texto, no para los botones de sección (revertido arriba). */
    transform: translateX(-25%);
}

.origin-reveal-text.is-active {
    display: block;
}

@media (max-width: 768px), (max-height: 600px) {
    .origin-topics-wrap {
        position: static;
        margin-top: 1.5rem;
    }

    .rayo-lunar { display: none; }

    .origin-topics {
        width: 100%;
        max-width: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.2rem 2rem;
    }

    .origin-reveal {
        position: static;
        width: 100%;
        background: none;
        opacity: 1;
        pointer-events: auto;
        padding: 1rem 0 0;
        display: none;
    }

    .origin-reveal.is-visible {
        display: flex;
    }

    .origin-reveal-text {
        font-family: var(--font-body);
        font-size: 1rem;
        color: var(--text-muted);
        /* Víctor, 14/09/2026, probándolo en su teléfono: "se abre el
           texto, pero viene de la mitad hacia la derecha".

           El `translateX(-25%)` de arriba es de escritorio (03/09/2026),
           para colocar el texto dentro del panel de la derecha — y nunca
           se anuló aquí. En vertical el panel ocupa el ancho entero, así
           que ese 25% son 88px de una pantalla de 390: el texto empezaba
           en x=-68 y se cortaba por la izquierda.

           Ojo a por qué tardó en salir: un `transform` NO ensancha el
           documento. La página seguía midiendo 390 de ancho y ningún
           medidor de desbordes tenía nada que cantar. Se ve mirando la
           posición del elemento, no el ancho de la página. */
        transform: none;
    }
}

@media (max-width: 768px), (max-height: 600px) {
    .origin-portrait {
        position: static;
        width: 100%;
        max-width: none;
        height: 30vh;
        margin-bottom: 1.5rem;
        flex-shrink: 0;
    }

    .origin-portrait img {
        object-position: center 15%;
        -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    }

    /* Comprobado 10/09/2026: .origin-content se quedaba `position:fixed`
       en móvil (nunca tuvo versión propia para esta anchura) y flotaba
       encima de la foto y del resto del contenido en Origen y, sobre
       todo, en Clubs (texto más largo, se solapaba con todo). Pasa a
       flujo normal, apilado como el resto. */
    .origin-content {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        margin-bottom: 1.5rem;
    }
}

/* ---------- Clubs: mismo mecanismo que Origen, piel distinta ----------
   Reescrito 10/09/2026 tras varias vueltas — versión buena, según
   Víctor:
   - La imagen de la izquierda (.origin-portrait) es fija de verdad:
     siempre `pantalla-reposo.jpg`, nunca se toca por JS, nunca
     parpadea al pasar el ratón por las secciones.
   - El vídeo NO va ahí. Vive en el hueco de la derecha (.origin-reveal,
     el mismo panel espejo de Origen) y solo se reproduce mientras esa
     sección concreta está activa — en reposo no hay vídeo ninguno.
   - El texto de cada sección SÍ se ve mientras su vídeo está activo
     (se enseña junto al vídeo, no se oculta) — lo único que desaparece
     al activar una sección es el bloque general "AKENA CLUB" de la
     izquierda-centro, que ya no pinta nada ahí en ese momento. */
/* Tres cajas iguales de alto (12.6vh arriba/abajo) con el MISMO margen
   (3vw) entre las cuatro separaciones: borde-foto, foto-vídeo,
   vídeo-texto, texto-borde (Víctor, 10/09/2026). Foto y caja de texto
   miden 25.5vw cada una; el vídeo se queda con lo que sobra en medio
   (100 - 4×3 - 2×25.5 = 37vw) — no se fuerza a 16:9, así que el vídeo
   (con object-fit:contain) pone sus propios márgenes de cine. */
#clubs.scene .origin-portrait {
    top: 12.6vh;
    bottom: 12.6vh;
    left: 3vw;
    width: 25.5vw;
    right: auto;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-gold);
    box-shadow: 0 0 60px rgba(150, 126, 78, 0.3), inset 0 0 50px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

#clubs.scene .origin-portrait img {
    -webkit-mask-image: none;
    mask-image: none;
}

#clubs.scene .origin-portrait::after {
    box-shadow: inset 0 0 3rem 1.2rem rgba(0, 0, 0, 0.5);
}

/* Caja de texto de la derecha: mismo tamaño que la foto, espejada, pero
   completamente invisible — solo delimita dónde va el texto de cada
   sección, no se ve como caja (Víctor, 10/09/2026). */
#clubs.scene .origin-reveal {
    top: 12.6vh;
    bottom: 12.6vh;
    left: auto;
    right: 3vw;
    width: 25.5vw;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    /* "El talento" y "Un paso más allá" son textos largos — sin esto se
       salían de la caja por arriba y por abajo, invadiendo el menú y el
       pie (Víctor, 10/09/2026: "el texto desborda"). Con scroll interno
       nunca rompe el sitio, aunque el texto sea largo. */
    overflow-y: auto;
    align-items: flex-start;
    justify-content: center;
}

/* Quitado del todo en Clubs (Víctor, 10/09/2026: "es una mierda
   inmensa"). Se queda solo en Origen. */
#clubs.scene .rayo-lunar {
    display: none;
}

#clubs.scene .origin-reveal-text {
    font-family: var(--font-body);
    font-style: normal;
    /* Mismo tamaño que tenía en Origen — solo se baja donde de verdad
       no cabe (Víctor, 10/09/2026: "baja el tamaño lo mínimo
       imprescindible"), no en todas por igual. */
    font-size: clamp(1.5938rem, 1.0625vw, 1.7rem);
    line-height: 1.5;
    position: relative;
    z-index: 1;
    padding: 1.5rem 2vw;
    box-sizing: border-box;
    width: 100%;
    /* En Origen este texto va desplazado -25% a la izquierda (corrección
       propia de esa página). En Clubs no aplica: tiene que quedar
       centrado de verdad dentro del hueco 16:9 (Víctor, 10/09/2026). */
    transform: none;
    /* Justificado a los dos lados, última línea a la izquierda (por
       defecto de justify) — el texto de cada sección, no el bloque
       principal de reposo (Víctor, 10/09/2026). */
    text-align: justify;
    /* Mismo brillo de color que llevaba el fulgor del hueco central,
       con la misma intensidad (Víctor, 10/09/2026: "se tiene que
       reflejar igualmente con intensidad en las letras") — no solo una
       sombra oscura de legibilidad, el color también llega al texto.
       Ensanchado y con más color el mismo día, ya sin el fulgor central
       (Víctor: "que sea un poco más color y el reflejo un poco más
       amplio") — pasa de dos capas de color (18px/36px) a tres
       (14px/34px/62px), la primera más ceñida y saturada, la última
       mucho más ancha que antes. */
    text-shadow: 0 0 14px var(--reflejo-lunar-light), 0 0 34px var(--reflejo-lunar-light), 0 0 62px var(--reflejo-lunar), 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Único que no cabe al tamaño de Origen (comprobado: se salía 97px de
   la caja) — bajado lo mínimo para que quepa, no más (Víctor,
   10/09/2026). El resto de temas se queda con el tamaño de arriba. */
#clubs.scene .origin-reveal-text[data-topic-content="talento"] {
    font-size: clamp(1.4375rem, 0.95vw, 1.52rem);
}

/* Virado de color, mismo reparto y mismo ensanchado que arriba.
   Segunda subida el 11/09/2026 (Víctor: "se queda corto, que se extienda
   más o dale más color"). Tres cosas a la vez, no solo el radio:
   - Radios de 28/68/124 a 24/70/140/220, mucho más lejos.
   - Capa cercana repetida: dos sombras iguales en el mismo sitio suman
     densidad, así que el color pesa más cerca de la letra sin emborronarla.
   - El azul claro de marca (#d8ecfb) es casi blanco y aguaba el efecto:
     en Cuerpo y energía solo se queda en el núcleo, y el resto pasa al
     azul de verdad. Mismo criterio en burdeos y oro: el tono claro cerca,
     el saturado lejos.
   El reflejo neutro de talento y paso allá se queda como estaba. */
/* Los tres pilares son textos cortos: en vez de ocupar todo el ancho del
   panel, se estrechan a columna de una o dos palabras por línea y se
   centran dentro de él (Víctor, 11/09/2026). El justificado del bloque
   general no vale aquí — a este ancho abriría calles enormes entre
   palabras —, así que van centrados. */
#clubs.scene .origin-reveal-text[data-topic-content="mente"],
#clubs.scene .origin-reveal-text[data-topic-content="cuerpo"],
#clubs.scene .origin-reveal-text[data-topic-content="objetivos"] {
    max-width: 9ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#clubs.scene .origin-reveal-text[data-topic-content="mente"] {
    text-shadow:
        0 0 24px var(--tri-burgundy-light), 0 0 24px var(--tri-burgundy-light),
        0 0 70px var(--tri-burgundy-light),
        0 0 140px var(--tri-burgundy), 0 0 220px var(--tri-burgundy),
        0 2px 4px rgba(0, 0, 0, 0.9);
}

#clubs.scene .origin-reveal-text[data-topic-content="cuerpo"] {
    text-shadow:
        0 0 24px var(--brand-blue-light), 0 0 24px var(--brand-blue),
        0 0 70px var(--brand-blue),
        0 0 140px var(--brand-blue), 0 0 220px var(--brand-blue),
        0 2px 4px rgba(0, 0, 0, 0.9);
}

#clubs.scene .origin-reveal-text[data-topic-content="objetivos"] {
    text-shadow:
        0 0 24px var(--brand-gold-light), 0 0 24px var(--brand-gold-light),
        0 0 70px var(--brand-gold-light),
        0 0 140px var(--brand-gold), 0 0 220px var(--brand-gold),
        0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Hueco central sin nada dentro (quitado el fulgor el mismo 10/09/2026,
   pocos minutos después de ponerlo: Víctor, "eso lo quitas entero, con
   eso no se ve el texto de debajo"). El bloque general "AKENA CLUB"
   vive ahí en medio y ahora se queda siempre visible, no se apaga con
   ninguna sección — ver la regla de más abajo. */

/* Ajustes de aire pedidos por Víctor, 10/09/2026 */
/* El bloque de texto se centra en la pantalla entera, pero la foto es
   fija a la izquierda y su ancho sí escala (25,5vw + 3vw de margen =
   termina en 28,5vw). Con un max-width fijo de 830px, cuanto más
   estrecha la ventana más se metía el texto encima de la foto: medido,
   71px en 1600x1080 y 105px en 1440 de ancho. En QHD no pasaba, y por
   eso no se había visto.
   Solución con el patrón de anchos que ya usa la web — min(Xvw, tope en
   píxeles), igual que .hero-content — en vez de un valor fijo. El tope
   de 830px no se toca, así que a partir de 2184px de ancho (y por tanto
   en QHD) queda exactamente igual que antes. En Origen NO se aplica:
   allí el texto monta sobre la foto a propósito, y para eso está el
   degradado que la funde con el fondo (Víctor, 11/09/2026). */
#clubs.scene .origin-content {
    max-width: min(38vw, 830px);
}

#clubs.scene .origin-content h1 {
    line-height: 1.1;
}

#clubs.scene .origin-content > p {
    margin-top: 3.6rem !important;
}

/* "El texto en medio ahora se tiene que ver siempre. No desaparece
   cuando pasas el ratón por alguno de los cinco elementos" (Víctor,
   10/09/2026) — anula para Clubs el apagado que sí aplica en Origen. */
body.origin-topic-abierto #clubs.scene .origin-content,
body.origin-topic-abierto #clubs.scene .origin-cta {
    opacity: 1;
    pointer-events: auto;
}

/* Los dos bloques centrales de Clubs — el de arriba ("AKENA Club" con su
   titular) y el de cierre con el botón — estaban clavados cada uno por su
   cuenta a la pantalla, uno contado desde arriba y otro desde abajo, sin
   saber el uno del otro. En pantallas de poca altura (el portátil de Inés
   con sus barras, o un móvil tumbado) se montaban encima e ilegibles.
   Ahora van uno detrás de otro dentro de la escena, que ya es una columna
   centrada, y el hueco entre ellos se mide en alto de pantalla: en 1080 y
   en QHD queda donde estaba, y al encoger la pantalla el hueco cede en
   vez de provocar el choque (Víctor, 11/09/2026 — el "cambio 3"). */
#clubs.scene {
    justify-content: flex-start;
    /* Los dos números salen de medir dónde estaba cada bloque en 1920×1080
       antes del cambio (185px el de arriba, 163px de hueco entre los dos),
       descontando lo que ya aporta la cabecera y el margen propio del
       bloque de cierre. En 1080 y QHD quedan en el mismo sitio exacto. */
    padding-top: 7.3vh;
    padding-bottom: calc(var(--footer-h) + 6rem);
    gap: clamp(1rem, 10.6vh, 115px);
}

#clubs.scene .origin-content,
#clubs.scene .origin-cta {
    position: static;
    transform: none;
    margin-left: auto;
    margin-right: auto;
}

/* Al subir el tamaño mínimo de letra (12/09/2026) el contenido de Clubs
   pasó a pedir 88px más de los que hay en una pantalla de 1080, y esta
   página tiene que caber entera. Los 88px salen del hueco entre los dos
   bloques de texto y del aire de arriba.
   OJO con el relleno de abajo, que fue mi primer intento y estaba mal: no
   es aire muerto, es la reserva que mantiene el bloque de cierre por
   encima de la fila de temas, que va en posición fija contra el borde de
   la ventana. Al recortarlo, "Descubrir AKENA Club" se subía encima de
   "Mente y emociones" (visto en pantalla, no medido: el medidor de
   desbordes no caza dos cosas que se pisan). Se queda como estaba.
   El tramo está acotado por arriba y por abajo a propósito: en QHD cabía
   y sigue cabiendo, y por debajo de 900 manda el bloque de pantallas
   bajas que viene justo después. */
/* El tramo tiene tope por arriba A PROPÓSITO (Víctor, 12/09/2026). Las
   cajas son "un apaño que he puesto porque no me quedaba más remedio": en
   una pantalla que no da de sí, la fila de temas cruzando de lado a lado
   no cabe. Pero donde hay sitio —su QHD— el diseño original es más bonito
   y se queda. Por eso 1200 de tope: por encima, la fila vuelve a su sitio. */
@media (min-height: 901px) and (max-height: 1200px) {
    #clubs.scene {
        padding-top: 1vh;
        gap: clamp(1rem, 2.5vh, 60px);
    }

    /* La fila de temas va anclada al borde de la ventana, y en una pantalla
       de 950 —1080 menos las barras del navegador, que es lo que tiene
       Víctor de verdad— el contenido en flujo llega hasta ella y se
       montan: primero fue la línea dorada, y al acortar los textos, el
       botón de cierre. Mientras siga siendo fija volverá a pasar con
       cualquier texto que crezca.
       Aquí baja al flujo normal, detrás del resto. Se ve en el mismo
       sitio —al final, justo encima del pie— pero ya no puede pisar nada.
       Solo en Clubs: en Origen la fila fija no da problemas. */
    #clubs .origin-topics-wrap {
        position: static;
        /* El aire que se le quitó al titular, aquí: la fila necesitaba
           despegarse de "centrados en:" para leerse como lo que es, una
           lista de temas, y no como la continuación del párrafo.
           Y el mismo por abajo (Víctor, 12/09/2026): el bloque de temas
           queda con la misma separación del párrafo de arriba y del de
           abajo, centrado entre los dos. */
        margin-top: 0.9rem;
        margin-bottom: 0.9rem;
    }

    /* Al bajar la fila al flujo, también cuenta para el reparto de huecos
       de la escena: con el hueco de antes el botón de cierre se salía por
       abajo unos píxeles. */
    /* Hueco general corto: el aire de esta página va concentrado donde hace
       falta (debajo de "centrados en:", ver más abajo), no repartido a
       partes iguales entre todos los bloques. */
    #clubs.scene {
        gap: clamp(0.4rem, 0.6vh, 40px);
    }

    /* Y ahí dentro hay que recomponerla, porque viene diseñada para ir
       anclada al borde de la ventana: ocupa el 74% del ancho de pantalla
       —1184px en el monitor de Víctor— mientras la columna de texto está
       limitada a 700. Pegadas una encima de otra, no hay forma de que
       cuadren (Víctor, 12/09/2026: "está tan ancho que se descuadra
       completamente"). Se estrecha al ancho de la columna y se reparte en
       rejilla, que envuelve sola cuando no caben en una línea. */
    /* Colocadas como los anillos olímpicos (Víctor, 12/09/2026): tres
       arriba y dos abajo, y las de abajo justo en los huecos de las de
       arriba. La rejilla es de seis columnas y cada caja ocupa dos; las dos
       últimas arrancan con una columna de desfase, que es lo que las deja
       encajadas entre las de arriba. Así sale siempre igual, sin depender
       de lo que ocupe cada texto. */
    #clubs .origin-topics {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem 0.8rem;
    }

    #clubs .origin-topic {
        grid-column: span 2;
    }

    /* Las dos de abajo se reparten el ancho entero, media rejilla cada una:
       llenan la línea igual que las tres de arriba y sus juntas caen en
       mitad de las cajas superiores, que es lo que da el aire de anillos
       olímpicos sin dejar el bloque cojo por los lados. */
    #clubs .origin-topic:nth-child(4) { grid-column: 1 / span 3; }
    #clubs .origin-topic:nth-child(5) { grid-column: 4 / span 3; }

    /* Al quedar arriba pierden el sitio que las identificaba como
       secciones y se pueden pasar por alto, así que se les da caja. No es
       una caja nueva: son los mismos valores de .reveal-zone, que es el
       patrón de caja de esta web. */
    #clubs .origin-topic {
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-card);
        background: var(--bg-surface);
        padding: 0.55rem 0.9rem;
        transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
        /* Mismo cuerpo que el párrafo que tienen encima —con dos tamaños
           distintos a diez píxeles uno de otro, la fila se leía como el
           final raro del párrafo anterior— y con el mismo tramo variable:
           este bloque se activa por ALTO de pantalla, así que puede tocarle
           a un monitor muy ancho y bajo, y ahí un tamaño fijo se quedaría
           corto. */
        font-size: clamp(1.05rem, 0.85vw, 1.45rem);
        letter-spacing: 0.1em;
    }

    #clubs .origin-topic:hover,
    #clubs .origin-topic:focus-visible,
    #clubs .origin-topic.is-active {
        border-color: var(--border-gold);
        background: var(--bg-surface-hover);
    }

    /* La cinta de luz iba detrás de la fila cuando esta cruzaba la pantalla
       entera; dentro de la columna no tiene sitio ni sentido. */
    #clubs .rayo-lunar {
        display: none;
    }
}

/* Pantallas bajas (portátil con barras, móvil tumbado): con el mismo
   ancho estrecho el texto hace muchas más líneas de las que caben. Se
   ensancha el bloque —menos líneas— y se baja la letra midiéndola en alto
   de pantalla, no en ancho. El corte está en 900px de alto a propósito:
   el portátil de Inés da 860 y también lo necesitaba (medido: el bloque
   de cierre le salía 138px por debajo de la pantalla). Por encima de ahí
   no se aplica nada de esto, así que 1080 y QHD no se enteran. */
@media (max-height: 900px) {
    #clubs.scene {
        padding-top: 4vh;
        gap: clamp(0.6rem, 4vh, 40px);
    }

    #clubs.scene .origin-content,
    #clubs.scene .origin-cta,
    #clubs.scene .origin-topics-wrap {
        max-width: min(62vw, 900px);
    }

    #clubs.scene .origin-content h1 {
        font-size: clamp(1.625rem, 4.4vh, 2.2rem);
    }

    #clubs.scene .origin-content > p {
        font-size: clamp(1rem, 2.2vh, 1.05rem);
        margin-top: 1.2rem !important;
    }

    #clubs.scene .origin-cta {
        margin-top: 0;
    }

    #clubs.scene .origin-cta p {
        font-size: clamp(0.9375rem, 2vh, 1rem);
    }
}

#clubs.scene .origin-cta {
    z-index: 1;
    width: 100%;
    /* Mismo caso y misma ecuación que #clubs.scene .origin-content de
       más arriba: con 830px fijos este bloque también se metía 71px
       encima de la foto en 1600x1080. El tope de 830px no se toca, así
       que QHD queda igual. */
    max-width: min(38vw, 830px);
    text-align: center;
}

@media (max-width: 768px), (max-height: 600px) {
    /* Comprobado 10/09/2026: en móvil, el hueco central invisible de
       texto (pensado para un panel de escritorio a la derecha) se
       quedaba con sus valores de escritorio (25.5vw, 12.6vh) porque
       nunca tuvo versión propia — apilado como el resto, igual que ya
       hace Origen. */
    #clubs.scene .origin-reveal {
        position: static;
        top: auto;
        right: auto;
        width: 100%;
        background: none;
        padding: 1rem 0 0;
        overflow-y: visible;
    }

    /* El CTA fijo abajo del todo no cabe con el resto del contenido
       apilado en móvil — pasa a flujo normal, al final. */
    #clubs.scene .origin-cta {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        max-width: none;
        margin-top: 1.5rem;
    }
}

@media (max-width: 768px), (max-height: 600px) {
    #clubs.scene .origin-portrait {
        top: 2vh;
        left: 2vw;
        right: 2vw;
        width: auto;
        height: 26vh;
        bottom: auto;
    }

    #clubs.scene .origin-topics-wrap {
        transform: none;
    }
}

/* ---------- Diagnóstico interactivo (Home) ---------- */

/* Más ancho que el bloque central de 1200px que usa el resto de la web
   (Víctor: "todo lo grande que se pueda"), pero ya no a pantalla
   completa: el bloque compacto único (02/09/2026) tiene su propio marco
   con fondo y borde, y a 100vw se veía descentrado respecto al resto. */
/* Tope subido de 1500 a 2000px (Víctor, 02/09/2026: "tienes un tercio
   de pantalla que puedes sumar") — a QHD sobraba casi un tercio de
   ancho de sobra a los lados sin usar. */
/* El fallo real de hoy (Víctor: "sale a la derecha"): el marco es más
   ancho que su contenedor (bloque central de 1200px), y en cuanto un
   hijo es más ancho que su padre, "margin: auto" deja de centrar —
   se pega al borde izquierdo y sobra por la derecha, es así como
   funciona CSS, no un capricho. Centrado contra la PANTALLA entera
   con el truco estándar (50vw + retroceso de su propio ancho), no
   contra el contenedor. */
.diagnostic-widget {
    width: min(90vw, 2000px);
    margin-top: 2rem;
    /* 50vw + translateX no valía: el contenedor no arranca en el borde
       de la pantalla, así que ese truco lo desplazaba de más. Este
       centra contra el propio contenedor (que ya está centrado en la
       pantalla), restando la mitad del ancho real del marco — así
       funciona sea cual sea el padding del padre. */
    margin-left: calc(50% - min(90vw, 2000px) / 2);
    text-align: left;
}

/* Bloque compacto único (Víctor, 02/09/2026): antes eran tres cajas
   sueltas con gap grande que se reorganizaban al cambiar de pregunta o
   al mostrar el resultado — "tiene que ser un bloque que no se mueva".
   Grid de columnas FIJAS: lo que aparece/desaparece es el contenido de
   cada columna (preguntas, resultado), nunca el ancho del marco. El
   propio marco lleva el fondo/borde — las columnas ya no tienen los
   suyos, así se lee como una sola pieza, no tres tarjetas. */
/* Columnas con fr, no solo minmax con tope fijo (Víctor, 02/09/2026):
   con topes fijos (340/520/340 = 1200px) el marco se quedaba corto en
   pantallas anchas — a QHD el widget llega a 1500px pero las columnas
   sumaban 1200, dejando 300px sueltos sin repartir y el bloque
   descuadrado. Con fr, las tres columnas SIEMPRE llenan el ancho
   completo del marco, en cualquier pantalla. */
.diagnostic-layout {
    display: grid;
    /* Las tres cajas al mismo tamaño (Víctor, 02/09/2026) — antes el
       centro era más ancho que los lados; ahora con más ancho total
       en el marco, igualarlas también deja más sitio a las preguntas,
       para que quepan en menos líneas. */
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    align-items: stretch;
    /* Más transparente que el resto de paneles de la web, a propósito
       (Víctor, 02/09/2026): deja que el rayo lunar se cuele por
       detrás en el resultado. */
    background: var(--bg-surface-veil);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    overflow: hidden;
    /* Tope de 820px pensado para 1080 de alto — en QHD (1440px de alto)
       ese tope se queda muy corto y deja aire de sobra arriba y abajo
       del bloque (Víctor, 02/09/2026: "un tercio entre arriba y
       abajo"). El cálculo con vh ya se ajusta solo hacia abajo en
       1080 (872px, sigue por debajo del tope nuevo), así que subir el
       tope no rompe nada ahí. */
    height: min(calc(100vh - 13rem), 1200px);
}

/* Sitio fijo por columna, explícito (Víctor, 02/09/2026: "el vídeo se
   va a la izquierda"). Sin esto, en cuanto una columna está oculta
   (display:none) la rejilla la salta al colocar y mete el siguiente
   elemento visible en su hueco — el vídeo terminaba en la columna 1
   en vez de en el centro. Con grid-column fijo, cada pieza vive
   siempre en su sitio, esté lo que esté oculto a su lado. */
.diagnostic-questions { grid-column: 1; grid-row: 1; }
.diagnostic-visual { grid-column: 2; grid-row: 1; }
.diagnostic-result { grid-column: 3; grid-row: 1; }

/* Frases de apertura del diagnóstico (Víctor, 06/09/2026): mismo fundido
   de .relato-escena (opacity, 1.8s, una sustituye a la otra) más el
   difuminado de .elite-letters (filter:blur) — no una animación nueva,
   las dos ya existentes combinadas. El dorado es .relato-oro tal cual.
   Comparten columna con .diagnostic-questions/.diagnostic-result (grid-
   column 1 y 3): esas dos están hidden en este momento del flujo, así
   que no hay choque visual, solo hace falta fijar la fila. */
.diagnostic-intro-frase {
    /* position:relative explícito, igual que .diagnostic-questions/
       .diagnostic-result (Víctor, 06/09/2026: "clona lo que ya
       funciona") — z-index en un grid item sin position debería
       bastar por espec, pero las preguntas ya demuestran en pantalla
       real que con position:relative sí se ven sobre el tatuaje;
       calcado en vez de fiarme de la otra vía. */
    position: relative;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    text-align: center;
    padding: 0 1.2rem;
    z-index: 1;
    pointer-events: none;
    font-family: var(--font-body);
    font-size: clamp(1.875rem, 1.5vw, 2.4rem);
    line-height: 1.4;
    /* Dorado real, no el casi-blanco de .relato-oro (Víctor, 06/09/2026:
       "está saliendo en blanco") — ese color está pensado para una
       palabra suelta sobre negro, no para una frase entera a este
       tamaño. Relleno en --brand-gold-light, brillo con los mismos
       tonos que ya usa el resto del dorado de la web. */
    color: var(--brand-gold-light);
    text-shadow: 0 0 20px rgba(200, 169, 104, 0.9),
        0 0 55px rgba(150, 126, 78, 0.7),
        0 0 120px rgba(150, 126, 78, 0.4);
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.8s ease, filter 1.8s ease;
}

.diagnostic-intro-frase-izq { grid-column: 1; }
.diagnostic-intro-frase-der { grid-column: 3; }

.diagnostic-intro-frase.visible {
    opacity: 1;
    filter: blur(0);
}

.diagnostic-questions,
.diagnostic-result {
    height: 100%;
    padding: 1.8rem 1.6rem;
    overflow-y: auto;
}

/* El resultado (columna derecha) arrancaba ~40px más arriba que las
   preguntas (columna izquierda) — medido con Playwright, no a ojo
   (Víctor, 07/09/2026: "respuestas es derecha... bájalo a la misma
   altura que las preguntas"). Causa: .diagnostic-question suma su
   propio padding-top (clamp(2.7rem, 4vh, 3.6rem)) al de aquí arriba,
   pero .diagnostic-result solo tenía el de aquí — mismo clamp añadido
   también al resultado para que las dos columnas empiecen a la misma
   altura en cualquier resolución. */
.diagnostic-result {
    /* Este valor copia el padding-top de .diagnostic-question para que
       las dos columnas arranquen a la misma altura. Al recortar aquel a
       la mitad el 11/09/2026 hubo que recortar este igual: si no, el
       resultado se quedaba con el espaciado viejo y desbordaba 20px en
       el Asus de Inés (1536x864), medido. */
    padding-top: calc(1.8rem + clamp(1.35rem, 2vh, 1.8rem));
}

/* Fondo "tatuado" en el tercio izquierdo y derecho del marco (Víctor,
   04/09/2026). Va en .diagnostic-layout, NO en .diagnostic-questions ni
   en .diagnostic-result: esas dos columnas aparecen y desaparecen según
   el paso del test (preguntas en opacity:0 hasta is-visible, resultado
   en display:none hasta que hay respuesta) y ahí dentro el fondo se
   quedaba invisible con ellas — se ve el marco fijo desde el principio,
   así que el dibujo también tiene que vivir ahí. Los dos dibujos a tiza
   blanca sobre negro se usan como plantilla de luminancia: lo blanco se
   rellena con el azul del rayo lunar, lo negro se vuelve transparente y
   deja ver el navy real de la web por debajo. Sutil a propósito. */
.diagnostic-layout {
    position: relative;
}

.diagnostic-layout::before,
.diagnostic-layout::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(100% / 3);
    z-index: 0;
    pointer-events: none;
    /* background-blend-mode en vez de mask-image: la máscara de
       luminancia no se veía en absoluto (soporte desigual entre
       navegadores según el motor). "multiply" es mucho más compatible:
       el blanco del dibujo se queda en el azul de --reflejo-lunar-light,
       el negro se va casi a cero y, con la opacidad baja de aquí
       encima, se hunde en el navy real de fondo. */
    background-color: var(--reflejo-lunar-light);
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    opacity: 0.2;
}

.diagnostic-layout::before {
    left: 0;
    background-image: url('../images/diagnostico-tatuaje-izquierda.jpg');
}

.diagnostic-layout::after {
    right: 0;
    background-image: url('../images/diagnostico-tatuaje-derecha.jpg');
}

/* Preguntas y resultado por encima del tatuaje de fondo, con su propio
   fondo real detrás de su texto para que siga leyéndose bien. */
.diagnostic-questions,
.diagnostic-result {
    position: relative;
    z-index: 1;
}

/* Sin líneas divisorias entre columnas (Víctor, 02/09/2026: "se sigue
   viendo como tres bloques intercambiables") — el borde de fuera de
   .diagnostic-layout ya delimita el marco entero; las rayas internas
   eran las que lo partían en tres cajas pegadas en vez de una pieza. */

/* ---------- Visual del diagnóstico: boceto → figura de color → resultado ----------
   800x1200 portrait. Dos capas de vídeo apiladas para el crossfade; la que
   entra sube su opacidad mientras la otra baja. Víctor: las ilustraciones
   necesitan tamaño grande y aire, no un recuadro pequeño (28/08/2026). */

/* Por alto de pantalla, no por ancho fijo (mismo criterio que el resto
   de la web — ver Escalar por el alto). Con aspect-ratio puro, en 1080
   la caja podía salir más pequeña que en QHD según el ancho real de
   ventana, y las preguntas/opciones superpuestas (.diagnostic-overlay,
   ancladas abajo) se cortaban por arriba con overflow:hidden — no se
   leían enteras. Fijando la ALTURA por vh y dejando que el ancho lo
   derive el aspect-ratio, la caja tiene sitio de sobra en cualquier
   resolución de escritorio (Víctor, 01/09/2026). */
/* El fallo real (Víctor, 02/09/2026): esta regla calculaba su propio
   ancho a partir del ALTO DE LA PANTALLA (100vh) con aspect-ratio,
   herencia de cuando este bloque vivía suelto, antes de la rejilla de
   columnas de hoy. Ese ancho no tenía nada que ver con el hueco real
   de su columna — en pantallas altas salía más ancho que su columna y
   se metía encima del resultado ("se lee partido"). Ahora llena su
   celda de la rejilla sin más; el vídeo de dentro ya recorta con
   object-fit: cover. */
.diagnostic-visual {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}

.diagnostic-video-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* 13/09/2026: es decorativo y estaba comiéndose los clics — las
       respuestas del test quedaban debajo y no se podían pulsar.
       Comprobado con el navegador: el clic en el centro de cada botón lo
       recibía este vídeo. */
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.diagnostic-video-layer.is-active {
    opacity: 1;
}

/* gradiente de fusión en los cuatro bordes, para que el vídeo no corte en seco */
.diagnostic-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 3rem 1.2rem var(--bg-dark);
    pointer-events: none;
    z-index: 2;
}

/* El dibujo fijo vive DETRÁS de las capas de vídeo (sin z-index propio,
   pintado antes en el DOM) para que el vídeo lo cubra en cuanto entra.
   Cuando el vídeo termina (loop quitado), se apaga el vídeo y el dibujo
   queda visible solo — con un brillo lento para que no se sienta un
   simple "se paró la animación". */
.diagnostic-visual-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

.diagnostic-visual-fallback.visible {
    opacity: 1;
}

.diagnostic-visual-fallback.brilla {
    animation: diagnostic-dibujo-brillo 3.5s ease-in-out infinite;
}

@keyframes diagnostic-dibujo-brillo {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.15) saturate(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .diagnostic-visual-fallback.brilla { animation: none; }
}

/* Solo se ve si un vídeo falla al cargar de verdad (onerror) — ya no es
   el estado por defecto antes de elegir género. */
.diagnostic-visual-pending {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: clamp(0.75rem, 0.5vw, 0.8rem);
    letter-spacing: 0.05em;
    background: repeating-linear-gradient(
        45deg,
        var(--bg-surface),
        var(--bg-surface) 10px,
        var(--bg-surface-hover) 10px,
        var(--bg-surface-hover) 20px
    );
}

/* [hidden] y la clase comparten especificidad; sin esto el display:flex
   de arriba gana siempre y las rayas se ven aunque hidden="true" — bug
   real que tapaba hasta los botones de Chico/Chica. */
.diagnostic-visual-pending[hidden] {
    display: none;
}

.diagnostic-gender-select[hidden] {
    display: none;
}

.diagnostic-gender-select {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.diagnostic-gender-select[hidden] {
    display: flex;
    opacity: 0;
    pointer-events: none;
}

.diagnostic-gender-prompt {
    color: var(--text-main);
    font-size: clamp(0.8906rem, 0.59375vw, 0.95rem);
    letter-spacing: 0.05em;
}

.diagnostic-gender-buttons {
    display: flex;
    gap: 1rem;
}

.diagnostic-gender-buttons .btn {
    background: var(--brand-navy);
}


/* Los botones NUNCA dentro del scroll de seguridad: si el texto de los
   tres pilares no cupiera entero, que se desplace el texto solo, pero
   el botón de WhatsApp y "Su historia" se quedan siempre a la vista
   (bug real, 01/09/2026: el scroll del bloque entero se los tragaba). */
.diagnostic-result {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

/* Mismo bug ya conocido en este archivo (ver .diagnostic-visual-pending
   arriba): [hidden] y la clase comparten especificidad, así que sin
   esto el display:flex de arriba gana siempre y el resultado ("Hablar
   con Inés", "Su historia") se ve aunque hidden="true" — Víctor,
   02/09/2026, se veía mientras aún estaban las preguntas. */
.diagnostic-result[hidden] {
    display: none;
}

.diagnostic-result-text {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.diagnostic-result-buttons,
.diagnostic-restart {
    flex: 0 0 auto;
}

.diagnostic-questions {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.diagnostic-questions.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Todo el bloque (encabezado dorado + pregunta + respuestas) baja como
   una unidad, misma distancia que ya hay entre "Situación" e "Imagina"
   (Víctor, 04/09/2026) — el espaciado interno no se toca, solo el
   punto de arranque del bloque entero. Afecta a las 4 preguntas por
   igual, es la misma clase en las 4. */
.diagnostic-question {
    /* Corregido 06/09/2026: la caja mide su alto con 100vh (ver
       .diagnostic-layout, tope de 1200px pensado para 1440 de alto,
       QHD). En una pantalla de 1080 de alto la caja sale más baja en
       píxeles reales — este padding en rem fijo no se achicaba con
       ella y el contenido no cabía (salía scroll). clamp() por vh, no
       un salto de dos escalones: cualquier alto intermedio (1300,
       1200...) o más corto que 1080 también queda cubierto, no solo
       los dos puntos QHD/1080. Tope sin tocar (3.6rem, el de QHD);
       suelo al 75% (2.7rem, la proporción real 1080/1440). */
    padding-top: clamp(2.7rem, 4vh, 3.6rem);
}

.diagnostic-question-top {
    font-family: var(--font-display);
    /* +50% (Víctor, 03/09/2026). Corregido 06/09/2026 (mismo criterio
       que el resto de la web): 1.3rem es el tamaño ya bueno en 2K, no
       se toca; en 1080p sale al 75% real (0.975rem) en vez del mismo
       tamaño que en 2K. */
    font-size: clamp(1.2188rem, 0.8125vw, 1.3rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-gold-light);
    /* Doblado otra vez el 03/09/2026 ("todavía agobiadas, dobla de
       nuevo") — esto ya es el doble de un valor que ya era el doble
       del original (0.6rem → 0.9rem → 1.8rem → 3.6rem). Mismo clamp
       por vh que .diagnostic-question (06/09/2026, ver ese comentario). */
    /* Recortado a la mitad el 11/09/2026 (Inés): con los huecos anteriores
       el bloque llegaba al límite y desbordaba en algunas pantallas. No es
       un valor inventado — 1.8rem es el escalón anterior de la propia
       serie con la que se llegó aquí (0.6 → 0.9 → 1.8 → 3.6). Se deshace
       el último doblado, no más. El encabezado en sí no se toca: mismo
       tamaño, misma letra, mismo color. */
    margin-bottom: clamp(1.35rem, 2vh, 1.8rem);
}

.diagnostic-question-text {
    font-size: clamp(0.9188rem, 0.6125vw, 0.98rem);
    line-height: 1.6;
    color: var(--text-main);
    /* Mismo doblado otra vez: 1rem → 1.6rem → 3.2rem → 6.4rem. Mismo
       clamp por vh que .diagnostic-question (06/09/2026): tope en
       6.4rem (QHD), suelo al 75% (4.8rem, 1080). Coeficiente propio
       porque el valor de partida es distinto (6.4 vs 3.6). */
    /* Mismo recorte y mismo criterio que .diagnostic-question-top: se
       deshace el último doblado de su propia serie (1 → 1.6 → 3.2 → 6.4),
       quedando en 3.2rem. Junta la pregunta con sus tres respuestas, que
       es lo que pidió Inés para que no desborde. */
    margin-bottom: clamp(2.4rem, 3.556vh, 3.2rem);
    text-align: left;
    /* Las 4 preguntas comparten el mismo marco fijo (mismo criterio que
       el resto del panel): el texto más corto (Recopilación, pregunta 4)
       dejaba las respuestas más arriba que en las otras 3 — medido con
       Playwright, hasta 37px de diferencia en 1080p (Víctor, 07/09/2026:
       "baja las 3 respuestas en bloque"). Reservando la altura de 3
       líneas (el máximo real, medido en las 4 preguntas en 1080p y QHD)
       las respuestas arrancan siempre a la misma altura, en cualquier
       resolución, sin tocar el texto más corto ni depender de un valor
       fijo en px. */
    min-height: calc(1.6em * 3);
}

/* Apiladas: la columna de preguntas ahora es fija y estrecha (marco
   compacto, Víctor 02/09/2026) — tres opciones en fila ya no caben con
   texto legible. Más aire entre opciones (Víctor, 03/09/2026: "más
   separadas entre sí, más estructuradas") sin tocar el ancho fijo. */
.diagnostic-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
}

.diagnostic-option {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-square);
    color: var(--text-main);
    /* Más alta, para acomodar la letra al mismo tamaño que la pregunta */
    padding: 1.3rem 1.3rem;
    font-family: var(--font-body);
    /* Igual que .diagnostic-question-text (Víctor, 03/09/2026) */
    font-size: clamp(0.9188rem, 0.6125vw, 0.98rem);
    line-height: 1.55;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
}

/* Pregunta 4 (Recopilación): color de fondo real por pilar, apagado en
   reposo, iluminado al pasar el ratón o pulsar — en vez del fondo
   transparente genérico de las otras 3 preguntas (Víctor, 03/09/2026:
   "del color que corresponda la respuesta, rojo, amarillo o azul"). */
.diagnostic-option[data-ganador="burgundy"] { --opcion-color: var(--tri-burgundy); }
.diagnostic-option[data-ganador="blue"] { --opcion-color: var(--tri-blue); }
.diagnostic-option[data-ganador="gold"] { --opcion-color: var(--tri-gold); }

.diagnostic-option[data-ganador] {
    background: color-mix(in srgb, var(--opcion-color) 20%, var(--bg-surface-hover));
    border-color: color-mix(in srgb, var(--opcion-color) 60%, var(--border-subtle));
}

.diagnostic-option[data-ganador]:hover,
.diagnostic-option[data-ganador]:focus-visible,
.diagnostic-option[data-ganador].diagnostic-option-pulsada {
    background: color-mix(in srgb, var(--opcion-color) 55%, var(--bg-surface-hover));
    border-color: var(--opcion-color);
}

.diagnostic-option b {
    color: var(--brand-gold-light);
    margin-right: 0.3em;
}

.diagnostic-option:hover,
.diagnostic-option:focus-visible {
    border-color: var(--border-gold);
    background: var(--bg-surface);
}

/* Reflejo al pulsar (Víctor, 02/09/2026) — mismo brillo de tres capas
   que PHAEDRUS en Pleiades, escalado a un botón de lista en vez de un
   titular. En la pregunta 4 (data-ganador), con el color del pilar
   elegido en vez de blanco. */
.diagnostic-option-pulsada {
    animation: diagnosticOpcionReflejo 0.7s ease-out;
}

@keyframes diagnosticOpcionReflejo {
    0% { box-shadow: 0 0 8px #fff, 0 0 16px rgba(255, 255, 255, 0.8), 0 0 32px rgba(255, 255, 255, 0.4); }
    100% { box-shadow: none; }
}

.diagnostic-option[data-ganador="gold"].diagnostic-option-pulsada {
    animation-name: diagnosticOpcionReflejoGold;
}
.diagnostic-option[data-ganador="blue"].diagnostic-option-pulsada {
    animation-name: diagnosticOpcionReflejoBlue;
}
.diagnostic-option[data-ganador="burgundy"].diagnostic-option-pulsada {
    animation-name: diagnosticOpcionReflejoBurgundy;
}

@keyframes diagnosticOpcionReflejoGold {
    0% { box-shadow: 0 0 8px var(--tri-gold), 0 0 16px var(--tri-gold-glow), 0 0 32px var(--tri-gold-glow); }
    100% { box-shadow: none; }
}
@keyframes diagnosticOpcionReflejoBlue {
    0% { box-shadow: 0 0 8px var(--tri-blue), 0 0 16px var(--tri-blue-glow), 0 0 32px var(--tri-blue-glow); }
    100% { box-shadow: none; }
}
@keyframes diagnosticOpcionReflejoBurgundy {
    0% { box-shadow: 0 0 8px var(--tri-burgundy), 0 0 16px var(--tri-burgundy-glow), 0 0 32px var(--tri-burgundy-glow); }
    100% { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .diagnostic-option-pulsada,
    .diagnostic-option[data-ganador].diagnostic-option-pulsada { animation: none; }
}

.diagnostic-result {
    position: relative;
    text-align: left;
    border-top: 3px solid var(--border-gold);
}

/* Reflejo dorado (Víctor, 02/09/2026): mismo mecanismo que
   .constellation-moonlight en /metodo, retinto en dorado — no un efecto
   nuevo, la misma técnica ya aprobada. Entra despacio con el resultado. */
.diagnostic-result::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(200, 169, 104, 0.25) 0%, rgba(150, 126, 78, 0.1) 45%, transparent 75%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.diagnostic-result:not([hidden])::before {
    opacity: 1;
}

.diagnostic-result[data-color="blue"] { border-top-color: var(--tri-blue); }
.diagnostic-result[data-color="gold"] { border-top-color: var(--tri-gold); }
.diagnostic-result[data-color="burgundy"] { border-top-color: var(--tri-burgundy); }

/* El CTA sigue en verde WhatsApp (identidad reconocible) pero con un
   halo del color ganador — "esto es tuyo", sin perder la marca. */
.diagnostic-result[data-color="blue"] .diagnostic-result-cta { box-shadow: 0 0 28px var(--tri-blue-glow); }
.diagnostic-result[data-color="gold"] .diagnostic-result-cta { box-shadow: 0 0 28px var(--tri-gold-glow); }
.diagnostic-result[data-color="burgundy"] .diagnostic-result-cta { box-shadow: 0 0 28px var(--tri-burgundy-glow); }

.diagnostic-result-text {
    color: var(--text-main);
    line-height: 1.4;
    margin-bottom: 0.8rem;
}

/* Aire recortado (Víctor, 07/09/2026: "no quiero barra de scroll a la
   derecha, tiene que caber entero") — con las tres situaciones
   completas más el padding-top nuevo (ver .diagnostic-result arriba),
   el texto llegaba justo al límite y en su navegador real (con las
   fuentes de verdad, Fraunces/Barlow — este entorno no las carga) se
   pasaba y salía scroll. Menos margen entre párrafos, no menos texto. */
.diagnostic-result-text p {
    font-size: clamp(0.8625rem, 0.575vw, 0.92rem);
    margin-bottom: 0.6rem;
}

.diagnostic-result-pilar {
    font-family: var(--font-display);
    font-size: clamp(0.7313rem, 0.4875vw, 0.78rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-gold-light);
    margin-bottom: 0.2rem !important;
}

/* Apilados a todo el ancho de la columna, no en fila (Víctor,
   02/09/2026: "mejor colocados") — con la columna ya más estrecha
   (tres iguales) en fila quedaban apretados. */
/* En fila y a la mitad de alto (Inés, 11/09/2026). Antes iban apilados
   a todo el ancho (Víctor, 02/09/2026) — se cambia a petición de ella
   para que el bloque suba y quepa sin desbordar. El peso visual de los
   dos sigue siendo el mismo entre sí: verde de WhatsApp y navy con
   borde dorado, como estaban. */
.diagnostic-result-buttons {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

/* Tamaño y centrado de los DOS botones en una sola regla. Va aquí, sobre
   el selector de hijo directo, a propósito: así gana por prioridad a
   .diagnostic-result-cta y a .diagnostic-result-secondary, que están más
   abajo en el archivo y con la misma especificidad me estaban pisando el
   padding. Idénticos de ancho (flex 1 1 0), idénticos de alto
   (align-items:stretch del padre más el min-height de aquí) y el texto
   centrado en vertical en los dos, parta en una línea o en dos. */
.diagnostic-result .diagnostic-result-buttons > * {
    flex: 1 1 0;
    min-width: 0;
    min-height: 3.4rem;
    /* El margen de 2rem viene de `.diagnostic-teaser .btn` (línea ~1191),
       que son DOS clases. Con una sola aquí perdía, y el botón verde
       bajaba 32px dejando al otro 32px más alto — medido, no supuesto.
       Por eso este selector lleva `.diagnostic-result` delante: para
       empatar en especificidad y ganar por orden. */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.8rem;
}

/* El texto del resultado deja de estirarse para llenar el panel: así
   los botones suben y se pegan a lo que acaba de leerse, en vez de
   quedarse clavados abajo (Inés, 11/09/2026). Si el texto no cabe,
   sigue teniendo su propio desplazamiento. */
.diagnostic-result-text {
    flex: 0 1 auto;
}

/* Antes solo tenía el borde fino de cualquier .btn de la web y cobraba
   vida solo al pasar el ratón — en el momento culminante del test se
   veía tan genérico como cualquier otro botón (Víctor, 02/09/2026:
   "tan mierdosos"). Ahora lleva el verde de WhatsApp como fondo
   sólido siempre encendido, no solo al hover. */
.diagnostic-result-cta {
    display: block;
    width: 100%;
    text-align: center;
    background: linear-gradient(180deg, #1e7d4a 0%, #0d3d24 100%);
    border-color: #25d366;
    /* Mitad de alto (Inés, 11/09/2026), igual que el secundario. */
    padding: 0.5rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El .btn:hover genérico recorta el fondo al texto para el brillo
   dorado normal (background-clip:text + fill-color transparent) — sin
   anularlo aquí, el texto se volvía invisible al posar el ratón
   (Víctor, 02/09/2026). Este botón no usa ese efecto, es fondo sólido. */
.diagnostic-result-cta:hover,
.diagnostic-result-cta:focus-visible {
    background: linear-gradient(180deg, #25d366 0%, #1e7d4a 100%);
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: var(--text-main);
    animation: none;
}

/* Mismo peso que el de WhatsApp, no un botón menor (Víctor,
   02/09/2026: "salen dos botones amplios... o los dos con color").
   Navy sólido con borde dorado — el mismo lenguaje que ya usa
   .diagnostic-gender-buttons .btn para el mismo panel. */
.diagnostic-result-secondary {
    /* Flex y no block, igual que el de WhatsApp: así los dos centran su
       texto en vertical y quedan a la misma altura aunque uno parta en
       dos líneas y el otro no (Inés, 11/09/2026). */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    /* Mitad de alto, era 1rem 1.5rem. */
    padding: 0.5rem 0.8rem;
    background: var(--brand-navy);
    border: 1px solid var(--brand-gold);
    border-radius: var(--radius-square);
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: clamp(0.7969rem, 0.53125vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.diagnostic-result-secondary:hover,
.diagnostic-result-secondary:focus-visible {
    border-color: var(--brand-gold-light);
    box-shadow: 0 0 24px var(--tri-gold-glow);
}

/* Los dos enlaces menores, aparte de los botones grandes de arriba
   (Víctor, 02/09/2026: enseñar Élite además de repetir la prueba). */
.diagnostic-result-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.diagnostic-restart,
.diagnostic-result-elite {
    /* Más grandes (Víctor, 03/09/2026: "se lee muy pequeñito todo") */
    background: none;
    border: none;
    color: var(--text-muted);
    text-decoration: underline;
    font-family: var(--font-display);
    font-size: clamp(1.0313rem, 0.6875vw, 1.1rem);
    padding: 0.4rem 0;
    cursor: pointer;
}

.diagnostic-restart:hover,
.diagnostic-restart:focus-visible,
.diagnostic-result-elite:hover,
.diagnostic-result-elite:focus-visible {
    color: var(--brand-gold-light);
}

/* Flecha de "sigue bajando" (Víctor, 06/09/2026): antes esto pasaba
   solo con mover el ratón, cortaba a quien seguía leyendo la respuesta.
   Ahora es un clic, y esta flecha es lo que le dice al que lo ve que al
   pulsar va a otra parte — sin cartel de texto encima, solo la señal. */
.diagnostic-result-elite {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* Mismo aviso naranja parpadeante que "El Método" en el footer tras
       Élite (.metodo-aviso) — misma técnica, no una nueva (Víctor,
       07/09/2026: "para que sepa cómo seguir el que sea"). Reutiliza el
       mismo keyframe (metodoParpadeo), no se duplica. */
    border: 1px solid var(--accent-orange);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.2rem;
    animation: metodoParpadeo 1.6s ease-in-out infinite;
}

.diagnostic-result-elite-flecha {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    animation: diagnosticEliteFlechaRebote 1.6s ease-in-out infinite;
}

@keyframes diagnosticEliteFlechaRebote {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    50% { transform: rotate(45deg) translate(0.15em, 0.15em); }
}

@media (prefers-reduced-motion: reduce) {
    .diagnostic-result-elite-flecha { animation: none; }
}

/* ---------- Método: cuatro bolas en las esquinas + panel central ----------
   Sin vídeo, sin imágenes, sin desenfoque de fondo (Víctor, 01/09/2026,
   tras descartar dos versiones anteriores). Las cuatro bolas están
   siempre nítidas y visibles, nunca desaparecen. El contenido vive en
   un panel fijo y delimitado en el centro. Reflejo lunar a máxima
   intensidad mientras una sección está activa (no solo al pasar el
   ratón). Cabe entero en la altura efectiva real de un portátil
   (~650-700px), no en los 1080px completos del monitor. */

.constellation {
    position: relative;
    z-index: 0;
    width: 98%;
    /* Alto EXACTO del hueco real disponible, verificado con medidas
       reales (no a ojo): 100vh − cabecera (92px) − pie (88px) − el
       padding vertical de .scene que lo envuelve (2rem arriba + 2rem
       abajo = 4rem). Antes tenía un techo fijo de 820px "seguro" que
       sobraba mucho hueco en QHD (1196px reales disponibles ahí) y
       apenas dejaba margen en 1080 (836px reales) — ahí es donde
       además el ancho se estrecha y el texto de los pilares pide más
       alto, así que hacía falta el hueco real, no un tope arbitrario. */
    height: calc(100dvh - var(--header-h) - var(--footer-h) - 4rem);
    height: calc(100vh - var(--header-h) - var(--footer-h) - 4rem);
    max-width: 1800px;
    margin: 0 auto;
}

/* Fixed a toda la pantalla, no absolute dentro de `.constellation`
   (Víctor, 03/09/2026: "solo está en el centro, lo quiero de
   izquierda a derecha") — `.constellation` es más estrecha que la
   pantalla real. */
.constellation-plancton-ambiente {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Tres capas de figura (Víctor, 03/09/2026) — misma imagen completa en
   las tres, fixed/cover/center idéntico, pero cada una recortada a su
   tercio con mask-image (con un fundido suave en el borde, no un corte
   duro). Así, aunque las tres compartan opacidad, el resultado es
   visualmente idéntico a una sola imagen — pero cada tercio puede subir
   o bajar de nivel por separado.

   Dentro de cada tercio, dos imágenes de fondo (textura-2 de Método y
   textura-1, la misma que usa Deportistas) se funden entre sí cada 10s,
   con 3s de fundido (ajustado 03/09/2026, antes 1s) — puro CSS, sin JS
   (Víctor, 03/09/2026: "sin partículas, cambia la imagen con un
   fundido"). El nivel (0/1/2) sigue mandando sobre opacidad/color del
   conjunto, igual que antes. Ciclo de 20s: 7s visible + 3s de fundido,
   dos veces (7+3+7+3=20). */
/* Sin iluminación por nodo (Víctor, 03/09/2026: "retira todas las
   iluminaciones, trabajamos solo con el dibujo de origen azul, el que
   está antes de dar a ninguno de los botones") — antes esto cambiaba
   con JS según el nodo activo (nivel 0/1/2); ahora es fijo, siempre el
   mismo aspecto apagado/azul de origen. */
.constellation-figura {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    opacity: 0.18;
    filter: grayscale(0.8) brightness(0.8);
}

.constellation-figura-capa {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: constellationCrossfade 20s ease-in-out infinite;
}

.constellation-figura-capa.img-metodo {
    background-image: url('../images/texturas/textura-2.webp');
}

.constellation-figura-capa.img-deportistas {
    background-image: url('../images/texturas/textura-1.webp');
    animation-name: constellationCrossfadeInversa;
}

@keyframes constellationCrossfade {
    0%, 35% { opacity: 1; }
    50%, 85% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes constellationCrossfadeInversa {
    0%, 35% { opacity: 0; }
    50%, 85% { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .constellation-figura-capa { animation: none; }
    .constellation-figura-capa.img-metodo { opacity: 1; }
    .constellation-figura-capa.img-deportistas { opacity: 0; }
}

.constellation-figura-izq {
    -webkit-mask-image: linear-gradient(to right, black 0%, black 30%, transparent 40%);
    mask-image: linear-gradient(to right, black 0%, black 30%, transparent 40%);
}

.constellation-figura-centro {
    -webkit-mask-image: linear-gradient(to right, transparent 26%, black 36%, black 64%, transparent 74%);
    mask-image: linear-gradient(to right, transparent 26%, black 36%, black 64%, transparent 74%);
}

.constellation-figura-der {
    -webkit-mask-image: linear-gradient(to right, transparent 60%, black 70%, black 100%);
    mask-image: linear-gradient(to right, transparent 60%, black 70%, black 100%);
}

/* Corregido 06/09/2026: era `position:absolute` con `left/right: -45%`
   — un porcentaje del ANCHO DEL PANEL (`.constellation`, tope de
   1800px), no de la pantalla real. En QHD el margen a los lados del
   panel es grande y el círculo cabía; en 1080 ese margen es mucho más
   pequeño y el mismo -45% lo empujaba fuera de la pantalla real (Víctor,
   06/09/2026: "se sale por todas partes"). Mismo arreglo que ya se hizo
   una vez en este archivo para `.constellation-plancton-ambiente`, con
   el mismo motivo escrito ahí: fixed a la pantalla real, no absolute
   dentro de un panel más estrecho que ella. */
.constellation-node {
    position: fixed;
    z-index: 20;
}

/* Acercados al centro un tercio del diámetro del círculo (Víctor,
   07/09/2026): Método y Reto (izquierda) hacia la derecha, Élite y
   Pilares (derecha) hacia la izquierda. En px fijo, no vw: el propio
   diámetro del círculo ya es fijo (183px / 219px, sección de abajo), así
   que el desplazamiento tiene que serlo también para no descontrolarse
   entre 1080 y 2K — un tercio de cada diámetro: 61px / 73px. */
.constellation-node-tl { top: calc(var(--header-h) + 2vh); left: 2vw; transform: translateX(61px); }
.constellation-node-tr { top: calc(var(--header-h) + 2vh); right: 2vw; transform: translateX(-61px); }
.constellation-node-bl { bottom: calc(var(--footer-h) + 2vh); left: 2vw; transform: translateX(61px); }
.constellation-node-br { bottom: calc(var(--footer-h) + 2vh); right: 2vw; transform: translateX(-61px); }

.constellation-trigger {
    /* Un poco más grandes (Víctor, 03/09/2026: "poca visibilidad, se ven
       muy pequeños"), arriba y abajo por igual. +50% (Víctor, 04/09/2026). */
    width: 183px;
    height: 183px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.275rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-main);
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.constellation-trigger:hover,
.constellation-trigger:focus-visible {
    border-color: var(--brand-gold);
    box-shadow: 0 0 30px rgba(150, 126, 78, 0.4);
    transform: scale(1.06);
}

/* Reflejo lunar en los 4 botones, no solo en Reto (Víctor, 03/09/2026:
   "reflejo lunar a todas") — el que esté activo brilla así, gane a lo
   que gane el hover normal (va después, mismo peso que la regla de
   arriba + la clase propia). */
.constellation-trigger.is-active {
    border-color: var(--reflejo-lunar-light);
    box-shadow: 0 0 40px 10px var(--reflejo-lunar), 0 0 80px 20px var(--reflejo-lunar-dim);
    transform: scale(1.06);
}

@media (min-width: 769px) and (min-height: 601px) {
    .constellation-trigger {
        width: 219px;
        height: 219px;
        font-size: clamp(1.4766rem, 0.984375vw, 1.575rem);
    }

    .constellation-node-tl,
    .constellation-node-bl { transform: translateX(73px); }
    .constellation-node-tr,
    .constellation-node-br { transform: translateX(-73px); }
}

@media (max-width: 768px), (max-height: 600px) {
    /* Comprobado 10/09/2026: los 4 nodos, `position:fixed` en las 4
       esquinas, se solapaban entre sí en móvil ("EL MÉTODESAFÍO ÉLITE") —
       nunca tuvieron versión propia para pantalla estrecha, no hay sitio
       para 4 esquinas en 390px de ancho. Pasan a flujo normal, en fila
       arriba del panel, envolviendo en dos filas si hace falta. */
    .constellation {
        height: auto;
        min-height: calc(100dvh - var(--header-h) - var(--footer-h) - 4rem);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;
        gap: 1rem;
        padding: 1.5rem 0 2rem;
    }

    .constellation-node {
        position: static;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none !important;
    }

    .constellation-trigger {
        width: 120px;
        height: 120px;
        font-size: 0.95rem;
    }

    /* Especificidad extra (.constellation antepuesto), mismo motivo que
       el de metodo-pilares-grid más abajo: la regla de escritorio de
       .constellation-center no lleva media query y aparece después en
       el archivo — sin este extra, ganaba ella pese al media query,
       comprobado con captura (el panel se quedaba `position:absolute`
       de verdad, superpuesto a los círculos en vez de debajo). */
    .constellation .constellation-center {
        position: static;
        inset: auto;
        width: 100%;
        flex-basis: 100%;
        max-height: none;
        overflow-y: visible;
        margin-top: 0.5rem;
    }

    /* Comprobado 10/09/2026: 3 columnas fijas (decisión de escritorio,
       01/09/2026, para que nunca caigan a 2+1) no caben en una pantalla
       de móvil — se aplastaban unas contra otras y contra los círculos.
       En móvil sí puede ser 1 columna, aquí no hay riesgo del bug de
       auto-fit que motivó las 3 fijas en escritorio.
       Especificidad extra (.constellation antepuesto) a propósito: la
       regla de escritorio no lleva media query y aparece más abajo en
       el archivo — con la misma especificidad, ganaría ella por orden
       de aparición pese al media query. Comprobado con captura, no a
       ojo: sin este extra, la regla de móvil no se aplicaba. */
    .constellation .metodo-pilares-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2rem;
    }

    /* Especificidad extra necesaria: existe otra regla con este mismo
       selector exacto más abajo en el archivo (sin media query), y por
       orden de aparición ganaría ella. Aquí sí hace falta repetir el
       selector completo, no basta con anteponer una clase. */
    .constellation.constellation[data-active="pilares"] .pilar-card {
        padding: 1.5rem 0.5rem;
    }

    /* Las etiquetas fijas de 150px (pensadas para escritorio) se
       quedaban justas de sitio en una tarjeta a ancho de móvil — se
       cortaban un par de píxeles por los bordes. En móvil, que se
       repartan el ancho real de la tarjeta en vez de un ancho fijo.
       Especificidad extra, mismo motivo. */
    .constellation .pilar-tags {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Élite: la letra grande (3.2rem) + el nombre a ancho fijo (320px)
       + la descripción no caben en una fila de móvil — se salían por
       la derecha, cortados. En móvil, cada fase pasa a envolver en dos
       líneas en vez de forzar una sola fila ancha.
       Especificidad extra (.constellation antepuesto), mismo motivo que
       las de arriba: las reglas de escritorio no llevan media query y
       aparecen más abajo en el archivo. */
    .constellation .constellation-elite-grid div {
        flex-wrap: wrap;
    }

    .constellation .constellation-elite-inicial {
        width: auto;
    }

    .constellation .constellation-elite-grid div b {
        width: 2.2rem;
        font-size: 1.8rem;
    }

    /* Comprobado 10/09/2026: .constellation-content no llevaba padding
       lateral (0 en el desktop, pensado porque ahí el panel ya tiene su
       propio margen) — en móvil el texto centrado llegaba justo al
       borde de la pantalla y se cortaba un poco por los dos lados, en
       cualquier nodo (Los Pilares, Élite, Método, Reto). */
    .constellation .constellation-content {
        padding: 3rem 1rem;
    }

    /* La causa real del corte: esta regla (más abajo en el archivo,
       misma especificidad exacta) rompe `.constellation-center` a
       100vw con margen izquierdo negativo de -50vw — un truco de
       escritorio para centrarse ignorando el contenedor. En móvil, con
       el panel ya en flujo normal (flex-wrap de arriba), ese mismo
       truco lo desplazaba medio ancho de pantalla hacia la izquierda,
       sacando el texto por el borde. Repetir `.constellation` (mismo
       selector, una clase de más) para ganar de verdad — comprobado
       que igualar el selector sin más NO bastaba, seguía ganando la
       regla de más abajo por orden de aparición. */
    .constellation.constellation[data-active="metodo"]:not([data-active=""]) .constellation-center,
    .constellation.constellation[data-active="camino"]:not([data-active=""]) .constellation-center,
    .constellation.constellation[data-active="elite"]:not([data-active=""]) .constellation-center,
    .constellation.constellation[data-active="pilares"]:not([data-active=""]) .constellation-center {
        left: auto;
        right: auto;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------- El panel central: delimitado, siempre en el mismo sitio ---------- */

.constellation-center {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 10;
    width: min(86%, 1420px);
    height: fit-content;
    max-height: 92%;
    overflow-y: auto;
    padding: 0.8rem 2rem;
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    border: 1px solid var(--border-gold);
    box-shadow: 0 0 60px rgba(150, 126, 78, 0.2);
    text-align: center;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* El "botón grande" (hub central, sin ningún nodo activo): borde blanco
   como el título, y se oscurece al pulsarlo (Víctor, 03/09/2026). No es
   un enlace hoy — no se ha confirmado que deba navegar a ningún sitio,
   así que solo se toca el color, no el comportamiento. */
.constellation:not([data-active]) .constellation-center,
.constellation[data-active=""] .constellation-center {
    /* Apenas se veía con 1px (Víctor, 03/09/2026) — tan grueso como
       para notarse igual que el texto de dentro. */
    border-width: 3px;
    border-color: var(--text-main);
}

/* "La caja detrás del texto no vale para nada" (Víctor, 03/09/2026):
   con un nodo activo, fuera fondo/borde/sombra, y el contenido usa
   todo el ancho de la constelación, no el hueco entre los 4 círculos. */
.constellation[data-active]:not([data-active=""]) .constellation-center {
    background: none;
    border: none;
    box-shadow: none;
    width: 100%;
    max-width: none;
    padding: 0;
    /* Bug real (Víctor, 03/09/2026: "sin llegar ni a la mitad del alto,
       una barra de scroll") — la regla base traía height:fit-content,
       max-height:92% y overflow-y:auto sin que yo los tocara. Con nodo
       activo no hay límite de altura ninguno: el contenido manda. */
    height: auto;
    max-height: none;
    overflow: visible;
    /* Bug real nº2, medido con getBoundingClientRect (03/09/2026,
       Víctor: "Método y Desafío Élite no están centrados en altura"):
       con `top:0;bottom:0;height:auto;margin:auto`, la especificación
       de CSS NO centra un cuadro que encoge a su contenido — como
       height es 'auto' (no un valor fijo), los márgenes automáticos se
       tratan como 0 y la caja se ESTIRA para llenar los 758px enteros
       del panel. El texto corto caía desde arriba de esa caja vacía,
       no en su centro. Con flex + justify-content:center sí se centra
       de verdad el contenido dentro de esa caja, sea cual sea su alto. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.constellation:not([data-active]) .constellation-center:active,
.constellation[data-active=""] .constellation-center:active {
    background-color: #000;
    background-image: url('../images/texturas/elite.webp');
    background-size: cover;
    background-position: center 20%;
}

.constellation-center-default {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 0;
}

.constellation[data-active]:not([data-active=""]) .constellation-center-default {
    display: none;
}

.constellation-hub-mark {
    width: 64px;
    height: auto;
}

.constellation-hub-label {
    font-family: var(--font-display);
    font-size: clamp(0.8438rem, 0.5625vw, 0.9rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.3;
}

.constellation-content {
    display: none;
    /* Tope de 900px de respaldo — en la práctica los cuatro nodos lo
       anulan (más abajo) en cuanto están activos, que es el único
       momento en que esto se ve. Más aire arriba/abajo (Víctor,
       03/09/2026: "grande, espaciado, elegante"). */
    max-width: 900px;
    /* `.constellation-center` ahora es flex (ver arriba) — sin
       width:100% este hijo encogería a su contenido y el grid de
       3 columnas de Pilares perdería el ancho real que necesita para
       repartir las columnas iguales (bug ya resuelto antes, no
       repetirlo). */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 3rem 0;
}

/* Bug real visto en captura (Víctor, 03/09/2026): con letra más grande,
   el título de Pilares chocaba con los círculos de arriba ("El método",
   "Élite") — se solapaban de verdad. Hueco reservado arriba.
   Corregido 03/09/2026 (segunda vuelta): tenía solo `padding-top`, sin
   el mismo hueco abajo — eso descuadraba el centro real del texto
   respecto al centro de la pantalla (Víctor: "la mitad del texto tiene
   que estar en la mitad de la pantalla"). Simétrico arriba y abajo. */
.constellation[data-active]:not([data-active=""]) .constellation-content {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

/* Sombra arrojada (Víctor, 03/09/2026, anticipándose: "vas a tener que
   poner sombras casi seguro") — sin la caja de fondo, el texto va
   directo sobre una imagen que cambia de brillo, hace falta más
   contraste garantizado que el text-shadow tenue que ya tenían.
   El resto de esta lista (título, cuerpo, elite, pilar-card p) pasó a
   llevar el brillo reflejo lunar en blanco, más abajo — se quita de
   aquí para no repetir la regla dos veces. */
.constellation-content-bottom,
.constellation[data-active="pilares"] .pilar-tags li {
    /* Reforzada 03/09/2026 (Víctor: "el texto se pierde sobre el fondo
       que cambia de iluminación") — el fondo puede llegar a nivel 2
       (brillo 1.1, sin gris), la sombra tenue anterior no bastaba ahí. */
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(0, 0, 0, 0.95);
}

/* Ningún nodo se queda en la cajita de 900px (Víctor, 03/09/2026:
   "aprovechar todo el espacio disponible, quitar los topes de ancho").
   Élite mantiene su propia lectura cómoda con un max-width en su grid
   (más abajo), no aquí — es el único con líneas cortas que se verían
   raras estiradas a todo lo ancho. */
/* Centrado en los 4 (Víctor, 03/09/2026, segunda vuelta: "recuerda que
   esté centrado", "lo pasas a todos los demás") — antes era "todo el
   ancho, sin tope"; ahora es un ancho de lectura centrado, como quedó
   bien en Reto. 1000px porque Pilares necesita algo más de hueco que
   los 850px de un párrafo suelto para sus 3 columnas. */
.constellation[data-active="metodo"] [data-content="metodo"],
.constellation[data-active="elite"] [data-content="elite"],
.constellation[data-active="pilares"] [data-content="pilares"],
.constellation[data-active="camino"] [data-content="camino"] {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Élite y Pilares, x1.5 sobre los 1000px de arriba (mismo factor que
   .scene más arriba: 1800/1200) — más hueco en proporción al que se ha
   abierto moviendo los círculos. Método y Reto se quedan en 1000px,
   no se pidió tocarlos. */
.constellation[data-active="elite"] [data-content="elite"],
.constellation[data-active="pilares"] [data-content="pilares"] {
    max-width: 1500px;
}

/* Texto plano, horizontal, a todo el ancho (Víctor, 03/09/2026: "quitamos
   los efectos, todos, ponemos texto plano, en horizontal, nada en
   vertical raro") — sustituye el efecto de frases en vertical de "El
   método" y "Reto". Mismo tamaño de fuente que tenían las frases
   (1.6rem), para ver primero cómo cae el texto corrido antes de tocar
   nada más. */
/* Generalizado a Método también (Víctor, 03/09/2026, segunda vuelta:
   "lo pasas a todos los demás") — antes solo Reto quedaba centrado.
   850px: el panel real (`.constellation`) mide ~1176px en CUALQUIER
   pantalla ancha (capado por `.scene` a 1200px de fábrica, no depende
   del monitor) — un tope de 1200px casi no dejaba margen; 850px sí. */
.constellation-content-plano {
    /* Víctor, 04/09/2026: la misma letra que el cuerpo de Desafío
       Élite (Barlow Condensed, la de por defecto), no Fraunces. */
    font-family: var(--font-display);
    font-size: clamp(18.75px, 0.9766vw, 25px);
    line-height: 1.9;
    color: var(--text-main);
    text-align: center;
    max-width: 850px;
    margin: 0 auto;
}

/* Corregido 03/09/2026: romper la caja desde AQUÍ (el párrafo) no
   funcionaba — `.constellation-center` tiene `overflow-y:auto`, y por
   spec eso convierte también su `overflow-x` en `auto` aunque no se
   escriba: cualquier hijo que intente salirse (width:100vw + margen
   negativo) se recorta ahí mismo, no llega a verse centrado. La caja
   que hay que romper es esta, no la de dentro. */
/* :not([data-active=""]) repetido a propósito, no es redundancia
   decorativa — sin esto la regla de la línea ~2052
   (`.constellation[data-active]:not([data-active=""]) .constellation-center`,
   más específica) ganaba siempre y dejaba esto en `width:100%` real,
   nunca en 100vw. Bug encontrado el 03/09/2026, segunda vuelta. */
.constellation[data-active="metodo"]:not([data-active=""]) .constellation-center,
.constellation[data-active="camino"]:not([data-active=""]) .constellation-center,
.constellation[data-active="elite"]:not([data-active=""]) .constellation-center,
.constellation[data-active="pilares"]:not([data-active=""]) .constellation-center {
    left: 50%;
    right: auto;
    width: 100vw;
    margin-left: -50vw;
    margin-right: 0;
    padding-left: 6vw;
    padding-right: 6vw;
}

.constellation[data-active="metodo"] [data-content="metodo"],
.constellation[data-active="elite"] [data-content="elite"],
.constellation[data-active="pilares"] [data-content="pilares"],
.constellation[data-active="camino"] [data-content="camino"] {
    display: block;
}

.constellation-content-top {
    font-family: var(--font-display);
    /* Grande y espaciado (Víctor, 03/09/2026: "todo se ve pequeño") */
    font-size: clamp(2.25rem, 1.5vw, 2.4rem);
    letter-spacing: 0.02em;
    color: var(--text-main);
    margin-bottom: 3rem;
    text-align: center;
}

.constellation-content-body {
    color: var(--text-main);
    font-size: clamp(1.3rem, 0.8125vw, 1.3rem);
    line-height: 1.8;
    text-align: left;
}

.constellation-content-body p {
    margin-bottom: 0.8rem;
}

.constellation-content-body b {
    color: var(--text-main);
}

.constellation-content-bottom {
    font-size: clamp(1.5rem, 1.0vw, 1.6rem);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    margin-top: 3rem;
    text-align: center;
}

/* Generalizado a los 4 nodos (Víctor, 03/09/2026, segunda vuelta:
   "reflejo lunar a todas") — antes solo Reto. Mismo brillo azul-blanco
   que el botón activo, en blanco, en vez de la sombra oscura sola. */
.constellation-content-top,
.constellation-content-plano,
.constellation-content-body,
.constellation-elite-nombre,
.constellation-elite-grid div span:last-child,
.pilar-card p {
    color: #ffffff;
    text-shadow: 0 0 18px var(--reflejo-lunar-light), 0 0 36px var(--reflejo-lunar), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.constellation-content-bottom {
    font-weight: var(--font-weight-regular);
}

/* "DESAFÍO ÉLITE ES EL CAMINO" no se leía bien sobre el azul marino del
   fondo (Víctor, 07/09/2026) — el barrido de .text-shine-gold pasa por
   --brand-gold-dim, muy oscuro. Aquí ese tramo se sube un escalón: nunca
   más oscuro que --brand-gold, sin tocar el brillo compartido del resto
   del sitio (hero, Deportistas, Origen, Diagnóstico). Mismos tokens de
   tokens.css, ningún color nuevo. */
.constellation-content-bottom.text-shine-gold {
    /* `background-image`, no `background`: la forma corta resetea
       `background-clip` a su valor inicial y el texto salía como una
       caja dorada sólida en vez de un degradado recortado (encontrado
       al verificar con captura, no se veía a ojo en el código). */
    background-image: linear-gradient(90deg,
        var(--brand-gold) 0%, var(--brand-gold-light) 18%,
        var(--brand-gold-light) 42%, var(--brand-gold-light) 58%,
        var(--brand-gold-light) 82%, var(--brand-gold) 100%
    );
    background-size: 400% auto;
}

/* ÉLITE en vertical (pedido de Inés, la clienta): una fila por letra,
   la letra grande a la izquierda hace que la columna se lea É-L-I-T-E
   de arriba a abajo, y lo que significa cada una va a la derecha. */
.constellation-elite-grid {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    text-align: left;
    /* Único nodo con líneas cortas — un ancho de lectura cómodo, no
       toda la pantalla, o las frases quedarían perdidas de un lado a
       otro (Víctor, 03/09/2026: "grande, espaciado, elegante"). Sin
       caja, sin fondo: no es la "cajita pequeña" que no quiere, es
       solo el ancho del texto. */
    max-width: 1350px;
    /* Pared fija, no cálculo dinámico (Víctor, 04/09/2026: "pon a cada
       bloque una pared, así alineas a la izquierda sin peligro") —
       max-width:1350px dejaba hueco vacío a la derecha (no centrado);
       fit-content depende de cómo cada navegador mida el contenido.
       Ancho fijo: las 5 filas se estiran todas IGUAL a esa pared
       (columna É-L-I-T-E alineada) y la pared se centra sin sorpresas. */
    width: 1100px;
    max-width: 100%;
    margin: 2rem auto 0;
}

.constellation-elite-grid div {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.constellation-elite-grid div b {
    /* Ancho fijo + centrado (Víctor, 04/09/2026: "que élite esté en
       vertical perfecta") — sin esto cada letra (É/L/I/T/E) pesa
       distinto y la columna É-L-I-T-E no queda alineada de verdad. */
    flex: 0 0 auto;
    width: 3.2rem;
    text-align: center;
    color: var(--brand-gold-light);
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 1.75vw, 2.8rem);
    line-height: 1;
    text-shadow: 0 0 10px rgba(200, 169, 104, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Letra dorada + nombre pegados (Víctor, 04/09/2026: "que les falte la
   primera letra para poder acercarlas al élite dorado") — el nombre en
   el HTML ya viene sin su primera letra, la pone la "b" dorada.
   Ancho fijo (04/09/2026, mismo pedido: "V, I, M, R, X juntas" y luego
   "antes, soltar, pequeños, un, no también juntas") — los 5 nombres
   miden muy distinto (VALUACIÓN vs. MPLEMENTACIÓN), así que sin un
   ancho fijo aquí ni la segunda letra ni la descripción de después
   quedan en columna. */
.constellation-elite-inicial {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
    width: 320px;
}

.constellation-elite-nombre {
    flex: 0 0 auto;
    font-family: var(--font-display);
    /* Pedido explícito, 04/09/2026: 30px fijos (antes clamp con el
       tamaño del cuerpo de El Reto/El Método). */
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-main);
}

.constellation-elite-grid div span:last-child {
    font-size: clamp(18.75px, 0.9766vw, 25px);
    color: var(--text-muted);
}

.metodo-pilares-grid {
    text-align: center;
}

/* Siempre 3 columnas fijas, nunca "las que quepan": con auto-fit +
   minmax(220px) el hueco real en QHD (731px) quedaba a 0,6px del
   mínimo para 3 columnas — al filo, y por eso caía a 2+1 según el
   contenido exacto. Con 3 columnas fijas cada una se reparte el ancho
   que haya, envolviendo más el texto si hace falta, pero nunca cambia
   de forma entre resoluciones (Víctor, 01/09/2026 — segunda vuelta). */
.metodo-pilares-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
    /* Dos espacios extra (Víctor, 04/09/2026) entre el título y "Cuerpo
       y energía": el margen del título ya es 3rem, este tiene que
       ganarle esa colisión (gana el mayor de los dos al colapsar). */
    margin-top: 5rem;
}

/* Sin caja, todo el ancho en sus 3 tercios reales (Víctor, 03/09/2026:
   "aprovecha que está dividida en tres para poner con todo el espacio,
   sin caja, cada tabla en su tercio") — coincide con los 3 tercios de
   las figuras de fondo (izq/centro/der), mismos colores. */
.constellation[data-active="pilares"] .metodo-pilares-grid {
    gap: 0;
}

.constellation[data-active="pilares"] .pilar-card {
    background: none;
    border-top: none;
    border-radius: 0;
    padding: 2rem 3vw;
}

/* Fallo real (Víctor, 02/09/2026): pese a repeat(3, 1fr), las tres
   columnas no salían iguales — 250/270/225px medidos en QHD. Un item
   de grid tiene min-width:auto por defecto, que usa el contenido más
   ancho que no puede partirse (una etiqueta larga) como suelo mínimo,
   ganándole al reparto igual de 1fr. min-width:0 se lo quita. */
.pilar-card {
    min-width: 0;
    background: var(--bg-surface);
    border-radius: var(--radius-card);
    padding: 1.9rem 1.8rem;
    border-top: 2px solid var(--pilar-color, var(--brand-gold));
}

.pilar-card.pilar-blue { --pilar-color: var(--tri-blue); --pilar-label-color: var(--brand-blue); }
.pilar-card.pilar-gold { --pilar-color: var(--tri-gold); }
.pilar-card.pilar-burgundy { --pilar-color: var(--tri-burgundy); }

/* --tri-blue es demasiado oscuro para leerse como texto sobre el
   fondo navy (funciona bien como borde/chip, no como letra) —
   --pilar-label-color da un azul más claro solo para esta etiqueta,
   sin tocar el color de borde ni de las tags. */
.pilar-label {
    font-size: clamp(1.6rem, 1.0vw, 1.6rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    /* "Cuerpo y energía" vs "Dirección y hábitos" pueden envolver
       distinto número de líneas — altura fija para las tres iguales,
       aunque una quepa en 1 línea (Víctor, 04/09/2026). */
    min-height: calc(1.2em * 2);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--pilar-label-color, var(--pilar-color, var(--brand-gold))) 55%, black) 0%,
        var(--pilar-label-color, var(--pilar-color, var(--brand-gold))) 35%,
        color-mix(in srgb, var(--pilar-label-color, var(--pilar-color, var(--brand-gold))) 55%, white) 50%,
        var(--pilar-label-color, var(--pilar-color, var(--brand-gold))) 65%,
        color-mix(in srgb, var(--pilar-label-color, var(--pilar-color, var(--brand-gold))) 55%, black) 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shineGold 14s ease-in-out infinite;
    /* Bug real visto en captura (Víctor, 03/09/2026): en su fase oscura
       el degradado (55% negro) se hacía casi invisible sobre el fondo,
       sobre todo el burdeos. Una sombra oscura no rescata letra oscura
       sobre fondo oscuro — hace falta un halo claro además, para que
       haya contraste en cualquier fase de la animación. */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 4px rgba(0, 0, 0, 0.9);
}

.pilar-card p {
    color: var(--text-main);
    line-height: 1.7;
    font-size: clamp(1.3rem, 0.8125vw, 1.3rem);
    margin-bottom: 0.6rem;
}

.pilar-card p.pilar-invisible {
    color: var(--text-main);
    font-style: italic;
    margin-bottom: 1.6rem;
    /* Causa real de que Objetivos/Hábitos no arrancaran a la misma
       altura que Alimentación/Motivación (Víctor, 04/09/2026, tercera
       vez que lo pide): las tres descripciones pesan distinto y
       envuelven a distinto número de líneas. Altura mínima fija de 3
       líneas en las tres, aunque el texto quepa en menos. */
    min-height: calc(1.7em * 4);
}

/* Etiquetas en dos columnas, centradas cada una en su hueco — con una
   sola columna la tarjeta de 5 (Mente y emociones) se hacía demasiado
   alta y no cabía. Si el número es impar, la última ocupa las dos
   columnas centrada, no se queda sola y descolocada (Víctor,
   01/09/2026). */
/* Grupo compacto centrado (Víctor, 04/09/2026: "acerca las etiquetas,
   tómalas como un todo, que su mitad coincida con la mitad de la
   tarjeta") — antes era una rejilla de 2 columnas que las estiraba a
   todo el ancho de la tarjeta en vez de dejarlas juntas. */
/* Arrancan todas en el mismo borde izquierdo (Víctor, 04/09/2026:
   "alinea Objetivos y Hábitos con Motivación y Alimentación") — con
   justify-content:center cada grupo se centraba a su propio ancho, y
   como las 3 tarjetas miden igual, la primera etiqueta de cada una
   quedaba en una x distinta. Con flex-start empieza siempre en el
   mismo punto en las tres. */
/* Causa real del desalineado entre tarjetas: con flex + ancho
   automático, cada tarjeta centraba su grupo a SU PROPIO ancho de
   contenido — "Alimentación" pesa más que "Objetivos", así que los
   grupos no coincidían aunque las tarjetas midan igual (Víctor,
   04/09/2026). Columnas de ancho FIJO, igual en las tres tarjetas: la
   rejilla entera se centra en la tarjeta (mismo requisito de antes)
   y, al ser el mismo ancho en las tres, cada columna cae en la misma
   x — centrado y alineación por columna dejan de chocar entre sí. */
.pilar-tags {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 150px);
    justify-content: center;
    gap: 0.6rem 0.8rem;
    margin-top: 2.6rem;
    padding: 0;
}

.pilar-tags li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Las dos tarjetas de dos etiquetas (Cuerpo y energía / Dirección y
   hábitos) las ponían en la misma fila, y ahí se solapaban con la
   definición de al lado (Víctor, 11/09/2026). Van una encima de otra,
   centradas bajo su pilar. La burdeos, con cinco, se queda en dos
   columnas. `minmax` en vez de 150px fijos para que en móvil no se
   salga de la tarjeta. */
.pilar-blue .pilar-tags,
.pilar-gold .pilar-tags {
    grid-template-columns: minmax(0, 150px);
}

.pilar-tags li {
    font-size: clamp(0.95rem, 0.59375vw, 0.95rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--pilar-color, var(--brand-gold));
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.9rem;
}

.metodo-pilares-cierre {
    margin-top: 1.5rem;
    color: var(--text-muted);
}

/* ---------- Páginas legales (Aviso legal, Privacidad, Cookies) ----------
   Texto literal de Inés, extraído de la web vieja (aviso legal y
   privacidad) o pegado por Víctor (cookies) — sección 11 de
   PROYECTO.md, 10/09/2026. El HTML extraído mezcla <h2>/<h3>/<ul> reales
   con texto suelto separado por líneas en blanco (sin <p>) — en vez de
   reescribirlo para envolver cada párrafo en <p> (tocar el texto no se
   permite), `white-space: pre-line` conserva esos saltos tal cual sin
   cambiar una sola palabra. */
.legal-content {
    white-space: pre-line;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 760px;
    margin: 2.5rem auto 0;
}

.legal-content h2 {
    font-size: 1.3rem;
    color: var(--text-main);
    margin-top: 2.5rem;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-top: 1.5rem;
}

.legal-content ul {
    margin: 0.5rem 0 0.5rem 1.5rem;
}

.legal-content strong {
    color: var(--text-main);
}

.legal-content a {
    color: var(--brand-gold-light);
    text-decoration: underline;
}

/* ---------- Diagnóstico en móvil (Víctor, 10-11/09/2026, urgente) ----------
   .diagnostic-layout nunca tuvo versión de móvil: grid-template-columns:
   repeat(3, minmax(300px,1fr)) exige mínimo 900px de ancho pase lo que
   pase, así que en un teléfono el bloque se queda centrado dentro de
   .diagnostic-widget (90vw) y solo se ve la columna central (el dibujo)
   a tamaño completo, con la de preguntas/resultado cortada a un borde de
   texto a cada lado — comprobado en akena2.netlify.app, no era problema
   de Netlify ni de caché, el CSS servido era idéntico al local.

   El corte de ancho es 950 y no 768 como el resto: las tres columnas
   necesitan 900px por definición, así que por debajo de eso no caben
   nunca, tenga la pantalla el alto que tenga. Sin esto, un plegable
   abierto en vertical (884 de ancho) seguía cogiendo las tres columnas
   y el bloque se salía por el lado — comprobado. */
@media (max-width: 950px), (max-height: 600px) {
    .diagnostic-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    .diagnostic-visual {
        grid-column: 1;
        grid-row: 1;
        height: 65vh;
        max-height: 560px;
    }

    .diagnostic-intro-frase-izq,
    .diagnostic-intro-frase-der {
        grid-column: 1;
        grid-row: 1;
    }

    .diagnostic-questions,
    .diagnostic-result {
        grid-column: 1;
        grid-row: 2;
        height: auto;
    }

    .diagnostic-result {
        padding-top: 1.8rem;
    }
}

/* ---------- Cabecera en móvil horizontal (Víctor, 11/09/2026) ----------
   Va aquí, al final del último CSS que se carga, y no junto al resto del
   ajuste de horizontal en components.css: el bloque de móvil de más
   arriba en este mismo archivo (línea ~1308) ya fija el padding de
   .site-header con la misma especificidad, y por orden de archivo ganaba
   siempre. Con 0.5rem la cabecera baja de 92px a ~60px en una pantalla de
   393px de alto — el botón de menú conserva sus 44px, que es el mínimo
   para el dedo. */
@media (max-height: 600px) {
    .site-header {
        padding: 0.5rem 5%;
    }
}

/* ---------- Diagnóstico en móvil horizontal: espaciados ----------
   (Víctor, 11/09/2026.) Los huecos del panel de preguntas están
   calculados para una pantalla de 1080px de alto: padding-top de 2,7rem,
   43px bajo el encabezado y 77px entre la pregunta y las respuestas, más
   tres líneas de alto reservadas para que las 4 preguntas arranquen a la
   misma altura. En una pantalla de 407px de alto eso son más de 160px de
   vacío: se ve el enunciado y prácticamente nada más.
   Aquí se recortan a la proporción de esa pantalla. Los valores de
   escritorio no se tocan — ningún monitor baja de 500px de alto. */
@media (max-height: 600px) {
    .diagnostic-question {
        padding-top: 1rem;
    }

    .diagnostic-question-top {
        margin-bottom: 0.7rem;
    }

    .diagnostic-question-text {
        margin-bottom: 1rem;
        /* El reserve de 3 líneas sirve para que las 4 preguntas empiecen
           a la misma altura en escritorio. Aquí se desplaza en vertical
           de todas formas, así que solo roba sitio. */
        min-height: 0;
    }

    .diagnostic-options {
        gap: 0.7rem;
    }

    .diagnostic-option {
        padding: 0.8rem 1rem;
    }

    .diagnostic-questions,
    .diagnostic-result {
        padding: 1rem 1.2rem;
    }

    .diagnostic-result {
        padding-top: 1rem;
    }
}

/* ---------- Diagnóstico en móvil HORIZONTAL: dos columnas ----------
   (Víctor, 11/09/2026: "la caja de las 3 partes es increíblemente pequeña
   y ni cabe toda la persona".)

   Apilar el dibujo sobre las preguntas está bien en vertical, donde sobra
   alto. Tumbado es al revés: hay 904px de ancho y solo 407 de alto, así
   que los dos se repartían esos 407 y la figura quedaba en una franja de
   187px — cortada por arriba y por abajo. El apaño anterior era bajarle
   el alto al dibujo, que es tratar el síntoma.

   Aquí no se inventa una disposición de móvil: se recupera la de
   escritorio quitándole la tercera columna. Dibujo a la izquierda a su
   altura natural, pregunta a la derecha en el ancho que sobra.

   La caja va a 2/3 exactos, que es la proporción de las dos cosas que se
   pintan dentro: los vídeos son 800x1200 y los nueve dibujos 1000x1500
   (medido con ffprobe, no a ojo). Así no hay que recortar ni al vídeo ni
   al dibujo.

   Escritorio intacto: ningún monitor baja de 600px de alto. */
@media (max-height: 600px) and (orientation: landscape) {
    .diagnostic-layout {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .diagnostic-visual {
        grid-column: 1;
        grid-row: 1;
        /* El ancho lo deriva la proporción, no un número a mano. */
        height: 88vh;
        max-height: none;
        width: auto;
        aspect-ratio: 2 / 3;
        align-self: start;
    }

    .diagnostic-questions,
    .diagnostic-result {
        grid-column: 2;
        grid-row: 1;
        height: auto;
        max-height: 88vh;
        overflow-y: auto;
    }

    .diagnostic-intro-frase-izq,
    .diagnostic-intro-frase-der {
        grid-column: 2;
        grid-row: 1;
    }
}

/* ---------- Podcast: lista de episodios y reproductor propio ----------
   Audio propio alojado en la web, sin plataformas externas ni librerías
   (Víctor, 11/09/2026): los episodios los genera él y se suben a
   assets/audio/podcast/. Cada ficha es una tarjeta con el lenguaje del
   sitio (superficie azul de marca, borde dorado al estar sonando). */

.podcast-lista {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* El marco va pegado al borde de la tarjeta y de arriba abajo, para
   dejarle todo el sitio posible al dibujo de dentro (Víctor, 11/09/2026).
   Por eso el relleno de la tarjeta no lleva lado izquierdo. */
.podcast-episodio {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: 0 2rem 0 0;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: stretch;
    gap: 1.8rem;
}

.podcast-ficha-texto {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.8rem 0;
}

/* Marco de la foto del episodio. Cuadrado, con el borde dorado tenue del
   resto de la web. Sin foto, enseña el símbolo de AKENA centrado y
   apagado, para que la fila no cambie de forma (Víctor, 11/09/2026). */
.podcast-marco {
    flex: 0 0 auto;
    width: clamp(130px, 11vw, 200px);
    align-self: stretch;
    border-right: 1px solid var(--border-gold);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
}

.podcast-marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.podcast-marco.sin-foto {
    background:
        rgba(0, 0, 0, 0.25)
        url('../images/logo-akena-simbolo.svg') center / 42% no-repeat;
    opacity: 0.55;
}

.podcast-episodio.is-sonando .podcast-marco {
    border-right-color: var(--brand-gold);
}

.podcast-episodio.is-sonando {
    border-color: var(--brand-gold);
    box-shadow: 0 0 24px var(--tri-gold-glow);
}

.podcast-episodio-fecha {
    font-size: clamp(0.7969rem, 0.53125vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--brand-gold);
}

.podcast-episodio-titulo {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 1.25vw, 2rem);
    margin-top: 0.6rem;
}

.podcast-episodio-texto {
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 0.8rem;
}

.podcast-mando {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.6rem;
}

/* Triángulo de play dibujado con bordes, sin imagen ni icono externo;
   al sonar se convierte en las dos barras de pausa. */
.podcast-play {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--brand-gold);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.podcast-play:hover,
.podcast-play:focus-visible {
    border-color: var(--brand-gold-light);
    box-shadow: 0 0 18px var(--tri-gold-glow);
}

.podcast-play-icono {
    width: 0;
    height: 0;
    margin-left: 0.25rem;
    border-left: 0.9rem solid var(--brand-gold-light);
    border-top: 0.55rem solid transparent;
    border-bottom: 0.55rem solid transparent;
}

.is-sonando .podcast-play-icono {
    width: 0.85rem;
    height: 1.1rem;
    margin-left: 0;
    border: none;
    border-left: 0.28rem solid var(--brand-gold-light);
    border-right: 0.28rem solid var(--brand-gold-light);
}

.podcast-barra {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: var(--border-subtle);
    cursor: pointer;
}

.podcast-barra-llena {
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--brand-gold);
}

.podcast-tiempo {
    flex: 0 0 auto;
    min-width: 8ch;
    text-align: right;
    font-size: clamp(0.9375rem, 0.625vw, 1rem);
    color: var(--text-muted);
}

/* Episodio cuyo MP3 todavía no existe: se ve, pero sin invitar a pulsar */
.podcast-episodio.is-pendiente .podcast-play {
    opacity: 0.35;
    pointer-events: none;
}

@media (max-width: 768px) {
    .podcast-episodio {
        padding: 0 1.2rem 0 0;
        gap: 1.1rem;
    }

    .podcast-ficha-texto {
        padding: 1.4rem 0;
    }

    .podcast-marco {
        width: 96px;
    }

    .podcast-mando {
        gap: 0.8rem;
    }
}

/* ---------- Método en pantallas bajas ----------
   Con un nodo abierto, el contenido del centro (sobre todo Los Pilares,
   que son tres columnas con sus etiquetas) usa todo el alto disponible.
   En una pantalla baja —portátil con barras, o móvil tumbado, que ahora
   ve la web como un portátil— se salía por arriba, contra el menú, y por
   abajo, contra el pie. Se encoge el conjunto en bloque en vez de ir
   tocando quince tamaños de letra uno a uno: así no se descoloca nada
   entre sí y sigue leyéndose (Víctor, 11/09/2026: "que se vea pequeño no
   importa; lo que no puede ser es que no quepa"). */
@media (max-height: 900px) {
    .constellation-content {
        transform: scale(0.82);
        transform-origin: center center;
    }
}

@media (max-height: 700px) {
    .constellation-content {
        transform: scale(0.7);
    }
}

/* ---------- Diagnóstico en pantallas bajas ----------
   La caja del diagnóstico se dimensiona por alto de pantalla, así que en
   una pantalla baja encoge, pero el texto de dentro no: las tres
   respuestas se quedaban fuera y había que buscarlas con el dedo dentro
   de la columna. Mismo remedio que en el Método: encoger el bloque
   entero, que mantiene las proporciones, en vez de quince tamaños
   sueltos (11/09/2026). */
/* Encoger la columna entera no sirve aquí, y merece quedar escrito para
   no volver a intentarlo: la columna tiene alto limitado y recorta lo que
   sobra, así que al escalarla se encogen a la vez el contenido y el
   recorte, y sigue faltando lo mismo. Lo que sí funciona es bajar el
   tamaño de letra y los huecos: el contenido ocupa menos DENTRO de la
   misma caja y las tres respuestas entran. */
@media (max-height: 900px) {
    .diagnostic-question-top {
        font-size: clamp(1rem, 1.6vh, 1.1rem);
    }

    .diagnostic-question-text {
        font-size: clamp(0.775rem, 1.25vh, 0.85rem);
        line-height: 1.45;
    }

    .diagnostic-options {
        gap: clamp(0.5rem, 1.4vh, 1.1rem);
    }

    .diagnostic-option {
        padding: clamp(0.5rem, 1.3vh, 1rem) 1rem;
        font-size: clamp(0.775rem, 1.25vh, 0.85rem);
        line-height: 1.4;
    }
}

/* ---------- Desafío Élite en pantallas bajas ----------
   Los tres triángulos son la pieza que hay que ver, y en una pantalla
   baja quedaban por debajo del borde: se veía la punta y nada más. Se
   recorta el aire del titular y de su bloque para que entren en la
   primera pantalla, sin tocar nada por encima de 900px de alto
   (11/09/2026). */
@media (max-height: 900px) {
    #desafio-elite.scene {
        padding-top: calc(var(--header-h) + 1rem);
        padding-bottom: 2rem;
    }

    #desafio-elite .heading-tight {
        font-size: clamp(1.5rem, 3.6vh, 2.2rem);
    }

    #desafio-elite .btn-whatsapp {
        margin-top: 1.2rem;
    }

    #desafio-elite .triangles {
        margin: 1.2rem 0 !important;
        gap: 1.2rem;
    }

    #desafio-elite .triangle-shape {
        width: clamp(60px, 13vh, 120px);
        height: clamp(50px, 11vh, 100px);
    }
}

/* ---------- Cierre ÉLITE de la Home en pantallas bajas ----------
   Es el remate de la experiencia y medía 860px de alto: en una pantalla
   de 631 había que ir buscándolo a trozos. Se recorta el aire y la letra
   para que entre de una vez (11/09/2026). Nada de esto se aplica por
   encima de 900px de alto. */
@media (max-height: 900px) {
    .home-finale.section {
        padding-top: 3vh;
        padding-bottom: 3vh;
    }

    .home-finale-text {
        font-size: clamp(1.1875rem, 2.6vh, 1.6rem);
    }

    .elite-lines {
        margin-top: clamp(0.8rem, 2.4vh, 2rem);
    }

    .elite-lines li {
        /* Mismo techo que arriba: es esta regla la que manda en un 13",
           porque su ventana baja de 900px de alto. */
        font-size: min(clamp(0.9375rem, 2vh, 1.2rem), 22px, 1.5vw);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL DE PIE — que la página no se quede en texto sobre azul
   ══════════════════════════════════════════════════════════════════════
   Las ilustraciones de los márgenes se ocultan por debajo de 1400px de
   ancho, y con razón: ahí no hay tira lateral donde ponerlas. Pero el
   resultado en vertical era una web de texto sobre fondo liso, sin una
   sola imagen (comprobado el 12/09/2026 en las nueve páginas).

   No se inventa nada para resolverlo: se usa el mismo tratamiento que
   `--page-texture` ya aplica en Desafío Élite —foto fija al fondo, muy
   tenue, desaturada y fundida contra el navy— pero conservando el lado
   de cada figura, que es lo que hace la composición: el chico a un lado,
   la chica al otro y el texto por el medio.

   El fundido va con degradados de color encima de la foto, no con
   `mask-image`: es el mismo recurso que ya usan estas clases en
   escritorio, y en este proyecto el enmascarado se descartó por soporte
   desigual entre navegadores. */
@media (max-width: 768px) {
    .deportistas-margen,
    .familias-margen {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        width: 58%;
        aspect-ratio: auto;
        opacity: 0.3;
        filter: grayscale(0.7) brightness(0.85);
    }

    /* Cada una pegada a su lado, y el degradado va del borde que da al
       centro hacia fuera, para que el texto caiga siempre sobre navy. */
    .deportistas-boxeadora,
    .familias-familia {
        left: auto;
        right: 0;
        background-image:
            linear-gradient(to right, var(--bg-dark) 0px, transparent 150px),
            url('../images/boxeadora.jpg');
        background-position: left top, center;
        background-size: 100% 100%, cover;
    }

    .familias-familia {
        background-image:
            linear-gradient(to right, var(--bg-dark) 0px, transparent 150px),
            url('../images/familia.jpg');
    }

    .deportistas-canelo {
        left: 0;
        right: auto;
        background-image:
            linear-gradient(to left, var(--bg-dark) 0px, transparent 150px),
            url('../images/canelo.jpg');
        background-position: right top, center;
        background-size: 100% 100%, cover;
    }

    /* El justificado a los dos lados es de Víctor (04/09/2026) y en una
       columna de escritorio queda impecable. En 390px de ancho, con
       palabras largas, abre ríos blancos entre palabras. Solo en móvil de
       pie se alinea a la izquierda; el apaisado recibe el diseño de
       escritorio y ahí no entra esta regla. */
    #deportistas-intro p,
    #desafio-elite-promo p,
    #cursos p,
    #clubs.scene .origin-reveal-text {
        text-align: left;
    }

    /* Los suelos de tamaño de letra de components.css no llegaban aquí:
       este archivo se carga después y sus reglas del formulario ganan por
       orden. Mismo criterio que allí — en la mano, 9,6px no se lee. */
    .contact-form label,
    .contact-form .field-consent,
    .contact-form .field-consent span,
    .contact-form .field-consent a {
        font-size: 0.75rem;
    }

    .diagnostic-gender-prompt {
        font-size: 0.75rem;
    }
}

/* ── Los titulares dorados sobre la ilustración ────────────────────────
   Víctor, 12/09/2026: según la resolución, los títulos caen encima del
   dibujo lateral. Los blancos se leen bien; los dorados pierden
   definición. Descarta subir el tamaño (es el mismo en toda la web) y
   cambiar el color (es la marca), así que lo que queda es darles
   contraste propio.

   No vale un `text-shadow`: estos titulares son un degradado recortado
   contra el texto (`background-clip: text` con el relleno transparente),
   y una sombra normal se vería POR DENTRO de las letras. `drop-shadow`
   actúa sobre la forma ya pintada, que es lo que hace falta — y es el
   mismo recurso que ya usa el logo de la cabecera.

   PROBADO Y DESCARTADO: `filter: drop-shadow`. Sobre un texto con el
   fondo recortado, el filtro toma la caja del fondo y no la forma de las
   letras: sale un rectángulo oscuro detrás del titular. Víctor lo vio en
   cuanto se subió ("una especie de caja que no queda nada bien").

   Lo que sí funciona es lo que ya se hizo el 07/09/2026 con "DESAFÍO
   ÉLITE ES EL CAMINO", que tenía exactamente este problema: el barrido de
   .text-shine-gold pasa por --brand-gold-dim, que es muy oscuro, y en ese
   tramo la letra se apaga contra el dibujo. Aquí ese tramo se sube un
   escalón —nunca más oscuro que --brand-gold— sin tocar el brillo
   compartido del resto del sitio. Mismos tokens, ningún color nuevo,
   mismo tamaño.

   `background-image` y no `background`: la forma corta resetea
   `background-clip` y el titular saldría como una caja dorada sólida.

   En Familias se probó primero y Víctor lo paró ("es exagerado, queda
   demasiado separado"), pero entonces la página llevaba encima la sombra
   desplazada del 11/09. Retirada esa sombra y con las dos páginas ya
   iguales, entra en las dos, que es como él lo pidió después: "varía en
   ambas lo que sea que pueda definir mejor el dorado de las letras
   grandes".

   Dos cosas a la vez, y ninguna cambia el color ni el tamaño:
   el barrido no baja al tono apagado, y detrás de la letra hay un halo
   oscuro más ceñido que el `0 2px 6px` de antes — cerrado a propósito,
   para que separe sin que se vea la sombra. */
main:has(.deportistas-margen) .section-heading.text-shine-gold,
main:has(.familias-margen) .section-heading.text-shine-gold,
#familias-intro h1.text-shine-gold,
#familias-intro h2.text-shine-gold,
#familias-conceptos h2.text-shine-gold,
#familias-testimonio h2.text-shine-gold,
#familias-cierre-parcial h2.text-shine-gold,
#familias-cta h2.text-shine-gold {
    /* Aquí se abandona el degradado recortado y se pinta la letra con
       color sólido. Por qué, después de probar tres cosas que no bastaron
       (12/09/2026):

       El truco de `.text-shine-gold` es un degradado recortado contra el
       texto con el relleno TRANSPARENTE. Eso trae dos problemas juntos en
       una página con dibujo detrás: la letra oscila entre el dorado claro
       y el apagado —y en el tramo apagado es cuando no se lee—, y si por
       lo que sea el degradado no llega a pintarse, el texto se queda
       transparente y se ve el fondo. Pasó al probar un degradado de un
       solo color: Víctor lo vio negro en su pantalla.

       Con color sólido no hay oscilación ni relleno transparente posible.
       Se pierde el barrido en estos dos titulares, y es a propósito: aquí
       manda que se lean sobre la ilustración. El resto del sitio conserva
       su brillo intacto. Token de siempre, ningún color nuevo. */
    background-image: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    color: var(--brand-gold-light);
    -webkit-text-fill-color: var(--brand-gold-light);
    animation: none;
    /* Y el remedio que ya lleva .btn-hero-inicio: si el sistema fuerza
       colores —el contraste alto de Windows, que suele ir con el aspecto
       nocturno—, el navegador ignora el relleno de la letra y la pinta con
       su propia paleta. Víctor lo vio así: "fijas, oscuras, con reborde
       dorado", mientras en las capturas salía dorada. */
    forced-color-adjust: none;
    text-shadow:
        0 0 3px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.85);
    /* La tercera palanca, y la que más define: más cuerpo de letra. El
       dorado claro de marca ya está al máximo —no hay un tono más claro
       en tokens.css sin inventar color— y el tamaño no se toca, así que
       lo que queda es el grosor. Token de siempre, el mismo semibold que
       usan h1-h4 en global.css. */
    font-weight: var(--font-weight-semibold);
}

/* Clubs: el párrafo de arriba, al mismo cuerpo que el de abajo (Víctor,
   12/09/2026). Iban a 23,4 y a 19,2 píxeles, y al estar los dos en la
   misma columna, con la fila de temas entre medias, la diferencia se leía
   como un descuido. Los valores son los del párrafo de abajo, que es el
   del resto del sitio. Fuera de cualquier media query: vale en todas las
   pantallas, no solo donde la página va justa de alto. */
/* Clubs va con su propia letra de texto, más pequeña que la del resto
   (Víctor, 12/09/2026: "esta página no se parece a ninguna de las
   anteriores, puede tener sus propias reglas; esa letra se lee incluso
   demasiado, queda mal de tan grande"). Los dos párrafos blancos igualados
   aquí abajo, no arriba: se bajan los dos, no se sube el pequeño.
   Y justificados a los dos lados, que con las cajas de los temas al mismo
   ancho deja el bloque entero cuadrado. */
/* Ojo al selector: SOLO los dos párrafos de texto corrido. La línea dorada
   y el párrafo que lleva el botón son de una sola línea, así que para
   ellos "la última línea" es la única y se iban también a la izquierda
   (pasó al primer intento). Esos dos siguen centrados. */
#clubs .origin-content > p,
#clubs .origin-cta > p:not(.text-shine-gold):not(:last-child) {
    /* Ojo: esto NO puede ser un tamaño fijo. Se bajó pensando en el
       monitor de 1600, donde la letra quedaba enorme, y en el QHD de
       Víctor se quedó igual de pequeña — "ha empequeñecido mucho en el
       monitor grande" (12/09/2026). Con el tramo en vw, el mínimo manda en
       las pantallas normales y crece donde hay sitio: 16,8px en 1600 y
       unos 21,8 en 2560. */
    font-size: clamp(1.05rem, 0.85vw, 1.45rem);
    line-height: 1.65;
    text-align: justify;
    /* La última línea de cada párrafo, a la izquierda y no centrada
       (Víctor, 12/09/2026): son "formación para deportistas…" y "potenciar
       su talento". Centradas rompían la columna justo al final. */
    text-align-last: left;
}

/* El bloque de cierre traía un margen propio de 48px que se sumaba al
   hueco de la fila de temas: quedaban 21 píxeles por arriba y 69 por
   abajo (Víctor lo vio a ojo antes de que yo lo midiera). Se anula y la
   separación la dan los márgenes de la fila, iguales por los dos lados. */
#clubs .origin-cta {
    margin-top: 0;
}

/* ── UNA SOLA CAJA MANDA EN CLUBS ──────────────────────────────────────
   Víctor, 12/09/2026: "si tienes que poner un límite a todas las cajas y a
   todos los textos, una nueva caja que englobe a todos para que no se
   descuadre, hazlo".

   Esto es lo que faltaba. Cada pieza traía su propio ancho heredado de
   Origen —la columna 830, la fila de temas 74vw, y encima una media query
   con 62vw— y en cada monitor daban resultados distintos: por eso las
   cajas cuadraban en una pantalla y se salían en otra. Ahora el ancho se
   decide UNA vez, aquí, y lo respetan los tres bloques. La fila de temas
   ya no necesita regla propia: vive dentro del bloque de contenido.

   640px con esta letra deja unos 75 caracteres por línea, que es la
   medida cómoda de lectura; en pantallas estrechas cede al 100%. */
#clubs.scene .origin-content,
#clubs.scene .origin-cta {
    width: 100%;
    max-width: min(640px, 100%);
    margin-left: auto;
    margin-right: auto;
}

/* OJO: esto NO puede estar fuera del tramo de pantallas justas. Al
   ponerlo suelto, en QHD la fila —que allí vuelve a ir anclada a la
   ventana— pasaba a repartirse de borde a borde y los temas se salían por
   los lados (Víctor, 12/09/2026). Donde manda el diseño original, la fila
   conserva su 74vw con tope de 1300px. */
@media (min-height: 901px) and (max-height: 1200px) {
    #clubs .origin-topics-wrap,
    #clubs .origin-topics {
        width: 100%;
        max-width: none;
    }
}

/* Los textos que se abren al pulsar un tema, al mismo cuerpo que el resto
   de Clubs (Víctor, 12/09/2026). Iban a 23-25,5px y sacaban barra de
   scroll: medido a 1600x950, a "El talento" le sobraban 338px y a "Un paso
   más allá" 64. Y esa barra, además, es inalcanzable — al mover el ratón
   hacia ella el panel se apaga. */
#clubs.scene .origin-reveal-text,
#clubs.scene .origin-reveal-text[data-topic-content] {
    /* Mismo criterio que los párrafos: crece con la pantalla en vez de
       quedarse clavado en el tamaño que hacía falta para el monitor
       pequeño. */
    font-size: clamp(1.05rem, 0.85vw, 1.45rem);
    line-height: 1.65;
}

/* Los tres temas cortos —los que van por colores— centrados y sin
   justificar (Víctor, 12/09/2026). Justificar tres líneas sueltas reparte
   las palabras a los extremos y deja huecos enormes; centradas se leen
   como lo que son, una enumeración. Los dos largos siguen justificados. */
#clubs.scene .origin-reveal-text[data-topic-content="mente"],
#clubs.scene .origin-reveal-text[data-topic-content="cuerpo"],
#clubs.scene .origin-reveal-text[data-topic-content="objetivos"] {
    text-align: center;
    /* Estos tres tenían un ancho máximo de NUEVE CARACTERES (`9ch`), que
       es lo que partía el texto en una palabra por línea y lo estiraba
       hasta sacar barra de scroll. Víctor lo describió exactamente:
       "patatín, patatán, en vez de una palabra por línea". Ahora ocupan el
       panel y las líneas las marcan los saltos del HTML, una idea cada
       una. */
    max-width: none;
}

/* ── Diagnóstico en móvil DE PIE: las frases y el "¿Chico o chica?" ────
   Dos fallos que vio Víctor el 13/09/2026, y son distintos:

   1. Las dos frases de introducción —la de la izquierda y la de la
      derecha— se colocaban en la MISMA celda de la rejilla, y encima en
      la del dibujo. En escritorio van una a cada lado del visual; al
      apilar en vertical acababan las dos en el mismo sitio, una encima de
      otra y sobre la ilustración ("el segundo mensaje se empotra
      encima"). Aquí cada una recibe su propia fila: primera frase, dibujo,
      segunda frase. Se leen en el orden en que están escritas.

   2. "¿Chico o chica?" va dentro del visual, sobre el dibujo, y el dibujo
      ahí es casi blanco: el texto desaparecía. Se le pone el mismo halo
      oscuro que usa el resto de la web para leer sobre ilustración — no
      un color nuevo ni una caja. */
@media (max-width: 768px) {
    .diagnostic-intro-frase-izq {
        grid-column: 1;
        grid-row: 1;
    }

    .diagnostic-visual {
        grid-column: 1;
        grid-row: 2;
    }

    .diagnostic-intro-frase-der {
        grid-column: 1;
        grid-row: 3;
    }

    /* 3. Y lo que faltaba, que es lo grave (Víctor, 13/09/2026): al mover
       el dibujo a la fila 2 no se movieron las preguntas, que seguían en
       la fila 2 desde la regla de 950px. Las dos piezas compartían celda,
       así que las respuestas quedaban DETRÁS del dibujo: solo asomaba la
       última, que es la única que sobresale por debajo, y era la única
       que se podía pulsar. Medido con el navegador: `.diagnostic-visual` y
       `.diagnostic-questions` daban las dos grid-row 2.
       Van a la fila 4, después de la segunda frase. */
    .diagnostic-questions,
    .diagnostic-result {
        grid-column: 1;
        grid-row: 4;
        /* Criterio de Víctor (13/09/2026): en vertical no cabe todo y no
           pasa nada — que baje y se lea con el scroll de la página. Lo que
           no puede es recortarse y quedar inalcanzable. Por eso aquí no
           hay scroll interno ni tope de alto: crecen lo que necesiten. */
        overflow: visible;
        max-height: none;
        height: auto;
    }

    /* Y el marco tampoco recorta: con altura automática no tiene nada que
       cortar, y así lo que crezca por abajo se ve. */
    .diagnostic-layout {
        overflow: visible;
    }

    .diagnostic-gender-prompt {
        text-shadow:
            0 0 4px rgba(0, 0, 0, 0.95),
            0 0 10px rgba(0, 0, 0, 0.85),
            0 2px 3px rgba(0, 0, 0, 0.95);
    }
}

/* ── Origen en móvil de pie: el texto del tema, donde se lea ───────────
   Víctor, 13/09/2026: al desplegar los textos de Inés no caben en
   pantalla. Medido: empezaban en y=493 de una ventana de 664 y se salían
   entre 377 y 458px.

   La causa no es la longitud del texto: es que con un tema abierto el
   bloque principal (título, párrafo y cierre) **sigue ocupando sus 365px**
   aunque esté apagado a opacidad 0,1 — el diseño lo atenúa para que no
   estorbe, y en escritorio basta porque el panel va al otro lado de la
   pantalla. Apilado en vertical, no: el panel no tiene más remedio que
   empezar por debajo de un hueco enorme y vacío.

   Aquí, con tema abierto, ese bloque se retira del flujo. No se pierde
   nada —ya era invisible— y el texto sube a donde se lee. Al cerrar el
   tema vuelve solo. */
@media (max-width: 768px) {
    body.origin-topic-abierto #origen.scene .origin-content,
    body.origin-topic-abierto #origen.scene .origin-portrait {
        display: none;
    }
}