/* ===== Carrusel continuo para el widget con clase .marquee-loop =====
   Ajustá estos valores rápidos a tu gusto */
.marquee-loop{
  max-width: 1200px;   /* ancho visible del carrusel */
  margin: 0 auto;
  --logo-gap: 32px;    /* separación entre logos */
}

/* Que Swiper no meta mano en el transform/transition del wrapper */
.marquee-loop .swiper,
.marquee-loop .swiper-container{ overflow: hidden; }
.marquee-loop .swiper-wrapper{
  transform: none !important;
  transition: none !important;
}

/* Nuestro track interno (lo anima el JS con variables CSS) */
.marquee-loop .marquee-track{
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--logo-gap);
  will-change: transform;
}

/* El JS agrega .is-animating cuando setea --marquee-duration y --track-distance */
.marquee-loop.is-animating .marquee-track{
  animation: marquee var(--marquee-duration, 30s) linear infinite;
}

/* Slides y logos: tamaño controlado por altura, sin estirar */
.marquee-loop .swiper-slide{
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
}
.marquee-loop .swiper-slide img{
  display: block;
  width: auto !important;
  height: auto !important;
  max-height: 120px;     /* Desktop por defecto */
  max-width: 180px;     /* límite por si algún logo es muy ancho */
  object-fit: contain;
}

/* Tablets */
@media (max-width: 1024px){
  .marquee-loop .swiper-slide img{
    max-height: 100px;
    max-width: 150px;
  }
}

/* Móviles */
@media (max-width: 768px){
  .marquee-loop .swiper-slide img{
    max-height: 100px;
    max-width: 120px;
  }
}

/* Preferencia de usuario: reducir movimiento */
@media (prefers-reduced-motion: reduce){
  .marquee-loop.is-animating .marquee-track{ animation: none; }
}

/* Animación (la distancia/tiempo los setea el JS) */
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--track-distance, 0px))); }
}