/* ============================================================
   INNOVAL · TOKENS.CSS
   Fuente única: Manual de Identidad Gráfica Innoval, Versión 2026 (PDF)
   Solo los 8 colores del manual son oficiales. Todo lo demás es derivado.
   No agregar HEX nuevos a los principales. Para neutros, usar rgba()
   sobre los oficiales.
   ============================================================ */

:root {

  /* ============================================================
     COLORES PRINCIPALES (5) · Manual V2026 página 9
     ============================================================ */
  --purple-deep:   #4e107a;   /* Pantone 2607 C · 78/16/122  · CMYK 88/100/16/4 */
  --purple-main:   #5d279e;   /* Pantone 267 C  · 93/39/158  · CMYK 81/90/0/0   */
  --purple-mid:    #743dbc;   /* Pantone 266 C  · 116/61/188 · CMYK 74/81/0/0   */
  --orange:        #ff9119;   /* Pantone 1495 C · 255/145/25 · CMYK 0/52/90/0   */
  --blue-pale:     #d5e4f3;   /* Pantone 9400 U · 213/228/243 · CMYK 20/6/2/0   */

  /* ============================================================
     COLORES SECUNDARIOS (3) · Manual V2026 página 10
     ============================================================ */
  --purple-soft:   #9e60b5;   /* Pantone 2583 C · 158/96/181 · CMYK 48/70/0/0   */
  --slate:         #4b5a7b;   /* Pantone 654 U  · 75/90/123  · CMYK 77/60/31/16 */
  --orange-light:  #ffa952;   /* Pantone 150 C  · 255/169/82 · CMYK 0/40/75/0   */

  /* ============================================================
     ESCALAS NEUTRAS · Derivadas de los oficiales con rgba()
     No son colores nuevos: son los oficiales con transparencia
     ============================================================ */
  --white:           #FFFFFF;
  --black:           #000000;

  /* Fondos */
  --bg:              var(--white);                       /* fondo principal de página */
  --bg-soft:         rgba(116, 61, 188, 0.04);           /* fondo alternado (purple-mid 4%) */
  --bg-muted:        rgba(116, 61, 188, 0.08);           /* fondo de tarjeta destacada */
  --surface-dark:    var(--purple-deep);                 /* fondo oscuro entero */
  --surface-darker:  #2c0848;                            /* gradiente con purple-deep */

  /* Texto */
  --text:            var(--purple-deep);                 /* texto principal sobre claro */
  --text-2:          var(--slate);                       /* texto secundario (slate oficial) */
  --text-3:          var(--purple-soft);                 /* texto terciario (purple-soft oficial) */
  --text-onDark:     rgba(255, 255, 255, 0.92);
  --text-onDark-2:   rgba(255, 255, 255, 0.68);
  --text-onDark-3:   rgba(255, 255, 255, 0.4);

  /* Bordes */
  --rule:            rgba(116, 61, 188, 0.18);           /* borde sutil */
  --rule-strong:     rgba(78, 16, 122, 0.35);            /* borde fuerte */
  --rule-onDark:     rgba(255, 255, 255, 0.12);

  /* Sombras */
  --shadow-sm:       0 1px 3px rgba(78, 16, 122, 0.08);
  --shadow-md:       0 2px 20px rgba(78, 16, 122, 0.10);
  --shadow-lg:       0 10px 28px rgba(78, 16, 122, 0.16);
  --shadow-xl:       0 24px 64px rgba(78, 16, 122, 0.20);
  --shadow-focus:    0 0 0 3px rgba(255, 145, 25, 0.5);  /* ring naranja para focus */

  /* ============================================================
     TIPOGRAFÍA · Manual V2026 páginas 11 y 12
     PRINCIPAL: Roboto (cuerpo, navegación, captions, leads). 400/500/700
     SECUNDARIA: Poppins (display, headlines, eyebrows). 600/700/800/900
     DOCUMENTAL: Helvetica (informes impresos, no para web)
     ============================================================ */
  --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala tipográfica · clamp para fluid type */
  --text-2xs:  0.6875rem;   /* 11 px */
  --text-xs:   0.75rem;     /* 12 px */
  --text-sm:   0.875rem;    /* 14 px */
  --text-base: 1rem;        /* 16 px */
  --text-md:   1.125rem;    /* 18 px */
  --text-lg:   1.25rem;     /* 20 px */
  --text-xl:   1.5rem;      /* 24 px */
  --text-2xl:  1.875rem;    /* 30 px */
  --text-3xl:  clamp(1.5rem, 3.4vw, 2.4rem);             /* H2 oficial */
  --text-4xl:  clamp(2rem, 4vw, 4.4rem);                 /* H1 oficial */
  --text-5xl:  clamp(3.5rem, 8vw, 14rem);                /* Display Poppins Black */

  /* Pesos */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  /* Line height */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-base:   1.55;
  --lh-loose:  1.7;

  /* Tracking */
  --track-tight:  -0.025em;
  --track-base:   0;
  --track-wide:   0.02em;
  --track-eyebrow: 0.14em;  /* eyebrow oficial */

  /* ============================================================
     SPACING · Escala 4pt
     ============================================================ */
  --sp-1:  0.25rem;  /* 4  */
  --sp-2:  0.5rem;   /* 8  */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.25rem;  /* 20 */
  --sp-6:  1.5rem;   /* 24 */
  --sp-8:  2rem;     /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */
  --sp-20: 5rem;     /* 80 */
  --sp-24: 6rem;     /* 96 */

  /* ============================================================
     RADIUS · Institucional, no consumer
     ============================================================ */
  --r-1:   3px;
  --r-2:   4px;
  --r-3:   6px;
  --r-4:   8px;
  --r-5:   12px;
  --r-pill: 999px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:      120ms;
  --d-base:      180ms;
  --d-slow:      280ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --wrap:        1120px;
  --wrap-narrow: 860px;
  --maxw-prose:  64ch;
  --hdr-h:       68px;
  --stickycta-h: 72px;

  /* ============================================================
     ALIASES INTERNOS · Compatibilidad con _base.css legado
     Los nombres viejos (--indigo, --cream, --ink, --muted) no son
     colores oficiales. Aquí se mapean al PDF para que las páginas
     antiguas sigan funcionando, pero NO usar estos nombres en código
     nuevo. Usar los oficiales o las escalas neutras.
     ============================================================ */
  --indigo:        var(--purple-deep);
  --cream:         var(--bg-soft);
  --purple-light:  var(--bg-muted);
  --ink:           var(--purple-deep);
  --muted:         var(--slate);
  --blue:          var(--blue-pale);
  --orange-d:      var(--orange-light);
  --text-dark:     var(--purple-deep);
  --text-mid:      var(--slate);

}

/* ============================================================
   RESPETO PREFERENCIAS DEL SISTEMA
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   RESET BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Headings · Poppins secundaria, excepto H3 que es Roboto Bold */
h1, h2, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--text);
}
h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text);
}

/* Display escala oficial */
.display { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-5xl); line-height: 1; letter-spacing: -0.04em; color: var(--purple-deep); }
.display em { font-style: normal; color: var(--orange); }

h1, .h1 { font-size: var(--text-4xl); font-weight: var(--fw-extra); }
h2, .h2 { font-size: var(--text-3xl); font-weight: var(--fw-bold); }

/* Numerals tabulares para datos */
.num, [data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Focus visible global · ring naranja oficial */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-2);
}

/* Skip link accesibilidad */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--orange); color: var(--purple-deep);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  z-index: 100;
  transition: top var(--d-base) var(--ease);
}
.skip-link:focus { top: 0; }

/* Screen reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}