/* ==========================================================================
   IncubArte — Design Tokens
   Fuente de verdad: "IncubArte - Brand Guide Style V.01" (14 junio 2024)
   ========================================================================== */

:root {
  /* --- Cromática oficial de marca --------------------------------------- */
  --rosa: #fc54a0;          /* R252 G84  B160 */
  --verde: #00ef7d;         /* R0   G239 B125 */
  --azul: #6ae5e1;          /* R106 G229 B225 */
  --negro: #000000;         /* sólo filtro de video + barra de menú */
  --blanco: #ffffff;

  /* Variantes de apoyo (derivadas, no sustituyen a las oficiales).
     Se usan para estados hover sobre superficies de color. */
  --rosa-oscuro: #e23d8a;
  --verde-oscuro: #00c468;
  --azul-oscuro: #3fcfca;

  /* Variantes para TEXTO sobre fondo claro.
     Los colores de marca puros no alcanzan 4.5:1 sobre blanco (rosa 3.04,
     verde 2.31, azul 1.91). Estas conservan el matiz y cumplen WCAG AA.
     El color de marca puro se mantiene intacto en fondos, rellenos y bordes. */
  --rosa-texto: #c7427f;   /* 4.65:1 sobre blanco */
  --verde-texto: #008646;  /* 4.67:1 sobre blanco */
  --azul-texto: #3c817f;   /* 4.53:1 sobre blanco */
  --gris-texto: #1a1a1a;
  --gris-suave: #f4f4f4;
  --gris-borde: #e0e0e0;

  /* --- Superficies -------------------------------------------------------- */
  --surface: var(--blanco);
  --surface-alt: var(--gris-suave);
  --text: var(--gris-texto);
  --text-invert: var(--blanco);

  /* --- Tipografía --------------------------------------------------------- */
  --font-sans: 'FK Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'FK Grotesk Mono', ui-monospace, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Escala fluida */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.37vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --text-hero: clamp(2.75rem, 1.5rem + 5.5vw, 7rem);
  --text-counter: clamp(2.25rem, 1.2rem + 4vw, 4.5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* --- Espaciado ---------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-section: clamp(3.5rem, 2.5rem + 4.5vw, 7.5rem);

  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 3rem);

  /* --- Alturas de barra ---------------------------------------------------- */
  --nav-height: 86px;
  --nav-height-mobile: 68px;

  /* --- Radios ------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Sombras ------------------------------------------------------------ */
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --shadow-md: 0 6px 20px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.16);

  /* --- Movimiento --------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Velocidad del carrusel de patrocinadores */
  --marquee-duration: 48s;

  /* --- Capas (escala fija) ------------------------------------------------- */
  --z-base: 1;
  --z-social: 20;
  --z-nav: 30;
  --z-dropdown: 40;
  --z-overlay: 50;
}

/* Tipografía de marca — FK Grotesk */
@font-face {
  font-family: 'FK Grotesk';
  src: url('../fonts/FKGrotesk-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FK Grotesk';
  src: url('../fonts/FKGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FK Grotesk';
  src: url('../fonts/FKGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FK Grotesk';
  src: url('../fonts/FKGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}