/* ==========================================================================
   css/mutador/10-marquee.css — parte 10/15 de lo que era styles.css
   --------------------------------------------------------------------------
   §24 marquesina de dos filas.
   Se carga desde inc/paginas.php (_base) EN ESTE ORDEN: el número del
   archivo es su posición en la cascada. Un bloque nuevo → su propio archivo
   con el número que le toque, y añadirlo a la lista de _base.
   ========================================================================== */

/* =========================================================
   §24 · MARQUEE — dos filas, velocidades y direcciones opuestas
   ========================================================= */
.bs-marquee-section{
  background: var(--ink);
  overflow: hidden;
  padding: clamp(24px, 3.5vw, 44px) 0;
  border-top:    1px solid rgba(239,236,228,.08);
  border-bottom: 1px solid rgba(239,236,228,.08);
}
.bs-mq{ overflow: hidden; white-space: nowrap; }
.bs-mq + .bs-mq{ margin-top: clamp(8px, 1.2vw, 18px); }

.bs-mq-track{
  display: inline-flex;
  align-items: center;
  animation: bs-mq-left 32s linear infinite;
  will-change: transform;
}
.bs-mq--rev .bs-mq-track{
  animation: bs-mq-right 20s linear infinite;
}
@keyframes bs-mq-left{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@keyframes bs-mq-right{
  from{ transform: translateX(-50%); }
  to  { transform: translateX(0); }
}
/* Pausa el marquee si el usuario prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .bs-mq-track{ animation-play-state: paused; }
}

.bs-mq-item{
  font-family: var(--display);
  font-size: clamp(38px, 5.8vw, 80px);
  letter-spacing: -.016em;
  line-height: 1;
  color: var(--paper);
  font-weight: 400;
  padding: 0 clamp(28px, 3.5vw, 60px);
}
.bs-mq--sm .bs-mq-item{
  font-family: var(--mono);
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(239,236,228,.38);
  padding: 0 clamp(14px, 1.8vw, 28px);
}
.bs-mq-sep{ color: var(--accent); }
.bs-mq--sm .bs-mq-sep{ color: rgba(239,236,228,.2); }