/* Bella Fatia — identidade do cardápio impresso: papel, vermelho tomate, Marcellus + Lora.
   A cena central usa a bancada cinza da referência; o calor do forno só aparece dentro dela. */

:root {
  --paper: #f5f3ee;
  --paper-2: #ebe7df;
  --paper-3: #ddd7cc;
  --ink: #2b2522;
  --ink-2: #5f5550;
  --ink-3: #857a74;
  --tomato: #c3261f;
  --tomato-deep: #9b1b16;
  --tomato-tint: #f6e4e1;
  --ok: #2f6b3a;

  --f-display: 'Marcellus', 'Trajan Pro', Georgia, serif;
  --f-text: 'Lora', Georgia, 'Times New Roman', serif;

  --topbar-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--tomato);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 118px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  font: 400 1rem/1.55 var(--f-text);
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
body.has-bagbar { padding-bottom: calc(76px + var(--safe-b)); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a, input, select, textarea, label { touch-action: manipulation; } /* sem atraso de toque duplo */
a { color: var(--tomato-deep); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* sem margem: o aviso no fim do body não estica a página */
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.4em;
  border: 1.5px solid var(--tomato); border-radius: 999px;
  background: transparent; color: var(--tomato-deep);
  font: 600 1rem/1 var(--f-text); text-decoration: none;
  transition: background-color .15s, color .15s, transform .12s var(--ease-out);
  user-select: none; -webkit-user-select: none;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--tomato); color: #fff; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--tomato-deep); border-color: var(--tomato-deep); }
  .btn:not(.btn--primary):hover { background: var(--tomato-tint); }
}
.btn--small { min-height: 40px; padding: 0 1em; font-size: .92rem; }
.btn[aria-disabled='true'], .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--block { width: 100%; }
.iconbtn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--paper-2); color: var(--ink); }
.iconbtn svg { width: 22px; height: 22px; }
.chipbtn { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--paper-3); background: var(--paper); font-weight: 600; font-size: .92rem; }
.chipbtn span { color: var(--tomato-deep); }

