/* Tokens de diseno v0 (ver DESIGN.md). La identidad definitiva vendra del
   disenador: cambiar aqui, no en los componentes. */
:root {
  /* El sitio tiene un solo tema, el claro. Sin esta linea, Chrome en Android
     decide que una pagina que no dice nada sobre el tema es candidata a su
     inversion automatica (Auto Dark Theme) y la pinta oscura con colores
     inventados: el fondo se ennegrece y la paleta de la marca se desfigura.
     "only light" es la forma de decir que no hay version oscura que valga y
     que el navegador no debe fabricarla. */
  color-scheme: only light;

  /* Paleta (extraida del borrador del logo FBL) */
  --azul-noche: #2D3051;
  --azul-profundo: #3C3C6C;
  --azul-medio: #3C5484;
  --azul-acero: #54849C;
  --cian: #77CED7;
  --verde-bodhi: #84B49C;
  --dorado: #D2C193;
  --dorado-tinta: #8A7743;
  --ocre-monastico: #B36F24;

  /* El fondo crema que pedía G10 se probó el 12-ago y se revirtió el mismo día:
     Grego lo vio en pantalla y no funcionó ("horrible para la web"). El crema
     del diseñador está pensado para papel y para el logo, no para 1.400px de
     fondo iluminado. La paleta del diseñador sí se quedó donde cuenta: en la
     escala del mapa, que es lo que Bhante señalaba. */
  --fondo: #F5F9FA;
  --superficie: #FFFFFF;
  --linea: #E2EAEE;
  --tinta-suave: #5C6B85;

  /* Escala del mapa de calor: cuatro escalones que caminan del turquesa del
     logo (#77CED7) al azul marino (#2D3051), con 16 puntos de L* exactos
     entre cada uno. El espaciado parejo es lo que arregló F16; la familia es
     lo que pidió G10. Están aquí y no en styles.css para que el mock de los
     recuadros use exactamente los mismos. */
  --mapa-1: #BEEAF1;  /* L* 90 */
  --mapa-2: #7AC0D9;  /* L* 74 */
  --mapa-3: #5F91B5;  /* L* 58 */
  --mapa-4: #4D6489;  /* L* 42 */
  /* Los países sin comunidades tienen que seguir leyéndose: el mapa muestra
     la región entera, no solo donde ya hay red. Un poco más oscuro que el
     fondo, lo justo para que el contorno de Latinoamérica se cierre. */
  --mapa-vacio: #E4EAEE;

  /* Colores medidos del logo v2 que entregó el diseñador (12-ago). Se usan en
     los acentos de marca: el título del hero y la barra de las tarjetas. El
     resto de la paleta sigue igual, que fue la lección del fondo crema. */
  --marca-azul: #002580;
  --marca-turquesa: #04C1D9;
  /* Los dos claros salen de la lámina de aplicaciones, leídos de la imagen y
     no medidos de un archivo: falta que el diseñador confirme los valores. */
  --marca-turquesa-claro: #7ACFCB;
  --marca-menta: #A9DCC7;
  /* El crema de la lámina, donde el diseñador presenta el logotipo principal.
     No es el fondo de todo el sitio (eso se probó y se descartó): es un color
     de bloque, para un hero o una sección. */
  --marca-crema: #F5F1E5;
  --gradiente-marca: linear-gradient(135deg, var(--marca-azul), #1E6DA8 52%, var(--marca-turquesa));

  /* Colores por pais (rotacion dentro de la familia) */
  --pais-1: #3C5484; --pais-2: #6FA28F; --pais-3: #54849C;
  --pais-4: #8A7743; --pais-5: #3C3C6C; --pais-6: #4BA6B0;
  --pais-7: #7A8FB5; --pais-8: #5F9E7B; --pais-9: #9C8054;
  --pais-10: #486B93; --pais-11: #6B5E9C;

  /* Tipografia */
  /* Montserrat es la geométrica del logotipo, o la más cercana en Google
     Fonts: misma O circular, misma pierna recta en la R, mismas proporciones
     anchas. Los títulos hablan con la voz de la marca.
     El cuerpo sigue en Source Sans porque Montserrat en párrafos largos cansa:
     su altura de x es alta y las letras muy abiertas piden más interlínea de
     la que un texto denso puede permitirse. */
  --font-titulo: "Montserrat", "Source Sans 3", system-ui, sans-serif;
  --font-texto: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
  /* Montserrat bold es bastante más ancha que la serif anterior: con los
     mismos cuerpos, el titular del hero pasaba de dos líneas a tres. */
  --fs-hero: clamp(1.85rem, 4.3vw, 2.85rem);
  --fs-h2: clamp(1.4rem, 2.7vw, 1.95rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* Espaciado (escala de 4) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px;
  --sp-9: 64px; --sp-10: 72px; --sp-11: 88px; --sp-12: 96px;

  /* Radios y sombras */
  --r-s: 8px; --r-m: 14px; --r-full: 999px;
  --sombra-1: 0 1px 3px rgb(45 48 81 / 0.06), 0 4px 14px rgb(45 48 81 / 0.05);
  --sombra-2: 0 2px 6px rgb(45 48 81 / 0.08), 0 12px 32px rgb(45 48 81 / 0.10);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-rapido: 150ms;
  --t-medio: 280ms;
  --t-lento: 550ms;

  --ancho-max: 1120px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-rapido: 1ms; --t-medio: 1ms; --t-lento: 1ms; }
}