/* Estrutura comum. Cores e letras chegam por variáveis definidas fora do motor. */
@font-face { font-family: "Abhaya Libre"; font-weight: 700; font-style: normal; font-display: swap; src: url("fontes/abhaya-libre-700.woff2") format("woff2"); }
@font-face { font-family: "Abhaya Libre"; font-weight: 800; font-style: normal; font-display: swap; src: url("fontes/abhaya-libre-800.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("fontes/dm-sans-400-700.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.letra-maior { font-size: 125%; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}
body.tem-ver-pedido { padding-bottom: 6.5rem; }
body.painel-aberto { overflow: hidden; }
h1, h2, h3, p, ul, fieldset, legend { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; }
[id^="ancora-"] { scroll-margin-top: 4.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.para-clique { display: none; } /* a forma com mouse aparece em motor/computador.css */
:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.5rem; padding: .625rem 1.25rem;
  border: 2px solid var(--cor-acao); border-radius: var(--raio-botao, .75rem);
  background: var(--cor-acao); color: var(--cor-acao-texto);
  font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.btn-largo { display: flex; width: 100%; }
.btn-contorno { background: transparent; color: var(--cor-texto); border-color: var(--cor-texto); }
.btn-letra { background: transparent; color: var(--cor-texto); border-color: var(--cor-texto); padding: .5rem .875rem; white-space: nowrap; }
.btn-letra[aria-pressed="true"] { background: var(--cor-texto); color: var(--cor-fundo); }

/* Porta da prévia publicada (motor/porta.js) */
html.porta-fechada body { overflow: hidden; }
html.porta-fechada body > :not(.porta) { visibility: hidden; }
.porta { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; display: flex; overflow-y: auto; padding: 1.5rem 1rem; background: var(--cor-fundo); color: var(--cor-texto); }
.porta-caixa { width: 100%; max-width: 22rem; margin: auto; text-align: center; }
.porta-caixa img { width: 9rem; margin: 0 auto 1.5rem; }
.porta h1 { font-family: var(--fonte-titulo); font-size: 2.25rem; font-weight: 800; line-height: 1.1; }
.porta-ajuda { margin-top: .5rem; font-size: 1.25rem; line-height: 1.4; color: var(--cor-texto-suave); }
.porta input { display: block; width: 100%; min-height: 4rem; margin-top: 1.25rem; padding: .5rem 1rem; border: 2px solid var(--cor-texto); border-radius: .75rem; background: var(--cor-superficie, #FFFFFF); font-size: 2rem; font-weight: 700; letter-spacing: .3em; text-indent: .3em; text-align: center; }
.porta-erro { min-height: 1.75rem; margin: .625rem 0 .375rem; font-weight: 700; color: var(--cor-acao); }

/* Faixa de prévia, fora da área fixa */
#faixa-previa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .125rem .75rem; padding: .375rem 1rem; background: var(--cor-faixa); color: var(--cor-faixa-texto); line-height: 1.3; }
.faixa-texto { flex: 1 1 auto; font-size: 1.125rem; }
.faixa-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.125rem; font-weight: 700; color: inherit; }

/* Abas escritas e fixas */
#abas { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; background: var(--cor-abas); color: var(--cor-abas-texto); }
#abas.abas-soltas { position: static; }
.aba { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: .25rem .5rem; font-size: 1.125rem; font-weight: 700; text-decoration: none; text-align: center; border-bottom: .25rem solid transparent; }
.aba[aria-current="page"] { border-bottom-color: var(--cor-abas-marca); }

/* Seletores */
.grupo legend { display: block; margin-bottom: .375rem; font-size: 1.125rem; font-weight: 700; }
.valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(7.75rem, 100%), 1fr)); gap: .625rem; }
.valores-muitos { display: flex; flex-wrap: wrap; }
.valores-muitos .valor { flex: 1 1 min-content; max-width: 100%; padding-left: .625rem; padding-right: .625rem; }
.valores-lista { grid-template-columns: 1fr; gap: .5rem; }
.valores-lista .valor { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 0 .75rem; padding: .375rem .875rem; text-align: left; }
.valores-lista .valor { align-items: baseline; justify-content: flex-start; }
.valores-lista .valor-no-pedido.vazio { display: none; }
.valores-lista .valor-preco { order: 2; margin-left: auto; }
.valores-coluna { grid-template-columns: 1fr; }
.valor {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 3.5rem; padding: .375rem .5rem; text-align: center; line-height: 1.2; cursor: pointer;
  border: 2px solid var(--cor-valor-borda); border-radius: var(--raio-botao, .75rem);
  background: var(--cor-superficie); color: var(--cor-texto);
}
.valor-rotulo { font-size: 1.125rem; font-weight: 700; }
.valor-preco { font-size: 1.375rem; font-weight: 700; }
.pergunta { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .55); }
.pergunta[hidden] { display: none; }
.pergunta-caixa { width: 100%; max-width: 26rem; padding: 1.25rem 1rem; background: var(--cor-superficie); color: var(--cor-texto); border-radius: .75rem; }
.pergunta-texto { margin-bottom: 1rem; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.pergunta-caixa .btn { display: flex; width: 100%; }
.pergunta-caixa .btn + .btn { margin-top: .75rem; }
.valor-no-pedido { font-size: 1.125rem; font-weight: 700; }
.valor-no-pedido.vazio { visibility: hidden; }
.valor.marcado { background: var(--cor-acao); border-color: var(--cor-acao); color: var(--cor-acao-texto); }
.valor:focus-within { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.detalhe + .valores { margin-top: .625rem; }
.detalhe { margin-top: .5rem; font-size: 1.125rem; color: var(--cor-texto-suave); }

/* Mais e menos */
.passo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.btn-passo {
  display: flex; align-items: center; justify-content: center;
  min-width: 3.5rem; min-height: 3.5rem; padding: 0;
  border: 2px solid var(--cor-acao); border-radius: var(--raio-botao, .75rem);
  background: var(--cor-acao); color: var(--cor-acao-texto);
  font-size: 1.75rem; font-weight: 700; line-height: 1; cursor: pointer; touch-action: manipulation;
}
.btn-passo.btn-menos { background: var(--cor-superficie); color: var(--cor-acao); }
.btn-passo.btn-menos:disabled { color: #77716A; border-color: #CFC7BA; cursor: default; }
.btn-passo.btn-tirar { background: var(--cor-superficie); color: var(--cor-acao); font-size: 1.125rem; }
.passo-numero { flex: 1 1 2.5rem; text-align: center; font-size: 1.75rem; font-weight: 700; }

/* Camadas sobre a página */
.camada { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--cor-fundo); }
.camada-topo { position: sticky; top: 0; z-index: 2; padding: .625rem 1rem; background: var(--cor-fundo); border-bottom: 1px solid var(--cor-valor-borda); }
.btn-voltar { background: transparent; color: var(--cor-texto); border-color: var(--cor-texto); }

/* Gaveta */
.gaveta-corpo { max-width: 40rem; margin: 0 auto; padding: 1rem 1rem 2.5rem; }
.gaveta-titulo { font-size: 1.75rem; line-height: 1.2; font-weight: 700; margin-bottom: 1rem; font-family: var(--fonte-titulo); }
.gaveta-vazia { font-size: 1.25rem; }
.linha { padding: 1rem 0; border-bottom: 1px solid var(--cor-valor-borda); }
.linha-topo { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.linha-foto { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .625rem; }
.linha-nome { font-size: 1.3125rem; font-weight: 700; line-height: 1.2; }
.linha-opcao { font-size: 1.125rem; color: var(--cor-texto-suave); }
.linha-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; }
.linha-base .passo { flex-wrap: nowrap; }
.linha-base .passo-numero { flex: 0 0 2.5rem; }
.linha-subtotal { margin-left: auto; font-size: 1.375rem; font-weight: 700; }
.linha-sem-preco { flex: 1 1 100%; font-size: 1.125rem; font-weight: 700; }
.campo { margin-top: 1.75rem; scroll-margin-top: 5.5rem; }
.campo-rotulo { display: block; margin-bottom: .375rem; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.campo-ajuda { display: block; margin-bottom: .5rem; font-size: 1.125rem; color: var(--cor-texto-suave); }
.campo input[type="text"], .campo input[type="date"], .campo textarea {
  display: block; width: 100%; min-height: 3.5rem; padding: .75rem;
  border: 2px solid var(--cor-texto-suave); border-radius: .625rem; background: var(--cor-superficie); font-size: 1.25rem;
}
.campo textarea { resize: vertical; }
.aviso-forte { margin: 0 0 .625rem; padding: .625rem .75rem; border: 2px solid var(--cor-falta); border-radius: .625rem; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
input[aria-invalid="true"] { border-color: var(--cor-falta) !important; }
.enviar-instrucao { margin-top: 1.5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.bloco-enviado { margin-top: 1.25rem; padding: 1rem; border: 3px solid var(--cor-whatsapp); border-radius: .625rem; background: var(--cor-superficie); }
.bloco-enviado p { margin-bottom: .875rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.falta { margin-bottom: .5rem; font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--cor-falta); }
.gaveta-total { margin-top: 1.75rem; padding: 1rem 0; border-top: 2px solid var(--cor-texto); }
.total-itens { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.previa-mensagem { padding: 1rem; border: 2px solid var(--cor-valor-borda); border-radius: .625rem; background: var(--cor-superficie); font-size: 1.125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.btn-whatsapp { display: flex; width: 100%; margin-top: .75rem; background: var(--cor-whatsapp); border-color: var(--cor-whatsapp); color: var(--cor-acao-texto); font-size: 1.25rem; }
.enviar-nota { margin-top: .75rem; font-size: 1.125rem; text-align: center; color: var(--cor-texto-suave); }

/* Botão fixo do pedido */
.ver-pedido {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: block; width: 100%; min-height: 4.25rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  border: 0; background: var(--cor-ver-pedido); color: var(--cor-acao-texto);
  font-size: 1.25rem; font-weight: 700; line-height: 1.25; text-align: center; cursor: pointer;
  box-shadow: 0 -2px 0 rgba(0, 0, 0, .12); touch-action: manipulation;
}

/* Zoom alto: a tela vira uma coluna estreita, e nada pode empurrar a largura. */
@media (max-width: 16.5rem) {
  body { overflow-wrap: anywhere; }
  .btn, .btn-letra { white-space: normal; padding-left: .5rem; padding-right: .5rem; }
  .linha-base .passo { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}