/* ════════════════════════════════════════════════════════════════════
   NEO SCORPION AI — sitio de transcripción legal — tokens.css
   Sistema «Despacho a plena luz»

   RELACIÓN CON EL PRODUCTO (media-forge-lab → «Instrumento de estudio
   nocturno», docs/DESIGN_SYSTEM.md de ese repo):

   · El sitio es la MISMA CASA en OTRO CUARTO. El producto se opera de
     noche sobre #0d1117; el sitio de marketing se lee de día sobre
     papel. La confianza judicial se construye en claro.
   · La tinta del sitio (--tinta #121821) pertenece a la misma familia
     tonal H215 que los fondos del producto: la noche del producto es,
     literalmente, la tinta del sitio.
   · El azul: un solo matiz (H≈213) en tres temperaturas.
       #4A9EFF  --azul-firma     el azul EXACTO del producto. Aquí es
                                 gesto gráfico dosificado (forma de onda,
                                 acentos sobre la banda nocturna). Nunca
                                 texto sobre papel (no alcanza AA).
       #1D5AA5  --azul-acento    el mismo matiz, oscurecido a tinta
                                 interactiva del sitio (6.5:1 sobre papel).
       #1A3A61  --azul-tribunal  la versión más profunda: institucional,
                                 para diagramas y detalles de peso.
   · Tipografía compartida: Space Grotesk (wordmark idéntico al del
     producto), Inter (cuerpo en ambos), JetBrains Mono (números y
     etiquetas de instrumento en ambos). El sitio añade UNA voz propia:
     Fraunces, serif editorial para titulares — el despacho, no el
     estudio. El producto jamás usa serif; el sitio jamás la usa en UI.
   · Espaciado (base 4px), radios, duraciones y curvas: valores
     IDÉNTICOS a los tokens del producto. Cambia la luz, no la métrica.
   · La banda nocturna del cierre (#0d1117 + azul firma) es la puerta
     hacia el producto: cuando el cliente pase del sitio a la demo,
     ya habrá visto la noche.
   ════════════════════════════════════════════════════════════════════ */

