.pe-loop-track {
  display: flex;
  width: max-content;
  animation: pe-loop-scroll var(--pe-loop-duration, 10s) linear infinite;
}
.pe-loop-track[data-direction="right"] {
  animation-name: pe-loop-scroll-right;
}
.pe-loop-track[data-pause="true"]:hover {
  animation-play-state: paused;
}
.pe-loop-item {
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes pe-loop-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes pe-loop-scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Rendimiento (2026-09-28): pausa sus animaciones infinitas solo mientras está fuera de pantalla (ver watchOffscreen en script.js). */
.pe-offscreen,
.pe-offscreen::before,
.pe-offscreen::after,
.pe-offscreen *,
.pe-offscreen *::before,
.pe-offscreen *::after {
  animation-play-state: paused !important;
}