/* AKZIDENZ FONT */

/* @import url('http://fonts.cdnfonts.com/css/berthold-akzidenz-grotesk-be-9'); */

/* BAUHAUS FONT */

/* @import url('http://fonts.cdnfonts.com/css/bauhaus'); */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth;
    

}

.banner picture{
    position: relative;
    top: 0;
    z-index: 1;
}

ul li:hover{
    cursor: pointer;
}

form input[type=submit]:hover{
    cursor: pointer;
}



main {
    
    background-color: #676767;
    
}

header {
    background: #e82127;
    color: white;

    position: fixed;
    z-index: 1000;
    min-width: 100%;
}

h1,
h2 {
    font-family: 'Varela Round', sans-serif;

}

h1 {
    font-weight: 100;
}



.logo {
    background: url(imagenes/header/TESLA_LOGO.svg) no-repeat center center;
    margin-left: 2rem;
    max-width: 20vw;
    height: 4rem;
    line-height: 4rem;
    /* INTERLINEADO */
}


header>div>h1 {

    text-align: left;
    padding-left: 1rem;
    text-indent: -400px;

}

.encabezado_banner {
    position: relative;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 50vw;
}

.encabezado_banner p {


    text-align: right;

}

#formulario_mobile {
    display: none;
}

/*************** PASTILLAS ************/

.banner-pastillas {
    padding-bottom: 4rem;

}

/*************** CUERPO ************/

/* .cuerpo {
    position: relative;
    top: -1.2rem;
    color: #676767;

} */

.cuerpo span {
    color: #e82127;
    font-weight: bold;

}







/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------  MOBILE ---------------------------------------------------- */
/* --------------------------------------------HASTA 767 PX ------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */



