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

.hero{

    position:relative;
    width:100%;
    height:90vh;
    overflow:hidden;

}

.slides{

    position:absolute;
    width:100%;
    height:100%;

}

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity 2s ease-in-out;

    z-index:1;

}

.slide.active{

    opacity:1;

    z-index:2;

}



.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    display:block;

}

@keyframes zoomHero{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.12);

    }

}

.overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.60);

}

.hero-content{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:90%;

    max-width:1000px;

    text-align:center;

    z-index:100;

}

.hero-content h1{

    font-size:78px;

    font-weight:800;

    margin-bottom:15px;

    text-shadow:0 10px 20px rgba(0,0,0,.5);

}

.hero-content h2{

    font-size:32px;

    color:#dddddd;

    margin-bottom:25px;

}

.hero-content p{

    font-size:22px;

    line-height:1.8;

    max-width:850px;

    margin:auto;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.indicadores{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:999;

}

.indicador{

    width:14px;

    height:14px;

    border-radius:50%;

    background:white;

    opacity:.35;

    cursor:pointer;

    transition:.3s;

}

.indicador.active{

    opacity:1;

    background:#d60000;

}

.flecha{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    color:white;

    font-size:45px;

    cursor:pointer;

    z-index:999;

    transition:.3s;

    padding:20px;

}

.flecha:hover{

    color:#d60000;

}

.flecha.izquierda{

    left:25px;

}

.flecha.derecha{

    right:25px;

}