/* logoBar.css — scoped para no romper otras secciones */
.logo-bar .carousel{
  position: relative;
  margin: 40px auto;
  width: 90%;
  overflow: hidden;
  display: flex;
  background: #fff;
}

/* Si no quieres scroll, NO uses overflow-x:auto (ya está hidden arriba) */
/* Quitamos scrollbar hack porque ya no hace falta */
.logo-bar .group{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding-right: 1em;
  animation: spin 25s infinite linear;
  will-change: transform; /* ✅ performance */
}

.logo-bar .card{
  flex: 0 0 14rem;
  height: 6rem;
  padding: 1rem;
  border-radius: 16px;
}

.logo-bar .card img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Difuminado */
.logo-bar .carousel::before,
.logo-bar .carousel::after{
  content: "";
  position: absolute;
  top: 0;
  width: 150px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.logo-bar .carousel::before{
  left: 0;
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}

.logo-bar .carousel::after{
  right: 0;
  background: linear-gradient(to left, #fff, rgba(255,255,255,0));
}

/* Animación: mejor con transform (translateX) que con translate property */
@keyframes spin{
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (max-width: 768px){
  .logo-bar .card{ flex-basis: 11rem; height: 5rem; padding: .75rem; }
  .logo-bar .carousel::before,
  .logo-bar .carousel::after{ width: 70px; }
}

@media (prefers-reduced-motion: reduce){
  .logo-bar .group{
    animation: none;
    transform: translateX(0);
  }
}