/* ================================= */
/* HERO SLIDER PRO */
/* ================================= */

.hero{
    position:relative;
    height:100vh;
    overflow:hidden;
}

/* SLIDES */

.hero-slider{
    position:absolute;
    width:100%;
    height:100%;
}

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

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1);
    transition:transform 7s ease;
}

/* zoom tipo Netflix */

.slide.active img{
    transform:scale(1.1);
}

.slide.active{
    opacity:1;
}

/* overlay */

.hero-overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
    z-index:1;
}

/* CONTENIDO */

.hero-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
    padding:20px;
}

.hero-title{
    font-size:60px;
    margin-bottom:15px;
    opacity:0;
    transform:translateY(40px);
    animation:heroText 1s forwards;
}

.hero-text{
    font-size:20px;
    margin-bottom:25px;
    opacity:0;
    transform:translateY(40px);
    animation:heroText 1s forwards;
    animation-delay:.3s;
}

.hero-btn{
    opacity:0;
    transform:translateY(40px);
    animation:heroText 1s forwards;
    animation-delay:.6s;
}

@keyframes heroText{

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

}

/* FLECHAS */

.hero-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:40px;
    color:white;
    cursor:pointer;
    z-index:3;
    padding:10px;
    user-select:none;
}

.hero-prev{
    left:20px;
}

.hero-next{
    right:20px;
}

/* DOTS */

.hero-dots{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:3;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:white;
    opacity:.5;
    cursor:pointer;
}

.dot.active{
    opacity:1;
}




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

@media (max-width:1015px) {
 .hero h1 {
        font-size: 30px;
    }

}