/* ---------- topo ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--topbar-h);
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  border-bottom: 1px solid var(--paper-3);
}
.brand img { width: 104px; height: auto; }
.topbar__place { margin: 0; color: var(--ink-2); font-size: .93rem; display: none; }
.topbar__place a { color: inherit; }
.bagbtn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px;
  border: 1.5px solid var(--paper-3); background: var(--paper); font-weight: 600;
}
.bagbtn__icon { width: 22px; height: 22px; color: var(--tomato); }
.bagbtn__count { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--tomato); color: #fff; font-size: .82rem; }
.bagbtn__count[data-zero] { background: var(--paper-3); color: var(--ink-2); }
.bagbtn__total { color: var(--ink-2); font-weight: 500; display: none; font-variant-numeric: tabular-nums; }
.bump { animation: bump .42s var(--ease-out); }
@keyframes bump { 30% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---------- fluxo do celular: apresentação curta → cena → cardápio ---------- */
.app { padding: 0 16px; }
.intro { height: 0; padding: 0; } /* o título visível está na abertura; aqui fica só o h1 acessível */
.stage { margin-top: 14px; }
.stage { margin: 0 -8px; }
.stage__host { border-radius: 18px; background: #1b1816; }
.stage__host { height: clamp(260px, 84vw, 440px); max-height: 52dvh; } /* cena compacta: o cardápio começa na primeira tela */
.panel { display: none; }

/* ---------- cardápio ---------- */
.menu__bar {
  position: sticky; top: var(--topbar-h); z-index: 40;
  display: grid; gap: 10px; margin: 14px -16px 0; padding: 12px 16px;
  background: var(--paper); border-bottom: 1px solid var(--paper-3);
}
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px;
  /* a faixa rola: o fim esmaece para mostrar que há mais */
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px;
  border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500;
  border: 1.5px solid var(--paper-3); background: var(--paper);
}
.tab[aria-current='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.search { position: relative; display: block; }
.search svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search input { width: 100%; min-height: 46px; padding: 0 14px 0 42px; border-radius: 12px; border: 1.5px solid var(--paper-3); background: #fbfaf7; font-size: 1rem; }
.search input:focus-visible { border-color: var(--tomato); box-shadow: none; outline: 2px solid var(--tomato); outline-offset: 0; }
.menu__empty { margin: 28px 0; color: var(--ink-2); }
.menu__noscript { padding: 16px; border: 1.5px solid var(--tomato); border-radius: 12px; }

.menu__section { padding-top: 22px; } /* o recuo sob o topo e a barra vem do scroll-padding-top do html (somar os dois deixava a seção ~180 px abaixo da barra) */
.menu__title { margin: 0 0 4px; font: 400 1.45rem/1.2 var(--f-display); display: flex; align-items: center; gap: 14px; }
.menu__title span { position: relative; padding-bottom: 6px; }
.menu__title span::after {
  /* traço de pincel, como no cardápio impresso */
  content: ''; position: absolute; left: -4px; right: -10px; bottom: -2px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2C40 3.4 90 2.6 198 3.6c-60 1.6-130 2.4-190 3.2' fill='none' stroke='%23c3261f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.menu__title::after { content: ''; flex: 1; height: 1px; background: var(--paper-3); }
.items { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 24px; }
@media (min-width: 680px) and (max-width: 1199px) { .items { grid-template-columns: 1fr 1fr; } }
.item { border-bottom: 1px solid var(--paper-2); }
.item[hidden] { display: none; }
.item__row {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 8px; margin: 0 -8px; width: calc(100% + 16px);
  border: 0; background: none; text-align: left; border-radius: 14px;
  transition: background-color .15s;
}
.item__img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: #3a2a20; }
.item__text { display: grid; gap: 2px; min-width: 0; }
.item__name { color: var(--tomato); font-weight: 600; font-size: 1.06rem; line-height: 1.25; }
.item__desc { color: var(--ink-2); font-size: .9rem; line-height: 1.4; }
.item__price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; align-self: start; padding-top: 2px; }
.item--special .item__desc::after { content: ' Imagem de exemplo.'; color: var(--ink-3); }
.item--drink .item__row { grid-template-areas: 'img text price' 'img text btn'; row-gap: 6px; }
.item--drink .item__img { grid-area: img; }
.item--drink .item__text { grid-area: text; }
.item--drink .item__price { grid-area: price; justify-self: end; }
.item--drink .item__add { grid-area: btn; justify-self: end; }
.item__add[data-done] { background: var(--ok); border-color: var(--ok); color: #fff; }
@media (hover: hover) { button.item__row:hover { background: var(--paper-2); } }
button.item__row[aria-current='true'] { background: var(--tomato-tint); }
button.item__row:active { background: var(--paper-3); }

.footer { margin: 26px 0 0; padding: 20px 0 28px; border-top: 1px solid var(--paper-3); display: grid; gap: 8px; color: var(--ink-2); font-size: .9rem; }
.footer p { margin: 0; }
.footer a { color: inherit; }
.footer__note { color: var(--ink-3); font-size: .84rem; max-width: 62ch; }
.footer__by { color: var(--ink-3); font-size: .82rem; letter-spacing: .02em; }

/* ---------- barra da sacola (celular) ---------- */
.bagbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 16px calc(10px + var(--safe-b)); background: linear-gradient(to top, var(--paper) 70%, transparent); }
.bagbar[hidden] { display: none; }
.bagbar__btn { width: 100%; min-height: 54px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; text-align: left; }
.bagbar__count { min-width: 28px; height: 28px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--tomato); color: #fff; font-size: .88rem; }
.bagbar__total { font-variant-numeric: tabular-nums; }

/* =====================================================================
   CENA fotográfica: caixa Bella Fatia sobre concreto escuro (camadas da mesma câmera)
   ===================================================================== */
.scene {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 18px; isolation: isolate;
  background: #2a2826 url('../assets/cena/concreto.webp') center / cover;
  user-select: none; -webkit-user-select: none; contain: layout paint;
}
.scene::after { /* queda de luz nas bordas, como na foto */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(10, 8, 6, .42) 100%);
}
.scene__frame { position: absolute; left: 0; top: 0; transform-origin: 0 0; } /* camadas recortadas pela silhueta: sem máscara nem retângulo de foto */
.layer { position: absolute; left: 0; top: 0; display: block; max-width: none; }
.layer--front { z-index: 4; }
.layer--shadow { z-index: 0; }
.layer--closed { z-index: 7; opacity: 0; }
.pzshadow { /* sombra de contato da pizza no papel: ~12 px além da borda, mais densa junto à massa (luz do alto à esquerda) */
  position: absolute; z-index: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 24, 12, .5), rgba(40, 24, 12, .42) 90%, rgba(40, 24, 12, .16) 96%, transparent 100%);
  transform: translate(calc(3px * var(--k, 1)), calc(4px * var(--k, 1))); filter: blur(calc(5px * var(--k, 1)));
}
.scene[data-empty] .pzshadow { display: none; }
.pz { position: absolute; z-index: 2; transform-origin: 50% 50%; }
.pz__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; max-width: none; opacity: 0; } /* recorte quadrado → elipse da perspectiva */
.pz__tops { position: absolute; inset: 0; z-index: 3; }
.tp { position: absolute; inset: 0; }
.tp__piece { position: absolute; max-width: none; filter: drop-shadow(0 3px 2px rgba(45, 22, 6, .45)); }
.lid { position: absolute; left: 0; width: 100%; z-index: 6; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lid img { display: block; width: 100%; height: 100%; max-width: none; }
.lid--in { top: 0; transform-origin: 50% 100%; }
.lid--out { transform-origin: 50% 0; }
.lid__shade { position: absolute; inset: 0; background: #0d0a08; opacity: 0; pointer-events: none;
  -webkit-mask: var(--m) center / 100% 100%; }
.lid--in .lid__shade { --m: url('../assets/cena/tampa-interna.webp'); }
.lid--out .lid__shade { --m: url('../assets/cena/tampa-externa.webp'); }
/* forno → caixa: descendo, a pizza passa à frente da tampa aberta (6); a parede da frente fica por cima (8)
   e cobre a borda da pizza quando ela entra na caixa */
.scene[data-drop] .pz:not(.pz--ghost) { z-index: 7; }
/* sombra que a pizza descendo projeta (gradiente fixo, sem filtro: só se desloca) */
.pz__cast { position: absolute; inset: 2% 3%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(30, 16, 6, .5), rgba(30, 16, 6, .22) 70%, transparent 100%); }
.scene[data-drop] .layer--front { z-index: 8; }
.scene[data-drop] .pzshadow { filter: blur(calc(10px * var(--k, 1))); }
.scene[data-drop] .pz--ghost { z-index: 2; } /* a pizza anterior fica no fundo, atrás da que desce */
.pz__ghost { opacity: 1; }
/* luz do forno (fora do quadro, acima): âmbar quente, só durante a descida da pizza */
.scene__glow { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(75% 60% at 50% -6%, rgba(255, 150, 60, .6), rgba(255, 122, 40, .2) 55%, transparent 80%); }
.pz__steam { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pz__steam i { position: absolute; top: 30%; width: 22%; height: 26%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 250, 242, .75), rgba(255, 250, 242, 0)); filter: blur(calc(10px * var(--k, 1))); }
.pz__steam i:nth-child(1) { left: 28%; }
.pz__steam i:nth-child(2) { left: 46%; top: 22%; }
.pz__steam i:nth-child(3) { left: 60%; top: 34%; }
/* abertura: tampa lisa e a logo que cai (tools/box-photos.mjs: lisa + logo = foto impressa) */
.layer--blank { z-index: 7; opacity: 0; }
.stamp { position: absolute; z-index: 8; opacity: 0; pointer-events: none; }
.stamp img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.stamp__shadow { filter: brightness(0) blur(calc(10px * var(--k, 1))); opacity: 0; } /* filtro fixo: só transform e opacity animam */
.bagfly.bagfly--box { border-radius: 0; object-fit: fill; box-shadow: none; max-width: none; }
.scene__tag { position: absolute; right: 12px; bottom: 9px; z-index: 8; margin: 0; color: rgba(255, 248, 238, .78); font-size: .74rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); pointer-events: none; }
.bagfly { position: fixed; z-index: 300; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); pointer-events: none; }

