/* Estilos para el carrusel de logos */
.logos-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 1rem 0;
    margin-top: 48px;
}

.logos-slide {
    display: flex;
    animation: slide 80s linear infinite;
    width: max-content;
}

.logos-slide img {
    max-height: 28px;
    margin: 0 25px;
    filter: grayscale(100%);
    opacity: 0.07;
    transition: all 0.3s ease;
}

.logos-slide img:hover {
    filter: grayscale(50%);
    opacity: 0.8;
}

/* Para duplicar el contenido y crear efecto continuo */
.logos-track {
    display: flex;
}

/* Animación de desplazamiento */
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Animación en dirección contraria */
@keyframes slide-reverse {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

.logos-carousel.reverse .logos-slide {
    animation: slide-reverse 80s linear infinite;
}

/* Reglas básicas para móvil */
@media (max-width: 768px) {
    .logos-slide img {
        height: 30px;
        margin: 0 15px;
    }
}