/* ==========================================================
   TIO CHAPA · estilo
   >>> TROCAR AS CORES E FONTES AQUI (o resto se ajusta sozinho)
   ========================================================== */
:root{
  --amarelo:#ffc93c;       /* cor principal (fundo do topo) */
  --vermelho:#e63b2e;      /* destaque, botões */
  --marrom:#2b1a0e;        /* texto e contornos */
  --creme:#fff4dc;         /* fundo do site */
  --creme-2:#ffe9b8;
  --acai:#4b1f6f;          /* bloco do açaí */
  --acai-claro:#b98be0;
  --verde-whats:#1fb855;
  --fonte-titulo:'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --fonte-texto:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --raio:20px;
  --gutter:16px;
  --sombra:4px 4px 0 var(--marrom);
}

/* ---------- base ---------- */
main{overflow-x:clip}
.og [data-status]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body{margin:0;background:var(--creme);color:var(--marrom);font:16px/1.5 var(--fonte-texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--vermelho);outline-offset:2px;border-radius:8px}
.ic{width:1.2em;height:1.2em;flex:none}
h1,h2,.cat-titulo,.marca-selo,.rodape-marca{font-family:var(--fonte-titulo);font-variation-settings:"wdth" 80}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:52px;padding:0 20px;border-radius:16px;border:2.5px solid var(--marrom);
  font:800 16px/1 var(--fonte-texto);text-decoration:none;cursor:pointer;
  box-shadow:var(--sombra);transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--marrom)}
.btn-escuro{background:var(--marrom);color:var(--amarelo)}
.btn-claro{background:var(--creme);color:var(--marrom)}
.btn-whats{background:var(--verde-whats);color:#fff;width:100%;min-height:58px;font-size:17px}

/* ---------- aviso de status ---------- */
.aviso-topo{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--marrom);color:var(--creme);font-size:13.5px;font-weight:700;padding:8px 12px;text-align:center;
}
.status-ponto{width:9px;height:9px;border-radius:50%;background:#ff7a6e;flex:none}
.aberto .status-ponto{background:#3ee07a;box-shadow:0 0 0 4px rgba(62,224,122,.22)}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:10px var(--gutter);background:var(--amarelo);border-bottom:2.5px solid var(--marrom);
}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.marca-selo{
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--vermelho);color:var(--creme);border:2.5px solid var(--marrom);
  font-weight:800;font-size:14px;line-height:.9;text-align:center;letter-spacing:.02em;transform:rotate(-8deg);
}
.marca-sub{font:700 13px/1.05 var(--fonte-texto);text-transform:uppercase;letter-spacing:.06em}
.sacola-topo{
  position:relative;width:48px;height:48px;border-radius:14px;border:2.5px solid var(--marrom);
  background:var(--creme);display:grid;place-items:center;cursor:pointer;box-shadow:3px 3px 0 var(--marrom);
}
.sacola-topo svg{width:24px;height:24px}
.sacola-qtd{
  position:absolute;top:-9px;right:-9px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;
  background:var(--vermelho);color:#fff;font:800 13px/24px var(--fonte-texto);border:2px solid var(--marrom);
}
.sacola-qtd[data-zero]{display:none}

/* ---------- hero ---------- */
.hero{
  background:var(--amarelo);padding:26px var(--gutter) 34px;border-bottom:2.5px solid var(--marrom);
  display:grid;gap:12px;position:relative;overflow:hidden;
}
.hero::before{ /* bolinhas de fundo */
  content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-image:radial-gradient(var(--marrom) 1.4px,transparent 1.6px);background-size:18px 18px;
}
.hero > *{position:relative}
.adesivo{
  display:inline-block;font:800 13px/1.1 var(--fonte-texto);text-transform:uppercase;letter-spacing:.05em;
  background:var(--creme);border:2.5px solid var(--marrom);border-radius:999px;padding:8px 14px;box-shadow:3px 3px 0 var(--marrom);
}
.adesivo-1{transform:rotate(-3deg)}
h1{
  margin-top:16px;font-weight:800;font-size:clamp(48px,15vw,92px);line-height:.88;letter-spacing:-.02em;text-transform:uppercase;
}
.riscado{color:var(--vermelho);white-space:nowrap;-webkit-text-stroke:0}
.lead{margin-top:16px;font-size:17px;max-width:36ch;font-weight:500}
.acoes{margin-top:22px;display:grid;grid-template-columns:1fr auto;gap:12px}
.acoes .btn{padding:0 16px}
.hero-arte{position:relative;margin-top:8px}
.hero-burger{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;animation:flutua 4s ease-in-out infinite}
.hero-foto{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--raio);border:2.5px solid var(--marrom)}
@keyframes flutua{50%{transform:translateY(-8px) rotate(-1deg)}}
.adesivo-2{position:absolute;right:0;top:-6px;background:var(--acai);color:var(--creme);transform:rotate(7deg);text-align:center;border-radius:18px}

