/* Delivery LINK — visual base da loja e do painel.
   A cor da marca (--cor), o fundo (--fundo) e o tema (escuro/claro) vêm dos ajustes de cada restaurante. */
:root {
  --cor: #45b8fe; --cor-texto: #000; --fundo: #f7f7f5;
  --card: #ffffff; --card-2: #f3f3f1; --ink: #111214; --muted: #6a6a6a; --line: #e8e6e3; --line-forte: #cfccc8; --campo: #ffffff;
  --ok: #15803d; --warn: #b45309; --danger: #dc2626;
  --ok-soft: color-mix(in srgb, var(--ok) 14%, transparent); --warn-soft: color-mix(in srgb, #f59e0b 16%, transparent); --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
  --cor-suave: color-mix(in srgb, var(--cor) 13%, transparent); --brilho: color-mix(in srgb, var(--cor) 28%, transparent);
  --radius: 20px; --sombra: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --vidro: rgba(255,255,255,.78); --vidro-borda: rgba(0,0,0,.08); --vidro-texto: #111214;
  color-scheme: light;
}
[data-tema="escuro"] {
  --card: #0e0f11; --card-2: #15161a; --ink: #f5f5f4; --muted: #9b9b9e; --line: rgba(255,255,255,.08); --line-forte: rgba(255,255,255,.22); --campo: #0a0b0c;
  --ok: #4ade80; --warn: #fbbf24; --danger: #f87171;
  --sombra: 0 14px 36px rgba(0,0,0,.55);
  --vidro: rgba(0,0,0,.42); --vidro-borda: rgba(255,255,255,.16); --vidro-texto: #fff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--ink); font: 15px/1.55 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
a { color: var(--cor); }
h1 { font-size: 1.45rem; margin: 0; letter-spacing: -.025em; font-weight: 800; line-height: 1.2; }
h2 { font-size: 1.1rem; margin: 0 0 .7rem; letter-spacing: -.015em; font-weight: 700; }
h3 { font-size: .74rem; margin: 1.2rem 0 .45rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
p { margin: .35rem 0; }
svg { display: block; }
.ic { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; }
.ic svg { width: 100%; height: 100%; }
.muted { color: var(--muted); } .pequeno { font-size: .86rem; } .forte { font-weight: 700; }
.cartao { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem; box-shadow: var(--sombra); }
.pilha > * + * { margin-top: .85rem; }
.linha { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .entre { justify-content: space-between; }

/* botões e campos */
button, .botao { font: inherit; font-weight: 700; cursor: pointer; border-radius: 999px; padding: .72rem 1.25rem; border: 1px solid var(--cor); background: var(--cor); color: var(--cor-texto);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; transition: filter .15s, transform .15s, background .15s, border-color .15s, color .15s; }
button:hover, .botao:hover { filter: brightness(1.08); }
button:active, .botao:active { transform: scale(.98); }
button:disabled { opacity: .55; cursor: wait; }
button.fantasma, .botao.fantasma { background: transparent; color: var(--ink); border-color: var(--line-forte); }
button.fantasma:hover, .botao.fantasma:hover { border-color: var(--cor); color: var(--cor); filter: none; }
button.pequeno, .botao.pequeno { padding: .4rem .85rem; font-size: .84rem; }
button.perigo { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.cheio { width: 100%; }
.whats { background: #25d366; border-color: #25d366; color: #052e16; }
label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin: .65rem 0 .3rem; }
input, select, textarea { font: inherit; width: 100%; padding: .75rem .9rem; border: 1px solid var(--line-forte); border-radius: 12px; background: var(--campo); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cor); box-shadow: 0 0 0 4px var(--cor-suave); }
input[type=color] { padding: .25rem; height: 2.7rem; cursor: pointer; }
input[type=file] { padding: .55rem; font-size: .88rem; }
textarea { min-height: 76px; resize: vertical; }
.campos2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }

/* escolhas (rádio e caixa desenhados) */
.escolha { display: flex; align-items: center; gap: .8rem; padding: .85rem .1rem; border-bottom: 1px solid var(--line); cursor: pointer; font-weight: 500; color: var(--ink); margin: 0; font-size: .95rem; }
.escolha:last-child { border-bottom: 0; }
.escolha .preco { margin-left: auto; color: var(--muted); font-size: .88rem; white-space: nowrap; font-weight: 600; }
.escolha small { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; }
.escolha input, input.marca { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; padding: 0; border: 2px solid var(--line-forte); border-radius: 50%;
  background: transparent; display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s; }
.escolha input[type=checkbox], input.marca[type=checkbox] { border-radius: 7px; }
.escolha input:checked, input.marca:checked { border-color: var(--cor); background: var(--cor); }
.escolha input[type=radio]:checked::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-texto); }
.escolha input[type=checkbox]:checked::after, input.marca[type=checkbox]:checked::after { content: ''; width: 5px; height: 10px; border: solid var(--cor-texto); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.escolha input:disabled { opacity: .35; cursor: not-allowed; }
.escolha:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.escolha input:focus-visible { box-shadow: 0 0 0 4px var(--cor-suave); }

.selo { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 99px; font-size: .74rem; font-weight: 700; background: var(--card-2); color: var(--muted); white-space: nowrap; border: 1px solid var(--line); }
.selo.aberta { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); }
.selo.fechada { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); }
.selo.aberta::before, .selo.fechada::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.erro { color: var(--danger); font-size: .9rem; min-height: 1.1em; margin: .3rem 0; }
.erro:empty { min-height: 0; margin: 0; }
.aviso { background: var(--warn-soft); color: var(--warn); border-radius: 14px; padding: .7rem .9rem; font-size: .9rem; border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.toast { position: fixed; left: 50%; bottom: 6.5rem; transform: translateX(-50%); background: var(--ink); color: var(--card); padding: .7rem 1.15rem; border-radius: 999px; z-index: 80; max-width: 90vw; font-weight: 600; box-shadow: var(--sombra); animation: aparece .2s ease; }
table { width: 100%; border-collapse: collapse; }
@keyframes aparece { from { opacity: 0; } }
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } }

/* ---------- página inicial (links) ---------- */
.inicio { min-height: 100vh; min-height: 100dvh; position: relative; overflow: hidden; display: flex; justify-content: center; }
.inicio-fundo { position: absolute; inset: 0 0 auto; height: 420px; pointer-events: none;
  background: radial-gradient(70% 90% at 50% -10%, color-mix(in srgb, var(--cor) 42%, transparent), transparent 70%), radial-gradient(40% 50% at 100% 0%, color-mix(in srgb, var(--cor) 20%, transparent), transparent 70%); }
.inicio-fundo::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 50% 0%, #000, transparent 75%); }
.inicio-capa { position: absolute; inset: 0 0 auto; height: 260px; background-size: cover; background-position: center; }
.inicio-capa::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), var(--fundo) 98%); }
.inicio-conteudo { position: relative; width: 100%; max-width: 480px; padding: 3.2rem 1.25rem 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.inicio-capa ~ .inicio-conteudo { padding-top: 150px; }
.inicio .logo { width: 108px; height: 108px; border-radius: 30px; object-fit: cover; background: var(--card); border: 4px solid var(--fundo); box-shadow: 0 0 0 1px var(--line), 0 18px 50px var(--brilho); animation: sobe .5s ease both; }
.logo.sem, .cabeca .logo.sem, .inicio .logo.sem { display: grid; place-items: center; font-weight: 800; font-size: 2.6rem; color: var(--cor-texto); background: linear-gradient(140deg, var(--cor), color-mix(in srgb, var(--cor) 55%, #000)); }
.inicio h1 { font-size: 1.85rem; margin-top: 1.1rem; animation: sobe .5s .05s ease both; }
.inicio .slogan { color: var(--muted); margin-top: .35rem; max-width: 34ch; animation: sobe .5s .1s ease both; }
.inicio .status { margin-top: 1rem; animation: sobe .5s .15s ease both; }
.status { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 600; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.status .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
.status.aberta .ponto { background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: pulsa 2s infinite; }
.status .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line-forte); }
@keyframes pulsa { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.links { width: 100%; display: grid; gap: .75rem; margin-top: 1.8rem; }
.link { display: flex; align-items: center; gap: .95rem; padding: .95rem 1rem; border-radius: 20px; text-decoration: none; text-align: left; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--sombra); transition: transform .15s, border-color .15s, background .15s; animation: sobe .5s ease both; }
.link:nth-child(1) { animation-delay: .2s; } .link:nth-child(2) { animation-delay: .26s; } .link:nth-child(3) { animation-delay: .32s; } .link:nth-child(4) { animation-delay: .38s; } .link:nth-child(5) { animation-delay: .44s; }
.link:hover { border-color: color-mix(in srgb, var(--cor) 55%, transparent); transform: translateY(-2px); }
.link:active { transform: scale(.985); }
.link .ic-caixa { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--card-2); border: 1px solid var(--line); color: var(--ink); }
.link .ic-caixa .ic { width: 22px; height: 22px; }
.link .txt { flex: 1; min-width: 0; display: grid; }
.link .txt b { font-size: 1rem; font-weight: 700; }
.link .txt small { color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link > .ic { color: var(--muted); width: 18px; height: 18px; }
.link.principal { background: var(--cor); border-color: var(--cor); color: var(--cor-texto); box-shadow: 0 14px 36px var(--brilho); padding: 1.1rem 1.1rem; }
.link.principal .ic-caixa { background: color-mix(in srgb, var(--cor-texto) 12%, transparent); border-color: transparent; color: var(--cor-texto); }
.link.principal .txt b { font-size: 1.08rem; font-weight: 800; }
.link.principal .txt small, .link.principal > .ic { color: color-mix(in srgb, var(--cor-texto) 70%, transparent); }
.link.whats-link .ic-caixa { color: #25d366; }
.link.insta-link .ic-caixa { color: #e1306c; }
.link.google-link .ic-caixa { color: #4285f4; }
.endereco-loja { display: flex; align-items: center; justify-content: center; gap: .4rem; color: var(--muted); font-size: .85rem; margin-top: 1.4rem; }
.endereco-loja .ic { width: 16px; height: 16px; }
.inicio .conta-link { margin-top: .8rem; font-size: .88rem; font-weight: 600; color: var(--muted); text-decoration: none; display: inline-flex; gap: .35rem; align-items: center; }
.inicio .conta-link:hover { color: var(--cor); }

/* ---------- cardápio ---------- */
.loja { max-width: 780px; margin: 0 auto; padding-bottom: 7.5rem; }
.hero { position: relative; height: 176px; overflow: hidden;
  background: radial-gradient(65% 120% at 12% 0%, color-mix(in srgb, var(--cor) 45%, transparent), transparent 70%), radial-gradient(50% 100% at 100% 10%, color-mix(in srgb, var(--cor) 22%, transparent), transparent 70%), var(--fundo); }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 30px 30px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 95%); mask-image: linear-gradient(180deg, #000, transparent 95%); }
.hero.foto { height: 220px; background-size: cover; background-position: center; }
.hero.foto::before { background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 35%, transparent 50%, var(--fundo) 100%); -webkit-mask-image: none; mask-image: none; }
.hero-acoes { position: absolute; z-index: 3; top: max(.9rem, env(safe-area-inset-top)); left: 1rem; right: 1rem; display: flex; gap: .5rem; align-items: center; }
.hero-acoes .espaco { flex: 1; }
.vidro { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.6rem; padding: 0 1rem; border-radius: 999px; background: var(--vidro); color: var(--vidro-texto);
  border: 1px solid var(--vidro-borda); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-weight: 650; font-size: .86rem; text-decoration: none; cursor: pointer; }
.vidro:hover { filter: none; border-color: var(--cor); }
.vidro.redondo { width: 2.6rem; padding: 0; }
.vidro .ic { width: 18px; height: 18px; }
.vidro .mini-avatar { width: 1.6rem; height: 1.6rem; margin-left: -.55rem; border-radius: 50%; display: grid; place-items: center; background: var(--cor); color: var(--cor-texto); font-size: .78rem; font-weight: 800; }
.cabeca { position: relative; z-index: 2; margin: -50px 1rem 0; }
.cabeca .logo { width: 86px; height: 86px; border-radius: 24px; object-fit: cover; border: 4px solid var(--fundo); background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 12px 36px var(--brilho); }
.cabeca .logo.sem { font-size: 2.1rem; }
.cabeca h1 { font-size: 1.75rem; margin-top: .75rem; }
.cabeca .slogan { color: var(--muted); margin-top: .25rem; }
.infos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.infos > div { padding: .7rem .85rem; display: grid; gap: .1rem; min-width: 0; }
.infos > div + div { border-left: 1px solid var(--line); }
.infos small { color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; gap: .3rem; }
.infos small .ic { width: 14px; height: 14px; }
.infos b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .4rem; }
.infos b.ok { color: var(--ok); } .infos b.fechado { color: var(--danger); }
.infos b .ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.cabeca .aviso { margin-top: .8rem; }
.busca-caixa { position: relative; margin: 1.1rem 1rem 0; }
.busca-caixa > .ic { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); width: 18px; height: 18px; pointer-events: none; }
.busca { border-radius: 14px; padding-left: 2.8rem; background: var(--card); border-color: var(--line); }
.categorias { position: sticky; top: 0; z-index: 6; display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; padding: 0 1rem; margin-top: .7rem;
  background: color-mix(in srgb, var(--fundo) 86%, transparent); -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px); border-bottom: 1px solid var(--line); }
.categorias::-webkit-scrollbar { display: none; }
.categorias button { flex: none; background: none; border: 0; border-radius: 0; color: var(--muted); padding: 1rem 0 .85rem; font-weight: 600; font-size: .93rem; position: relative; }
.categorias button:hover { color: var(--ink); filter: none; }
.categorias button:active { transform: none; }
.categorias button.ativo { color: var(--ink); }
.categorias button.ativo::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--cor); }
.secao { padding: 0 1rem; scroll-margin-top: 3.6rem; }
.secao > h2 { margin: 1.9rem 0 .35rem; font-size: 1.3rem; font-weight: 800; display: flex; align-items: baseline; gap: .55rem; }
.secao > h2 small { font-size: .8rem; font-weight: 600; color: var(--muted); }
.lista-produtos { display: grid; }
.produto { display: flex; gap: 1rem; align-items: stretch; width: 100%; text-align: left; padding: 1.1rem 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  color: var(--ink); font-weight: 400; }
.produto:hover { filter: none; }
.produto:active { transform: none; opacity: .8; }
.lista-produtos .produto:last-child { border-bottom: 0; }
.produto .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.produto .info b { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.produto .info .desc { color: var(--muted); font-size: .87rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.produto .preco-p { margin-top: auto; padding-top: .4rem; font-weight: 750; font-size: .98rem; }
.produto .preco-p small { color: var(--muted); font-weight: 500; font-size: .78rem; margin-right: .2rem; }
.midia { position: relative; width: 104px; height: 104px; flex: none; }
.midia img, .midia .ilustra { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; display: grid; place-items: center; }
.ilustra { color: var(--cor); background: radial-gradient(110% 110% at 15% 0%, var(--cor-suave), transparent 65%), var(--card-2); border: 1px solid var(--line); }
.ilustra .ic { width: 46%; height: 46%; }
.mais { position: absolute; right: -6px; bottom: -6px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--cor); color: var(--cor-texto);
  box-shadow: 0 0 0 3px var(--fundo), 0 6px 16px var(--brilho); }
.mais .ic { width: 16px; height: 16px; }
.produto.esgotado { opacity: .45; cursor: not-allowed; }
.produto.esgotado .mais { display: none; }
.banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; margin: .7rem 0 .6rem; padding: 1.2rem; border-radius: 22px;
  color: var(--ink); font-weight: 400; border: 1px solid color-mix(in srgb, var(--cor) 38%, var(--line));
  background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--cor) 30%, transparent), transparent 60%), linear-gradient(135deg, var(--card-2), var(--card)); }
