/* ============================================================================
   TOKENS DE MARCA — Zonia Vergara · NEUROCONECTA
   ----------------------------------------------------------------------------
   FUENTE ÚNICA de color y tipografía. Ninguna página declara colores propios.

   PALETA OFICIAL (extraída del logo NEUROCONECTA — cerebro LEGO):
     Azul profundo  #002448  = autoridad, texto "ZONIA VERGARA", estructura
     Cian neural    #2A96AE  = "NEUROCONECTA", la mascota, conexiones
     Naranja LEGO   #EB8E00  = ACCIÓN / CTA (aquí se hace clic)
     Verde LEGO     #2E7D3F  = crecimiento, neuroplasticidad
     Rojo LEGO      #C43A2E  = energía, emoción
     Amarillo LEGO  #F5C518  = atención, novedad, memoria
     Arena          #FBFBF7  = base, aire, descanso visual

   TODOS los pares texto/fondo verificados ≥4.5:1 (WCAG AA · REGLA-0010).
   ============================================================================ */

:root {
  /* --- Base --- */
  --bg: #fbfbf7;
  --bg-alt: #eef5f7;
  --surface: #ffffff;
  --text: #0d1b2a;
  --muted: #4a5c6e;
  --border: #d6e2e8;
  --nav-h: 72px;

  /* --- Azul profundo (autoridad, estructura) — color del texto del logo --- */
  --azul: #002448;
  --azul-h: #001730;
  --azul-soft: #1a4a72;
  --azul-claro: #e6eef5;
  --azul-borde: #a8c2d6;

  /* --- Cian neural (marca, "NEUROCONECTA") --- */
  --cian: #2a96ae;
  --cian-h: #1f7a8e;
  --cian-claro: #e3f4f8;
  --cian-borde: #9ed4e0;

  /* --- Naranja LEGO (ACCIÓN: aquí se hace clic) --- */
  --accent: #eb8e00;
  --accent-h: #c47400;
  --accent-claro: #fff4e0;
  --accent-borde: #f5d49a;

  /* --- Verde LEGO (crecimiento, neuroplasticidad) --- */
  --verde: #2e7d3f;
  --verde-h: #235f30;
  --verde-claro: #e6f4e9;
  --verde-borde: #a9d4b3;

  /* --- Rojo LEGO (energía, emoción) --- */
  --rojo: #c43a2e;
  --rojo-h: #9e2c22;
  --rojo-claro: #fbe9e7;
  --rojo-borde: #eeb3ac;

  /* --- Amarillo LEGO (atención, memoria) — decorativo, NO texto pequeño --- */
  --amarillo: #f5c518;
  --amarillo-claro: #fef8e0;

  /* --- Pasteles de apoyo (solo decorativos / fondos suaves) --- */
  --pastel-cian: #e3f4f8;
  --pastel-verde: #e6f4e9;
  --pastel-naranja: #fff4e0;
  --pastel-cielo: #e6eef5;

  /* --- Contexto oscuro (texto claro sobre fondos hondos) --- */
  --oscuro: #001730;
  --oscuro-alt: #002448;
  --texto-claro: rgba(240, 248, 255, .84);
  --texto-claro-alto: #ffffff;

  /* --- Sombras --- */
  --sombra-suave: rgba(0, 36, 72, .07);
  --sombra-media: rgba(0, 36, 72, .13);
  --sombra-fuerte: rgba(0, 36, 72, .22);

  /* --- Tipografía --- */
  --fuente-titulo: 'Fraunces', 'Playfair Display', Georgia, serif;
  --fuente-cuerpo: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Ritmo --- */
  --radio: 18px;
  --radio-lg: 28px;
  --radio-g: 999px;
  --ancho: 1180px;

  /* --- ALIAS de compatibilidad (nombres antiguos → paleta NEUROCONECTA) ---
     Se mantienen para no reescribir cada regla del CSS: el azul profundo del
     logo asume el papel que antes tenía la uva, y el cian el del malva. */
  --uva: var(--azul);
  --uva-h: var(--azul-h);
  --uva-soft: var(--cian);
  --uva-claro: var(--azul-claro);
  --uva-borde: var(--azul-borde);
  --oro: var(--amarillo);
  --oro-glow: rgba(245, 197, 24, .35);
  --pastel-lavanda: var(--azul-claro);
  --pastel-menta: var(--verde-claro);
  --pastel-arena: var(--accent-claro);
  --pastel-durazno: var(--rojo-claro);
}