/* components.css — nav, footer, botones, triángulos, cards, audio-control,
   overlay de entrada. Se construyen una sola vez y se reutilizan. */

/* ---------- Brillo dorado y plata ----------
   Misma técnica que vessence.es (.title-gold / .supernova-silver):
   degradado recortado al texto con background-clip, animado moviendo
   background-position. Mismo ritmo en los dos a propósito: en la Home
   aparecen uno al lado del otro (puertas Sport/Executive), y si van a
   velocidades distintas se ve descoordinado en vez de una pareja
   pensada. A 28s no se llegaba a notar el movimiento; a 9s sigue
   siendo un brillo lento, no un parpadeo, pero se percibe (Víctor,
   28/08/2026). Para hover interactivo, más vivo (se define aparte
   donde se usa). Oro = Sport, cálido. Plata = Executive, frío. */

.text-shine-gold {
    /* MISMAS paradas (0/18/42/58/82/100) que .text-shine-silver — con
       duración y curva iguales no bastaba: el oro tenía tramos planos en
       los extremos y el brillo era un punto, no una meseta, así que
       parecía más lento aunque el reloj fuera idéntico (Víctor,
       29/08/2026). Con la misma forma, solo cambia el color. */
    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;
    animation: shineGold 9s ease-in-out infinite;
}

@keyframes shineGold {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}

/* Misma curva EXACTA que .text-shine-gold (keyframes shineGold, no una
   propia) — antes tenían formas de movimiento distintas y, aunque
   duraran lo mismo, no brillaban fuerte en el mismo instante: parecía
   que uno de los dos "no estaba" según en qué momento se mirara
   (Víctor, 28/08/2026). Con la misma curva, van siempre en fase. */
.text-shine-silver {
    background: linear-gradient(90deg,
        var(--brand-silver-dim) 0%, var(--brand-silver) 18%,
        var(--brand-silver-light) 42%, var(--brand-silver-light) 58%,
        var(--brand-silver) 82%, var(--brand-silver-dim) 100%
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineGold 9s ease-in-out infinite;
}

/* ---------- Cita / testimonio ----------
   Hueco compacto para una frase real de una familia o cliente, con
   placeholder documentado mientras no llega el texto de Inés. */
.quote {
    border-left: 2px solid var(--brand-gold);
    padding-left: 1rem;
    margin: 1rem 0;
    max-width: 620px;
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(0.8906rem, 0.59375vw, 0.95rem);
    color: var(--text-muted);
}

.quote cite {
    display: block;
    margin-top: 0.35rem;
    font-style: normal;
    font-size: clamp(0.7313rem, 0.4875vw, 0.78rem);
    letter-spacing: 0.04em;
    color: var(--brand-gold-light);
}

/* ---------- Rayo de proyección lateral ("spectral beam") ----------
   Técnica de web_novedades/pleiades/index.html, traída tal cual:
   una franja estrecha en el borde de la pantalla recorta una copia
   GIGANTE (200vh) de la misma imagen, girada 90° y muy desenfocada.
   Se ve solo un fragmento — parece luz de proyector coándose
   deformada por los lados. Reservada para momentos importantes, no
   para uso continuo. Prueba en el Diagnóstico (28/08/2026). */
.spectral-beam {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 7vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.spectral-beam-left { left: 0; }
.spectral-beam-right { right: 0; }

.spectral-beam-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260vh;
    height: 260vh;
    /* El fallo real: global.css pone `img { max-width: 100% }`, que aquí
       capaba el ancho a lo estrecho de la franja — y al girar 90° ese
       ancho capado pasaba a ser la altura visible. Cuanto más estrecha
       la franja, más corto se quedaba arriba y abajo (peor en 1080 que
       en QHD, tal cual lo notó Víctor). Se anula aquí explícitamente. */
    max-width: none;
    object-fit: cover;
    /* Centrado explícito en los dos ejes ANTES de girar — depender de que
       el navegador "adivinara" el centro a través del flex del padre
       fallaba más cuanto más pequeña era la ventana (Víctor, 1080 vs
       2K). Con top/left/transform no hay adivinanza posible. */
    transform: translate(-50%, -50%) rotate(90deg);
    filter: brightness(1.8) contrast(1.2) blur(1vw);
    opacity: 0;
    /* Salida lenta (5s): el vídeo se pausa al instante (JS) y queda
       fijo en ese fotograma; esta transición es solo el apagado del
       brillo, no debe notarse como un corte. La entrada es más viva. */
    transition: opacity 5s ease;
}

.spectral-beam-img.visible {
    opacity: 1;
    transition: opacity 1s ease;
}

@media (prefers-reduced-motion: reduce) {
    .spectral-beam-img { transition: none; }
}

/* ---------- Header / navegación ---------- */

.site-header {
    position: relative;
    z-index: 25;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 5%;
    max-width: var(--max-width-header);
    margin: 0 auto;
    width: 100%;
}

/* Sin caja: con el fondo de toda la web ya en azul marino, la cabecera
   no necesita su propio bloque de color — flota sobre el mismo lienzo.
   Lo pidió Víctor tras ver la barra separada, y tiene razón: una caja
   de otro tono es lo que la hacía sentir "barra de menú" genérica. */
.site-header.is-static {
    position: static;
}

/* Solo el símbolo (sin "AKENA" ni "ALTO RENDIMIENTO" debajo) — Víctor,
   01/09/2026: el logo lleva ya la palabra dentro, no hace falta
   repetirla en texto al lado. */
/* Primer intento (Víctor, 03/09/2026, sin confirmar del todo — "yo casi
   creo que mejor poner Home"): el símbolo solo no bastaba para que se
   entendiera que ahí se vuelve al inicio. Texto discreto, no compite con
   el símbolo dorado. */
.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    line-height: 0;
    text-decoration: none;
}