/* ---------- entrada: as próprias fotos em camadas, 2,4 s ao abrir o site (js/abertura.js) ---------- */
/* Camada fixa sob o topo, sobre a página já montada (nada dela muda de lugar). Só aparece com a classe ab-on,
   posta por js/abertura-pre.js antes da primeira pintura; se o módulo não assumir, ela some sozinha. */
.abertura { display: none; }
.ab-on .abertura:not([hidden]) {
  display: block; position: fixed; left: 0; right: 0; top: var(--topbar-h); bottom: 0; z-index: 45;
  overflow: hidden; contain: strict; background: var(--paper); color: var(--ink);
  animation: ab-failsafe .3s 2s forwards; /* o módulo não assumiu até o prazo das camadas (1,5 s): a página aparece */
}
.ab-on .abertura.is-js { animation: none; }
.abertura.is-revelada { pointer-events: none; }
@keyframes ab-failsafe { to { opacity: 0; visibility: hidden; } }
.abertura__foto { position: absolute; inset: 0; z-index: 1; opacity: 0; }
.ab { position: absolute; left: 0; top: 0; max-width: none; display: block; transform-origin: 0 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
.abertura .ab { will-change: transform; }
.abertura:not(.is-ready) .abertura__foto { visibility: hidden; }
.ab-fundo { z-index: 1; }
.ab-chama { z-index: 2; mix-blend-mode: screen; opacity: 0; }
.ab-sombra-caixa { z-index: 3; filter: blur(var(--ab-blur, 6px)); opacity: .62; }
.ab-sombra-caixa i { position: absolute; inset: 0; background: rgb(14 8 4); }
.ab-base { z-index: 4; }
.ab-interior { z-index: 5; background: #1d130b; }
.ab-tampa { z-index: 6; }
.ab-tampa img { display: block; max-width: none; }
.ab-tampa--externa img { width: 640px; height: 440px; }
.ab-tampa--interna img { width: 640px; height: 400px; }
/* espessura da aresta livre: a borda da própria face impressa (as últimas linhas da textura) */
.ab-tampa--aresta { z-index: 7; width: 640px; height: 12px; background: url(../assets/abertura/tampa-externa.webp) 0 100% / 640px 440px; }
.ab-tampa__luz { position: absolute; inset: 0; background: #120b06; opacity: 0; }
/* reflexo discreto na aresta livre (na face externa é a última linha; na interna, a primeira) */
.ab-tampa__reflexo { position: absolute; left: 0; right: 0; height: 26px; opacity: 0; }
.ab-tampa--externa .ab-tampa__reflexo { bottom: 0; background: linear-gradient(0deg, rgb(255 250 240 / .5), rgb(255 250 240 / 0)); }
.ab-tampa--interna .ab-tampa__reflexo { top: 0; background: linear-gradient(180deg, rgb(255 250 240 / .45), rgb(255 250 240 / 0)); }
.ab-pa { z-index: 8; }
.ab-sombra { z-index: 9; border-radius: 50%; }
.ab-sombra--contato { background: radial-gradient(closest-side, rgba(24, 11, 3, .85), rgba(24, 11, 3, .55) 72%, rgba(24, 11, 3, 0) 100%); }
.ab-sombra--chao { z-index: 5; background: radial-gradient(closest-side, rgba(28, 13, 4, .92), rgba(28, 13, 4, .62) 52%, rgba(28, 13, 4, 0) 100%); }
.ab-pizza { z-index: 10; }
.ab-frente { z-index: 11; }
/* luz branca de entrada e brilho da passagem ao catálogo: suaves, nunca sobre a impressão da tampa */
.abertura__luz { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 55% at 50% 42%, rgb(255 255 255 / .9), rgb(255 255 255 / .35) 60%, rgb(255 255 255 / 0)); }
.abertura__brilho { position: absolute; left: 0; top: 0; width: 100px; height: 100px; z-index: 3; transform-origin: 0 0; pointer-events: none; opacity: 0; will-change: transform;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / .55)); }
/* véus creme: cobrem o que fica fora da janela da foto e fundem a borda dela ao creme do catálogo */
.abertura__veu { position: absolute; left: 0; top: 0; z-index: 2; background: var(--paper); pointer-events: none; will-change: transform; }
.abertura__veu::after { content: ''; position: absolute; }
[data-abertura-veu='e']::after { left: 100%; top: 0; bottom: 0; width: var(--ab-pluma, 40px); transform: scaleX(var(--ab-f, 1)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--paper), rgb(245 243 238 / 0)); }
[data-abertura-veu='d']::after { right: 100%; top: 0; bottom: 0; width: var(--ab-pluma, 40px); transform: scaleX(var(--ab-f, 1)); transform-origin: 100% 50%; background: linear-gradient(270deg, var(--paper), rgb(245 243 238 / 0)); }
[data-abertura-veu='c']::after { top: 100%; left: 0; right: 0; height: var(--ab-pluma, 40px); transform: scaleY(var(--ab-f, 1)); transform-origin: 50% 0; background: linear-gradient(180deg, var(--paper), rgb(245 243 238 / 0)); }
[data-abertura-veu='b']::after { bottom: 100%; left: 0; right: 0; height: var(--ab-pluma, 40px); transform: scaleY(var(--ab-f, 1)); transform-origin: 50% 100%; background: linear-gradient(0deg, var(--paper), rgb(245 243 238 / 0)); }
.abertura__titulo { position: absolute; z-index: 4; margin: 0; font: 400 clamp(1.8rem, 2.4vw, 2.4rem)/1.12 var(--f-display); text-wrap: balance; color: var(--ink); }
.abertura__pular { position: absolute; top: 12px; right: 14px; z-index: 4; min-height: 44px; padding: 0 18px; border-radius: 999px; pointer-events: auto;
  border: 1.5px solid var(--paper-3); background: rgb(245 243 238 / .92); color: var(--ink); font-size: .95rem; touch-action: manipulation; }
