/* ===================================== */
/* CONTENEDOR PRINCIPAL */
/* ===================================== */

.slider-publicidad{
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: auto;
    overflow: hidden;
    
    /* RELACIÓN 1100 x 200 */
    aspect-ratio: 1100 / 200;
    
    border-radius: 10px;
}

/* ===================================== */
/* SLIDES */
/* ===================================== */

.slide{
    position: absolute;
    width: 100%;
    height: 100%;
    
    opacity: 0;
    transition: opacity 1s ease;
}

.slide.active{
    opacity: 1;
    z-index: 2;
}

/* ===================================== */
/* IMÁGENES */
/* ===================================== */

.slide img{
    width: 100%;
    height: 100%;
    
    object-fit: cover;
    display: block;
}

/* ===================================== */
/* BOTONES */
/* ===================================== */

.prev,
.next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    background: rgba(0,0,0,0.1);
    color: white;
    
    border: none;
    padding: 12px 15px;
    
    cursor: pointer;
    z-index: 10;
    
    font-size: 20px;
    border-radius: 5px;
}

/* BOTÓN IZQUIERDO */

.prev{
    left: 10px;
}

/* BOTÓN DERECHO */

.next{
    right: 10px;
}

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

.prev:hover,
.next:hover{
    background: rgba(0,0,0,0.8);
}

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

@media(max-width:768px){

    .prev,
    .next{
        padding: 8px 10px;
        font-size: 16px;
    }

}

.contenedor-web{

    width:100%;
    max-width:1100px;

    margin:auto;

    padding:0 16px;

    box-sizing:border-box;

}

.slider-publicidad{

    width:100%;
    aspect-ratio:1100/200;

}