/* =====================================================================
   Conecta tu Futuro — tokens de marca
   Fuente: MANUAL DE MARCA - CONECTA (35 pp.)

   Cambio de fondo respecto a la versión anterior del sitio: los titulares
   ya NO van en verde. El manual usa el azul noche para toda la jerarquía
   de texto y reserva el verde para acentos, botones y elementos gráficos.
   ===================================================================== */

:root {
  /* --- Paleta principal (manual, p. 13) ------------------------------ */
  --coral-conecta:  #EB5D70;
  --naranja-conecta:#FC7C3F;
  --verde-conecta:  #94C04D;   /* color insignia de la marca */
  --verde-bosque:   #209151;
  --azul-conecta:   #0E3B74;
  --azul-noche:     #232B42;   /* titulares y texto fuerte */

  /* --- Paleta secundaria (manual, p. 14) ---------------------------- */
  --amarillo-conecta: #FFBE2E;
  --celeste-conecta:  #71ACBD;
  --turquesa-conecta: #33BBC1;

  /* --- Variantes del verde ------------------------------------------
     El manual autoriza usar libremente variantes del mismo tono. */
  --verde-800: var(--verde-conecta);   /* alias: el sitio usa un solo verde */
  --verde-700: #7CA93B;
  --verde-600: var(--verde-conecta);
  --verde-300: #C4DC9D;
  --verde-200: #DDEBC5;
  --verde-100: #EFF6E4;

  /* --- Variantes del azul noche, para textos y bordes --------------- */
  --noche-900: var(--azul-noche);
  --noche-700: #3D4560;
  --noche-500: #5B6379;
  --noche-300: #98A0B4;
  --noche-200: #C8CDD9;
  --noche-100: #E7EAF0;

  /* --- Roles de texto -----------------------------------------------
     Dos tintas para la jerarquía:
       h1    → azul noche. Es el título de página y a ese peso manda la
               legibilidad.
       h2/h3 → el verde de marca. Decisión de marca por encima del umbral
               de contraste: #94C04D da 2.12:1 sobre blanco. Va siempre a
               tamaño de titular y acompañado del filete verde, que sostiene
               la jerarquía aunque el color se lea flojo. */
  --texto-titulo:  var(--azul-noche);
  --texto-seccion: var(--verde-conecta);
  --texto-cuerpo:  var(--noche-500);
  --texto-suave:   var(--noche-300);
  --base:          #FFFFFF;
  --contraste:     #111111;

  /* Fondo de página: crema cálido, para que el blanco de las tarjetas
     tenga contra qué levantarse. */
  --fondo:         #FBFAF3;
  --fondo-alterno: #F4F6F1;   /* bandas y zonas de descanso */

  /* --- Retrocompatibilidad ------------------------------------------
     Nombres que ya usaba el CSS del sitio, ahora apuntando a la paleta
     del manual para no tener que reescribir cada regla de golpe. */
  --gris-texto:  var(--texto-cuerpo);
  --gris-medio:  var(--texto-suave);
  --gris-linea:  var(--noche-200);
  --gris-suave:  var(--fondo-alterno);
  --azul-marino: var(--azul-noche);

  /* --- CTA del hero -------------------------------------------------- */
  --amarillo-cta:       var(--amarillo-conecta);
  --amarillo-cta-hover: #E0A828;
  --celeste-cta:        var(--celeste-conecta);
  --celeste-cta-hover:  #4F8B9E;

  /* --- Escala de postulantes del mapa -------------------------------
     Pedido explícito de marca: no cambiar. */
  --mapa-0:      #e5e5e5;
  --mapa-1:      #d2e9dc;
  --mapa-2:      #79bd97;
  --mapa-3:      #209151;
  --mapa-activo: #146238;
  --mapa-borde:  #333333;

  /* --- Estados ------------------------------------------------------- */
  --error:       #C4384A;
  --error-fondo: #FCEDEF;
  --exito:       var(--verde-bosque);
  --exito-fondo: #E8F5EE;
  --aviso:       #9A6200;
  --aviso-fondo: #FDF3E0;

  /* --- Tipografía (manual, pp. 18-20) -------------------------------
     Poppins  titulares (Bold 700 / Medium 500)
     Montserrat  cuerpo y subtítulos
     Lato  subtítulos y leyendas */
  --fuente-titulo:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-cuerpo:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-leyenda: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Formas y espaciado -------------------------------------------- */
  --radio-boton: 999px;
  --radio-caja:  14px;
  --radio-chip:  999px;
  --ancho-max:   1200px;
  --sombra-suave: 0 2px 12px rgba(35, 43, 66, .06);
  --sombra-panel: 0 12px 32px rgba(35, 43, 66, .14);
}