/* Botones nav swiper */
.swiper-btn-next,.swiper-btn-prev{position:absolute;font-size:24px;top:20%;z-index:99;cursor:pointer;width:26px;height:65px;border:0 solid #000;border-radius:5px;background-color:rgba(0,0,0,.4)}.swiper-btn-prev{left:2%}.swiper-btn-next{right:2%}.swiper-btn-next i,.swiper-btn-prev i{color:#000;position:absolute;top:25%;z-index:99}.swiper-btn-prev i{left:30%}.swiper-btn-next i{right:30%}
.swiper-mas-vistos .swiper-btn-prev{left:0;top:25%}.swiper-mas-vistos .swiper-btn-next{right:0;top:25%}
.swiper-mas-vistos .slide-owl-wrap{display:flex;flex-direction:column;height:100%;min-height:420px}
.swiper-mas-categorias .swiper-btn-prev,.swiper-mas-categorias-home .swiper-btn-prev{left:0;top:35%}
.swiper-mas-categorias .swiper-btn-next,.swiper-mas-categorias-home .swiper-btn-next{right:0;top:35%}
@media (max-width:768px){
    .swiper-mas-vistos .slide-owl-wrap{box-sizing:border-box;padding:0 4px}
    .swiper-mas-categorias .swiper-btn-prev{left:0;top:20%;background-color:rgba(219,219,219,.185)}
    .swiper-mas-categorias .swiper-btn-next{right:0;top:20%;background-color:rgba(219,219,219,.185)}
    .swiper-mas-categorias .swiper-wrapper{width:100%;margin:0!important}
}

/* Swiper Banner */
.swiper-banner {
    aspect-ratio: 2000 / 390;
    position: relative;
    overflow: hidden;
}

.swiper-banner .swiper-wrapper {
    margin: 0 !important;
    padding: 0;
    height: 100%;
}

.swiper-banner .swiper-slide,
.swiper-banner .slide-owl-wrap {
    position: relative;
    width: 100%;
    min-width: 100%;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    display: block;
}

/* Slides 2+ invisibles hasta que su imagen real cargue */
.swiper-banner .slide-owl-wrap:not(:first-child) {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.swiper-banner .carousel-item {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-banner .carousel-item a,
.swiper-banner .carousel-item picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Sin transition en base para no penalizar LCP del primer slide */
.swiper-banner img.banner-image,
.swiper-banner video.banner-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    background-color: #f5f5f5;
}

/* Banner con imagen en mobile + vídeo en desktop: alternar por media query */
.swiper-banner .banner-picture-mobile {
    display: block !important;
}

.swiper-banner .banner-video-desktop {
    display: none !important;
}

@media only screen and (min-width: 800px) {
    .swiper-banner .banner-picture-mobile {
        display: none !important;
    }

    .swiper-banner .banner-video-desktop {
        display: block !important;
    }
}

/* Transición solo en slides 2+ */
.swiper-banner .slide-owl-wrap:not(:first-child) img.banner-image {
    transition: opacity 0.5s ease-in-out;
}

.swiper-banner.swiper-initialized .swiper-slide:not(.swiper-slide-active) img {
    opacity: 0;
}

.swiper-banner img.banner-image.loaded {
    opacity: 1;
}

/* Primer slide siempre visible sin depender de JS (LCP) */
.swiper-banner .slide-owl-wrap:first-child video.banner-image {
    opacity: 1 !important;
}

/* Responsive: la imagen real cambia de tamaño (720x360 / 2000x390) en este mismo breakpoint */
@media only screen and (max-width: 799px) {
    .swiper-banner { aspect-ratio: 720 / 360; }
}

@keyframes shimmer-banner {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.swiper-banner img.banner-image[data-src]:not([src]) {
    background: linear-gradient(90deg, #f5f5f5 25%, #e8e8e8 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: shimmer-banner 1.5s ease-in-out infinite;
}