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

    ELENA ROSS
    HERO

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


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

#hero{

    position: relative;

    width: 100%;
    height: 100vh;

    overflow: hidden;


}


/* ==========================================================================
   IMAGEN DE FONDO
========================================================================== */

.hero-fondo{

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

}

.hero-fondo img{

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center bottom;

}


/* ==========================================================================
   TRAMA DE COLOR
========================================================================== */

.hero-trama{

    position: absolute;

    inset: 0;

    background: var(--color-trama-hero);

    mix-blend-mode: screen;

    z-index: 2;

}


/* ==========================================================================
   DEGRADADO
========================================================================== */

.hero-degradado-superior{

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background: linear-gradient(
        to bottom,
        var(--color-marron-oscuro) 0%,
        transparent 50%
    );

    mix-blend-mode: hard-light;

    opacity: 0.8;

    z-index: 3;

}

.hero-degradado-inferior{

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background: linear-gradient(
        to bottom,
        transparent 50%,
        var(--color-fondo) 100%
    );

    z-index: 4;

}


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

.hero-contenido{

    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 100%;
    max-width: var(--ancho-maximo-web);

    text-align: center;

    z-index: 5;

}

/* ==========================================================================
   TÍTULO
========================================================================== */

.hero-contenido h1{

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

    font-size: var(--size-titulos);

    letter-spacing: 0.1rem;

    font-weight: 400;

    line-height: 1;

    color: var(--color-texto-titulo-beige);

    text-transform: uppercase;

}


/* ==========================================================================
   SUBTÍTULO
========================================================================== */

.hero-subtitulo{

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

    font-size: 2.25rem;

    font-weight: 100;

    line-height: 0.8;

    color: var(--color-texto-marron);

}


/* ==========================================================================
   TEXTO
========================================================================== */

.hero-texto{

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

    font-size: var(--size-texto);

    font-weight: 300;

    line-height: 1.6;

    color: var(--color-texto-marron);

    margin: 80px 0;

}

.hero-texto-guiones{
    display: block;
}

.hero-texto-guiones-superior{
    margin-bottom: 8px;
}

.hero-texto-guiones-inferior{
    margin-top: 8px;
}

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

.hero-botones{

    display: flex;
    flex-direction: column;

    gap: 10px;

}