header {
    display: none;
}

/* Para celulares (largura máxima de 600px) */
@media screen and (max-width: 600px) {
    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        width: 100%;
        height: 4rem;
        position: fixed;
        top: 0;
        left: 0;
        border-bottom: 2px solid var(--cinza-borda);
        background-color: #fff;
        z-index: 700;

        & #logo {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            padding: 1rem;
            font-size: 1.5rem;
            border-radius: 1rem;
            background: var(--azul-degrade);
            color: #fff;
        }

        & #btn-menu {
            font-size: 2rem;
            color: var(--azul);
        }

        & #overlay {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000000aa;
            visibility: hidden;
            z-index: 900;

            &.ativo {
                visibility: visible;
            }
        }
    }
}