```css
/* =========================================
   CONTENEDOR PRINCIPAL
========================================= */

.banner-rotativo{
    width:100%;
    max-width:900px;
    margin:30px auto;
    position:relative;
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 4px 15px rgba(0,0,0,0.15);
    background:#fff;
}

/* =========================================
   IMAGEN DEL BANNER
========================================= */

.banner-rotativo img{
    width:100%;
    height:auto;
    display:block;
    transition:opacity 0.5s ease;
}

/* =========================================
   BOTONES DE NAVEGACIÓN
========================================= */

.banner-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.5);
    border:none;
    color:#fff;
    font-size:24px;
    width:45px;
    height:45px;
    cursor:pointer;
    z-index:10;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.3s;
}

/* Hover */



/* =========================================
   INDICADORES
========================================= */

.banner-indicadores{
    position:absolute;
    bottom:15px;
    width:100%;
    text-align:center;
    z-index:10;
}

/* Puntos */

.banner-dot{
    display:inline-block;
    width:12px;
    height:12px;
    margin:0 5px;
    background:rgba(255,255,255,0.6);
    border-radius:50%;
    cursor:pointer;
    transition:0.3s;
}

/* Punto activo */

.banner-dot.active{
    background:#fff;
    transform:scale(1.2);
}

/* =========================================
   EFECTO HOVER EN DESKTOP
========================================= */

.banner-rotativo:hover .banner-btn{
    opacity:1;
}

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

@media(max-width:768px){

    .banner-rotativo{
        border-radius:8px;
    }

    .banner-btn{
        width:38px;
        height:38px;
        font-size:18px;
    }

    .banner-dot{
        width:10px;
        height:10px;
    }

}

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

@media(max-width:480px){

    .banner-rotativo{
        margin:20px auto;
    }

    .banner-btn{
        width:34px;
        height:34px;
        font-size:16px;
    }

    .prev{
        left:8px;
    }

    .next{
        right:8px;
    }

    .banner-indicadores{
        bottom:10px;
    }

}
```