/* Cardápio digital Lotus Dev: mobile-first, cores do cliente em --cor / --cor2 */
:root{
  --fundo:#faf8f5; --card:#fff; --texto:#1c1917; --muted:#6b645c; --linha:#ece7e0;
  --verde:#15803d; --vermelho:#b91c1c; --zap:#25d366;
  --raio:16px; --sombra:0 1px 2px rgba(28,25,23,.06),0 4px 14px rgba(28,25,23,.06);
  --titulo:"Fraunces",Georgia,serif; --corpo:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:118px}
body{margin:0;background:var(--fundo);color:var(--texto);font:15px/1.45 var(--corpo);-webkit-font-smoothing:antialiased;padding-bottom:96px}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0}
.muted{color:var(--muted)} .pequeno{font-size:12px}

/* ---------- Topo ---------- */
.topo{max-width:720px;margin:0 auto;padding:0 16px 8px}
.capa{height:112px;margin:0 -16px;background:
  radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--cor) 85%,#fff) 0%,transparent 55%),
  linear-gradient(135deg,var(--cor),var(--cor2));}
.cab{display:flex;gap:14px;align-items:flex-start;margin-top:-38px}
.logo{width:76px;height:76px;border-radius:20px;object-fit:cover;background:#fff;border:3px solid #fff;box-shadow:var(--sombra);flex:none}
.logo-letra{display:grid;place-items:center;background:var(--cor);color:var(--cor-texto);font:700 36px var(--titulo)}
.cab-txt{padding-top:46px;min-width:0}
h1{font:700 24px/1.15 var(--titulo);letter-spacing:-.01em}
.status{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-weight:600;font-size:13px}
.status .ponto{width:8px;height:8px;border-radius:50%;background:currentColor}
.status.aberto{color:var(--verde)} .status.fechado{color:var(--vermelho)}
.status.aberto .ponto{box-shadow:0 0 0 0 rgba(21,128,61,.5);animation:pulso 2s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 7px rgba(21,128,61,0)}100%{box-shadow:0 0 0 0 rgba(21,128,61,0)}}
.info{margin:2px 0 0;color:var(--muted);font-size:13px}
.endereco{margin:12px 0 0;font-size:13px;color:var(--muted)}
.horarios{margin-top:6px;font-size:13px}
.horarios summary{cursor:pointer;color:var(--muted);font-weight:500}
.horarios ul{list-style:none;padding:8px 0 0;margin:0;display:grid;gap:3px}
.horarios li{display:flex;justify-content:space-between;max-width:320px}
.horarios li span:first-child{text-transform:capitalize}

/* ---------- Barra fixa: busca + categorias ---------- */
.barra{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--fundo) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linha)}
.busca{display:flex;align-items:center;gap:8px;max-width:720px;margin:0 auto;padding:10px 16px 6px}
.busca span{font-size:14px;opacity:.6}
.busca input{flex:1;min-width:0;border:1px solid var(--linha);background:#fff;border-radius:12px;padding:10px 12px;font:inherit;outline:none}
.busca input:focus{border-color:var(--cor);box-shadow:0 0 0 3px color-mix(in srgb,var(--cor) 20%,transparent)}
.abas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:720px;margin:0 auto;padding:4px 16px 10px}
.abas::-webkit-scrollbar{display:none}
.abas a{flex:none;text-decoration:none;color:var(--muted);font-weight:600;font-size:13px;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--linha);transition:.15s}
.abas a.ativa{background:var(--cor);color:var(--cor-texto);border-color:var(--cor)}

