/* ==========================================================================
   THE VIRAL STUDIO · Design tokens — WEB PÚBLICA (modo CINE / dark)
   Display: Cabinet Grotesk · Cuerpo: General Sans · Acento: Magenta
   --------------------------------------------------------------------------
   Este fichero solo lo consumen las páginas dark de 03_Web. Contiene SOLO
   variables + reset (con fondo oscuro por defecto). La UI-kit de modo light
   (botones, tags, ticker, labels…) vive en la copia canónica 02_Marca/tokens.css
   que usa el brand-book. Aquí NO, a propósito: así ningún estilo de modo light
   se filtra a las páginas oscuras (era la causa de las "barras blancas").
   Los componentes dark viven en css/site.css y en el <style> inline de cada página.
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&f[]=cabinet-grotesk@700,800&display=swap');

/* Voltrix vive SOLO en el logo (wordmark en SVG). No se usa como texto vivo. */

:root{
  /* Superficie (modo light — referencia; el brand-book las usa desde su copia) */
  --paper:#ffffff;
  --paper-2:#f6f6f4;      /* superficie sutil */
  --ink:#0e0e0e;          /* texto principal */
  --ink-2:#4a4a4a;        /* texto secundario */
  --muted:#9a9a9a;        /* labels, metadatos */
  --line:#e8e8e6;         /* separadores */

  /* Acento (quirúrgico, nunca masas grandes) */
  --accent:#D6246E;       /* rellenos: botones, chips, reglas */
  --accent-ink:#A81B59;   /* acento como TEXTO sobre blanco (legible) */
  --accent-wash:#FCE9F1;  /* superficie magenta muy clara para destacar */

  /* Tinta oscura para módulos de vídeo */
  --stage:#0e0e0e;

  /* --- Modo CINEMATOGRÁFICO (dark) — el que usa la web pública ------------
     El negro deja que el vídeo (y el magenta) pongan el color. */
  --cine-bg:#000000;        /* fondo base */
  --cine-surface:#0a0a0a;   /* tarjetas, superficies elevadas */
  --cine-surface-2:#111111; /* superficie destacada / hover */
  --cine-line:#1e1e1e;      /* separadores sutiles */
  --cine-line-2:#2a2a2a;    /* separadores con más presencia */
  --cine-text:#ffffff;      /* texto principal */
  --cine-text-2:#9a9a9a;    /* texto secundario */
  --cine-text-3:#5a5a5a;    /* metadatos, deshabilitado */
  --cine-accent:#FF3D8C;    /* magenta claro: legible sobre negro y vídeo */
  --cine-accent-ink:#D6246E;/* magenta de marca para rellenos sobre negro */

  /* Tipografía */
  --font-display:'Cabinet Grotesk', sans-serif;  /* titulares */
  --font-body:'General Sans', sans-serif;         /* cuerpo, UI, labels */

  /* Escala display (compartida light + dark) */
  --step-xl:clamp(2.8rem,8vw,6.5rem);
  --step-lg:clamp(2.2rem,5.5vw,4rem);
  --step-md:clamp(1.6rem,3.4vw,2.4rem);

  /* Sistema */
  --radius:0;             /* radius 0: bordes rectos, editorial */
  --maxw:1240px;
  --maxw-wide:1400px;     /* rejilla ancha para el modo cinematográfico */
  --gap:clamp(20px,3vw,32px);

  /* Motion (fuente de verdad de las transiciones) */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.2s var(--ease);
  --t-base:.35s var(--ease);
  --t-slow:.6s var(--ease);
}

/* --- Reset base (modo cine / dark por defecto) --- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--cine-bg);
  color:var(--cine-text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,video{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}