#clientes {
  text-align: center;
  padding: 40px 0;
}

.carousel-container {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: scroll var(--scroll-duration, 60s) linear infinite;
}

.carousel-logos {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel-logos li {
  flex: 0 0 auto;
}

.carousel-logos img {
  width: auto;
  height: 70px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.carousel-logos img:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Animación genérica, el desplazamiento exacto lo controla el JS */
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--scroll-distance)); }
}

/* 💻 Tablets medianas */
@media (max-width: 1024px) {
  .carousel-logos img {
    height: 70px; /* un poco más grandes */
  }
}

/* 📱 Tablets pequeñas y móviles grandes */
@media (max-width: 768px) {
  .carousel-logos img {
    height: 80px;
  }
}

/* Celulares */
@media (max-width: 480px) {
  .carousel-logos img {
    height: 90px; /* se ven grandes, legibles y centrados */
  }
}

/* Opcional: reducir el espacio entre logos en mobile */
@media (max-width: 480px) {
  .carousel-logos {
    gap: 10px;
  }
}