/* =========================================================================
   1-tokens.css — el vocabulario del sitio
   -------------------------------------------------------------------------
   QUÉ ES UN "TOKEN"
   Un valor con nombre. En vez de escribir #f8ae15 en cuarenta lugares,
   se escribe una vez aquí con el nombre --cc-amarillo y en el resto del
   sitio se usa var(--cc-amarillo).

   POR QUÉ IMPORTA
   El día que el amarillo cambie, se cambia AQUÍ y cambia en todo el sitio.
   Si estuviera escrito a mano en cada archivo, habría que cazarlo uno por uno
   y siempre se escapa alguno.

   POR QUÉ ES EL PRIMER ARCHIVO QUE SE CARGA
   Los otros dos CSS usan estas variables. Si este llegara después, durante un
   instante el navegador no sabría qué es var(--cc-amarillo).

   Los colores y la tipografía salen de MANUAL-IDENTIDAD-CC.pdf.
   TEMA CLARO ÚNICO. Decisión deliberada: el sitio es de espacio público y la
   audiencia incluye personas adultas. No hay modo oscuro.
   ========================================================================= */

:root{
  /* --- Marca. No modificar: vienen del manual de identidad --- */
  --cc-amarillo:#f8ae15;
  --cc-rojo:#e74228;
  --cc-azul:#115c90;
  --cc-verde:#61bca8;
  --cc-durazno:#fac196;
  --cc-lila:#bcc9e9;
  --cc-rosa:#f0739f;
  --cc-olivo:#99b048;

  /* --- Derivados accesibles. Solo para TEXTO y BOTONES ---
     #e74228 sobre blanco da 4.03:1 y reprueba WCAG AA (mínimo 4.5:1).
     #d53d25 da 4.64:1 y sí cumple. El rojo de marca se conserva intacto
     para superficies, gráficos y logo. */
  --cc-rojo-accion:#d53d25;   /* 4.64:1 sobre blanco */
  --cc-azul-profundo:#0e4a73; /* 9.35:1 con texto blanco */

  /* --- Neutros. Sesgo frío hacia el azul institucional --- */
  --papel:#ffffff;
  --papel-2:#f1f5f8;
  --papel-3:#fdf4e3;          /* tinte cálido para la franja de cifras */
  --tinta:#10202b;
  --tinta-70:#3f596b;
  --tinta-50:#6a8497;
  --linea:#d8e2ea;
  --linea-fuerte:#b9c9d6;

  /* --- Semánticos --- */
  --color-accion:var(--cc-rojo-accion);
  --color-institucion:var(--cc-azul);

  /* --- Medidas --- */
  --max:1200px;
  --lectura:62ch;
  --radio:6px;
  --sombra:0 1px 2px rgba(16,32,43,.06), 0 12px 32px -18px rgba(16,32,43,.35);

  /* --- Escala tipográfica fluida ---
     clamp(mínimo, ideal, máximo): el tamaño crece con el ancho de la pantalla
     pero nunca baja del mínimo ni pasa del máximo. Por eso no hacen falta
     media queries para el texto.
     Base de 18px: la audiencia incluye personas adultas y el sitio se lee
     mayoritariamente en celular. */
  --t--1:clamp(.94rem,.92rem + .1vw,1rem);
  --t-0:clamp(1.06rem,1.02rem + .2vw,1.16rem);
  --t-1:clamp(1.25rem,1.16rem + .42vw,1.5rem);
  --t-2:clamp(1.5rem,1.32rem + .85vw,2rem);
  --t-3:clamp(1.85rem,1.5rem + 1.6vw,2.85rem);
  --t-4:clamp(2.3rem,1.7rem + 2.8vw,4rem);
  --t-5:clamp(2.8rem,1.8rem + 4.6vw,5.4rem);

  /* --- Espacio, múltiplos de 8 --- */
  --e-1:.5rem; --e-2:1rem; --e-3:1.5rem; --e-4:2rem;
  --e-5:3rem; --e-6:4rem; --e-7:6rem; --e-8:8rem;

  /* --- Movimiento --- */
  --micro:120ms;
  --transicion:280ms;
  --curva:cubic-bezier(.2,.8,.2,1);
}