/* =====================================================================
   PORTADA EN VIVO, versión "Tablero de Estadio" (id: tablero), v3 del 26-oct:
   "transmisión a sangre con barra de acción".
   La primera pantalla es una losa noche de borde a borde: la banda del
   cómputo (la cifra en fichas split-flap, la técnica de .date-flip-card de la
   landing, la hora del último cómputo en fichas y la meta como riel), la
   franja de la transmisión (16:9 entera, tan grande como deja el pliegue) y la
   barra de acción con Donar rojo. Bajo el pliegue, el pie de enlaces, la
   sección del embajador (la lámina de la landing que sube) y los
   auspiciadores. La página baja con scroll nativo.
   Ritmo de color: rojo del header y de la lámina de Iaán, noche del tablero,
   blanco de las fichas; rojo lleno solo en Donar y la mosca.
   La disposición sale de --vt-disp (media queries de abajo); tablero.js la
   lee, arma el DOM y ajusta midiendo.
   ===================================================================== */

/* ---------- 0. Disposición ---------- */
.vt { --vt-disp: tab; }
@media not all and (min-width: 48rem) {
  .vt { --vt-disp: tel; }
}
@media (min-width: 64rem) and (orientation: landscape) and (min-height: 501px) {
  .vt { --vt-disp: esc; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .vt { --vt-disp: apaisado; }
}

/* ---------- 1. Página ---------- */
html,
body { min-height: 100%; }
.vt-body {
  margin: 0;
  background: var(--tg-rojo);
  color: #fff;
  overflow-x: hidden;
}
.vt-app {
  position: relative;
  min-height: 100vh;
  min-height: var(--vt-alto, 100dvh);
  overflow-x: clip;
}
.vt {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: var(--vt-alto, 100dvh);
  padding: calc(var(--vt-top, var(--tg-inicio)) + var(--vt-arriba, 0px)) 0 calc(var(--tg-reserva-inferior) + 6px);
  font-family: var(--tg-font);
  color: #fff;
}
.vt[inert] { pointer-events: none; }
/* límite conocido: si ni con todos los recortes cabe (A++ en pantallas muy bajas), la página baja */
.vt[data-desborda] {
  height: auto;
  min-height: 100vh;
  min-height: var(--vt-alto, 100dvh);
}
.vt-noscript { margin: 0; padding: 120px 24px; font-weight: 800; font-size: 20px; }
.vt :where(h1, h2, h3, p, ol, ul) { margin: 0; }
.vt :where(ol, ul) { padding: 0; list-style: none; }
.vt time { font-variant-numeric: tabular-nums; }
.vt-pt {
  display: inline-block;
  font-family: Arial, "Helvetica Neue", system-ui, sans-serif;
  font-weight: 700;
}
/* "Saltar el reproductor" vive al inicio de #tg-app, antes del header y fuera de main (tablero.js) */
.vt-app > .tg-skip-link:focus { font-size: 14px; }


/* modo vivo: la página baja con scroll nativo. flow-root es obligatorio: sin él el margen del hero
   colapsa a través de .vt y arrastra el header absoluto hacia abajo */
.vt[data-modo="vivo"] {
  display: flow-root;
  height: auto;
  min-height: 0;
  padding: var(--vt-top, var(--tg-inicio)) 0 0;
}
/* el hero se rehace en cada cambio de estado (sonido, pausa, cómputo): el anclaje de scroll del navegador
   tomaba un ancla bajo el hero y saltaba el alto del video. tablero.js ancla la vista a mano
   (recordarVista / restaurarVista) */
html[data-vt-vivo] { overflow-anchor: none; }
/* con una lámina abierta la página de fondo no se desplaza (tablero.js, abrirLamina). El hueco de la barra
   de desplazamiento se reserva siempre en modo vivo: así, al abrir la lámina, nada se corre de lado (con
   barras clásicas, como en Windows) */
html[data-vt-vivo] { scrollbar-gutter: stable; }
html[data-vt-lamina] { overflow: hidden; }
/* lo que se enfoca bajo el hero (el pie, la sección de Iaán, los auspiciadores) no
   queda bajo El Timón (previa) ni bajo el Donar flotante (WCAG 2.4.11). Va en esos controles y no como
   scroll-padding de la página: la barra de acción vive en el fondo del primer pliegue y, con la reserva en
   la página, el navegador la subía al tabular (y con ella medio video y el cómputo). Sin El Timón
   (--tg-reserva-fab en 0) manda la franja del flotante (--vt-flota-reserva, que mide tablero.js) */
html[data-vt-vivo] :is(.vt-pie, .vt-secciones) :is(a[href], button, input, select, textarea, iframe, [tabindex]:not([tabindex="-1"])) {
  scroll-margin-bottom: calc(max(var(--tg-reserva-fab, 0px), var(--vt-flota-reserva, 0px)) + 8px);
}
/* 30-oct (par de Donar): cuando el foco vuelve a Donar o a "Donación internacional" y quedaron sobre la ventana
   (rematarFoco los trae con scrollIntoView "nearest", p. ej. al volver de la caída en 360x640), llegan con aire
   arriba y el anillo de foco (3 px + 3 de separación) se ve entero, no pegado al borde */
html[data-vt-vivo] #vt :is(.vt-don-host .tgd, .vtx-ext) { scroll-margin-top: 12px; }
/* la pastilla del himno se oculta mientras hay transmisión (plan B: ?himno=1 la deja) */
html[data-vt-himno="oculto"] .tgc-himno { display: none !important; }

/* textura de tablero: puntos de bombilla (solo sobre noche, nunca sobre el rojo) */
.vt-marcador,
.vt-torre,
.vt-don,
.vt-ap-panel,
.vt-gr-pie {
  background-color: var(--tg-noche);
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.5px);
  background-size: 8px 8px;
}

/* =====================================================================
   2. FICHAS SPLIT-FLAP (cifra y reloj)
   Todo sale de --fw (ancho de ficha): alto = --fw × --vt-fr.
   ===================================================================== */
