/* tokens.css — fuente única de verdad de diseño. Ningún color, fuente
   o espaciado se repite fuera de aquí. PROYECTO.md sección 5. */

:root {
    /* Valores de emergencia hasta que app.js mida los reales al cargar
       (medirBordesFijos) — evita un salto visible el primer instante. */
    --header-h: 92px;
    --footer-h: 88px;

    /* Paleta corporativa oficial */
    --brand-navy:       #001e34;
    --brand-navy-mid:   #004287;
    --brand-gold:       #967e4e;
    --brand-gold-light: #c8a968;
    --brand-grey-dark:  #334758;
    --brand-grey-mid:   #5f737e;

    /* Fondo de experiencia — antes negro casi puro (#0a0b0e), que no
       salía de la carta de Inés. Ahora el azul marino real de marca,
       y las superficies elevadas en azul medio en vez de blanco
       transparente genérico: así el azul medio y los grises azulados
       de la carta hacen un trabajo real en vez de no aparecer nunca. */
    --bg-dark:          #001e34;
    --bg-surface:       rgba(0, 66, 135, 0.28);
    --bg-surface-hover: rgba(0, 66, 135, 0.42);
    /* Más transparente que --bg-surface a propósito (Víctor,
       02/09/2026): para el marco del diagnóstico, dejando que el rayo
       lunar del fondo se cuele por detrás. */
    --bg-surface-veil:  rgba(0, 66, 135, 0.30);

    /* Texto — el muted en gris neutro no tenía nada que ver con el azul
       de marca. #a9bac4 es un azul-gris más claro que --brand-grey-mid
       (#5f737e no pasa contraste AA sobre el navy en texto de cuerpo;
       comprobado, no a ojo) para que siga siendo legible. */
    --text-main:        #f5f5f7;
    --text-muted:       #a9bac4;

    /* Oro y plata para el brillo de texto (misma técnica que vessence.es:
       background-clip:text + background-position animado, sin prisa).
       --brand-gold/--brand-gold-light ya existían; aquí el tono intermedio
       que falta para el degradado de tres paradas, y la pareja fría de
       plata para Executive frente al oro cálido de Sport. */
    --brand-gold-dim:     #6b552f;
    --brand-silver:       #c8ccd6;
    --brand-silver-light: #ffffff;
    --brand-silver-dim:   #5a6270;

    /* Azul corporativo más claro que existe — reservado a la pantalla de
       arranque (Víctor, 01/09/2026): ahí el azul manda, no el navy/oro
       de siempre. Mismo patrón de tres paradas que oro/plata. */
    --brand-blue-dim:   #1c4f7a;
    --brand-blue:       #4f9fd6;
    --brand-blue-light: #d8ecfb;

    /* Triángulos — los tres pilares */
    --tri-blue:          #004287;
    --tri-blue-glow:     rgba(0, 66, 135, 0.4);
    --tri-gold:          #967e4e;
    --tri-gold-glow:     rgba(150, 126, 78, 0.4);
    --tri-burgundy:      #7a1f2e;
    --tri-burgundy-glow: rgba(122, 31, 46, 0.4);
    /* Faltaba el tono claro que sí tienen azul y dorado (--brand-blue-light,
       --brand-gold-light) — añadido 10/09/2026 para el reflejo lunar
       virado a burdeos de Clubs. */
    --tri-burgundy-light: #b34a5c;

    /* Acento naranja — token nuevo 04/09/2026 (Víctor), fuera de la
       paleta de marca a propósito: para un aviso puntual (El Método en
       el footer) que tiene que distinguirse del oro de siempre. */
    --accent-orange:      #e8772e;
    --accent-orange-glow: rgba(232, 119, 46, 0.55);

    /* Bordes — gris azulado de marca en vez de blanco transparente genérico */
    --border-subtle: rgba(95, 115, 126, 0.35);
    --border-gold:   rgba(150, 126, 78, 0.4);

    /* Reflejo lunar — azul-blanco frío, usado en El Origen (.rayo-lunar)
       y en El Método (círculo y texto de "Reto"). Token nuevo 03/09/2026:
       antes cada sitio repetía su propio rgba() suelto. */
    --reflejo-lunar-dim:   rgba(160, 174, 255, 0.20);
    --reflejo-lunar:       rgba(160, 174, 255, 0.9);
    --reflejo-lunar-light: rgba(191, 200, 255, 0.9);

    /* Plancton de dos tonos en El Método (Víctor, 03/09/2026): un azul
       un poco más claro que el fondo navy (--bg-dark), y un turquesa
       más claro aún. */
    --plancton-azul:     rgba(79, 159, 214, 0.5);
    --plancton-turquesa: rgba(120, 220, 225, 0.55);

    /* Tipografía */
    --font-display:         'Barlow Condensed', sans-serif;
    --font-body:            'Fraunces', serif;
    --font-weight-regular:  400;
    --font-weight-semibold: 600;

    /* Layout */
    /* Columna central. Antes eran 1200px fijos, y eso dejaba a las
       ilustraciones laterales "lo que sobrase": 680px por lado en QHD,
       360 en 1920, pero solo 135 en el portátil de Inés (1470). De ahí
       que ella no las viera (Víctor, 11/09/2026).

       El 62,5% no es un valor a gusto: 1200 es exactamente el 62,5% de
       1920. O sea que es el ÚNICO porcentaje que vale 1200 justo en
       1920 y se queda clavado ahí hacia arriba. Uno mayor cedería más
       tarde y daría menos a los lados; uno menor tocaría 1920, que es
       resolución de referencia aprobada. Es el máximo que se le puede
       dar a los lados sin rozar 1920 ni QHD.

       El suelo de 750px es donde el texto justificado empieza a partir
       en líneas cortas.

       OJO: las tres ilustraciones laterales de pages.css se cuelgan de
       la MITAD de esta columna. Si se cambia este valor hay que cambiar
       las tres en el mismo golpe, o se despegan del borde. */
    --max-width-content: clamp(750px, 62.5vw, 1200px);
    --media-columna:     clamp(375px, 31.25vw, 600px);

    /* Tira mínima garantizada de ilustración lateral (idea de Víctor,
       11/09/2026). Las ilustraciones van por DETRÁS del texto (z-index
       -1) y llevan 90px de fundido en su borde interior, así que pueden
       meterse hacia el centro y colarse bajo el texto sin ensuciarlo.
       Eso permite darles un mínimo sin tener que estrechar más la
       columna.

       360 no es un valor a gusto: es exactamente la tira que tiene 1920,
       una de las dos resoluciones de referencia. La regla queda en
       "ninguna pantalla enseña menos ilustración que 1920".

       Lo que se solapa con la columna nunca pasa de 90px (84 en el
       portátil de Inés, 45 en el monitor de Víctor), que es justo lo que
       mide el fundido: esa parte ya va desvanecida.

       Subido de 360 a 480 el 11/09/2026 a petición de Víctor: con 360
       seguía sin verse "lo básico" de la figura, y además el azul de
       fondo asomando donde acaba el fundido se leía como un bloque
       central que tapaba la imagen — no lo era, pero el efecto es el
       mismo. Con 480 la parte visible pasa de 270 a 390.

       Consecuencia asumida: 1920 SÍ cambia (su tira era 360). La
       ilustración se mete 120px bajo la columna y el fundido solo cubre
       90, así que hay 30px a plena intensidad detrás del texto. Los
       textos de esa página ya llevan sombra negra fuerte puesta para
       leerse sobre imagen. QHD no se mueve: ahí ya eran 680. */
    --tira-minima:       480px;

    --max-width-header:  1400px;
    --section-padding-x: 5%;
    --section-padding-y: 8rem;
    --radius-card:       8px;
    --radius-pill:       50px;
    --radius-square:     4px;
}