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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background-image:
linear-gradient(
90deg,

rgba(8,8,8,.93) 0%,

rgba(8,8,8,.80) 22%,

rgba(8,8,8,.55) 42%,

rgba(8,8,8,.20) 62%,

rgba(8,8,8,.05) 100%

),

url("../img/hero.jpg");

    background-size:cover;

    background-position:72% center;

    background-repeat:no-repeat;

}
.hero {
    margin-top: -100px;
    padding-top: 100px;
    min-height: 100vh;

    display: flex;
    align-items: center;

    background-image:
        linear-gradient(
            90deg,
            rgba(8,8,8,.93) 0%,
            rgba(8,8,8,.80) 22%,
            rgba(8,8,8,.55) 42%,
            rgba(8,8,8,.20) 62%,
            rgba(8,8,8,.05) 100%
        ),
        url("../img/hero.jpg");

    background-size: cover;
    background-position: 72% center;
    background-repeat: no-repeat;
}
.hero-grid{

    width:100%;

    display:flex;

    align-items:center;

}

.hero-pretitle{

    display:block;

    font-family:var(--fuente-titulo);

    font-size:3.5rem;

    color:white;

}

.hero-title{

    font-size:8.2rem;

    line-height:.88;

    letter-spacing:-2px;

    margin:15px 0;

}

.hero-divider{

    width:130px;

    height:2px;

    background:var(--color-dorado);

    margin-bottom:35px;

}

.hero-subtitle{

    font-size:2.15rem;

    line-height:1.25;

    max-width:500px;

    margin-bottom:30px;

}

.hero-text{

    color:var(--color-texto);

    font-size:1.08rem;

    line-height:2;

    max-width:500px;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:18px;

}

.hero-image{

    display:flex;

    justify-content:flex-end;

    animation:fadeRight 1s ease;

}

.hero-image img{

    width:100%;

    max-width:760px;

}

.hero-content{

    max-width:560px;

    margin-left:140px;

    padding-top:10px;

    z-index:2;

}
/*==========================
        Animaciones
==========================*/

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}/* CSS Document */
/*======================================================
        ANIMACIÓN DE ENTRADA DEL HERO
======================================================*/

.hero-content {
    animation: heroEntrada 1s ease-out both;
}

@keyframes heroEntrada {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*======================================================
        ANIMACIÓN DE ENTRADA DEL HERO
======================================================*/

.hero-content > * {
    opacity: 0;
    animation: heroElemento 0.8s ease-out forwards;
}

.hero-content .hero-pretitle {
    animation-delay: 0.10s;
}

.hero-content .hero-title {
    animation-delay: 0.20s;
}

.hero-content .hero-divider {
    animation-delay: 0.30s;
}

.hero-content .hero-subtitle {
    animation-delay: 0.40s;
}

.hero-content .hero-text {
    animation-delay: 0.50s;
}

.hero-content .hero-buttons {
    animation-delay: 0.65s;
}

@keyframes heroElemento {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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