.container_nav{
    margin: 0px auto;
    width: 100%;
    overflow: hidden;
    z-index: 3;
    position: fixed;
    top: 0;
}
.nav{
    /*Custom Properties*/
    --state-burger: scale(1); /*Si tiene escala===1 se mostrara en pantalla*/
    --state-close: scale(0); /*Si tiene escala===0 no se mostrara en pantalla*/
    --state-menu: translate(100%); /*Ocultar menu (-) a la izquierda, (+) a la derecha*/
    padding: 10px 10vw;
    display: grid;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: repeat(2, max-content); /*Crear dos columnas con todo el contenido*/
    background-color: transparent;
    height: 100px;
    background-color: var(--main_yellow);
    transition: background-color 300ms ease-in-out;
}
.nav__logo{
    height: 40px;
}
.nav__logo img{
    height: 100%;
}
.nav__burger, .nav__close{
    cursor: pointer;
    grid-column: -2/-1; /*Posicionas desde la penultima linea hasta la ultima linea*/
    grid-row: 1/2; /*Posicionar desde la primera fila hasta la segunda*/
    transition: .3s transform; /*Animacion de clic*/
}
.nav__burger{
    transform: var(--state-burger); /*Asigna la propiedad*/
}
.nav__close{
    transform: var(--state-close); /*Asigna la propiedad*/
}
.nav__icon{
    width: 40px;
    z-index: 3;
}
.nav__icon img{
    width: 60%;
}
.nav__links{
    position: fixed; /*Fixed para salir del Grid y mantener siemre en pantalla*/
    /*Quitamos margenes a todas direcciones para que ocupe el 100% del espacio*/
    top: 0; bottom: 0; right: 0; left: 40vw;
    display: grid; /*Ocupamos todo el espacio del Viewport*/
    align-content: center; /*Centramos al grid*/
    gap: 0.5em; /*espacio entre elementos*/
    padding-left: 0%; /*Alineado con el logo*/

    transform: var(--state-menu); /*Asigna propiedad de menu*/
    transition: .3s transform; /*Animacion de movimiento a la propiedad transform*/
    background-color: var(--main_white);/*color de opciones en movil*/
    transition: background-color 300ms ease-in-out;
    z-index: 3;
}
.nav__item{
    list-style: none; /*Quitamos estilo de lista*/
    text-align: left;
    padding: 15px;
    padding-right: 50px;
    transition: transform 300ms ease-in-out;
    text-align: right;
}
.nav__link{
    /*Color de fuente blanco y sin estilo de enlace al texto*/
    font-family: var(--m_font);
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 20pt;
}
.nav:target{/*Cuando la etiqueta NAV este siendo apuntada:...*/
    --state-menu: translate(0); /*Trae el menu desde la izquierda a la derecha*/
    --state-burger: scale(0);
    --state-close: scale(1);
}
.nav:target > .opaqueDiv{/*Cuando la etiqueta NAV este siendo apuntada:...*/
    display: unset;
    width: 100vw;
    height: 100vh;
    top: 0;left: 0;
}
.social_nav{
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
}
.nav_social_icon{
    width: 50px;
    height: 50px;
    margin-left: 30px;
}
.nav_social_icon img{
    width: 100%;
}

@media (min-width:768px){
    .nav{
        /*Custom Properties*/
        --state-burger: scale(0); /*No mostrar icono de burger*/
        --state-menu: translate(0); /*Siempre se muestre el menu*/
    }
    .nav:target{/*Cuando la etiqueta NAV este siendo apuntada:...*/
        --state-close: scale(0); /*No se muestra el icono de close*/
        height: 100vh;
    }
    .nav__links{
        /*unset devuelve el valor original de la propiedad y sera parte de la grid nuevamente*/
        background-color: unset;
        position: unset;
        grid-auto-flow: column; /*Flujo del grid en columnas*/
        gap: 10px; /*espacio entre elementos*/
        transform: unset;
        grid-column: -2/-1; /*Posicionar desde la penultima linea en columnas hasta la ultima*/
        grid-row: 1/2; /*Posicionar en filas desde la primera a la segunda*/
        display: flex;
        align-items:center;
        justify-content: center;
    }
    .nav__link{
        font-size: 12pt;
        font-weight: 700;
    }
    .nav__item{
        padding-left: unset;
        padding: 10px;
    }
    .nav__item:hover{
        transform: scale(1.2);
    }
    .nav_social_icon{
        display: none;
    }
}