/* ==========================================================================
   Crear: base (fuentes, tokens, reinicio y tipografía)
   ========================================================================== */

/* Archivo variable (ejes wght 100–900 y wdth 62–125), SIL OFL 1.1. */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	src: url("../fonts/archivo-latin-wdth.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	src: url("../fonts/archivo-latin-ext-wdth.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Respaldo métrico mientras llega Archivo (font-display: swap): Arial local
 * escalado al ancho medio de Archivo para que el cambio de fuente no mueva
 * el texto (CLS). Valores medidos con fontTools y ajustados en el navegador (±1 %) sobre texto en español:
 * texto wdth 100 contra Arial; títulos wdth 68 / 800 contra Arial Narrow Bold.
 */
@font-face {
	font-family: "Archivo Fallback";
	font-weight: 100 599;
	font-stretch: 85% 200%;
	src: local("Arial"), local("ArialMT");
	size-adjust: 98.9%;
	ascent-override: 88.8%;
	descent-override: 21.2%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Fallback";
	font-weight: 600 1000;
	font-stretch: 85% 200%;
	src: local("Arial Bold"), local("Arial-BoldMT");
	size-adjust: 99.1%;
	ascent-override: 88.6%;
	descent-override: 21.2%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Fallback";
	font-weight: 100 599;
	font-stretch: 50% 84%;
	src: local("Arial Narrow"), local("ArialNarrow");
	size-adjust: 88.6%;
	ascent-override: 99.1%;
	descent-override: 23.7%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Fallback";
	font-weight: 600 1000;
	font-stretch: 50% 84%;
	src: local("Arial Narrow Bold"), local("ArialNarrow-Bold");
	size-adjust: 92.2%;
	ascent-override: 95.2%;
	descent-override: 22.8%;
	line-gap-override: 0%;
}

/*
 * Android no trae Arial: el respaldo equivalente es Roboto (y Roboto
 * Condensed para los títulos). Noto Sans cubre Linux y otros sistemas.
 * Cada fuente local tiene su propia familia porque size-adjust vale para
 * todo el @font-face; si local() no encuentra la fuente, el navegador pasa
 * a la siguiente familia de --font. Valores medidos en el navegador contra
 * Archivo sobre texto del sitio (archivos de @fontsource, solo para medir).
 */
@font-face {
	font-family: "Archivo Fallback Roboto";
	font-weight: 100 599;
	font-stretch: 85% 200%;
	src: local("Roboto"), local("Roboto-Regular");
	size-adjust: 98.9%;
	ascent-override: 88.8%;
	descent-override: 21.2%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Fallback Roboto";
	font-weight: 600 1000;
	font-stretch: 85% 200%;
	src: local("Roboto Bold"), local("Roboto-Bold");
	size-adjust: 104.8%;
	ascent-override: 83.8%;
	descent-override: 20%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Fallback Roboto";
	font-weight: 100 599;
	font-stretch: 50% 84%;
	src: local("Roboto Condensed"), local("RobotoCondensed-Regular");
	size-adjust: 81.8%;
	ascent-override: 107.3%;
	descent-override: 25.7%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Fallback Roboto";
	font-weight: 600 1000;
	font-stretch: 50% 84%;
	src: local("Roboto Condensed Bold"), local("RobotoCondensed-Bold");
	size-adjust: 89.5%;
	ascent-override: 98.1%;
	descent-override: 23.5%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Fallback Noto";
	font-weight: 100 599;
	src: local("Noto Sans"), local("NotoSans-Regular");
	size-adjust: 94.1%;
	ascent-override: 93.3%;
	descent-override: 22.3%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Fallback Noto";
	font-weight: 600 1000;
	src: local("Noto Sans Bold"), local("NotoSans-Bold");
	size-adjust: 94.8%;
	ascent-override: 92.6%;
	descent-override: 22.1%;
	line-gap-override: 0%;
}

:root {
	/* Paleta */
	--azul: #1F3C88;
	--acero: #4C77AD;
	--amarillo: #FFDE59;
	--tinta: #14213D;
	--nube: #EEF3F9;
	--blanco: #FFFFFF;
	--gris: #5A6782;

	/* Derivados (líneas y estados) */
	--azul-hondo: #182F6B;
	--linea: #E3E9F2;
	--linea-fuerte: #D5DEEC;
	--pie-texto: #C9D3E6;
	--pie-tenue: #9FADC7;

	/* Marca */
	--sk: -20deg;

	/* Radios: controles y paneles */
	--r-ctl: 6px;
	--r-panel: 8px;
	--sombra-panel: 0 24px 60px rgba(20, 33, 61, .28);

	/* Tipografía */
	--font: "Archivo", "Archivo Fallback", "Archivo Fallback Roboto", "Archivo Fallback Noto", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fs--2: .78125rem;  /* 12.5 */
	--fs--1: .875rem;    /* 14 */
	--fs-0: 1rem;        /* 16 */
	--fs-1: 1.125rem;    /* 18 */
	--fs-2: 1.5rem;      /* 24 */
	--fs-3: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	--fs-4: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);
	--fs-5: clamp(2.875rem, 1.6rem + 4.6vw, 5.125rem);

	/* Medidas */
	--wrap: 1240px;
	--gutter: clamp(16px, 4vw, 32px);
	--medida: 68ch;

	/* Foco */
	--focus: var(--azul);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--blanco);
	color: var(--tinta);
	font-family: var(--font);
	font-size: var(--fs-0);
	font-stretch: 100%;
	font-weight: 400;
	line-height: 1.55;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

img {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

h1,
h2,
h3 {
	margin: 0;
	font-stretch: 68%;
	font-weight: 800;
	line-height: .95;
	text-wrap: balance;
}

h4,
h5,
h6 {
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: var(--azul);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* Títulos condensados fuera de h1–h3 */
.cnd {
	font-stretch: 68%;
	font-weight: 800;
}

.num,
time,
output {
	font-variant-numeric: tabular-nums;
}

/* Foco visible en todo el sitio. Sobre superficies oscuras se usa amarillo. */
:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

main:focus {
	outline: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--tinta);
	color: var(--blanco);
	font-weight: 700;
	border-radius: var(--r-ctl);
	text-decoration: none;
	transform: translateY(-160%);
}

.skip-link:focus {
	transform: none;
	--focus: var(--amarillo);
}

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