/* ============================================================================
   TOKENS — Fuente única de verdad del sistema de diseño.
   Todo el resto del CSS consume estas variables. Si querés cambiar la marca,
   se cambia acá y se propaga a toda la página.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     COLOR — Extraído del logo (ver README para el origen de cada uno)
     --------------------------------------------------------------------- */

  /* Cyan: el color de marca. Se usa con moderación, sólo donde querés que
     el ojo vaya. Si el cyan está en todos lados, deja de significar algo. */
  --brand-cyan:       #1CE7F2;  /* flecha + palabra "flow" */
  --brand-cyan-core:  #7DF6FF;  /* núcleo del haz: highlights y glow */
  --brand-cyan-deep:  #0C6C84;  /* trazos de circuito: cierre de gradientes */

  /* Navy: la base. Casi todo el sitio vive acá. */
  --brand-navy-iris:  #0A1E36;  /* cuerpo del ojo */
  --brand-navy-ink:   #081838;  /* wordmark "visio" */
  --brand-off-white:  #F7F9FB;  /* fondo del logo */

  /* Escala de superficies, de más profunda a más elevada.
     Regla: cuanto más "cerca" del usuario está un elemento, más clara la capa. */
  --surface-base:     #050B16;  /* fondo de la página */
  --surface-1:        #0A1424;  /* secciones alternas */
  --surface-2:        #132234;  /* cards sólidas */
  --surface-3:        #2A3B4E;  /* bordes fuertes, estados hover */

  /* Texto: tres niveles, no más. Más niveles = jerarquía confusa. */
  --text-primary:     #E8F1F7;
  --text-secondary:   #8FA3B8;
  --text-muted:       #5E7186;

  /* Glass — el glassmorphism se arma con estas tres variables.
     Blur moderado (14-20px): el blur exagerado envejece rápido y
     destruye el rendimiento en Android de gama media. */
  --glass-bg:         rgba(255, 255, 255, 0.040);
  --glass-bg-hover:   rgba(255, 255, 255, 0.065);
  --glass-border:     rgba(255, 255, 255, 0.095);
  --glass-blur:       16px;

  /* Bordes */
  --border-subtle:    rgba(255, 255, 255, 0.07);
  --border-cyan:      rgba(28, 231, 242, 0.28);

  /* Glow — el "neón" de la marca. Siempre derivado del cyan. */
  --glow-cyan-sm:     0 0 12px rgba(28, 231, 242, 0.35);
  --glow-cyan-md:     0 6px 24px rgba(28, 231, 242, 0.28);
  --glow-cyan-lg:     0 12px 48px rgba(28, 231, 242, 0.22);

  /* Gradientes reutilizables */
  /* El stop del cyan profundo va más allá del 100% a propósito: así aporta
     la caída de tono del logo sin que la última palabra de un titular
     quede tan oscura que pierda contraste. */
  --grad-brand:       linear-gradient(96deg, var(--brand-cyan-core) 0%, var(--brand-cyan) 50%, var(--brand-cyan-deep) 135%);
  --grad-btn:         linear-gradient(180deg, var(--brand-cyan) 0%, #0FBBD1 100%);

  /* ---------------------------------------------------------------------
     TIPOGRAFÍA
     --------------------------------------------------------------------- */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

  /* Escala fluida: crece con el viewport sin media queries.
     clamp(mínimo-mobile, escalado-viewport, máximo-desktop) */
  --fs-xs:   0.75rem;                              /* 12px  — etiquetas */
  --fs-sm:   0.875rem;                             /* 14px  — texto chico */
  --fs-base: 1rem;                                 /* 16px  — cuerpo */
  --fs-lg:   clamp(1.0625rem, 0.4vw + 0.97rem, 1.1875rem);
  --fs-xl:   clamp(1.25rem,  0.8vw + 1.06rem, 1.5rem);
  --fs-2xl:  clamp(1.625rem, 1.6vw + 1.25rem, 2.25rem);   /* h3 / h2 chico */
  --fs-3xl:  clamp(2rem,     3.2vw + 1.25rem, 3.25rem);   /* h2 de sección */
  --fs-hero: clamp(2rem,     3.6vw + 1.1rem, 3.75rem);    /* h1 */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --ls-tight: -0.025em;   /* titulares grandes necesitan tracking negativo */
  --ls-wide:   0.14em;    /* eyebrows en mayúsculas */

  /* ---------------------------------------------------------------------
     ESPACIADO — escala de 8px (con dos medios pasos para ajuste fino)
     --------------------------------------------------------------------- */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.5rem;    /* 24px */
  --sp-6:  2rem;      /* 32px */
  --sp-7:  3rem;      /* 48px */
  --sp-8:  4rem;      /* 64px */
  --sp-9:  6rem;      /* 96px */

  /* Ritmo vertical de las secciones: 72px en mobile, 120px en desktop */
  --section-y: clamp(4.5rem, 8vw, 7.5rem);

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --container:   1200px;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --header-h:    72px;

  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-full: 999px;

  /* ---------------------------------------------------------------------
     MOVIMIENTO
     --------------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);      /* entradas: rápido y frena */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);        /* hovers y transiciones */

  --dur-fast: 160ms;
  --dur-med:  300ms;
  --dur-slow: 620ms;

  --z-bg:      0;
  --z-content: 1;
  --z-header:  50;
  --z-overlay: 100;
}

/* Accesibilidad: si el sistema pide menos movimiento, apagamos las
   animaciones decorativas en un solo lugar en vez de en cada componente. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med:  1ms;
    --dur-slow: 1ms;
  }
}