/* =====================================================
   ESTILOS FINALES: MÓDULO MULTIBANNERS (RESPONSIVE)
=====================================================
*/

/* --- 1. Contenedor Principal --- */
div#modulo-multibanners.container-fluid.px-0 { 
    padding: 2rem !important; /* Espacio externo general */
}
#modulo-multibanners .row {
    padding: 2rem 0;
}

/* --- 2. Caja del Banner (El marco) --- */
#modulo-multibanners .multibanner-caja {
    position: relative;
    overflow: hidden;         /* Para que la imagen no se salga al hacer zoom */
    border-radius: 16px;      /* Bordes redondeados */
    display: block;           /* Comportamiento de bloque */
    
    /* ALTURA DINÁMICA:
       Se adapta al ancho de la pantalla (viewport width) para mantener proporción */
    height: auto;
    
    /* Límites para que no sea ni muy gigante ni muy chico en monitores */
    max-height: 450px;
    min-height: 250px;
}

/* --- 3. Imágenes (Estilos generales) --- */
#modulo-multibanners .multibanner-caja img {
    width: 100%; 
  object-fit: contain; 
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Suavidad al hover */
}

/* --- 4. Efecto Hover (Zoom) --- */
#modulo-multibanners .multibanner-link:hover .multibanner-caja img {
    transform: scale(1.05);
}

/* --- 5. Ocultar Textos (Título/Descripción) --- */
/* Si alguna vez quieres mostrarlos, quita este display: none */
#modulo-multibanners .multibanner-contenido {
    display: none;
}

/* =====================================================
   6. LÓGICA DE VISIBILIDAD (EL CORAZÓN DEL SISTEMA)
===================================================== */

/* --- ESCENARIO DE ESCRITORIO (Default) --- */

/* 1. Ocultamos siempre la imagen marcada como "mobile" */
#modulo-multibanners .multibanner-caja img.mobile {
    display: none; 
}

/* 2. Mostramos la imagen "desktop".
   NOTA: Las imágenes que NO tienen clase (banners 1 y 2) también se ven por defecto. */
#modulo-multibanners .multibanner-caja img.desktop {
    display: block;
}


/* --- ESCENARIO MÓVIL (Pantallas < 767px) --- */
@media (max-width: 767px) {
  
    /* 1. OCULTAR solo la imagen que tenga la clase explícita "desktop" 
       (Esto afectará SOLO al banner horizontal, los cuadrados no tienen esta clase) */
    #modulo-multibanners .multibanner-caja img.desktop {
        display: none !important; 
    }

    /* 2. MOSTRAR la imagen mobile */
    #modulo-multibanners .multibanner-caja img.mobile {
        display: block !important;
    }

    /* 3. Ajuste de altura para celulares
       Hacemos la caja más alta proporcionalmente para que se luzcan más */
    #modulo-multibanners .multibanner-caja {
        height: auto;       /* Más cuadrado en móvil */
        min-height: auto;
        max-height: auto;
    }
}
    /* 1. Ocultamos la imagen móvil en pantallas de PC (mayores a 768px) */
@media (min-width: 769px) {
  #modulo-multibanners .multibanner-caja img.mobile {
    display: none!important;
  }
}

/* 2. Ocultamos la imagen de PC en pantallas de celular (menores a 768px) */
@media (max-width: 768px) {
  #modulo-multibanners .multibanner-caja img.desktop {
    display: none!important;
  }
}