@media screen and (max-width: 768px) {



    nav {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }


    #menu>a {
        list-style: none;
        text-indent: -100px;
        /* CORRO EL TEXTO 100 PX A LA IZQ */
        overflow: hidden;
        /* CON ESTO OCULTO ESE TEXTO CORRIDO A LA IZQ */
        margin-top: .75em;
        background: url("imagenes/header/menu.png") no-repeat center center;
        background-size: cover;
        /* HAGO QUE LA IMAGEN CUBRA TODO EL ANCHO DECLARADO */
        height: 2.5em;
        width: 2.5em;
        position: absolute;
        /* SE PONE POSITION ABSOLUTE PARA PISAR EL DE ABRIR CON EL DE CERRAR ESTANDO EN EL MISMO LUGAR */
        top: 0;
        right: 10px;
        /* border: 2px solid white;
        border-radius: 1rem; */
    }


    /* OCULTAR BOTON CERRAR */

    #cerrar {
        display: none;
    }

    /* Cuando abrir entra en foco animamos el ingreso de la barra y mostramos el botón cerrar para que "tape" al de abrir. 
    
    Si bien al hacer click en cualquier lado de la pantalla abrir pierde foco, no lo hace si lo volvemos a cliquear, por eso superponemos el de cerrar que lo único que hace es que abrir pierda foco y volver a estar display none. 
    
    La pseudoclase focus es nativa para elementos de formulario, sin embargo, también se puede aplicar a los vínculos sin funcionalidad de navegación (con el href #) y lo pierde cuando se hace click en cualquier lugar por fuera del botón en foco. */

    #abrir:focus~#barra {
        left: 0;
        z-index: 1;

    }

    #abrir:focus~#cerrar {
        display: block;
    }

    /*  #abrir:focus .logo>h1 {
        transition: left .5s ease;
    } */


    /*  -------------------------------------------------MAIN-------------------------------------------------- */

    .banner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .banner #button {
        position: absolute;
        align-self: flex-end;
        margin-bottom: 2rem;
        font-size: .6rem;

    }

    #button a {
        position: relative;
        top: 0;
        z-index: 2;
        text-decoration: none;
        color: black;
        font-family: 'Varela Round', sans-serif;
        font-weight: bold;
        border-radius: 3.5rem;
        padding: 1rem;
        box-shadow: 4px 4px 5px 2px rgba(0, 0, 0, 0.3);
        background-color: gold;

    }

    #button:target #formulario_mobile {

        position: fixed;
        top: 4rem;
        left: 0;
        z-index: 10;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        background-color: #e82127;
        color: white;
        width: 100%;
        height: 150%;
        font-size: 1.5rem;
        border-top: 2px solid white;




    }


    #formulario_mobile form {

        padding: 1rem;


    }

    #formulario_mobile form div {
        display: flex;
        justify-content: flex-end;
        align-items: center;

    }

    #formulario_mobile form section {
        display: flex;
        justify-content: center;
        align-items: center;

    }

    #formulario_mobile form section input {
        width: 8rem;
        height: 2.5rem;

    }

    #formulario_mobile form div input {
        width: 12rem;
        height: 2.5rem;
        margin-left: 1rem;

    }



    #formulario_mobile h1 {
        margin-top: 2rem;
    }

    #formulario_mobile span {
        font-size: 1.7rem;


    }

    #formulario_mobile input {

        margin-top: .8rem;
        margin-bottom: .8rem;

    }

    .submit {
        margin-top: 2rem;

    }


    .submit input {

        color: white;
        font-family: 'Varela Round', sans-serif;
        font-weight: 100;
        border-radius: 3.5rem;
        font-size: 1.5rem;
        /* font-weight: bold; */
        line-height: .2rem;
        padding: 1rem;
        border: none;
        box-shadow: 4px 4px 5px 2px rgba(155, 9, 9, 0.928);
        background-color: gold;
        color: black;


    }





    #button:target #button {
        border: none;
        box-shadow: none;
    }

    #button:target a {
        display: none;
    }






    .encabezado_banner {
        position: absolute;
        top: 5rem;
        left: 1rem;
        font-size: 3.5vw;
        color: #9a9a9a;
    }



    .banner img {
        position: relative;
        top: 0;
        left: 0;
        z-index: -5;
        max-width: 100%;
        margin-top: 64px;

    }

    .banner-pastillas {
        /*  position: relative;
        top: -4px;
 */
        display: flex;
        flex-direction: column;
        justify-content: center;

        gap: 2rem;
        background-color: #676767;
        min-width: 100vw;
        min-height: 50vh;
        color: white;

    }

    .banner-pastillas div {

        text-align: center;
        margin: 0 2rem;
        border-bottom: 1px solid white;
    }



    .banner-pastillas h2 {

        color: #9a9a9a;
    }


    .banner-pastillas div:first-child {
        margin-top: 2rem;
    }

    .banner-pastillas>div h2 {
        margin-top: 1rem;
    }

    .banner-pastillas h2,
    p {

        margin-bottom: 1.5rem;
    }


    .banner-pastillas img {

        min-width: 10vw;
        max-width: 20vw;
        min-height: 10vh;
        max-height: 20vh;
    }

    #barra {
        width: 100%;
        position: absolute;
        z-index: 2;
        top: 4rem;
        /* PARA QUE EMPIECE A PARTIR DEL 4REM DEL HEADER */
        left: -200%;
        /* SE LE PONE -100% PARA QUE PERMANEZCA OCULTO Y SEA LLAMADO CON EL FOCUS */
        height: calc(100vh - 4rem);
        /* SE LE RESTA LOS 4 REM DEL TOP */

        transition: left .5s ease;
        display: flex;
        flex-direction: column;
        background-color: #e82127;
        align-items: center;
        padding: 1rem;
        border-top: 2px solid white;
    }

    /* -------------------------------------------- FOOTER ----------------------------------------------- */


    footer {
        /* position: relative;
        top: -9.3rem; */
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #474646;
        color: #9a9a9a;
        text-align: center;
        height: 100vw;
        padding-bottom: 3rem;
        padding-top: 3rem;
    }

    footer div {
        background-color: #474646;
        width: 100vw;
    }

    footer div:last-child {
        background-color: #474646;
        width: 100vw;
        padding-bottom: 3rem;
    }


    footer h2 {
        padding-top: 2rem;
        padding-bottom: 1rem;
        background-color: #474646;
    }

    footer ul {
        list-style: none;
    }

    footer form div input {
        padding: .8rem;
        width: 60vw;
    }

    footer form div span {
        padding-right: .5rem;
    }

    footer form input[type=submit] {
        margin-top: 1.5rem;
        color: black;
        font-family: 'Varela Round', sans-serif;
        font-weight: bold;
        border-radius: 3.5rem;
        padding: .7rem;
        box-shadow: 4px 4px 5px 2px rgba(0, 0, 0, 0.3);
        background-color: white;
        border: none;
        width: 30vw;
    }

    footer section {
        display: flex;
        flex-direction: row;
        padding: 1rem 3rem 0 3rem;
        background-color: #676767;
        color: #9a9a9a;
        text-align: center;
        align-items: center;
        justify-content: space-around;
        width: 100vw;
        font-size: .5rem;
    }

    

    footer ul li {
        padding: .7rem .7rem;
    }

    footer a {
        text-decoration: none;
        color: #9a9a9a;
    }

    footer section>p:first-child {
        align-items: center;
        border: none;
        /* padding-bottom: 1.5rem; */
    }

    footer section>p:last-child {
        
        padding-bottom: 0;
    }

    #redes_sociales ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-bottom: .4rem;
    }

    #redes_sociales ul li a {
        font-size: 0;
    }

    #redes_sociales ul li {
        width: 15vw;
        height: 15vw;
        margin: 1rem;
    }



    .facebook {
        background-image: url(imagenes/footer/iconos/facebook_Mesa\ de\ trabajo\ 1.svg);
        border-radius: 100%;
        box-shadow: 4px 4px 5px 2px rgba(0, 0, 0, 0.3);
    }

    .twitter {
        background-image: url(imagenes/footer/iconos/twiiter_Mesa\ de\ trabajo\ 1.svg);
        box-shadow: 4px 4px 5px 2px rgba(0, 0, 0, 0.3);
        border-radius: 100%;
    }

    .instagram {

        background-image: url(imagenes/footer/iconos/instagram_Mesa\ de\ trabajo\ 1.svg);
        box-shadow: 4px 4px 5px 2px rgba(0, 0, 0, 0.3);
        border-radius: 100%;
    }



}

