/* ==========================================
   POPUP INICIO SLIDER
========================================== */

#popupInicio{
    width:100%;
    max-width:900px;
    margin:auto;
}

.popupSwiper{
    width:100%;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
}

.popupSwiper .swiper-slide{

    position:relative;

}

.popupSwiper img{

    width:100%;
    aspect-ratio:16/9;

    object-fit:cover;

    display:block;

}

/*======================================
    CAPA OSCURA
======================================*/

.popup-info{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:20px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.25),
        rgba(0,0,0,.92)
    );

}

/*======================================
    TITULO
======================================*/

.popup-info h3{

    margin:0;

    color:#fff;

    font-size:24px;

    font-weight:700;

    line-height:1.3;

}

/*======================================
    FECHA
======================================*/

.popup-fecha{

    display:block;

    margin-top:8px;

    color:#ddd;

    font-size:14px;

}

/*======================================
    CATEGORIA
======================================*/

.popup-categoria{

    position:absolute;

    top:20px;

    left:20px;

    background:#0056b3;

    color:#fff;

    padding:8px 15px;

    border-radius:40px;

    font-size:13px;

    font-weight:bold;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/*======================================
    FLECHAS
======================================*/

.swiper-button-next,
.swiper-button-prev{

    color:#fff;

    width:50px;

    height:50px;

    background:rgba(0,0,0,.45);

    border-radius:50%;

    transition:.3s;

}

.swiper-button-next:hover,
.swiper-button-prev:hover{

    background:#0056b3;

}

/*======================================
    PUNTOS
======================================*/

.swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#fff;

    opacity:.7;

}

.swiper-pagination-bullet-active{

    opacity:1;

    background:#0056b3;

}

/*======================================
    EFECTO HOVER
======================================*/

.popupSwiper img{

    transition:.5s;

}

.popupSwiper .swiper-slide:hover img{

    transform:scale(1.05);

}

/*======================================
    RESPONSIVE
======================================*/

@media(max-width:768px){

.popup-info h3{

    font-size:18px;

}

.popup-fecha{

    font-size:12px;

}

.popup-categoria{

    top:10px;

    left:10px;

    font-size:11px;

    padding:6px 10px;

}

.swiper-button-next,
.swiper-button-prev{

    width:36px;

    height:36px;

}

}