.logo img {
    display: block;
    height: 2.6rem;
    width: auto;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
}

.logo-home-label {
    line-height: normal;
    font-family: var(--font-display);
    font-size: clamp(0.7031rem, 0.46875vw, 0.75rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.main-nav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.main-nav a {
    position: relative;
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.5rem;
    margin: -0.3rem -0.5rem;
    transition: color 0.3s ease;
    /* Reforzada 03/09/2026 (Víctor: "siguen sin leerse bien arriba y
       abajo en Home") — mismo patrón que .btn-hero-inicio, con un
       offset vertical que da sombra proyectada, no solo halo difuso. */
    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);
}

/* Efecto 2, revisado: nada de bloque de color entrando de lado — el
   propio texto brilla en oro, como el resto de la marca. */
.main-nav a:hover,
.main-nav a:focus-visible {
    background: linear-gradient(90deg,
        var(--brand-gold-dim) 0%, var(--brand-gold) 25%,
        var(--brand-gold-light) 50%, var(--brand-gold) 75%, var(--brand-gold-dim) 100%
    );
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineGold 2.5s ease-in-out infinite;
    /* Con el texto relleno de degradado transparente, la sombra fuerte
       heredada de .main-nav a no se recorta a la letra y tapa el
       dorado de negro (mismo bug ya resuelto en .hero-content h1
       .accent) — sombra propia, más ligera. */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.main-nav a.is-active {
    color: var(--brand-gold-light);
}

.main-nav a.nav-cta {
    color: var(--text-main);
    border: 1px solid var(--brand-gold);
    padding: 0.5rem 1.2rem;
    margin: 0;
    border-radius: var(--radius-pill);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.main-nav a.nav-cta:hover,
.main-nav a.nav-cta:focus-visible {
    border-color: var(--brand-gold-light);
    box-shadow: 0 0 24px var(--tri-gold-glow);
}

/* Instagram, a la derecha de Hablemos en el menú de todas las páginas
   (Víctor, 11/09/2026). Dibujado en SVG en línea, sin librerías ni
   archivo aparte, y con `currentColor` para que herede el color del menú.
   El hover dorado del resto de enlaces es un degradado recortado a la
   letra: en un icono no hay letra que recortar, así que aquí se anula y
   se cambia el color del trazo. */
.main-nav a.nav-instagram {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem;
    margin: 0;
    color: var(--text-muted);
}

.nav-instagram svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.nav-instagram .nav-instagram-punto {
    fill: currentColor;
    stroke: none;
}

.main-nav a.nav-instagram:hover,
.main-nav a.nav-instagram:focus-visible {
    background: none;
    animation: none;
    -webkit-text-fill-color: currentColor;
    color: var(--brand-gold-light);
}

/* Submenú de Deportistas: Desafío Élite / Cursos / Academia */
.nav-item-dropdown {
    position: relative;
    z-index: 30;
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 1rem 0.8rem;
    background: var(--brand-navy);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-square);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    white-space: nowrap;
}

.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown a {
    font-size: 0.8rem;
}

/* Si "Deportistas" está activo (estás dentro de la sección), sus tres
   opciones van claritas también, no solo la que se roza con el ratón. */
.nav-item-dropdown:has(> a.is-active) .nav-dropdown a {
    color: var(--brand-gold-light);
}

/* El brillo animado de .main-nav a:hover arranca en --brand-gold-dim y
   sube a claro — en esta caja pequeña solo se alcanza a ver la fase
   oscura. Mismo patrón que .footer-grid a:hover: color fijo, sin
   animación. */
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    animation: none;
    color: var(--brand-gold-light);
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-square);
    color: var(--text-main);
    /* Sin clamp a propósito (06/09/2026): botón oculto por defecto
       (display:none), solo visible bajo 900px (ver @media abajo) — no
       participa nunca en el rango 1920/2560 que resuelve el clamp. */
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 30;
}

