:root {
  --verde: #1E5B2B;
  --verde-escuro: #12301B;
  --verde-claro: #E6F1E3;
  --rosa: #A3134A;
  --rosa-escuro: #7A0E37;
  --amarelo: #F5C518;
  --tinta: #17201A;
  --tinta-2: #3B433D;
  --cinza: #5A615B;
  --linha: #D5D1C2;
  --fundo: #F7F5EC;
  --cartao: #FFFFFF;
  --erro: #B42318;
  --raio: 16px;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --texto: Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--texto); font-size: 15px; line-height: 1.4; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--rosa); }
a:hover { color: var(--rosa-escuro); }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Topo */
.hero { position: relative; background: var(--verde-escuro); color: #fff; max-width: 640px; margin: 0 auto; }
.hero-texto { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 0.95; letter-spacing: -0.02em; }
.hero h1 span { color: var(--amarelo); }
.hero-texto p { margin: 0; color: #E8E6DD; }
.selos { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 600; }
.selo { padding: 5px 10px; border-radius: 8px; background: #24452C; }
.selo.amarelo { background: var(--amarelo); color: var(--tinta); }

/* Conteúdo */
.conteudo { max-width: 640px; margin: 0 auto; padding: 8px 16px 120px; display: flex; flex-direction: column; gap: 14px; }
#cardapio .mt-abas { position: sticky; top: 0; z-index: 5; background: var(--fundo); margin: 0 -16px; padding: 10px 16px; }
@media (min-width: 600px) { #cardapio .mt-abas { margin: 0; padding: 10px 0; } }
.nota { margin: 0; font-size: 13px; color: var(--cinza); }
.aviso-topo { max-width: 640px; margin: 0 auto; padding: 12px 16px; background: #FFF3C4; color: #5C4300; font-weight: 600; font-size: 14px; }
.acompanhar { background: #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.acompanhar h2 { margin: 0; font-size: 15px; }
.acomp-linha { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.acomp-linha span:last-child { margin-left: auto; font-weight: 700; }
.etapa { padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--fundo); }
.etapa-novo { background: #FFF3C4; color: #5C4300; }
.etapa-preparo { background: #FCEBD5; color: #7A4A00; }
.etapa-pronto, .etapa-entregue { background: var(--verde-claro); color: var(--verde); }
.etapa-saiu { background: #E3EDFA; color: #1D4F8A; }
.etapa-cancelado { background: #FDECEA; color: var(--erro); }
.toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 60; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; transition: opacity .2s; pointer-events: none; }
.chip { min-height: 44px; padding: 0 12px; border-radius: 22px; border: 1px solid var(--linha); background: var(--fundo); font-size: 14px; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.form-pedido { display: flex; flex-direction: column; gap: 12px; }
.linha-total { display: flex; justify-content: space-between; font-size: 14px; color: var(--tinta-2); }

/* Barra inferior */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 8px; max-width: 640px; margin: 0 auto; pointer-events: none; }
.barra > * { pointer-events: auto; }
.botao { min-height: 56px; border: 0; border-radius: var(--raio); padding: 0 18px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.botao.rosa { background: var(--rosa); color: #fff; }
.botao.escuro { background: var(--tinta); color: #fff; }
.botao.verde { background: var(--verde); color: #fff; justify-content: center; }
.botao:disabled { opacity: 0.6; cursor: wait; }
.flex { flex: 1; }
.contador { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--amarelo); color: var(--tinta); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* Carrinho */
.fundo { position: fixed; inset: 0; z-index: 10; background: rgba(23, 32, 26, 0.55); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.folha { width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 22px 22px 0 0; padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.folha-topo { display: flex; align-items: center; justify-content: space-between; }
.folha h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 24px; }
.icone { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--linha); background: #fff; display: flex; align-items: center; justify-content: center; }
#carrinho-corpo { display: flex; flex-direction: column; gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.campo input, .campo textarea { min-height: 46px; border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; font-size: 16px; font-weight: 400; background: #fff; }
.campo textarea { min-height: 70px; resize: vertical; }
.pagamentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pagamentos .chip { min-height: 46px; }
.total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; }
.erro { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FDECEA; color: var(--erro); font-size: 14px; font-weight: 600; }
.sucesso { padding: 18px; border-radius: 14px; background: var(--verde-claro); color: var(--verde); display: flex; flex-direction: column; gap: 6px; }
.sucesso strong { font-family: var(--display); font-size: 22px; }
.sucesso span { color: #24452C; font-size: 14px; }
.vazio { margin: 0; color: var(--cinza); }

.rodape { max-width: 640px; margin: -100px auto 0; padding: 0 16px 120px; font-size: 13px; color: var(--cinza); }

@media (min-width: 641px) {
  .hero { border-radius: 0 0 24px 24px; overflow: hidden; }
}

/* Manu */
.manu-card { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 16px; padding: 10px; }
.manu-card img { width: 104px; height: 130px; object-fit: cover; border-radius: 12px; flex: none; }
.manu-card h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--verde); }
.manu-card p { margin: 2px 0 0; font-size: 14px; color: var(--tinta-2); }
.folha .manu-card { background: var(--fundo); padding: 8px; }
.folha .manu-card img { width: 84px; height: 105px; }
.manu-acai { margin-bottom: 10px; background: #F4E9F7; }
.manu-acai h2 { color: #5B2A86; }
.manu-mac { margin-bottom: 10px; background: #FFF3C4; }
.manu-mac h2 { color: #7A2E0B; }
.acompanhar { padding: 10px; }
.acompanhar .manu-card { padding: 0; }
.acompanhar h3 { margin: 6px 0 0; font-size: 14px; }
.sucesso img { width: 104px; height: 130px; object-fit: cover; border-radius: 12px; align-self: center; }
.sucesso { align-items: center; text-align: center; }

.quadro-manu { position: relative; border-radius: 18px; overflow: hidden; background: #2A1C10; }
.hero .quadro-manu { border-radius: 0; }
.quadro-manu img { display: block; width: 100%; height: auto; }
.giz { position: absolute; left: 51%; width: 40%; top: 33.5%; height: 53.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: #F7F3E8; font-family: 'Caveat', cursive; line-height: 1.1; }
.giz-pequeno { font-size: clamp(17px, 4.4vw, 26px); color: #F5C518; font-weight: 700; }
.giz-titulo { font-size: clamp(24px, 7vw, 44px); font-weight: 700; }
.giz-texto { font-size: clamp(15px, 3.8vw, 24px); color: #E8E2D0; }
.giz-preco { font-size: clamp(17px, 4.6vw, 28px); color: #F5C518; }
.giz-botao { margin-top: 4px; min-height: 44px; padding: 0 20px; border: 2px dashed #F7F3E8; border-radius: 12px; background: transparent; color: #fff; font-family: 'Caveat', cursive; font-size: clamp(18px, 4.6vw, 26px); }
.giz-botao:hover { background: rgba(255, 255, 255, 0.12); }
.link-equipe { color: var(--cinza); font-size: 12px; }
#acompanhar:empty, #destaques:empty { display: none; }
.manu-bebidas { margin-bottom: 10px; background: #E3F2DF; }
.manu-bebidas h2 { color: var(--verde); }
.manu-bebidas img { object-position: center 25%; }

/* quadro da Manu: avisos passando (promoções e novidades) */
.giz-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; padding: 6% 8%; overflow: hidden; }
.giz-slide.com-cartaz { padding: 0; }
.giz-cartaz { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.giz-cartaz img { width: 100%; height: 100%; object-fit: contain; display: block; }
.giz-cartaz span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); white-space: nowrap; background: #F5C518; color: #17201A; font: 700 13px Inter, system-ui, sans-serif; padding: 5px 12px; border-radius: 999px; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.giz-cartaz:hover img { filter: brightness(1.05); }
.giz-pontos { position: absolute; bottom: -24px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.giz-pontos button { width: 22px; height: 22px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; }
.giz-pontos button::after { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #F7F3E8; }
.giz-pontos button[aria-current]::after { background: #F5C518; border-color: #F5C518; }
.giz-zoom { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; }
.giz-zoom img { max-width: 100%; max-height: 80vh; border-radius: 12px; }
.troco-calc { font-weight: 400; color: var(--cinza); font-size: 13px; }
.troco-calc b { color: var(--verde); font-size: 15px; }

/* Manu, garçonete online */
.botao-manu { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 4px 16px 4px 4px; border: 0; border-radius: 999px; background: var(--rosa, #A3134A); color: #fff; font: 700 15px Inter, system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); cursor: pointer; flex: none; }
.botao-manu img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center 15%; background: #fff; }
.botao-manu.so-icone { padding: 4px; }
.manu-folha { height: 86vh; }
.manu-quem { display: flex; align-items: center; gap: 10px; }
.manu-quem img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 15%; }
.manu-quem h2 { font-size: 20px !important; }
.manu-quem small { color: var(--cinza); }
.manu-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.manu-msg { margin: 0; max-width: 85%; padding: 10px 12px; border-radius: 16px; font-size: 15px; line-height: 1.35; }
.manu-msg.manu { align-self: flex-start; background: var(--fundo, #F5F4F0); border-bottom-left-radius: 4px; }
.manu-msg.cliente { align-self: flex-end; background: var(--verde, #1E5B2B); color: #fff; border-bottom-right-radius: 4px; }
.manu-msg.digitando { color: var(--cinza); font-style: italic; }
.manu-form { display: flex; gap: 8px; }
.manu-form input { flex: 1; min-height: 48px; border: 1px solid var(--linha); border-radius: 24px; padding: 0 16px; font-size: 16px; }
.manu-form .botao { width: auto; padding: 0 20px; }