:root { --altura-barra-retorno: 64px; }

* { box-sizing: border-box; }

html, body, .visualizador-cardapio { width: 100%; min-height: 100%; margin: 0; }

.visualizador-cardapio { height: 100dvh; background: #f8fbff; }

.barra-retorno {
    position: fixed; inset: 0 0 auto; z-index: 1; height: var(--altura-barra-retorno);
    display: flex; align-items: center; justify-content: center; padding: 0 16px;
    color: #f8fbff; background: #063d25; box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
}

.barra-retorno strong { font: 700 1rem "Sora", "Segoe UI", sans-serif; }

.botao-voltar {
    position: absolute; left: 16px; display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 12px; border-radius: 8px; color: inherit;
    font: 700 0.9rem "Sora", "Segoe UI", sans-serif; text-decoration: none;
}

.botao-voltar:hover, .botao-voltar:focus-visible { background: rgb(255 255 255 / 16%); }

.quadro-cardapio { width: 100%; height: 100%; padding-top: var(--altura-barra-retorno); border: 0; }