/*Menú principal con un ancho de 650.083px, con espaciado
entre items y alineados al centro*/
.menu {
    align-items: center;
    display: flex;
    height: inherit;
    justify-content: space-evenly;
    max-width: 41.5em;
    width: 100%;
}

/*Tablets y celulares grandes u horizontales*/
@media only screen and (min-width: 768px) and (max-width: 1080px) {

    /*Ancho de 100% heredado de .header-principal*/
    .menu {
        height: var(--altura-header-Tablet);
        width: inherit;
    }
}

/*Celulares verticales*/
@media only screen and (min-width: 0px) and (max-width: 767px) {

    /*Desplazando menú en bloque, con altura de 76.3167px, 
    habilitado el modo scroll vertical*/
    .menu {
        display: block;
        height: var(--altura-header-Celular);
        max-width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    /*
    - Links display heredado en bloque de .menu
    - Ancho heredado de .header-principal
    - Padding de 1.4px
    - Borde superior de 3.2px
    - Transición al hacer click o touch de 0.2 segundos
    - Tamaño de fuente: 14px
    */
    .menu__link {
        border-top: solid 0.2em var(--font-color);
        display: inherit;
        font-size: var(--tamañoLetraCelular-parrafosYLinks-descripcionImagen);
        font-weight: 500;
        padding: 0.1em 0;
        text-align: center;
        transition: 0.2s ease-out;
    }

    /*Eliminando traslado hacía abajo de links*/
    .menu__link.link-style:hover {
        transform: none;
    }

    /*Invirtiendo color de fondo con el de tipografía*/
    .menu__link.link-style:active {
        background-color: var(--font-color);
        color: var(--color-fondo-primario);
    }
}