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

.hero{
    position: relative;
    height: 90vh;
    background-image: url("../img/hero.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

/* ===========================
   CAPA OSCURA
=========================== */

.overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(0,0,0,.60) 0%,

        rgba(0,0,0,.35) 40%,

        rgba(0,0,0,.15) 100%

    );

}

/* ===========================
   CONTENIDO
=========================== */

.hero-content{
    position: relative;
    z-index: 2;
    color: white;
    max-width: 700px;
}

.hero h1{

    font-size:60px;

    margin-bottom:20px;

}

.hero p{

    font-size:22px;

    margin-bottom:35px;

}

/* ===========================
   BOTONES
=========================== */

.hero-buttons{

    display:flex;

    gap:20px;

}

.btn-secundario{

    border:2px solid white;

    color:white;

    padding:12px 24px;

    border-radius:8px;

    transition:.3s;

}

.btn-secundario:hover{

    background:white;

    color:#355E3B;

}
.hero-location{

    display:inline-block;

    margin-bottom:20px;

    padding:8px 18px;

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

    backdrop-filter:blur(8px);

    border-radius:50px;

    color:white;

    font-size:14px;

    letter-spacing:1px;

}

.scroll-indicator{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    text-align:center;

    font-size:18px;

    animation:bounce 2s infinite;

}

.scroll-indicator span{

    display:block;

    font-size:13px;

    margin-top:8px;

}

@keyframes bounce{

    0%,100%{

        transform:translateX(-50%) translateY(0);

    }

    50%{

        transform:translateX(-50%) translateY(10px);

    }

}