.banner:hover { filter: none; border-color: var(--cor); }
.banner .txt { flex: 1; display: grid; gap: .15rem; }
.banner .sobre { font-size: .68rem; letter-spacing: .14em; font-weight: 800; color: var(--cor); text-transform: uppercase; }
.banner b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.banner .desc { color: var(--muted); font-size: .88rem; }
.banner .cta { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; padding: .5rem 1rem; border-radius: 999px; background: var(--cor); color: var(--cor-texto); font-weight: 700; font-size: .86rem; }
.banner .cta .ic { width: 16px; height: 16px; }
.banner .arte { width: 92px; height: 92px; color: var(--cor); filter: drop-shadow(0 0 22px var(--brilho)); }
.barra-carrinho { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(1rem, env(safe-area-inset-bottom)); width: min(560px, calc(100% - 2rem)); z-index: 20;
  display: flex; align-items: center; gap: .85rem; padding: .8rem 1.1rem .8rem .8rem; border-radius: 18px; background: var(--cor); color: var(--cor-texto); text-decoration: none; font-weight: 700;
  box-shadow: 0 14px 36px var(--brilho), 0 4px 16px rgba(0,0,0,.3); animation: aparece .25s ease; }
.barra-carrinho .n { min-width: 2rem; height: 2rem; padding: 0 .4rem; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--cor-texto) 14%, transparent); }
.barra-carrinho .t { flex: 1; }
.assinatura { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 2.6rem auto 1rem; color: var(--muted); font-size: .78rem; font-weight: 600; text-decoration: none; opacity: .8; }
.assinatura:hover { opacity: 1; color: var(--ink); }
.assinatura img { width: 18px; height: 18px; }
.area-restrita { font-size: .72rem; color: var(--muted); opacity: .55; text-decoration: none; margin-top: -.4rem; }
.area-restrita:hover { opacity: 1; color: var(--ink); }
[data-tema="claro"] .assinatura img { filter: brightness(.25); }

