.rojo {
    color: hsla(0, 100%, 39%, 1);
}

.azul {
    color: hsla(169, 100%, 36%, 1);
}

.naranja {
    color: rgba(255, 107, 0, 1);
}

.gris {
    color:rgba(172, 172, 172, 100%);
}

/*-----------------------------------------------*/
header {
    position: fixed;
    width: 99.6%;
    height: 5vw;
    top: 0;
    left: 0;
    border-bottom: 0.2vw solid hsla(180, 100%, 50%, 0.659);
    z-index: 3;
    background-color: black;
}

/* Menú */
.MENU {
    margin-top: 1.5vw;
    display: flex;
    justify-content: space-between;
}

/* Enlaces de Proyectos */
.M_PROYECTOS {
    font: bold 1.15vw "Roboto", sans-serif;
    margin-right: 3%;
    margin-top: 0.5vw;
}

.M_PROYECTOS a {
    margin-left: 5vw;
    text-decoration: none;
    transition: color 0.3s;
}

.M_PROYECTOS a:hover {
    color: rgb(255, 255, 255);
    text-shadow: 0.2vw 0.2vw 0.4vw rgba(0, 0, 0, 0.5);
    padding: 0.8vw;
    background-color: hsla(210, 100%, 7%, 0.759);
    border-radius: 0.5vw;
    border: 0.2vw solid aqua;
}

/* Logo */
.LOGO {
    display: flex;
    margin-left: 5vw;
}

.LOGO a {
    text-decoration: none;
    font: bold 2vw "Roboto", sans-serif;
    color: hsla(192, 75%, 45%, 0.89);
    transition: color 0.3s;
}

.LOGO a:hover {
    color: rgb(255, 255, 255);
}

.BOTON_MENU {
    display: none;
    font: 2.5em sans-serif;
    color: rgb(3, 177, 192);
    margin-top: -1.4vw;
    margin-right: 3vw;
    cursor: pointer;
}

.CERRAR_MENU {
    display: none;
    font: bold 7vw "Roboto", sans-serif;
    color: rgb(255, 0, 0);
    margin-left: 75vw;
    cursor: pointer;

}
/*---------------------------------------------------------------------------------------*/

@media screen and (max-width: 1024px) {
    header {
        height: 6vw;
    }
    
    .MENU {
        margin-top: 1.5vw;
    }
    
    .M_PROYECTOS {
        font: bold 2vw "Roboto", sans-serif;
        margin-right: 3%;
        margin-top: 0.5vw;
    }
    
    .M_PROYECTOS a:hover {
        padding: 1.5vw;

    }
    
    .LOGO a {
        font: bold 3vw "Roboto", sans-serif;
    }
    
    .LOGO a:hover {
        color: rgb(255, 255, 255);
    }
}



@media screen and (max-width: 750px) {
    header {
        height: 18vw;
    }

    .BOTON_MENU {
        display: block;
        
    }

    .CERRAR_MENU {
        display: block;
    }
    
    .MENU {
        margin-top: 3vw;
    }
    
    .M_PROYECTOS {
        width: 100%;
        top: 0;
        text-align: center;
        background-color: rgba(69, 69, 69, 0.967);
        border-bottom: 3px solid aqua;
        position:fixed;
        display: none;
        font: bold 5vw "Roboto", sans-serif;
    }

☰

    .M_PROYECTOS a {
        margin-top: 8vw;
    }
    
    .M_PROYECTOS a:hover {
        padding: 2vw;
    }
    
    .LOGO a {
        margin-top: 0.5rem;
        font: bold 2rem "Roboto", sans-serif;
    }
    
    .LOGO a:hover {
        color: rgb(255, 255, 255);
    }
}