/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS · Claudia landing
   ───────────────────────────────────────────────────────────────────────────
   Espejo 1:1 de la estructura de tokens de raycast.com, con los valores del
   video system de Claudia. La estructura se copia a propósito: si los dos
   sistemas tienen los mismos escalones, comparar geometría es comparar
   números, no impresiones.

     raycast              claudia            de dónde sale
     ───────────────────  ─────────────────  ─────────────────────────────────
     --color-bg-100  #101111  →  #0A0A0A     claudia.css :root --bg
     --color-bg-200  #18191a  →  #161616     --panel / --card
     --color-bg-300  #313133  →  #1F1F1F     --panel2
     --color-border  #242728  →  #2C2C2C     --border
     --color-fg      #f4f4f6  →  #FFFFFF     --ink
     --color-fg-200  #c2c7ca  →  #A6A6A6     --muted
     --color-red     #ff6161  →  #A8FF00     --clay (el flúor)
     Inter                    →  Ranade      video system: captions y datos
     (display)                →  Claudia Spider   video system: el golpe
     Instrument Serif         →  Reenie Beanie    video system: la conectiva

   Regla dura del video system que aquí también manda: sobre relleno flúor el
   texto va NEGRO (#0A0A0A), nunca blanco.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La web se sirve en DOS sitios: en su propio despliegue y, por rewrite, en
   claudiaedit.com, que es un proyecto de otra cuenta. Allí las rutas que no
   estén cableadas dan 404, y una fuente que no carga no avisa: la página se
   pinta con la tipografía del sistema y parece que el diseño está mal hecho.
   Un `src` admite varias fuentes y se prueban EN ORDEN, así que la relativa
   sigue siendo la buena y la absoluta es solo la red debajo. El día que el
   dominio cablee /fuentes/, la segunda deja de usarse sola. */
@font-face{font-family:"Claudia Spider";src:url("/fuentes/claudia-spider-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Ranade";src:url("/fuentes/ranade-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Reenie Beanie";src:url("/fuentes/reenie-beanie-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  /* ── superficies ── */
  --color-bg-100:#0A0A0A;
  --color-bg-200:#161616;
  --color-bg-300:#1F1F1F;
  --color-bg-400:#2E2E2E;
  --color-bg:var(--color-bg-100);
  --color-wash:#1C1C1C;
  --color-border:#2C2C2C;
  --color-border-soft:#242424;

  /* ── tinta ── */
  --color-fg:#FFFFFF;
  --color-fg-200:#A6A6A6;
  --color-fg-300:#9A9A9A;
  --color-fg-400:#8A8A8A;

  /* ── el acento, y su regla ── */
  --color-acento:#A8FF00;
  --color-acento-vivo:#B9FF33;
  --color-acento-wash:rgba(168,255,0,.13);
  --color-sobre-acento:#0A0A0A;   /* NUNCA blanco sobre flúor */

  /* ── los cremas del video system: las piezas de vídeo, no el chrome ── */
  --color-tablero:#E8E8D8;
  --color-lienzo:#E4E4CC;
  --color-tinta-clara:#1d1d1f;
  --color-papel:#FBFAF4;

  /* ── semánticos ── */
  --color-ok:#8BE04F;
  --color-pend:#E5B84B;
  --color-no:#FF6B5A;
  --color-info:#8FB6E8;

  /* ── botón (mismo papel que en raycast: claro sobre oscuro) ── */
  --color-boton-bg:#ffffffd0;
  --color-boton-bg-hover:#ffffff;
  --color-boton-fg:#0A0A0A;

  /* ── contenedores ── */
  --container-xs-width:746px;
  --container-sm-width:1064px;
  --container-width:1204px;
  --container-lg-width:1280px;

  /* ── escala de espaciado ── */
  --spacing-1:4px;   --spacing-2:8px;   --spacing-3:12px;  --spacing-4:16px;
  --spacing-5:20px;  --spacing-6:24px;  --spacing-8:32px;  --spacing-10:40px;
  --spacing-12:48px; --spacing-16:64px; --spacing-20:80px; --spacing-24:96px;
  --spacing-32:128px;

  /* ── padding vertical de sección (los tres escalones de raycast) ── */
  --seccion-y:56px;

  /* ── radios ── */
  --radius:8px;
  --radius-sm:6px;
  --radius-lg:12px;
  --radius-xl:16px;

  /* ── tipografías ── */
  /* Ranade lleva los titulares Y el cuerpo, como Inter en raycast: una sola
     voz para todo el texto de la interfaz. Claudia Spider NO es una tipografía
     de titular web — es la del GOLPE sobre el vídeo, y usarla en el h1 hace
     que la página parezca un cartel, no un producto. Se reserva para los
     supertextos de demostración y para las cifras grandes, que es su papel
     en el video system. */
  --font-titular:"Ranade",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-display:"Claudia Spider","Anton","Arial Narrow",Impact,sans-serif;
  --font-cuerpo:"Ranade",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mano:"Reenie Beanie","Bradley Hand","Comic Sans MS",cursive;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  /* ── escala tipográfica (ratios, que es lo que se compara) ── */
  --texto-xs:12px;   --texto-sm:14px;   --texto-base:16px; --texto-lg:18px;
  --texto-xl:20px;   --texto-2xl:24px;  --texto-3xl:32px;  --texto-4xl:42px;
  --texto-5xl:56px;  --texto-6xl:76px;  --texto-7xl:104px;

  /* ── el brillo de raycast: 1px de blanco al 5% por dentro, arriba ── */
  --brillo:inset 0 1px rgba(255,255,255,.05);
  --sombra-card:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.55);
  --sombra-flotante:0 24px 80px -24px rgba(0,0,0,.9);
  --glow-acento:0 0 0 1px rgba(168,255,0,.25), 0 8px 40px -8px rgba(168,255,0,.28);

  /* ── motion: las dos duraciones de raycast, y nada más ── */
  --t-rapida:.2s;
  --t-media:.3s;
  --curva:cubic-bezier(.22,.61,.36,1);
  --curva-entrada:cubic-bezier(.16,1,.3,1);
}

@media (min-width:768px){ :root{ --seccion-y:140px } }
@media (min-width:1080px){ :root{ --seccion-y:224px } }