.vt-fichas {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--fw) * 0.07);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.vt-grupo {
  display: inline-flex;
  gap: calc(var(--fw) * 0.07);
}
.vt-f {
  position: relative;
  flex: none;
  width: var(--fw);
  height: calc(var(--fw) * var(--vt-fr, 1.42));
  border-radius: calc(var(--fw) * 0.14);
  background: linear-gradient(180deg, #fffdfd 0 50%, #f3eded 50% 100%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.07), 0 calc(var(--fw) * 0.12) calc(var(--fw) * 0.3) rgba(0, 0, 0, 0.42);
  color: var(--tg-noche);
  font-weight: 800;
  font-size: calc(var(--fw) * 1.1);
  font-variant-numeric: tabular-nums;
  perspective: calc(var(--fw) * 7);
}
.vt-f-d,
.vt-mitad-d {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--fw) * var(--vt-fr, 1.42));
  display: grid;
  place-items: center;
  padding-top: calc(var(--fw) * 0.05);
  line-height: 1;
}
/* el pliegue y las bisagras de la ficha */
.vt-f::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 0.75px);
  height: 1.5px;
  background: rgba(22, 3, 7, 0.16);
  z-index: 3;
}
.vt-f::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(50% - var(--fw) * 0.07);
  height: calc(var(--fw) * 0.14);
  background: linear-gradient(90deg, var(--tg-noche) 0 calc(var(--fw) * 0.07), transparent calc(var(--fw) * 0.07) calc(100% - var(--fw) * 0.07), var(--tg-noche) calc(100% - var(--fw) * 0.07));
  z-index: 4;
}
/* mitades del volteo (las crea el JS solo mientras gira) */
.vt-mitad {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  z-index: 2;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.vt-mitad--arriba {
  top: 0;
  border-radius: calc(var(--fw) * 0.14) calc(var(--fw) * 0.14) 0 0;
  background: #fffdfd;
  transform-origin: 50% 100%;
}
.vt-mitad--abajo {
  bottom: 0;
  border-radius: 0 0 calc(var(--fw) * 0.14) calc(var(--fw) * 0.14);
  background: #f3eded;
  transform-origin: 50% 0;
}
.vt-mitad--abajo .vt-mitad-d { top: -100%; }
/* el $, los puntos de miles y los dos puntos van sin ficha, en blanco */
.vt-sim {
  flex: none;
  color: #fff;
  font-weight: 800;
  font-size: calc(var(--fw) * 0.95);
  line-height: 1;
  margin-right: calc(var(--fw) * 0.03);
}
.vt-sep,
.vt-dos {
  position: relative;
  flex: none;
  width: calc(var(--fw) * 0.24);
  height: calc(var(--fw) * var(--vt-fr, 1.42));
}
.vt-sep::before,
.vt-dos::before,
.vt-dos::after {
  content: "";
  position: absolute;
  left: 50%;
  width: calc(var(--fw) * 0.17);
  height: calc(var(--fw) * 0.17);
  border-radius: 50%;
  background: #fff;
  translate: -50% 0;
}
.vt-sep::before { bottom: calc(var(--fw) * 0.2); }
.vt-dos::before { top: 30%; }
.vt-dos::after { bottom: 30%; }
/* fichas apagadas: el tablero en reposo, sin cifra */
.vt-fichas--off .vt-f {
  background: #2c1418;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.vt-fichas--off .vt-f::after { background: rgba(255, 255, 255, 0.08); }
.vt-fichas--off .vt-sim,
.vt-fichas--off .vt-sep::before { opacity: 0.32; }
/* 3-nov (computo=cero): el tablero parte en $0; los ceros de adelante, atenuados (la ficha de las unidades, plena) */
.vt-cifra--cero .vt-f:not([data-pos="0"]) .vt-f-d { opacity: 0.3; }
/* en la fila única (celular apaisado) el tablero en $0 va solo: el texto largo del pie no cabe a su lado */
.vt[data-linea] .vt-mar-datos:has(> .vt-cifra--cero) > .vt-mar-pie { display: none; }
.vt-cifra-tipo {
  display: block;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   3. EL MARCADOR (banda del cómputo)
   ===================================================================== */
.vt-marcador {
  --vt-fr: 1.42;
  --vt-fw-max: 34;
  --vt-fw-min: 14;
  --vt-reloj-k: 0.62;
  --vt-reloj-min: 15;
  --vt-reloj-max: 20;
  position: relative;
  flex: none;
  color: #fff;
}
.vt-mar-in { position: relative; min-width: 0; }
.vt-mar-tit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}
.vt-h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: calc(17px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.vt-punto {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tg-rojo);
  animation: gira-pulso var(--tg-d-pulso) ease-in-out infinite;
}
.vt-mosca {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--tg-rojo-a11y);
  color: #fff;
  /* 28-oct: 14 px como mínimo (antes 12): "EN VIVO" y, en la previa, "HOY · 21:00" se leen. Con menos
     relleno y espaciado la pieza no queda más ancha que antes (91 px): en la banda del cierre en 1536 x 864
     4 px más bajaban el título a otra fila y el video perdía 41 px de alto */
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* 2-nov (pedido 7 de Camilo): la mosca va solo en la previa ("HOY · 21:00", sin punto que late): la de "EN VIVO" de la
   banda salió (en vivo el h1 lleva su punto rojo) */
.vt-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  /* 28-oct: 14 px (antes 13) con 2 px de relleno vertical (antes 3): con A++ el chip sigue midiendo 26 y la banda
     no crece */
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--tg-rojo-a11y);
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1.15;
  /* si no cabe en una línea, que parta parejo (nunca "Nacional" sola) */
  text-wrap: balance;
}
.vt-mar-h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 8px;
}
.vt-h2 {
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.vt-chip-nuevo {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--tg-rojo-a11y);
  color: #fff;
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vt-chip-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--tg-rojo-a11y);
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 800;
  white-space: nowrap;
  /* 4-nov: con A+ en 360 px y A++ en 375 y 390 px pasaba del borde de la pantalla (hasta 48 px): si no cabe, el texto
     parte en dos líneas dentro del chip */
  max-width: 100%;
}
.vt-chip-meta > span { white-space: normal; text-wrap: balance; }
.vt-cifra {
  position: relative;
  margin-top: 8px;
  min-width: 0;
}
.vt-cifra-vis {
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}
.vt-mar-pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 10px;
  min-width: 0;
}
.vt-rotulo {
  flex: 0 1 auto;
  min-width: 0;
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 700;
  line-height: 1.2;
}
.vt-rotulo--largo { max-width: 34em; }
.vt-rot-vis {
  display: inline-flex;
  align-items: center;
  gap: 4px 8px;
}
.vt-rot-txt { min-width: 0; white-space: nowrap; }
.vt-reloj { flex: none; }
.vt-reloj {
  --fw: var(--vt-reloj-fw, 18px);
  --vt-fr: 1.36;
  display: inline-flex;
}
/* meta: riel de progreso, solo tras el anuncio oficial */
.vt-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
}
.vt-meta-txt {
  flex: none;
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  font-variant-numeric: tabular-nums;
}
.vt-meta-riel {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.vt-meta-pista {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.vt-meta-relleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--vt-meta, 0%);
  border-radius: 999px;
  background: var(--tg-rojo);
  box-shadow: inset -3px 0 0 #fff;
  animation: vt-riel 900ms var(--tg-ease-expo) both 200ms;
  transform-origin: left center;
}
@keyframes vt-riel {
  from { transform: scaleX(0); }
}
.vt-meta-marca {
  flex: none;
  /* 28-oct: 14 px (antes 11) con interlineado 1: la fila del riel no crece */
  font-size: calc(14px * var(--a11y-fs));
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* sello del ensayo: sobre la cifra, nunca sobre el reproductor */
.vt-sello {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 5;
}
.vt-sello > span {
  display: inline-block;
  padding: 0.45em 1em;
  border: 3px solid #fff;
  border-radius: 6px;
  background: var(--tg-rojo-a11y);
  color: #fff;
  font-size: max(calc(15px * var(--a11y-fs)), calc(var(--vt-cifra-fw, 30px) * 0.56));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-6deg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

/* =====================================================================
   4. (2-nov: el SELECTOR Programa | Digitón salió con el pedido 8 de Camilo: una sola señal, la Digitón)
   ===================================================================== */

/* =====================================================================
   5. CONTROLES (fila del celular y barra de la pantalla)
   ===================================================================== */
.vt-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: calc(15px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.vt-btn--blanco { background: #fff; color: var(--tg-noche); }
.vt-btn--blanco .tg-icon { color: var(--tg-rojo-a11y); }
.vt-btn--blanco:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* 2-nov (pedidos 2 y 3 de Camilo): sin los "Discos de reproductor" (Pausar, Sonido y "Seguir viendo en vivo") ni el
   botón "Abrir en YouTube" de la fila del celular: el iframe de YouTube trae sus controles y su acceso a YouTube. Queda
   .vt-btn para "Ver" (la transmisión que continúa en otro video) */
@media (hover: hover) and (pointer: fine) {
  .vt-btn { min-height: 44px; }
}
.vt-ayuda {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.vt-ayuda .tg-icon { flex: none; margin-top: 1px; color: #fff; }
.vt-ayuda span { text-wrap: pretty; }


/* --- "¿Datos limitados? Seguir sin video" (o "Volver a ver el video"), 2-nov (pedido 4 de Camilo: "debería estar
   debajo del iframe, quizás al costado inferior derecho"): en su línea, justo bajo el video y alineado a su borde
   derecho, en todos los tamaños donde se ofrece. Es una utilidad: texto subrayado en voz baja, con su ícono en
   rosado, como cuando iba en el pie. El objetivo mide 44 px de alto; el texto, 14 × fs. En el escritorio la línea
   mide lo que el video (--vt-pw) y va centrada con él; en la tablet, el celular y el apaisado (video de borde a
   borde o pegado al borde izquierdo) llega al riel derecho. El contenedor no se toca: solo el botón recibe toques --- */
.vt-datos-fila {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  padding: 0 var(--tg-riel);
}
/* escritorio y tablet: dentro de la franja, pegado al video (la holgura queda arriba del video y bajo la línea) */
.vt-franja > .vt-datos-fila {
  box-sizing: border-box;
  width: min(100%, var(--vt-pw, 100%));
  /* con el video de borde a borde (tablet, o sin zonas noche), el riel; con zonas noche, el borde del video
     (--vt-datos-der lo pone tablero.js) */
  padding: 0 var(--vt-datos-der, var(--tg-riel)) 0 0;
}
/* en el escritorio el objetivo de 44 px cuelga 6 px sobre el relleno de la franja (que mide 6 u 8 px, vacío): la
   línea le cuesta al video 38 px de alto y no 44 */
.vt[data-disp="esc"] .vt-franja > .vt-datos-fila .vt-datos { margin-bottom: -6px; }
.vt[data-disp="tel"] .vt-datos-fila { padding: 0 16px; }
/* celular apaisado: el botón termina en el borde derecho del video (2-nov: 12 px antes, como pidió el escéptico de la
   tarde; los 12 px que separan el video del panel quedan libres, y el anillo de foco cabe en ellos) */
.vt-ap-video .vt-datos-fila { padding: 0 0 0 calc(12px + env(safe-area-inset-left)); }
.vt-datos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.vt-datos-txt { display: block; min-width: 0; }
.vt-datos-f { white-space: nowrap; }
.vt-datos[data-dos] .vt-datos-txt { width: min-content; }
.vt-datos .tg-icon { flex: none; width: calc(18px * var(--a11y-fs)); height: calc(18px * var(--a11y-fs)); color: var(--tg-rosado); stroke-width: 1.9; }
.vt-datos:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 9px var(--tg-noche); }
@media (hover: hover) and (pointer: fine) {
  .vt-datos:hover { text-decoration-thickness: 2.5px; }
}
html[data-contraste="1"] .vt-datos { text-decoration-thickness: 2px; }
html[data-contraste="1"] .vt-datos .tg-icon { color: #fff; }
@media (forced-colors: active) {
  .vt-datos { color: ButtonText; }
  .vt-datos .tg-icon { color: inherit; }
  .vt-datos:focus-visible { outline-color: Highlight; }
}

/* =====================================================================
   6. CELULAR RETRATO: la torre (marcador, pantalla, "¿Datos limitados?" y fila) de borde a borde
   ===================================================================== */
.vt-torre {
  position: relative;
  flex: none;
  width: 100%;
}
.vt-torre .vt-marcador {
  background: none;
  padding: 12px 16px 12px;
}
.vt-torre > .vt-video,
.vt-torre .vt-video { width: 100%; }
.vt-torre .vt-video .tgp { border-radius: 0; }
.vt-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 12px;
  min-width: 0;
}
.vt-fila > :is(.vt-don-host, .vt-donpar) {
  flex: 1 1 0;
  min-width: 120px;
}
.vt-fila .vt-ayuda--fila {
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}
/* junto a la ayuda ("Toca el video…") Donar mide lo que pide su texto (con A++ 150 px no alcanzaban) */
.vt-fila .vt-ayuda--fila + :is(.vt-don-host, .vt-donpar) { flex: 0 0 auto; width: max-content; }
/* solo ícono: "Ver" (el nombre accesible no cambia) */
.vt-fila[data-icono] .vt-btn--blanco > span { display: none; }
.vt-fila[data-icono] .vt-btn--blanco { width: 48px; padding: 0; }
/* último recurso: Donar en su propia línea, a todo el ancho */
.vt-fila[data-don-linea] { flex-wrap: wrap; row-gap: 8px; }
.vt-fila[data-don-linea] > :is(.vt-don-host, .vt-donpar) { flex: 1 1 100%; order: 9; }
.vt-ayuda--torre {
  padding: 0 16px 12px;
  font-size: calc(14px * var(--a11y-fs));
}
.vt[data-sin-meta] .vt-meta { display: none; }

/* recortes del celular (P4 a P6) */
.vt[data-compacto] .vt-torre .vt-marcador { padding: 8px 16px 8px; }
.vt[data-compacto]:is([data-disp="tel"], [data-disp="apaisado"]) .vt-marcador .vt-h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.vt[data-compacto]:is([data-disp="tel"], [data-disp="apaisado"]) .vt-marcador .vt-mar-h2--solo { display: none; }
.vt[data-compacto] .vt-marcador { --vt-fr: 1.32; --vt-reloj-max: 17; }
.vt[data-compacto] .vt-cifra { margin-top: 6px; }
.vt[data-compacto] .vt-mar-pie { margin-top: 6px; }
.vt[data-compacto] .vt-fila { padding: 8px 16px 10px; }
.vt[data-apretado] .vt-torre .vt-marcador { padding: 8px 16px 6px; }
.vt[data-apretado] .vt-rotulo { font-size: calc(14px * var(--a11y-fs)); }
.vt[data-apretado] .vt-marcador { --vt-fr: 1.24; --vt-reloj-max: 15; --vt-reloj-min: 13; }
.vt[data-apretado] .vt-h1 { font-size: calc(15px * var(--a11y-fs)); }
.vt[data-apretado] .vt-cifra { margin-top: 4px; }
.vt[data-apretado] .vt-mar-pie { margin-top: 4px; }
.vt[data-apretado] .vt-fila { padding: 5px 16px 6px; }
.vt[data-apretado] .vt-btn { min-height: 44px; }
.vt[data-apretado] .vt-fila .tgd { --tgd-alto: 44px; }
.vt[data-linea] .vt-mar-datos { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.vt[data-linea] .vt-cifra { order: 1; flex: 1 1 0; margin: 0; }
.vt[data-linea] .vt-mar-pie { display: contents; }
.vt[data-linea] .vt-rotulo { order: 0; flex: none; }
.vt[data-linea] .vt-rot-txt { display: none; }
/* 1-nov (R1): sin cómputo (la previa antes de las 20:00, la de El Timón) no hay cifra que poner en una línea: el
   aviso "El cómputo oficial se publica aquí apenas se anuncia…" iba en una sola línea de 584 px (sin partirse,
   flex: none) y en 320 px se cortaba en "ape", con el tablero apagado (decorativo, aria-hidden) fuera de la
   pantalla y de 0 px de ancho. En ese paso (el último recurso) el tablero apagado se guarda, como ya pasaba sin
   querer, y el aviso va partido en las líneas que pida */
.vt[data-linea] .vt-mar-datos:has(> .vt-cifra--off) { display: block; }
.vt[data-linea] .vt-mar-datos:has(> .vt-cifra--off) > .vt-cifra { display: none; }
.vt[data-linea] .vt-mar-datos:has(> .vt-cifra--off) > .vt-mar-pie { display: flex; flex-wrap: nowrap; margin-top: 4px; }
.vt[data-linea] .vt-mar-datos:has(> .vt-cifra--off) .vt-rotulo { flex: 1 1 0; }
/* 29-oct (F32): las fichas son la marca de la cifra. Cuando la cifra no cabe en fichas y pasa a texto
   (data-modo="tipo", pintarCifra), la hora del cómputo también va en texto, suave y más chica; en la fila
   única (data-linea) va detrás de la cifra, no delante ("20:54 $21.345.678.901" se leía como un solo
   marcador). La medida de la cifra se hace siempre con la hora en fichas (pintarCifra pone modo "fichas"
   antes de medir), así que esto no cambia la decisión de fichas o texto */
.vt-marcador:has(.vt-cifra[data-modo="tipo"]) .vt-reloj {
  align-items: baseline;
  color: rgba(255, 255, 255, 0.8);
  font-size: calc(14px * var(--a11y-fs));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vt-marcador:has(.vt-cifra[data-modo="tipo"]) .vt-reloj :is(.vt-fichas, .vt-grupo) { gap: 0; }
.vt-marcador:has(.vt-cifra[data-modo="tipo"]) .vt-reloj .vt-f {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  perspective: none;
  forced-color-adjust: auto;
}
.vt-marcador:has(.vt-cifra[data-modo="tipo"]) .vt-reloj .vt-f::before,
.vt-marcador:has(.vt-cifra[data-modo="tipo"]) .vt-reloj .vt-f::after,
.vt-marcador:has(.vt-cifra[data-modo="tipo"]) .vt-reloj .vt-mitad,
.vt-marcador:has(.vt-cifra[data-modo="tipo"]) .vt-reloj .vt-dos::after { display: none; }
.vt-marcador:has(.vt-cifra[data-modo="tipo"]) .vt-reloj .vt-f-d { position: static; display: inline; height: auto; padding: 0; }
.vt-marcador:has(.vt-cifra[data-modo="tipo"]) .vt-reloj .vt-dos { width: auto; height: auto; }
.vt-marcador:has(.vt-cifra[data-modo="tipo"]) .vt-reloj .vt-dos::before {
  content: ":";
  position: static;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  translate: none;
  forced-color-adjust: auto;
}
.vt[data-linea] .vt-marcador:has(.vt-cifra[data-modo="tipo"]) .vt-rotulo { order: 1; }
/* 1-nov (F32): la cifra en texto tiene un piso de 16 px y en 568x320 no cabía en su parte de la fila: la hora,
   detrás, se montaba sobre ella ("$21.345.678.20:54"). La cifra mide lo que su texto y la hora pasa a la línea de
   abajo si no cabe a su lado (con lugar, sigue al lado, como antes) */
/* 1-nov (ronda 2): el salto de línea solo cuando hace falta (pintarCifra pone data-cifra-sola si la cifra, ya en
   su letra mínima, no cabe al lado de la hora). Con el salto siempre armado, la cifra medida con la hora en fichas no
   cabía por unos px al lado de la hora en texto y la fila crecía 24 px: en 667x375 con A++ el Donar fijo quedaba
   8,5 px bajo el pliegue */
.vt[data-linea] .vt-mar-datos[data-cifra-sola] { flex-wrap: wrap; row-gap: 2px; }
.vt[data-linea] .vt-mar-datos[data-cifra-sola] > .vt-cifra[data-modo="tipo"] { flex: 0 1 auto; }
html[data-contraste="1"] .vt-marcador:has(.vt-cifra[data-modo="tipo"]) .vt-reloj { color: #fff; }
@media (max-width: 359.98px) {
  .vt-fila { gap: 6px; }
  .vt-btn { padding: 0 12px; }
}


/* 29-oct (F33): en el celular, si no cabe todo, el aviso de la previa ("Hoy desde las 21:00 / La transmisión
   aparece aquí.", que no es un video) baja a 146 px de alto (antes, 180 a 200) antes de esconder la meta o pasar
   la cifra a texto. La cruz, decorativa, cede sola (container queries de base.css); el título y el texto quedan
   enteros, también con A++. Lo activa tablero.js con data-poster-bajo (pedido al carril de tablero.js: un paso
   de ajustarTel antes de P7); sin el atributo, nada cambia */
.vt[data-poster-bajo] .tgp[data-poster="previa"] { min-height: 0; }
.vt[data-poster-bajo] .tgp[data-poster="previa"]::before { padding-top: 0; height: 146px; }
/* 29-oct (F33, corregir3): sin esperar a tablero.js, en los celulares más bajos (568 px de alto en retrato) el
   aviso ya nace en 146 px: el ajuste lo mide así y la meta y la cifra en fichas vuelven (320x568 previa con A:
   antes sin meta y cifra en texto con el aviso en 200 px). Desde 640 px de alto el aviso queda como estaba */
@media (orientation: portrait) and (max-height: 600px) {
  .vt[data-disp="tel"] .tgp[data-poster="previa"] { min-height: 0; }
  .vt[data-disp="tel"] .tgp[data-poster="previa"]::before { padding-top: 0; height: 146px; }
}


/* =====================================================================
   7. CELULAR APAISADO: la transmisión pegada a la izquierda, el tablero a la derecha
   ===================================================================== */
.vt-ap {
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: calc(var(--vt-alto, 100dvh) - var(--vt-top, 60px));
}
.vt-ap-video {
  flex: none;
  box-sizing: content-box;
  width: var(--vt-vw, 384px);
  padding-left: env(safe-area-inset-left);
  /* la columna mide lo que deja el pliegue (--vt-ap-h, del header al borde inferior o a la pastilla del
     himno). Donde el tope de ancho deja holgura vertical (667 x 375: 70 px), el video va centrado en el alto,
     como un reproductor: 29-oct (F36), pegado abajo dejaba una franja negra de 70 px bajo el header que se
     leía como una carga fallida (y pegado arriba, la franja quedaba bajo el video, ronda 1). En 844 x 390
     el video llena la columna y nada cambia */
  align-self: flex-start;
  /* 2-nov (pedido 4): "¿Datos limitados?" va justo bajo el video, en esta columna. Si con él no cabe en el alto del
     pliegue (844 x 390), la columna crece y la línea queda justo bajo el pliegue: el video no se achica por ella. Si
     sobra alto (667 x 375), video y línea van centrados juntos */
  min-height: var(--vt-ap-h, auto);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vt-ap-video .vt-video { width: 100%; }
.vt-ap-video .tgp { border-radius: 0; }
.vt-ap-panel {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: env(safe-area-inset-right);
}
.vt-ap-panel .vt-marcador {
  --vt-fw-max: 22;
  --vt-fw-min: 12;
  --vt-reloj-k: 0.7;
  --vt-reloj-min: 14;
  --vt-reloj-max: 18;
  background: none;
  padding: 10px 12px 8px;
}
.vt-ap-panel .vt-h1 { font-size: calc(16px * var(--a11y-fs)); }
.vt-ap-panel .vt-fila { padding: 4px 12px 10px; }
.vt-ap-panel .vt-mar-pie { flex-wrap: wrap; }
/* 29-oct: con A++ en 667x375 "Último cómputo oficial" y la hora no caben en una línea del panel: la hora baja a la
   suya en vez de salirse de la pantalla ("20:5") */
.vt-ap-panel .vt-rot-vis { flex-wrap: wrap; }
.vt[data-disp="apaisado"][data-compacto] .vt-ap-panel .vt-marcador { padding: 8px 12px 6px; }
/* el recorte apretado del celular no ensancha los márgenes de la fila del panel (cada px es de Donar) */
.vt[data-apretado] .vt-ap-panel .vt-fila { padding: 5px 12px 6px; }


/* =====================================================================
   8. EL HERO: banda del cómputo, franja de la transmisión, barra de acción
      y pie (tablet y escritorio; el celular usa la torre y la fila de arriba)
   ===================================================================== */
.vt-hero {
  position: relative;
  background: var(--tg-noche);
  color: #fff;
}

/* clase de alto del escritorio (la pone tablero.js): banda y Donar de 64, 72 u 80 */
.vt[data-disp="esc"] { --vt-banda-py: 12px; --vt-h1: 20px; --vt-don-alto: 72px; --vt-don-txt: 22px; }
.vt[data-disp="esc"][data-alto="bajo"] { --vt-banda-py: 8px; --vt-h1: 18px; --vt-don-alto: 64px; }
.vt[data-disp="esc"][data-alto="alto"] { --vt-banda-py: 14px; --vt-h1: 24px; --vt-don-alto: 80px; --vt-don-txt: 24px; }

/* -- la banda de una fila (escritorio): título | cifra y hora | meta -- */
.vt-marcador[data-modo="banda"] {
  --vt-fw-min: 13;
  --vt-reloj-k: 0.55;
  --vt-reloj-min: 15;
  --vt-reloj-max: 24;
  padding: var(--vt-banda-py, 12px) var(--tg-riel);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}
.vt-marcador[data-modo="banda"] .vt-mar-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "cab datos meta";
  column-gap: 32px;
  align-items: center;
}
.vt-marcador[data-modo="banda"] .vt-mar-cab {
  grid-area: cab;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.vt-marcador[data-modo="banda"] .vt-mar-tit { flex-wrap: nowrap; gap: 10px; }
.vt-marcador[data-modo="banda"][data-tit2] .vt-mar-tit { flex-direction: column; align-items: flex-start; gap: 6px; }
/* la mosca (solo en la previa, "HOY · 21:00") va antes del título. 2-nov (pedido 7): en vivo no hay mosca y el título
   lleva su punto rojo, como en el celular (antes el punto se ocultaba aquí porque la mosca ya decía "EN VIVO") */
.vt-marcador[data-modo="banda"] .vt-mosca { order: -1; }
.vt-marcador[data-modo="banda"] .vt-h1 {
  font-size: calc(var(--vt-h1, 20px) * var(--a11y-fs));
  white-space: nowrap;
}
/* 5-nov (revisión final): también en la pila de la tablet, que lleva la mosca "HOY · 21:00" en la misma fila */
.vt-marcador:is([data-modo="banda"], [data-modo="pila"]) .vt-chip[data-dup] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.vt-marcador[data-modo="banda"] .vt-mar-h2 { margin: 0; }
.vt-marcador[data-modo="banda"] .vt-mar-h2:not(.vt-mar-h2--solo) { margin-top: 6px; }
.vt-marcador[data-modo="banda"] .vt-h2,
.vt[data-disp="tab"] .vt-hero .vt-h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.vt-marcador[data-modo="banda"] .vt-mar-datos {
  grid-area: datos;
  display: flex;
  align-items: center;
  gap: 18px;
}
.vt-marcador[data-modo="banda"] .vt-cifra { flex: none; margin: 0; }
.vt-marcador[data-modo="banda"] .vt-mar-pie {
  flex: none;
  margin: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.vt-marcador[data-modo="banda"] .vt-rot-vis { flex-direction: column; align-items: flex-start; gap: 5px; }
.vt-marcador[data-modo="banda"] .vt-rotulo { font-size: calc(14px * var(--a11y-fs)); }
.vt-marcador[data-modo="banda"] .vt-rotulo--largo { max-width: 15em; }
.vt-marcador[data-modo="banda"] .vt-meta {
  grid-area: meta;
  justify-self: end;
  width: min(100%, 380px);
  margin: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
}
.vt-marcador[data-modo="banda"] .vt-meta-txt { text-align: right; }
.vt-marcador[data-modo="banda"] .vt-meta-riel { flex: none; width: 100%; min-width: 0; }
/* cifra colgada: la cifra sola en el eje (el de la ventana y del video) y "Último cómputo oficial" con su
   hora colgando a la derecha; la meta empieza 24 px después de la hora (--vt-meta-max lo mide el JS) */
.vt-marcador[data-modo="banda"][data-colgada] .vt-mar-datos { position: relative; min-height: var(--vt-pie-alto, 0px); }
.vt-marcador[data-modo="banda"][data-colgada] .vt-mar-pie {
  position: absolute;
  left: calc(100% + 18px);
  top: 50%;
  translate: 0 -50%;
  width: max-content;
}
.vt-marcador[data-modo="banda"][data-colgada] .vt-meta { width: min(100%, 380px, var(--vt-meta-max, 380px)); }

/* -- la franja: noche lisa a todo el ancho; el video 16:9 entero al centro (nada se dibuja encima) -- */
.vt-franja {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--vt-pv-a, 8px) 0 var(--vt-pv-b, 8px);
}
.vt-franja .vt-video { flex: none; width: var(--vt-pw, 640px); max-width: 100%; }
.vt-franja .tgp {
  border-radius: var(--vt-radio, 12px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.vt[data-disp="esc"] .vt-hero { padding-bottom: var(--vt-hero-pb, 0px); }

/* -- la barra de acción: el par de Donar a la derecha (deja la columna de El Timón). 2-nov: sin los controles del
      video ni el selector (pedidos 3 y 8). 2-nov (elección 1 de Camilo, "Donar junto al video"): va entre el cómputo
      y el video (tablet, y escritorio cuando la columna le quitaría al video más del 3 % de alto), del tamaño de siempre; el aire de
      arriba lo da la banda, que ya termina en su línea. En el escritorio la columna a la derecha del video está en la
      sección 18 -- */
.vt-accion {
  display: flex;
  align-items: center;
  gap: 12px;
  /* --vt-izq: con zonas laterales la barra empieza en el borde izquierdo del video (tablero.js): video y
     barra son una sola pieza centrada; si no cabe, el riel */
  padding: 12px var(--vt-der, var(--tg-riel)) 4px var(--vt-izq, var(--tg-riel));
  min-width: 0;
}
.vt-accion > .vt-btn { flex: none; }
/* la línea de ayuda en su fila, bajo el video y a todo el ancho (deja libre la columna de El Timón si
   la cruza: tablero.js le pone el relleno derecho) */
.vt-ayuda-fila { padding: 0 var(--tg-riel) 10px var(--vt-izq, var(--tg-riel)); }
.vt-ayuda--barra {
  max-width: 48em;
  align-items: center;
  font-size: calc(14px * var(--a11y-fs));
}
.vt-don-par {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
/* 30-oct: --vt-don-w es el ancho de Donar en la barra (el de siempre); con el par (data-par, opciones/extranjero.js)
   la ranura lleva los dos botones lado a lado, cada uno del ancho de Donar (2-nov: el acomodo del escritorio que lo
   angostaba salió con la barra bajo el video; en la columna junto al video la ranura mide la columna, sección 18) */
.vt-don-par { --vt-don-w: clamp(300px, 22vw, 400px); max-width: 100%; min-width: 0; }
.vt-don-par .vt-don-slot { width: var(--vt-don-w); max-width: 100%; padding: 0; }
.vt-don-par .vt-don-slot[data-par] { width: calc(2 * var(--vt-don-w) + var(--vt-par-gap, 12px)); }
.vt-don-par .tgd { --tgd-alto: var(--vt-don-alto, 72px); --tgd-txt: var(--vt-don-txt, 22px); }
/* -- el pie de la transmisión: los accesos y las utilidades del reproductor, todavía sobre la noche; abajo
      deja 28 px para la lámina del embajador, que sube sobre él.
      1-nov (Camilo eligió la versión 2 "Iaán al frente" del artefacto de los botones, FtQTK8yvfPEpsSatQRQz5m):
      los accesos dejan de ser enlaces subrayados y toman el lenguaje de .vt-tile de gracias y apagado: una
      tarjeta blanca para Iaán con su foto en un disco (sin la flecha hacia abajo de la versión elegida: la
      sacó Camilo el mismo día) y tres fichas blancas con el ícono en un disco rosado;
      al pasar el mouse o con el foco sube el barrido noche (como .vt-tile) y la tarjeta queda con contorno
      blanco para no perderse sobre la noche. Dona aquí manda: nada es rojo relleno ni late, y en escritorio y
      tablet ninguna tarjeta es más alta que Dona aquí (64 px contra 72 en escritorio, 56 contra 64 en tablet;
      con A+ y A++ crecen hasta ese tope). El pie es un contenedor (vt-pie) con la letra de la página: sus
      consultas en em siguen a A, A+ y A++.
      2-nov: el pie lleva solo los accesos y la fila va CENTRADA en escritorio y tablet (pedido 5 de Camilo) -- */
.vt-pie {
  --vt-pie-h: min(calc(64px * var(--a11y-fs)), 72px);
  --vt-pie-foto: min(calc(52px * var(--a11y-fs)), 60px);
  --vt-pie-disco: min(calc(42px * var(--a11y-fs)), 56px);
  position: relative;
  container: vt-pie / inline-size;
  background: var(--tg-noche);
  color: #fff;
  font-size: calc(16px * var(--a11y-fs));
  line-height: 1.2;
  padding: 2px var(--tg-riel) 36px;
}
/* con las tarjetas, aire entre la barra (o el par de Donar del celular apaisado) y la fila de accesos, como en la
   versión elegida */
@media (min-width: 48rem) {
  .vt-pie { padding-top: 16px; }
}
.vt[data-disp="apaisado"] .vt-pie { padding-top: 14px; }
.vt[data-disp="tab"] .vt-pie {
  --vt-pie-h: min(calc(56px * var(--a11y-fs)), 64px);
  --vt-pie-foto: min(calc(44px * var(--a11y-fs)), 52px);
  --vt-pie-disco: min(calc(38px * var(--a11y-fs)), 48px);
}
/* celular retrato: Dona aquí mide 48 y la versión elegida deja que los accesos sean más altos (Iaán a todo
   el ancho, fichas de 80 px con el ícono arriba): compiten en peso, no en color */
.vt[data-disp="tel"] .vt-pie {
  --vt-pie-h: calc(64px * var(--a11y-fs));
  --vt-pie-foto: calc(52px * var(--a11y-fs));
  --vt-pie-disco: calc(38px * var(--a11y-fs));
}
.vt-pie-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
}
/* la fila de cuatro pide unos 820 px x A/A+/A++. 2-nov (pedido 5 de Camilo: "creo que los botones de nuestro
   embajador, noticias, campaña y súmate se pueden centrar"): sin las utilidades a su derecha, la fila mide eso
   (900 px x fs, hasta el ancho del pie) y va centrada en la página; antes se estiraba del riel izquierdo hasta las
   utilidades. Si no cabe en una fila, Iaán va arriba a todo el ancho y las fichas debajo (más abajo) */
.vt-pie-izq {
  flex: 0 1 calc(900px * var(--a11y-fs));
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) repeat(3, minmax(0, 1fr));
  gap: 12px;
}
/* las tres fichas: en la fila de cuatro no tienen caja propia (son columnas de la grilla); con Iaán en su
   fila pasan a ser la fila de las fichas, un grupo que reservarPie (tablero.js) puede bajar solo */
.vt-pie-fichas { display: contents; }
/* la página caída (caida=1) deja solo a Iaán: la tarjeta no se estira a todo el ancho */
.vt-pie-izq--solo { flex: 0 1 calc(420px * var(--a11y-fs)); grid-template-columns: minmax(0, 1fr); }
/* tarjeta y fichas: blancas, como .vt-tile */
.vt-pie-t {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: var(--vt-pie-h);
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: var(--tg-noche);
  font: inherit;
  font-size: calc(16px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 24px rgba(90, 5, 12, 0.18);
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease, transform 140ms ease;
}
/* el barrido noche que sube (el de .vt-tile); el borde blanco queda para que no se pierda sobre la noche */
.vt-pie-t::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--tg-noche);
  box-shadow: inset 0 0 0 2px #fff;
  transform: translateY(101%);
  transition: transform 240ms var(--tg-ease-expo);
}
.vt-pie-ficha { justify-content: center; }
.vt-pie-ficha-txt { min-width: 0; overflow-wrap: normal; word-break: normal; }
.vt-pie-disco {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--vt-pie-disco);
  height: var(--vt-pie-disco);
  border-radius: 50%;
  background: var(--tg-rosado);
  color: var(--tg-rojo-a11y);
  transition: transform 300ms var(--tg-ease-expo);
}
.vt-pie-disco .vt-pie-ic { width: calc(var(--vt-pie-disco) * 0.524); height: calc(var(--vt-pie-disco) * 0.524); stroke-width: 2; }
.vt-pie-duo { fill: #fff; }

/* Iaán: foto en disco rojo accesible con aro rosado. La foto (embajador/iaan-acceso.webp) es un cuadro con la
   cabeza entera y centrada sobre fondo transparente: va entera (contain) y el disco pone el rojo detrás.
   1-nov (pedido de Camilo): sin la flecha hacia abajo. La flecha, empujada al borde derecho, era lo que
   llenaba la tarjeta (más ancha que su contenido en la fila de cuatro y a todo el ancho en tablet y celular):
   sin ella, foto y texto pegados a la izquierda dejaban un hueco a la derecha. Ahora van al centro, como el
   ícono y el rótulo de las fichas; en la lista del celular angosto (más abajo) vuelven a la izquierda, como
   las fichas */
.vt-pie-iaan { justify-content: center; padding: 6px 14px; gap: 14px; }
.vt-pie-foto {
  position: relative;
  flex: none;
  width: var(--vt-pie-foto);
  height: var(--vt-pie-foto);
  border-radius: 50%;
  background: var(--tg-rojo-a11y);
  box-shadow: 0 0 0 3px var(--tg-rosado);
  overflow: hidden;
}
.vt-pie-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  transform-origin: 50% 100%;
  transition: transform 360ms var(--tg-ease-expo);
}
.vt-pie-iaan-txt { display: flex; flex-direction: column; min-width: 0; }
.vt-pie-iaan-tit { font-size: calc(18px * var(--a11y-fs)); font-weight: 800; }
/* 14 px como mínimo (el piso de texto de la portada; la versión elegida traía 13): rojo accesible sobre blanco,
   4,53:1 */
.vt-pie-iaan-baj { margin-top: 3px; color: var(--tg-rojo-a11y); font-size: calc(14px * var(--a11y-fs)); font-weight: 700; transition: color 200ms ease; }

/* encendida: con el foco de teclado siempre; con el puntero solo donde hay hover real */
.vt-pie-t:focus-visible { color: #fff; }
.vt-pie-t:focus-visible::before { transform: none; }
.vt-pie-t:focus-visible .vt-pie-iaan-baj { color: var(--tg-rosado); }
.vt-pie-t:focus-visible .vt-pie-foto img { transform: scale(1.08); }
.vt-pie-t:focus-visible .vt-pie-disco { transform: translateY(-2px); }
@media (hover: hover) and (pointer: fine) {
  .vt-pie-t:hover { color: #fff; }
  .vt-pie-t:hover::before { transform: none; }
  .vt-pie-t:hover .vt-pie-iaan-baj { color: var(--tg-rosado); }
  .vt-pie-t:hover .vt-pie-foto img { transform: scale(1.08); }
  .vt-pie-t:hover .vt-pie-disco { transform: translateY(-2px); }
}
.vt-pie-t:active { transform: scale(0.98); }
/* foco de teclado en dos colores: blanco con un aro noche por fuera */
.vt-pie-t:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 9px var(--tg-noche), 0 10px 24px rgba(90, 5, 12, 0.18);
}

/* la fila de cuatro no cabe: Iaán arriba a todo el ancho y las fichas debajo */
@container vt-pie (max-width: 52em) {
  .vt-pie-izq { flex-basis: 100%; grid-template-columns: minmax(0, 1fr); }
  .vt-pie-fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: inherit; }
}
/* teléfono (retrato y apaisado chico): apilados, como antes (Iaán arriba y las fichas debajo, de riel a riel) */
@media not all and (min-width: 48rem) {
  .vt-pie-fila { flex-direction: column; align-items: stretch; gap: 12px; }
  .vt-pie-izq { flex: none; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vt-pie-fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: inherit; }
}
/* el disco no cabe al lado del texto (tablet angosta o apaisado con letra grande) y en el celular retrato: las
   fichas pasan a ícono arriba y rótulo abajo */
@container vt-pie (max-width: 33em) {
  .vt-pie-ficha { flex-direction: column; gap: 6px; min-height: calc(80px * var(--a11y-fs)); padding: 8px 4px; text-align: center; font-size: calc(15px * var(--a11y-fs)); }
  .vt-pie-ficha .vt-pie-disco { --vt-pie-disco: calc(38px * var(--a11y-fs)); }
}
.vt[data-disp="tel"] .vt-pie-ficha { flex-direction: column; gap: 6px; min-height: calc(80px * var(--a11y-fs)); padding: 8px 4px; text-align: center; font-size: calc(15px * var(--a11y-fs)); }
/* celular angosto o letra grande: las fichas pasan a filas (y Iaán más compacto, para que "Conoce a Iaán" y
   "nuestro embajador" queden en una línea cada uno) */
@container vt-pie (max-width: 19em) {
  .vt-pie-izq { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vt-pie-fichas { grid-template-columns: minmax(0, 1fr); }
  .vt[data-disp] .vt-pie-ficha { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: calc(60px * var(--a11y-fs)); padding: 8px 12px 8px 10px; text-align: left; font-size: calc(16px * var(--a11y-fs)); }
  .vt-pie-iaan { justify-content: flex-start; padding: 6px 12px 6px 6px; gap: 10px; }
  /* con topes: en 320 px con A++ "nuestro embajador" (14 px x 1,3) pide 159 px y sin ellos se partía */
  .vt-pie-foto { --vt-pie-foto: min(calc(44px * var(--a11y-fs)), 52px); }
  .vt-pie-iaan-tit { font-size: calc(16px * var(--a11y-fs)); }
}

/* salida quieta: con movimiento reducido o "Pausar animaciones" nada se desplaza (base.css ya deja las
   transiciones en 0 s); el barrido noche sigue marcando la tarjeta encendida, sin animarse */
html[data-motion="off"] .vt-pie-t:is(:hover, :focus-visible) :is(.vt-pie-foto img, .vt-pie-disco),
html[data-rm="1"] .vt-pie-t:is(:hover, :focus-visible) :is(.vt-pie-foto img, .vt-pie-disco),
html[data-motion="off"] .vt-pie-t:active,
html[data-rm="1"] .vt-pie-t:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .vt-pie-t::before { transition: none; }
  .vt-pie-t:is(:hover, :focus-visible) :is(.vt-pie-foto img, .vt-pie-disco),
  .vt-pie-t:active { transform: none; }
}

/* alto contraste: el texto chico y los íconos pasan a noche (20:1 y 15,4:1 en vez de 4,53:1 y 3,5:1), el
   contorno de la tarjeta encendida se engruesa y, como enlace, "Conoce a Iaán" va subrayado (base.css subraya
   los enlaces; aquí solo el título, no la tarjeta entera) */
html[data-contraste="1"] .vt-pie-iaan { text-decoration: none; }
html[data-contraste="1"] .vt-pie-iaan-tit { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
html[data-contraste="1"] .vt-pie-iaan-baj,
html[data-contraste="1"] .vt-pie-disco { color: var(--tg-noche); }
html[data-contraste="1"] .vt-pie-t:focus-visible .vt-pie-iaan-baj { color: #fff; }
html[data-contraste="1"] .vt-pie-t::before { box-shadow: inset 0 0 0 3px #fff; }
@media (hover: hover) and (pointer: fine) {
  html[data-contraste="1"] .vt-pie-t:hover .vt-pie-iaan-baj { color: #fff; }
}

/* colores forzados: bordes del sistema; la foto de Iaán sigue a la vista */
@media (forced-colors: active) {
  .vt-pie-t { border: 2px solid ButtonText; color: ButtonText; }
  .vt-pie-iaan { border-color: LinkText; color: LinkText; }
  .vt-pie-t::before { display: none; }
  .vt-pie-disco,
  .vt-pie-iaan-baj { color: inherit; }
  .vt-pie-duo { fill: none; }
  .vt-pie-t:is(:hover, :focus-visible) { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* -- tablet retrato: banda en pila, video de borde a borde -- */
.vt[data-disp="tab"] .vt-hero > .vt-marcador {
  --vt-fw-max: 56;
  --vt-fw-min: 20;
  --vt-reloj-k: 0.5;
  --vt-reloj-min: 20;
  --vt-reloj-max: 28;
  padding: 16px var(--tg-riel);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}
.vt[data-disp="tab"] .vt-hero .vt-mar-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "cab cab"
    "cifra cifra"
    "pie meta";
  column-gap: 24px;
  align-items: center;
}
.vt[data-disp="tab"] .vt-hero .vt-mar-cab { grid-area: cab; min-width: 0; }
.vt[data-disp="tab"] .vt-hero .vt-mar-datos { display: contents; }
.vt[data-disp="tab"] .vt-hero .vt-mar-tit { gap: 8px 12px; }
/* la mosca solo en la previa; en vivo, el punto rojo del título (2-nov, pedido 7) */
.vt[data-disp="tab"] .vt-hero .vt-mosca { order: -1; }
.vt[data-disp="tab"] .vt-hero .vt-h1 { font-size: calc(26px * var(--a11y-fs)); }
.vt[data-disp="tab"] .vt-hero .vt-mar-h2 { margin: 0; }
.vt[data-disp="tab"] .vt-hero .vt-mar-h2:not(.vt-mar-h2--solo) { margin-top: 8px; }
.vt[data-disp="tab"] .vt-hero .vt-cifra { grid-area: cifra; margin-top: 12px; }
.vt[data-disp="tab"] .vt-hero .vt-cifra-vis { justify-content: center; }
.vt[data-disp="tab"] .vt-hero .vt-mar-pie { grid-area: pie; margin-top: 12px; }
.vt[data-disp="tab"] .vt-hero .vt-rotulo { font-size: calc(15px * var(--a11y-fs)); }
.vt[data-disp="tab"] .vt-hero .vt-meta {
  grid-area: meta;
  margin-top: 12px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
}
.vt[data-disp="tab"] .vt-hero .vt-meta-txt { text-align: right; }
.vt[data-disp="tab"] .vt-hero .vt-meta-riel { flex: none; width: 100%; min-width: 0; }
.vt[data-disp="tab"][data-compacto] .vt-hero > .vt-marcador { --vt-fw-max: 46; padding-block: 12px; }
.vt[data-disp="tab"][data-compacto] .vt-hero .vt-cifra,
.vt[data-disp="tab"][data-compacto] .vt-hero .vt-mar-pie,
.vt[data-disp="tab"][data-compacto] .vt-hero .vt-meta { margin-top: 8px; }
/* 2-nov noche (reparación B2): con el par sobre el video, 12 px de aire arriba (la banda) y abajo (el video); antes
   14 y 6, y el brillo de Dona aquí pisaba el borde del video */
.vt[data-disp="tab"] .vt-accion { --vt-don-alto: 64px; padding-block: 12px; }
.vt[data-disp="tab"] .vt-don-par { --vt-don-w: clamp(280px, 42vw, 360px); }

/* --- Donar en bloque (tarjeta noche) --- */
.vt-don {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 20px 18px 16px;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 18px 40px rgba(90, 5, 12, 0.3);
}
.vt-don-slot { min-width: 0; padding: 6px 0 10px; }
/* lo que va bajo la tecla queda sobre su luz (la luz es un hijo posicionado del botón) */
.vt-revive { position: relative; z-index: 1; }

/* --- accesos --- */
.vt-acc { display: grid; gap: 10px; width: 100%; }
.vt-acc--grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vt-acc--fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vt-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--tg-noche);
  font: inherit;
  font-size: calc(16px * var(--a11y-fs));
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 24px rgba(90, 5, 12, 0.18);
}
.vt-tile .tg-icon { flex: none; color: var(--tg-rojo-a11y); }
.vt-tile-txt { min-width: 0; overflow-wrap: normal; word-break: normal; }
.vt-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tg-noche);
  transform: translateY(101%);
  transition: transform 220ms var(--tg-ease-llegada);
}
@media (hover: hover) and (pointer: fine) {
  .vt-tile:hover { color: #fff; }
  .vt-tile:hover::before { transform: none; }
  .vt-tile:hover .tg-icon { color: var(--tg-rojo); }
}
.vt-tile:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.vt[data-disp="tab"] .vt-acc--fila .vt-tile { min-height: 72px; font-size: calc(18px * var(--a11y-fs)); flex-direction: column; gap: 6px; }

/* =====================================================================
   9. GRACIAS y APAGADO (sin reproductor)
   ===================================================================== */
.vt-centro {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 0;
  padding: 0 var(--tg-riel);
}
.vt-gr-cab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.vt-gr-h1 {
  font-size: calc(40px * var(--a11y-fs));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
}
.vt-marcador--gracias {
  align-self: stretch;
  margin: 0 calc(-1 * var(--tg-riel));
  padding: 18px var(--tg-riel) 20px;
  --vt-fw-max: 40;
  --vt-fw-min: 16;
  --vt-reloj-k: 0.5;
  --vt-reloj-min: 18;
  --vt-reloj-max: 30;
}
.vt-marcador--gracias .vt-mar-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1100px);
  margin: 0 auto;
  text-align: center;
}
.vt-marcador--gracias .vt-mar-h2 { margin-top: 0; justify-content: center; }
.vt-marcador--gracias .vt-mar-datos { align-self: stretch; display: flex; flex-direction: column; align-items: center; }
.vt-marcador--gracias .vt-h2 { font-size: calc(14px * var(--a11y-fs)); color: #fff; }
.vt-marcador--gracias .vt-cifra { align-self: stretch; margin-top: 12px; }
.vt-marcador--gracias .vt-cifra-vis { justify-content: center; }
.vt-marcador--gracias .vt-mar-pie { justify-content: center; margin-top: 12px; }
.vt-marcador--gracias .vt-rotulo { font-size: calc(15px * var(--a11y-fs)); }
.vt-gr-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  width: min(100%, 760px);
  padding: 16px 18px;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 18px 40px rgba(90, 5, 12, 0.3);
}
.vt-gr-siguen { font-size: calc(16px * var(--a11y-fs)); font-weight: 800; }
.vt-gr-pie .vt-don { padding: 0; background: none; box-shadow: none; flex: 1 1 240px; max-width: 320px; }
.vt-gr-pie .vt-don-slot { padding: 0; }
.vt-revive {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--tg-noche);
  font-size: calc(15px * var(--a11y-fs));
  font-weight: 800;
  text-decoration: none;
}
.vt-revive .tg-icon { color: var(--tg-rojo-a11y); flex: none; }
.vt-revive:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vt-acc--centro { width: min(100%, 760px); }
@media (min-width: 48rem) {
  .vt-marcador--gracias { --vt-fw-max: 64; padding-block: 24px 26px; }
  .vt-gr-h1 { font-size: calc(54px * var(--a11y-fs)); }
}
@media (min-width: 80rem) and (min-height: 820px) {
  .vt-marcador--gracias { --vt-fw-max: 80; }
}
.vt[data-modo="gracias"][data-compacto] .vt-centro { gap: 10px; }
.vt[data-modo="gracias"][data-compacto] .vt-gr-h1 { font-size: calc(30px * var(--a11y-fs)); }
.vt[data-modo="gracias"][data-compacto] .vt-marcador--gracias { padding-block: 12px 14px; --vt-fw-max: 34; }
.vt[data-modo="gracias"][data-compacto] .vt-gr-pie { padding: 10px 14px; gap: 8px 12px; }
.vt[data-modo="gracias"][data-apretado] .vt-gr-cab { gap: 6px; }
.vt[data-modo="gracias"][data-apretado] .vt-gr-h1 { font-size: calc(24px * var(--a11y-fs)); }
.vt[data-modo="gracias"][data-apretado] .vt-gr-siguen { display: none; }

.vt-ap-cab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.vt-ap-h1 { margin: 0; line-height: 0; }
.vt-claim { display: block; width: min(88vw, 520px); height: auto; }
.vt-ap-tablero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 520px);
}
.vt-don--apagado { padding: 18px 18px 14px; }
.vt-acc--apagado .vt-tile { min-height: 48px; }
@media (min-width: 48rem) {
  .vt-centro--apagado { flex-direction: row; gap: 48px; }
  .vt-ap-cab { flex: 0 1 520px; }
  .vt-ap-tablero { flex: 0 1 420px; }
}
@media (min-width: 48rem) and (orientation: portrait) {
  .vt-centro--apagado { flex-direction: column; gap: 28px; }
}
.vt[data-modo="apagado"][data-compacto] .vt-centro { gap: 12px; }
.vt[data-modo="apagado"][data-compacto] .vt-claim { width: min(72vw, 400px); }
.vt[data-modo="apagado"][data-compacto] .vt-don--apagado { padding: 12px 14px 8px; gap: 6px; }
.vt[data-modo="apagado"][data-apretado] .vt-claim { width: min(60vw, 320px); }
.vt[data-modo="apagado"][data-apretado] .vt-acc--apagado .vt-tile { min-height: 44px; }

/* =====================================================================
   10. DÍA NORMAL: captura de la portada de hoy a pantalla completa
   ===================================================================== */
.vt[data-fase="normal"] { padding: 0; overflow: hidden; }
.vt-hoy {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: var(--tg-rojo);
}
/* 1-nov (F43): el foco que llega a la captura (la portada en vivo se fue con el foco en uno de sus controles) se ve:
   la imagen llena la ventana y su anillo por fuera quedaba fuera de ella. El anillo de la casa va por dentro, sobre
   la imagen (::after del hero, fijo): 3 px blanco y 2 px noche por dentro, como el del reproductor (.tgp) */
.vt-hoy:focus-visible { outline: none; }
.vt[data-fase="normal"]:has(.vt-hoy:focus-visible)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  border: 3px solid #fff;
  box-shadow: inset 0 0 0 2px var(--tg-noche);
  pointer-events: none;
}
html[data-contraste="1"] .vt[data-fase="normal"]:has(.vt-hoy:focus-visible)::after { border-width: 4px; }
@media (forced-colors: active) {
  .vt[data-fase="normal"]:has(.vt-hoy:focus-visible)::after { border-color: Highlight; }
}

/* =====================================================================
   11. LÁMINA (los accesos)
   ===================================================================== */
/* bajo el header (lámina z 45, header z 50, como en la landing). La zona que desplaza parte bajo el
   header cuando este se ve (--vt-lam-top lo mide tablero.js) y la cabecera (título y Cerrar)
   queda fija arriba: lo que se desplaza nunca pasa bajo el logo ni deja el foco fuera de la ventana */
.vt-lam {
  position: fixed;
  inset: 0;
  z-index: var(--tg-z-laminas);
  display: flex;
  flex-direction: column;
  padding-top: var(--vt-lam-top, var(--tg-inicio, 60px));
  background: var(--tg-noche);
  color: #fff;
  font-family: var(--tg-font);
  animation: tg-sube 420ms var(--tg-ease-expo) both;
}
.vt-lam-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px calc(var(--tg-reserva-inferior, 96px) + 16px);
  scroll-padding-top: calc(var(--vt-lam-fijo, 0px) + 8px);
}
.vt-lam-int { width: min(100%, 760px); margin: 0 auto; }
.vt-lam-fijo {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 16px 0 12px;
  background: var(--tg-noche);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}
.vt-lam :where(ol, ul, p, h2) { margin: 0; }
.vt-lam :where(ol, ul) { padding: 0; list-style: none; }
.vt-lam-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* 30-oct: con A++ en el celular (320, 360) la palabra más larga del título no se parte y "Cerrar" quedaba fuera de la
   pantalla (en 320 x 568 llegaba a x 367). Solo si ni la palabra más larga del título cabe a su lado (base 0: el título
   se mide por su palabra más larga; con max-content su caja y su foco siguen ciñendo el texto), "Cerrar" baja a su
   propia línea, a la derecha. Donde cabía, nada cambia */
.vt-lam-cab .vt-lam-titulo { flex: 1 1 0; max-width: max-content; }
.vt-lam-cab .vt-lam-cerrar { margin-left: auto; }
.vt-lam-titulo { font-size: calc(26px * var(--a11y-fs)); font-weight: 800; line-height: 1.15; }
.vt-lam-titulo:focus { outline: none; }
.vt-lam-titulo:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 4px; }
.vt-lam-cerrar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--tg-noche);
  font: inherit;
  font-size: calc(15px * var(--a11y-fs));
  font-weight: 800;
  cursor: pointer;
}
.vt-lam-cerrar:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vt-lam-bajada { margin-top: 14px; font-size: calc(14px * var(--a11y-fs)); font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.vt-lam-nota { margin-top: 16px; font-size: calc(16px * var(--a11y-fs)); font-weight: 600; line-height: 1.4; }

/* =====================================================================
   12. DONAR: la tecla se apoya en noche; el host ocupa su caja
   ===================================================================== */
.vt-don-host { min-width: 0; }
.vt-don-host--pildora { display: inline-flex; }
/* 30-oct (pedido de Camilo): el PAR de Donar. "Dona aquí" y, a su derecha, "Donación internacional"
   (opciones/extranjero.js), del mismo ancho y del mismo alto: si el rótulo del segundo va en dos líneas, los dos
   crecen juntos (stretch). Donar va primero en el orden de lectura y de foco. Sin el botón el par es Donar solo.
   Va en la ranura de la barra (escritorio y tablet) y en la fila del celular y del celular apaisado */
.vt-donpar { display: flex; align-items: stretch; gap: var(--vt-par-gap, 12px); min-width: 0; }
.vt-fila .vt-donpar { --vt-par-gap: 8px; }
.vt-donpar > .vt-don-host { display: flex; flex: 1 1 0; min-width: 0; }
.vt-donpar > .vt-don-host > .tgd { flex: 1 1 auto; }
.vt-donpar > .vtx-ext { flex: 1 1 0; min-width: 0; }
/* donde ni a todo el ancho caben lado a lado (celular de 320 px, A++ en el celular): apilados, Donar arriba,
   los dos a todo el ancho y del mismo alto */
/* (grilla de una columna con filas iguales: los dos del mismo alto aunque uno pida más, letra grande) */
.vt-donpar[data-par-apilado] { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
.vt-donpar[data-par-apilado] > :is(.vt-don-host, .vtx-ext) { min-width: 0; }
/* en columna junto a los controles del video (data-par-col, cuando el par en su propia línea le costaría la cifra o
   la meta al celular apaisado): los controles quedan a la altura de Donar, no centrados con la columna */
.vt-fila:not([data-don-linea]):has(> .vt-donpar[data-par-apilado]) { align-items: flex-start; }
/* 31-oct: celular de menos de 360 px con la fila apretada y el par apilado en su línea (320 x 568 con A). Se recoge
   el espacio vertical del par, sin tocar la cifra: la fila arranca 3 px más arriba, 6 px entre los dos botones (8)
   y cada botón mide los 44 px que pide la fila apretada (la insignia de 34 con 6 px arriba y abajo lo dejaba en 46).
   Solo con data-apretado: los pasos del encaje anteriores (P0 a P4) miden igual. 2-nov (elección 1 de Camilo): la
   fila va sobre el video y el par entero entra en el primer pliegue; lo que el par recoge le queda al video y a la
   cifra */
@media (max-width: 359.98px) {
  .vt[data-disp="tel"][data-apretado] .vt-fila[data-don-linea]:has(> .vt-donpar[data-par-apilado]) { padding-top: 3px; row-gap: 6px; }
  .vt[data-disp="tel"][data-apretado] .vt-fila[data-don-linea] > .vt-donpar[data-par-apilado] { --vt-par-gap: 6px; }
  .vt[data-disp="tel"][data-apretado] .vt-fila[data-don-linea] > .vt-donpar[data-par-apilado] :is(.tgd-cuerpo, .vtx-cuerpo) {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
/* tablet retrato: el video va de borde a borde (la barra no lo achica). El par va en su propia fila de la barra, a
   todo su ancho (del riel izquierdo al derecho), cada botón la mitad. Lo que lo acompañe ("Ver") queda en la primera
   fila */
.vt[data-disp="tab"] .vt-accion:has(> .vt-don-par .vt-don-slot[data-par]) { flex-wrap: wrap; row-gap: 10px; }
.vt[data-disp="tab"] .vt-accion > .vt-don-par:has(> .vt-don-slot[data-par]) { flex: 1 1 100%; margin-left: 0; }
.vt[data-disp="tab"] .vt-don-par .vt-don-slot[data-par] { width: 100%; }
.vt-donar-prov {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 14px;
  background: var(--tg-rojo-a11y);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

/* =====================================================================
   13. CAÍDA (una pieza falló): versión mínima, sin animaciones
   ===================================================================== */
.vt[data-caida] .vt-punto,
.vt[data-caida] .vt-mosca,
.vt[data-caida] .vt-meta { display: none; }
.vt[data-caida] * { animation: none !important; transition: none !important; }

/* =====================================================================
   14. MOVIMIENTO: quieto con movimiento reducido, "Pausar animaciones",
       pestaña oculta o una capa encima (data-cubierta)
   ===================================================================== */
.vt[data-cubierta] .vt-punto,
.vt[data-oculta] .vt-punto { animation-play-state: paused; }
/* 29-oct: el tablero fuera de la ventana (tablero.js lo marca con un IntersectionObserver): el punto "EN VIVO" del
   título y el corazón de la meta se detienen (nada infinito corre donde no se ve). 2-nov: la mosca "EN VIVO" de la
   banda, con su punto que latía, salió (pedido 7) */
.vt-marcador[data-fuera-de-vista] :is(.vt-punto, .vt-meta-corazon) { animation-play-state: paused; }
html[data-motion="off"] .vt-punto,
html[data-rm="1"] .vt-punto { animation: none; }
html[data-motion="off"] .vt-lam,
html[data-rm="1"] .vt-lam,
html[data-motion="off"] .vt-meta-relleno,
html[data-rm="1"] .vt-meta-relleno { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .vt-punto,
  .vt-lam,
  .vt-meta-relleno { animation: none; }
  .vt-tile::before { transition: none; }
}

/* =====================================================================
   15. ALTO CONTRASTE y forced-colors
   ===================================================================== */
html[data-contraste="1"] .vt-marcador,
html[data-contraste="1"] .vt-torre,
html[data-contraste="1"] .vt-don,
html[data-contraste="1"] .vt-ap-panel,
html[data-contraste="1"] .vt-gr-pie { background-image: none; }
html[data-contraste="1"] .vt-hero > .vt-marcador,
html[data-contraste="1"] .vt-accion,
html[data-contraste="1"] .vt-don,
html[data-contraste="1"] .vt-ap-panel,
html[data-contraste="1"] .vt-gr-pie { outline: 2px solid #fff; outline-offset: -2px; }
html[data-contraste="1"] .vt-franja .tgp { outline: 2px solid #fff; }
html[data-contraste="1"] .vt-torre { border-block: 2px solid #fff; }
html[data-contraste="1"] .vt-tile { outline: 2px solid var(--tg-noche); outline-offset: -2px; }
html[data-contraste="1"] .vt-h2,
html[data-contraste="1"] .vt-meta-txt { color: #fff; }
html[data-contraste="1"] .vt-chip,
html[data-contraste="1"] .vt-chip-meta { outline: 2px solid var(--tg-noche); }
html[data-contraste="1"] .vt-f { box-shadow: inset 0 0 0 2px var(--tg-noche); background: #fff; }
/* 28-oct: en Alto contraste la ficha va lisa (sin la costura que cruza el dígito por la mitad: a una persona
   con baja visión le costaba distinguir 8, 6, 9 y 0) */
html[data-contraste="1"] .vt-f::after,
html[data-contraste="1"] .vt-f::before { display: none; }
html[data-contraste="1"] .vt-meta-pista { outline: 1px solid #fff; }
html[data-contraste="1"] .vt-don-flota .tgd { outline: 2px solid #fff; outline-offset: 2px; border-radius: 999px; }
@media (forced-colors: active) {
  .vt-marcador,
  .vt-torre,
  .vt-accion,
  .vt-don,
  .vt-ap-panel,
  .vt-gr-pie,
  .vt-tile,
  .vt-btn,
  .vt-lam-cerrar { border: 2px solid CanvasText; }
  .vt-franja .tgp { outline: 2px solid CanvasText; }
  .vt-pie { border-top: 1px solid CanvasText; }
  .vt-f { border: 1px solid CanvasText; forced-color-adjust: none; background: Canvas; color: CanvasText; }
  /* 28-oct: los puntos de miles y los dos puntos de la hora se dibujan con fondo, y con colores forzados el
     fondo pasa a Canvas: desaparecían ("$21 345 678 901", "20 54"). Van en CanvasText. Y la ficha sin la
     costura del medio */
  .vt-sep::before,
  .vt-dos::before,
  .vt-dos::after { forced-color-adjust: none; background: CanvasText; }
  .vt-f::after,
  .vt-f::before { display: none; }
  .vt-meta-riel { display: none; }
}

/* en el celular el sello gira menos: así no tapa el rótulo de la hora */
.vt[data-disp="tel"] .vt-sello > span,
.vt[data-disp="apaisado"] .vt-sello > span { transform: rotate(-3deg); padding: 0.3em 0.8em; }


/* =====================================================================
   v3 (26-oct): la meta y su corazón
   ===================================================================== */
/* nada se anima al cargar: el riel de la meta nace lleno */
.vt-meta-relleno { animation: none !important; box-shadow: none; }

/* la meta: riel con un corazón en la punta que se balancea */
.vt-meta-carril {
  position: relative;
  flex: 1;
  display: block;
  min-width: 0;
  height: 26px;
}
.vt-meta-carril .vt-meta-pista {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 10px;
  margin-top: -5px;
}
.vt-meta-corazon {
  position: absolute;
  top: 50%;
  left: clamp(13px, var(--vt-meta, 0%), calc(100% - 13px));
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--tg-rojo);
  box-shadow: 0 0 0 3px var(--tg-rojo), 0 4px 10px rgba(0, 0, 0, 0.35);
  transform-origin: 50% 85%;
  animation: vt-corazon-vaiven 2.6s ease-in-out infinite;
}
.vt-meta-corazon .tg-icon { width: 14px; height: 14px; }
@keyframes vt-corazon-vaiven {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg) translateY(-1px); }
}
[data-cubierta] .vt-meta-corazon { animation-play-state: paused; }
html[data-motion="off"] .vt-meta-corazon,
html[data-rm="1"] .vt-meta-corazon { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .vt-meta-corazon { animation: none; }
}
@media (forced-colors: active) {
  .vt-meta-corazon { border: 2px solid CanvasText; box-shadow: none; }
}

/* =====================================================================
   16. LO QUE SIGUE AL HERO: la sección del embajador (la lámina de la landing,
       que sube sobre el pie con sus esquinas redondeadas) y los auspiciadores
   ===================================================================== */
.vt-secciones { position: relative; }
.vt-sec-emb {
  position: relative;
  z-index: 1;
  margin-top: -28px;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  isolation: isolate;
}
/* con El Timón, el menú, la hoja del himno o una lámina encima, la cinta del embajador se detiene */
.vt[data-cubierta] .em-pista,
.vt[data-oculta] .em-pista { animation-play-state: paused; }
/* los mismos rieles que el hero (48 en escritorio, 16 en celular): el título, el texto, las flechas y
   "12 AÑOS" de Iaán y el pie de los auspiciadores caen alineados con la banda, la barra y el pie (los
   módulos traen 40/20 y 64/24, los de la landing). Solo variables: embajador.css y auspiciadores.css no
   se tocan */
.vt-sec-emb .em { --em-margen: var(--tg-riel); }
.vt-sec-au .au-bloque {
  --au-riel: var(--tg-riel);
  --au-riel-pie: var(--tg-riel);
  --au-subir-der: var(--tg-riel);
}
/* 29-oct (F14): el celular apaisado es celular, un solo riel de 16 (más el área segura de la muesca), el del
   tablero, el Donar y el flotante. Con el de 48 (el de la tablet, que sigue a --tg-riel desde 48rem), en 844 x 390 y
   932 x 430 el título y las flechas de Iaán quedaban 32 px a la derecha del flotante que tienen debajo */
@media (orientation: landscape) and (max-height: 500px) {
  .vt-sec-emb .em { --em-margen: calc(16px + env(safe-area-inset-left, 0px)); }
  .vt-sec-au .au-bloque {
    --au-riel: calc(16px + env(safe-area-inset-left, 0px));
    --au-riel-pie: calc(16px + env(safe-area-inset-left, 0px));
    --au-subir-der: calc(16px + env(safe-area-inset-right, 0px));
  }
}
/* los puntos del carrusel de Iaán (celular, donde las flechas no se ven): 44 x 44 de área táctil con el
   mismo punto de 8 px; el margen negativo conserva el alto del pie y deja el punto activo en el riel */
.vt-sec-emb .em-puntos { gap: 0; margin: 6px 0 0 -11px; }
.vt-sec-emb .em-punto { width: 44px; height: 44px; margin: -8px 0; }
/* la línea "12 años · La Serena · Teletón Coquimbo" (celular y celular apaisado) lleva la misma sombra que
   el título y la bio (ver abajo). Sin velo: el rojo de la lámina no cambia (ronda 4; el velo noche de la
   ronda 3 lo volvía granate) */
/* el texto de Iaán cruza el rojo, las letras gigantes "IAÁN" y las partes claras de las fotos (la manga
   blanca, el abrigo beige, el niño en el cubo; blanco sobre #f5313e da 3,9:1). Va en blanco pleno y su sombra
   suma un halo corto pegado a la letra: así queda sobre 4,5:1 sin oscurecer la lámina (el halo termina a 2 px
   de cada trazo). 27-oct: solo en celular apaisado. 29-oct (F11): en todos los tamaños; con la sombra suave de
   la landing, en celular y con A++ entre un 10 y un 45 % del borde de la letra quedaba bajo 4,5:1 (medido con
   los píxeles de cada foto). Sin velo: el rojo de la lámina no cambia */
.vt-sec-emb :is(.em-titulo, .em-info, .em-bio, .em-datos-lugar) {
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 3px #000, 0 2px 16px rgba(0, 0, 0, 0.7);
}
/* 29-oct (F35): el título y la línea de datos parten parejo ("2026" o "COQUIMBO" nunca quedan solos en su línea) */
.vt-sec-emb :is(.em-titulo, .em-info) { text-wrap: balance; }
/* 29-oct (F35, corregir3): en el celular apaisado la columna de texto mide el 46 % del ancho (307 px en 667,
   261 en 568) y con A++ "EMBAJADOR 2026" (329 px) no cabía: el título iba en tres líneas con "2026" sola. El
   título puede pasar un poco del borde de la columna, lo justo para "EMBAJADOR 2026" (crece con la letra);
   donde la columna ya alcanza (844, 932, o la letra normal) no cambia nada */
@media (orientation: landscape) and (max-height: 500px) {
  .vt-sec-emb .em-titulo { min-width: calc(258px * var(--a11y-fs, 1)); }
}

/* =====================================================================
   17. "DONA AQUÍ" FLOTANTE: abajo a la izquierda (el lugar de la pastilla del
       himno). 28-oct, pedido de Camilo: se ve si y solo si ningún Donar fijo de
       la portada asoma en la ventana (y no hay una capa encima), en todas las
       fases con Donar y en todos los tamaños. Lo decide tablero.js en el mismo
       cuadro del scroll. Entra en 120 ms (solo opacidad) y se va al tiro, sin
       transición; con movimiento reducido o "Pausar animaciones", sin entrada
   ===================================================================== */
.vt-don-flota {
  position: fixed;
  left: var(--tg-riel);
  bottom: 16px;
  z-index: var(--tg-z-himno);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.vt-don-flota[data-visible] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 120ms ease-out;
}
@media (min-width: 48rem) {
  .vt-don-flota { bottom: 64px; }
}
/* 29-oct (F19, cerrar): en el iPhone apaisado el flotante no baja a la zona del indicador de inicio (entraba
   9 px). Fuera del iPhone env() vale 0 y queda en 12 */
@media (orientation: landscape) and (max-height: 500px) {
  .vt-don-flota { bottom: max(12px, env(safe-area-inset-bottom)); left: calc(16px + env(safe-area-inset-left)); }
}
/* con la pastilla del himno a la vista (fases sin transmisión o ?himno=1), flota sobre ella */
html:not([data-vt-himno="oculto"]) .vt-don-flota { bottom: calc(var(--tg-reserva-pastilla, 76px) + 8px); }
/* rojo sobre el rojo de la lámina de Iaán: un anillo blanco lo separa */
.vt-don-flota .tgd-cuerpo { box-shadow: 0 0 0 2px #fff, 0 8px 18px rgba(22, 3, 7, 0.4); }
/* 29-oct: el foco en dos colores, blanco con un aro noche por fuera: solo blanco no se veía al pasar por la franja
   blanca de Iaán (en forced-colors el sistema lo pinta, y la sombra no se dibuja) */
.vt-don-flota .tgd:is(:focus-visible, [data-forzar="foco"]) .tgd-cuerpo {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 9px var(--tg-noche), 0 8px 18px rgba(22, 3, 7, 0.4);
}
@media (forced-colors: active) {
  .vt-don-flota .tgd:is(:focus-visible, [data-forzar="foco"]) .tgd-cuerpo { outline-color: Highlight; }
}
html[data-motion="off"] .vt-don-flota,
html[data-rm="1"] .vt-don-flota,
html[data-motion="off"] .vt-don-flota[data-visible],
html[data-rm="1"] .vt-don-flota[data-visible] { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .vt-don-flota,
  .vt-don-flota[data-visible] { transition: none; }
}

/* el flotante ya no cede su lugar a Iaán ni a los auspiciadores (28-oct): las piezas de abajo le reservan el
   suyo. tablero.js (reservarFlota) mide su franja: --vt-flota-reserva (del borde inferior de la ventana al
   borde superior del flotante, con 8 px de aire) y --vt-emb-pie (el relleno que necesita el pie de Iaán).
   - Iaán: con la sección llenando la ventana (tras "Conoce a Iaán") el título, la bio, las flechas, los
     puntos y "12 AÑOS" quedan sobre el flotante, nunca bajo él */
.vt-sec-emb .em-pie { padding-bottom: max(var(--em-pie), var(--vt-emb-pie, 0px)); }
/* - celular y celular apaisado (el flotante a 16 o 12 px del borde, y en escritorio con A++): la franja
     blanca caería bajo él con la sección llenando la ventana. La lámina crece lo que mide la franja (la
     franja va dentro del carrusel, abajo): llena la ventana entera sin la franja, que asoma recién al
     seguir bajando */
.vt[data-flota-bajo] .vt-sec-emb :is(.em, .em-carrusel) {
  min-height: calc(clamp(var(--em-piso), var(--em-alto), var(--em-techo)) + var(--vt-emb-franja, 0px));
}
/* - si con la sección en el tope las flechas caerían bajo lo fijo del borde inferior (el flotante, la pastilla
     del himno o El Timón; celular apaisado con A++, donde el texto no cabe en la ventana), se corren a lo ancho
     al primer lugar libre, nunca sobre "12 AÑOS · LA SERENA". tablero.js (ubicarFlechas) lo decide midiendo y
     deja el corrimiento en --vt-iaan-flechas-x. 29-oct: antes iban siempre al borde derecho de la columna y,
     por un redondeo, también en tablet retrato, donde quedaban bajo "LA SERENA" y no respondían al toque */
.vt[data-iaan-flechas] .vt-sec-emb .em-flechas { position: relative; left: var(--vt-iaan-flechas-x, 0px); }
/* - 2-nov (decisión 1 de Camilo, 1-nov): en el celular apaisado bajo, si con la sección en el tope las flechas
     quedarían bajo lo fijo o bajo el borde inferior, van arriba de su texto, a la derecha del primer renglón del
     título. tablero.js (flechasJuntoAlTitulo) mide el lugar y lo deja en --vt-iaan-flechas-izq y -y, relativos a
     .em-texto. Siguen después de la bio en el DOM (el lector lee título, bio y flechas, y el Tab no cambia) */
.vt[data-iaan-flechas-arriba] .vt-sec-emb .em-texto { position: relative; }
.vt[data-iaan-flechas-arriba] .vt-sec-emb .em-flechas {
  position: absolute;
  top: var(--vt-iaan-flechas-y, 0px);
  left: var(--vt-iaan-flechas-izq, 0px);
  z-index: 1;
}
/* - auspiciadores: con la página al final, la dirección y las redes terminan sobre el flotante (y sobre la
     pastilla del himno o El Timón, cuando están) */
.vt-sec-au .au-bloque { --au-reserva: max(var(--tg-reserva-inferior, 0px), var(--vt-flota-reserva, 0px)); }

/* la franja de la lámina de Iaán como separador entre Iaán y los auspiciadores: blanca con letras negras
   (pedido de Camilo, 28-oct; en la landing es negra). Los corazones quedan en el rojo accesible */
.vt-sec-emb .em-huincha { background: #fff; }
.vt-sec-emb .em-item-texto { color: #000; }
/* 29-oct: 14 px como mínimo también en el celular (la landing usa 13; desde 48rem ya es 15) */
@media not all and (min-width: 48rem) {
  .vt-sec-emb .em-item-texto { font-size: calc(14px * var(--a11y-fs, 1)); }
}
.vt-sec-emb .em-item .tg-icon { color: var(--tg-rojo-a11y, #e12d39); }
html[data-contraste="1"] .vt-sec-emb .em-huincha { border-top: 1px solid #000; border-bottom: 1px solid #000; }
/* 4-nov: con Alto contraste, embajador.css deja el texto de la franja en blanco (html[data-contraste="1"] .em-item-texto
   le gana a .vt-sec-emb .em-item-texto por especificidad) y sobre la franja blanca no se leía. Negro, como sin contraste */
html[data-contraste="1"] .vt-sec-emb .em-item-texto { color: #000; }

/* =====================================================================
   18. DONAR JUNTO AL VIDEO (2-nov, elección 1 de Camilo, la opción 3 del laboratorio del mismo día; pedido suyo y de
       la diseñadora de Teletón: "el botón de donar debería estar más arriba, ya que la finalidad de la campaña es que
       la gente done"). tablero.js decide el lugar del par en cada disposición (lugarPar) y lo deja en data-lugar-par
       de #vt: "columna" (escritorio e iPad apaisado: a la derecha del video) o "video" (tablet retrato y celular, y
       el escritorio cuando la columna le quitaría al video más del 3 % de alto: entre el cómputo y el video). La barra bajo el video
       salió; en el celular apaisado el par sigue en el panel, junto al video (sin data-lugar-par)
   ===================================================================== */
/* lo que habla del video ("Ver" y la línea de ayuda) va bajo el video */
.vt-tras-video { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vt-tras-video:empty { display: none; }
.vt[data-disp="tel"] .vt-tras-video { padding: 6px 16px 12px; }
.vt-tras-video > .vt-ayuda { padding: 0; }

/* --- celular: la fila del par entre el cómputo y el video, del tamaño de siempre (la barra de la tablet y del
       escritorio, en la sección 8) --- */
.vt[data-lugar-par="video"] .vt-torre > .vt-fila { padding: 4px 16px 12px; }

/* --- escritorio e iPad apaisado, la columna: el hero es una grilla; el video y la columna del par van centrados
       juntos, la columna a la derecha del video, con Dona aquí arriba, a la altura del borde superior del video, y
       Donación internacional debajo. Bajo el par la columna queda vacía (así la vio y la eligió Camilo). El orden de
       lectura y de Tab es el del documento: el par va ANTES del video (tablero.js) --- */
.vt[data-lugar-par="columna"] .vt-hero[data-hero="esc"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  grid-template-areas:
    "banda banda banda banda"
    ". franja par ."
    "ayuda ayuda ayuda ayuda";
}
/* 2-nov noche (reparación R2): con el video tope de ancho, la holgura va al final del hero, no sobre el video
   (tablero.js, medidasVideo con pegado) */
.vt[data-lugar-par="columna"] .vt-hero[data-hero="esc"] { padding-bottom: calc(var(--vt-hero-pb, 0px) + var(--vt-hueco, 0px)); }
.vt[data-lugar-par="columna"] .vt-hero[data-hero="esc"] > .vt-marcador { grid-area: banda; }
.vt[data-lugar-par="columna"] .vt-hero[data-hero="esc"] > .vt-franja { grid-area: franja; width: var(--vt-pw, 640px); }
/* 2-nov noche (reparación B3): la fila de ayuda ("Detuvimos el video…") parte en el borde del video, no en el riel:
   va en la columna del video, de su ancho */
.vt[data-lugar-par="columna"] .vt-hero[data-hero="esc"] > .vt-ayuda-fila { grid-row: 3; grid-column: 2; padding-left: 0; padding-right: 0; }
.vt[data-lugar-par="columna"] .vt-hero[data-hero="esc"] > .vt-accion {
  grid-area: par;
  align-self: start;
  display: block;
  box-sizing: content-box;
  width: var(--vt-col-w, 280px);
  padding: var(--vt-pv-a, 8px) 0 0 24px;
}
.vt[data-lugar-par="columna"] .vt-hero > .vt-accion .vt-don-par { display: block; margin-left: 0; max-width: none; }
/* 2-nov noche (reparación M3): en la columna, Alto contraste y forced-colors no dibujan un marco alrededor de la columna
   (con la columna vacía bajo el par se veía un rectángulo roto que partía en la banda y pisaba "Donación
   internacional"): cada botón lleva su propio borde y su foco */
html[data-contraste="1"] .vt[data-lugar-par="columna"] .vt-hero > .vt-accion { outline: none; }
@media (forced-colors: active) {
  .vt[data-lugar-par="columna"] .vt-hero > .vt-accion { border: 0; }
}
.vt[data-lugar-par="columna"] .vt-hero > .vt-accion .vt-don-slot,
.vt[data-lugar-par="columna"] .vt-hero > .vt-accion .vt-don-slot[data-par] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  width: 100%;
}