/*
 * ESTILOS GENERALES (PC: Muestra 4 logos)
 */

/* 1. Control de la velocidad de transición (deslizamiento entre grupos) */
.carousel-inner .carousel-item {
    transition: transform 1.5s ease-in-out !important; 
}

/* 2. Contenedor del grupo de logos (el alto del slide en PC) */
.logo-group {
    /* Altura suficiente para contener el logo de 360px + padding y centrarlo */
    height: 540px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. Estilos para la imagen del logo en PC */
.logo-img {
    height: 500px; /* Tamaño del logo en PC */
    width: 25%;    /* PC: 4 logos a la vez */
    max-width: 25%; 
    object-fit: contain; 
    padding: 10px;
}

/* 4. Estilos para las flechas */
.carousel-control-prev,
.carousel-control-next {
    opacity: 1; 
}


/*
 * DISEÑO RESPONSIVE (TABLET y MÓVIL: Muestra 1 logo)
 * Se aplica a pantallas de hasta 991px de ancho.
 */
@media (max-width: 991px) {
    
    /* Forzar al grupo a apilar los elementos verticalmente (para la lógica 1x1) */
    .logo-group {
        display: block; 
        /* ALTURA DEL CONTENEDOR: 120px para el logo de 80px */
        height: 260px; 
    }

    /* Reducir el tamaño del logo y forzar el ancho total */
    .logo-img {
        /* NUEVO TAMAÑO DEL LOGO EN MÓVIL/TABLET */
        height: 220px; /* ¡80px es un tamaño muy pequeño para móvil! */
        
        width: 100% !important;   
        max-width: 100% !important; 
        margin-bottom: 20px;
    }
}