/* janela de baixo (produto, pizza, entrar) */
.folha { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50; display: flex; align-items: flex-end; justify-content: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: aparece .2s ease; }
.folha > div { background: var(--card); color: var(--ink); width: 100%; max-width: 600px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; border-radius: 26px 26px 0 0;
  padding: 1.4rem 1.2rem 0; position: relative; border: 1px solid var(--line); border-bottom: 0; animation: sobeFolha .3s cubic-bezier(.2,.8,.2,1); }
@keyframes sobeFolha { from { transform: translateY(40px); opacity: .4; } }
.folha .fechar { position: absolute; right: .9rem; top: .9rem; z-index: 4; width: 2.4rem; height: 2.4rem; padding: 0; background: var(--vidro); color: var(--vidro-texto); border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.folha .fechar .ic { width: 18px; height: 18px; }
.folha-midia { margin: -1.4rem -1.2rem 1.1rem; height: 230px; overflow: hidden; }
.folha-midia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folha-midia.ilustra { border: 0; border-bottom: 1px solid var(--line); display: grid; place-items: center; height: 170px; }
.folha-midia.ilustra .ic { width: 84px; height: 84px; filter: drop-shadow(0 0 26px var(--brilho)); }
.folha h2.titulo { font-size: 1.4rem; font-weight: 800; margin: 0 2.8rem .3rem 0; letter-spacing: -.02em; }
.folha .preco-base { font-weight: 800; font-size: 1.1rem; margin-top: .5rem; }
.grupo { margin: 1.2rem -1.2rem 0; }
.grupo-cab { display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding: .8rem 1.2rem; background: var(--card-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.grupo-cab b { display: block; font-size: .98rem; }
.grupo-cab small { color: var(--muted); font-size: .8rem; }
.grupo-corpo { padding: 0 1.2rem; }
.etiqueta { flex: none; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 8px; background: var(--ink); color: var(--card); }
.etiqueta.feito { background: var(--ok-soft); color: var(--ok); }
.etiqueta.contador { background: var(--cor-suave); color: var(--cor); }
.tamanhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .55rem; padding: .9rem 0 .3rem; }
.tamanho { position: relative; margin: 0; padding: .85rem .8rem; border-radius: 16px; border: 1.5px solid var(--line-forte); cursor: pointer; display: grid; gap: .1rem; color: var(--ink); transition: border-color .15s, background .15s; }
.tamanho input { position: absolute; opacity: 0; pointer-events: none; }
.tamanho b { font-size: .98rem; }
.tamanho small { color: var(--muted); font-size: .76rem; font-weight: 500; line-height: 1.35; }
.tamanho .preco-t { margin-top: .35rem; font-weight: 800; font-size: .9rem; }
.tamanho:has(input:checked) { border-color: var(--cor); background: var(--cor-suave); }
.tamanho:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--cor-suave); }
.folha .obs { margin-top: 1.2rem; }
.folha .rodape { position: sticky; bottom: 0; z-index: 3; margin: 1.2rem -1.2rem 0; padding: .85rem 1.2rem calc(.85rem + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
.folha .rodape .linha { flex-wrap: nowrap; gap: .7rem; }
.folha .rodape button.cheio { flex: 1; justify-content: space-between; padding: .85rem 1.25rem; }
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--line-forte); border-radius: 999px; flex: none; }
.qtd button { background: transparent; color: var(--ink); border: 0; padding: .55rem .8rem; }
.qtd button .ic { width: 16px; height: 16px; }
.qtd button:hover { color: var(--cor); filter: none; }
.qtd span { min-width: 1.5rem; text-align: center; font-weight: 800; }