@media (max-width: 950px), (max-height: 600px) {
    .main-nav {
        position: fixed;
        inset: 0;
        z-index: 25;
        background: var(--brand-navy);
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        transform: translateX(100%);
        transition: transform 0.35s ease;
    }

    .main-nav.is-open {
        transform: translateX(0);
    }

    /* El pie lleva una réplica del mismo .main-nav, así que se llevaba
       también el panel de pantalla completa de la hamburguesa: en móvil
       vertical esos enlaces quedaban a 500px a la derecha del borde,
       fuera de la pantalla y sin forma de pulsarlos (medido el
       12/09/2026). Aquí se retira, porque justo debajo está .footer-grid
       con esos mismos destinos —El Método, Deportistas, Familias, Clubs,
       El Origen, Podcast, Acceso alumnos, Hablemos, y además WhatsApp,
       correo e Instagram— ya en columnas legibles. Enseñar las dos listas
       seguidas sería el mismo menú dos veces. En escritorio y en móvil
       tumbado no cambia nada: esta regla vive en el bloque de pantalla
       estrecha, y el tumbado usa el ancho simulado de 1600. */
    .footer-main-nav {
        display: none;
    }

    .main-nav a {
        font-size: clamp(1.125rem, 0.75vw, 1.2rem);
    }

    .nav-item-dropdown {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
    }

    /* Víctor, 14/09/2026: "que en móvil vertical no salga el desplegable
       dentro de la sección de Deportistas, solo cuando se pulse encima".

       Hasta hoy las tres opciones —Desafío Élite, Cursos, Academia— se
       forzaban a visible aquí y quedaban siempre abiertas dentro del
       menú, ocupando 80px medidos. El menú se leía como si Deportistas
       tuviera tres hermanas sueltas, no como una sección con su interior.

       Ahora entra plegado. Lo despliega `nav.js` al primer toque sobre
       Deportistas; el segundo toque ya entra en la página. Sin flechas ni
       carteles: el criterio de la casa es que la gente entiende que una
       cerradura se toca. */
    .nav-dropdown {
        position: static;
        opacity: 0;
        visibility: hidden;
        transform: none;
        background: transparent;
        border: none;
        padding: 0;
        margin-top: 0;
        align-items: center;
        /* Se pliega por alto, no con display:none, para que la apertura
           tenga transición y no sea un salto seco. */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, opacity 0.25s ease;
    }

    .nav-item-dropdown.desplegado .nav-dropdown {
        opacity: 1;
        visibility: visible;
        max-height: 12rem;
        margin-top: 0.6rem;
    }

    /* El hover de escritorio no debe colarse aquí: un móvil puede
       declararse con hover y abriría el submenú al rozarlo. */
    .nav-item-dropdown:hover .nav-dropdown,
    .nav-item-dropdown:focus-within .nav-dropdown {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
    }

    .nav-item-dropdown.desplegado:hover .nav-dropdown,
    .nav-item-dropdown.desplegado:focus-within .nav-dropdown {
        opacity: 1;
        visibility: visible;
        max-height: 12rem;
    }

    .nav-dropdown a {
        font-size: clamp(0.9375rem, 0.625vw, 1rem);
    }

    .nav-toggle {
        display: block;
    }
}

/* ---------- Audio control ---------- */

.audio-control {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-main);
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: clamp(0.75rem, 0.5vw, 0.8rem);
    letter-spacing: 0.05em;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.audio-control:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--brand-gold);
}

/* ---------- Overlay de entrada (hero) ----------
   Breve y elegante, sin efectos de más (Víctor lo pidió tras ver la
   primera versión con vídeo/texto/plancton — "no vale", 01/09/2026):
   pantalla lisa en azul corporativo, el logo negativo (fondo propio ya
   quitado del SVG) con el mismo brillo dorado que el resto de la marca,
   pulsando para invitar al clic. Nada de la web real se ve por detrás. */
.intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-dark);
    cursor: pointer;
    transition: opacity 0.8s ease;
    /* Sin esto, en táctil el dedo arrastra la página de debajo aunque
       el body esté bloqueado. */
    touch-action: none;
}

/* Mientras está el logo, no hay nada más: la página de debajo no se
   puede desplazar (Inés, 11/09/2026 — "solo logo en pantalla, y se pasa
   a la experiencia con un clic"). Antes la capa tapaba, pero la portada
   seguía estando ahí debajo y se podía bajar hasta el test sin llegar a
   pulsar. Lo pone y lo quita audio.js, que es quien lleva el arranque. */
body.intro-bloqueada {
    overflow: hidden;
}

.intro-logo {
    width: min(90vw, 840px);
    height: auto;
    filter: drop-shadow(0 0 18px rgba(200, 169, 104, 0.85))
        drop-shadow(0 0 50px rgba(200, 169, 104, 0.6))
        drop-shadow(0 0 100px rgba(200, 169, 104, 0.35));
    /* Keyframe propio, no relatoLeyendaPulso compartido: ese solo mueve
       brightness() y, como filter es una única propiedad, pisaba por
       completo los tres drop-shadow de arriba mientras la animación
       corría — el halo solo se veía con movimiento reducido, al revés
       de lo pensado (04/09/2026, mismo tipo de fallo que .btn-hero-inicio). */
    animation: introLogoPulso 2.2s ease-in-out infinite;
}

/* Móvil en horizontal (Víctor, 11/09/2026): el ancho se calcula con 90vw,
   que en horizontal son ~786px, y el logo salía más alto que la pantalla
   entera. Solo se limita aquí, en pantallas bajas — el tamaño de
   escritorio no se toca. object-fit:contain para que encoja sin
   deformarse, en vez de calcular la proporción a mano. */
@media (max-height: 600px) {
    .intro-logo {
        max-height: 62vh;
        object-fit: contain;
    }
}

@keyframes introLogoPulso {
    0%, 100% {
        filter: brightness(1)
            drop-shadow(0 0 18px rgba(200, 169, 104, 0.85))
            drop-shadow(0 0 50px rgba(200, 169, 104, 0.6))
            drop-shadow(0 0 100px rgba(200, 169, 104, 0.35));
    }
    50% {
        filter: brightness(1.4)
            drop-shadow(0 0 18px rgba(200, 169, 104, 0.85))
            drop-shadow(0 0 50px rgba(200, 169, 104, 0.6))
            drop-shadow(0 0 100px rgba(200, 169, 104, 0.35));
    }
}

.hero.focused .intro-overlay {
    opacity: 0;
    pointer-events: none;
}

/* Nada más en pantalla durante el arranque: ni menú ni botón de audio,
   solo el logo (Víctor, 01/09/2026). Aparecen a la vez que se funde
   la pantalla azul, no antes. */
.hero:not(.focused) .site-header {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

@media (prefers-reduced-motion: reduce) {
    .intro-logo {
        animation: none;
    }
}

/* ---------- Botones ---------- */

/* .btn[hidden]: sin esto, hidden="true" no esconde nunca un botón —
   [hidden] y .btn empatan en especificidad, y display:inline-block de
   abajo gana siempre (mismo fallo real que .diagnostic-result y
   .diagnostic-visual-pending). Pasó con "Adéntrate en Akena": se
   seguía viendo detrás del relato pese a disparador.hidden = true
   (Víctor, 02/09/2026). */
.btn[hidden] {
    display: none;
}

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--brand-gold);
    border-radius: var(--radius-square);
    text-decoration: none;
    font-size: clamp(0.7969rem, 0.53125vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

/* Efecto 2, revisado: nada de bloque de color entrando de lado. El
   texto brilla en oro (misma técnica que .title-gold en vessence.es)
   y el borde sube de brillo. Sin preguntas: es el mismo lenguaje que
   ya usa Víctor en su propia web, aplicado aquí a los botones. */
.btn:hover,
.btn:focus-visible {
    border-color: var(--brand-gold-light);
    box-shadow: 0 0 30px var(--tri-gold-glow);
    background: linear-gradient(90deg,
        var(--brand-gold-dim) 0%, var(--brand-gold) 25%,
        var(--brand-gold-light) 50%, var(--brand-gold) 75%, var(--brand-gold-dim) 100%
    );
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineGold 2.5s ease-in-out infinite;
}

.btn-pill {
    border-radius: var(--radius-pill);
}

.btn-whatsapp {
    border-color: #25d366;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
    border-color: #4ee88a;
    box-shadow: 0 0 30px rgba(37, 211, 102, 0.4);
    background: linear-gradient(90deg, #0d3d24 0%, #25d366 25%, #b9ffd6 50%, #25d366 75%, #0d3d24 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineGold 2.5s ease-in-out infinite;
}

/* ---------- Cards ---------- */

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 3rem 2.5rem;
    border-radius: var(--radius-card);
    transition: border-color 0.3s ease;
    /* Botón siempre al fondo aunque los textos midan distinto (Cursos de
       Deportistas, 03/09/2026) — sin esto, 3 tarjetas con texto de
       distinto largo dejaban los CTA descolocados entre sí. */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card > a.btn:last-child {
    margin-top: auto;
}

.card:hover {
    border-color: var(--border-gold);
}

.card h3 {
    font-size: clamp(1.3rem, 0.8125vw, 1.3rem);
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.card p {
    color: var(--text-muted);
    line-height: 1.6;
}

.card.card-soon {
    opacity: 0.6;
}

.card-soon-tag {
    display: inline-block;
    font-size: clamp(0.6563rem, 0.4375vw, 0.7rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brand-gold-light);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.8rem;
    margin-top: 1rem;
}

/* ---------- Tres triángulos ---------- */

.triangles {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 4rem 0;
}

.triangle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-display);
}

/* Antes era un triángulo por trucos de borde (border-left/right
   transparentes + border-bottom de color) — sólido, sin poder animar
   un degradado encima. Con clip-path se dibuja igual mirando por fuera,
   pero admite el mismo brillo en movimiento que .triangle-label, con
   el color propio de cada pilar (Víctor pidió que el brillo estuviera
   también en el propio triángulo, no solo en la palabra de abajo). */
.triangle-shape {
    width: 120px;
    height: 100px;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--tri-color, var(--brand-gold)) 55%, black) 0%,
        var(--tri-color, var(--brand-gold)) 35%,
        color-mix(in srgb, var(--tri-color, var(--brand-gold)) 55%, white) 50%,
        var(--tri-color, var(--brand-gold)) 65%,
        color-mix(in srgb, var(--tri-color, var(--brand-gold)) 55%, black) 100%
    );
    background-size: 300% auto;
    animation: shineGold 14s ease-in-out infinite;
    transition: filter 0.3s ease, transform 0.3s ease;
    filter: drop-shadow(0 0 0 transparent);
}

.triangle-btn:hover .triangle-shape,
.triangle-btn:focus-visible .triangle-shape,
.triangle-btn.is-active .triangle-shape {
    transform: translateY(-6px);
    filter: drop-shadow(0 0 20px var(--tri-glow, var(--tri-gold-glow)));
}

