/* TG 3GM — Sistema de diseño "Teatro Global 2": tokens y base.
   Portado del prototipo v5 (index.html / pieza.html). */
:root{
  --blanco:#ffffff; --papel:#f7f6f3; --niebla:#eceae5;
  --linea:#d8d0c4; --linea-fuerte:#c3b9a9;
  /* Borde de los controles de formulario: más oscuro que el filete
     decorativo para cumplir el 3:1 de contraste no textual (WCAG). */
  --borde-campo:#948877;
  /* --tinta-3 se oscureció de #8a8177 a #6f685e: con el anterior, los
     metadatos (11-12 px) se quedaban en 3,8:1 sobre blanco, por debajo
     del 4,5:1 exigido. Ahora da 5,5:1 sobre blanco y 4,8:1 sobre el
     papel de las viñetas. */
  --tinta:#1a1613; --tinta-2:#4a443d; --tinta-3:#6f685e;
  --rojo:#8b1a0e; --rojo-osc:#6f1109;
  --noche:#161210;
  --display:'Playfair Display',Georgia,serif;
  --lectura:'Newsreader',Georgia,serif;
  --ui:'Inter',system-ui,sans-serif;
  /* Fuente del wordmark "TG 3GM" (cabecera y pie). Se cambia solo aquí. */
  --masthead:'Outfit',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--blanco);color:var(--tinta);font-family:var(--lectura);
     -webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}

/* --- Accesibilidad (E7) --------------------------------------------- */

/* Foco visible en todo lo que se puede enfocar. Varios campos llevaban
   `outline:none` sin sustituto: quien navega con teclado se quedaba sin
   saber dónde estaba. Se usa :focus-visible para no molestar al ratón. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--rojo); outline-offset:2px; border-radius:0}
/* Sobre fondo oscuro el rojo se pierde: allí el anillo va en claro. */
.masthead-hero a:focus-visible, .teletipo a:focus-visible,
footer a:focus-visible, .rot-barra a:focus-visible{
  outline-color:#f2ece0}

/* Saltar al contenido: primer tabulador de la página. */
.saltar{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--rojo);color:#fff;padding:10px 18px;
  font-family:var(--ui);font-size:13px;letter-spacing:.06em}
.saltar:focus{left:0}

/* Quien haya pedido menos animación no tiene por qué ver parpadeos. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* --- Tipografía fina (E7) ------------------------------------------- */
/* Reparte los titulares para que no quede una palabra huérfana en la
   última línea, y evita líneas sueltas al final de los párrafos. */
h1,h2,h3,h4,.rotulo{text-wrap:balance}
.standfirst,.entradilla{text-wrap:pretty}
p{text-wrap:pretty}
.vers{font-family:var(--ui);text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.lienzo{width:100%;background:var(--blanco)}
.lienzo-estrecho{max-width:1120px;margin:0 auto;background:var(--blanco);
  border-left:1px solid var(--linea);border-right:1px solid var(--linea)}

.topline{display:flex;justify-content:space-between;align-items:center;
  padding:8px 34px;font-family:var(--ui);font-size:11px;letter-spacing:.08em;
  color:var(--tinta-3);background:var(--papel);border-bottom:1px solid var(--linea)}
.topline .tension{display:flex;align-items:center;gap:8px;color:var(--tinta-2)}
.semaforo{width:9px;height:9px;border-radius:50%;background:var(--rojo);
  box-shadow:0 0 0 2px rgba(139,26,14,.18)}
.semaforo.verde{background:#2f6b3e;box-shadow:0 0 0 2px rgba(47,107,62,.18)}
.semaforo.amarillo{background:#b58a12;box-shadow:0 0 0 2px rgba(181,138,18,.18)}
.semaforo.naranja{background:#c0521c;box-shadow:0 0 0 2px rgba(192,82,28,.18)}