/* ==========================================================================
   NVT — Tokens del sistema de diseño
   Única fuente de verdad de color, tipografía, espaciado y movimiento.
   Para reequilibrar el sitio entre oscuro y claro basta con cambiar qué
   secciones usan .section--dark / .section--light en el HTML: los colores
   se resuelven siempre a través de las variables semánticas de abajo.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --teal:          #22C7C0;
  --teal-bright:   #3EE8DF;
  --teal-dim:      #0E9C97;
  --teal-deep:     #086B69;
  --blue:          #3B6FE0;
  --blue-bright:   #5B8CFF;
  --blue-dim:      #2A52B0;
  --blue-deep:     #16306E;

  --grad-brand:     linear-gradient(135deg, var(--teal) 0%, var(--blue) 100%);
  --grad-brand-soft:linear-gradient(135deg, rgba(34,199,192,.16) 0%, rgba(59,111,224,.16) 100%);
  --grad-text:      linear-gradient(100deg, var(--teal-bright) 0%, var(--blue-bright) 60%);

  /* --- Tinta (superficies oscuras) -------------------------------------- */
  --ink-900: #05080F;
  --ink-850: #070B14;
  --ink-800: #0B1220;
  --ink-700: #0F1828;
  --ink-600: #152036;
  --ink-500: #1D2C47;

  /* --- Papel (superficies claras) --------------------------------------- */
  --paper:   #FFFFFF;
  --paper-2: #F6F8FB;
  --paper-3: #ECF1F7;
  --paper-4: #DCE4EE;

  /* --- Texto ------------------------------------------------------------ */
  --on-dark:        #EEF3F9;
  --on-dark-muted:  #9FB0C9;
  --on-dark-faint:  #6B7F9C;
  --on-light:       #0B1220;
  --on-light-muted: #4C5C74;
  --on-light-faint: #7A8AA3;

  /* --- Variables semánticas (por defecto: superficie clara) -------------- */
  --surface:      var(--paper);
  --surface-2:    var(--paper-2);
  --surface-3:    var(--paper-3);
  --text:         var(--on-light);
  --text-muted:   var(--on-light-muted);
  --text-faint:   var(--on-light-faint);
  --border:       rgba(11, 18, 32, .10);
  --border-strong:rgba(11, 18, 32, .18);
  --accent:       var(--teal-dim);
  --accent-2:     var(--blue);
  --shadow-card:  0 1px 2px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.06);
  --shadow-lift:  0 2px 4px rgba(11,18,32,.06), 0 18px 44px rgba(11,18,32,.12);
  --glass:        rgba(255,255,255,.72);

  /* --- Tipografía ------------------------------------------------------- */
  --font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --fs-display: clamp(2.6rem, 1.4rem + 4.6vw, 5rem);
  --fs-h1:      clamp(2.1rem, 1.4rem + 2.9vw, 3.6rem);
  --fs-h2:      clamp(1.7rem, 1.2rem + 2.0vw, 2.7rem);
  --fs-h3:      clamp(1.22rem, 1.05rem + 0.7vw, 1.55rem);
  --fs-h4:      clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-body:  1.68;

  /* --- Espaciado (escala 4px) ------------------------------------------- */
  --sp-1:  .25rem;  --sp-2:  .5rem;   --sp-3:  .75rem;  --sp-4:  1rem;
  --sp-5:  1.25rem; --sp-6:  1.5rem;  --sp-8:  2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

  --section-y: clamp(4rem, 2.4rem + 6vw, 8rem);
  --gutter:    clamp(1.15rem, .6rem + 2.2vw, 2.5rem);

  /* --- Medidas ---------------------------------------------------------- */
  --maxw:        1200px;
  --maxw-wide:   1360px;
  --maxw-narrow: 760px;
  --nav-h:       72px;

  /* --- Radios ----------------------------------------------------------- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;  --r-pill: 999px;

  /* --- Movimiento ------------------------------------------------------- */
  --t-fast:  140ms;
  --t-base:  260ms;
  --t-slow:  520ms;
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
}

/* --- Superficie oscura ---------------------------------------------------- */
.section--dark,
.on-dark {
  --surface:      var(--ink-850);
  --surface-2:    var(--ink-800);
  --surface-3:    var(--ink-700);
  --text:         var(--on-dark);
  --text-muted:   var(--on-dark-muted);
  --text-faint:   var(--on-dark-faint);
  --border:       rgba(238, 243, 249, .10);
  --border-strong:rgba(238, 243, 249, .20);
  --accent:       var(--teal-bright);
  --accent-2:     var(--blue-bright);
  --shadow-card:  0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.32);
  --shadow-lift:  0 2px 6px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.45);
  --glass:        rgba(11, 18, 32, .62);
}

/* --- Superficie clara (para revertir dentro de un bloque oscuro) ---------- */
.section--light,
.on-light {
  --surface:      var(--paper);
  --surface-2:    var(--paper-2);
  --surface-3:    var(--paper-3);
  --text:         var(--on-light);
  --text-muted:   var(--on-light-muted);
  --text-faint:   var(--on-light-faint);
  --border:       rgba(11, 18, 32, .10);
  --border-strong:rgba(11, 18, 32, .18);
  --accent:       var(--teal-dim);
  --accent-2:     var(--blue);
  --shadow-card:  0 1px 2px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.06);
  --shadow-lift:  0 2px 4px rgba(11,18,32,.06), 0 18px 44px rgba(11,18,32,.12);
  --glass:        rgba(255,255,255,.72);
}