/* Exacta — tokens de diseño
   Fuente única de colores, tipografías y medidas del sitio.
   Los valores salen de la maqueta aprobada (maqueta/*.html). */

@font-face {
  font-family: "Archivo";
  src: url("fuentes/Archivo-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fuentes/Newsreader-VF.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Color */
  --ex-tinta: #121417;          /* texto principal, cabecera, pie */
  --ex-papel: #F6F5F1;          /* fondo del sitio */
  --ex-blanco: #FFFFFF;
  --ex-rojo: #E23D28;           /* acento de marca: trazo del logo, marcas, números del ranking */
  --ex-rojo-texto: #B8321F;     /* rojo para texto chico sobre papel (contraste AA) */
  --ex-rojo-franja: #C8311E;    /* fondos rojos con texto blanco encima (contraste AA) */
  --ex-rojo-claro: #F0806F;     /* rojo sobre fondo tinta */
  --ex-texto-2: #33363B;        /* bajadas, texto secundario */
  --ex-texto-3: #5A5D63;        /* metadatos */
  --ex-gris-hecho: #A9A69D;     /* "afirmado por una sola parte" en el estado de los hechos */
  --ex-linea: #E2E0DA;          /* separadores finos */
  --ex-linea-2: #D6D3CB;
  --ex-superficie: #ECEAE4;     /* bloques destacados, franja de banners */
  --ex-tinta-2: #24272D;        /* superficies sobre tinta */
  --ex-linea-oscura: #33363B;   /* separadores sobre tinta */

  /* Tipografía */
  --ex-sans: "Archivo", system-ui, sans-serif;        /* titulares, interfaz, metadatos */
  --ex-serif: "Newsreader", Georgia, serif;           /* bajadas y cuerpo de nota */
  --ex-ancho-rotulo: 125%;                            /* font-stretch de rótulos de sección */

  /* Escala (escritorio) */
  --ex-h1-portada: 50px;
  --ex-h1-nota: 50px;
  --ex-h2: 28px;
  --ex-titulo-tarjeta: 25px;
  --ex-titulo-lista: 17px;
  --ex-bajada: 22px;
  --ex-cuerpo: 20px;           /* cuerpo de nota, line-height 1.6 */
  --ex-meta: 13px;
  --ex-rotulo: 12px;           /* mayúsculas, tracking .1em, ancho 125% */

  /* Retícula */
  --ex-ancho-pagina: 1440px;
  --ex-margen: 80px;           /* 16px en móvil */
  --ex-contenido: 1280px;
  --ex-columna-principal: 848px;
  --ex-columna-lateral: 400px; /* ancho pensado para banners de 400 × 400 */
  --ex-gutter: 32px;
}