@import url("../../src/fonts.css");

/* =====================================================================
   BASE de la maqueta "Portada en vivo" (Teletón 2026, 6 y 7 de noviembre)
   Dueño: etapa Base. Lo cargan pantalla.html, panel.html e index.html.
   Contiene: tokens de marca, preferencias de accesibilidad en <html>,
   utilidades, keyframes compartidos, la réplica del chrome flotante
   (header, pastilla del himno, El Timón) y el reproductor simulado.
   Medidas del chrome: SPEC.md §1 (medidas reales de landing/src).
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* marca */
  --tg-rojo: #f5313e;            /* rojo marca: fondo de página, texto rojo sobre noche (5,1:1) */
  --tg-rojo-a11y: #e12d39;       /* rojo accesible: texto o botón sobre blanco y fondos con texto blanco chico (4,53:1) */
  --tg-noche: #160307;
  --tg-negro: #000;
  --tg-blanco: #fff;
  --tg-rosado: #ffd9dc;          /* solo en el destello del anillo */
  --tg-ficha: #fffdfd;           /* cara de las fichas del tablero */
  --tg-tecla-espesor: color-mix(in srgb, #e12d39 55%, #160307);
  --tg-rojo-presion: color-mix(in srgb, #e12d39 80%, #160307);

  /* blancos y noches con alfa (solo sobre noche o negro, nunca sobre el rojo del hero) */
  --tg-blanco-10: rgba(255, 255, 255, 0.1);
  --tg-blanco-12: rgba(255, 255, 255, 0.12);
  --tg-blanco-20: rgba(255, 255, 255, 0.2);
  --tg-blanco-25: rgba(255, 255, 255, 0.25);
  --tg-blanco-55: rgba(255, 255, 255, 0.55);
  --tg-blanco-60: rgba(255, 255, 255, 0.6);
  --tg-blanco-68: rgba(255, 255, 255, 0.68);
  --tg-blanco-72: rgba(255, 255, 255, 0.72);
  --tg-blanco-80: rgba(255, 255, 255, 0.8);
  --tg-noche-13: rgba(22, 3, 7, 0.13);   /* pliegue de la ficha */
  --tg-noche-25: rgba(22, 3, 7, 0.25);
  --tg-noche-72: rgba(22, 3, 7, 0.72);

  /* tipografía */
  --tg-font: "Duplet Rounded", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tg-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --a11y-fs: 1;                  /* A=1, A+=1,15, A++=1,3 (lo fija TG en <html>) */

  /* radios */
  --tg-r-4: 4px;
  --tg-r-5: 5px;
  --tg-r-6: 6px;
  --tg-r-7: 7px;
  --tg-r-8: 8px;
  --tg-r-12: 12px;
  --tg-r-14: 14px;
  --tg-r-16: 16px;
  --tg-r-18: 18px;
  --tg-r-20: 20px;
  --tg-r-24: 24px;
  --tg-r-pill: 999px;

  /* sombras */
  --tg-sombra-escenario: 0 24px 48px rgba(90, 5, 12, 0.35);
  --tg-halo: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 36px 6px rgba(245, 49, 62, 0.45);
  --tg-sombra-ficha: inset 0 -2px 0 rgba(0, 0, 0, 0.07), 0 6px 14px rgba(0, 0, 0, 0.35);
  --tg-sombra-flotante: 0 10px 30px rgba(0, 0, 0, 0.45);
  --tg-sombra-blanco-noche: 0 10px 24px rgba(0, 0, 0, 0.35);
  --tg-sombra-pildora-rojo: 0 8px 14px rgba(90, 5, 12, 0.35);

  /* espacios */
  --tg-riel: 16px;               /* 48 desde 48rem (abajo) */
  --tg-e-2: 2px;
  --tg-e-4: 4px;
  --tg-e-6: 6px;
  --tg-e-8: 8px;
  --tg-e-10: 10px;
  --tg-e-12: 12px;
  --tg-e-14: 14px;
  --tg-e-16: 16px;
  --tg-e-18: 18px;
  --tg-e-24: 24px;
  --tg-e-32: 32px;
  --tg-e-40: 40px;
  --tg-e-48: 48px;
  --tg-tactil: 44px;             /* área táctil mínima */

  /* movimiento */
  --tg-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --tg-ease-llegada: cubic-bezier(0.22, 1, 0.36, 1);
  --tg-ease-resorte: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tg-ease-material: cubic-bezier(0.4, 0, 0.2, 1);
  --tg-d-pulso: 1.9s;            /* punto en vivo y latidos */
  --tg-d-anillo: 9s;             /* anillo del escenario (lento a propósito) */
  --tg-d-rodillo: 420ms;
  --tg-d-cuadro: 1.7s;           /* cuadros del reproductor simulado */

  /* capas */
  --tg-z-portada: 0;
  --tg-z-particulas: 40;         /* bajo el header y el chrome */
  --tg-z-laminas: 45;
  --tg-z-menu: 46;
  --tg-z-header: 50;
  --tg-z-popover: 60;
  --tg-z-timon: 65;
  --tg-z-himno: 70;
  --tg-z-skip: 2147483001;

  /* foco */
  --tg-foco-claro: #fff;         /* sobre rojo o noche */
  --tg-foco-oscuro: #160307;     /* sobre blanco */

  /* reservas del chrome (TG.chrome.mount las reescribe en <html> según el tamaño real) */
  --tg-inicio: 60px;
  --tg-reserva-inferior: 118px;
  --tg-reserva-pastilla: 76px;
  --tg-reserva-fab: 118px;
}
@media (min-width: 48rem) {
  :root { --tg-riel: 48px; }
}

/* ---------- 2. Base mínima ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--tg-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
[hidden] {
  display: none !important;
}

/* ---------- 3. Utilidades ---------- */
.sr-only,
.tg-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.tg-tnum { font-variant-numeric: tabular-nums; }
.tg-sin-estilo {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: inherit;
}
.tg-icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  overflow: visible;
}
.tg-icon--relleno { fill: currentColor; }
.tg-rotulo-mayus {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Foco visible: 3 px blanco sobre rojo o noche, 3 px noche sobre blanco.
   Contextos: .tg-sobre-oscuro (raíz roja o noche) y .tg-sobre-claro (tarjeta blanca);
   o por elemento: .tg-foco (blanco) y .tg-foco-noche. */
.tg-foco:focus-visible,
.tg-sobre-oscuro :focus-visible {
  outline: 3px solid var(--tg-foco-claro);
  outline-offset: 2px;
}
.tg-foco-noche:focus-visible,
.tg-sobre-claro :focus-visible {
  outline: 3px solid var(--tg-foco-oscuro);
  outline-offset: 2px;
}

/* "Saltar el reproductor" (acceso rápido de la landing, index.css:3516) */
.tg-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.tg-skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--tg-z-skip);
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  background: #000;
  color: #fff;
  font-family: var(--tg-font);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---------- 4. Keyframes compartidos (copias exactas de landing/src/index.css) ---------- */
@keyframes tile-heart-beat {
  0%, 40%, 100% { transform: scale(1); }
  10% { transform: scale(1.32); }
  20% { transform: scale(1); }
  30% { transform: scale(1.24); }
}
@keyframes gira-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes timon-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes himno-ribbon {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes himno-marq {
  to { transform: translateX(-50%); }
}
@keyframes himno-eq {
  0%, 100% { transform: scaleY(0.32); }
  50% { transform: scaleY(1); }
}
@keyframes tg-sube {
  from { transform: translateY(100%); }
}
@keyframes tg-aparece {
  from { transform: translateY(12px); opacity: 0; }
}

/* ---------- 5. Preferencias en <html> ---------- */
/* "Pausar animaciones" (data-motion="off") y prefers-reduced-motion simulado (data-rm="1"):
   toda animación y transición CSS termina al tiro con el mismo resultado final.
   Lo que se anima con JS lee TG.reducedMotion() en el momento de animar.
   30-oct (F1, F15 a F18 en Safari): las transiciones van en 0s, no en 0,001 ms. transition-property vale "all"
   por defecto, así que 0,001 ms convertía CADA cambio de estilo de la página en una transición de 1 µs, y
   WebKit devuelve el valor de PARTIDA en las lecturas síncronas (getBoundingClientRect, scrollWidth): el
   encaje del hero medía la página de antes (la cifra salía 92 px fuera de su caja en el iPhone 13, el video
   más chico en el iPad, el Donar bajo El Timón en el celular apaisado). Con 0s no hay transición: el cambio
   es inmediato, igual que antes en Chrome. Las demoras declaradas (visibility tras un fundido) se conservan.
   Las animaciones siguen en 0,001 ms: solo existen donde se declaran y su animationend se usa (hora.js). */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after,
html[data-rm="1"] *,
html[data-rm="1"] *::before,
html[data-rm="1"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* Alto contraste (data-contraste="1"): enlaces subrayados, foco más grueso y
   bordes de sistema en el chrome (las piezas de cada etapa suman los suyos). */
html[data-contraste="1"] a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
html[data-contraste="1"] :focus-visible {
  outline-width: 4px !important;
  outline-offset: 3px !important;
}

/* =====================================================================
   6. CHROME FLOTANTE (réplica de la landing; no escala salvo textos × fs)
   ===================================================================== */

/* ---- 6.1 Header (Header.tsx:225-233) ---- */
.tgc-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--tg-z-header);
  display: flex;
  align-items: center;
  padding: 16px;
  color: #fff;
  font-family: var(--tg-font);
  --tgc-logo-h: 60px;
  --tgc-nav-gap: 36px;
  /* la caja del header es transparente y baja más que sus piezas (72 px en celular, 108 en
     tablet): deja pasar los toques a la portada que empieza en y 60 / 96; solo sus controles
     los reciben. */
  pointer-events: none;
}
.tgc-header > :not(.tgc-espacio) { pointer-events: auto; }
/* 5-nov (elección de Camilo, ronda 2 del artefacto "Logo y previa"): el header "Ala blanca". El logo normal (cruz roja,
   letras negras) va en un ala blanca que sale del borde izquierdo, del alto de la franja roja y hasta un poco después
   del logo (base.js, medirAla: --tgc-ala-alto y --tgc-ala-w); termina en media luna. Decorativa:
   sin puntero y bajo el logo (los dos van posicionados y el ala va antes). Queda igual con el menú abierto: el header va
   sobre el menú (--tg-z-header) */
