/* ============================================================
   EDUCREIA · Design System — Capa 1 · Tokens
   ------------------------------------------------------------
   Colores de marca, tipografías, escala, spacing, radios,
   sombras y motion. Es la base de las 3 capas
   (colors_and_type.css → ui.css → app.css). Ver DESIGN.md.

   Dirección visual: tecnológico y moderno. Navy estructura,
   teal acento, neutros SIEMPRE fríos (teñidos de navy, nunca
   gris puro ni negro). Proporción ~70% neutros / 20% navy /
   10% teal.

   Nota de migración (2026-08-20): esta capa reemplazó al viejo
   sistema PAME (azul/naranja/Montserrat). Los nombres `--pame-*`,
   `--fg-*` y `--bg-*` se conservan como ALIAS remapeados a la
   paleta Educreia para que `ui.css`/`app.css` sigan funcionando
   sin tocar cada regla. Las pantallas nuevas usan los nombres
   canónicos (`--navy-*`, `--teal-*`, `--slate-*`, `--text-*`,
   `--surface-*`).
   ============================================================ */

/* ── Nunito, autohospedada ──────────────────────────────────────────────────
   El sistema tipográfico es Nunito (humanista, terminaciones redondeadas: el
   match multi-peso más cercano a Mandali, que queda reservada al logo). Igual
   que Montserrat antes, los .woff2 viven en app/fonts/ y se piden en paralelo:
   nada de @import ni fuentes de Google en runtime (ver REGLAS.md §2).

   Archivo variable (un solo peso 400–800 para toda la escala). Solo subsets
   latin y latin-ext: la plataforma es en castellano. `font-display:swap` = el
   texto se ve enseguida con la del sistema y se recambia al llegar Nunito. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── JetBrains Mono, autohospedada ──────────────────────────────────────────
   Solo para datos: duraciones (mm:ss), montos, porcentajes, URLs, tokens.
   Nunca para prosa. Archivo variable 400–700, subset latin. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ============================================================
     PALETA EDUCREIA — nombres canónicos
     ============================================================ */

  /* ---- Navy · estructura (texto, sidebar, acción primaria) ----
     Núcleo de marca: --navy-700 (#163E64, sale del logo). */
  --navy-050: #EEF3F9;
  --navy-100: #D9E3EF;
  --navy-200: #B0C6DB;
  --navy-300: #7DA0C2;
  --navy-400: #4C7CAA;
  --navy-500: #2A6094;
  --navy-600: #1E4E7A;
  --navy-700: #163E64;   /* brand core */
  --navy-800: #0E2A46;
  --navy-900: #07142A;   /* fondo oscuro más profundo (hero/footer/video) */
  --navy-950: #050E1E;
  --navy-deep: #002060;  /* navy profundo alterno para fondos oscuros */

  /* ---- Teal · acento (fills, foco, progreso, CTA) ----
     Menta --teal-300 solo sobre oscuro. Acento sólido --teal-600.
     Acento en texto sobre blanco --teal-700 (pasa AA). */
  --teal-050: #E6FAF7;
  --teal-100: #C6F3EC;
  --teal-200: #93E8DC;
  --teal-300: #4FE0C8;   /* menta — solo sobre oscuro */
  --teal-400: #22C3C9;
  --teal-500: #0FA8B8;   /* turquesa — gradientes */
  --teal-600: #0E8497;   /* acento sólido */
  --teal-700: #0C6A7C;   /* acento en texto sobre blanco (AA) */
  --teal-800: #0A5462;
  --teal-900: #083E48;

  /* ---- Neutros fríos (slate) · teñidos de navy, nunca gris puro ---- */
  --slate-000: #FFFFFF;
  --slate-050: #F4F6FA;
  --slate-100: #EAEEF4;
  --slate-200: #DCE2EC;   /* hairline · el borde hace el trabajo de la sombra */
  --slate-300: #C4CDDB;
  --slate-400: #9AA7BC;
  --slate-500: #6E7D96;
  --slate-600: #51607A;
  --slate-700: #3A4860;
  --slate-800: #26324A;
  --slate-900: #141E33;
  --slate-950: #0B1324;

  /* ---- Roles de texto ---- */
  --text-strong:  #12294A;               /* títulos, énfasis */
  --text-body:    var(--slate-700);      /* cuerpo */
  --text-muted:   var(--slate-500);      /* metadatos, ayuda */
  --text-subtle:  var(--slate-400);      /* placeholders, deshabilitado */
  --text-accent:  var(--teal-700);       /* links/acento sobre blanco */
  --text-inverse:       #FFFFFF;
  --text-inverse-muted: rgba(255, 255, 255, 0.72);

  /* ---- Superficies ---- */
  --surface-page:    #F4F6FA;   /* fondo de toda la app */
  --surface-card:    #FFFFFF;
  --surface-sunken:  #EAEEF4;
  --surface-hover:   #EEF2F8;   /* hover de filas, ghost, secundarios */
  --surface-dark:    #07142A;   /* hero, footer, área de video */
  --surface-dark-2:  #002060;
  --surface-glass:   rgba(255, 255, 255, 0.72);   /* barras fijas + tarjetas sobre media */

  /* ---- Semánticos: sólido + soft ---- */
  --success:      #0E9F6E;   --success-soft: #E3F6EE;
  --warning:      #F59E0B;   --warning-soft: #FEF3DA;
  --danger:       #E5484D;   --danger-soft:  #FCE9E9;
  --info:         #2A6BA8;   --info-soft:    #E4EEF7;

  /* ---- Gradientes de marca ----
     El fuerte navy→teal a 96° se reserva para CTA accent, banda de cierre,
     tracks de progreso y portadas sin imagen. El -control termina en teal-700
     para pasar AA con texto blanco. El -soft, para bandas de testimonio. */
  --brand-gradient:         linear-gradient(96deg, #163E64 0%, #0FA8B8 100%);
  --brand-gradient-control: linear-gradient(96deg, #163E64 0%, #0C6A7C 100%);
  --brand-gradient-soft:    linear-gradient(96deg, rgba(22, 62, 100, 0.06) 0%, rgba(15, 168, 184, 0.06) 100%);
  /* Glow radial para la esquina de un hero/footer navy (teal, no violeta). */
  --glow-radial: radial-gradient(60% 60% at 15% 0%, rgba(15, 168, 184, 0.22) 0%, rgba(15, 168, 184, 0) 60%);

  /* ============================================================
     TIPOGRAFÍA — Nunito (sistema) + JetBrains Mono (datos)
     ============================================================ */
  --font-display: "Nunito", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Nunito", "Helvetica Neue", Arial, sans-serif;
  --font-logo:    "Mandali", "Nunito", sans-serif;   /* reservada al logo */
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, "Menlo", "Consolas", monospace;

  /* ---- Escala tipográfica · ÚNICA y estandarizada ----
     El TEXTO va +2 sobre el nominal; los TÍTULOS GRANDES (--fs-24 y arriba)
     quedan nominales. Todo × --ui-scale, el multiplicador del control de
     accesibilidad A-/A+ (lo setea app/size.js en <html>).
     Esta es la única definición de la escala: antes se repetía —y ganaba— en
     app.css. Por eso el número del token de texto ya NO es su px literal
     (--fs-15 = 17px). */
  --ui-scale: 1;
  --fs-11: calc(13px * var(--ui-scale));
  --fs-12: calc(14px * var(--ui-scale));
  --fs-13: calc(15px * var(--ui-scale));
  --fs-14: calc(16px * var(--ui-scale));
  --fs-15: calc(17px * var(--ui-scale));   /* UI por defecto */
  --fs-16: calc(18px * var(--ui-scale));
  --fs-18: calc(20px * var(--ui-scale));   /* prosa de marketing */
  --fs-20: calc(22px * var(--ui-scale));   /* h4 y labels grandes (+2) */
  --fs-24: calc(24px * var(--ui-scale));   /* ── títulos grandes: nominal ── */
  --fs-32: calc(32px * var(--ui-scale));
  --fs-40: calc(40px * var(--ui-scale));
  --fs-48: calc(48px * var(--ui-scale));
  --fs-56: calc(56px * var(--ui-scale));
  --fs-61: calc(61px * var(--ui-scale));
  --fs-72: calc(72px * var(--ui-scale));

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-prose:  1.65;
  --lh-loose:  1.7;

  /* ---- Spacing (grilla de 4px) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ---- Radios ---- */
  --r-xs:  6px;    /* micro-elementos */
  --r-sm:  10px;   /* controles */
  --r-md:  14px;   /* tarjetas */
  --r-lg:  20px;   /* paneles y modales */
  --r-xl:  28px;   /* bandas grandes */
  --r-pill: 999px;

  /* ---- Sombras (SIEMPRE teñidas de navy, nunca negras) ---- */
  --shadow-xs: 0 1px 2px rgba(15, 44, 79, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 44, 79, 0.06), 0 8px 20px -12px rgba(15, 44, 79, 0.18);
  --shadow-md: 0 6px 16px -6px rgba(15, 44, 79, 0.14), 0 16px 34px -18px rgba(15, 44, 79, 0.20);
  --shadow-lg: 0 18px 42px -14px rgba(15, 44, 79, 0.28);
  --shadow-xl: 0 30px 60px -20px rgba(15, 44, 79, 0.34);
  /* Acento teal: solo bajo botones accent y bandas gradient. */
  --shadow-accent: 0 12px 28px -10px rgba(15, 168, 184, 0.45);
  --shadow-brand:  var(--shadow-accent);
  --shadow-glow:   0 0 0 3px rgba(15, 168, 184, 0.10), 0 0 22px 2px rgba(15, 168, 184, 0.28), 0 14px 34px -12px rgba(15, 44, 79, 0.30);
  /* Anillo de foco: borde teal + halo (igual en todos los controles). */
  --focus-ring: 0 0 0 3px rgba(15, 168, 184, 0.35);

  /* ---- Motion — rápida y funcional, nunca elástica ---- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 140ms;   /* controles: color, borde, sombra */
  --t-base: 200ms;   /* superficies: lift, blur */
  --t-slow: 320ms;   /* entradas */

  /* ============================================================
     ALIAS DE COMPATIBILIDAD — sistema viejo (PAME)
     ------------------------------------------------------------
     No usar en pantallas nuevas. Existen para que ui.css/app.css
     (que consumen estos nombres) queden mapeados a Educreia sin
     reescribir cada regla. Se irán retirando a medida que cada
     pantalla se migre.
     ============================================================ */

  /* Azul PAME → Navy */
  --pame-blue:      var(--navy-700);
  --pame-blue-90:   var(--navy-600);
  --pame-blue-80:   var(--navy-500);
  --pame-blue-70:   var(--navy-400);
  --pame-blue-60:   var(--navy-300);
  --pame-blue-50:   var(--navy-300);
  --pame-blue-40:   var(--navy-200);
  --pame-blue-30:   var(--navy-200);
  --pame-blue-20:   var(--navy-100);
  --pame-blue-10:   var(--navy-050);
  --pame-blue-900:  var(--navy-900);
  --pame-blue-700:  var(--navy-800);

  /* Naranja PAME (acento/CTA) → Teal (el acento de Educreia) */
  --pame-orange:     var(--teal-600);
  --pame-orange-90:  var(--teal-500);
  --pame-orange-80:  var(--teal-400);
  --pame-orange-70:  var(--teal-300);
  --pame-orange-60:  var(--teal-200);
  --pame-orange-50:  var(--teal-200);
  --pame-orange-40:  var(--teal-100);
  --pame-orange-30:  var(--teal-100);
  --pame-orange-20:  var(--teal-050);
  --pame-orange-10:  var(--teal-050);
  --pame-orange-600: var(--teal-700);

  /* Teal PAME → Teal Educreia */
  --pame-teal:      var(--teal-600);
  --pame-teal-90:   var(--teal-500);
  --pame-teal-80:   var(--teal-400);
  --pame-teal-70:   var(--teal-300);
  --pame-teal-60:   var(--teal-200);
  --pame-teal-50:   var(--teal-200);
  --pame-teal-40:   var(--teal-100);
  --pame-teal-30:   var(--teal-100);
  --pame-teal-20:   var(--teal-050);
  --pame-teal-10:   var(--teal-050);
  --pame-teal-700:  var(--teal-800);

  /* Neutros / semánticos viejos */
  --pame-ink:       var(--text-strong);
  --pame-ink-2:     var(--text-body);
  --pame-ink-3:     var(--text-muted);
  --pame-line:      var(--slate-200);
  --pame-bg:        var(--surface-card);
  --pame-bg-soft:   var(--surface-page);
  --pame-bg-cream:  var(--surface-page);
  --pame-success:   var(--success);
  --pame-warning:   var(--warning);
  --pame-danger:    var(--danger);

  /* Semántico fg/bg viejo */
  --fg-1: var(--text-strong);
  --fg-2: var(--text-body);
  --fg-3: var(--text-muted);
  --fg-on-brand: #FFFFFF;
  --bg-1: var(--surface-card);
  --bg-2: var(--surface-page);
  --bg-3: var(--navy-900);
}

/* ============================================================
   Roles tipográficos semánticos
   ============================================================ */

/* Display del hero — Nunito 800, solo el H1 principal. */
.edu-display, .pame-display, h1.pame {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--text-strong);
}
.edu-display em, .pame-display em { font-style: normal; color: var(--teal-700); }

h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: -0.025em;
  color: var(--text-strong);
}
h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--text-strong);
}
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-700);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--text-body);
}
.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-prose);
  color: var(--text-body);
}
.small, small {
  font-size: var(--fs-14);
  color: var(--text-muted);
}
.caption {
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Pill tag */
.pame-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--teal-050);
  color: var(--teal-700);
}
.pame-tag--orange { background: var(--teal-050); color: var(--teal-700); }
.pame-tag--blue   { background: var(--navy-050); color: var(--navy-700); }
.pame-tag--dark   { background: var(--navy-900); color: #FFFFFF; }