/* =========================================================
   SLIDER COMPLETO CORREGIDO
========================================================= */

.slider{
    width:100%;
    height:100vh;

    position:relative;

    overflow:hidden;

    background:#000;
}

/* SLIDES */

.slide{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    opacity:0;

    transition:opacity 1.2s ease-in-out;
}

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

/* IMAGEN */

.slide img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;
}

/* OVERLAY OSCURO */

.overlay{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,0.45);

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    /* IMPORTANTE */
    padding:140px 20px 40px;

    z-index:2;
}

/* CONTENIDO */

.overlay-content{
    width:100%;
    max-width:900px;

    color:#fff;

    animation:fadeUp 1s ease;
}

/* TITULO */

.overlay-content h1{
    font-size:4rem;

    margin-bottom:20px;

    line-height:1.2;
}

/* TEXTO */

.overlay-content p{
    font-size:1.3rem;

    margin-bottom:30px;

    line-height:1.7;
}

/* BOTON */

.btn{
    display:inline-block;

    padding:15px 35px;

    background:#00bfff;

    color:#fff;

    border-radius:50px;

    font-weight:bold;

    transition:0.3s ease;
}

.btn:hover{
    background:#0099cc;

    transform:translateY(-3px);
}

/* =========================================================
   ANIMACION
========================================================= */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

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

@media(max-width:992px){

    .overlay-content h1{
        font-size:3rem;
    }

}

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

@media(max-width:768px){

    .slider{
        height:90vh;
    }

    .overlay{
        padding:180px 20px 50px;
    }

    .overlay-content h1{
        font-size:2.2rem;

        line-height:1.3;
    }

    .overlay-content p{
        font-size:1rem;
    }

}

/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media(max-width:480px){

    .overlay{
        padding:170px 15px 40px;
    }

    .overlay-content h1{
        font-size:1.8rem;
    }

    .overlay-content p{
        font-size:0.95rem;
    }

    .btn{
        padding:13px 28px;
        font-size:0.95rem;
    }

}