/* =========================================================
   SECCIÓN · Franja naranja en movimiento
   Los textos están duplicados en el HTML para que el ciclo
   no tenga cortes (la animación recorre la mitad: -50%).
   ========================================================= */
.strip { overflow: hidden; background: var(--orange); color: var(--night); }
.marquee { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.strip:hover .marquee { animation-play-state: paused; }
.marquee span {
  display: inline-flex; align-items: center; gap: 30px; padding: 24px 30px 24px 0; white-space: nowrap;
  font-family: var(--f-display); font-weight: 800; font-stretch: 118%;
  font-size: var(--step-2); letter-spacing: -.01em; line-height: 1.1;
}
.marquee span::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--night); }
@keyframes marquee { to { transform: translateX(-50%); } }