/* banner.css */

.banner-superior-container {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0; 
    background-color: #f0f0f0; 
}

.banner-img {
    width: 100%;
    height: auto;
    max-height: 280px;
    display: block; 
}

/* PROMO BANNER */
.promo-banner {
    position: fixed; /* Cambiado de relative a fixed */
    top: 0; /* Pegado al borde superior */
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
    text-align: center;
    border: none;
    z-index: 9998; /* Mantener debajo de la cabecera */
}

.promo-banner img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border: none;
    outline: none;
}

/* Ocultar imagen móvil por defecto en escritorio */
.promo-banner .banner-mobile {
    display: none;
}

/* Mostrar imagen escritorio por defecto */
.promo-banner .banner-desktop {
    display: block;
}

/* ========================
   ESTILOS PARA MÓVILES (768px o menos)
   ======================== */
@media (max-width: 768px) {
    /* Forzar visibilidad de la imagen móvil y ocultar escritorio */
    .promo-banner a .banner-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .promo-banner a .banner-desktop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Banner primero (ya está fixed en la parte superior) */
    .promo-banner {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 70px !important; /* Tamaño intermedio */
        z-index: 9998 !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: height 0.3s ease-in-out; /* Transición suave */
    }
    
    .promo-banner img {
        width: 100% !important;
        height: 55px !important;
        object-fit: cover !important;
        object-position: center 50% !important; /* Ajusta qué parte de la imagen se muestra */
        display: block !important;
        transition: all 0.3s ease-in-out;
    }
    
    /* Efecto al hacer scroll (opcional) */
    .promo-banner.scrolled {
        height: 50px !important;
    }
    
    .promo-banner.scrolled img {
        height: 50px !important;
        object-position: center 30% !important;
    }
    
    /* Ajustar espacio del contenido */
    body {
        padding-top: 130px !important; /* 70px + 60px */
        transition: padding-top 0.3s ease-in-out;
    }
    
    body.scrolled {
        padding-top: 110px !important; /* 50px + 60px cuando se hace scroll */
    }
}