/* ---------- Lista ---------- */
main{max-width:720px;margin:0 auto;padding:6px 16px 0}
.cat{padding-top:18px}
.cat h2{font:700 19px var(--titulo);margin:0 0 10px}
.prod{display:flex;gap:12px;align-items:stretch;width:100%;text-align:left;background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);padding:12px;margin-bottom:10px;cursor:pointer;box-shadow:var(--sombra);transition:transform .12s,border-color .12s}
.prod:active{transform:scale(.985)}
@media (hover:hover){.prod:hover{border-color:color-mix(in srgb,var(--cor) 40%,var(--linha))}}
.prod-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.prod h3{font-size:15px;font-weight:600}
.prod p{margin:3px 0 8px;color:var(--muted);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod strong{margin-top:auto;font-weight:700;color:var(--texto)}
.prod.esgotado{opacity:.55;cursor:not-allowed}
.foto{width:92px;height:92px;border-radius:12px;object-fit:cover;flex:none}
.foto-ph{display:grid;place-items:center;font-size:40px;background:
  radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--cor) 22%,#fff),color-mix(in srgb,var(--cor) 8%,#fff) 70%)}
.vazio{text-align:center;color:var(--muted);padding:40px 0}
.rodape{text-align:center;color:var(--muted);font-size:12px;padding:28px 0 12px}
.rodape a{color:inherit}

/* ---------- Demo ---------- */
.selo-demo{position:absolute;left:50%;transform:translateX(-50%);top:10px;z-index:30;display:flex;align-items:center;gap:10px;background:rgba(28,25,23,.86);color:#fff;font-size:12px;padding:6px 6px 6px 14px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.2);white-space:nowrap;backdrop-filter:blur(6px)}
.selo-demo .quero{background:#fff;color:#1c1917;text-decoration:none;font-weight:700;padding:6px 12px;border-radius:999px}
.eh-demo .capa{height:124px}

/* ---------- Carrinho flutuante ---------- */
.carrinho-flutuante{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:25;max-width:688px;margin:0 auto;display:flex;align-items:center;gap:12px;border:0;border-radius:16px;padding:14px 16px;background:var(--cor);color:var(--cor-texto);font-weight:700;box-shadow:0 10px 30px color-mix(in srgb,var(--cor) 45%,transparent);cursor:pointer;animation:sobe .25s ease-out}
.carrinho-flutuante span:nth-child(2){flex:1;text-align:left}
.carrinho-flutuante .qtd{background:rgba(255,255,255,.22);min-width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px}
@keyframes sobe{from{transform:translateY(20px);opacity:0}}

/* ---------- Folhas (bottom sheet) ---------- */
.veu{position:fixed;inset:0;background:rgba(28,25,23,.45);z-index:40;animation:aparece .2s}
@keyframes aparece{from{opacity:0}}
.folha{position:fixed;left:0;right:0;bottom:0;z-index:50;max-width:720px;margin:0 auto;max-height:88vh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom));animation:folha .25s cubic-bezier(.2,.8,.2,1)}
.folha.alta{max-height:94vh}
@keyframes folha{from{transform:translateY(100%)}}
.folha h3{font:700 21px var(--titulo);padding-right:36px}
.folha > .muted{margin:6px 0 0}
.fechar{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;border:0;background:#f2eee8;cursor:pointer}
.grupo{margin-top:16px}
.grupo h4{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.adicional{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--linha);cursor:pointer}
.adicional input{width:20px;height:20px;accent-color:var(--cor)}
.adicional span{flex:1}
.adicional small{color:var(--muted);font-weight:600}
.campo{display:block;margin-top:14px}
.campo > span{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.campo input{width:100%;border:1px solid var(--linha);border-radius:12px;padding:12px;font:inherit;outline:none;background:#fff}
.campo input:focus{border-color:var(--cor);box-shadow:0 0 0 3px color-mix(in srgb,var(--cor) 18%,transparent)}
.opcoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.campo .opcoes{margin-top:0}
.opcoes label{flex:1;min-width:96px;display:flex;align-items:center;gap:8px;border:1px solid var(--linha);border-radius:12px;padding:11px 12px;cursor:pointer;font-weight:500}
.opcoes label:has(input:checked){border-color:var(--cor);background:color-mix(in srgb,var(--cor) 7%,#fff)}
.opcoes input{accent-color:var(--cor)}
.linha-acao{display:flex;gap:12px;align-items:center;margin-top:18px}
.qtd-ctrl{display:flex;align-items:center;border:1px solid var(--linha);border-radius:12px}
.qtd-ctrl button{width:42px;height:46px;border:0;background:none;font-size:20px;cursor:pointer;color:var(--cor)}
.qtd-ctrl span{min-width:24px;text-align:center;font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;border:0;border-radius:14px;padding:14px 16px;background:var(--cor);color:var(--cor-texto);font-weight:700;text-decoration:none;cursor:pointer}
.btn.largo{width:100%;margin-top:16px}
.btn.whats{background:var(--zap);color:#073b1d}
.itens{list-style:none;margin:14px 0 0;padding:0}
.itens li{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--linha)}
.itens .it-txt{flex:1;min-width:0}
.itens .it-txt b{font-weight:600}
.itens .it-txt small{display:block;color:var(--muted)}
.itens .it-preco{font-weight:700;white-space:nowrap}
.itens .qtd-ctrl button{width:32px;height:34px;font-size:17px}
.totais{margin:16px 0 0;display:grid;gap:6px}
.totais div{display:flex;justify-content:space-between}
.totais dt{color:var(--muted)} .totais dd{margin:0;font-weight:600}
.totais .total{font-size:17px;padding-top:8px;border-top:1px dashed var(--linha)}
.totais .total dt{color:var(--texto);font-weight:700} .totais .total dd{font-weight:800}
.aviso{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#fef2f2;color:var(--vermelho);font-size:13px;font-weight:500}

/* ---------- Prévia do pedido no WhatsApp ---------- */
.zap{margin-top:16px;border-radius:16px;overflow:hidden;border:1px solid var(--linha)}
.zap-topo{display:flex;align-items:center;gap:10px;background:#075e54;color:#fff;padding:10px 12px}
.zap-topo small{display:block;opacity:.75;font-size:11px}
.zap-av{width:34px;height:34px;border-radius:50%;background:var(--cor);color:var(--cor-texto);display:grid;place-items:center;font:700 16px var(--titulo)}
.zap-corpo{background:#efe7dd;padding:14px 12px 18px;max-height:46vh;overflow:auto}
.bolha{margin-left:auto;max-width:92%;background:#d9fdd3;border-radius:10px 0 10px 10px;padding:9px 11px;font-size:13.5px;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 1px 1px rgba(0,0,0,.08)}

/* ---------- Página de aviso (demo expirada / não encontrado) ---------- */
.aviso-pag{display:grid;place-items:center;min-height:100vh;padding:24px}
.aviso-caixa{max-width:420px;text-align:center;background:#fff;border-radius:22px;padding:36px 26px;box-shadow:var(--sombra)}
.aviso-ic{font-size:44px}
.aviso-caixa h1{font:700 24px var(--titulo);margin:8px 0}
.aviso-caixa p{color:var(--muted)}

@media (min-width:720px){
  .capa{border-radius:0 0 24px 24px;margin:0;height:150px}
  .cab{margin-top:-44px;padding-left:16px}
  h1{font-size:28px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}