@media only screen and ((pointer: coarse) and (hover: none)),
only screen and (max-width: 768px),
only screen and (min-width: 769px) and (max-width: 1024px) and (pointer: coarse) {

    /* Menu button */
    button.buttonMenu {
        position: fixed;
        display: block;
        top: 3%;
        right: 2%;
        padding: 0;
        z-index: 15;
        width: 5vw;
        height: 5vw;
        background: rgba(0, 0, 0, .5);
    }

    button.buttonMenu span {
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        width: 70%;
        height: 0.6vw;
        border-radius: 2px;
        transform-origin: center;
        background-color: var(--white);
        transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }

    /* Estado inicial: hambúrguer */
    button.buttonMenu span:nth-of-type(1) {
        transform: translate(-50%, calc(-50% - 1.2vw));
    }

    button.buttonMenu span:nth-of-type(2) {
        transform: translate(-50%, -50%);
    }

    button.buttonMenu span:nth-of-type(3) {
        transform: translate(-50%, calc(-50% + 1.2vw));
    }

    /* Estado "X" (quando .close é adicionado) */
    button.buttonMenu.close span {
        background-color: var(--white);
    }

    button.buttonMenu.close span:nth-of-type(1) {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    button.buttonMenu.close span:nth-of-type(2) {
        opacity: 0;
    }

    button.buttonMenu.close span:nth-of-type(3) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Menu nav and ul */
    .main-nav {
        display: none;
        position: fixed;
        align-items: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        right: unset;
        transform: none;
        background-color: rgba(0, 0, 0, .88);
    }

    ul#nav-list {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3vw;
    }

    ul#nav-list li:last-child {
        border-radius: 0;
        background-color: transparent;
    }

    ul#nav-list li,
    ul#nav-list li a,
    ul#nav-list li:last-child a {
        height: auto;
        padding: 0;
        font-size: 2.5vw;
        text-align: center;
        color: var(--white);
        font-family: 'montserratRegular', Arial, Helvetica, sans-serif;

        &.locked {
            opacity: .5;
        }
    }

    ul#nav-list li a:hover,
    ul#nav-list li.active a {
        color: var(--white);
    }

    /* Submenu sempre aberto no mobile */
    ul#nav-list .submenu {
        position: static;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        padding: 0;
        margin: 0;
        background-color: transparent;
    }

    /* Remove o comportamento de hover */
    ul#nav-list li:hover>.submenu,
    ul#nav-list li:focus-within>.submenu {
        display: flex;
    }

    /* Itens do submenu */
    ul#nav-list .submenu li,
    ul#nav-list .submenu li a {
        width: 100%;
        height: auto;
        background-color: transparent;
    }

    ul#nav-list .submenu li a {
        text-align: center;
        padding: 3vw 0 0vw 0;
    }

    /* Sem efeito de hover no mobile */
    ul#nav-list .submenu li:hover>a,
    ul#nav-list .submenu li:focus-within>a {
        background-color: transparent;
    }
}

/* MOBILE - Landscape */
@media only screen and (max-width: 768px) and (orientation: landscape) {
    ul#nav-list {
        width: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 5vw 0;
    }
}

/* MOBILE - Portrait */
@media only screen and (max-width: 768px) and (orientation: portrait) {

    /* Menu button */
    button.buttonMenu {
        top: 1.5%;
        right: 2.5%;
        width: 8vw;
        height: 8vw;
    }

    button.buttonMenu span {
        width: 80%;
        height: min(0.77vw, 4px);
    }

    /* Estado inicial: hambúrguer */
    button.buttonMenu span:nth-of-type(1) {
        transform: translate(-50%, calc(-50% - 2vw));
    }

    button.buttonMenu span:nth-of-type(3) {
        transform: translate(-50%, calc(-50% + 2vw));
    }

    /* Menu nav and ul */
    ul#nav-list {
        gap: 6vw;
    }

    ul#nav-list li,
    ul#nav-list li a,
    ul#nav-list li:last-child a {
        font-size: 5vw;
    }

    /* Submenu */
    ul#nav-list .submenu li a {
        padding: 5vw 0 0vw 0;
    }
}

/* MOBILE - Portrait (Tablet) */
@media only screen and (min-width: 769px) and (orientation: portrait) {

    /* Menu button */
    button.buttonMenu {
        width: min(6vw, 60px);
        height: min(6vw, 60px);
    }

    /* Estado inicial: hambúrguer */
    button.buttonMenu span:nth-of-type(1) {
        transform: translate(-50%, calc(-50% - 1.5vw));
    }

    button.buttonMenu span:nth-of-type(3) {
        transform: translate(-50%, calc(-50% + 1.5vw));
    }
}