.hero{

    position:relative;

    min-height:760px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background-image:url("../assets/images/hero-background.png");
    background-size:cover;
    background-position:center right;
    background-repeat:no-repeat;
}

.hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.90) 32%,
        rgba(255,255,255,.50) 56%,
        rgba(255,255,255,0) 100%
    );
}

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;
    grid-template-columns:52% 48%;

    align-items:center;

    min-height:760px;
}

.hero-content{

    max-width:600px;
}

.eyebrow{

    font-size:12px;
    letter-spacing:2px;
    font-weight:700;

    color:var(--secondary);
}

.hero h1{

    font-size:78px;
    line-height:.92;

    font-weight:800;
    letter-spacing:-3px;

    margin:22px 0;
}

.hero h1 span{

    color:var(--secondary);
}

.hero p{

    font-size:18px;
    line-height:1.75;

    color:var(--gray);

    max-width:470px;
}

.hero-buttons{

    display:flex;
    gap:18px;

    margin-top:34px;
}


/*=========================================
=        HERO RESPONSIVE (MÓVIL)          =
=========================================*/

@media (max-width:768px){

    .hero{
        min-height:auto;
        padding:36px 0 56px;
        background-position:72% center;
    }

    .hero::before{
        background:linear-gradient(
            180deg,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.88) 45%,
            rgba(255,255,255,.35) 100%
        );
    }

    .hero-grid{
        grid-template-columns:1fr;
        min-height:auto;
        align-items:flex-start;
    }

    .hero-content{
        max-width:100%;
        text-align:center;
    }

    .eyebrow{
        display:block;
        margin-bottom:12px;
    }

    .hero h1{
        font-size:58px;
        line-height:.92;
        letter-spacing:-2px;
        margin:12px 0 20px;
    }

    .hero p{
        max-width:100%;
        margin:0 auto;
        font-size:18px;
    }

    .hero-buttons{
        flex-direction:column;
        gap:14px;
        margin-top:28px;
    }

    .hero-buttons .btn{
        width:100%;
        justify-content:center;
    }

}