/* telas internas: barra com voltar */
.topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem;
  background: color-mix(in srgb, var(--fundo) 86%, transparent); -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px); border-bottom: 1px solid var(--line); }
.topo h1 { font-size: 1.12rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voltar { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s, color .15s; }
.voltar .ic { width: 18px; height: 18px; }
.voltar:hover { border-color: var(--cor); color: var(--cor); }
.item-carrinho { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.item-carrinho:last-child { border-bottom: 0; }
.resumo td { padding: .3rem 0; } .resumo td:last-child { text-align: right; }
.resumo tr.total td { font-weight: 800; font-size: 1.15rem; border-top: 1px solid var(--line); padding-top: .65rem; }
.abas2 { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .3rem; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; }
.abas2 button { background: transparent; color: var(--muted); border-color: transparent; padding: .6rem .8rem; }
.abas2 button:hover { filter: none; color: var(--ink); }
.abas2 button.ativo { background: var(--cor); color: var(--cor-texto); }
.linha-tempo { list-style: none; padding: 0; margin: .3rem 0; }
.linha-tempo li { display: flex; gap: .75rem; align-items: center; padding: .5rem 0; color: var(--muted); position: relative; }
.linha-tempo li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-forte); flex: none; background: var(--card); position: relative; z-index: 1; }
.linha-tempo li + li::after { content: ''; position: absolute; left: 6px; top: -50%; height: 100%; width: 2px; background: var(--line); }
.linha-tempo li.feito { color: var(--ink); font-weight: 700; }
.linha-tempo li.feito::before { background: var(--cor); border-color: var(--cor); box-shadow: 0 0 0 4px var(--cor-suave); }
.linha-tempo li.feito::after { background: var(--cor); }
.conta { display: flex; align-items: center; gap: .85rem; }
.conta .conta-dados { flex: 1; min-width: 0; }
.conta .conta-dados b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 3rem; height: 3rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; background: var(--cor); color: var(--cor-texto); }
.pedido-item { display: block; text-decoration: none; color: inherit; transition: border-color .15s; }
.pedido-item:hover { border-color: color-mix(in srgb, var(--cor) 60%, transparent); }
.vazio { text-align: center; display: grid; justify-items: center; gap: .6rem; padding-top: 2.5rem; }
.vazio-icone { width: 5rem; height: 5rem; border-radius: 50%; display: grid; place-items: center; color: var(--cor); background: radial-gradient(circle at 30% 20%, var(--brilho), var(--card-2) 70%); }
.vazio-icone .ic { width: 34px; height: 34px; }
.lgpd { font-size: .78rem; color: var(--muted); margin-top: .6rem; }

