/* ==============================> BANNERS WEB */

/* CONTENEDOR PRINCIPAL */
.banners-container {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

.banners-escritorio,
.banners-movil {
    width: 100%;
}

/* SWIPER */
.banners-container .swiper {
    width: 100%;
    height: 850px; /* misma altura que el banner en escritorio, evita que el contenedor colapse */
}

.banners-container .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

/* ENLACES, IMÁGENES Y VIDEOS */
.banner-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Imagen, video e iframe se superponen dentro del slide (position: absolute)
   y cubren siempre el mismo alto/ancho con object-fit: cover.
   Esto evita que se sumen alturas cuando un slide trae imagen Y video,
   que era la causa del desborde arriba/abajo en móvil. */
.banner-imagen,
.banner-video,
.banner-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner-iframe {
    pointer-events: none; /* Evita que el usuario pause el video al hacer clic accidentalmente */
}

/* ANIMACIONES */
.banner-link:hover .banner-imagen,
.banner-link:hover .banner-video,
.banner-link:hover .banner-iframe {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

/* BOTONES DE NAVEGACIÓN Y PAGINACIÓN (Se mantienen iguales) */
.banners-container .swiper-button-next,
.banners-container .swiper-button-prev {
    color: #929292 !important;
    background: rgb(0 0 0 / 4%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
}
.banners-container .swiper-button-next:after,
.banners-container .swiper-button-prev:after { font-size: 20px !important; }
.banners-container .swiper-button-next:hover,
.banners-container .swiper-button-prev:hover { background: rgba(0, 0, 0, 0.8) !important; }
.banners-container .swiper-pagination-bullet { background: #ffffff !important; opacity: 0.7 !important; }
.banners-container .swiper-pagination-bullet-active { opacity: 1 !important; background: #ffffff !important; }

/* VISIBILIDAD RESPONSIVE */
.ocultar-movil { display: block; }
.ocultar-escritorio { display: none; }

@media (max-width: 768px) {
    .ocultar-movil { display: none; }
    .ocultar-escritorio { display: block; }

    .swiper {
        height: 400px; /* misma altura fija para imagen, video e iframe en móvil */
    }

    .swiper-button-next, .swiper-button-prev { width: 30px !important; height: 30px !important; }
    .swiper-button-next:after, .swiper-button-prev:after { font-size: 16px !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .swiper {
        height: 600px; /* altura intermedia para tablet, ajústala si tienes otro valor de referencia */
    }

    .swiper-button-next, .swiper-button-prev { width: 35px !important; height: 35px !important; }
    .swiper-button-next:after, .swiper-button-prev:after { font-size: 18px !important; }
}