@media(min-width: 320px) and (max-width: 820px) {
    p {
        padding-top: 3%;
        padding-bottom: 3%;
    }
}

@media(min-width: 320px) and (max-width: 820px) {
    .separador {
        margin-top: 5%;
    }
    .separador-conteudo {
        margin-top: 0.5%;
    }
}

@media(min-width: 320px) and (max-width: 820px) {
    main {
        margin-top: 250px; /* 👈 aumenta no mobile */
    }
}


@media(min-width: 320px) and (max-width: 820px) {
    #topo {
        width: 60%;
        height: 30%;
        display: block;
        margin: auto;
    }
}

    @media(min-width: 320px) and (max-width: 820px) {
    #rodape {
        width: 50%;
        height: 20%;
        display: block;
        margin: auto;
    }
}

@media (max-width: 820px) {
    #refeicoes {
        scroll-margin-top: -350px;
    }
}

@media(min-width: 320px) and (max-width: 820px) {
    .separador-conteudo-opcoes {
        margin-top: 5%;
    }
}

@media(min-width: 320px) and (max-width: 820px) {
    #whats {
    width: 15%;
    height: 15%;
    right: 0;
    bottom: 0;
    position: fixed;
    text-align: center;
    margin: 6%;
    margin-right: 10px;
 }
}