/* ─────────────────────────────────────────────────────────────
   Núcleo gráfico — Canfranc Canfranc 2026
   Tokens, zonas de pantalla y piezas comunes a todos los overlays.
   Sin dependencias externas: la tipografía va en vendor/.
   ───────────────────────────────────────────────────────────── */
@import url('./vendor/roboto.css');

:root{
  --ink:#231F20;          /* oscuro de marca */
  --acc:#FFC20E;          /* amarillo de marca */
  --paper:#FFFFFF;
  --ink-90:rgba(35,31,32,.94);
  --linea:rgba(255,255,255,.12);
  --tenue:rgba(255,255,255,.60);
  --sombra:drop-shadow(0 10px 26px rgba(0,0,0,.55));
  --margen-x:130px;       /* mismos márgenes en todos los módulos */
  --margen-y:90px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:1920px;height:1080px;overflow:hidden;background:transparent;
  font-family:Roboto,Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased}
[hidden]{display:none!important}

/* ── Zonas fijas por función ───────────────────────────────── */
.zona{position:absolute;filter:var(--sombra)}
.zona-ii{left:var(--margen-x);bottom:var(--margen-y)}                    /* identidad */
.zona-ic{left:50%;bottom:var(--margen-y);transform:translateX(-50%)}
.zona-id{right:var(--margen-x);bottom:var(--margen-y)}                   /* contexto */
.zona-sd{right:var(--margen-x);top:var(--margen-y)}                      /* tiempo */
.zona-franja{left:0;right:0;bottom:0}                                    /* ticker */

/* ── Estructura fondo + contenido ──────────────────────────────
   El fondo escala en X; el contenido va en una capa aparte que no
   se deforma. Es lo que evita que el texto se estire al entrar.   */
.pieza{position:relative}
.pieza>.fondo{position:absolute;inset:0;transform:scaleX(0);
  transform-origin:left center;background:var(--paper)}
.pieza>.fondo.oscuro{background:var(--ink)}
.pieza>.fondo.acento-izq{box-shadow:inset 8px 0 0 var(--acc)}
.pieza>.fondo.desde-derecha{transform-origin:right center}
.pieza>.fondo.acento-der{box-shadow:inset -8px 0 0 var(--acc)}
.pieza>.cuerpo{position:relative;display:flex;align-items:stretch}

/* ── Piezas de marca ───────────────────────────────────────── */
.acento{background:var(--acc)}
.filete{background:var(--acc);transform:scaleX(0);transform-origin:left center}
.cuerpo.con-acento{padding-left:8px}
.pastilla{background:var(--acc);color:var(--ink);font-weight:900;
  text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.tira-ink{background:var(--ink);color:#fff;font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;white-space:nowrap}
.codigo{background:var(--ink);color:var(--acc);font-weight:900;
  display:flex;align-items:center;justify-content:center;letter-spacing:1px}

/* ── Piloto de directo ─────────────────────────────────────── */
.vivo{display:flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
  font-weight:900;letter-spacing:2px;white-space:nowrap}
.vivo i{width:11px;height:11px;border-radius:50%;background:#E33127;display:block;
  animation:gc-late 1.8s ease-in-out infinite}
@keyframes gc-late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.25)}}

/* ── Elementos que entran y salen ──────────────────────────── */
.gc-oculto{opacity:0}
@media(prefers-reduced-motion:reduce){
  .vivo i{animation:none}
  .pieza>.fondo,.filete{transition:none!important}
}