/* ---------------------------------------------------- CUERPO -------------------------------------------- */

.cuerpo {
    background-image: url(imagenes/main/background_mobile.jpg);
    display: flex;
    flex-direction: column;
    justify-content: center;

}

#informacion div,
#diseno div {
    padding-top: 3rem;
}

#informacion p,
#diseno p {
    padding: 0 3rem 0 3rem;
}

#informacion>div:first-child {
    border-bottom: 2px solid #e82127;
    margin-left: 3rem;
}

#diseno>div:first-child {
    border-bottom: 2px solid #e82127;
    margin-left: 3rem;
}

#diseno picture {
    display: flex;
    justify-content: center;

}

#diseno picture img {

    max-width: 100%;
}

/* -------------------------------------------------- COLORES ----------------------------------------------- */

#colores {
    background-image: url(imagenes/main/background_colores_mobile.jpg);
    /* position: relative;
    top: -1.5rem; */
    display: flex;
    flex-direction: column;
    padding-bottom: 7rem;
    


}

#colores picture {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 1rem;
}

#colores h2 {
    color: #9a9a9a;
    padding-top: 3rem;
    border-bottom: 2px solid #e82127;
    text-align: right;
    margin-right: 3rem;
}

#colores picture img:first-child {
    padding-top: 3rem;
}

#colores picture img:last-child {
    padding-bottom: 3rem;
}

