.slider{
    position:relative;
    width:100%;
    height:600px;
    overflow:hidden;
    border-radius:0px;
    box-shadow:0 20px 50px rgba(0,0,0,.6);
}

.slides{
    display:flex;
    width:200%;
    height:100%;
    animation:slide 10s infinite;
}

.slide{
    width:100%;
    position:relative;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.2));
}

.content{
    position:absolute;
    bottom:50px;
    left:50px;
    color:white;
    z-index:2;
}

.content h1{
    font-size:3rem;
    margin-bottom:10px;
}

.content p{
    font-size:1.1rem;
    opacity:.9;
}

@keyframes slide{
    0%{transform:translateX(0);}
    45%{transform:translateX(0);}
    50%{transform:translateX(-50%);}
    95%{transform:translateX(-50%);}
    100%{transform:translateX(0);}
}

/* Botones */
.nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:0 20px;
    z-index:5;
}

.nav span{
    width:50px;
    height:50px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:25px;
    cursor:pointer;
    transition:.3s;
}

.nav span:hover{
    background:#ffffff;
    color:#000;
}