/* computador: cardápio em duas colunas */
@media (min-width: 760px) {
  .loja { max-width: 1080px; padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero { height: 230px; border-radius: 0 0 30px 30px; }
  .cabeca, .busca-caixa { margin-left: 1.5rem; margin-right: 1.5rem; }
  .cabeca { margin-top: -56px; }
  .infos { max-width: 560px; }
  .categorias { padding: 0 1.5rem; }
  .secao { padding: 0 1.5rem; }
  .lista-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .produto, .lista-produtos .produto:last-child { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 1rem; }
  .produto:hover { border-color: color-mix(in srgb, var(--cor) 50%, transparent); }
  .banner { padding: 1.5rem 1.8rem; }
  .folha { align-items: center; padding: 1rem; }
  .folha > div { border-radius: 26px; border-bottom: 1px solid var(--line); max-height: 88vh; }
}

/* ---------- comanda (58/80 mm) ---------- */
.ticket { width: 72mm; font: 12px/1.35 "Courier New", monospace; color: #000; margin: 0 auto; background: #fff; }
.ticket h1 { font-size: 16px; text-align: center; } .ticket hr { border: 0; border-top: 1px dashed #000; }
@media print { body { background: #fff; } .nao-imprimir { display: none !important; } @page { margin: 2mm; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }