/* global.css — reset, tipografía base, utilidades comunes a toda la web. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Tiene que estar AQUÍ, no solo en el body: mientras la raíz sea
       "visible", el navegador se lleva el recorte del body a la ventana y
       entonces no recorta nadie. Ver la nota del body. */
    overflow-x: clip;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-display);
    font-weight: var(--font-weight-regular);
    overflow-x: hidden;
    /* El "overflow-x: hidden" de arriba NO recorta nada: el navegador se lo
       lleva a la ventana y el body deja de ser una caja que recorta. Por eso
       en móvil vertical la onda dorada de "Desafío Élite" (crece hasta 160vh,
       o sea 1062px en un móvil) ensanchaba el documento a 716px, y el
       teléfono encogía la portada entera al 55% para que cupiera: todo se
       veía diminuto sin que hubiera nada roto a la vista. Medido el
       12/09/2026. "clip" sí recorta, y a diferencia de "hidden" no crea una
       zona desplazable ni estropea los elementos pegajosos. */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    animation: pageFocusIn 250ms ease-out;
}

/* Efecto aprobado 6, revisado: transición blur a enfoque en toda
   navegación, en vez del wipe de triángulo. Se aplica sola al cargar
   cada página — sin JS, sin interceptar clics. */
@keyframes pageFocusIn {
    from {
        filter: blur(12px);
        opacity: 0;
    }
    to {
        filter: blur(0);
        opacity: 1;
    }
}

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

/* Cuerpo de texto largo en Fraunces (serif), titulares y UI en Barlow
   Condensed. Un solo tipo condensado en párrafos largos cansa — lo dijo
   el propio documento y lo confirmó Víctor.
   Tamaño base también aquí: cualquier <p> sin su propio font-size más
   específico hereda esto. La pasada anterior solo subió los
   encabezados grandes — el texto normal se quedó igual, y Víctor lo
   notó. */
p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
}

@media (min-width: 769px) and (min-height: 601px) {
    p {
        font-size: 1.2rem;
    }
}

a {
    color: inherit;
}

h1, h2, h3, h4 {
    font-weight: var(--font-weight-semibold);
    line-height: 1.15;
}

.container {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
}

.section {
    padding: var(--section-padding-y) var(--section-padding-x);
    max-width: var(--max-width-content);
    margin: 0 auto;
    border-top: 1px solid var(--border-subtle);
}

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

/* Tamaños fijos en rem, no vw: vw depende del ancho de viewport en
   píxeles CSS, que cambia con el escalado del sistema operativo de
   cada monitor — con vw, un 2K con escalado del SO puede tener un
   viewport CSS más ESTRECHO que un 1080p sin escalar, y el texto sale
   más pequeño justo donde debería verse más grande. rem es estable. */
.section-heading {
    font-size: 1.9rem;
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

@media (min-width: 769px) and (min-height: 601px) {
    .section-heading {
        font-size: 3.4rem;
    }
}

/* Titulares largos en páginas densas (Desafío Élite): mismo principio
   de tamaño fijo, sin vw, solo un paso más corto. */
.heading-tight {
    font-size: 1.7rem;
}

@media (min-width: 769px) and (min-height: 601px) {
    .heading-tight {
        font-size: 2.6rem;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Páginas secundarias sin scroll (PROYECTO.md sección 4) ----------
   El body ocupa exactamente la pantalla; header y footer se reservan su
   espacio y el contenido intermedio se centra. overflow-y:auto en <main>
   es una red de seguridad para pantallas muy bajas o el teclado táctil en
   Hablemos — no un scroll narrativo. */

body.page-no-scroll {
    position: relative;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Textura de fondo: una ilustración propia, desaturada y muy tenue,
   con fundido en los cuatro bordes — nunca compite con el texto. Se
   activa poniendo --page-texture en el <body> de la página; sin esa
   variable, no pinta nada. Independiente de page-no-scroll a
   propósito: alguna página con scroll normal también la usa. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--page-texture, none);
    background-size: cover;
    background-position: var(--page-texture-position, center);
    opacity: 0.22;
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at center, black 30%, transparent 85%);
    mask-image: radial-gradient(ellipse 70% 65% at center, black 30%, transparent 85%);
    transition: opacity 0.6s ease, filter 0.6s ease, background-position 0.8s ease;
    filter: grayscale(0.75) brightness(0.85);
}

/* La máscara de la constelación pasó a ser 3 capas independientes
   dentro de /metodo (ver .constellation-figura en pages.css) — este
   body::before genérico ya no se usa ahí, sigue igual para el resto
   de páginas con --page-texture simple. */

body.page-no-scroll .site-header,
body.page-no-scroll .site-footer {
    flex: 0 0 auto;
}

body.page-no-scroll main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Método: los nodos de la constelación salen del propio panel a
   propósito (.constellation-node-*, pages.css) y su brillo al activarse
   se recortaba contra este overflow — aquí no hace falta la red de
   seguridad de scroll, el layout es fijo de 4 esquinas. */
body.page-no-scroll:has(.constellation) main {
    overflow: visible;
}

body.page-no-scroll .scene {
    min-height: 0;
    width: 100%;
    max-height: 100%;
    margin: 0 auto;
    padding: 2rem 5%;
}

/* Por debajo de este ancho el contenido de las páginas densas (Sport,
   Desafío Élite, Hablemos) puede no caber entero: centrar con margin:auto
   dentro de un contenedor con scroll deja el principio inalcanzable
   (hay que subir antes de poder bajar). Se ancla arriba en vez de
   centrar, así el posible scroll interno es el normal de toda la vida. */
@media (max-width: 768px), (max-height: 600px) {
    body.page-no-scroll main {
        align-items: flex-start;
    }

    body.page-no-scroll .scene {
        justify-content: flex-start;
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
        /* Comprobado 10/09/2026: con max-height:100% (de la regla base,
           pensada para que quepa todo en una pantalla en escritorio),
           un elemento con altura fija dentro (la foto de Origen/Clubs,
           26-30vh) competía por ese hueco limitado y flexbox lo
           encogía a la fuerza en vez de dejar que `main` hiciera su
           scroll de seguridad, que es lo que este mismo bloque ya
           asumía que iba a hacer falta. */
        max-height: none;
    }

    /* Comprobado 10/09/2026: en Método (el único con .constellation),
       "overflow:visible" tenía sentido en escritorio (4 círculos fijos,
       nada que desplazar), pero en móvil los nodos pasan a flujo normal
       y el contenido de un nodo abierto (Los Pilares, con 3 tarjetas)
       puede ser más alto que la pantalla — sin scroll de verdad ahí, el
       resto del contenido queda inalcanzable, no solo invisible. */
    body.page-no-scroll:has(.constellation) main {
        overflow-y: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 768px), (max-height: 600px) {
    :root {
        --section-padding-y: 4rem;
    }
}

/* ── El móvil DE PIE no hace páginas "de una pantalla" ──────────────────
   Estas páginas encierran todo en un alto fijo y dejan el desbordamiento
   a una zona con scroll dentro de `main`. Con ratón funciona; con el dedo
   no. Comprobado el 12/09/2026 en Origen con un gesto táctil de verdad:
   la zona no se mueve ni un píxel, y "La historia de Inés", "Su visión" y
   "Trayectoria" se quedan por debajo del borde de la pantalla sin forma
   de llegar a ellas. Era el fallo que PROYECTO.md tenía apuntado como
   "TRAYECTORIA queda tapado por el pie".
   En vertical la página vuelve a desplazarse entera, que es el gesto que
   nunca falla y el que la gente ya hace sin pensar. El apaisado no entra
   aquí: va por (max-height: 600px) y sigue como Víctor lo dio por bueno. */
@media (max-width: 768px) {
    body.page-no-scroll {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    body.page-no-scroll main,
    body.page-no-scroll:has(.constellation) main {
        overflow: visible;
        max-height: none;
    }

    body.page-no-scroll .scene {
        max-height: none;
    }
}