/* ---------- infos rápidas ---------- */
.infos{
  list-style:none;margin:0;padding:18px var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:10px;
  border-bottom:2.5px solid var(--marrom);
}
.infos li{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--marrom);border-radius:16px;padding:10px 12px}
.infos svg{width:26px;height:26px;flex:none;color:var(--vermelho)}
.infos span{font-size:12.5px;line-height:1.25;color:#6b5240}
.infos b{display:block;font-size:14px;color:var(--marrom)}

/* ---------- cardápio ---------- */
.cardapio{padding:0 0 30px}
.cardapio-titulo{font-size:44px;line-height:1;font-weight:800;text-transform:uppercase;padding:28px var(--gutter) 0}
.cardapio-cab{
  position:sticky;top:78px;z-index:30;background:var(--creme);
  padding:12px 0 10px;border-bottom:2px solid rgba(43,26,14,.12);
}
.abas{display:flex;gap:8px;overflow-x:auto;padding:0 var(--gutter) 2px;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.abas a{
  flex:none;text-decoration:none;font-weight:800;font-size:14px;padding:9px 16px;border-radius:999px;
  border:2px solid var(--marrom);background:#fff;
}
.abas a.ativa{background:var(--marrom);color:var(--amarelo)}
.categoria{padding:26px var(--gutter) 6px}
.cat-titulo{font-size:30px;font-weight:800;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cat-titulo small{font:600 14px var(--fonte-texto);text-transform:none;color:#8a6a50}

.item{
  display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:start;
  background:#fff;border:2.5px solid var(--marrom);border-radius:var(--raio);padding:12px;margin-bottom:12px;
  box-shadow:var(--sombra);
}
.item-foto{
  aspect-ratio:1;border-radius:14px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,#fff7e4,var(--creme-2));border:2px solid var(--marrom);position:relative;
}
.item-foto svg{width:76%;height:76%}
.item-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.item-nome{font:800 18px/1.15 var(--fonte-texto);letter-spacing:-.01em}
.item-desc{font-size:14px;color:#6b5240;margin-top:4px;line-height:1.4}
.item-pe{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.item-preco{font:800 19px var(--fonte-titulo);font-variation-settings:"wdth" 90;white-space:nowrap}
.selo-casa{display:inline-block;vertical-align:2px;font:800 10.5px var(--fonte-texto);text-transform:uppercase;letter-spacing:.06em;background:var(--vermelho);color:#fff;padding:3px 7px;border-radius:999px;margin-left:4px}
.item-destaque{background:var(--creme-2)}
.item-compacto{grid-template-columns:64px 1fr}
.item-compacto .item-foto svg{width:80%;height:80%}

/* botão + e contador */
.qtd-controle{display:flex;align-items:center;gap:2px}
.bt-qtd{
  width:40px;height:40px;border-radius:12px;border:2.5px solid var(--marrom);cursor:pointer;
  display:grid;place-items:center;font:800 22px/1 var(--fonte-texto);background:var(--amarelo);
}
.bt-qtd.mais-so{width:auto;padding:0 14px;gap:6px;display:flex;font-size:15px;background:var(--amarelo)}
.bt-qtd.menos{background:#fff}
.qtd-num{min-width:30px;text-align:center;font:800 17px var(--fonte-texto)}
.pulo{animation:pulo .35s ease}
@keyframes pulo{40%{transform:scale(1.18)}}

/* ---------- açaí ---------- */
.categoria-acai{background:var(--acai);color:var(--creme);margin:20px 0 6px;padding-bottom:26px;border-block:2.5px solid var(--marrom);
  background-image:radial-gradient(circle at 90% 0%,rgba(185,139,224,.35),transparent 50%)}
.categoria-acai .cat-titulo small{color:var(--acai-claro)}
.acai{display:grid;gap:18px}
.acai fieldset{border:0;margin:0;padding:0;min-width:0}
.acai legend{font:800 15px var(--fonte-texto);margin-bottom:10px;padding:0}
.acai legend small{font-weight:600;color:var(--acai-claro);margin-left:4px}
.opcoes{display:flex;flex-wrap:wrap;gap:8px}
.opcoes label{position:relative;cursor:pointer}
.opcoes input{position:absolute;opacity:0;pointer-events:none}
.opcoes span{
  display:flex;align-items:center;gap:6px;min-height:42px;padding:8px 14px;border-radius:12px;
  border:2px solid rgba(255,244,220,.4);font-weight:700;font-size:14.5px;transition:background .12s;
}
.opcoes span i{font-style:normal;font-weight:600;font-size:12.5px;opacity:.75}
.opcoes input:checked + span{background:var(--creme);color:var(--acai);border-color:var(--creme)}
.opcoes input:focus-visible + span{outline:3px solid var(--amarelo);outline-offset:2px}
.opcoes input:disabled + span{opacity:.35}
.opcoes-tamanho{display:grid;grid-template-columns:repeat(3,1fr)}
.opcoes-tamanho span{flex-direction:column;justify-content:center;gap:2px;min-height:70px;text-align:center}
.opcoes-tamanho b{font:800 20px var(--fonte-titulo)}
.btn-acai{background:var(--amarelo);color:var(--marrom);width:100%;min-height:56px}

/* ---------- entrega ---------- */
.entrega{padding:30px var(--gutter) 40px;display:grid;gap:22px}
.entrega-bloco{background:#fff;border:2.5px solid var(--marrom);border-radius:var(--raio);padding:20px 18px;box-shadow:var(--sombra)}
.entrega h2{font-size:30px;line-height:1;font-weight:800;text-transform:uppercase;margin-bottom:14px}
.status-pilula{display:inline-flex;align-items:center;gap:8px;background:var(--marrom);color:var(--creme);font-size:13.5px;font-weight:700;padding:7px 12px;border-radius:999px;margin-bottom:12px}
.horarios{width:100%;border-collapse:collapse}
.horarios th,.horarios td{padding:10px 2px;border-bottom:2px dashed rgba(43,26,14,.15);text-align:left;font-size:15.5px}
.horarios th{font-weight:600}
.horarios td{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.horarios tr:last-child th,.horarios tr:last-child td{border-bottom:0}
.horarios tr.fechado td{color:#a08670;font-weight:600}
.horarios tr.hoje th,.horarios tr.hoje td{color:var(--vermelho)}
.horarios tr.hoje th::after{content:" · hoje";font-size:12px;font-weight:800;text-transform:uppercase}
.bairros{list-style:none;margin:0;padding:0;display:grid;gap:0}
.bairros li{display:flex;justify-content:space-between;padding:10px 2px;border-bottom:2px dashed rgba(43,26,14,.15);font-weight:600}
.bairros li::after{content:attr(data-taxa-txt);font-weight:800}
.bairros-nota{font-size:14px;color:#6b5240;margin-top:10px}
.retirada{display:flex;gap:12px;margin-top:18px;padding:14px;border-radius:14px;background:var(--creme);font-size:14.5px;line-height:1.45}
.retirada svg{width:28px;height:28px;flex:none;color:var(--vermelho)}
.retirada a{font-weight:800;color:var(--vermelho)}

/* ---------- rodapé ---------- */
.rodape{background:var(--marrom);color:rgba(255,244,220,.75);text-align:center;padding:36px var(--gutter) 110px;font-size:14px}
.rodape-marca{font-size:40px;font-weight:800;color:var(--amarelo);line-height:1}
.demo{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,244,220,.14);font-size:12.5px;color:rgba(255,244,220,.5)}
.demo a{text-underline-offset:3px}

/* ---------- barra do pedido ---------- */
.barra-pedido{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;
  display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 18px 8px 8px;cursor:pointer;
  background:var(--vermelho);color:#fff;border:2.5px solid var(--marrom);border-radius:18px;box-shadow:var(--sombra);
  font-weight:800;font-size:16px;animation:sobe .3s ease;
}
.barra-pedido[hidden]{display:none}
.barra-qtd{display:grid;place-items:center;min-width:42px;height:42px;border-radius:12px;background:var(--marrom);color:var(--amarelo)}
.barra-texto{flex:1;text-align:left}
@keyframes sobe{from{transform:translateY(100px)}}

/* ---------- janela do pedido ---------- */
.pedido{
  width:100%;max-width:560px;max-height:92dvh;margin:auto auto 0;padding:0;border:2.5px solid var(--marrom);border-bottom:0;
  border-radius:24px 24px 0 0;background:var(--creme);color:var(--marrom);overflow:hidden;
}
.pedido[open]{display:flex;flex-direction:column;animation:sobe .25s ease}
.pedido::backdrop{background:rgba(43,26,14,.55)}
.pedido-cab{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:2px solid rgba(43,26,14,.12);background:var(--amarelo)}
.pedido-cab h2{font-size:28px;font-weight:800;text-transform:uppercase;line-height:1}
.fechar{width:42px;height:42px;border-radius:12px;border:2.5px solid var(--marrom);background:var(--creme);font-size:18px;font-weight:800;cursor:pointer}
.pedido-corpo{overflow-y:auto;padding:14px 18px 22px;overscroll-behavior:contain}
.pedido-itens{list-style:none;margin:0 0 14px;padding:0}
.pedido-itens li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px 0;border-bottom:2px dashed rgba(43,26,14,.15)}
.pi-nome{font-weight:800;font-size:15.5px}
.pi-det{grid-column:1;font-size:13px;color:#6b5240}
.pi-preco{font-weight:800;text-align:right}
.pi-controle{grid-column:2;grid-row:2;justify-self:end}
.pi-controle .bt-qtd{width:34px;height:34px;font-size:18px;border-width:2px}
.pedido-vazio{text-align:center;padding:30px 0;color:#6b5240;font-weight:600}
.pedido-form{display:grid;gap:12px}
.alternar{display:grid;grid-template-columns:1fr 1fr;border:2.5px solid var(--marrom);border-radius:14px;overflow:hidden;background:#fff}
.alternar label{position:relative;cursor:pointer}
.alternar input{position:absolute;opacity:0}
.alternar span{display:block;text-align:center;padding:12px;font-weight:800}
.alternar input:checked + span{background:var(--marrom);color:var(--amarelo)}
.alternar input:focus-visible + span{outline:3px solid var(--vermelho);outline-offset:-3px}
.so-entrega{display:grid;gap:12px}
.campo{display:grid;gap:5px}
.campo > span{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.campo input,.campo select{
  width:100%;min-height:50px;padding:0 14px;border-radius:12px;border:2px solid var(--marrom);
  background:#fff;color:var(--marrom);font:600 16px var(--fonte-texto);
}
.campo[hidden],.so-entrega[hidden]{display:none}
.totais{margin:6px 0 4px;padding:14px;border-radius:14px;background:#fff;border:2px solid var(--marrom)}
.totais div{display:flex;justify-content:space-between;padding:3px 0}
.totais dt{font-weight:600}
.totais dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums}
.totais .total{font-size:20px;border-top:2px dashed rgba(43,26,14,.2);margin-top:6px;padding-top:9px}
.totais .total dt{font-weight:800}
.pedido-nota{font-size:13px;text-align:center;color:#6b5240}

/* ---------- aviso rápido ---------- */
.toast{
  position:fixed;left:50%;bottom:90px;z-index:60;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--marrom);color:var(--amarelo);font-weight:800;font-size:14.5px;padding:10px 16px;border-radius:12px;
  transition:opacity .2s, transform .2s;white-space:nowrap;
}
.toast.mostrar{opacity:1;transform:translate(-50%,0)}

/* ---------- telas maiores ---------- */
@media (min-width:760px){
  :root{--gutter:32px}
  .hero{grid-template-columns:1.1fr .9fr;align-items:center;padding-top:56px;padding-bottom:64px}
  .infos{grid-template-columns:repeat(4,1fr)}
  .cardapio{max-width:1100px;margin:0 auto}
  .cardapio-cab{top:81px}
  .categoria:not(.categoria-acai){display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
  .categoria:not(.categoria-acai) .cat-titulo{grid-column:1/-1}
  .categoria-acai{border-radius:var(--raio);border:2.5px solid var(--marrom);margin:20px var(--gutter)}
  .entrega{max-width:1100px;margin:0 auto;grid-template-columns:1fr 1fr;align-items:start}
  .pedido{margin:auto;border-radius:24px;border-bottom:2.5px solid var(--marrom)}
  .barra-pedido{left:50%;right:auto;transform:translateX(-50%);width:min(520px,calc(100% - 24px));animation:none}
}

/* ---------- aviso do modo demonstração (só aparece com DEMO = true no app.js) ---------- */
.demo-aviso{width:min(400px,calc(100% - 32px));border:0;border-radius:22px;padding:24px 20px 16px;background:#fff;color:#1f1a17;font-family:inherit;box-shadow:0 20px 50px -10px rgba(0,0,0,.45);text-align:center}
.demo-aviso::backdrop{background:rgba(15,12,10,.6)}
.da-titulo{font-weight:800;font-size:18px;margin:0 0 6px;text-transform:none;letter-spacing:0}
.da-texto{font-size:14.5px;color:#5d5550;margin:0 0 14px;line-height:1.45}
.da-balao{text-align:left;white-space:pre-wrap;background:#dcf8c6;color:#111;border-radius:12px 12px 2px 12px;padding:10px 12px;font:14px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif;margin:0 0 16px auto;max-width:94%;max-height:40vh;overflow:auto;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.da-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:999px;background:#25d366;color:#fff!important;font-weight:700;font-size:15.5px;text-decoration:none}
.da-btn svg{width:20px;height:20px}
.da-fechar{margin-top:6px;width:100%;min-height:44px;border:0;background:none;color:#5d5550;font-family:inherit;font-weight:600;font-size:14.5px;cursor:pointer}

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