/* ============================================================
   N-7Web — Sistema de diseño
   Fuente: N-7Web_—_Identidad_de_marca.md (documento canónico)
   Concepto: Infraestructura digital premium.
   ------------------------------------------------------------
   Este archivo es la capa base del kit: un proyecto de cliente
   lo enlaza antes de su propio CSS y hereda color, forma, ritmo
   y elevación sin reinterpretar el manual.
   ============================================================ */

:root{

  /* ---------- 1. MARCA · color ----------
     Los colores se consumen por ROL (ver sección 2), no sueltos.
     Proporción: 65% neutrales claros · 25% pizarra/ink · 8% cian · 2% violeta. */

  --cian-500:#0891B2;   /* CTA principal, enlaces, estados de avance */
  --cian-600:#0E7490;   /* hover / estado presionado del CTA */
  --cian-100:#CFFAFE;   /* fondos suaves, chips, señales de interacción */

  --ink-900:#0F172A;    /* titulares, texto fuerte, superficies oscuras */
  --ink-800:#1E293B;    /* bordes sobre oscuro, texto secundario en oscuro */
  --neutral-500:#64748B;/* texto secundario, metadatos */
  --neutral-200:#E2E8F0;/* bordes, separadores */
  --neutral-50:#F8FAFC; /* fondo alterno, superficies tenues */

  --accent-500:#7C3AED; /* innovación, segunda CTA — uso puntual */
  --accent-100:#EDE9FE;

  --blanco:#FFFFFF;

  /* ---------- 2. ROLES semánticos ----------
     Un componente pide el rol, no el hex. Así el cian cambia en un
     solo lugar y el sitio entero se actualiza. */

  --accion:var(--cian-600);        /* botón primario */
  --accion-hover:var(--cian-500);  /* en superficies claras */
  --accion-suave:var(--cian-100);
  --enlace:var(--cian-600);

  --texto:var(--ink-900);
  --texto-suave:var(--neutral-500);
  --texto-inverso:var(--blanco);
  --texto-sobre-oscuro:rgba(226,232,240,.72);

  --borde:var(--neutral-200);
  --borde-oscuro:var(--ink-800);

  --fondo:var(--blanco);
  --fondo-alt:var(--neutral-50);
  --superficie:var(--blanco);
  --superficie-oscura:var(--ink-900);

  --foco:var(--cian-600);          /* anillo de focus visible */

  /* ---------- 3. TIPOGRAFÍA ---------- */

  --fuente-titular:"Space Grotesk",Inter,sans-serif;
  --fuente-cuerpo:Inter,system-ui,-apple-system,sans-serif;
  --fuente-tecnica:"JetBrains Mono",monospace;

  --peso-medio:500;
  --peso-semi:600;
  --peso-fuerte:700;

  /* Escala del manual. En móvil, --escala-movil la reduce sin perder jerarquía. */
  --fs-display-xl:64px;  --lh-display-xl:1.02;
  --fs-display-lg:48px;  --lh-display-lg:1.06;
  --fs-heading-md:32px;  --lh-heading-md:1.12;
  --fs-heading-sm:24px;  --lh-heading-sm:1.20;
  --fs-body:16px;        --lh-body:1.55;
  --fs-body-sm:14px;     --lh-body-sm:1.45;
  --fs-caption:12px;     --lh-caption:1.30;

  /* Titulares: tracking ligeramente cerrado (manual, sección Tipografía) */
  --tracking-titular:-.02em;
  --tracking-display:-.035em;
  --tracking-tecnica:.02em;

  /* ---------- 4. ESPACIADO ----------
     Escala base 8. Nombres en px a propósito: el nombre dice el valor. */

  --esp-8:8px;
  --esp-16:16px;
  --esp-24:24px;
  --esp-32:32px;
  --esp-40:40px;
  --esp-48:48px;
  --esp-64:64px;
  --esp-80:80px;
  --esp-96:96px;

  /* ---------- 5. FORMA ---------- */

  --radio-s:8px;
  --radio-m:14px;
  --radio-l:22px;
  --radio-pill:999px;

  /* ---------- 6. ELEVACIÓN ----------
     Sombra ligera, tinta en pizarra (15,23,42) — nunca negro puro.
     El manual prohíbe sombra pesada y exceso de tarjetas flotantes. */

  --elev-nula:none;
  --elev-1:0 18px 48px -24px rgba(15,23,42,.18);   /* reposo: tarjeta */
  --elev-2:0 26px 60px -28px rgba(15,23,42,.28);   /* hover: tarjeta */
  --elev-3:0 40px 90px -44px rgba(15,23,42,.6);    /* flotante: panel del hero */
  --elev-media:0 18px 40px -26px rgba(15,23,42,.35);/* captura dentro de marco */
  --elev-accion:0 10px 26px -12px rgba(14,116,144,.65);      /* botón primario */
  --elev-accion-hover:0 14px 32px -12px rgba(14,116,144,.85);
  --elev-plan:0 24px 56px -28px rgba(14,116,144,.42);        /* plan destacado */
  --elev-fab:0 14px 30px -12px rgba(14,116,144,.7);          /* botón flotante */
  --elev-sobre-degradado:0 14px 34px -14px rgba(0,0,0,.4);   /* botón blanco sobre CTA cian */

  /* ---------- 7. MOVIMIENTO ----------
     ease-out en entradas, nunca ease-in. UI bajo 300ms. */

  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-toque:100ms;   /* feedback de presión */
  --dur-ui:200ms;      /* cambios de estado */
  --dur-entrada:700ms; /* aparición de secciones */

  /* ---------- 8. ANCHO Y MÁRGENES ---------- */

  --max:1120px;
  --margen-fluido:clamp(20px,5vw,80px);

  /* Safe areas (mobile-native: contenido bajo el notch) */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);

  /* ---------- 9. ALIAS de compatibilidad ----------
     Nombres cortos que ya usaba el sitio antes de este archivo.
     Se mantienen para no romper CSS existente; en código nuevo,
     usar los nombres canónicos de arriba. */

  --cian:var(--cian-500);
  --cian-prof:var(--cian-600);
  --cian-suave:var(--cian-100);
  --ink:var(--ink-900);
  --pizarra:var(--ink-800);
  --gris:var(--neutral-500);
  --niebla-borde:var(--neutral-200);
  --niebla:var(--neutral-50);
  --violeta:var(--accent-500);
  --violeta-tint:var(--accent-100);
  --radio:var(--radio-m);
  --sombra:var(--elev-1);
}

/* ---------- Escala móvil ----------
   El manual pide reducir los display en móvil sin perder jerarquía,
   priorizando lectura sobre impacto. */
@media(max-width:640px){
  :root{
    --fs-display-xl:44px;
    --fs-display-lg:34px;
    --fs-heading-md:26px;
    --fs-heading-sm:21px;
  }
}