/* ═══════════════════════════════════════════════════════════
   MISUNET · Design tokens
   Única fuente de verdad: color, tipografía, ritmo, elevación.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Marca ───────────────────────────────────────────────
     Extraída del logotipo. El azul 600 es el color de acción. */
  --brand-900:#001F3F;
  --brand-800:#00295A;
  --brand-700:#003B7A;
  --brand-600:#0057B8;
  --brand-500:#1E74D6;
  --brand-400:#4A9BF0;
  --brand-300:#8FC4FA;
  --brand-200:#C4DFFC;
  --brand-rgb:0 87 184;

  /* Acento frío: solo en degradados y luces. Nunca en texto plano. */
  --accent-400:#5AD1F0;

  /* ── Superficie clara ──────────────────────────────────── */
  --paper:#FFFFFF;
  --paper-2:#F7F9FC;
  --paper-3:#EFF3F9;
  --ink:#0A1020;          /* títulos      */
  --ink-2:#3A4761;        /* cuerpo       */
  /* WCAG AA: #6B7A94 daba 4.34:1 sobre blanco y 4.12:1 sobre --paper-2.
     #5F6E88 sube a 5.16:1 / 4.89:1 sin cambiar la percepción del gris. */
  --ink-3:#5F6E88;        /* secundario   */
  --line:#E4EAF3;
  --line-2:#D3DCEA;

  /* ── Superficie oscura ─────────────────────────────────── */
  --void:#040810;
  --void-2:#070E1C;
  --void-3:#0B1526;
  --deep:#00152C;
  --on-dark:#F4F7FC;
  --on-dark-2:#A7B7D1;
  /* #6C7D9B daba 4.41:1 sobre --deep (footer). #7C8DAB → 5.47:1. */
  --on-dark-3:#7C8DAB;
  --line-dark:rgb(255 255 255 / .09);
  --line-dark-2:rgb(255 255 255 / .16);

  /* Estado */
  --danger:#D8453B;
  --ok:#17A46A;
  --wa:#1FAF5C;

  /* ── Tipografía ────────────────────────────────────────── */
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

  /* Escala fluida — se adapta de 360 px a 1920 px sin saltos */
  --fs-xs:0.75rem;
  --fs-sm:0.875rem;
  --fs-base:1rem;
  --fs-md:clamp(1.0625rem,1.02rem + .2vw,1.125rem);
  --fs-lg:clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  --fs-xl:clamp(1.375rem,1.2rem + .8vw,1.75rem);
  --fs-2xl:clamp(1.75rem,1.4rem + 1.6vw,2.5rem);
  --fs-3xl:clamp(2.125rem,1.6rem + 2.4vw,3.5rem);
  --fs-4xl:clamp(2.5rem,1.5rem + 4.4vw,5rem);
  --fs-hero:clamp(2.75rem,1.35rem + 5.9vw,6.25rem);

  --lh-tight:1.04;
  --lh-snug:1.16;
  --lh-body:1.65;
  --tracking-tight:-.035em;
  --tracking-wide:.16em;

  /* ── Ritmo ─────────────────────────────────────────────── */
  --space-1:.25rem;  --space-2:.5rem;   --space-3:.75rem;
  --space-4:1rem;    --space-5:1.5rem;  --space-6:2rem;
  --space-7:3rem;    --space-8:4rem;    --space-9:6rem;
  --section-y:clamp(5.5rem,3rem + 9vw,10.5rem);
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --container:1240px;
  --container-narrow:820px;
  --header-h:76px;

  /* ── Forma ─────────────────────────────────────────────── */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* ── Elevación — sombras en capas, nunca una sola ──────── */
  --sh-1:0 1px 2px rgb(10 16 32 / .04), 0 1px 3px rgb(10 16 32 / .05);
  --sh-2:0 2px 4px rgb(10 16 32 / .04), 0 8px 16px -4px rgb(10 16 32 / .07);
  --sh-3:0 4px 8px -2px rgb(10 16 32 / .05), 0 18px 36px -10px rgb(10 16 32 / .10);
  --sh-4:0 8px 16px -6px rgb(10 16 32 / .06), 0 32px 64px -20px rgb(10 16 32 / .16);
  --sh-brand:0 6px 16px -4px rgb(var(--brand-rgb) / .32), 0 16px 40px -12px rgb(var(--brand-rgb) / .28);

  /* ── Movimiento ────────────────────────────────────────── */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* expo-out: el gesto premium */
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --t-fast:.18s;
  --t-base:.32s;
  --t-slow:.6s;

  /* Grano sutil para superficies oscuras */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Superficies: cada bloque declara su contexto y los componentes
   heredan de él. Evita duplicar reglas «-light» por componente. */
.surface--void{ --surface:var(--void);  background:var(--void);  color:var(--on-dark-2); }
.surface--deep{ --surface:var(--deep);  background:var(--deep);  color:var(--on-dark-2); }
.surface--alt { --surface:var(--paper-2); background:var(--paper-2); }