/* =====================================================================
   LA CINTA entre los accesos y "Calcula tu impacto" (elección de Camilo, 2-nov). Parte de la portada: tablero.html
   la carga siempre (líneas marcadas "separador"); ?separador=0 la apaga. Ver opciones/separador.js.
   La huincha de la landing (Marquee.tsx; la franja negra de los paneles de Campaña y de las láminas): negro puro,
   línea blanca al 30 % arriba, letras blancas al 85 % en mayúsculas, corazones rojos, 56 px entre piezas, 28 s por
   set y los bordes que se desvanecen. Aquí con la fecha y el claim.
   ===================================================================== */

/* el elemento va dentro de .vt-secciones, antes de .vt-sec-calc. Calcula sube sobre él 28 px con sus esquinas
   redondeadas (calcula.css): ese espacio queda libre abajo, como en el pie del hero. 12 px sobre el aire del pie
   (36 px, de los que 28 eran para que Calcula subiera): la cinta queda a 24 px de los accesos */
.vts-sep {
  position: relative;
  z-index: 0;
  margin-top: -12px;
  padding-bottom: 28px;
  color: #fff;
  font-family: var(--tg-font);
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.vts-sep[hidden] { display: none; }
.vts-corazon { flex: none; width: 16px; height: 16px; color: var(--tg-rojo); }

/* la letra de la cinta va en el contenedor (14 px en celular, 15 desde 48rem, por A/A+/A++): la consulta de la
   versión quieta (abajo) se mide en em y sigue a la letra */
.vts-cinta {
  container: vts-cinta / inline-size;
  padding: 14px var(--tg-riel, 16px) 16px;
  font-size: calc(14px * var(--a11y-fs, 1));
}
@media (min-width: 48rem) {
  .vts-cinta { font-size: calc(15px * var(--a11y-fs, 1)); }
}
.vts-marquesina {
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #fff 12%, #fff 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #fff 12%, #fff 88%, transparent);
}
.vts-pista {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: max-content;
  animation: vts-corre 28s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
/* corre solo a la vista; con la pestaña oculta o una capa encima (El Timón, el menú, una lámina, la hoja del
   himno) se detiene, como la cinta de Iaán (tablero.css, .vt[data-cubierta] .em-pista) */
.vts-sep[data-en-vista] .vts-pista { animation-play-state: running; }
.vt:is([data-cubierta], [data-oculta]) .vts-sep .vts-pista { animation-play-state: paused; }
@keyframes vts-corre {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.vts-mitad,
.vts-set,
.vts-item {
  display: flex;
  align-items: center;
  gap: 56px;
}
.vts-mitad { margin-right: 56px; }
.vts-txt {
  white-space: nowrap;
  font-size: 1em;
  font-weight: 800;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
}
/* quieta: movimiento reducido, "Pausar animaciones" y ?rm=1 (separador.js pone data-quieto con
   TG.reducedMotion()): la frase una vez, centrada y sin bucle */
.vts-quieta {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 20px;
  text-align: center;
}
/* la frase en una línea pide unas 32 em (476 px con 15 px): si no cabe (el celular), la fecha arriba y el claim
   abajo, sin el corazón (al final de la primera línea quedaba colgando) */
@container vts-cinta (max-width: 33em) {
  .vts-quieta { flex-direction: column; gap: 2px; }
  .vts-quieta .vts-corazon { display: none; }
  /* en 320 px con A++ "Súmate a lo que nos une" no cabe en una línea: se parte, centrado */
  .vts-quieta .vts-txt { max-width: 100%; white-space: normal; text-wrap: balance; }
}
.vts-sep[data-quieto] .vts-marquesina { display: none; }
.vts-sep[data-quieto] .vts-quieta { display: flex; }
.vts-sep[data-quieto] .vts-pista { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .vts-pista { animation: none; }
  .vts-sep .vts-marquesina { display: none; }
  .vts-sep .vts-quieta { display: flex; }
}
html:is([data-motion="off"], [data-rm="1"]) .vts-pista { animation: none; }
html:is([data-motion="off"], [data-rm="1"]) .vts-sep .vts-marquesina { display: none; }
html:is([data-motion="off"], [data-rm="1"]) .vts-sep .vts-quieta { display: flex; }
/* celular apaisado: más baja (como la huincha de Iaán en apaisado) y con el área segura de la muesca */
@media (orientation: landscape) and (max-height: 500px) {
  .vts-cinta {
    padding: 10px calc(16px + env(safe-area-inset-right, 0px)) 12px calc(16px + env(safe-area-inset-left, 0px));
  }
}
html[data-contraste="1"] .vts-sep { border-top: 1px solid rgba(255, 255, 255, 0.7); }
html[data-contraste="1"] .vts-txt { color: #fff; }

/* colores forzados: la franja con los colores del sistema (el corazón queda como texto) */
@media (forced-colors: active) {
  .vts-sep { border-top: 1px solid CanvasText; border-bottom: 1px solid CanvasText; }
  .vts-txt,
  .vts-corazon { color: CanvasText; }
}