/* ============================================================================
   tokens.css — Design tokens · ZONA VIRTUAL (submarca de GSS)
   Fuente: guía "Zona Virtual — Identidad Visual".

   REGLA DE ORO (invertida respecto a la marca madre): UN solo acento
   protagonista por pieza — el VERDE (logro / acción / certificado). El ROJO
   entra puntual SOLO para stakes (alta demanda, riesgo crítico). Nunca dos
   acentos peleando. Cargar SIEMPRE antes que el resto del CSS.
   ============================================================================ */

:root {
  /* -------------------------------------------------------------------------
     PALETA DE MARCA
     ------------------------------------------------------------------------- */
  --azul: #1C3984;          /* Ancla institucional: header, footer, fondos oscuros */
  --verde: #16A34A;         /* PROTAGONISTA: CTAs, progreso, "completado", certificado */
  --verde-inst: #187E0E;    /* Variante institucional del verde (amarra a la marca madre) */
  --rojo: #F42946;          /* SOLO stakes/urgencia puntual. Nunca CTA cotidiano */

  /* Lienzo oscuro derivado del azul (GSS-DARK) */
  --azul-900: #0E1A38;
  --azul-800: #142552;
  --azul-700: #1C3984;

  /* Variantes de interacción del verde (derivadas) */
  --verde-600: #15913F;
  --verde-700: #0F7A34;
  --verde-50:  #ECFDF3;
  --verde-100: #D1FADF;
  --rojo-700:  #C81E37;

  /* Neutros (guía) */
  --tinta:  #0F172A;        /* Texto fuerte */
  --gris:   #64748B;        /* Texto secundario */
  --linea:  #E2E8F0;        /* Bordes / separadores */
  --nube:   #F8FAFC;        /* Superficie clara — fondo "tienda" */
  --blanco: #FFFFFF;
  --gris-300: #CBD5E1;
  --gris-200: #EEF2F7;

  /* -------------------------------------------------------------------------
     COLOR SEMÁNTICO (usar estos en componentes, no los hex directos)
     ------------------------------------------------------------------------- */
  --color-bg:           var(--blanco);
  --color-bg-alt:       var(--nube);
  --color-superficie:   var(--blanco);
  --color-dark:         var(--azul-900);   /* GSS-DARK */

  --color-texto:        var(--tinta);
  --color-texto-suave:  var(--gris);
  --color-texto-inv:    var(--blanco);
  --color-texto-inv-suave: #C3CEE3;

  --color-marca:        var(--azul);
  --color-acento:       var(--verde);      /* el protagonista */
  --color-acento-hover: var(--verde-700);
  --color-acento-inst:  var(--verde-inst);
  --color-stakes:       var(--rojo);       /* puntual */
  --color-stakes-hover: var(--rojo-700);

  --color-borde:        var(--linea);
  --color-borde-fuerte: var(--gris-300);

  /* Overlay azul del hero sobre foto de campo con EPP (modo GSS-DARK) */
  --overlay-hero: linear-gradient(180deg,
                    rgba(14, 26, 56, 0.78) 0%,
                    rgba(14, 26, 56, 0.62) 45%,
                    rgba(14, 26, 56, 0.90) 100%);
  --overlay-dark: linear-gradient(180deg,
                    rgba(14, 26, 56, 0.92) 0%,
                    rgba(20, 37, 82, 0.88) 100%);

  /* -------------------------------------------------------------------------
     TIPOGRAFÍA (NO cambiar — Google Fonts self-hosted)
     Display: Plus Jakarta Sans 700/500 · Cuerpo/UI: Inter 400/500
     ------------------------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-cuerpo:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --peso-display: 700;
  --peso-medio:   500;
  --peso-cuerpo:  400;

  /* Escala fluida (clamp) */
  --fs-hero:    clamp(2.6rem, 1.6rem + 4.4vw, 3.5rem);   /* ~42–56px */
  --fs-h1:      clamp(2.25rem, 1.6rem + 2.6vw, 3rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --fs-h3:      clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-subtitulo: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-cuerpo:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-caption: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-apretado: 1.08;
  --lh-titulo:   1.16;
  --lh-cuerpo:   1.6;

  --tracking-eyebrow: 0.16em;
  --tracking-titulo: -0.01em;

  /* -------------------------------------------------------------------------
     ESPACIADO (aire deliberado — escala 8px)
     ------------------------------------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;     --space-10: 8rem;
  --seccion-py: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);

  /* -------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------- */
  --ancho-contenido: 1320px;   /* base: antes 1200px, dejaba mucho margen muerto */
  --ancho-amplio:    1500px;   /* rejillas: catalogo, rutas, resenas, ficha, carrito */
  --ancho-texto: 66ch;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --header-h: 72px;

  /* -------------------------------------------------------------------------
     RADIOS, SOMBRAS, BORDES
     ------------------------------------------------------------------------- */
  --radio-sm: 6px;  --radio: 12px;  --radio-lg: 18px;  --radio-pill: 999px;

  --sombra-sm: 0 1px 2px rgba(14,26,56,.06), 0 1px 3px rgba(14,26,56,.08);
  --sombra:    0 4px 14px rgba(14,26,56,.08), 0 2px 4px rgba(14,26,56,.06);
  --sombra-md: 0 12px 28px rgba(14,26,56,.12), 0 4px 8px rgba(14,26,56,.08);
  --sombra-lg: 0 24px 56px rgba(14,26,56,.18);
  --sombra-verde: 0 8px 24px rgba(22,163,74,.28);
  --grosor-acento: 4px;

  /* -------------------------------------------------------------------------
     MOVIMIENTO
     ------------------------------------------------------------------------- */
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-rapida: 150ms; --dur: 280ms; --dur-lenta: 520ms;

  --z-header: 1000; --z-sticky: 1050; --z-menu: 1200; --z-overlay: 1300;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur: 0ms; --dur-lenta: 0ms; }
}