/**
 * Banner Image Styles
 */

/* Estilos para el banner con imagen */
.banner-container {
    height: 600px !important; /* Establecer altura fija de 500px */
    padding: 0; /* Eliminamos el padding para aprovechar todo el espacio */
    width: 100% !important; /* Asegurar ancho completo */
}

.banner-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Asegurar que el slide ocupe toda la altura */
}

/* Optimizar imagen para diferentes dispositivos */
.banner-slide img,
.banner-image {
    width: 100%; /* Ancho completo */
    height: 100%; /* Altura completa */
    border-radius: 0; /* Eliminar bordes redondeados */
    box-shadow: none; /* Eliminar sombra */
    object-fit: cover; /* Cubrir todo el espacio disponible */
}

/* Fondo personalizado para el banner */
.banner-container .banner-slide {
    background-color: #F9F9F5 !important; /* Color de fondo claro para el banner */
}

/* Ajustar contenedor para dispositivos móviles */
@media (max-width: 768px) {
    .banner-container {
        padding: 0;
        height: 350px !important; /* Altura ajustada para tablets */
    }
    
    .banner-slide img,
    .banner-image {
        width: 100%;
        height: 100%;
    }
}

/* Ajustes para dispositivos móviles pequeños */
@media (max-width: 480px) {
    .banner-container {
        padding: 0;
        height: 250px !important; /* Altura ajustada para móviles */
    }
    
    .banner-slide img {
        max-height: 200px; /* Altura más reducida para móviles pequeños */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra más sutil */
    }
}