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

.hero{

  position:relative;

    min-height:78vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:140px 0 80px;
}

/*==================================*/

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-3;

}

/*==================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

    rgba(25,45,100,.85),

    rgba(25,45,100,.60),

    rgba(25,45,100,.85)

    );

    z-index:-2;

}

/*==================================*/

.hero-container{

  
    width:min(1400px,92%);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

}

/*==================================*/

.hero-content{
color:white;

    flex:1;

    max-width:580px;
}

/*==================================*/

.hero-subtitle{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    margin-bottom:25px;

    letter-spacing:1px;

}

/*==================================*/

.hero h1{

  font-size:3.8rem;

    line-height:1.1;

    margin-bottom:25px;

}

/*==================================*/

.hero p{

   .hero p{

    font-size:1.05rem;

    line-height:1.8;

    max-width:560px;

    color:#F1F1F1;

    margin-bottom:35px;

}

}

/*==================================*/

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:35px;


}

/*==================================*/

.hero-box{

     flex:1;

    max-width:620px;

    position:relative;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.35);

    animation:flotar 5s ease-in-out infinite;
}

/*==================================*/

.hero-box video{

      width:100%;

    display:block;

    border:4px solid var(--amarillo);

    border-radius:20px;
}

/*==================================*/

@keyframes flotar{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}

/*==================================*/

.scroll-indicator{

    bottom:20px;

    opacity:.7;

    font-size:.9rem;

}

/*==================================*/

.scroll-indicator i{

    font-size:22px;

}

/*==================================*/

@keyframes scrollMove{

    0%{

        transform:translate(-50%,0);

    }

    50%{

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

    }

    100%{

        transform:translate(-50%,0);

    }

}

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

@media (max-width:576px){

.hero{
    min-height:auto;
    padding:120px 0 70px;
}

.hero-container{
    display:flex;
    flex-direction:column;
    text-align:center;
    gap:40px;
}

.hero-content{
    order:1;
}

.hero-subtitle{
    font-size:13px;
    padding:8px 18px;
}

.hero h1{
    font-size:2.2rem;
    line-height:1.2;
}

.hero p{
    font-size:16px;
    line-height:1.7;
    max-width:100%;
}

.hero-buttons{
    justify-content:center;
    gap:15px;
    margin-top:30px;
}

.hero-buttons a{
    width:100%;
    max-width:280px;
}

.hero-box{
    order:2;
    width:100%;
}

.hero-box video{
    width:100%;
    border-radius:18px;
}

.scroll-indicator{
    display:none;
}

}