/*
  v30 - carruseles con scroll infinito suave.
  No usa scrollLeft continuo, para evitar el efecto terrible al tocar manualmente.
  El movimiento se hace por transform en un track interno duplicado.
*/

.mm-v30-marquee {
  position: relative !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  touch-action: pan-y !important;
  cursor: default;
}

.mm-v30-marquee::-webkit-scrollbar {
  display: none !important;
}

.mm-v30-marquee-track {
  display: flex !important;
  align-items: stretch !important;
  gap: var(--v30-gap, 16px) !important;
  width: max-content !important;
  min-width: max-content !important;
  will-change: transform;
  transform: translate3d(0,0,0);
  animation-name: mm-v30-marquee-scroll;
  animation-duration: var(--v30-duration, 55s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.mm-v30-marquee-track > * {
  flex: 0 0 auto !important;
}

/* Pausa solo mientras el usuario presiona/toca, para que no pelee con el dedo. */
.mm-v30-marquee[data-v30-hold="1"] .mm-v30-marquee-track,
.mm-v30-marquee:hover .mm-v30-marquee-track {
  animation-play-state: paused;
}

.mm-v30-clone {
  pointer-events: auto;
}

.mm-v30-marquee::before,
.mm-v30-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 8px;
  width: min(42px, 9vw);
  z-index: 2;
  pointer-events: none;
}

.mm-v30-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg, #07111d), transparent);
  opacity: .35;
}

.mm-v30-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg, #07111d), transparent);
  opacity: .35;
}

@keyframes mm-v30-marquee-scroll {
  from {
    transform: translate3d(0,0,0);
  }
  to {
    transform: translate3d(calc(-1 * var(--v30-distance, 900px)),0,0);
  }
}

@media (max-width: 720px) {
  .mm-v30-marquee-track {
    animation-duration: var(--v30-duration-mobile, var(--v30-duration, 45s));
  }

  .mm-v30-marquee::before,
  .mm-v30-marquee::after {
    width: 22px;
    opacity: .22;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-v30-marquee-track {
    animation: none !important;
    transform: none !important;
  }
}