#colores img {
    max-width: 100%;
    align-self: flex-start;
    padding: 1rem;


}

.columnas picture div {
    display: flex;
    flex-direction: row;


}

.columnas p {
    padding-top: 10vh;
    padding-left: 1rem;
    color: #9a9a9a;
    font-size: 1rem;
    /* text-align: center; */
}


/* ------------------------------------------ CYBERTRUCK ADVENTURE -------------------------------------------- */

#adventure {
    /*   position: relative;
    top: -9rem; */
    background: url(imagenes/main/cybertruck_768x524px.jpg) no-repeat;

    width: 100vw;
    height: calc(100vw * (524 / 768));
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;

}

#adventure img {

    max-width: 100%;
}

#adventure h2 {
    /* position: relative;
    top: 18vw;
    z-index: 2; */

    
    display: flex;
    flex-wrap: wrap;
    /* align-self: flex-start; */
    text-align: right;
    margin-right: 5rem;
    color:white;
    font-weight: 200;
    font-size: 5vw;
    font-weight: 100;
    padding-left: 3rem;
    padding-top: .2rem;
    margin-bottom: 2rem;
    font-size: 2rem;
    border-bottom: 2px solid #e82127;
}




/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------TABLET / NOTEBOOK ---------------------------------------- */
/* ------------------------------------------------ MIN-WIDTH 768PX ----------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 769px) {


    /* ------------------------------------------ CYBERTRUCK ADVENTURE -------------------------------------------- */

    #adventure {
        /*   position: relative;
      top: -9rem; */
        background: url(imagenes/main/cybertruck_1024x698px.jpg) no-repeat;

        width: 100vw;
        height: calc(100vw * (698 / 1024));
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-start;
    }

    #adventure img {

        max-width: 100%;
    }

    #adventure h2 {
        /* position: relative;
        top: 18vw;
        z-index: 2; */
    
        
        display: flex;
        flex-wrap: wrap;
        /* align-self: flex-start; */
        text-align: left;
        margin-right: 0;
        color:#474646;
        font-weight: 200;
        padding-left: 0;
        font-weight: 100;
        padding-right: 3rem;
        padding-top: .2rem;
        margin-top: 4rem;
        font-size: 2.5rem;
        border-top: 2px solid #e82127;
        border-bottom: none;
    }



    nav {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
    }

    #menu #abrir,
    #cerrar {
        display: none;
    }



    .encabezado_banner {
        position: absolute;
        top: 8rem;
        left: 1rem;
        font-size: 3.5vw;
        color: #9a9a9a;

        margin-left: 1rem;
    }



    .banner img {
        /* position: relative;
        top: 0; */
        left: 0;
        z-index: -5;
        max-width: 100%;
        margin-top: 64px;

    }

    /* ------------------------------ FORMULARIO ------------------------------- */

    #button a {
        display: none;
    }

    #formulario_mobile {

        position: absolute;
        top: 17rem;
        left: 3rem;
        font-size: 3.5vw;
        z-index: 2;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        background-color: #9a9a9a;
        color: white;
        width: 27vw;
        max-height: 60vh;
        font-size: 1.5rem;
        border-bottom-left-radius: 20%;
        border-bottom-right-radius: 20%;
        box-shadow: 4px 4px 5px 2px rgba(0, 0, 0, 0.5);
    }

    /* hasta aca todo bien */

    #formulario_mobile form {

        padding: 1rem;


    }

    #formulario_mobile form div {
        display: flex;
        justify-content: flex-end;
        align-items: center;

    }

    #formulario_mobile form section {
        display: flex;
        justify-content: center;
        align-items: center;

    }

    #formulario_mobile form section input {
        width: 8rem;
        height: 2.5rem;

    }

    #formulario_mobile form div input {
        width: 9rem;
        height: 1.3rem;
        margin-left: .5rem;

    }



    #formulario_mobile h1 {
        font-size: 1.6rem;
        background-color: #676767;
        width: 100%;
        text-align: center;
    }

    #formulario_mobile span {
        font-size: .8rem;


    }

    #formulario_mobile input {

        margin-top: .4rem;
        margin-bottom: .4rem;

    }

    .submit {
        margin-top: .4rem;

    }

    .submit input:hover {
        background-color: #e82127;
        color: white;
        cursor: pointer;
    }

    .submit input {

        color: white;
        font-family: 'Varela Round', sans-serif;
        font-weight: 100;
        border-radius: 3.5rem;
        font-size: 1rem;
        /* font-weight: bold; */
        line-height: .2rem;
        padding: 1rem;
        border: none;
        box-shadow: 4px 4px 5px 2px rgba(49, 47, 47, 0.696);
        background-color: gold;
        color: black;


    }



    .banner-pastillas {
        position: relative;
        top: -4px;
        padding: 0 5rem 4rem 5rem;
        display: flex;
        flex-direction: row;
        justify-content: center;

        min-height: 40vh;
        background-color: #676767;
        /*  min-width: 100vw;
        min-height: 50vh; */
        color: white;

    }



    .banner-pastillas div {

        text-align: center;
        margin: 0 3rem;


    }

    .banner-pastillas p {
        padding-bottom: 3rem;
        border-bottom: 2px solid white;
    }



    .banner-pastillas h2 {
        font-family: 'Varela Round', sans-serif;
        color: #9a9a9a;
    }


    .banner-pastillas div {
        margin-top: 2rem;
    }

    .banner-pastillas>div h2 {
        margin-top: 1rem;
    }

    .banner-pastillas h2,
    p {

        margin-bottom: 1.5rem;
    }


    .banner-pastillas img {

        min-width: 10vw;
        max-width: 20vw;
        min-height: 10vh;
        max-height: 20vh;
    }

    .viewport_pc {
        max-width: 100%;
    }

    /* #menu {
        display: flex;
        justify-content: flex-end;
    } */

    #barra {
        position: absolute;
        right: 3rem;
        max-width: 60vw;
        display: flex;
        justify-content: space-around;
        margin-right: 0;
        /*  margin-left: 300px; */
        font-size: 1rem;
        text-align: right;

    }

    /* ANIMACION LINKS HOVER */

    #barra li a:after {

        display: block;
        content: "";
        border-bottom: solid 3px #fff;
        transform: scaleX(0);
        transition: transform 300ms ease-in-out;

    }

    #barra li a:hover:after {
        transform: scaleX(1);
    }

    /* -------------------------------------------------- COLORES ----------------------------------------------- */

    #colores {
        background-image: none;
        background-color: #676767;
        position: relative;
        top: -1.5rem;
        display: flex;
        
    }

    #colores picture {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #colores h2 {
        color: #9a9a9a;
        padding-top: 3rem;
        border-bottom: 2px solid #e82127;
        font-size: 3rem;
        font-family: 'Montserrat', sans-serif;
        text-align: right;
        margin-right: 5rem;
    }



    .columnas div img {
        max-width: 100%;
        align-self: center;
        /* padding: 1rem; */


    }

    .columnas picture div {
        display: flex;
        flex-direction: column;
        padding-top: 3rem;

    }

    .columnas p {
        padding-top: 2vh;
        padding-left: 0;
        align-self: center;
        font-weight: bold;
        color: #9a9a9a;
        font-size: 1.5rem;
        /* text-align: center; */
    }

    .columnas picture div img:hover {
        position: relative;
        top: -2vh;
        width: 250px;
        cursor: pointer;


    }

    /* -------------------------------------------- FOOTER ----------------------------------------------- */


    footer {
        /* position: relative;
        top: -9.3rem; */
        display: flex;

        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        background-color: #474646;
        color: #9a9a9a;
        text-align: left;
        /* width: 100%; */
        /* height: 100vh; */
        /* padding-bottom: 3rem; */
        padding-top: 3rem;
        gap: 3rem;
        flex-wrap: wrap;

    }



    footer div {
        display: flex;
        flex-direction: column;
        /* padding-left: 3rem; */
        background-color: #474646;
        /* width: 20vw; */
    }

    footer div:last-child {
        background-color: #474646;
        /* width: 100vw; */
        padding-bottom: 1rem;
    }


    footer h2 {
        padding-top: 2rem;
        padding-bottom: 1rem;
        background-color: #474646;
        font-size: 1rem;

    }

    footer ul {
        list-style: none;

    }

    footer form div input {
        padding: .8rem;
        width: 30vw;
    }

    footer form div span {
        padding-right: .5rem;
        padding-bottom: 1rem;
        width: 5vw;
    }

    footer form input[type=submit] {
        margin-top: 1.5rem;
        color: black;
        font-family: 'Varela Round', sans-serif;
        font-weight: bold;
        border-radius: 3.5rem;
        padding: .7rem;
        box-shadow: 4px 4px 5px 2px rgba(0, 0, 0, 0.3);
        background-color: white;
        border: none;
        width: 10vw;
        align-self: flex-end;
    }

    footer form input[type=submit]:hover{
        background-color: #e82127;
        color: white;
    }

    footer section {
        display: flex;
        flex-direction: row;
        padding: 1rem 3rem 0 3rem;
        background-color: #676767;
        color: #9a9a9a;
        text-align: center;
        align-items: center;
        justify-content: space-around;
        width: 100vw;
    }

    footer section>p:first-child {
        align-items: center;
        border: none;
        /* padding-bottom: 1.5rem; */
    }

    

    footer section p:last-child{
        padding-left: 2rem;
    }

    footer ul li {
        padding: .7rem .7rem;
    }

    footer a {
        text-decoration: none;
        color: #9a9a9a;
    }

    /* footer section>p:first-child {
        border-bottom: 1px solid #9a9a9a;
        padding-bottom: 1.5rem;

    } */



    .newsletter {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    #redes_sociales ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-bottom: .4rem;
    }

    #redes_sociales ul li a {
        font-size: 0;
    }

    #redes_sociales ul li {
        width: 3.5vw;
        height: 3.5vw;
        margin: 1rem;
        
    }



    .facebook {
        background-image: url(imagenes/footer/iconos/facebook_Mesa\ de\ trabajo\ 1_Mesa\ de\ trabajo\ 1.svg);
        border-radius: 100%;
        box-shadow: 4px 4px 5px 2px rgba(0, 0, 0, 0.3);
    }

    .facebook:hover{
        background-image: url(imagenes/footer/iconos/facebook_hover_Mesa\ de\ trabajo\ 1_Mesa\ de\ trabajo\ 1.svg);
    }

    .twitter {
        background-image: url(imagenes/footer/iconos/twiiter_Mesa\ de\ trabajo\ 1.svg);
        border-radius: 100%;
        box-shadow: 4px 4px 5px 2px rgba(0, 0, 0, 0.3);
    }

    .twitter:hover {
        background-image: url(imagenes/footer/iconos/twitter_hover_Mesa\ de\ trabajo\ 1_Mesa\ de\ trabajo\ 1.svg);
    }

    .instagram {

        background-image: url(imagenes/footer/iconos/instagram_Mesa\ de\ trabajo\ 1.svg);
        border-radius: 100%;
        box-shadow: 4px 4px 5px 2px rgba(0, 0, 0, 0.3);
    }

    .instagram:hover {
        background-image: url(imagenes/footer/iconos/instagram_hover_Mesa\ de\ trabajo\ 1_Mesa\ de\ trabajo\ 1.svg);
    }

}





