/**
 * 00-tokens.css — Única fuente de verdad del diseño.
 *
 * Ningún otro archivo declara un color, un tamaño de fuente o un espaciado
 * literal. Si algo no se puede expresar con un token, es que falta el token.
 *
 * ORIGEN DE LOS VALORES
 * ---------------------
 * Cada token fluido está calculado entre los DOS artboards del canvas:
 * el móvil (390 px) y el de escritorio (1440 px). En esos dos anchos el
 * navegador da exactamente la cifra del diseño; entre medias interpola.
 *
 *   clamp( valor a 390px , recta , valor a 1440px )
 *
 * Por eso las pendientes tienen decimales raros: no son estéticas, son la
 * recta que pasa por los dos puntos medidos. No las redondees.
 */

:root {
	/* --- Color: marca ------------------------------------------------- */
	--pjv-blue-900: #0A1A33; /* Tinta institucional, fondos oscuros.       */
	--pjv-blue-800: #12284C; /* Azul principal. Sustituye al #2A5790.      */
	--pjv-blue-600: #2A5790; /* Azul heredado. Enlaces, estados hover.     */
	--pjv-blue-100: #E4EAF3; /* Fondos suaves, bordes.                     */

	--pjv-gold-600: #C98F22; /* Dorado sobre blanco (contraste AA).        */
	--pjv-gold-500: #E0A93B; /* Dorado principal.                          */
	--pjv-gold-200: #F7E7C4; /* Realces, subrayados.                       */

	/* --- Color: neutros ------------------------------------------------ */
	--pjv-ink: #0B0F16;
	--pjv-ink-70: #454C58;
	--pjv-ink-50: #6B7280;
	--pjv-line: #E3E6EC;
	--pjv-mist: #F5F6F8;
	--pjv-white: #FFFFFF;

	/* --- Color: semántico ---------------------------------------------- */
	--pjv-bg: var(--pjv-white);
	--pjv-fg: var(--pjv-ink);
	--pjv-muted: var(--pjv-ink-70);
	--pjv-accent: var(--pjv-gold-500);
	--pjv-error: #B42318;
	--pjv-ok: #10714B;

	/* --- Tipografía ----------------------------------------------------- */
	/* Dos familias, no cuatro. Ambas variables. */
	--pjv-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--pjv-font-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Escala fija (no cambia entre móvil y escritorio en el diseño). */
	--pjv-fs-xs: 0.75rem;   /* 12 — eyebrow, pies de foto                  */
	--pjv-fs-sm: 0.875rem;  /* 14 — etiquetas, notas                       */
	--pjv-fs-base: 1rem;    /* 16 — texto corrido                          */

	/* Escala fluida. 390px → 1440px, exacta en ambos extremos. */
	--pjv-fs-hero: clamp(2.875rem, 1.9rem + 4vw, 5.5rem);            /* 46 → 88  */
	--pjv-fs-title: clamp(2.375rem, 2.05rem + 1.333vw, 3.25rem);     /* 38 → 52  */
	--pjv-fs-section: clamp(2.125rem, 1.8rem + 1.333vw, 3rem);       /* 34 → 48  */
	--pjv-fs-quote: clamp(1.312rem, 1.15rem + 0.6667vw, 1.75rem);    /* 21 → 28  */
	--pjv-fs-card: clamp(1.375rem, 1.282rem + 0.381vw, 1.625rem);    /* 22 → 26  */
	--pjv-fs-lead: clamp(1.062rem, 0.9464rem + 0.4762vw, 1.375rem);  /* 17 → 22  */
	--pjv-fs-body-lg: clamp(1.062rem, 0.9929rem + 0.2857vw, 1.25rem);/* 17 → 20  */
	--pjv-fs-stat: clamp(1.375rem, 1.189rem + 0.7619vw, 1.875rem);   /* 22 → 30  */
	--pjv-fs-player: clamp(2.25rem, 1.786rem + 1.905vw, 3.5rem);     /* 36 → 56  */
	--pjv-fs-menu: 2.5rem;                                           /* 40, fijo */

	--pjv-lh-tight: 0.96;  /* Titular del hero.                            */
	--pjv-lh-snug: 1.08;   /* Titulares de sección.                        */
	--pjv-lh-base: 1.65;   /* Texto corrido.                               */

	--pjv-track-tight: -0.03em;
	--pjv-track-wide: 0.14em;

	/* --- Espaciado ------------------------------------------------------- */
	/* Escala fija de 4, para huecos pequeños. */
	--pjv-s1: 0.25rem;   /* 4  */
	--pjv-s2: 0.5rem;    /* 8  */
	--pjv-s3: 0.75rem;   /* 12 */
	--pjv-s4: 1rem;      /* 16 */
	--pjv-s5: 1.5rem;    /* 24 */
	--pjv-s6: 2rem;      /* 32 */
	--pjv-s7: 3rem;      /* 48 */
	--pjv-s8: 4rem;      /* 64 */

	/* Espaciado fluido, medido en los artboards. */
	--pjv-section: clamp(3.5rem, 2.386rem + 4.571vw, 6.5rem);        /* 56 → 104 */
	--pjv-hero-top: clamp(3rem, 1.886rem + 4.571vw, 6rem);           /* 48 → 96  */
	--pjv-hero-bottom: clamp(3.5rem, 2.386rem + 4.571vw, 6.5rem);    /* 56 → 104 */
	--pjv-gutter: clamp(1.25rem, 0.7857rem + 1.905vw, 2.5rem);       /* 20 → 40  */
	--pjv-card-pad: clamp(1.5rem, 1.221rem + 1.143vw, 2.25rem);      /* 24 → 36  */
	--pjv-footer-pad: clamp(2.5rem, 1.757rem + 3.048vw, 4.5rem);     /* 40 → 72  */
	--pjv-gap-cols: clamp(2rem, 0.5143rem + 6.095vw, 6rem);          /* 32 → 96  */
	--pjv-gap-footer: clamp(1.375rem, 0.9571rem + 1.714vw, 2.5rem);  /* 22 → 40  */
	--pjv-form-pad: clamp(1.5rem, 1.036rem + 1.905vw, 2.75rem);      /* 24 → 44  */
	--pjv-s5-5: 2.5rem;                                              /* 40, fijo */

	/* --- Layout ---------------------------------------------------------- */
	--pjv-container: 1200px;
	--pjv-container-narrow: 760px;
	--pjv-header-h: 72px; /* 64 en móvil, ver 03-header.css */

	/* --- Formas ---------------------------------------------------------- */
	--pjv-r-sm: 8px;
	--pjv-r-md: 14px;
	--pjv-r-lg: 24px;
	--pjv-r-pill: 999px;

	/* --- Elevación -------------------------------------------------------- */
	--pjv-shadow-sm: 0 1px 2px rgb(11 15 22 / 6%), 0 4px 12px rgb(11 15 22 / 4%);
	--pjv-shadow-md: 0 8px 30px rgb(11 15 22 / 8%);
	--pjv-shadow-lg: 0 24px 60px rgb(10 26 51 / 18%);

	/* --- Movimiento -------------------------------------------------------- */
	--pjv-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pjv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--pjv-t-fast: 160ms;
	--pjv-t-base: 260ms;
	--pjv-t-slow: 480ms;
	--pjv-delay: 0ms;

	/* --- Capas -------------------------------------------------------------- */
	--pjv-z-header: 100;
	--pjv-z-menu: 200;
	--pjv-z-skip: 300;
}

/* Movimiento reducido: se respeta en todo el sitio, sin excepciones. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--pjv-t-fast: 1ms;
		--pjv-t-base: 1ms;
		--pjv-t-slow: 1ms;
	}
}