/* ============================================================
   ALCOM — Sistema de diseño (tokens)
   Fase 1 · Paleta "agua fresca": blanco, azul profundo y cyan
   ============================================================ */

:root {
  /* --- Color de marca --- */
  --azul-profundo: #0E3354;   /* Navy: titulares, header, footer */
  --azul:          #1E73BE;   /* Azul medio: botones, enlaces */
  --cyan:          #1FBFD9;   /* Turquesa: acentos y resaltados */
  --celeste:       #EAF6FA;   /* Celeste claro: fondos suaves */
  --grad-marca:     linear-gradient(120deg, var(--azul) 0%, var(--cyan) 100%);
  --grad-marca-rev: linear-gradient(120deg, var(--cyan) 0%, var(--azul) 100%);

  /* Alias de compatibilidad (páginas de la Fase 0 / lab) */
  --morado:      var(--cyan);
  --azul-oscuro: var(--azul-profundo);
  --lavanda:     var(--celeste);

  /* --- Neutros --- */
  --blanco:   #FFFFFF;
  --tinta:    #15252F;
  --tinta-70: #46555F;
  --tinta-45: #8A97A0;
  --linea:    #E2E8EC;

  /* --- Superficies --- */
  --fondo: #F2F2F2;
  --fondo-alt:    var(--celeste);
  --fondo-oscuro: var(--azul-profundo);

  /* --- Acentos por línea de negocio --- */
  --acento-saludables: #2BB673;
  --acento-gaseosas:   #F2622E;
  --acento-maquila:    var(--azul);
  --acento-eventos:    var(--cyan);
  --acento-soda:       #00A8C6;

  /* --- Tipografía --- */
  --font-display: 'Outfit', 'Segoe UI', sans-serif;
  --font-texto:   'Inter', 'Segoe UI', sans-serif;
  --fs-display: clamp(2.75rem, 7vw, 6rem);
  --fs-h1:      clamp(2rem, 4.5vw, 3.6rem);
  --fs-h2:      clamp(1.6rem, 3vw, 2.6rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --fs-cuerpo:  1.0625rem;
  --fs-peq:     0.875rem;
  --fs-micro:   0.75rem;
  --peso-regular: 400; --peso-medio: 500; --peso-semi: 600; --peso-bold: 700;
  --interlinea-titulo: 1.08;
  --interlinea-texto:  1.65;
  --tracking-titulo: -0.02em;
  --tracking-mayus:   0.14em;

  /* --- Espaciado --- */
  --esp-1: 0.5rem; --esp-2: 1rem; --esp-3: 1.5rem;
  --esp-4: 2.5rem; --esp-5: 4rem; --esp-6: 7rem; --esp-7: 11rem;

  /* --- Radios --- */
  --radio-s: 10px; --radio-m: 18px; --radio-l: 32px; --radio-full: 999px;

  /* --- Sombras --- */
  --sombra-s: 0 2px 10px rgba(14, 51, 84, 0.07);
  --sombra-m: 0 14px 44px rgba(14, 51, 84, 0.12);
  --sombra-l: 0 30px 80px rgba(14, 51, 84, 0.18);
  --sombra-marca: 0 18px 46px rgba(31, 115, 190, 0.30);

  /* --- Movimiento --- */
  --ease-suave: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-marca: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-rapida: 0.25s; --dur-media: 0.55s; --dur-lenta: 0.9s;

  /* --- Layout --- */
  --ancho-max: 1200px;
  --ancho-texto: 680px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --header-alto: 76px;
  --z-header: 100;
  --z-preloader: 200;
}

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

/* --- Ajustes para móvil --- */
@media (max-width: 600px) {
  :root {
    --fs-display: clamp(2.1rem, 9.5vw, 3.4rem);
    --fs-h1: clamp(1.8rem, 7vw, 2.6rem);
    --fs-h2: clamp(1.45rem, 5.5vw, 2.1rem);
    --esp-6: 4.5rem;
    --esp-5: 3rem;
    --header-alto: 64px;
  }
}