@media (hover: hover) { .abertura__pular:hover { background: var(--paper); } }
.abertura__acoes { position: absolute; left: 0; right: 0; bottom: calc(18px + var(--safe-b)); z-index: 4; display: flex; justify-content: center; padding: 0 20px; }
.abertura__acoes .btn { pointer-events: auto; min-height: 48px; padding: 0 1.8em; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); touch-action: manipulation; }
.abertura__nota { position: absolute; right: 16px; bottom: calc(18px + var(--safe-b)); z-index: 4; margin: 0; font-size: .74rem; color: var(--ink-3); }
/* telas estreitas: a foto ocupa a largura; o título fica só para leitores de tela (a entrada dura 2,4 s) */
.abertura__titulo { width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.abertura__nota { display: none; }
/* telas largas: título e botão no creme à esquerda, nunca sobre a foto */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .abertura__titulo { left: 32px; top: 28px; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; max-width: 13ch; }
  .abertura__nota { display: block; }
  .abertura__acoes { left: 32px; right: auto; bottom: auto; top: calc(44px + 3 * 1.12 * clamp(1.8rem, 2.4vw, 2.4rem)); padding: 0; justify-content: flex-start; }
}
/* a cópia parada do último quadro, sobre a cena de pedido, até escolher um sabor */
.stage__host { position: relative; }
.abertura-pouso { position: absolute; inset: 0; z-index: 9; overflow: hidden; border-radius: inherit; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s var(--ease-out), visibility 0s .35s; }
.abertura-pouso.is-visivel { opacity: 1; visibility: visible; transition: none; }
.abertura-pouso.is-visivel.is-solto { opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility 0s .35s; }
.abertura-pouso__foto { position: absolute; inset: 0; }
.ab-vapor { position: absolute; z-index: 12; left: 50%; top: 18%; width: 46%; height: 24%; transform: translateX(-50%); opacity: 0; pointer-events: none; }
.ab-vapor i { position: absolute; bottom: 0; width: 26%; height: 70%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 248, 238, .38), rgba(255, 248, 238, 0)); }
.ab-vapor i:nth-child(1) { left: 22%; }
.ab-vapor i:nth-child(2) { left: 42%; height: 85%; }
.ab-vapor i:nth-child(3) { left: 60%; }
@media (prefers-reduced-motion: no-preference) {
  /* parada sobre a cena de pedido, só a luz das chamas (a própria foto, em "screen") e o vapor se mexem, devagar */
  .abertura-pouso.is-visivel .ab-chama { animation: ab-chama 3.7s ease-in-out infinite alternate; }
  .abertura-pouso.is-visivel .ab-vapor { opacity: 1; transition: opacity 1.2s .4s; }
  .abertura-pouso.is-visivel .ab-vapor i { animation: ab-vapor 4.2s ease-out infinite; }
  .abertura-pouso.is-visivel .ab-vapor i:nth-child(2) { animation-delay: -1.4s; }
  .abertura-pouso.is-visivel .ab-vapor i:nth-child(3) { animation-delay: -2.8s; }
}
@keyframes ab-chama { 0% { opacity: .2; } 23% { opacity: .3; } 41% { opacity: .12; } 63% { opacity: .32; } 80% { opacity: .16; } 100% { opacity: .26; } }
@keyframes ab-vapor { 0% { opacity: 0; transform: translateY(18%) scaleX(.8); } 35% { opacity: .7; } 100% { opacity: 0; transform: translateY(-38%) scaleX(1.25); } }
.btn--large { min-height: 54px; padding: 0 1.6em; font-size: 1.05rem; }
.btn--ghost { background: transparent; border-color: rgba(247, 239, 228, .6); color: #f7efe4; }

/* ---------- detalhe do produto ---------- */
.detail { padding: 16px 0 10px; }
.detail__head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.detail__photo { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: #3a2a20; }
.detail__name { margin: 0; color: var(--tomato); font: 600 1.45rem/1.15 var(--f-text); }
.detail__price { margin: 3px 0 0; font-weight: 600; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.detail__desc { margin: 12px 0 0; color: var(--ink); max-width: 52ch; }
.detail__desc b { font-weight: 600; }
.detail__note { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--paper-2); color: var(--ink-2); font-size: .9rem; }
.detail__imgnote { margin: 6px 0 0; color: var(--ink-3); font-size: .82rem; }
.opt { border: 0; margin: 20px 0 0; padding: 0; min-width: 0; }
.opt legend { padding: 0; font-weight: 600; font-size: 1.02rem; display: flex; align-items: baseline; gap: 8px; width: 100%; }
.opt legend small { color: var(--ink-3); font-weight: 400; font-size: .86rem; }
.opt__list { display: grid; gap: 2px; margin-top: 8px; }
.opt__list--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 4px 12px; border-radius: 12px; cursor: pointer; }
.choice--plain { grid-template-columns: 22px minmax(0, 1fr) auto; min-height: 48px; }
@media (hover: hover) { .choice:hover { background: var(--paper-2); } }
.choice:has(input:checked) { background: var(--tomato-tint); }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--tomato); }
.choice__img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-view-box: inset(19%); background: #3a2a20; }
.choice__price { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: .94rem; white-space: nowrap; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--paper-3); background: var(--paper); font-size: .94rem; }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:disabled + span { opacity: .45; }
.chip input:focus-visible + span { box-shadow: var(--focus); }
.field { display: grid; gap: 6px; margin-top: 18px; }
.field__label { font-weight: 600; }
.field__hint { color: var(--ink-3); font-size: .85rem; font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--paper-3); background: #fbfaf7; font-size: 1rem; }
.field textarea { min-height: 76px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow: none; outline: 2px solid var(--tomato); outline-offset: 0; border-color: var(--tomato); }
.field [aria-invalid='true'] { border-color: var(--tomato); }
.field__error { color: var(--tomato-deep); font-size: .88rem; margin: 0; }
.form-error { color: var(--tomato-deep); margin: 12px 0 0; font-weight: 500; }