/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------PC / PC WIDE --------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 1025px) {


    #button a {
        display: none;
    }

    #formulario_mobile {

        position: absolute;
        /* top: 25rem; */
        top: 30vw;
        left: 4rem;
        font-size: 3.5vw;

        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        background-color: #9a9a9a;
        color: white;
        max-width: 29vw;
        max-height: 60vh;
        font-size: 1.5rem;
        border-bottom-left-radius: 20%;
        border-bottom-right-radius: 20%;
        box-shadow: 4px 4px 5px 2px rgba(0, 0, 0, 0.5);
    }

    /* hasta aca todo bien */

    #formulario_mobile form {

        padding: 1rem;


    }

    #formulario_mobile form div {
        display: flex;
        justify-content: flex-end;
        align-items: center;

    }

    #formulario_mobile form section {
        display: flex;
        justify-content: center;
        align-items: center;

    }

    #formulario_mobile form section input {
        width: 8rem;
        height: 2.5rem;

    }

    #formulario_mobile form div input {
        width: 15vw;
        height: 2rem;
        margin-left: .5rem;
        margin-right: .5rem;

    }



    #formulario_mobile h1 {
        font-size: 2.5rem;
        background-color: #676767;
        width: 100%;
        text-align: center;
    }

    #formulario_mobile span {
        font-size: 1.5rem;


    }

    #formulario_mobile input {

        margin-top: .4rem;
        margin-bottom: .4rem;

    }

    .submit {
        margin-top: .4rem;

    }

    .submit input {

        color: white;
        font-family: 'Varela Round', sans-serif;
        font-weight: 100;
        border-radius: 3.5rem;
        font-size: 1rem;
        /* font-weight: bold; */
        line-height: .2rem;
        padding: 1rem;
        border: none;
        box-shadow: 4px 4px 5px 2px rgba(49, 47, 47, 0.696);
        background-color: gold;
        color: black;


    }

    /* ---------------------------------------------------- CUERPO -------------------------------------------- */

    .cuerpo {
        background-image: url(imagenes/main/background_pc.jpg);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        padding: 5rem;
        gap: 5rem;

    }

    #informacion h2,
    #diseno h2 {
        font-size: 3rem;
        font-family: 'Montserrat', sans-serif;
        color: #676767;
    }




    #informacion div,
    #diseno div {
        padding-top: 3rem;

    }



    #informacion p,
    #diseno p {

        font-size: 1.5rem;
        line-height: 2rem;
        color:#676767;
    }

    #diseno p,
    #diseno img {
        padding: 0 3rem 0 3rem;
    }

    #informacion>div:first-child {
        border-bottom: 3px solid #e82127;

    }

    #diseno>div:first-child {
        border-bottom: 3px solid #e82127;
        margin-right: 3rem;
    }

    #diseno picture {
        display: flex;
        justify-content: left;
    }

    #diseno picture img {
        max-width: 100%;

        /* margin-left: 3rem; */

    }

    /* ------------------------------------------ CYBERTRUCK ADVENTURE -------------------------------------------- */

    #adventure {
        /*   position: relative;
          top: -9rem; */
        background: url(imagenes/main/cybertruck_1600x1091px.jpg) no-repeat;

        width: 100vw;
        height: calc(100vw * (1091 / 1600));
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-start;

    }

    .adventure img {

        max-width: 100%;
    }

    #adventure h2 {
        /* position: relative;
        top: 18vw;
        z-index: 2; */
    
        
        display: flex;
        flex-wrap: wrap;
        /* align-self: flex-start; */
        text-align: left;
        margin-right: 0;
        color:#474646;
        font-weight: 200;
        padding-left: 0;
        font-weight: 100;
        padding-right: 5rem;
        padding-top: .2rem;
        margin-top: 5rem;
        font-size: 2.7rem;
        border-top: 3px solid #e82127;
        border-bottom: none;
    }


}



#barra li {
    list-style: none;
    margin: 1rem;

}

#barra li a {
    text-decoration: none;
    display: block;
    color: white;
    text-align: center;

    font-weight: bolder;
    font-size: 1.2rem;
}

header {
    margin-bottom: 100rem;
}