/* ==========================
   Logo Slider - logo.css
   Slider de logos profesional
========================== */

.logo-slider {
    position: relative;
    width: 100px;            /* ancho fijo del logo */
    height: 100px;           /* altura igual al ancho para mantener proporción cuadrada */
    overflow: hidden;
    margin: 0 auto;         /* centrar horizontalmente si es necesario */
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-slider .logo-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;     /* mantiene proporción del logo */
    opacity: 0;              /* inicio invisible */
    transition: opacity 1s ease-in-out; /* desvanecer suavemente */
}

.logo-slider .logo-slide.active {
    opacity: 1;              /* logo visible */
}

/* Media queries opcionales para móviles */
@media (max-width: 600px) {
    .logo-slider {
        width: 72px; /* reducir tamaño en móviles */
        height: 72px;
    }
}