/* Efecto aprobado 3: el triángulo activo respira — portal, no botón fijo. */
.triangle-btn.is-active .triangle-shape {
    animation: trianglePulse 3s ease-in-out infinite;
}

@keyframes trianglePulse {
    0%, 100% { filter: drop-shadow(0 0 12px var(--tri-glow, var(--tri-gold-glow))); }
    50% { filter: drop-shadow(0 0 28px var(--tri-glow, var(--tri-gold-glow))); }
}

.triangle-btn.triangle-blue { --tri-color: var(--tri-blue); --tri-glow: var(--tri-blue-glow); }
.triangle-btn.triangle-gold { --tri-color: var(--tri-gold); --tri-glow: var(--tri-gold-glow); }
.triangle-btn.triangle-burgundy { --tri-color: var(--tri-burgundy); --tri-glow: var(--tri-burgundy-glow); }

/* Mismo brillo que las puertas Sport/Executive (.text-shine-gold /
   .text-shine-silver), pero con el color propio de cada triángulo en
   vez de solo oro/plata, y más lento (14s frente a 9s) — pidió Víctor
   que las "medallas" respiren más despacio que las puertas. */
.triangle-label {
    font-size: clamp(0.8438rem, 0.5625vw, 0.9rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--tri-color, var(--brand-gold)) 55%, black) 0%,
        var(--tri-color, var(--brand-gold)) 35%,
        color-mix(in srgb, var(--tri-color, var(--brand-gold)) 55%, white) 50%,
        var(--tri-color, var(--brand-gold)) 65%,
        color-mix(in srgb, var(--tri-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;
}

.triangle-panel {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    line-height: 1.7;
    min-height: 6rem;
}

.triangle-panel[data-active="blue"] { color: var(--text-main); border-top: 2px solid var(--tri-blue); }
.triangle-panel[data-active="gold"] { color: var(--text-main); border-top: 2px solid var(--tri-gold); }
.triangle-panel[data-active="burgundy"] { color: var(--text-main); border-top: 2px solid var(--tri-burgundy); }

@media (max-width: 600px) {
    .triangle-shape {
        width: 80px;
        height: 70px;
    }
}

/* ---------- Footer ---------- */

.site-footer {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border-subtle);
    padding: 4rem 5% 2rem;
    max-width: var(--max-width-header);
    margin: 0 auto;
    color: var(--text-muted);
    font-size: clamp(0.7969rem, 0.53125vw, 0.85rem);
}

/* Efecto aprobado 8: los tres triángulos como marca de agua, inyectados
   por app.js (initFooterWatermark) en todos los footers de la web. */