.tgc-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tgc-ala-w, 0px);
  height: var(--tgc-ala-alto, 60px);
  border-radius: 0 calc(var(--tgc-ala-alto, 60px) / 2) calc(var(--tgc-ala-alto, 60px) / 2) 0;
  background: #fff;
  pointer-events: none;
}
/* el logo vive sobre el ala blanca: su anillo de foco va en noche (el blanco de .tg-foco no se vería) */
.tgc-logo.tg-foco:focus-visible { outline-color: var(--tg-noche); }
.tgc-logo {
  position: relative;
  flex: none;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  /* 5-nov: centrado en el alto del ala blanca (base.js, medirAla: --tgc-logo-y) */
  transform: translateY(var(--tgc-logo-y, 0px));
}
/* celular: el lockup mide 36 de alto; el botón suma 4 px arriba y abajo (44 de área táctil)
   sin mover nada: el margen negativo devuelve el mismo espacio en la fila. */
@media not all and (min-width: 48rem) {
  .tgc-logo { padding: 4px 0; margin: -4px 0; }
  /* 29-oct: en los celulares angostos el lockup se achica (ver más abajo) y el botón bajaba de 44 (34,5 en 320 px).
     El botón queda en 44 de alto con la imagen centrada; el margen negativo deja la fila del header igual */
  .tgc-header[data-modo="telefono"] .tgc-logo { display: flex; align-items: center; min-height: 44px; padding: 0; }
}
.tgc-logo img {
  display: block;
  height: 36px;
  width: auto;
  /* la proporción del logo de la fase (base.js, pintarLogo): "¡ES HOY!" o la fecha, sin el punto */
  aspect-ratio: var(--tgc-logo-asp, 6.247);
}
.tgc-espacio {
  flex: 1 1 auto;
  min-width: 0;
}
.tgc-nav {
  display: none;
  align-items: center;
  gap: var(--tgc-nav-gap);
}
.tgc-navlink {
  position: relative;
  padding: 8px 0;
  color: #fff;
  font-weight: 700;
  font-size: calc(16px * var(--a11y-fs));
  line-height: 1.5;
  letter-spacing: 0.025em;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.tgc-navlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 340ms var(--tg-ease-llegada);
}
.tgc-navlink:hover::after,
.tgc-navlink:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
html[data-contraste="1"] .tgc-navlink {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}
.tgc-a11y {
  position: relative;
  flex: none;
}
.tgc-a11y-boton {
  display: grid;
  place-items: center;
  width: calc(44px * var(--a11y-fs));
  height: calc(44px * var(--a11y-fs));
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.tgc-a11y-boton:hover,
.tgc-a11y-boton[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.15);
}
.tgc-a11y-boton .tg-icon {
  width: calc(22px * var(--a11y-fs));
  height: calc(22px * var(--a11y-fs));
}
/* 29-oct (WCAG 1.4.13): la muestra base.js con data-etiqueta en .tgc-a11y (mouse sobre el botón o sobre la
   etiqueta, o foco de teclado en el botón; Escape la descarta). Visible, recibe el puntero: el relleno de
   arriba la une al botón, sin hueco. Texto a 14 px (mínimo aceptado de la maqueta) */
