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

.hero {

    position: relative;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    z-index: 1;
}


/* ==========================================================================
   HERO · FONDO
========================================================================== */

.hero video {
    position: fixed;
    width: 100vw;
    height: 100vh;
    inset:0;

    object-fit: cover;

    z-index: 0;
}


/* ==========================================================================
   HERO · TRAMA
========================================================================== */

.hero-trama {

    position: fixed;

    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            var(--magenta) 0.75px,
            transparent 0.75px
        );

    background-size: 3px 3px;

    opacity: 0.5;

    z-index: 1;

}


/* ==========================================================================
   HERO · CONTENEDOR / RETÍCULA
========================================================================== */

.hero-contenedor {

    position: fixed;

    top: 100px;


    width: var(--page-width);

    margin-left: var(--page-margin);
    margin-right: var(--page-margin);

    height: calc(100% - 200px);

    display: grid;

    grid-template-columns: repeat(10, 1fr);

    column-gap: 2%;
    z-index: 2;


    /*
    background:
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.25) 0,
            rgba(0, 0, 0, 0.25) 8.2%,
            transparent 8.2%,
            transparent 10.2%
        );
    */

    z-index: 2;

}


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

.hero-contenido {

    grid-column: 3 / 9;

    align-self: center;

    display: flex;

    align-items: center;

    flex-direction: column;

    transform: translateY(10%);

    text-align: center;

    transition:
    opacity
    var(--duracion-transicion)
    var(--curva-transicion);


}
/* ==========================================================================
   HERO · CONTENIDO OCULTO
========================================================================== */

.hero-oculto {

    opacity: 0;

    pointer-events: none;

}

/* ==========================================================================
   HERO · INFORMACIÓN
========================================================================== */

.hero-info {
    margin-top: 50px;

}

/* ==========================================================================
   HERO · LOGO
========================================================================== */

.hero-logo {

    display: block;
    width: 30%;

}


.hero-logo img {
    width: 100%;

}

/* ==========================================================================
   SCROLL DOWN
========================================================================== */
.scroll-down{
    margin-top: var(--espacio-l);}

.scroll-down:before,
.scroll-down:after {

    content: '';

    display: block;

    width: 15px;
    height: 15px;

    transform: rotate(45deg);

    border-bottom:
        3px solid var(--blanco);

    border-right:
        3px solid var(--blanco);

}


.scroll-down:before {

    animation:
        down-arrow-before
        1.5s
        ease-in-out
        infinite;

}


.scroll-down:after {

    animation:
        down-arrow-after
        1.5s
        ease-in-out
        infinite;

}


@keyframes down-arrow-before {

    50% {

        transform:
            rotate(45deg)
            translate(70%, 70%);

    }

    100% {

        transform:
            rotate(45deg)
            translate(70%, 70%);

    }

}


@keyframes down-arrow-after {

    50% {

        transform:
            rotate(45deg)
            translate(110%, 110%);

        opacity: 0;

    }

    51% {

        transform:
            rotate(45deg)
            translate(-130%, -130%);

    }

    100% {

        transform:
            rotate(45deg)
            translate(-70%, -70%);

        opacity: 1;

    }

}

/* ==========================================================================
   HERO · TRANSICIÓN
========================================================================== */

.hero-transicion {

    position: fixed;

    inset: 0;

    z-index: 5;

    display: flex;

    align-items: center;
    justify-content: center;

    pointer-events: none;

    opacity: 0;

}
.hero-transicion-visible {
    opacity: 1;
}





/* ==========================================================================
   HERO · TABLET
========================================================================== */

@media (max-width: 900px) {

    .hero-contenedor {

        grid-template-columns: repeat(6, 1fr);

        column-gap: 3%;

        /*
        background:
            repeating-linear-gradient(
                to right,
                rgba(0, 0, 0, 0.25) 0,
                rgba(0, 0, 0, 0.25) 14.1667%,
                transparent 14.1667%,
                transparent 17.1667%
            );
        */

    }


    .hero-contenido {

        grid-column: 2 / 6;

    }

}


/* ==========================================================================
   HERO · MÓVIL
========================================================================== */

@media (max-width: 600px) {

    .hero-contenedor {

        grid-template-columns: repeat(4, 1fr);

        column-gap: 4%;

        /*
        background:
            repeating-linear-gradient(
                to right,
                rgba(0, 0, 0, 0.25) 0,
                rgba(0, 0, 0, 0.25) 22%,
                transparent 22%,
                transparent 26%
            );
        */

    }


    .hero-contenido {

        grid-column: 1 / 5;

    }

    .hero-logo {
        width: 35%;
    
    }

}


/* ==========================================================================
   HERO · PANTALLAS GRANDES
========================================================================== */

@media (min-width: 1920px) {

    .hero-contenedor {

        grid-template-columns: repeat(13, 1fr);

        column-gap: 2%;
        /*
        background:
            repeating-linear-gradient(
                to right,
                rgba(0, 0, 0, 0.25) 0,
                rgba(0, 0, 0, 0.25) 5.84615%,
                transparent 5.84615%,
                transparent 7.84615%
            );
        */

    }


    .hero-contenido {

        grid-column: 5 / 10;



    }

}