.footer-watermark {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 85%;
    width: auto;
    color: var(--brand-gold);
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.site-footer > *:not(.footer-watermark) {
    position: relative;
    z-index: 1;
}

/* El "© 2026 AKENA" del pie, con la fuente de marca que ya usa toda la
   web para rótulos (Barlow Condensed), no con la serif del cuerpo
   (Víctor, 11/09/2026). Ninguna fuente nueva. */
.site-footer > p {
    font-family: var(--font-display);
}

/* Réplica del menú de arriba (Víctor, 02/09/2026) — mismo .main-nav,
   solo centrado y permitiendo salto de línea, que aquí no hay una
   cabecera estrecha limitando el ancho. */
.footer-main-nav {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.8rem;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-subtle);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-grid a {
    text-decoration: none;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.footer-grid a:hover {
    color: var(--brand-gold-light);
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-subtle);
    padding-top: 1.5rem;
}

.footer-legal a {
    text-decoration: underline;
    color: var(--text-muted);
}

/* ---------- Zonas de revelado (páginas secundarias sin scroll) ----------
   Hover en escritorio, clic en móvil. Fade + slide, máx. 300ms. Mismo
   mecanismo que los triángulos: PROYECTO.md sección 4. */

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

.reveal-zone {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    padding: 1.1rem 1.4rem;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.reveal-zone:hover,
.reveal-zone.is-open,
.reveal-zone:focus-within {
    border-color: var(--border-gold);
    background: var(--bg-surface-hover);
}

.reveal-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    text-align: left;
    color: var(--text-main);
    cursor: pointer;
}

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

.reveal-icon {
    font-size: clamp(0.7969rem, 0.53125vw, 0.85rem);
    color: var(--brand-gold-light);
    transition: transform 0.3s ease;
    flex: 0 0 auto;
}

.reveal-zone.is-open .reveal-icon {
    transform: rotate(45deg);
}

.reveal-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.reveal-zone.is-open .reveal-content,
.reveal-zone:focus-within .reveal-content {
    max-height: 440px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 0.7rem;
}

@media (hover: hover) and (pointer: fine) {
    .reveal-zone:hover .reveal-content {
        max-height: 440px;
        opacity: 1;
        transform: translateY(0);
        margin-top: 0.7rem;
    }
}

.reveal-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

.reveal-content ul {
    list-style: none;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.8;
}

@media (min-width: 769px) and (min-height: 601px) {
    .reveal-content p,
    .reveal-content ul {
        font-size: clamp(0.9844rem, 0.65625vw, 1.05rem);
    }
}

/* ---------- Ventana grande para contenido largo ----------
   Zonas marcadas con [data-modal]: en vez de expandir en la propia
   caja (que las apretaba), el disparador se queda pequeño y el texto
   largo vive en una ventana centrada, con aire y tipografía cómoda.
   Hover en escritorio (se queda abierta viajando del disparador a la
   ventana), clic en móvil. reveal-modal.js. */

.reveal-zone[data-modal] .reveal-content {
    display: none;
}

.reveal-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6%;
    background: rgba(10, 11, 14, 0.78);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.reveal-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.reveal-modal-card {
    position: relative;
    /* Sin esto, el ::before de z-index:-1 de más abajo se pinta detrás
       del propio fondo navy de esta tarjeta (bug real, Víctor,
       10/09/2026: "no está funcionando") — la tarjeta no tenía
       z-index propio, así que no formaba su propio contexto de
       apilamiento y el hijo negativo se escapaba detrás de todo. */
    isolation: isolate;
    width: 100%;
    max-width: 680px;
    max-height: 82vh;
    overflow-y: auto;
    background: var(--brand-navy);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-card);
    padding: 3rem;
    transform: translateY(18px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-modal.is-open .reveal-modal-card {
    transform: translateY(0) scale(1);
}

.reveal-modal-close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 2.2rem;
    height: 2.2rem;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: clamp(1.0313rem, 0.6875vw, 1.1rem);
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.reveal-modal-close:hover,
.reveal-modal-close:focus-visible {
    color: var(--brand-gold-light);
    border-color: var(--border-gold);
}

.reveal-modal-card h3 {
    font-size: clamp(1.5938rem, 1.0625vw, 1.7rem);
    color: var(--text-main);
    margin-bottom: 1.3rem;
    padding-right: 2rem;
}

.reveal-modal-card p {
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* Colorcito de fondo al pasar el ratón por TODA la tarjeta (Víctor,
   10/09/2026 — corregido el mismo día: la primera versión solo
   reaccionaba en la franja del texto, "superficie mínima", no en toda
   la tarjeta como pedía). Inactivo por defecto (var sin imagen). Se
   activa poniendo --reveal-hover-img en el propio .reveal-modal-card de
   la página que lo quiera, sin tocar el resto de páginas que usan este
   mismo componente. */
.reveal-modal-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--reveal-hover-img, none);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-card);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.reveal-modal-card:hover::before {
    opacity: 0.35;
}

.reveal-modal-card ul {
    list-style: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.9;
}

@media (min-width: 769px) and (min-height: 601px) {
    .reveal-modal-card p {
        font-size: clamp(1.1719rem, 0.78125vw, 1.25rem);
    }

    .reveal-modal-card ul {
        font-size: clamp(1.0781rem, 0.71875vw, 1.15rem);
    }
}

@media (max-width: 768px), (max-height: 600px) {
    .reveal-modal {
        padding: 4%;
    }

    .reveal-modal-card {
        padding: 2rem;
        max-height: 88vh;
    }
}

@media (max-width: 768px), (max-height: 600px) {
    .reveal-grid {
        gap: 0.7rem;
    }

    .reveal-zone {
        padding: 0.8rem 1.1rem;
    }

    .site-footer.is-compact {
        padding: 0.9rem 5%;
        font-size: 0.7rem;
        gap: 0.5rem 1rem;
    }
}

/* ---------- Footer compacto (páginas secundarias sin scroll) ---------- */

.site-footer.is-compact {
    padding: 1.2rem 5%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1.5rem;
    font-size: clamp(0.7031rem, 0.46875vw, 0.75rem);
}

/* El menú repetido dentro de un pie compacto ocupa su propia línea, por
   encima del copyright y los contactos (Podcast, 11/09/2026). */
.site-footer.is-compact .footer-main-nav {
    flex: 0 0 100%;
    margin-bottom: 0.4rem;
}

.site-footer.is-compact .footer-contact {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.site-footer.is-compact .footer-contact a {
    text-decoration: none;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.site-footer.is-compact .footer-contact a:hover {
    color: var(--brand-gold-light);
}

.site-footer.is-compact .footer-legal {
    border-top: none;
    padding-top: 0;
    gap: 1.2rem;
}

/* ---------- Placeholder de asset pendiente ---------- */

.asset-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: repeating-linear-gradient(
        45deg,
        var(--bg-surface),
        var(--bg-surface) 10px,
        var(--bg-surface-hover) 10px,
        var(--bg-surface-hover) 20px
    );
    border: 1px dashed var(--border-gold);
    color: var(--text-muted);
    font-size: clamp(0.75rem, 0.5vw, 0.8rem);
    letter-spacing: 0.05em;
    padding: 2rem;
    min-height: 200px;
    border-radius: var(--radius-card);
}


/* ---------- Cabecera y pie en móvil horizontal (Víctor, 11/09/2026) ----------
   Medido en una pantalla de 393px de alto: la cabecera se llevaba 92px y
   el pie 68px — 160px, el 41% de la pantalla, solo en marco. El hueco
   real para el contenido quedaba en 233px. Aquí se comprimen los dos
   para devolver ~70px al contenido. Solo bajo 500px de alto: en
   escritorio y en vertical no cambia nada. */
@media (max-height: 600px) {
    /* Ojo: el padding de .site-header NO se pone aquí. pages.css se carga
       después y ya tiene un .site-header dentro de su bloque de móvil, con
       la misma especificidad — ganaba por orden de archivo y esta regla no
       hacía nada (comprobado midiendo: seguía en 24px). Vive al final de
       pages.css. */
    .logo img {
        height: 1.8rem;
    }

    .site-footer {
        padding: 1rem 5% 0.8rem;
    }

    .site-footer.is-compact {
        padding: 0.5rem 5%;
    }

}

/* Los cuatro enlaces legales medían 14px de alto: se pulsan con la uña.
   Se les da altura de dedo sin tocar ni la letra ni el aspecto —solo aire
   arriba y abajo— y se separan un poco más entre ellos para no encadenar
   pulsaciones equivocadas (12/09/2026). Vale para las dos formas de coger
   el teléfono, de pie y tumbado. */
@media (max-width: 768px), (max-height: 600px) {
    .footer-legal {
        gap: 0.4rem 1.5rem;
    }

    .footer-legal a,
    .footer-contact a {
        display: inline-block;
        padding: 0.45rem 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL DE PIE — suelos de tamaño de letra
   ══════════════════════════════════════════════════════════════════════
   Medido el 12/09/2026 a 390px de ancho: el pie y sus enlaces salían a
   9px, los botones a 10,2 y las etiquetas del formulario a 9,6. Son
   tamaños pensados para el escritorio, donde la letra se lee a medio
   metro; en la mano, a 9px, no se lee — y con el zoom de dedos tampoco,
   porque lo que se amplía es la maqueta entera.
   No se cambia ningún tamaño de escritorio: son suelos que solo entran
   en la pantalla estrecha. Y no se toca ningún titular ni rótulo de
   marca: solo lo que hay que poder LEER. */
@media (max-width: 768px) {
    .site-footer {
        font-size: 0.75rem;
    }

    .site-footer a,
    .footer-legal a {
        font-size: 0.75rem;
    }

    .btn {
        font-size: 0.75rem;
    }

    .contact-form label,
    .contact-form .field-consent,
    .contact-form .field-consent span,
    .contact-form .field-consent a {
        font-size: 0.75rem;
    }
}