.tgc-a11y-etiqueta {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  padding-top: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}
.tgc-a11y-etiqueta span {
  display: block;
  white-space: nowrap;
  border-radius: 999px;
  background: #000;
  /* 1-nov (pedido de Camilo: "se pierde un poco el negro, quizá hay que ponerle un contorno"): la etiqueta baja
     sobre la franja noche de la transmisión, donde el negro medía 1,05:1. El contorno blanco de 2 px (el mismo de
     Alto contraste) la separa de la noche (21:1) y del rojo del header (3,9:1) */
  border: 2px solid #fff;
  padding: 2px 10px;
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #fff;
}
.tgc-a11y[data-etiqueta] .tgc-a11y-etiqueta {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.15s ease;
}
.tgc-a11y-pop {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: var(--tg-z-popover);
  margin-top: 12px;
  width: 300px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: #000;
  color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.tgc-a11y-titulo {
  padding: 4px 10px 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
}
.tgc-donar-slot {
  display: none;
  flex: none;
  align-items: center;
}
/* 28-oct: el botón de Accesibilidad en el header del celular (modo teléfono: celular retrato y apaisado),
   junto a la hamburguesa. Área táctil de 44 x 44 y el círculo visible de 40 (como la hamburguesa, que se
   ve de 40 y mide 44): es chrome, no escala con A/A+/A++ (con A++ no rompe el header). Abre el mismo panel
   de Accesibilidad que el botón del nav de escritorio, aquí bajo el header, alineado a la derecha */
.tgc-a11y--movil { display: none; }
.tgc-header[data-modo="telefono"] .tgc-a11y--movil {
  display: block;
  position: static;
  margin: -2px 6px -2px 8px;
}
.tgc-header[data-menu-abierto] .tgc-a11y--movil { visibility: hidden; }
.tgc-a11y-boton--movil {
  position: relative;
  isolation: isolate;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
}
.tgc-a11y-boton--movil::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  transition: background-color 0.15s ease;
}
.tgc-a11y-boton--movil:hover,
.tgc-a11y-boton--movil[aria-expanded="true"] { background: transparent; }
.tgc-a11y-boton--movil:hover::before,
.tgc-a11y-boton--movil[aria-expanded="true"]::before { background: rgba(255, 255, 255, 0.15); }
.tgc-a11y-boton--movil .tg-icon { width: 22px; height: 22px; }
.tgc-a11y-pop--movil {
  left: auto;
  right: 16px;
  margin-top: 4px;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* desde 48rem con el header de 108 (riel de 48). Hoy el botón del celular solo se ve ahí en el celular
   apaisado, que desde el 29-oct (F14) usa el header de 72 y el riel de 16: lo corrige su regla, más abajo */
@media (min-width: 48rem) {
  .tgc-a11y-pop--movil { right: 48px; max-height: calc(100dvh - 128px); }
}
/* el lockup se achica lo justo en los celulares angostos (bajo ~390 px) para que el botón de Accesibilidad
   y la hamburguesa quepan sin tocarlo: 32 de márgenes, 44 + 14 del botón y 40 de la hamburguesa
   (--tgc-logo-asp es su proporción: 1271,3 / 203,5 con "¡ES HOY!" y 1332 / 203,5 con la fecha, base.js). 5-nov: cada
   regla descuenta además lo que el ala blanca suma a la derecha del logo (--tgc-ala-extra: 21 de su curva y 8 de aire
   en el celular retrato; lo pone base.js, medirAla). Es un tope (max-height): donde hay espacio queda la altura de siempre
   (36 en el celular, retrato y apaisado). En 320 px antes la hamburguesa ya tapaba
   "NOVIEMBRE"; ahora el lockup entero queda a la vista */
.tgc-header[data-modo="telefono"] .tgc-logo img {
  max-height: calc((100vw - 132px - var(--tgc-ala-extra, 29px)) / var(--tgc-logo-asp, 6.247));
}
/* Hamburguesa: se ve de 40 × 40 (la landing) pero el botón mide 44 × 44 (área táctil);
   el cuadro visible lo dibuja ::before 2 px adentro y el margen negativo conserva la fila. */
.tgc-menu {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -2px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.tgc-menu::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.15s ease;
}
.tgc-menu:hover::before { background: rgba(255, 255, 255, 0.2); }
/* ---- el destacado "Qué hacemos con tu aporte" (30-oct, pedido de Camilo: "que quede en el header y como algo
   destacado"; antes, el chip bajo Donar). Va en el nav de escritorio (antes de Accesibilidad) y en la fila del
   header sin nav (antes de Accesibilidad del celular y del menú); base.js elige el rótulo midiendo
   (data-aporte-forma): "largo", "corto" ("Tu aporte") o "icono" (solo el libro). Se ve con data-aporte="si" en
   el header.
   1-nov (Camilo eligió la versión 3, "Solapa de la memoria", entre tres: calcula-impacto/decisiones/botones/
   aporte/v3.html): deja la píldora noche translúcida. Es una solapa BLANCA que cuelga del borde superior del
   header, como la pestaña de un documento: la única forma del header que no es píldora ni círculo, así que se
   ve sin rojo relleno ni animación en reposo (no compite con "Dona aquí", que sigue siendo el único rojo
   relleno y el que late). Lleva la ceja "Memoria 2025" en rojo accesible (4,53:1 sobre blanco, 800 de peso)
   sobre el rótulo noche (20:1) y el libro con corazón en dúo tono. Al pasar el mouse o con el foco baja 5 px
   (crece por arriba: el borde superior nunca se despega) y su borde inferior pasa de rosado a rojo accesible.
   Cuelga del borde: margen superior negativo igual a lo que la separa del borde del header (su relleno, y en el
   nav además lo que el nav baja para centrarse en la fila del logo); el margen inferior negativo le quita el
   alto en la fila, así el header no crece (108 desde 48rem, 72 en el celular) y no empuja la portada. Su alto
   (62 con A, 81 con A++, más 5 al bajar) queda dentro del rojo del header (96 desde 48rem).
   Desde 48rem escala con A/A+/A++ (texto, libro y rellenos × fs, como el v3). En el celular es chrome: el
   marcapáginas mide 44 de ancho y solo el texto escala ---- */
.tgc-aporte {
  /* lo que separa la solapa del borde superior del header: su relleno (16 en el celular, 24 desde 48rem y 16 en el
     celular apaisado, las mismas reglas de .tgc-header) */
  --tgc-aporte-alza: 16px;
  position: relative;
  display: none;
  flex: none;
  align-self: flex-start;
  align-items: center;
  gap: calc(12px * var(--a11y-fs));
  margin-top: calc(-1 * var(--tgc-aporte-alza));
  margin-bottom: -120px;
  padding: calc(15px * var(--a11y-fs)) calc(22px * var(--a11y-fs)) calc(13px * var(--a11y-fs)) calc(16px * var(--a11y-fs));
  border-radius: 0 0 16px 16px;
  background: #fff;
  color: var(--tg-noche);
  box-shadow: 0 10px 18px -12px rgba(90, 5, 12, 0.75), inset 0 -3px 0 var(--tg-rosado);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: padding-top 0.32s var(--tg-ease-expo), box-shadow 0.25s ease;
}
@media (min-width: 48rem) {
  .tgc-aporte { --tgc-aporte-alza: 24px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .tgc-aporte { --tgc-aporte-alza: 16px; }
}
/* en el nav: el nav se centra en la fila del logo (el logo mide --tgc-logo-h; el nav, 44 × fs, el alto del botón de
   Accesibilidad), así que además sube lo que el nav baja */
.tgc-aporte--nav {
  margin-top: calc(-1 * var(--tgc-aporte-alza) - (max(var(--tgc-logo-h), 44px * var(--a11y-fs)) - 44px * var(--a11y-fs)) / 2);
}
.tgc-aporte-ico {
  flex: none;
  display: block;
}
.tgc-aporte-libro {
  display: block;
  width: calc(28px * var(--a11y-fs));
  height: calc(28px * var(--a11y-fs));
  overflow: visible;
}
.tgc-aporte-tapa { fill: var(--tg-rosado); }
.tgc-aporte-trazo { stroke: var(--tg-noche); stroke-width: 1.9; }
.tgc-aporte-relleno { fill: var(--tg-rojo-a11y); stroke: var(--tg-rojo-a11y); stroke-width: 1.2; }
.tgc-aporte-corazon {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  transition: transform 0.35s var(--tg-ease-resorte);
}
.tgc-aporte-textos {
  display: flex;
  flex-direction: column;
  gap: calc(1px * var(--a11y-fs));
}
.tgc-aporte-ceja {
  font-weight: 800;
  font-size: calc(12px * var(--a11y-fs));
  line-height: 1.15;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tg-rojo-a11y);
}
.tgc-aporte-rotulo {
  font-size: calc(16px * var(--a11y-fs));
  line-height: 1.2;
  letter-spacing: 0.01em;
}
/* 2-nov (revisión de los cuatro botones): la solapa baja con el foco de teclado siempre y con el puntero solo donde
   hay hover real (puntero fino), como las tarjetas del pie, los discos y la estampilla. En el celular y la tablet
   el :hover queda pegado tras el toque: la memoria se abre en otra pestaña y, al volver, la solapa seguía abajo y
   con el borde rojo hasta tocar otra cosa. Cada regla de hover va junto a su par de foco, en el mismo orden de
   antes (así el halo del foco, más abajo, sigue ganando si el puntero pasa sobre la solapa enfocada) */
.tgc-aporte:focus-visible {
  padding-top: calc(20px * var(--a11y-fs));
  box-shadow: 0 12px 20px -12px rgba(90, 5, 12, 0.8), inset 0 -3px 0 var(--tg-rojo-a11y);
}
@media (hover: hover) and (pointer: fine) {
  .tgc-aporte:hover {
    padding-top: calc(20px * var(--a11y-fs));
    box-shadow: 0 12px 20px -12px rgba(90, 5, 12, 0.8), inset 0 -3px 0 var(--tg-rojo-a11y);
  }
  .tgc-aporte:hover .tgc-aporte-corazon { transform: scale(1.14); }
}
.tgc-aporte:focus-visible .tgc-aporte-corazon { transform: scale(1.14); }
.tgc-aporte:active { padding-top: calc(16px * var(--a11y-fs)); transition-duration: 0.08s; }
/* el foco: el anillo blanco de .tg-foco (3 px, a 2 px) va sobre un halo noche de 7 px: tres anillos (noche,
   blanco, noche) que se leen sobre el rojo del header y sobre el blanco de la solapa */
.tgc-aporte:focus-visible {
  box-shadow: 0 0 0 7px var(--tg-noche), inset 0 -3px 0 var(--tg-rojo-a11y);
}
.tgc-aporte-corto { display: none; }
.tgc-header[data-aporte-forma="corto"] .tgc-aporte-corto { display: inline; }
.tgc-header[data-aporte-forma="corto"] .tgc-aporte-largo { display: none; }
/* solo el libro: el marcapáginas, del ancho de los botones redondos (44 × fs) y algo más alto que ellos */
.tgc-header[data-aporte-forma="icono"] .tgc-aporte {
  justify-content: center;
  width: calc(44px * var(--a11y-fs));
  padding: calc(17px * var(--a11y-fs)) 0 calc(15px * var(--a11y-fs));
  border-radius: 0 0 14px 14px;
}
.tgc-header[data-aporte-forma="icono"] .tgc-aporte:focus-visible { padding-top: calc(21px * var(--a11y-fs)); }
@media (hover: hover) and (pointer: fine) {
  .tgc-header[data-aporte-forma="icono"] .tgc-aporte:hover { padding-top: calc(21px * var(--a11y-fs)); }
}
.tgc-header[data-aporte-forma="icono"] .tgc-aporte:active { padding-top: calc(18px * var(--a11y-fs)); }
.tgc-header[data-aporte-forma="icono"] .tgc-aporte-libro {
  width: calc(25px * var(--a11y-fs));
  height: calc(25px * var(--a11y-fs));
}
.tgc-header[data-aporte-forma="icono"] .tgc-aporte-textos { display: none; }
/* dónde se ve: el del nav, con el nav de escritorio (el nav no se ve en los otros modos); el de la fila, sin él
   (la regla del nav, más abajo, lo esconde). Con el menú abierto el de la fila se esconde y conserva su lugar,
   como Accesibilidad del celular: el menú ya lo trae */
.tgc-header[data-aporte="si"] .tgc-aporte--nav,
.tgc-header[data-aporte="si"] .tgc-aporte--barra { display: inline-flex; }
.tgc-header[data-aporte="si"] .tgc-aporte--barra { margin-right: 12px; }
.tgc-header[data-menu-abierto] .tgc-aporte { visibility: hidden; }
/* mientras base.js prueba las formas para medirlas (sinTransicionAporte), sin transición */
.tgc-header[data-aporte-midiendo] .tgc-aporte { transition: none; }
/* celular (retrato y apaisado): chrome. Rellenos, libro y radios fijos (el compacto del v3, 480 a 599 px); el
   texto escala con A/A+/A++. Arriba y abajo va más justo que el v3 (9 y 8 en vez de 11 y 10, con el interlineado
   más corto): en el celular apaisado de 667 x 375 el rojo termina en y 60 y con A++ la solapa medía 63; así mide
   57 y, al bajar 3 px con el foco, 60. Accesibilidad se acerca 2 px: entre las formas visibles quedan 8 px, como
   entre Accesibilidad y el menú */
.tgc-header[data-modo="telefono"] .tgc-aporte {
  gap: 9px;
  margin-left: 8px;
  margin-right: 0;
  padding: 9px 16px 8px 12px;
  border-radius: 0 0 14px 14px;
}
.tgc-header[data-modo="telefono"] .tgc-aporte:focus-visible { padding-top: 12px; }
@media (hover: hover) and (pointer: fine) {
  .tgc-header[data-modo="telefono"] .tgc-aporte:hover { padding-top: 12px; }
}
.tgc-header[data-modo="telefono"] .tgc-aporte:active { padding-top: 10px; }
.tgc-header[data-modo="telefono"] .tgc-aporte-libro { width: 24px; height: 24px; }
.tgc-header[data-modo="telefono"] .tgc-aporte-textos { gap: 1px; }
.tgc-header[data-modo="telefono"] .tgc-aporte-ceja { font-size: calc(11.5px * var(--a11y-fs)); line-height: 1.1; }
.tgc-header[data-modo="telefono"] .tgc-aporte-rotulo { font-size: calc(15px * var(--a11y-fs)); line-height: 1.15; }
/* el marcapáginas del celular: 44 de ancho, 57 de alto (60 al bajar con el foco: el rojo del celular retrato
   termina en y 60; el v3 bajaba 4, aquí 3). Ocupa en la fila lo mismo que la insignia de antes (6 de aire + 44):
   el logo queda de 30 px de alto en 390 y de 20 en 320, como el 31-oct. Entre su borde y el círculo de
   Accesibilidad quedan 8 px (6 + los 2 de adentro del círculo) */
.tgc-header[data-modo="telefono"][data-aporte-forma="icono"] .tgc-aporte {
  width: 44px;
  margin-left: 6px;
  padding: 17px 0 15px;
}
.tgc-header[data-modo="telefono"][data-aporte-forma="icono"] .tgc-aporte:focus-visible { padding-top: 20px; }
@media (hover: hover) and (pointer: fine) {
  .tgc-header[data-modo="telefono"][data-aporte-forma="icono"] .tgc-aporte:hover { padding-top: 20px; }
}
.tgc-header[data-modo="telefono"][data-aporte-forma="icono"] .tgc-aporte:active { padding-top: 18px; }
.tgc-header[data-modo="telefono"][data-aporte-forma="icono"] .tgc-aporte-libro { width: 25px; height: 25px; }
.tgc-header[data-modo="telefono"][data-aporte="si"] .tgc-a11y--movil { margin-left: 6px; }
/* solo el libro en el celular retrato: el logo cede su ancho (6 + 44 del marcapáginas − 2 que se acerca
   Accesibilidad = 48 px más que la regla de abajo). En 390 px queda de 30 px de alto; en 320, de 20 */
.tgc-header[data-modo="telefono"][data-aporte="si"][data-aporte-forma="icono"] .tgc-logo img {
  max-height: calc((100vw - 180px - var(--tgc-ala-extra, 29px)) / var(--tgc-logo-asp, 6.247));
}
/* 2-nov (decisión 5 de Camilo, 1-nov 19:50): bajo 360 px de ancho el header del celular deja la fecha "6 y 7 de
   noviembre" del lockup y muestra solo la cruz y "Teletón", de 26 px de alto (el alto que el lockup entero tiene en
   360 px). Antes el lockup entero bajaba a 20 px en 320, más chico que los controles de 44 de al lado. Es la misma
   imagen recortada (object-fit): la cruz y "Teletón" ocupan el 45,4 % izquierdo del lockup (de x 238,5 a 893 en su
   viewBox de 1443 de ancho; la fecha empieza en x 964, con el punto. 5-nov: con el ala, "¡ES HOY!" o la fecha empiezan
   en x 975 y quedan fuera del recorte igual). El botón mide lo mismo que la imagen, así que
   base.js (medirAporteBarra) cuenta el ancho nuevo. Guarda en px, no en rem: el lockup y los controles del header
   del celular son px (no escalan con la letra del navegador), como la guarda de 1264 px del nav. Solo con el
   marcapáginas en el header (data-aporte="si", la portada en vivo): sin él (gracias, apagado, ?aporte=0) el lockup
   entero ya mide 26,5 px en 320 y la fase gracias no se toca */
@media not all and (min-width: 360px) {
  .tgc-header[data-modo="telefono"][data-aporte="si"] .tgc-logo img,
  .tgc-header[data-modo="telefono"][data-aporte="si"][data-aporte-forma="icono"] .tgc-logo img {
    width: calc(26px * 654.5 / 203.5);
    height: 26px;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: left center;
  }
}
/* movimiento reducido y "Pausar animaciones": sin transición (lo hace la regla global) y el corazón no crece; la
   solapa baja igual, de una vez, para que el hover y el foco se sigan viendo */
@media (prefers-reduced-motion: reduce) {
  .tgc-aporte:is(:hover, :focus-visible) .tgc-aporte-corazon { transform: none; }
}
html:is([data-motion="off"], [data-rm="1"]) .tgc-aporte:is(:hover, :focus-visible) .tgc-aporte-corazon { transform: none; }
.tgc-header[data-donar="si"]:not([data-modo="telefono"]) .tgc-donar-slot:not(:empty) {
  display: flex;
  margin-right: 12px;
}
@media (min-width: 48rem) {
  .tgc-header { padding: 24px 48px; }
  .tgc-logo img { height: var(--tgc-logo-h); }
}
/* 29-oct (F19): en el iPhone apaisado (viewport-fit=cover) el logo y la hamburguesa no entran en la zona de la
   isla. Fuera del iPhone env() vale 0 y el relleno queda en 16.
   29-oct (F14, cerrar): el celular apaisado es celular en todos sus anchos. Un solo riel de 16 más el área
   segura (calc, no max: el mismo de Iaán, los auspiciadores y el flotante en tablero.css, y el de la
   pastilla y El Timón, más abajo; con max el header iba en 47 y ellos en 63 en el iPhone 13 apaisado), y el
   header compacto de 72 px de 667 x 375 (logo de 36, con su área táctil de 44). Antes, desde 48rem (844 x 390,
   932 x 430) iba con el header de la tablet: riel de 48 y 108 px de alto, el borde derecho del menú 30 px antes
   que el de Donar. La hamburguesa sobresale 2 px de su fila: con 16 de riel nunca toca la isla */
@media (orientation: landscape) and (max-height: 500px) {
  .tgc-header {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }
  .tgc-logo img { height: 36px; }
  .tgc-header[data-modo="telefono"] .tgc-logo {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: -4px 0;
    padding: 0;
  }
  /* el panel de Accesibilidad, al borde visible de la hamburguesa y bajo el header de 72 */
  .tgc-a11y-pop--movil {
    right: calc(16px + env(safe-area-inset-right));
    max-height: calc(100dvh - 80px - max(16px, env(safe-area-inset-bottom)));
  }
}
/* nav de escritorio: desde 79rem Y 1264 px (NAV_ESCRITORIO_QUERY). La tablet (forceDrawer) usa hamburguesa. */
@media (min-width: 79rem) and (min-width: 1264px) {
  .tgc-header[data-modo="escritorio"] .tgc-nav { display: flex; }
  .tgc-header[data-modo="escritorio"] .tgc-menu { display: none; }
  .tgc-header[data-modo="escritorio"][data-aporte] .tgc-aporte--barra { display: none; }
  .tgc-header[data-modo="escritorio"][data-donar="si"] .tgc-donar-slot:not(:empty) {
    margin-left: var(--tgc-nav-gap);
    margin-right: 0;
  }
}

/* ---- 6.2 Controles de accesibilidad (popover y menú) ---- */
.tgc-ctl {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tgc-ctl-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.tgc-ctl-rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tgc-ctl-rotulo .tg-icon { color: rgba(255, 255, 255, 0.85); }
.tgc-ctl-seg {
  display: flex;
  flex: none;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
.tgc-ctl-seg button {
  min-width: 40px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.tgc-ctl-seg button[aria-pressed="true"] {
  background: #fff;
  color: var(--tg-noche);
}
/* 29-oct: con el dedo, A / A+ / A++ miden 44 x 44 (en el panel del celular y en el menú) */
@media (pointer: coarse) {
  .tgc-ctl-seg button { min-width: 44px; min-height: 44px; }
}
.tgc-switch {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.tgc-switch:hover { background: rgba(255, 255, 255, 0.08); }
.tgc-switch-pista {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  transition: background-color 0.15s ease;
}
.tgc-switch-pista::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.tgc-switch[aria-checked="true"] .tgc-switch-pista { background: var(--tg-rojo-a11y); }
.tgc-switch[aria-checked="true"] .tgc-switch-pista::after { transform: translateX(16px); }
.tgc-ctl--grande .tgc-ctl-fila {
  font-size: calc(18px * var(--a11y-fs));
  font-weight: 800;
  padding: 10px 8px;
}
.tgc-ctl--grande .tgc-switch-pista { width: 48px; height: 28px; }
.tgc-ctl--grande .tgc-switch-pista::after { width: 24px; height: 24px; }
.tgc-ctl--grande .tgc-switch[aria-checked="true"] .tgc-switch-pista::after { transform: translateX(20px); }

/* ---- 6.3 Menú (drawer) ---- */
.tgc-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--tg-z-menu);
  overflow-y: auto;
  /* 5-nov: el control enfocado con Tab se desplaza a la vista libre del header (arriba) y de la pastilla (abajo),
     los mismos rellenos de .tgc-drawer-nav (base.js, el Tab del menú) */
  scroll-padding-top: 96px;
  scroll-padding-bottom: 144px;
  overscroll-behavior: contain;
  background: #000;
  color: #fff;
  font-family: var(--tg-font);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.tgc-drawer[data-abierto] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}
.tgc-drawer-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 96px 32px 144px;
}
/* 29-oct (F19): en el iPhone apaisado los ítems del menú se apartan de la isla (env() vale 0 fuera del iPhone).
   El relleno de abajo ya libra el indicador de inicio */
@media (orientation: landscape) and (max-height: 500px) {
  .tgc-drawer-nav {
    padding-left: max(32px, env(safe-area-inset-left));
    padding-right: max(32px, env(safe-area-inset-right));
  }
}
/* 29-oct: el "Cerrar menú" oculto es para el lector de pantalla (el diálogo del menú no contiene la ✕ del
   header y el cursor del lector queda dentro del menú). El Tab ya no pasa por él (la ✕ visible está en el
   ciclo); si el lector le da el foco, se muestra BAJO el header: arriba quedaba tapado por el logo (el
   header va sobre el menú). base.js mide el fin de las piezas del header en --tgc-cerrar-top */
.tgc-drawer-cerrar:focus {
  position: fixed !important;
  left: max(24px, calc(env(safe-area-inset-left) + 8px));
  top: var(--tgc-cerrar-top, 80px);
  z-index: 10;
  white-space: nowrap !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  padding: 10px 20px !important;
  border-radius: 999px;
  background: #fff;
  color: var(--tg-noche);
  font-size: calc(13px * var(--a11y-fs));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.tgc-drawer-grupo {
  margin: 0 0 8px;
  padding: 0 8px;
  font-size: calc(14px * var(--a11y-fs)); /* 5-nov: 14 px mínimo (antes 13) */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
}
.tgc-drawer-lista {
  display: flex;
  flex-direction: column;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.tgc-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 8px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: none;
  color: #fff;
  font-weight: 800;
  font-size: calc(24px * var(--a11y-fs));
  line-height: 1.15;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.tgc-drawer-item .tg-icon { color: var(--tg-rojo); }

/* ---- 6.4 Pastilla del himno (index.css:1330-1446) ---- */
.tgc-himno {
  position: fixed;
  inset: 0;
  z-index: var(--tg-z-himno);
  pointer-events: none;
  font-family: var(--tg-font);
}
.tgc-pill {
  position: fixed;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 8px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  max-width: calc(100vw - 32px);
  pointer-events: auto;
  transition: bottom 0.35s var(--tg-ease-material), opacity 0.2s ease, transform 0.2s ease;
}
.tgc-pill-anillo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.tgc-pill-anillo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  background: conic-gradient(#000, var(--tg-rojo), #fff, var(--tg-rojo), #000, var(--tg-rojo), #fff, var(--tg-rojo), #000);
  will-change: transform;
  animation: himno-ribbon 4.2s linear infinite;
}
/* Play de la pastilla: círculo rojo de 36 (la landing) en un botón de 44 × 44 (área táctil).
   El círculo lo dibuja ::before 4 px adentro; el margen negativo conserva el alto de 52 de la
   pastilla y su ancho. El foco se acerca 2 px para quedar a 2 px del círculo visible. */
.tgc-pill-play {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.tgc-pill-play::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 50%;
  background: var(--tg-rojo-a11y);
}
.tgc-pill-play:focus-visible { outline-offset: -2px; }
.tgc-pill-play .tg-icon { width: 15px; height: 15px; }
.tgc-pill-corazon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--tg-rojo);
}
.tgc-late { animation: tile-heart-beat 1.9s ease-in-out infinite; transform-origin: center; }
.tgc-eq {
  display: inline-flex;
  flex: none;
  align-items: flex-end;
  gap: 2.5px;
  height: 15px;
}
.tgc-eq i {
  width: 3px;
  height: 35%;
  border-radius: 2px;
  background: var(--tg-rojo);
  transform-origin: bottom;
}
.tgc-eq.is-on i { animation: himno-eq 0.9s ease-in-out infinite; }
.tgc-eq i:nth-child(1) { animation-delay: 0s; }
.tgc-eq i:nth-child(2) { animation-delay: 0.18s; }
.tgc-eq i:nth-child(3) { animation-delay: 0.36s; }
.tgc-eq i:nth-child(4) { animation-delay: 0.09s; }
.tgc-pill-marq {
  flex: 0 1 auto;
  min-width: 0;
  width: clamp(118px, 40vw, 168px);
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tgc-pill-pista {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: himno-marq 13s linear infinite;
}
.tgc-pill-unidad { display: inline-flex; align-items: center; padding-right: 30px; }
/* 29-oct: 14 px como mínimo en la portada (antes 13 y 12; el alto de la pastilla no cambia: lo dan sus botones de 44) */
.tgc-pill-cancion { font-weight: 800; font-size: calc(14px * var(--a11y-fs)); color: #fff; }
.tgc-pill-x { margin: 0 8px; font-weight: 800; font-size: calc(14px * var(--a11y-fs)); color: rgba(255, 255, 255, 0.55); }
.tgc-pill-artistas { font-weight: 600; font-size: calc(14px * var(--a11y-fs)); color: rgba(255, 255, 255, 0.82); }
.tgc-pill-cerrar {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
/* ▼ de la pastilla: círculo de 26 (la landing) en un botón de 44 × 44. Cabe sin tocar a nadie:
   9 px a la izquierda es la separación con la marquesina (decorativa) y a la derecha y arriba
   y abajo cae en el relleno de la pastilla. El foco queda a 2 px del círculo visible. */
.tgc-pill-mas {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.tgc-pill-mas::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.tgc-pill-mas:focus-visible { outline-offset: -7px; }
.tgc-pill-mas .tg-icon { width: 15px; height: 15px; }
.tgc-pill-cerrar .tg-icon { width: 13px; height: 13px; }
.tgc-pill-cerrar:hover,
.tgc-pill-cerrar:focus-visible { background: rgba(255, 255, 255, 0.22); }
@media not all and (min-width: 48rem) {
  .tgc-pill {
    border-color: rgba(255, 255, 255, 0.68);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.45);
    max-width: calc(100vw - 88px);
  }
}
/* pantallas muy angostas (<23rem): corazón y ecualizador ceden su espacio a la marquesina */
@media not all and (min-width: 23rem) {
  .tgc-pill-corazon,
  .tgc-pill .tgc-eq { display: none; }
}
@media (min-width: 48rem) {
  .tgc-pill { left: 48px; bottom: 64px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* 29-oct (F19): en el iPhone apaisado la pastilla no entra en la zona de la isla ni en la del indicador de
     inicio (env() vale 0 fuera del iPhone: ahí sigue en 16 y 12). base.js suma el mismo inset a las reservas.
     F14 (cerrar): de lado, el riel de 16 más el área segura, el del header y el del flotante que va con ella */
  .tgc-pill {
    left: calc(16px + env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}
/* tapada por El Timón: oculta e inerte (el audio sigue) */
.tgc-himno[data-cubierto] .tgc-pill,
.tgc-himno[data-cubierto] .tgc-barra {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(14px);
}
.tgc-himno[data-cubierto] .tgc-pill-anillo::before,
.tgc-himno[data-cubierto] .tgc-eq i,
.tgc-himno[data-cubierto] .tgc-late,
.tgc-himno[data-cubierto] .tgc-pill-pista {
  animation-play-state: paused;
}

/* huincha de escritorio (≥48rem) */
.tgc-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
  padding: 0 28px;
  background: #000;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.tgc-barra-play {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tg-rojo-a11y);
  color: #fff;
  cursor: pointer;
}
.tgc-barra-play .tg-icon { width: 18px; height: 18px; }
.tgc-barra-corazon { flex: none; width: 24px; height: 24px; color: var(--tg-rojo); }
.tgc-barra-titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(16px * var(--a11y-fs));
}
.tgc-barra-titulo b { font-weight: 800; }
.tgc-barra-sub { color: rgba(255, 255, 255, 0.6); font-weight: 600; }
/* ▲ de la huincha: círculo de 36 en un botón de 44 × 44 (la huincha también se usa en tablet táctil) */
.tgc-barra-cerrar {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.tgc-barra-cerrar::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.tgc-barra-cerrar:focus-visible { outline-offset: -2px; }
/* 29-oct (F19): la huincha va de borde a borde; en el iPhone apaisado sus botones se apartan de la isla y del
   indicador de inicio por relleno (border-box: el alto de 72 no cambia, ni su reserva). Va DESPUÉS de la regla
   base de .tgc-barra (padding 0 28px): antes de ella, la cascada la pisaba. El ▲ tiene margin -4px: a la
   derecha se suman esos 4 px para que el botón entero quede fuera de la isla */
@media (orientation: landscape) and (max-height: 500px) {
  .tgc-barra {
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, calc(env(safe-area-inset-right) + 4px));
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* reproductor del himno a pantalla completa (celular) */
.tgc-hoja {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 72px 24px 32px;
  overflow-y: auto;
  background: #000;
  color: #fff;
  pointer-events: auto;
  text-align: center;
  animation: tg-sube 0.32s var(--tg-ease-expo);
}
.tgc-hoja-cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--tg-noche);
  font-weight: 800;
  font-size: calc(15px * var(--a11y-fs));
  cursor: pointer;
}
.tgc-hoja-portada {
  width: min(64vw, 260px);
  aspect-ratio: 1;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.tgc-hoja-titulo { margin: 8px 0 0; font-size: calc(24px * var(--a11y-fs)); font-weight: 800; line-height: 1.15; }
.tgc-hoja-artistas { margin: 0; font-size: calc(16px * var(--a11y-fs)); font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.tgc-hoja .tgc-eq { height: 22px; }
.tgc-hoja .tgc-eq i { width: 4px; }
.tgc-hoja-play {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tg-rojo-a11y);
  color: #fff;
  cursor: pointer;
}

/* ---- 6.5 El Timón (index.css:1738-1913 y 2655-2880) ---- */
.tgc-timon {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--tg-z-timon);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  font-family: var(--tg-font);
  transition: bottom 0.35s var(--tg-ease-material), right 0.35s var(--tg-ease-material), opacity 0.2s ease, transform 0.62s var(--tg-ease-expo);
}
.tgc-fab {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--tg-rojo);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.tgc-fab-corazon {
  display: grid;
  place-items: center;
  animation: tile-heart-beat 1.9s ease-in-out infinite;
}
.tgc-fab-corazon .tg-icon { width: 24px; height: 24px; }
.tgc-globo {
  position: relative;
  padding: 8px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  background: #000;
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: calc(13px * var(--a11y-fs));
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 22px rgba(0, 0, 0, 0.4);
  animation: timon-bob 2.6s ease-in-out infinite;
}
.tgc-globo:hover {
  background: #1c1c1c;
  animation-play-state: paused;
}
/* el globo también se toca (abre El Timón): 35 de alto visibles, 45 de área táctil.
   Solo crece en vertical: arriba hay aire y abajo quedan 4 px antes del FAB (separación 9). */
.tgc-globo::before {
  content: "";
  position: absolute;
  inset: -5px 0;
}
.tgc-globo-cola {
  position: absolute;
  right: 17px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: #000;
  border-right: 1.5px solid rgba(255, 255, 255, 0.92);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 2px;
  transform: rotate(45deg);
}
/* P3 de la portada: el globo cede su lugar, el corazón queda */
.tgc-timon[data-globo="oculto"] .tgc-globo { display: none; }
/* 28-oct: fuera de la previa El Timón no se monta a la vista (base.js, update({ timon: false })) */
.tgc-timon[hidden] { display: none !important; }
.tgc-timon[data-oculto] {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(120px);
}
.tgc-timon[data-oculto] .tgc-fab-corazon,
.tgc-timon[data-oculto] .tgc-globo,
.tgc-timon[data-tapado] .tgc-fab-corazon,
.tgc-timon[data-tapado] .tgc-globo {
  animation-play-state: paused;
}
@media (min-width: 48rem) {
  .tgc-timon {
    right: 48px;
    bottom: 64px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .tgc-globo-cola {
    right: -6px;
    bottom: auto;
    top: 50%;
    margin-top: -5px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.92);
    border-bottom: none;
    border-top: 1.5px solid rgba(255, 255, 255, 0.92);
    transform: rotate(45deg);
  }
  .tgc-fab { width: 56px; height: 56px; }
  .tgc-fab-corazon .tg-icon { width: 27px; height: 27px; }
}
/* con la huincha del himno desplegada (alto ≥ 561) el FAB se despega a 88 */
@media (min-width: 48rem) and (min-height: 561px) {
  .tgc-timon[data-barra] { bottom: 88px; }
}
@media (min-width: 48rem) and (max-height: 560px) {
  .tgc-timon { right: 16px; bottom: 12px; }
  .tgc-fab { width: 48px; height: 48px; }
  .tgc-fab-corazon .tg-icon { width: 24px; height: 24px; }
  .tgc-globo { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* 29-oct (F19): fuera de la zona de la isla y del indicador de inicio del iPhone apaisado. F14 (cerrar): de
     lado, el riel de 16 más el área segura, el del header y el del tablero */
  .tgc-timon { right: calc(16px + env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .tgc-fab { width: 48px; height: 48px; }
  .tgc-fab-corazon .tg-icon { width: 24px; height: 24px; }
  .tgc-globo { display: none; }
}

/* panel de El Timón (en la maqueta solo avisa; el chat real vive en la landing) */
.tgc-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--tg-z-timon);
  display: flex;
  flex-direction: column;
  height: min(82dvh, 640px);
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: var(--tg-font);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 28px 28px 0 0;
  animation: tg-sube 0.32s var(--tg-ease-expo);
}
.tgc-panel-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.tgc-panel-cruz {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tg-rojo-a11y);
  box-shadow: 0 0 22px rgba(245, 49, 62, 0.45);
}
.tgc-panel-cruz img { width: 22px; height: 22px; animation: tile-heart-beat 1.9s ease-in-out infinite; }
.tgc-panel-titulos { flex: 1; min-width: 0; }
.tgc-panel-titulo { margin: 0; font-size: calc(17px * var(--a11y-fs)); font-weight: 800; line-height: 1.2; }
.tgc-panel-sub { margin: 2px 0 0; font-size: calc(13px * var(--a11y-fs)); font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.tgc-panel-x {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.tgc-panel-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 24px;
}
.tgc-burbuja {
  margin: 0;
  max-width: 88%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px 18px 18px 18px;
  background: rgba(255, 255, 255, 0.08);
  font-size: calc(15px * var(--a11y-fs));
  font-weight: 600;
  line-height: 1.4;
}
.tgc-burbuja--nota { color: rgba(255, 255, 255, 0.8); font-size: calc(14px * var(--a11y-fs)); }
@media (min-width: 48rem) {
  .tgc-panel {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 380px;
    max-width: calc(100vw - 48px);
    height: min(70vh, 560px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 42px rgba(245, 49, 62, 0.14);
    animation: tg-aparece 0.24s var(--tg-ease-expo);
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .tgc-panel { left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: 100dvh; border-radius: 0; }
  /* 29-oct (F19): a pantalla completa en el iPhone apaisado, el fondo va de borde a borde y el contenido (la cruz,
     la ✕ y las burbujas) se aparta de la isla y del indicador de inicio. env() vale 0 fuera del iPhone */
  .tgc-panel {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---- 6.6 Alto contraste y colores forzados del chrome ---- */
html[data-contraste="1"] .tgc-pill,
html[data-contraste="1"] .tgc-barra,
html[data-contraste="1"] .tgc-hoja,
html[data-contraste="1"] .tgc-panel,
html[data-contraste="1"] .tgc-a11y-pop {
  background: #000 !important;
  border: 2px solid #fff !important;
}
html[data-contraste="1"] .tgc-pill-anillo { display: none; }
html[data-contraste="1"] .tgc-globo { border-width: 2px; border-color: #fff; }
html[data-contraste="1"] .tgc-menu::before { border: 2px solid #fff; }
html[data-contraste="1"] .tgc-a11y-boton--movil::before { border: 2px solid #fff; }
html[data-contraste="1"] .tgc-a11y-etiqueta span { border: 2px solid #fff; }
/* el destacado del header (1-nov, la solapa): un borde noche de 2 px por dentro (sin cambiar su medida: el rótulo
   se elige midiendo) separa el blanco del rojo del header; el borde inferior suma 2 px al acento rosado o rojo. El
   foco suma un halo noche de 10 px: el anillo blanco de Alto contraste (4 px, a 3) queda entre dos anillos noche */
html[data-contraste="1"] .tgc-aporte { box-shadow: inset 0 0 0 2px var(--tg-noche), inset 0 -5px 0 var(--tg-rosado); }
@media (hover: hover) and (pointer: fine) {
  html[data-contraste="1"] .tgc-aporte:hover { box-shadow: inset 0 0 0 2px var(--tg-noche), inset 0 -5px 0 var(--tg-rojo-a11y); }
}
html[data-contraste="1"] .tgc-aporte:focus-visible {
  box-shadow: 0 0 0 10px var(--tg-noche), inset 0 0 0 2px var(--tg-noche), inset 0 -5px 0 var(--tg-rojo-a11y);
}
@media (forced-colors: active) {
  .tgc-pill-anillo { display: none; }
  .tgc-pill,
  .tgc-barra,
  .tgc-panel,
  .tgc-hoja,
  .tgc-a11y-pop,
  .tgc-a11y-etiqueta span { border: 2px solid CanvasText; }
  .tgc-fab,
  .tgc-globo,
  .tgc-pill-cerrar { border: 2px solid ButtonText; }
  /* botones de 44 con la forma visible en ::before: el borde de sistema va en la forma */
  .tgc-menu::before,
  .tgc-a11y-boton--movil::before,
  .tgc-pill-play::before,
  .tgc-pill-mas::before,
  .tgc-barra-cerrar::before { border: 2px solid ButtonText; }
  .tgc-switch-pista { border: 1px solid ButtonText; }
  /* el destacado del header (1-nov, la solapa): fondo del sistema y borde de enlace en los tres lados que cuelgan
     (arriba la corta el borde de la ventana); la ceja, el trazo y el corazón del libro toman el color de enlace y
     la tapa, el fondo */
  .tgc-aporte { background: Canvas; color: LinkText; border: 2px solid LinkText; border-top: 0; box-shadow: none; }
  .tgc-aporte-ceja { color: LinkText; }
  .tgc-aporte-tapa { fill: Canvas; }
  .tgc-aporte-trazo { stroke: LinkText; }
  .tgc-aporte-relleno { fill: LinkText; stroke: LinkText; }
  .tgc-ctl-seg button[aria-pressed="true"] { outline: 3px solid Highlight; }
  /* El lockup blanco es una imagen: con colores forzados el fondo pasa a Canvas (blanco en los
     temas claros) y el logo desaparecía. Se redibuja con la misma silueta en CanvasText, que
     contrasta con Canvas en cualquier tema (claro u oscuro); la imagen queda (su alt nombra el
     botón) pero transparente. Va en ::after para no recortar el foco del botón. */
  .tgc-logo img { opacity: 0; }
  .tgc-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    forced-color-adjust: none;
    background-color: CanvasText;
    -webkit-mask: url("../../assets/logo-teleton-hoy-blanco.svg") center / contain no-repeat;
            mask: url("../../assets/logo-teleton-hoy-blanco.svg") center / contain no-repeat;
    pointer-events: none;
  }
  /* 5-nov: la silueta del logo de la fase (base.js, pintarLogo) */
  .tgc-header[data-logo="fecha"] .tgc-logo::after {
    -webkit-mask-image: url("../../assets/logo-teleton-fecha-blanco.svg");
            mask-image: url("../../assets/logo-teleton-fecha-blanco.svg");
  }
  /* 2-nov (decisión 5): bajo 360 px el lockup va recortado (solo la cruz y "Teletón", 26 px de alto). La silueta se
     dibuja del mismo alto desde la izquierda y la caja del botón corta la fecha, igual que la imagen */
  @media not all and (min-width: 360px) {
    .tgc-header[data-modo="telefono"][data-aporte="si"] .tgc-logo::after {
      -webkit-mask-position: left center;
              mask-position: left center;
      -webkit-mask-size: auto 26px;
              mask-size: auto 26px;
    }
  }
}

/* =====================================================================
   7. REPRODUCTOR SIMULADO (TG.player): imita el embed de YouTube.
   La interfaz de YouTube va en Roboto/Arial y con el rojo del propio
   YouTube a propósito: es la simulación de una pieza de un tercero.
   Nada de la portada se dibuja encima: todo esto vive DENTRO del reproductor.
   ===================================================================== */
.tgp {
  --tgp-yt-rojo: #ff0033;
  --tgp-ico: clamp(18px, 4.6cqw, 24px);
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* 16:9 con piso de 200 de alto. Sin aspect-ratio a propósito: con min-height, aspect-ratio
     transfiere un ANCHO mínimo de 356 px y el reproductor desbordaba hosts de 320 en grid y flex.
     El alto lo da ::before (padding en % del ancho). */
  min-height: 200px;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: Roboto, Arial, "Helvetica Neue", sans-serif;
  container-type: inline-size;
  isolation: isolate;   /* contexto propio: el anillo de foco (::after) queda sobre todas sus capas */
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.tgp::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.tgp[data-poster] { cursor: default; }
/* Foco de teclado: un outline con separación negativa se pintaba DEBAJO de las capas absolutas
   (cuadros, sombras, panel) y no se veía. El anillo es ::after, sobre todo, por dentro (en
   celular el reproductor va de borde a borde y no hay lugar afuera): 3 px blanco y, por dentro,
   2 px noche, para que se lea sobre un cuadro claro u oscuro. Con colores forzados el borde
   pasa a Highlight (la sombra se descarta en ese modo). */
.tgp:focus-visible { outline: none; }
.tgp:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 3px solid #fff;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--tg-noche);
  pointer-events: none;
}
html[data-contraste="1"] .tgp:focus-visible::after { border-width: 4px; }
.tgp-video {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
  overflow: hidden;
}
.tgp-cuadro {
  position: absolute;
  inset: 0;
  background-image: url("../../assets/spot-en-el-barrio-v1.webp");
  background-size: cover !important;
  background-position: center !important;
  background-size: 500% 400%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.tgp-cuadro.is-on { opacity: 1; }
.tgp-velo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
}
.tgp[data-estado="nuevo"] .tgp-velo { opacity: 1; background: rgba(0, 0, 0, 0.72); }
/* sala de espera: la transmisión aún no parte, así que no se ve ningún cuadro del live
   (YouTube muestra ahí una miniatura fija): fondo noche quieto, sin cuadros. */
.tgp[data-estado="espera"] .tgp-video { visibility: hidden; }
.tgp[data-estado="espera"] .tgp-velo { opacity: 1; background: var(--tg-noche); }
.tgp[data-estado="detenido"] .tgp-velo { opacity: 1; background: rgba(0, 0, 0, 0.3); }
.tgp[data-estado="error"] .tgp-velo { opacity: 1; background: #0f0f0f; }
.tgp-sombra-sup,
.tgp-sombra-inf {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.tgp-sombra-sup { top: 0; height: 40%; background: linear-gradient(rgba(0, 0, 0, 0.62), transparent); }
.tgp-sombra-inf { bottom: 0; height: 42%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.66)); }

/* barra superior: avatar del canal, título, acciones */
.tgp-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.2cqw, 12px);
  padding: clamp(8px, 2.4cqw, 12px) clamp(10px, 2.8cqw, 16px);
}
.tgp-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(28px, 7.5cqw, 40px);
  height: clamp(28px, 7.5cqw, 40px);
  border-radius: 50%;
  background: #e12d39;
}
.tgp-avatar img { width: 58%; height: 58%; }
.tgp-titulos { flex: 1; min-width: 0; }
.tgp-titulo,
.tgp-canal { display: block; }
.tgp-titulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(13px, 3.5cqw, 18px);
  font-weight: 500;
  line-height: 1.3;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.tgp-canal {
  font-size: clamp(11px, 2.6cqw, 13px);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.3;
}
.tgp-acciones { display: flex; flex: none; gap: clamp(10px, 3cqw, 20px); }
.tgp-accion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
}
.tgp-accion .tg-icon { width: var(--tgp-ico); height: var(--tgp-ico); }
@container (max-width: 480px) {
  .tgp-accion span { display: none; }
}
@container (max-width: 360px) {
  .tgp-acciones { display: none; }
}

/* altavoz tachado del autoplay sin sonido */
.tgp-mute {
  position: absolute;
  left: clamp(8px, 2.4cqw, 14px);
  top: clamp(8px, 2.4cqw, 14px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: clamp(6px, 1.8cqw, 10px) clamp(8px, 2.4cqw, 14px);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  font-size: clamp(12px, 3cqw, 15px);
  font-weight: 500;
}
.tgp-mute .tg-icon { width: clamp(20px, 5.4cqw, 28px); height: clamp(20px, 5.4cqw, 28px); }
@container (max-width: 420px) {
  .tgp-mute span { display: none; }
}

/* botón de play nativo (rojo) */
.tgp-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(52px, 14cqw, 68px);
  aspect-ratio: 68 / 48;
  transform: translate(-50%, -50%);
  border-radius: 28% / 40%;
  background: var(--tgp-yt-rojo);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.tgp-play .tg-icon { width: 42%; height: auto; color: #fff; }

/* insignia EN VIVO de la miniatura (antes de reproducir) */
.tgp-insignia {
  position: absolute;
  left: clamp(8px, 2.4cqw, 14px);
  bottom: clamp(8px, 2.4cqw, 14px);
  padding: 3px 6px;
  border-radius: 3px;
  background: var(--tgp-yt-rojo);
  font-size: clamp(11px, 2.6cqw, 13px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* barra de controles */
.tgp-barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 clamp(8px, 2.4cqw, 14px) clamp(2px, 1cqw, 6px);
}
.tgp-progreso {
  position: relative;
  height: 3px;
  margin: 0 2px 2px;
  background: rgba(255, 255, 255, 0.25);
}
.tgp-progreso i {
  position: absolute;
  inset: 0;
  background: var(--tgp-yt-rojo);
}
.tgp-progreso b {
  position: absolute;
  right: -5px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--tgp-yt-rojo);
}
.tgp-controles {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.6cqw, 18px);
  height: clamp(34px, 9cqw, 48px);
}
.tgp-controles .tg-icon { width: var(--tgp-ico); height: var(--tgp-ico); }
.tgp-vivo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(11px, 2.8cqw, 14px);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.tgp-vivo i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tgp-yt-rojo);
}
.tgp[data-estado="detenido"] .tgp-vivo i { background: #aaa; }
.tgp-flex { flex: 1; }
.tgp-marca { display: flex; align-items: center; gap: 4px; font-size: clamp(12px, 2.8cqw, 15px); font-weight: 700; letter-spacing: -0.02em; }
@container (max-width: 400px) {
  .tgp-ctl-cc,
  .tgp-ctl-ajustes { display: none; }
}

/* visibilidad por estado (los paneles propios van con [data-poster]) */
.tgp-top,
.tgp-mute,
.tgp-play,
.tgp-insignia,
.tgp-barra,
.tgp-sombra-sup,
.tgp-sombra-inf,
.tgp-panel { display: none; }
.tgp[data-estado="silencio"] .tgp-mute,
.tgp[data-estado="silencio"] .tgp-barra,
.tgp[data-estado="silencio"] .tgp-sombra-inf,
.tgp[data-estado="sonido"] .tgp-barra,
.tgp[data-estado="sonido"] .tgp-sombra-inf,
.tgp[data-estado="detenido"] .tgp-top,
.tgp[data-estado="detenido"] .tgp-play,
.tgp[data-estado="detenido"] .tgp-barra,
.tgp[data-estado="detenido"] .tgp-sombra-sup,
.tgp[data-estado="detenido"] .tgp-sombra-inf,
.tgp[data-estado="listo"] .tgp-top,
.tgp[data-estado="listo"] .tgp-play,
.tgp[data-estado="listo"] .tgp-insignia,
.tgp[data-estado="listo"] .tgp-sombra-sup,
.tgp[data-estado="bloqueado"] .tgp-top,
.tgp[data-estado="bloqueado"] .tgp-play,
.tgp[data-estado="bloqueado"] .tgp-insignia,
.tgp[data-estado="bloqueado"] .tgp-sombra-sup,
.tgp[data-estado="espera"] .tgp-top,
.tgp[data-estado="nuevo"] .tgp-top { display: flex; }
.tgp[data-estado="silencio"] .tgp-barra,
.tgp[data-estado="sonido"] .tgp-barra,
.tgp[data-estado="detenido"] .tgp-barra,
.tgp[data-estado="silencio"] .tgp-sombra-inf,
.tgp[data-estado="sonido"] .tgp-sombra-inf,
.tgp[data-estado="detenido"] .tgp-sombra-inf,
.tgp[data-estado="detenido"] .tgp-sombra-sup,
.tgp[data-estado="listo"] .tgp-sombra-sup,
.tgp[data-estado="bloqueado"] .tgp-sombra-sup { display: block; }
.tgp[data-estado="detenido"] .tgp-play,
.tgp[data-estado="listo"] .tgp-play,
.tgp[data-estado="bloqueado"] .tgp-play { display: grid; }
.tgp[data-estado="espera"] .tgp-panel,
.tgp[data-estado="nuevo"] .tgp-panel,
.tgp[data-estado="error"] .tgp-panel,
.tgp[data-poster] .tgp-panel { display: flex; }

/* paneles de YouTube (espera, nuevo, error) */
.tgp-panel {
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2cqw, 12px);
  padding: 52px 16px 16px;
  text-align: center;
}
.tgp-panel .tg-icon { width: clamp(26px, 7cqw, 40px); height: clamp(26px, 7cqw, 40px); opacity: 0.9; }
.tgp-panel-titulo { font-size: clamp(15px, 4.2cqw, 22px); font-weight: 500; line-height: 1.25; }
.tgp-panel-texto { max-width: 34em; font-size: clamp(12px, 3cqw, 15px); color: rgba(255, 255, 255, 0.78); line-height: 1.35; }
/* textos del reproductor en líneas parejas: sin una palabra sola abajo ("aquí.") */
.tgp-panel-titulo,
.tgp-panel-texto,
.tgp-poster-titulo,
.tgp-poster-texto { text-wrap: balance; }
.tgp-panel-enlace {
  margin-top: 4px;
  padding: 8px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: clamp(12px, 3cqw, 14px);
  font-weight: 500;
  text-decoration: none;
}
.tgp[data-estado="error"] .tgp-panel { padding-top: 16px; }

/* pósters propios (sin iframe): previa, retirada, sinsenal, caida, ahorro */
.tgp[data-poster] .tgp-panel {
  justify-content: center;
  justify-content: safe center;   /* si algo no cabe, se corta abajo y nunca el texto de arriba */
  padding: 14px 16px;
  gap: 10px;
  container-type: size;
  background: var(--tg-noche);
  font-family: var(--tg-font);
}
.tgp[data-poster="ahorro"] .tgp-panel,
.tgp[data-poster="quieto"] .tgp-panel,
.tgp[data-poster="sinvideo"] .tgp-panel { background: rgba(22, 3, 7, 0.62); }
.tgp-cruz { flex: none; width: 40px; height: 40px; }
.tgp-poster-titulo {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(calc(17px * var(--a11y-fs)), 4.4cqw, calc(28px * var(--a11y-fs)));
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.tgp[data-poster="retirada"] .tgp-poster-titulo,
.tgp[data-poster="sinsenal"] .tgp-poster-titulo,
.tgp[data-poster="caida"] .tgp-poster-titulo { font-size: clamp(calc(15px * var(--a11y-fs)), 3.6cqw, calc(22px * var(--a11y-fs))); }
.tgp-poster-texto {
  margin: 0;
  font-size: calc(15px * var(--a11y-fs));
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8);
}
.tgp-poster-boton {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 6px 18px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--tg-noche);
  font-family: var(--tg-font);
  font-size: calc(15px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.tgp-poster-boton .tg-icon { color: var(--tg-rojo-a11y); }
.tgp-poster-boton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.tgp-poster-chip {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 2px solid var(--tg-noche);
  border-radius: 8px;
  background: var(--tg-rojo-a11y);
  /* 28-oct: 14 px como mínimo (antes 12). Es parte del reproductor: no escala con A/A+/A++ */
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.tgp-poster-chip i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
/* 28-oct: la nota bajo "Ver en vivo" (movimiento reducido o "Pausar animaciones", y "Seguir sin video"). El
   panel deja libre la franja del chip "EN VIVO" (14 + 26 + 8) para que la nota nunca pase bajo él; en un video
   de menos de unos 184 px de alto (el de un celular de 320 px de ancho) la nota cede y lo dice el aviso al
   lector (el póster es un contenedor de tamaño: la consulta mide su alto útil, sin el relleno) */
.tgp[data-poster="quieto"] .tgp-panel,
.tgp[data-poster="sinvideo"] .tgp-panel { padding-top: 48px; }
/* blanco pleno con sombra firme: va sobre la foto del póster bajo el velo, que en las paredes claras aclara */
.tgp-poster-nota { max-width: 30em; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
/* Alto contraste: la nota sobre una placa negra, sin depender de la foto */
html[data-contraste="1"] .tgp-poster-nota { padding: 2px 8px; border-radius: 6px; background: #000; text-shadow: none; }
@container (max-height: 121px) {
  .tgp-poster-nota { display: none; }
}
/* alturas chicas (el piso de YouTube es 200 de alto: 172 útiles con el padding):
   la cruz cede primero; con botón (retirada, sinsenal, caida) cede antes; luego el texto de apoyo */
@container (max-height: 239px) {
  .tgp-cruz--boton { display: none; }
}
@container (max-height: 129px) {
  .tgp-cruz { display: none; }
}
@container (max-height: 109px) {
  .tgp-poster-texto { display: none; }
}
/* 5-nov (elección de Camilo, ronda 2 del artefacto "Logo y previa", versión A): la previa es el afiche de la campaña.
   Fondo rojo, Iaán en su cubo a la izquierda (del alto del cuadro) y a su derecha el claim de la landing
   (.tgp-poster-texto) con la hora debajo, en una píldora blanca (.tgp-poster-titulo; rojo accesible sobre blanco, 4,5:1),
   sin el punto de antes. Todo en unidades del cuadro (el panel es contenedor de tamaño): en el celular el cuadro mide de
   146 a 200 de alto y el texto toma el ancho que deja Iaán. La hora escala con la letra (A/A+/A++) y, si no cabe en una
   línea, pasa a dos dentro de la píldora */
.tgp[data-poster="previa"] .tgp-panel { padding: 0; background: var(--tg-rojo); }
.tgp-afiche-iaan {
  position: absolute;
  left: 5cqw;
  bottom: 0;
  width: auto;
  height: 96cqh;
  max-width: 42cqw;
  object-fit: contain;
  object-position: left bottom;
}
.tgp-afiche-txt {
  position: absolute;
  left: calc(8cqw + min(66cqh, 42cqw));
  right: 4cqw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, min(2.6cqw, 7cqh), 28px);
}
/* el claim no pasa de la mitad del alto del cuadro (190cqh de ancho): en un cuadro bajo y ancho (146 de alto y unos 500
   de ancho) no deja lugar a la hora */
.tgp-afiche-claim { display: block; width: min(100%, 46cqw, 190cqh); height: auto; }
.tgp-poster-titulo.tgp-afiche-hora {
  max-width: none;
  padding: 0.42em 0.95em;
  border-radius: 999px;
  background: #fff;
  color: var(--tg-rojo-a11y);
  /* 14 px como mínimo (la regla de la portada): en el celular, si no cabe en una línea, pasa a dos */
  font-size: clamp(calc(14px * var(--a11y-fs)), 2.5cqw, calc(26px * var(--a11y-fs)));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
}
/* cuadros angostos (celular, tablet chica, celular apaisado): Iaán cede un poco de alto para que la hora quepa en una
   línea con la letra normal (A); con A+ y A++ pasa a dos dentro de la píldora */
@container (max-width: 560px) {
  .tgp-afiche-iaan { left: 3cqw; height: 82cqh; }
  /* 14 px de aire con la punta del zapato, que queda a la altura de la píldora */
  .tgp-afiche-txt { left: calc(3cqw + min(56.3cqh, 42cqw) + 14px); right: 2.5cqw; }
  .tgp-afiche-claim { width: min(100%, 190cqh); }
  .tgp-poster-titulo.tgp-afiche-hora { padding: 0.42em 0.75em; letter-spacing: 0.01em; }
}
@media (forced-colors: active) {
  .tgp-poster-titulo.tgp-afiche-hora { border: 2px solid CanvasText; }
}

/* iframe real (real=1): ocupa todo, nada encima */
.tgp-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.tgp[data-real] > :not(.tgp-iframe) { display: none !important; }

html[data-contraste="1"] .tgp-poster-boton { outline: 2px solid var(--tg-noche); outline-offset: -4px; }
@media (forced-colors: active) {
  .tgp-poster-boton { border: 2px solid ButtonText; }
  .tgp:focus-visible::after { border-color: Highlight; }
}

/* v3: el póster es un cuadro nítido de la campaña (personas, no escenario). 2-nov: con una sola señal (pedido 8)
   queda un solo cuadro (.tgp-cuadro, arriba). Desde la elección de Camilo del 2-nov (detalle 4c) es el de "En el
   barrio" (assets/spot-en-el-barrio-v1.webp, el que tenía la Digitón cuando había dos señales); antes era "En la
   calle" */