.foot { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; }
.foot .add-btn { grid-column: 1 / -1; }
.foot__total { margin: 0; text-align: right; display: grid; line-height: 1.25; }
.foot__total span { color: var(--ink-3); font-size: .82rem; }
.foot__total b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--paper-3); border-radius: 999px; background: #fbfaf7; }
.qty button { width: 44px; height: 46px; border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--ink); border-radius: 999px; }
.qty button:disabled { color: var(--ink-3); opacity: .5; cursor: not-allowed; }
.qty output { min-width: 26px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.qty--small button { width: 38px; height: 38px; font-size: 1.15rem; }
.add-btn { min-height: 52px; gap: .6em; }
.add-btn__price { font-variant-numeric: tabular-nums; opacity: .92; }
.add-btn[data-done] { background: var(--ok); border-color: var(--ok); }

/* ---------- folhas (dialog) ---------- */
.sheet { padding: 0; border: 0; color: var(--ink); background: var(--paper); box-shadow: 0 -10px 40px rgba(31, 26, 23, .18); overflow: hidden; }
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: rgba(31, 26, 23, .5); }
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in .3s var(--ease-out); }
  .sheet[open]::backdrop { animation: fade-in .25s ease-out; }
}
@keyframes sheet-in { from { transform: translateY(32px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
.sheet__head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex: none; border-bottom: 1px solid var(--paper-2); }
.sheet__title { margin: 0 auto 0 0; font: 400 1.45rem/1.2 var(--f-display); }
.sheet__title:focus { outline: none; }
.sheet__name { flex: 1; min-width: 0; margin: 0; font-weight: 600; color: var(--tomato); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__name span { color: var(--ink); font-weight: 500; }
/* produto no celular: UMA área de rolagem (cena + opções); o botão de adicionar fica fixo embaixo */
.sheet--detail { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sheet__stage { /* a pizza fica visível enquanto as opções rolam por baixo */
  position: sticky; top: 0; z-index: 2; height: min(46dvh, 100vw); padding: 10px 10px 8px; background: var(--paper); }
.sheet__detail { padding: 0 18px 18px; }
.sheet__foot { flex: none; padding: 12px 16px calc(12px + var(--safe-b)); border-top: 1px solid var(--paper-3); background: var(--paper); }
.sheet--bag { width: 100%; max-width: 100%; max-height: 94dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
.sheet--bag .bag { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- sacola ---------- */
.bag__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 12px; }
.bag__empty { padding: 20px 18px 28px; display: grid; gap: 14px; justify-items: start; color: var(--ink-2); }
.bag__notice { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--paper-2); color: var(--ink-2); font-size: .9rem; }
.lines { list-style: none; margin: 0; padding: 0; }
.line { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--paper-2); }
.line__img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; background: #3a2a20; }
.line__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.line__name { margin: 0; font-weight: 600; color: var(--tomato); }
.line__total { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.line__opts { margin: 4px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: .88rem; }
.line__opts b { font-weight: 600; color: var(--ink); }
.line__ctrl { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 10px; }
.linkbtn { border: 0; background: none; padding: 8px 4px; color: var(--tomato-deep); text-decoration: underline; text-underline-offset: 3px; min-height: 40px; }
.sum { margin: 0; padding: 12px 0 0; display: grid; gap: 4px; }
.sum div { display: flex; justify-content: space-between; gap: 12px; }
.sum dt { color: var(--ink-2); }
.sum dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.sum__total { font-weight: 700; font-size: 1.1rem; padding-top: 6px; border-top: 1px solid var(--paper-3); margin-top: 4px; }
.sum__total dt { color: var(--ink); }
.sum__hint { color: var(--ink-3); font-size: .85rem; margin: 6px 0 0; }
.bag__foot { flex: none; padding: 12px 18px calc(14px + var(--safe-b)); border-top: 1px solid var(--paper-3); background: var(--paper); display: grid; gap: 10px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.mode { position: relative; }
.mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mode span { display: grid; place-items: center; min-height: 50px; border-radius: 12px; border: 1.5px solid var(--paper-3); font-weight: 600; background: #fbfaf7; }
.mode input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.mode input:focus-visible + span { box-shadow: var(--focus); }
.sent { padding: 8px 18px 24px; display: grid; gap: 12px; }
.sent p { margin: 0; color: var(--ink-2); }
.sent__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.back { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(84px + var(--safe-b)); z-index: 120; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: 0 10px 30px rgba(31, 26, 23, .25); transform: translateX(-50%); max-width: calc(100% - 32px); }
.toast[hidden] { display: none; }
.toast__text { margin: 0; font-weight: 500; }
.toast__action { border: 0; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .toast:not([hidden]) { animation: toast-in .3s var(--ease-out); } }
@keyframes toast-in { from { opacity: 0; translate: 0 10px; } }

/* ---------- tablet ---------- */
@media (min-width: 720px) {
  .topbar { padding: 0 24px; }
  .topbar__place { display: block; }
  .bagbtn__total { display: inline; }
  .brand img { width: 118px; }
  .app { padding: 0 24px; }
  .menu__bar { margin-inline: -24px; padding-inline: 24px; grid-template-columns: auto minmax(220px, 340px); align-items: center; justify-content: space-between; }
  .tabs { margin: 0; padding: 0; }
  .stage { margin: 0; }
  .stage__host { height: min(62vw, 56dvh, 560px); width: min(100%, 67vw, 61dvh, 610px); margin-inline: auto; } /* largura na proporção da foto (902×830): sem emenda nas laterais */
  /* produto: janela central em duas colunas (cena fixa à esquerda, opções rolam à direita) */
  .sheet--detail { --sheet-h: min(780px, 92dvh); width: min(1040px, calc(100% - 40px)); height: var(--sheet-h); max-height: var(--sheet-h); margin: auto; border-radius: 22px; }
  .sheet__body { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: start; }
  .sheet__stage { position: sticky; top: 0; height: calc(var(--sheet-h) - 66px - 78px); max-height: none; padding: 14px; }
  .sheet__detail { padding: 6px 22px 18px 8px; }
  .sheet--bag { width: min(480px, 100%); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 22px 0 0 22px; }
  @media (prefers-reduced-motion: no-preference) { .sheet--bag[open] { animation: drawer-in .3s var(--ease-out); } }
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }

/* ---------- desktop: catálogo | cena | opções (só com largura e altura suficientes) ---------- */
@media (min-width: 1200px) and (min-height: 620px) {
  :root { --topbar-h: 64px; }
  html { scroll-padding-top: 0; }
  /* sem overflow global: cada coluna rola por dentro e o rodapé aparece */
  body.has-bagbar { padding-bottom: 0; }
  .bagbar { display: none !important; }
  .toast { bottom: 28px; }
  .app {
    height: calc(100dvh - var(--topbar-h)); padding: 0;
    display: grid; grid-template-columns: minmax(340px, 25vw) minmax(0, 1fr) minmax(360px, 27vw);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: 'intro stage panel' 'bar stage panel' 'list stage panel';
  }
  .intro { grid-area: intro; padding: 0; }
  .menu__bar { grid-area: bar; position: static; margin: 0; padding: 16px 22px 12px; grid-template-columns: 1fr; }
  /* as quatro categorias cabem inteiras na coluna: sem corte nem rolagem */
  .tabs { gap: 4px; -webkit-mask: none; mask: none; overflow: visible; }
  .tab { flex: 1 1 auto; justify-content: center; min-height: 36px; padding: 0 8px; font-size: .9rem; }
  .menu__section { scroll-margin-top: 0; }
  .catalog { grid-area: list; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px; scrollbar-width: thin; }
  .menu__section { padding-top: 16px; }
  .menu__title { font-size: 1.25rem; }
  .item__row { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; padding: 8px; }
  .item__img { width: 76px; height: 76px; }
  .item__name { font-size: 1rem; }
  .item__desc { font-size: .86rem; }
  .stage { grid-area: stage; padding: 12px; min-width: 0; background: var(--paper); } /* entorno creme, como o da entrada */
  .stage__host { background: none; }
  .stage__host { height: 100%; max-height: none; width: auto; margin-inline: 0; }
  .panel { grid-area: panel; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--paper-3); background: #faf8f4; }
  .panel__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 12px; scrollbar-width: thin; }
  .panel__foot { flex: none; padding: 14px 24px 16px; border-top: 1px solid var(--paper-3); }
  .detail { padding-top: 18px; }
}
@media (min-width: 1500px) and (min-height: 620px) {
  .app { grid-template-columns: 380px minmax(0, 1fr) 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene__light, .scene__embers, .scene__heat span { animation: none !important; }
  .scene__heat { display: none; }
  .bump { animation: none; }
  .btn, .item__row { transition: none; }
}

html.modal-open { overflow: hidden; }
@media (max-width: 419px) {
  .wide-only { display: none; }
  .qty button { width: 40px; }
  .item__row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; }
  .item__img { width: 72px; height: 72px; }
}
/* catupiry: creme quente e levemente translúcido, como se derretesse na cobertura */
.tp[data-extra='catupiry'] .tp__piece { opacity: .9; filter: sepia(.18) saturate(1.1) drop-shadow(0 2px 2px rgba(45, 22, 6, .35)); }
.scene[data-shape='free'] .pzshadow { display: none; }
.scene[data-shape='free'] .pz__img { filter: drop-shadow(0 16px 14px rgba(30, 15, 5, .5)); }
@media (min-width: 1200px) and (min-height: 620px) { .toast { left: auto; right: 24px; top: calc(var(--topbar-h) + 12px); bottom: auto; transform: none; } }
.bag__undo { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.bag__undo .linkbtn { min-height: 36px; padding: 4px 2px; font-weight: 600; }