/* --- ESTILOS UTILIZADOS PARA EL CARRUSEL --- */
.logo-carousel {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    background: whitesmoke;
    padding: 20px 0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.carousel-track {
    display: flex;
}

.logo-carousel:hover .carousel-track {
    animation-play-state: paused;
}

.logo-item {
    flex-shrink: 0;
    width: 160px; /* Ancho para que quepan 6 logos */
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item-gray img {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.logo-item-gray img:hover {
    filter: grayscale(0%);
    opacity: 1;
}
.logo-item-color img {
    max-width: 100%;
    height: auto;
    opacity: 1;
    transition: all 0.3s ease;
}

.logo-item-color img:hover {
    filter: grayscale(100%);
    opacity: 0.7;
}

/* Animación de Izquierda a Derecha (LTR) */
.carousel-track.ltr {
    animation: scroll-ltr 40s linear infinite;
}
@keyframes scroll-ltr {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Animación de Derecha a Izquierda (RTL) */
.carousel-track.rtl {
    animation: scroll-rtl 40s linear infinite;
}
@keyframes scroll-rtl {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

/* --- ESTILOS PARA LA VERSIÓN MÓVIL (RESPONSIVE) --- */
@media (max-width: 768px) {
    .logo-item {
    width: 95px;
    padding: 0 8px;
    }

    .logo-carousel {
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }
	
	.partners-logos {
		max-width: 100%;
		overflow: hidden;
			
	}
 
}