/* ------------------------------------------------------------- */
/* Estilos para el carrusel de logos (Swiper.js)                */
/* ------------------------------------------------------------- */

/* Contenedor del carrusel */
.logos-carousel {
    width: 100%;
    padding: 10px 0;
}

/* Cada slide del carrusel */
.logos-carousel .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

/* Enlaces dentro de los slides */
.logos-carousel .swiper-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 10px;
}

/* Estilos para las imágenes de los logos */
.logos-carousel .swiper-slide img {
    max-width: 100%;
    max-height: 120px;
    /* ✅ Aumentado de 80px a 120px */
    width: auto;
    height: auto;
    object-fit: contain;
    /* Mantiene la proporción sin distorsión */
    filter: grayscale(0%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* Efecto hover en los logos */
.logos-carousel .swiper-slide img:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Responsive: Ajustar altura en pantallas pequeñas */
@media (max-width: 768px) {
    .logos-carousel .swiper-slide img {
        max-height: 80px;
        /* ✅ Aumentado de 60px a 80px */
    }
}