/* ── Fuentes vendorizadas (SIL OFL 1.1 — static/fonts/LICENCIAS.md) ── */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-vf.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-vf.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-vf.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-vf.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* ── Papel (capas de luz, de la más amplia a la más elevada) ── */
  --papel:            #FAF9F6;   /* fondo de página — papel de despacho   */
  --papel-perla:      #F2F0EA;   /* bandas alternas de sección            */
  --papel-hundido:    #EDEBE4;   /* zonas hundidas (banda de internet del
                                    diagrama): un escalón bajo la perla   */
  --documento:        #FFFFFF;   /* tarjetas y el «documento» del héroe   */

  /* ── Advertencia (familia --advertencia del producto, llevada a papel) ── */
  --advertencia-tenue: rgba(246, 179, 85, 0.14);  /* producto: 0.12 sobre noche */
  --advertencia-borde: rgba(180, 120, 30, 0.35);
  --advertencia-tinta: #6B4A10;  /* ≈7:1 sobre el fondo compuesto */

  /* ── Tinta (familia tonal H215 — la noche del producto, escrita) ── */
  --tinta:       #121821;   /* titulares y cuerpo (16.9:1 sobre papel)    */
  --tinta-media: #454F5F;   /* texto secundario (7.9:1)                   */
  --tinta-baja:  #5E6978;   /* pies y metadatos (5.3:1 — mínimo AA)       */

  /* ── El azul, un matiz en tres temperaturas (ver cabecera) ── */
  --azul-tribunal: #1A3A61;
  --azul-acento:   #1D5AA5;
  --azul-firma:    #4A9EFF;   /* == --azul del producto. Solo gesto gráfico */
  --azul-firma-vivo: #77B8FF; /* == --azul-vivo del producto (hovers en la noche) */
  --azul-firma-tenue: rgba(74, 158, 255, 0.18); /* halo del sello — derivado del
                                 --azul-tenue del producto (0.13), reforzado
                                 porque vive sobre blanco, no sobre noche      */
  --azul-tenue:    rgba(29, 90, 165, 0.08);    /* rellenos suaves sobre papel */
  --azul-borde:    rgba(29, 90, 165, 0.32);
  --azul-velo:     rgba(29, 90, 165, 0.035);   /* velo del perímetro del
                                 diagrama: ajuste óptico sobre --documento    */
  --tinta-sobre-acento: #FFFFFF;  /* texto sobre --azul-acento (6.9:1)        */
  --tinta-sobre-firma:  #0A1220;  /* == --tinta-sobre-acento del producto     */

  /* ── La noche del producto (banda de cierre y pie) ── */
  --noche:          #0D1117;   /* == --fondo-base del producto     */
  --noche-elevada:  #1C2128;   /* == --fondo-elevado del producto  */
  --tinta-nocturna: #E9EDF3;   /* == --tinta-alta del producto     */
  --tinta-nocturna-media: #9AA5B5;  /* == --tinta-media del producto */

  /* ── Líneas (bordes por transparencia, sobre papel) ── */
  --linea-sutil:  rgba(18, 24, 33, 0.08);
  --linea-media:  rgba(18, 24, 33, 0.16);
  --linea-fuerte: rgba(18, 24, 33, 0.30);
  --linea-control: rgba(18, 24, 33, 0.48);  /* borde de controles: ≥3:1 sobre
                                 papel (WCAG 1.4.11)                          */
  --tinta-trazo: rgba(18, 24, 33, 0.35);    /* trazos de la maqueta de
                                 documento en el diagrama                     */
  /* derivadas de las nocturnas del producto (0.09/0.17), reforzadas
     +0.03/+0.05 porque aquí dibujan bordes de banda a página completa: */
  --linea-nocturna-sutil: rgba(148, 163, 190, 0.12);
  --linea-nocturna-media: rgba(148, 163, 190, 0.22);

  /* ── Tipografía ──
     titular: Fraunces — la voz editorial propia del sitio (solo h1/h2/h3)
     marca:   Space Grotesk — EXCLUSIVA del wordmark (idéntica al producto)
     ui:      Inter — cuerpo y controles (compartida con el producto)
     mono:    JetBrains Mono — cejas, números, marcas de tiempo
              (compartida con el producto)                                */
  --fuente-titular: "Fraunces", Georgia, "Times New Roman", serif;
  --fuente-marca:   "Space Grotesk", "Inter", system-ui, sans-serif;
  --fuente-ui:      "Inter", system-ui, -apple-system, sans-serif;
  --fuente-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --texto-xs:     0.75rem;    /* 12   — cejas mono, metadatos            */
  --texto-s:      0.8125rem;  /* 13   — pies, notas legales              */
  --texto-doc:    0.9rem;     /* 14.4 — escalón propio de la maqueta de
                                 documento del héroe (entre s y m)       */
  --texto-m:      1.0625rem;  /* 17   — cuerpo (lectores de 55 años)     */
  --texto-l:      1.25rem;    /* 20   — entradillas                      */
  --texto-xl:     1.5rem;     /* 24   — títulos de tarjeta               */
  --texto-titulo: clamp(2rem, 4.2vw, 3.1rem);     /* h2 de sección       */
  --texto-hero:   clamp(1.9rem, 4.6vw + 0.72rem, 4.05rem);  /* h1 — el
        mínimo cabe con «La confidencialidad,» entera en 375px           */

  /* ── Espaciado (base 4px — MISMOS valores que el producto) ── */
  --esp-1: 0.25rem;   /*  4 */
  --esp-2: 0.5rem;    /*  8 */
  --esp-3: 0.75rem;   /* 12 */
  --esp-4: 1rem;      /* 16 */
  --esp-5: 1.5rem;    /* 24 */
  --esp-6: 2rem;      /* 32 */
  --esp-7: 3rem;      /* 48 */
  --esp-8: 4.5rem;    /* 72  — propio del sitio: respiración editorial   */
  --esp-9: 7rem;      /* 112 — ritmo entre secciones                     */

  /* ── Radios (MISMOS que el producto) ── */
  --radio-s: 6px;
  --radio-m: 10px;
  --radio-l: 14px;
  --radio-capsula: 999px;

  /* ── Elevación (sombras de papel, no de estudio oscuro) ── */
  --sombra-1: 0 1px 2px rgba(18, 24, 33, 0.06), 0 1px 6px rgba(18, 24, 33, 0.05);
  --sombra-2: 0 8px 28px rgba(18, 24, 33, 0.09);
  --sombra-3: 0 20px 60px rgba(18, 24, 33, 0.13);

  /* ── Movimiento (MISMAS duraciones y curvas que el producto) ── */
  --dur-rapida: 120ms;
  --dur-media:  200ms;
  --dur-lenta:  340ms;
  --curva-suave:   cubic-bezier(0.2, 0, 0, 1);
  --curva-entrada: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* la barra pegajosa no tapa los anclajes */
}

body {
  margin: 0;
  overflow-x: clip;   /* red de seguridad: nada desborda el papel */
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-ui);
  font-size: var(--texto-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--fuente-titular);
  font-optical-sizing: auto;
  font-weight: 590;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--azul-acento); text-underline-offset: 3px; }
a:hover { color: var(--azul-tribunal); }

::selection { background: var(--azul-borde); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--azul-acento);
  outline-offset: 2px;
  border-radius: var(--radio-s);
}

img, svg { display: block; max-width: 100%; }

/* Accesibilidad: sin movimiento si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}