/* =========================================================
   CLOUD-TECNOLOGIES — carrusel.css
   Carrusel automático de partners (fondo blanco)
   ========================================================= */

/* ─── ANIMACIÓN DE SCROLL CONTINUO ──────────────────────── */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.animate-scroll {
  animation: scroll 35s linear infinite;
  will-change: transform;
  display: flex;
  align-items: center;
}

/* Pausar al hover */
.carousel-wrapper:hover .animate-scroll {
  animation-play-state: paused;
}

/* ─── IMÁGENES: tamaño uniforme sobre fondo blanco ───────── */
#carousel img {
  flex-shrink: 0;
  width:  140px !important;
  height:  80px !important;
  object-fit: contain;
  object-position: center;

  opacity: 0.75;
  transition:
    opacity   0.35s ease,
    transform 0.3s ease;
  margin: 0 28px;
}

/* Al hover: logo completo, sin filtros */
#carousel img:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* ─── FADES LATERALES BLANCOS ────────────────────────────── */
.carousel-fade-left {
  background: linear-gradient(
    to right,
    #ffffff 0%,
    transparent 100%
  ) !important;
}

.carousel-fade-right {
  background: linear-gradient(
    to left,
    #ffffff 0%,
    transparent 100%
  ) !important;
}

/* ─── VELOCIDAD RESPONSIVA ───────────────────────────────── */
@media (max-width: 768px) {
  .animate-scroll { animation-duration: 22s; }
  #carousel img   { width: 100px !important; height: 60px !important; margin: 0 16px; }
}

@media (min-width: 1280px) {
  .animate-scroll { animation-duration: 42s; }
}

/* ─── PREFERS-REDUCED-MOTION ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .animate-scroll {
    animation: none !important;
  }
}