/* =========================================================
   AYS OBRAS — HERO
   ========================================================= */


/* =========================================================
   HERO — CONTENEDOR PRINCIPAL
   ========================================================= */

.ays-hero {
    position: relative;

    width: 100%;
    height: 100dvh;
    

    margin: 0 !important;
    padding: 0 !important;

    background: #F3F3F3;

    overflow: hidden;
}


/* =========================================================
   LÍNEA AMARILLA DEL HERO
   ========================================================= */

.ays-hero-yellow-line {
    position: absolute;

    top: 65px;
    left: 0;

    width: 0;
    height: 3px;

    background: #FEEAAF;

    z-index: 20;

    pointer-events: none;

    animation: none;
}

/* =========================================================
   LÍNEA ACTIVA — SE DISPARA CON EL TAGLINE
   ========================================================= */

.ays-hero-yellow-line.linea-activa {
    animation: ays-line-horizontal 1.6s ease-out forwards;
}

/* =========================================================
   RECORRIDO HORIZONTAL
   ========================================================= */

@keyframes ays-line-horizontal {

    from {
        width: 0;
    }

    to {
        width: calc(100% - 5%);
    }

}


/* =========================================================
   RECORRIDO VERTICAL
   ========================================================= */

.ays-hero-yellow-line::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 3px;
    height: 0;

    background: #FEEAAF;

    animation: none;
}

.ays-hero-yellow-line.linea-activa::after {
    animation: ays-line-vertical 1s ease-out 1.6s forwards;
}

@keyframes ays-line-vertical {

    from {
        height: 0;
    }

    to {
        height: calc(100vh - 65px);
    }

}

/* =========================================================
   BLOQUE DE TEXTO
   ========================================================= */

.ays-hero-text {
    position: absolute;

    top: 20%;
    left: 5%;

    width: 75%;

    padding-left: 30px;

    z-index: 10;
}


/* =========================================================
   TITULAR PRINCIPAL
   ========================================================= */

.ays-hero-text .hero-title {
    margin: 0;
    padding: 0;

    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(70px, 6.4vw, 105px);
    font-weight: 400;

    line-height: 0.92;
    letter-spacing: 0;
    text-transform: uppercase;

    color: #738290;
    overflow: hidden;
}


/* =========================================================
   CADA LÍNEA DEL TITULAR
   ========================================================= */

.ays-hero-text .hero-title > .hero-line {
    display: block;
    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   LÍNEA 1
   ========================================================= */

.ays-hero-text .hero-line-1 {
    color: #738290;
}


/* =========================================================
   LÍNEA 2
   ========================================================= */

.ays-hero-text .hero-line-2 {
    color: #738290;
}


/* =========================================================
   LÍNEA 3
   ========================================================= */

.ays-hero-text .hero-line-3 {
    color: #102B3F;
}


/* Parte gris */

.ays-hero-text .hero-gray {
    color: #738290;
}


/* Parte azul */

.ays-hero-text .hero-dark {
    color: #102B3F;
}


/* =========================================================
   TAGLINE
   ========================================================= */

.ays-hero-text .hero-tagline {
    margin: 38px 0 0 0;
    padding: 0;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(20px, 1.65vw, 29px);

    font-weight: 400;
    line-height: 1.25;

    letter-spacing: 0;

    color: #102B3F;
}

/* =========================================================
   SVG — HERO
   ========================================================= */

.ays-hero-svg {
    position: absolute;

    right: 3%;
    left: auto;

    bottom: 9%;

    width: 82%;
    max-width: none;

    margin: 0;
    padding: 0;

    z-index: 5;

    pointer-events: none;
}


/* SVG */

.ays-hero-svg svg {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}

/* =========================================================
   SVG — FASES
   ========================================================= */

#hero-fase-1,
#hero-fase-2,
#hero-fase-3 {
    transform-origin: center center;
}


/* =========================================================
   SVG — LÍNEAS
   ========================================================= */

.ays-hero-svg .hero-line {
    fill: none;

    stroke-width: 2px;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   EVITAR DESPLAZAMIENTO EXTRA DEL HERO
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
}


/* Elementor no debe añadir espacio alrededor del hero */

.ays-hero {
    margin: 0 !important;
}


.ays-hero-text .hero-title > .hero-text-line {
    display: block;

    width: 100%;

    overflow: hidden;

    height: 1em;

    margin: 0;
    padding: 0;
}


/* =========================================================
   MÁSCARA DE LOS TEXTOS DEL HERO
   ========================================================= */

.ays-hero-text .hero-text-mask {
    display: block;

    width: 100%;
    height: 1em;

    overflow: hidden;

    margin: 0;
    padding: 0;
}


/* TEXTO */

.ays-hero-text .hero-text-line {
    display: block;

    margin: 0;
    padding: 0;

    will-change: transform;
}

/* =========================================================
   MÁSCARAS DE LAS FRASES
   ========================================================= */

.ays-hero-text .hero-line-mask {
    display: block;

    overflow: hidden;

    height: 1em;
}


/* Las frases ocupan su propia línea */

.ays-hero-text .hero-line {
    display: block;
    will-change: transform;
}