/* Donna Beer · site premium (03/11/2026).
   Ideia: o freezer a -6 °C vira o visual. Claro de geada + amarelo do logo como luz + malte nas seções de noite.
   Letras do ramo: Alfa Slab One (rótulo de cerveja) nos títulos + Barlow (placa e cardápio de bar) no texto.
   Prefixos por peça: mn (menu) · gl (topo/freezer) · es (esteira, em esteira.css) · ct (lista) · fr (frase) · pv (provas)
   · of (onde fica) · cf (como pedir) · dv (dúvidas) · pd (pedido) · rd (rodapé) · bf (barra do celular) · id (18 anos). */

@font-face { font-family: "Alfa Slab One"; src: url(fontes/alfa-slab-one.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fontes/barlow-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fontes/barlow-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fontes/barlow-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --geada: #EDF3F3; --geada-2: #DFEAEA; --espuma: #FBF3E4; --espuma-2: #F3E6CF;
  --malte: #170A05; --malte-2: #24110A; --malte-3: #3C170F;
  --tinta: #2A1209; --tinta-suave: rgb(42 18 9 / .74); --tinta-fraca: rgb(42 18 9 / .56);
  --claro: #FFF6E8; --claro-suave: rgb(255 246 232 / .76); --claro-fraco: rgb(255 246 232 / .58);
  --ouro: #FFC000; --ambar: #F0A800; --laranja: #F06018; --tijolo: #D84800; --gelo: #8FD3F2; --led: #FF4234; --led-verde: #5CFF9D;
  --zap: #25D366; --zap-tinta: #062B14;
  --titulo: "Alfa Slab One", "Rockwell", Georgia, serif;
  --texto: "Barlow", "Segoe UI", system-ui, sans-serif;
  --lado: 20px; --largura: 1200px;
  --s-rotulo: 16px; --s-texto: 20px; --s-bloco: 32px; --s-cabeca: 36px; --s-secao: 72px;
  --mola: cubic-bezier(.34, 1.56, .64, 1); --suave: cubic-bezier(.22, .8, .3, 1);
}
@media (min-width: 760px) { :root { --lado: 40px; --s-cabeca: 60px; --s-secao: 136px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--geada); color: var(--tinta); font: 500 17px/1.6 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.travado { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--titulo); font-weight: 400; letter-spacing: -.005em; text-wrap: balance; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 999; padding: 10px 16px; border-radius: 10px; background: var(--malte); color: var(--claro); text-decoration: none; font-weight: 800; }
.pular:focus { top: 12px; }

.miolo { width: 100%; max-width: calc(var(--largura) + var(--lado) * 2); margin: 0 auto; padding: 0 var(--lado); }
.rotulo { font: 800 13px/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tijolo); }
.rotulo-claro { color: var(--ouro); }
.cabeca { display: flex; flex-direction: column; gap: var(--s-rotulo); max-width: 46rem; margin-bottom: var(--s-cabeca); }
.cabeca h2 { font-size: clamp(30px, 4.3vw, 54px); line-height: 1.06; }
.cabeca .cabeca-texto { margin-top: calc(var(--s-texto) - var(--s-rotulo)); font-size: 18px; color: var(--tinta-suave); max-width: 38rem; }
.topo-marco { height: 1px; }

/* ---------- Botões ---------- */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 14px; border: 0; cursor: pointer;
  font: 800 16px/1 var(--texto); text-decoration: none; letter-spacing: .01em; white-space: nowrap; transition: transform .25s var(--mola), box-shadow .25s, background-color .25s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bt:active { transform: scale(.97); }
.bt-grande { min-height: 56px; padding: 0 26px; font-size: 17px; }
.bt-ouro { background: linear-gradient(180deg, #FFD43F, var(--ouro) 55%, #F4AE00); color: var(--malte); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 -2px 0 rgb(120 60 0 / .25) inset, 0 10px 22px -12px rgb(216 120 0 / .9); }
.bt-ouro:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 -2px 0 rgb(120 60 0 / .25) inset, 0 14px 26px -12px rgb(216 120 0 / 1); }
.bt-linha { background: rgb(255 255 255 / .55); color: var(--tinta); box-shadow: 0 0 0 1.5px rgb(42 18 9 / .22) inset; }
.bt-linha:hover { background: #fff; }
.bt-linha-clara { background: rgb(255 246 232 / .06); color: var(--claro); box-shadow: 0 0 0 1.5px rgb(255 246 232 / .26) inset; }
.bt-linha-clara:hover { background: rgb(255 246 232 / .12); }
.bt-escuro { background: var(--malte); color: var(--claro); }
.bt-escuro:hover { background: var(--malte-3); }
.bt-zap { background: var(--zap); color: var(--zap-tinta); box-shadow: 0 -2px 0 rgb(0 0 0 / .15) inset, 0 14px 30px -14px rgb(37 211 102 / .9); }
.bt-zap:hover { transform: translateY(-1px); }
.bt .ic { width: 20px; height: 20px; }

/* ---------- LED de aberto/fechado (como o visor do freezer) ---------- */
.led { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px; border-radius: 8px; background: #120807; color: var(--led);
  font: 800 12.5px/1 var(--texto); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 0 1px rgb(255 255 255 / .06) inset, 0 6px 14px -8px rgb(0 0 0 / .6);
  text-shadow: 0 0 8px currentColor; white-space: nowrap; }
.led i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; box-shadow: 0 0 8px currentColor; animation: led-pisca 2.6s ease-in-out infinite; }
.led.aberto { color: var(--led-verde); }
@keyframes led-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.led-claro { margin-top: 10px; }

/* ---------- Menu ---------- */
.mn { position: sticky; top: 0; z-index: 50; transition: background-color .3s, box-shadow .3s; }
.mn.rolou { background: rgb(237 243 243 / .86); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgb(42 18 9 / .08); }
.mn-miolo { display: flex; align-items: center; gap: 20px; max-width: calc(var(--largura) + var(--lado) * 2); margin: 0 auto; padding: 12px var(--lado); min-height: 68px; }
.mn-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 400 20px/1 var(--titulo); color: var(--tinta); }
.mn-marca img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 4px 12px -6px rgb(120 60 0 / .7); }
.mn-links { display: none; gap: 26px; margin-left: auto; }
.mn-links a { text-decoration: none; font-weight: 600; color: var(--tinta-suave); position: relative; padding: 6px 0; }
.mn-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ambar); scale: 0 1; transform-origin: left; transition: scale .3s var(--suave); }
.mn-links a:hover { color: var(--tinta); } .mn-links a:hover::after { scale: 1 1; }
.mn .led { margin-left: auto; }
.mn-pedido { display: none; min-height: 44px; padding: 0 16px; font-size: 15px; opacity: 0; translate: 0 -6px; pointer-events: none; transition: opacity .3s, translate .3s var(--suave), transform .25s var(--mola); }
.mn-pedido.mostra { opacity: 1; translate: none; pointer-events: auto; }
.mn-conta { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--malte); color: var(--ouro); font-size: 12.5px; display: inline-grid; place-items: center; }
.mn-conta.pula { animation: conta-pula .5s var(--mola); }
@keyframes conta-pula { 0% { scale: 1; } 40% { scale: 1.35; } 100% { scale: 1; } }
@media (min-width: 1020px) { .mn-links { display: flex; } .mn .led { margin-left: 8px; } .mn-pedido { display: inline-flex; } }
@media (max-width: 420px) { .mn-marca span { display: none; } }

/* ---------- 1. Topo: freezer ---------- */
.gl { position: relative; padding: 20px 0 64px; overflow: hidden;
  background: radial-gradient(90% 70% at 85% 30%, #F7FBFB, transparent 70%), linear-gradient(180deg, var(--geada), var(--geada-2)); }
.gl::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(1.4px 1.4px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 70% 80%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 40% 60%, #fff 50%, transparent 51%);
  background-size: 140px 140px, 190px 190px, 90px 90px; }
.gl-miolo { position: relative; display: grid; gap: 36px; max-width: calc(var(--largura) + var(--lado) * 2); margin: 0 auto; padding: 0 var(--lado); }
.gl-texto { display: flex; flex-direction: column; }
.gl-titulo { margin-top: var(--s-rotulo); font-size: clamp(42px, 11.4vw, 88px); line-height: .98; letter-spacing: -.012em; color: var(--tinta); }
.gl-linha { display: inline-block; padding-bottom: .06em; }
.gl-titulo em { font-style: normal; color: var(--tijolo); position: relative; }
.gl-titulo em::after { content: ""; position: absolute; left: .02em; right: .1em; bottom: .02em; height: .14em; border-radius: 99px; background: linear-gradient(90deg, var(--ouro), var(--laranja)); z-index: -1; opacity: .55; }
.gl-sub { margin-top: var(--s-texto); max-width: 34rem; font-size: 18.5px; color: var(--tinta-suave); }
.gl-sub strong { color: var(--tinta); font-weight: 800; }
.gl-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-bloco); }
.gl-caminho { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 26px 0 0; padding: 0; list-style: none; font: 800 14px/1 var(--texto); color: var(--tinta-fraca); letter-spacing: .02em; }
.gl-caminho li { display: inline-flex; align-items: center; gap: 9px; position: relative; transition: color .5s; }
.gl-caminho li + li::before { content: ""; position: absolute; left: -13px; width: 8px; height: 2px; border-radius: 2px; background: rgb(42 18 9 / .2); }
.gl-caminho b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgb(42 18 9 / .07); color: var(--tinta-fraca); font-size: 13px; transition: background-color .5s, color .5s, box-shadow .5s; }
.gl-caminho li.aceso { color: var(--tinta); }
.gl-caminho li.aceso b { background: var(--malte); color: var(--ouro); box-shadow: 0 0 0 3px rgb(255 192 0 / .28); }

.gl-freezer { position: relative; display: flex; flex-direction: column; gap: 18px; }
.gl-tampa { position: relative; padding: 12px; border-radius: 26px; background: linear-gradient(180deg, #2A2624, #141110 60%, #0C0A09);
  box-shadow: 0 1px 0 rgb(255 255 255 / .14) inset, 0 40px 70px -34px rgb(23 10 5 / .75), 0 12px 24px -16px rgb(23 10 5 / .6); }
.gl-painel { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 8px 12px 6px; }
.gl-logo, .gl-logo-img { width: min(62%, 300px); height: auto; aspect-ratio: 800 / 172; }
.gl-logo { position: absolute; opacity: 0; pointer-events: none; }
.gl-logo.anima { position: relative; opacity: 1; }
.gl-logo.anima + .gl-logo-img { display: none; }
.gl-display { display: flex; align-items: flex-start; gap: 4px; padding: 8px 12px; border-radius: 10px; background: #050303; box-shadow: 0 0 0 1px rgb(255 255 255 / .05) inset, 0 0 24px -6px rgb(255 66 52 / .35); }
.gl-digitos { width: 92px; height: auto; aspect-ratio: 132 / 52; }
.gl-digitos .seg { fill: #2A0B08; transition: fill .2s; }
.gl-digitos .seg.on { fill: var(--led); filter: drop-shadow(0 0 3px rgb(255 66 52 / .8)); }
.gl-grau { font: 800 13px/1 var(--texto); color: var(--led); text-shadow: 0 0 6px var(--led); margin-top: 2px; }
.gl-vidro { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 5 / 6; background: #CFE0E4; touch-action: pan-y;
  box-shadow: 0 0 0 2px #0A0807, 0 0 0 4px rgb(255 255 255 / .06); cursor: crosshair; }
.gl-vidro picture, .gl-foto, .gl-geada { position: absolute; inset: 0; width: 100%; height: 100%; }
.gl-foto { object-fit: cover; }
.gl-geada { pointer-events: none; }
.gl-brilho { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .22) 42%, transparent 50%, transparent 64%, rgb(255 255 255 / .1) 70%, transparent 76%); }
.gl-dica { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px;
  background: rgb(23 10 5 / .78); color: var(--claro); font: 800 13.5px/1 var(--texto); letter-spacing: .02em; white-space: nowrap; pointer-events: none; backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .5s; }
.gl-dica .ic { width: 16px; height: 16px; color: var(--gelo); }
.gl-dica.mostra { opacity: 1; }
.gl-puxador { position: absolute; left: 50%; bottom: -7px; translate: -50% 0; width: 34%; height: 10px; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #3A3532, #191514); box-shadow: 0 6px 10px -6px rgb(0 0 0 / .6); }
.gl-fatos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--tinta-suave); }
.gl-fatos li { display: inline-flex; align-items: center; gap: 8px; }
.gl-fatos b { color: var(--tinta); font-weight: 800; }
.gl-fatos .ic { width: 18px; height: 18px; color: var(--tijolo); }
@media (min-width: 640px) { .gl-vidro { aspect-ratio: 3 / 2; } }
@media (min-width: 960px) {
  .gl { padding: 28px 0 72px; }
  .gl-miolo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 56px; min-height: min(640px, calc(100svh - 150px)); }
  .gl-titulo { font-size: clamp(52px, 5.6vw, 84px); }
  .gl-fatos { justify-content: flex-start; padding-left: 8px; }
}
@media (min-width: 960px) and (max-height: 820px) { .gl-titulo { font-size: clamp(48px, 5vw, 70px); } .gl-sub { font-size: 17px; } .gl-botoes { margin-top: 26px; } }

/* ---------- 2. Balcão (seção escura) ---------- */
.bc { background: var(--malte); color: var(--claro); padding: var(--s-secao) 0; }
.tem-fundo { position: relative; isolation: isolate; }
.tem-fundo > :not(.fundo-vivo) { position: relative; z-index: 1; }
.fundo-vivo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fundo-vivo canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; }
.fundo-vivo canvas.pronto { opacity: 1; }

/* lista completa */
.ct { max-width: calc(var(--largura) + var(--lado) * 2); margin: var(--s-secao) auto 0; padding: 0 var(--lado); }
.ct-cabeca { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.ct-titulo { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; color: var(--claro); }
.ct-nota { font-size: 15px; color: var(--claro-fraco); }
.ct-filtros { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin: 0 calc(var(--lado) * -1); padding-left: var(--lado); padding-right: var(--lado); scrollbar-width: none; }
.ct-filtros::-webkit-scrollbar { display: none; }
.ct-filtro { flex: none; min-height: 42px; padding: 0 16px; border-radius: 12px; border: 0; cursor: pointer; background: rgb(255 246 232 / .06); color: var(--claro-suave);
  box-shadow: 0 0 0 1px rgb(255 246 232 / .14) inset; font: 800 14.5px/1 var(--texto); transition: background-color .25s, color .25s; }
.ct-filtro:hover { color: var(--claro); background: rgb(255 246 232 / .1); }
.ct-filtro[aria-selected="true"] { background: var(--ouro); color: var(--malte); box-shadow: none; }
.ct-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (min-width: 700px) { .ct-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .ct-filtros { margin: 0; padding-left: 2px; padding-right: 2px; flex-wrap: wrap; } }
@media (min-width: 1020px) { .ct-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ct-card { padding: 5px; border-radius: 24px; background: rgb(255 246 232 / .045); box-shadow: 0 0 0 1px rgb(255 246 232 / .07) inset; display: flex; }
.ct-miolo { flex: 1; display: flex; flex-direction: column; border-radius: 19px; overflow: hidden; background: linear-gradient(180deg, #2B150C, #1D0D07); box-shadow: 0 1px 0 rgb(255 246 232 / .08) inset, 0 24px 40px -28px #000; }
@supports (content-visibility: auto) { .ct-card { content-visibility: auto; contain-intrinsic-size: auto 420px; } }
.ct-foto { position: relative; aspect-ratio: 4 / 4.2; overflow: hidden; }
.ct-foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--suave); }
.ct-card:hover .ct-foto img { scale: 1.05; }
.ct-gelada { position: absolute; inset: auto 0 0 0; height: 46%; pointer-events: none; background: linear-gradient(0deg, rgb(200 232 244 / .55), transparent); mix-blend-mode: screen; }
.ct-frio { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px 6px 7px; border-radius: 9px; background: rgb(10 22 28 / .62); color: #DDF3FC;
  font: 800 11.5px/1 var(--texto); letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgb(143 211 242 / .35) inset; }
.ct-frio .ic { width: 14px; height: 14px; color: var(--gelo); animation: floco-gira 9s linear infinite; }
@keyframes floco-gira { to { rotate: 360deg; } }
.ct-info { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 14px; flex: 1; }
.ct-info h4 { margin: 0; font: 800 16.5px/1.2 var(--texto); color: var(--claro); }
.ct-det { font-size: 14px; color: var(--claro-fraco); line-height: 1.35; }
.ct-baixo { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 12px; }
.ct-preco { font: 400 21px/1 var(--titulo); color: var(--ouro); font-variant-numeric: tabular-nums; }
.ct-preco small { display: block; margin-top: 5px; font: 600 11.5px/1 var(--texto); color: var(--claro-fraco); letter-spacing: .02em; }
.ct-consulte { font: 800 15px/1 var(--texto); color: var(--claro-suave); }
.ct-acoes { display: flex; gap: 8px; align-items: center; }
.ct-por { flex: 1; min-height: 44px; padding: 0 12px; font-size: 14.5px; border-radius: 12px; }
.ct-perg { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--zap); background: rgb(10 6 4 / .62); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgb(37 211 102 / .45) inset; transition: background-color .25s; }
.ct-perg:hover { background: rgb(10 6 4 / .85); }
.qt { flex: 1; display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-radius: 12px; background: var(--ouro); color: var(--malte); }
.qt button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: inherit; }
.qt button .ic { width: 18px; height: 18px; }
.qt output { font: 800 16px/1 var(--texto); min-width: 2ch; text-align: center; }
.ct-mais { display: flex; justify-content: center; margin-top: 28px; }
@media (max-width: 420px) { .ct-info { padding: 12px 10px; } .ct-por { font-size: 14px; padding: 0 8px; gap: 6px; } .ct-por .ic { width: 17px; height: 17px; } }

/* ---------- 3. A frase que gela ---------- */
.fr { background: var(--espuma); padding: var(--s-secao) 0; overflow: hidden; }
.fr-miolo { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 20px; max-width: calc(1040px + var(--lado) * 2); margin: 0 auto; padding: 0 var(--lado); align-items: center; }
.fr-frase { font: 400 clamp(27px, 4.4vw, 58px)/1.14 var(--titulo); letter-spacing: -.008em; text-wrap: pretty; }
.fr-p { color: #B87414; transition: color .35s; }
.fr-p.gelou { color: var(--tinta); }
.fr-frase em { font-style: normal; }
.fr-frase em .fr-p.gelou, .fr-frase em.gelou { color: #1C77A8; text-shadow: 0 0 22px rgb(143 211 242 / .7); }
.fr-termo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; align-self: stretch; }
.fr-termo-tubo { position: relative; flex: 1; width: 14px; min-height: 160px; border-radius: 10px; background: rgb(42 18 9 / .08); box-shadow: 0 0 0 1.5px rgb(42 18 9 / .16) inset; overflow: hidden; }
.fr-termo-tubo i { position: absolute; left: 3px; right: 3px; bottom: 3px; top: 3px; border-radius: 8px; background: linear-gradient(0deg, #1C77A8, var(--gelo) 40%, var(--laranja) 80%, var(--tijolo)); background-size: 100% 250%; background-position: 0 100%; transform-origin: bottom; }
.fr-termo-valor { font: 800 15px/1 var(--texto); color: var(--tinta); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; }
@media (min-width: 760px) { .fr-miolo { grid-template-columns: 48px minmax(0, 1fr); gap: 40px; } .fr-termo-tubo { width: 18px; } }

/* ---------- 4. Provas (seção escura) ---------- */
.pv { background: var(--malte-2); color: var(--claro); padding: var(--s-secao) 0; }
.pv .cabeca h2 { color: var(--claro); }
.pv .cabeca-texto { color: var(--claro-suave); }
.pv-mesa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 760px) { .pv-mesa { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; } }
@media (min-width: 1100px) { .pv-mesa { gap: 28px 64px; padding: 0 40px; } .pv-bolacha:nth-child(3n+2) { translate: 0 40px; } }
.pv-bolacha { margin: 0; aspect-ratio: 1; display: grid; perspective: 900px; }
.pv-disco { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 17%; text-align: center; border-radius: 50%; position: relative;
  rotate: var(--giro, 0deg); box-shadow: 0 22px 34px -20px #000; transition: rotate .6s var(--mola), translate .6s var(--mola); }
.pv-bolacha:hover .pv-disco { rotate: 0deg; translate: 0 -4px; }
.pv-disco blockquote { margin: 0; font: 600 clamp(12.5px, 1.5vw, 17px)/1.35 var(--texto); }
@media (min-width: 760px) { .pv-bolacha { max-width: 290px; width: 100%; justify-self: center; } }
.pv-disco figcaption { display: inline-flex; align-items: center; gap: 6px; font: 800 10.5px/1.1 var(--texto); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.pv-disco figcaption .ic { width: 14px; height: 14px; }
/* 3 materiais diferentes, nenhum vizinho igual */
.pv-nota .pv-disco { --giro: -6deg; background: radial-gradient(circle at 40% 30%, #FFD84A, var(--ouro) 55%, #E09A00); color: var(--malte); -webkit-mask: url(img/bolacha.svg) center / 100% 100% no-repeat; mask: url(img/bolacha.svg) center / 100% 100% no-repeat; border-radius: 0; }
.pv-nota .pv-disco::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1.5px dashed rgb(23 10 5 / .35); }
.pv-numero { font: 400 clamp(40px, 5vw, 58px)/1 var(--titulo); }
.pv-estrelas { display: flex; gap: 2px; } .pv-estrelas .ic { width: 15px; height: 15px; }
.pv-fonte { display: inline-flex; align-items: center; gap: 6px; font: 800 11px/1.2 var(--texto); letter-spacing: .06em; text-transform: uppercase; }
.pv-fonte .ic { width: 14px; height: 14px; }
.pv-google .pv-disco { --giro: 5deg; background: radial-gradient(circle at 50% 40%, #FFFDF8, var(--espuma) 70%, var(--espuma-2)); color: var(--tinta); }
.pv-google .pv-disco::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; box-shadow: 0 0 0 1px rgb(42 18 9 / .12) inset, 0 0 0 5px var(--espuma) inset, 0 0 0 6px rgb(216 72 0 / .35) inset; }
.pv-g2 .pv-disco { --giro: -4deg; }
.pv-zap .pv-disco { --giro: 7deg; background: radial-gradient(circle at 40% 30%, #2E1A10, #1A0D07 70%); color: var(--claro); box-shadow: 0 0 0 1px rgb(255 192 0 / .25) inset, 0 0 0 7px #1A0D07 inset, 0 0 0 8px rgb(37 211 102 / .45) inset, 0 22px 34px -20px #000; }
.pv-zap figcaption { color: var(--zap); opacity: 1; }
.pv-z2 .pv-disco { --giro: -8deg; } .pv-z3 .pv-disco { --giro: 3deg; }

.pv-dupla { display: grid; gap: 40px; margin-top: calc(var(--s-secao) * .7); align-items: center; }
@media (min-width: 900px) { .pv-dupla { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 72px; } }
.pv-story { margin: 0; display: flex; flex-direction: column; gap: 14px; max-width: 340px; justify-self: center; width: 100%; }
.pv-story-tela { position: relative; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(90% 60% at 50% 0%, #2A2522, #0E0B0A 70%); padding-bottom: 26px; box-shadow: 0 0 0 8px #0B0605, 0 0 0 9px rgb(255 255 255 / .08), 0 40px 60px -30px #000; }
.pv-story-tela img { width: 100%; height: auto; aspect-ratio: 494 / 332; object-fit: cover; -webkit-mask: linear-gradient(180deg, #000 72%, transparent); mask: linear-gradient(180deg, #000 72%, transparent); }
.pv-enquete { position: relative; margin: 8% 10% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pv-enquete > p:first-child { font: 400 21px/1.15 var(--titulo); color: #fff; text-shadow: 0 2px 10px rgb(0 0 0 / .8); }
.pv-enquete-botoes { display: flex; width: 100%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 10px 20px -10px #000; }
.pv-enquete-botoes button { flex: 1; min-height: 46px; border: 0; background: #fff; cursor: pointer; font: 800 16px/1 var(--texto); letter-spacing: .04em; position: relative; transition: background-color .3s; }
.pv-enquete-botoes button[data-voto="sim"] { color: #13A884; } .pv-enquete-botoes button[data-voto="nao"] { color: #E0457B; box-shadow: 1px 0 0 #E6E6E6 inset; }
.pv-enquete-botoes button.escolhido { background: #F2FBF8; }
.pv-resposta { min-height: 2.6em; font: 800 14.5px/1.3 var(--texto); color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / .9); }
.pv-story figcaption { font-size: 14.5px; color: var(--claro-suave); text-align: center; }
.pv-story figcaption b { color: var(--led); }
.pv-origem h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; }
.pv-origem > p { margin-top: var(--s-texto); color: var(--claro-suave); max-width: 34rem; }
.pv-tampas { display: grid; gap: 14px; margin: var(--s-bloco) 0 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .pv-tampas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } }
.pv-tampas li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px; border-radius: 18px; background: rgb(255 246 232 / .04); box-shadow: 0 0 0 1px rgb(255 246 232 / .08) inset; }
.pv-tampas b { font: 800 16.5px/1.2 var(--texto); align-self: end; }
.pv-tampas li > span:last-child { grid-column: 2; font-size: 14.5px; line-height: 1.4; color: var(--claro-fraco); align-self: start; }
.pv-tampa { grid-row: span 2; width: 56px; height: 56px; display: grid; place-items: center; position: relative; color: var(--malte); }
.pv-tampa::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 38% 30%, #FFE27A, var(--ouro) 50%, #C98A00); -webkit-mask: url(img/tampa.svg) center / contain no-repeat; mask: url(img/tampa.svg) center / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / .5)); }
.pv-tampa svg { position: relative; width: 24px; height: 24px; }
.pv-tampas li:nth-child(2) .pv-tampa::before { background: radial-gradient(circle at 38% 30%, #FFB07A, var(--laranja) 50%, #B33A00); }
.pv-tampas li:nth-child(3) .pv-tampa::before { background: radial-gradient(circle at 38% 30%, #FFFFFF, #D8DEE0 50%, #8E989C); }
.pv-tampas li:nth-child(4) .pv-tampa::before { background: radial-gradient(circle at 38% 30%, #D9F2FC, var(--gelo) 50%, #3C8DB4); }
.pv-tampa.abre { animation: tampa-abre .9s var(--mola) both; animation-delay: var(--atraso, 0s); }
@keyframes tampa-abre { 0% { rotate: -200deg; scale: .4; opacity: 0; } 70% { opacity: 1; } 100% { rotate: 0deg; scale: 1; } }

/* ---------- 5. Onde fica ---------- */
.of { background: var(--geada); padding: var(--s-secao) 0; }
.of-grade { display: grid; gap: 40px; }
@media (min-width: 960px) { .of-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: start; } }
.of-texto { display: flex; flex-direction: column; gap: var(--s-rotulo); }
.of-texto h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; }
.of-texto .cabeca-texto { margin-top: calc(var(--s-texto) - var(--s-rotulo)); font-size: 18px; color: var(--tinta-suave); }
.of-dados { margin: calc(var(--s-bloco) - var(--s-rotulo)) 0 0; display: grid; gap: 0; }
.of-dados > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid rgb(42 18 9 / .1); }
.of-dados > div:last-child { border-bottom: 1px solid rgb(42 18 9 / .1); }
.of-dados dt { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; color: var(--tinta-fraca); font-size: 14.5px; letter-spacing: .02em; }
.of-dados dt .ic { width: 18px; height: 18px; color: var(--tijolo); }
.of-dados dd { margin: 0; font-weight: 600; }
.of-dados .led-claro { display: flex; width: fit-content; }
.of-dados a { text-decoration-color: rgb(216 72 0 / .4); text-underline-offset: 3px; }
@media (max-width: 420px) { .of-dados > div { grid-template-columns: 1fr; gap: 4px; } }
.of-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(var(--s-bloco) - var(--s-rotulo)); }
.of-fotos { display: flex; flex-direction: column; gap: 16px; }
.of-fachada { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.of-fachada picture, .of-fachada img { border-radius: 22px; overflow: hidden; width: 100%; height: auto; aspect-ratio: 1400 / 539; object-fit: cover; box-shadow: 0 24px 44px -30px rgb(23 10 5 / .7); }
.of-fachada figcaption { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--tinta-suave); }
.of-placa { flex: none; display: grid; place-items: center; width: 44px; height: 32px; border-radius: 6px; background: #fff; color: #0B3C8C; font: 400 18px/1 var(--titulo); box-shadow: 0 0 0 2px #0B3C8C inset, 0 4px 8px -4px rgb(0 0 0 / .4); }
.of-mapa { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; display: grid; place-items: center;
  background: repeating-linear-gradient(0deg, transparent 0 38px, rgb(42 18 9 / .06) 38px 40px), repeating-linear-gradient(90deg, transparent 0 38px, rgb(42 18 9 / .06) 38px 40px), var(--geada-2); }
.of-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 6. Como pedir (a lata viajando) ---------- */
.cf { background: var(--malte); color: var(--claro); padding: var(--s-secao) 0; }
.cf .cabeca h2 { color: var(--claro); }
.cf-grade { display: grid; gap: 40px; }
.cf-passos { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.cf-passo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 22px 20px; border-radius: 22px; background: rgb(255 246 232 / .035); box-shadow: 0 0 0 1px rgb(255 246 232 / .07) inset; transition: background-color .5s, box-shadow .5s; }
.cf-num { font: 400 40px/1 var(--titulo); color: rgb(255 192 0 / .35); transition: color .5s; min-width: 2.2ch; }
.cf-passo h3 { font-size: 22px; line-height: 1.15; margin-bottom: 8px; }
.cf-passo p { color: var(--claro-fraco); font-size: 16.5px; transition: color .5s; }
.cf-passo.ativo { background: rgb(255 192 0 / .07); box-shadow: 0 0 0 1.5px rgb(255 192 0 / .5) inset; }
.cf-passo.ativo .cf-num { color: var(--ouro); }
.cf-passo.ativo p { color: var(--claro-suave); }
.cf-mini { grid-column: 1 / -1; margin-top: 6px; border-radius: 16px; background: linear-gradient(180deg, #2B150C, #1D0D07); padding: 10px; }
.cf-mini svg { width: 100%; height: auto; max-height: 220px; }
.cf-palco { display: none; }
@media (min-width: 960px) {
  .cf-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: start; }
  .cf-passos { gap: 18px; padding: 8vh 0 18vh; }
  .cf-passo { min-height: 34vh; align-content: center; padding: 28px 28px; }
  .cf-palco { display: block; position: sticky; top: calc(50vh - 230px); }
  .cf-mini { display: none; }
}
.cf-quadro { position: relative; height: 460px; border-radius: 30px; padding: 22px; background: radial-gradient(80% 70% at 50% 40%, #34190E, #1B0C06); box-shadow: 0 0 0 1px rgb(255 192 0 / .16) inset, 0 40px 70px -40px #000; overflow: hidden; }
.cf-quadro .cf-cena { position: absolute; left: 22px; right: 22px; top: 22px; bottom: 70px; width: calc(100% - 44px); height: calc(100% - 92px); opacity: 0; transition: opacity .5s; }
.cf-quadro .cf-cena.ativa { opacity: 1; }
.cf-legenda { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid rgb(255 246 232 / .1); font: 800 15px/1 var(--texto); }
.cf-legenda b { color: var(--ouro); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
/* desenhos das cenas */
.cf-papel { fill: #FFF8EC; } .cf-tracejado { stroke: rgb(42 18 9 / .3); stroke-dasharray: 4 4; stroke-width: 1.5; }
.cf-t-cab { font: 400 15px var(--titulo); fill: var(--tinta); letter-spacing: .06em; }
.cf-t { font: 600 14px var(--texto); fill: var(--tinta); } .cf-dir { text-anchor: end; }
.cf-t-total { font: 800 15px var(--texto); fill: var(--tijolo); }
.cf-mao { fill: #F2C9A0; stroke: #8A5A35; stroke-width: 1.5; } .cf-toque { fill: rgb(255 192 0 / .35); }
.cf-celular { fill: #0D0807; stroke: rgb(255 255 255 / .12); } .cf-tela { fill: #ECE5DA; } .cf-zap-topo { fill: #075E54; }
.cf-ouro { fill: var(--ouro); } .cf-t-zap { font: 800 12px var(--texto); fill: #fff; }
.cf-balao-fundo { fill: #DCF8C6; } .cf-t-b { font: 600 11.5px var(--texto); fill: #1B2B1E; }
.cf-vistos { fill: none; stroke: #8A9A8E; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.cf-campo { fill: #fff; } .cf-enviar { fill: #00A884; } .cf-seta { fill: #fff; }
.cf-freezer { fill: #1A1614; stroke: rgb(255 255 255 / .1); } .cf-visor { fill: #050303; } .cf-t-visor { font: 800 15px var(--texto); fill: var(--led); text-anchor: middle; letter-spacing: .08em; }
.cf-sombra { fill: #000; opacity: .4; } .cf-tampa-cor { fill: #2E2926; } .cf-puxador { fill: #4A433F; }
.cf-lata-a { fill: #D7DDE0; } .cf-lata-b { fill: var(--ouro); } .cf-faixa { fill: var(--tijolo); opacity: .85; } .cf-gota { fill: #fff; opacity: .8; }
.cf-flocos path { fill: none; stroke: var(--gelo); stroke-width: 2; stroke-linecap: round; }
.cf-porta { fill: #5A2E17; stroke: #2A1209; stroke-width: 3; } .cf-macaneta { fill: var(--ouro); } .cf-chao { fill: rgb(255 246 232 / .12); }
.cf-bolsa-cor { fill: var(--ouro); } .cf-alca { fill: none; stroke: #2A1209; stroke-width: 6; stroke-linecap: round; } .cf-bolsa-selo { fill: var(--malte); } .cf-t-selo { font: 400 14px var(--titulo); fill: var(--ouro); text-anchor: middle; }
.cf-msg-fundo { fill: #fff; } .cf-t-msg { font: 600 14px var(--texto); fill: #1B2B1E; } .cf-t-real { font: 800 9.5px var(--texto); fill: #00A884; letter-spacing: .08em; text-transform: uppercase; }
/* movimentos de cada cena (só a cena ativa se mexe) */
.cf-linha { opacity: 0; }
.ativa .cf-linha, .cf-mini .cf-linha { animation: cf-escreve 6s var(--suave) infinite; }
.cf-d1 { animation-delay: .5s !important; } .cf-d2 { animation-delay: 1s !important; } .cf-d3 { animation-delay: 1.5s !important; }
@keyframes cf-escreve { 0% { opacity: 0; transform: translateX(-8px); } 8%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.cf-dedo { transform-box: fill-box; }
.ativa .cf-dedo, .cf-mini .cf-dedo { animation: cf-toque 6s ease-in-out infinite; }
@keyframes cf-toque { 0%, 30% { transform: translate(30px, 30px); opacity: 0; } 40% { transform: none; opacity: 1; } 45% { transform: scale(.92); } 50%, 80% { transform: none; opacity: 1; } 90%, 100% { opacity: 0; } }
.cf-balao { transform-box: fill-box; transform-origin: 100% 100%; }
.ativa .cf-balao, .cf-mini .cf-balao { animation: cf-sobe 5s var(--mola) infinite; }
@keyframes cf-sobe { 0%, 10% { transform: translateY(40px) scale(.9); opacity: 0; } 24%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.ativa .cf-vistos, .cf-mini .cf-vistos { animation: cf-azul 5s infinite; }
@keyframes cf-azul { 0%, 45% { stroke: #8A9A8E; } 55%, 100% { stroke: #34B7F1; } }
.cf-enviar { transform-box: fill-box; transform-origin: center; }
.ativa .cf-enviar, .cf-mini .cf-enviar { animation: cf-aperta 5s infinite; }
@keyframes cf-aperta { 0%, 14% { transform: none; } 18% { transform: scale(.82); } 24%, 100% { transform: none; } }
.cf-tampa-f { transform-box: fill-box; transform-origin: 0% 100%; }
.ativa .cf-tampa-f, .cf-mini .cf-tampa-f { animation: cf-abre 5.5s var(--suave) infinite; }
@keyframes cf-abre { 0%, 6% { transform: none; } 22%, 82% { transform: rotate(-30deg); } 96%, 100% { transform: none; } }
.cf-lata { transform: translateY(30px); }
.ativa .cf-lata, .cf-mini .cf-lata { animation: cf-lata 5.5s var(--mola) infinite; }
.cf-quadro .cf-d1.cf-lata, .cf-mini .cf-d1.cf-lata { animation-delay: .25s !important; } .cf-quadro .cf-d2.cf-lata, .cf-mini .cf-d2.cf-lata { animation-delay: .5s !important; }
@keyframes cf-lata { 0%, 16% { transform: translateY(30px); opacity: 1; } 36%, 78% { transform: translateY(-82px); opacity: 1; } 94%, 100% { transform: translateY(30px); opacity: 1; } }
.cf-flocos { transform-box: fill-box; transform-origin: center; }
.ativa .cf-flocos, .cf-mini .cf-flocos { animation: cf-flocos 5.5s ease-in-out infinite; }
@keyframes cf-flocos { 0%, 20% { opacity: 0; } 40%, 80% { opacity: 1; } 100% { opacity: 0; } }
.cf-bolsa { transform-box: fill-box; }
.ativa .cf-bolsa, .cf-mini .cf-bolsa { animation: cf-chega 6s var(--mola) infinite; }
@keyframes cf-chega { 0% { transform: translateX(160px); opacity: 0; } 18%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.cf-msg { transform-box: fill-box; transform-origin: 10% 100%; }
.ativa .cf-msg, .cf-mini .cf-msg { animation: cf-msg 6s var(--mola) infinite; }
@keyframes cf-msg { 0%, 30% { transform: scale(.6); opacity: 0; } 42%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }

/* ---------- 7. Dúvidas ---------- */
.dv { background: var(--espuma); padding: var(--s-secao) 0; }
.dv-grade { display: grid; gap: 8px; }
@media (min-width: 960px) { .dv-grade { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; } .dv .cabeca { position: sticky; top: 110px; } }
.dv-lista { display: grid; gap: 10px; }
.dv-item { border-radius: 18px; background: #FFFBF3; box-shadow: 0 0 0 1px rgb(42 18 9 / .09) inset, 0 10px 24px -22px rgb(42 18 9 / .6); transition: box-shadow .3s; }
.dv-item[open] { box-shadow: 0 0 0 1.5px rgb(216 72 0 / .45) inset, 0 16px 30px -24px rgb(42 18 9 / .7); }
.dv-item summary { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; cursor: pointer; list-style: none; font: 800 17.5px/1.3 var(--texto); }
.dv-item summary::-webkit-details-marker { display: none; }
.dv-tampinha { flex: none; width: 28px; height: 28px; position: relative; transition: rotate .6s var(--mola), translate .6s var(--mola); }
.dv-tampinha::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 38% 30%, #FFE27A, var(--ouro) 50%, #C98A00); -webkit-mask: url(img/tampa.svg) center / contain no-repeat; mask: url(img/tampa.svg) center / contain no-repeat; }
.dv-tampinha::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; translate: -50% -50%;
  background: linear-gradient(var(--malte), var(--malte)) center / 100% 2.4px no-repeat, linear-gradient(var(--malte), var(--malte)) center / 2.4px 100% no-repeat; }
.dv-item[open] .dv-tampinha { rotate: 135deg; translate: 0 -2px; }
.dv-item summary .dv-tampinha + * { flex: 1; }
.dv-item p { padding: 0 18px 18px 60px; color: var(--tinta-suave); font-size: 16.5px; }

/* ---------- 8. Pedido (seção escura, fundo mais vivo) ---------- */
.pd { background: var(--malte); color: var(--claro); padding: var(--s-secao) 0; }
.pd .cabeca h2 { color: var(--claro); }
.pd-grade { display: grid; gap: 32px; }
@media (min-width: 960px) { .pd-grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: start; } .pd-comanda { position: sticky; top: 100px; } }
.pd-form { display: flex; flex-direction: column; gap: 18px; }
.pd-bloco { margin: 0; padding: 20px; border: 0; border-radius: 22px; background: rgb(23 10 5 / .55); box-shadow: 0 0 0 1px rgb(255 246 232 / .1) inset; backdrop-filter: blur(8px); min-width: 0; }
.pd-bloco legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 0; font: 400 20px/1.1 var(--titulo); }
.pd-bloco legend + * { clear: both; }
.pd-bloco legend b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--ouro); color: var(--malte); font: 800 15px/1 var(--texto); }
.pd-sacola { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pd-sacola li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 8px 8px 8px; border-radius: 14px; background: rgb(255 246 232 / .05); animation: entra .45s var(--mola); }
@keyframes entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.pd-sacola img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.pd-sacola .pd-nome { font-weight: 800; line-height: 1.2; } .pd-sacola .pd-nome small { display: block; font-weight: 600; font-size: 13.5px; color: var(--claro-fraco); }
.pd-sacola .qt { flex: none; min-height: 40px; width: 120px; }
.pd-sacola .qt button { width: 40px; height: 40px; }
.pd-vazio { font-size: 15.5px; color: var(--claro-suave); }
.pd-vazio a { color: var(--ouro); }
.pd-rapido { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pd-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 13px 0 10px; border-radius: 11px; border: 0; cursor: pointer; background: rgb(255 246 232 / .07); color: var(--claro);
  box-shadow: 0 0 0 1px rgb(255 246 232 / .16) inset; font: 800 14px/1 var(--texto); transition: background-color .25s; }
.pd-chip:hover { background: rgb(255 192 0 / .16); }
.pd-chip .ic { width: 15px; height: 15px; color: var(--ouro); }
.pd-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-opcao { position: relative; cursor: pointer; }
.pd-opcao input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pd-opcao span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border-radius: 14px; background: rgb(255 246 232 / .05); box-shadow: 0 0 0 1px rgb(255 246 232 / .14) inset; transition: background-color .25s, box-shadow .25s; }
.pd-opcao b { font-weight: 800; } .pd-opcao small { font-size: 13.5px; color: var(--claro-fraco); }
.pd-opcao input:checked + span { background: rgb(255 192 0 / .12); box-shadow: 0 0 0 2px var(--ouro) inset; }
.pd-opcao input:focus-visible + span { outline: 3px solid var(--ambar); outline-offset: 2px; }
.pd-campos { display: grid; gap: 12px; margin-top: 14px; }
.pd-bloco:last-of-type .pd-campos, .pd-bloco:nth-of-type(3) .pd-campos { margin-top: 0; }
@media (min-width: 560px) { .pd-campos { grid-template-columns: 1fr 1fr; } .pd-largo { grid-column: 1 / -1; } }
.pd-campo { display: flex; flex-direction: column; gap: 7px; font: 800 14px/1 var(--texto); color: var(--claro-suave); min-width: 0; }
.pd-campo small { font-weight: 600; color: var(--claro-fraco); }
.pd-campo input { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 12px; border: 0; background: rgb(255 246 232 / .08); color: var(--claro); box-shadow: 0 0 0 1px rgb(255 246 232 / .18) inset;
  font: 600 16px/1 var(--texto); transition: box-shadow .25s, background-color .25s; }
.pd-campo input::placeholder { color: rgb(255 246 232 / .4); }
.pd-campo input:focus { outline: none; background: rgb(255 246 232 / .12); box-shadow: 0 0 0 2px var(--ouro) inset; }
.pd-endereco-fora { display: none; }
.pd-aviso { font-size: 14.5px; color: var(--claro-fraco); }
.pd-enviar { width: 100%; }
.pd-comanda { justify-self: center; width: 100%; max-width: 380px; }
.pd-papel { position: relative; padding: 24px 22px 34px; background: #FFF8EC; color: var(--tinta); border-radius: 6px 6px 0 0; rotate: 1.2deg; box-shadow: 0 30px 50px -30px #000;
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgb(42 18 9 / .05) 27px 28px); }
.pd-papel::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(-45deg, transparent 6px, #FFF8EC 6px) 0 0 / 12px 10px repeat-x, linear-gradient(45deg, transparent 6px, #FFF8EC 6px) 0 0 / 12px 10px repeat-x; }
.pd-c-topo { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1.5px dashed rgb(42 18 9 / .3); }
.pd-c-topo img { width: 40px; height: 40px; border-radius: 50%; }
.pd-c-topo span { font: 400 17px/1.05 var(--titulo); } .pd-c-topo small { display: block; font: 600 12px/1.3 var(--texto); color: var(--tinta-fraca); }
.pd-c-num { margin-left: auto; font: 800 12.5px/1 var(--texto); color: var(--tijolo); letter-spacing: .06em; }
.pd-c-itens { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; min-height: 60px; font: 600 15px/1.35 var(--texto); }
.pd-c-itens li { display: flex; justify-content: space-between; gap: 12px; animation: imprime .4s var(--suave); }
.pd-c-itens li span { min-width: 0; overflow-wrap: anywhere; }
.pd-c-itens li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-c-vazio { color: var(--tinta-fraca); font-style: italic; }
@keyframes imprime { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
.pd-c-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed rgb(42 18 9 / .3); font-weight: 800; }
.pd-c-total b { font: 400 22px/1 var(--titulo); color: var(--tijolo); font-variant-numeric: tabular-nums; }
.pd-c-entrega, .pd-c-nome { margin-top: 10px; font-size: 14.5px; color: var(--tinta-suave); overflow-wrap: anywhere; }
.pd-c-entrega i, .pd-c-nome i { color: var(--tinta-fraca); }
.pd-c-carimbo { position: absolute; right: 16px; bottom: 30px; padding: 6px 10px; border: 3px solid #1E8A4C; border-radius: 8px; color: #1E8A4C; font: 400 14px/1 var(--titulo); letter-spacing: .04em;
  rotate: -10deg; opacity: 0; scale: 1.15; transition: opacity .3s, scale .4s var(--mola); mix-blend-mode: multiply; }
.pd-c-carimbo.mostra { opacity: .85; scale: 1; }

/* ---------- Rodapé (claro) ---------- */
.rd { background: var(--espuma); padding: 64px 0 120px; color: var(--tinta); }
@media (min-width: 760px) { .rd { padding-bottom: 48px; } }
.rd-grade { display: grid; gap: 28px; }
@media (min-width: 760px) { .rd-grade { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; } }
.rd-marca { display: flex; align-items: center; gap: 16px; }
.rd-marca img { width: 84px; height: 84px; border-radius: 50%; }
.rd-marca b { font: 400 22px/1.2 var(--titulo); }
.rd-col { display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; color: var(--tinta-suave); }
.rd-col a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; font-weight: 600; color: var(--tinta); }
.rd-col a:hover { color: var(--tijolo); }
.rd-col .ic { width: 18px; height: 18px; color: var(--tijolo); }
.rd-tit { font: 800 12.5px/1 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: var(--tijolo); margin-bottom: 6px; }
.rd-lei { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgb(42 18 9 / .12); display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--tinta-fraca); }
.rd-aviso { font-size: 15px; color: var(--tinta); }
.rd-feito { display: inline-flex; align-items: center; gap: 8px; }
.rd-feito a { display: inline-flex; align-items: center; min-height: 44px; }
.rd-feito img { width: 70px; height: auto; }

/* ---------- Barra fixa do celular ---------- */
.bf { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgb(23 10 5 / .94); backdrop-filter: blur(12px); box-shadow: 0 -10px 30px -12px rgb(0 0 0 / .5); }
.bf a { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; border-radius: 13px; color: var(--claro); text-decoration: none; font: 800 12px/1 var(--texto); background: rgb(255 246 232 / .06); }
.bf .ic { width: 20px; height: 20px; }
.bf .bf-zap { flex-direction: row; gap: 8px; background: var(--zap); color: var(--zap-tinta); font-size: 15px; }
@media (min-width: 760px) { .bf { display: none; } }
@media (max-width: 759px) { body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } }

/* ---------- Aviso de item no pedido ---------- */
.aviso-pedido { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 70; translate: -50% 20px; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--malte); color: var(--claro);
  font: 600 15px/1.3 var(--texto); box-shadow: 0 20px 40px -16px #000, 0 0 0 1px rgb(255 192 0 / .3) inset; transition: opacity .3s, translate .4s var(--mola); }
.aviso-pedido.mostra { opacity: 1; translate: -50% 0; pointer-events: auto; }
.aviso-pedido a { flex: none; min-height: 38px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; background: var(--ouro); color: var(--malte); font-weight: 800; text-decoration: none; }
@media (min-width: 760px) { .aviso-pedido { bottom: 28px; } }

/* ---------- Entrada +18 ---------- */
.id { position: fixed; inset: 0; z-index: 200; overscroll-behavior: contain; display: grid; place-items: center; padding: 20px; background: rgb(23 10 5 / .72); backdrop-filter: blur(10px); }
.id[hidden] { display: none; }
.id-tampa { width: 100%; max-width: 420px; padding: 30px 26px 26px; border-radius: 28px; background: var(--espuma); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 40px 80px -30px #000, 0 0 0 6px rgb(255 192 0 / .9); animation: id-entra .6s var(--mola); }
@keyframes id-entra { from { opacity: 0; scale: .9; } }
.id-tampa img { width: 112px; height: 112px; border-radius: 50%; box-shadow: 0 10px 24px -10px rgb(120 60 0 / .8); }
.id-tampa h2 { font-size: 27px; line-height: 1.1; }
.id-tampa p { color: var(--tinta-suave); }
.id-botoes { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 6px; }
.id-botoes .bt { width: 100%; }
.id-recusa { font-weight: 800; color: var(--tijolo) !important; }

/* ---------- Entradas ao rolar ---------- */
.js .sobe { opacity: 0; translate: 0 24px; }
.js .sobe.visivel { opacity: 1; translate: none; transition: opacity .8s var(--suave), translate .8s var(--suave); transition-delay: var(--atraso, 0s); }
.js .pv-bolacha.sobe { translate: 0 40px; rotate: -10deg; }
.js .pv-bolacha.sobe.visivel { rotate: 0deg; transition: opacity .7s var(--suave), translate .9s var(--mola), rotate .9s var(--mola); transition-delay: var(--atraso, 0s); }
@media (min-width: 1100px) { .js .pv-bolacha.sobe.visivel:nth-child(3n+2) { translate: 0 40px; } }

[hidden] { display: none !important; }
.pg404 { min-height: 100svh; display: grid; place-items: center; text-align: center; }
.pg404-miolo { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 60px 20px; }
.pg404 img { border-radius: 50%; }
.pg404 h1 { font-size: clamp(32px, 6vw, 56px); line-height: 1.05; }
.pg404 p { color: var(--tinta-suave); max-width: 28rem; }

/* cena 3 do Como pedir */
.cf-boca { fill: #0A0807; } .cf-t-marca { font: 400 11px var(--titulo); fill: rgb(255 192 0 / .55); text-anchor: end; letter-spacing: .08em; }
/* topo no celular: o freezer logo depois do título (a primeira tela já mostra o momento principal) */
@media (max-width: 959px) {
  .gl-texto { display: contents; }
  .gl-miolo { display: flex; flex-direction: column; gap: 0; }
  .gl-texto > .rotulo { order: 1; } .gl-titulo { order: 2; } .gl-freezer { order: 3; margin-top: 24px; } .gl-sub { order: 4; margin-top: 26px; } .gl-botoes { order: 5; } .gl-caminho { order: 6; }
  .gl-vidro { aspect-ratio: 4 / 3; }
  .gl-botoes .bt { flex: 1 1 auto; }
}
@media (max-width: 420px) { .gl-caminho { font-size: 13px; gap: 8px 16px; } .gl-caminho b { width: 24px; height: 24px; } }
.bc .es-faixas { flex-wrap: wrap-reverse; }

/* revisão 03/11: margem única também no balcão do celular, letras pequenas e contraste */
.bc .es-cabeca { align-items: flex-start; text-align: left; padding: 0; }
.bc .es-faixas { justify-content: flex-start; }
.bc .es-legenda-texto { text-align: left; margin-left: 0; padding: 0; }
.bc .es-acao { justify-content: flex-start; }
.pv-fonte, .pv-disco figcaption { font-size: 12px; letter-spacing: .05em; }
:root { --tinta-fraca: rgb(42 18 9 / .66); }
.rotulo, .rd-tit { color: #B03800; }
.rotulo-claro { color: var(--ouro); }

/* revisão de design 03/11: pausar tudo, erro ao lado do campo, toques */
.pausa-tudo { position: absolute; right: 22px; bottom: 22px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(23 10 5 / .72); color: var(--claro); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgb(255 246 232 / .2) inset; touch-action: manipulation; transition: background-color .25s; }
.pausa-tudo:hover { background: rgb(23 10 5 / .9); }
.pausa-tudo .play-ic { display: none; } .pausa-tudo[aria-pressed="true"] .play-ic { display: block; } .pausa-tudo[aria-pressed="true"] .pausa-ic { display: none; }
.parado *, .parado *::before, .parado *::after { animation-play-state: paused !important; }
.pd-erro { display: block; margin-top: 4px; font: 700 13.5px/1.3 var(--texto); color: #FF8A6B; }
.pd-campo input[aria-invalid="true"] { box-shadow: 0 0 0 2px #FF8A6B inset; }
.pd-opcao:hover span { background: rgb(255 246 232 / .09); }
.es-preco { font-variant-numeric: tabular-nums; }

/* um trilho só de 2 colunas no PC: a coluna da direita começa no mesmo lugar em todas as seções */
@media (min-width: 960px) {
  :root { --trilho: minmax(0, 1fr) minmax(0, 1.1fr); --vao: 64px; }
  .gl-miolo, .of-grade, .cf-grade, .dv-grade, .pd-grade, .pv-dupla { grid-template-columns: var(--trilho); column-gap: var(--vao); }
  .pv-story { justify-self: start; }
  .pd-comanda { justify-self: start; }
}

/* ===== Esteira de bebidas (estudo 007 da biblioteca + ajustes da Donna Beer) ===== */
/* Esteira de produtos (estudo 007). Troca por cliente: as variáveis --es-. Prefixo es- em tudo. */
.es {
  --es-fundo: #F4F1EC; --es-texto: #1C1A17; --es-suave: #6B655C; --es-cor: #C2412D;
  --es-esteira: #2B2925; --es-lateral: #1A1916; --es-trilho: #C9C4BB;
  --es-ilha: #E7E2D9; --es-ilha-baixo: #D6D0C5; --es-ilha-parede: #B9B2A6;
  --es-base: #F7F4EF;                       /* o prato/base embaixo do produto em pé */
  --es-f1: #6BA368; --es-f2: #3E8EDE; --es-f3: #E0A82E; --es-f4: #D9622B; --es-f5: #9B4DCA; /* faixas de preço (aro) */
  position: relative; isolation: isolate; overflow: hidden; background: var(--es-fundo); color: var(--es-texto);
  font-family: system-ui, "Segoe UI", sans-serif;
}
.es::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(64% 52% at 50% 56%, color-mix(in srgb, var(--es-texto) 6%, transparent), transparent 72%); }
.es-miolo { display: flex; flex-direction: column; align-items: center; padding: 28px 16px 28px; }
.es-miolo > * { width: 100%; min-width: 0; } /* sem isso a esteira fica espremida no celular */
.es-cabeca { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 8px; }
.es-rotulo { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--es-suave); }
.es-titulo { margin: 0; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }
.es-faixas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--es-suave); font-variant-numeric: tabular-nums; }
.es-faixas li { display: inline-flex; align-items: center; gap: 6px; }
.es-faixas i, .es-chip i, .es-num i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--f); flex: none; }
[data-faixa="1"] { --f: var(--es-f1); } [data-faixa="2"] { --f: var(--es-f2); } [data-faixa="3"] { --f: var(--es-f3); } [data-faixa="4"] { --f: var(--es-f4); } [data-faixa="5"] { --f: var(--es-f5); }

/* palco e esteira */
.es-palco { position: relative; width: 100%; margin-top: 8px; touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow-x: clip; }
.es-esteira, .es-esteira svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.es-balcao { position: absolute; left: 0; right: 0; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--es-texto) 9%, transparent) 0 1px, transparent 1px, color-mix(in srgb, var(--es-texto) 5%, transparent) 40%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }

/* cada produto */
.es-item { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.es-item:focus-visible { outline: 2px solid var(--es-cor); outline-offset: 4px; }
.es-sombra { position: absolute; left: 5%; right: 5%; bottom: -9%; top: 16%; border-radius: 50%; background: #000; opacity: .5; filter: blur(calc(var(--es-d, 120px) * .045)); pointer-events: none; }
.es-sobe { position: absolute; inset: 0; pointer-events: none; }
.es-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: auto; }
.es-base { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(60% 60% at 45% 35%, color-mix(in srgb, var(--es-base), #fff 40%), var(--es-base) 60%, color-mix(in srgb, var(--es-base), #000 25%));
  box-shadow: inset 0 -3px 6px rgb(0 0 0 / .12), 0 1px 0 rgb(255 255 255 / .6); pointer-events: auto; }
.es-foto-pe { position: absolute; left: 50%; bottom: 50%; height: calc(var(--es-d, 120px) * 1.05); width: auto; max-width: none; translate: -50% 0; pointer-events: auto;
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / .25)); }
.es-aro { position: absolute; inset: -2%; }
.es[data-modo="em-pe"] .es-aro { inset: 9%; }
.es-aro { border-radius: 50%; border: 2px solid var(--f); pointer-events: none; }
.es-ancora { position: absolute; left: 50%; top: 0; width: 0; height: 0; pointer-events: none; }
.es[data-modo="em-pe"] .es-ancora { top: calc(var(--es-d, 120px) * -.66); }
.es-chip { position: absolute; bottom: 7px; left: 0; translate: -50% 4px; opacity: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 10px 5px 8px; border-radius: 999px; background: #fff; color: #1C1A17; font-size: 12px; font-weight: 600; line-height: 1;
  box-shadow: 0 6px 16px -6px rgb(0 0 0 / .4), 0 0 0 1px rgb(0 0 0 / .06); transition: opacity .3s, translate .3s; }
.es-chip b { font-weight: 500; color: #6B655C; font-variant-numeric: tabular-nums; }
.es-item[data-ativo] .es-chip { opacity: 1; translate: -50% 0; }

/* controles e legenda */
.es-controles { position: relative; z-index: 5; display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.es-controles button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--es-texto) 14%, transparent);
  background: color-mix(in srgb, var(--es-fundo), #fff 50%); color: var(--es-suave); cursor: pointer; transition: color .2s; touch-action: manipulation; }
.es-controles button:hover { color: var(--es-texto); }
.es-controles button:focus-visible { outline: 2px solid var(--es-cor); outline-offset: 2px; }
.es-controles .es-play { display: none; } .es-pausado .es-play { display: block; } .es-pausado .es-pause { display: none; }
.es-legenda-texto { margin: 10px auto 0; max-width: 30rem; min-height: 3.2em; text-align: center; font-size: 14px; color: var(--es-suave); line-height: 1.45; padding: 0 8px; }
.es-legenda-texto strong { color: var(--es-texto); }
.es-legenda-texto small { font-size: 13px; }
.es-acao { margin-top: 12px; display: flex; justify-content: center; }
.es-botao { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--es-cor); color: #fff; font-weight: 600; text-decoration: none; }
.es-botao:focus-visible { outline: 2px solid var(--es-texto); outline-offset: 3px; }

/* telas largas: texto à esquerda, esteira à direita */
.es-larga .es-miolo { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: center; gap: 48px; max-width: 1280px; margin: 0 auto; padding: 56px 40px; }
.es-larga .es-cabeca { align-items: flex-start; text-align: left; padding: 0; }
.es-larga .es-faixas { justify-content: flex-start; }
.es-larga .es-lado { display: flex; flex-direction: column; gap: 18px; }
.es-larga .es-legenda-texto { margin: 0; text-align: left; padding: 0; }
.es-larga .es-acao { justify-content: flex-start; margin: 0; }
.es-lado { display: contents; }
.es-larga .es-lado { display: flex; }

/* sem JavaScript: grade simples, nada some */
.es:not(.es-pronto) .es-palco { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.es:not(.es-pronto) .es-item { position: static; width: 120px; }
.es:not(.es-pronto) .es-item img { width: 100%; height: auto; }

/* janela do produto */
.es-janela { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; color: var(--es-texto); font-family: system-ui, "Segoe UI", sans-serif; }
.es-veu { position: absolute; inset: 0; background: color-mix(in srgb, var(--es-fundo) 80%, transparent); backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s; }
.es-cartao { position: relative; width: 100%; max-width: 52rem; display: grid; gap: 24px; align-items: center; padding: 24px; }
.es-cartao::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 32px; background: var(--es-cartao, color-mix(in srgb, var(--es-fundo) 90%, var(--es-texto) 10%)); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .35);
  opacity: 0; scale: .97; transition: opacity .3s, scale .3s; }
.es-mostra .es-veu, .es-mostra .es-cartao::before { opacity: 1; scale: 1; }
.es-fechar { position: absolute; right: 12px; top: 12px; z-index: 2; display: inline-flex; gap: 6px; align-items: center; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--es-suave); font: 600 13px system-ui, sans-serif; cursor: pointer; opacity: 0; transition: opacity .3s; }
.es-mostra .es-fechar { opacity: 1; }
.es-fechar:focus-visible, .es-pedir:focus-visible { outline: 2px solid var(--es-cor); outline-offset: 2px; }
.es-figura { position: relative; margin: 0 auto; width: 100%; max-width: min(42vh, 20rem); aspect-ratio: 1; }
.es-figura img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.es-figura-pe { aspect-ratio: 400 / 560; max-width: min(34vh, 15rem); }
.es-figura-sombra { position: absolute; left: 10%; right: 10%; bottom: -3%; height: 18%; border-radius: 50%; background: #000; opacity: .22; filter: blur(16px); }
.es-figura-aro { position: absolute; inset: -1.5%; border-radius: 50%; border: 3px solid var(--f); }
.es-figura-pe .es-figura-aro { display: none; }
.es-info { display: flex; flex-direction: column; gap: 10px; text-align: center; opacity: 0; translate: 0 8px; transition: opacity .5s .15s, translate .5s .15s; }
.es-mostra .es-info { opacity: 1; translate: none; }
.es-num { margin: 0; display: inline-flex; gap: 8px; align-items: center; justify-content: center; font: 500 11px ui-monospace, Consolas, monospace; letter-spacing: .18em; color: var(--es-suave); }
.es-info h3 { margin: 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; }
.es-desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--es-suave); }
.es-info ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.es-info li { padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--es-texto) 14%, transparent); font-size: 12px; color: var(--es-suave); }
.es-compra { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; margin-top: 6px; }
.es-preco { margin: 0; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.es-pedir { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--es-cor); color: #fff; font: 600 15px system-ui, sans-serif; text-decoration: none; cursor: pointer; }
@media (min-width: 640px) {
  .es-cartao { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: 40px; padding: 36px; }
  .es-info { text-align: left; } .es-num { justify-content: flex-start; } .es-info ul, .es-compra { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .es-chip, .es-veu, .es-cartao::before, .es-info, .es-fechar { transition: none; } }

/* ===== Donna Beer (03/11/2026): balcão de bar à noite. Faixas = tipo de bebida (sem preço real ainda). ===== */
.bc .es { --es-fundo: transparent; --es-texto: #FFF6E8; --es-suave: rgb(255 246 232 / .7); --es-cor: #FFC000;
  --es-esteira: #2E1D13; --es-lateral: #0E0704; --es-trilho: #9A7A52; --es-ilha: #43281A; --es-ilha-baixo: #2E1B11; --es-ilha-parede: #1A0E08;
  --es-base: #5A3A24; --es-sombra-forca: .35; --es-cartao: #24110A;
  --es-f1: #FFC000; --es-f2: #8BE04E; --es-f3: #8FD3F2; --es-f4: #E07A3A; --es-f5: #F06018;
  background: none; overflow: visible; font-family: var(--texto); }
.bc .es::before { background: radial-gradient(60% 50% at 62% 58%, rgb(255 192 0 / .1), transparent 72%); }
.bc .es-miolo { max-width: calc(var(--largura) + var(--lado) * 2); padding: 0 var(--lado); }
.bc .es-larga .es-miolo { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: 40px; padding: 0 var(--lado); }
.bc .es-cabeca { gap: var(--s-rotulo); }
.bc .es-titulo { font-family: var(--titulo); font-weight: 400; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -.005em; }
.bc .es-faixas { font: 800 13.5px/1 var(--texto); color: var(--claro-suave); gap: 8px 16px; margin-top: 4px; }
.bc .es-faixas i, .bc .es-chip i, .bc .es-num i { width: 12px; height: 12px; border-width: 3px; }
.bc .es-legenda-texto { font-size: 16px; color: var(--claro-suave); }
.bc .es-legenda-texto strong { color: var(--claro); font-weight: 800; }
.bc .es-chip { font: 800 13px/1 var(--texto); background: #FFF6E8; color: var(--malte); }
.bc .es-chip b { color: var(--tijolo); font-weight: 800; }
.bc .es-controles button { background: rgb(255 246 232 / .06); color: var(--claro-suave); border-color: rgb(255 246 232 / .18); width: 40px; height: 40px; }
.bc .es-controles button:hover { color: var(--claro); }
.bc .es-base { box-shadow: inset 0 -3px 6px rgb(0 0 0 / .3), 0 1px 0 rgb(255 220 160 / .25); }
/* janela da bebida */
.es-janela { font-family: var(--texto); }
.es-janela .es-info h3 { font-family: var(--titulo); font-weight: 400; color: var(--claro); }
.es-janela .es-preco { font-family: var(--titulo); font-weight: 400; color: var(--ouro); display: flex; flex-direction: column; gap: 4px; }
.es-janela .es-preco small { font: 600 12px/1 var(--texto); color: var(--claro-fraco); }
.es-janela .es-pedir { background: linear-gradient(180deg, #FFD43F, var(--ouro) 55%, #F4AE00); color: var(--malte); font: 800 16px/1 var(--texto); border-radius: 14px; gap: 8px; }
.es-janela .es-pedir .ic { width: 18px; height: 18px; }
.es-janela .es-so { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font: 800 15px/1 var(--texto); color: var(--zap); text-decoration: underline; text-underline-offset: 4px; }
.es-janela .es-so .ic { width: 18px; height: 18px; }
.es-janela .es-fechar { font-family: var(--texto); font-weight: 800; color: var(--claro-suave); }
.es-janela .es-num { font-family: var(--texto); font-weight: 800; }
.es-janela .es-info li { border-color: rgb(255 246 232 / .18); color: var(--claro-suave); }
.es-janela .es-desc { color: var(--claro-suave); }
.es-janela .es-veu { background: rgb(23 10 5 / .78); }
.es-janela .es-figura-pe::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 192 0 / .3), transparent); }
/* cores dos desenhos da esteira por classe (a proteção do site não deixa estilo escrito direto no desenho) */
.es-c-ilha { stop-color: var(--es-ilha); } .es-c-ilha-baixo { stop-color: var(--es-ilha-baixo); }
.es-c-sombra { opacity: var(--es-sombra-forca, .2); } .es-c-lateral { fill: var(--es-lateral); } .es-c-esteira { fill: var(--es-esteira); }
.es-c-trilho { stroke: var(--es-trilho); } .es-c-parede { fill: var(--es-ilha-parede); }
.es-janela .es-cartao::before { box-shadow: 0 0 0 1px rgb(255 192 0 / .2) inset, 0 40px 80px -30px #000; background: radial-gradient(80% 90% at 30% 40%, #3A1D10, #1E0E07); }
.bc .es:not(.es-larga) .es-miolo { align-items: stretch; }
.es-janela { overscroll-behavior: contain; }

/* ===== 03/11 (pedido do John): letreiro de neon no lugar do selo e botões do topo com cara de chope ===== */
@font-face { font-family: "Neonderthaw"; src: url(fontes/neonderthaw.woff2) format("woff2"); font-weight: 400; font-display: swap; }
.neon { display: inline-flex; align-items: center; gap: 10px; padding: 3px 13px 3px 11px; border-radius: 12px; white-space: nowrap;
  background: radial-gradient(120% 140% at 30% 50%, rgb(92 255 157 / .1), transparent 60%), linear-gradient(180deg, #17110E, #0A0706);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .07) inset, 0 1px 0 rgb(255 255 255 / .06) inset, 0 8px 18px -10px rgb(0 0 0 / .7), 0 0 22px -8px rgb(92 255 157 / .55); }
.neon-tubo { font: 400 25px/1.25 "Neonderthaw", "Segoe Script", cursive; color: #EFFFF5; letter-spacing: .01em; padding: 0 2px;
  text-shadow: 0 0 2px #fff, 0 0 6px #5CFF9D, 0 0 12px #2FE07C, 0 0 22px #1FB862, 0 0 34px rgb(31 184 98 / .6);
  animation: neon-acende 1.4s steps(1) both, neon-zumbido 9s 2s infinite; }
.neon-hora { font: 700 11px/1 var(--texto); letter-spacing: .16em; text-transform: uppercase; color: rgb(255 246 232 / .72); padding-left: 10px; border-left: 1px solid rgb(255 255 255 / .12); }
@keyframes neon-acende { 0% { opacity: .15; } 12% { opacity: 1; } 18% { opacity: .2; } 26% { opacity: 1; } 32% { opacity: .35; } 40%, 100% { opacity: 1; } }
@keyframes neon-zumbido { 0%, 94%, 100% { opacity: 1; } 95% { opacity: .55; } 96% { opacity: 1; } 97.5% { opacity: .7; } }
.neon.apagado { box-shadow: 0 0 0 1px rgb(255 255 255 / .07) inset, 0 8px 18px -10px rgb(0 0 0 / .7); background: linear-gradient(180deg, #17110E, #0A0706); }
.neon.apagado .neon-tubo { color: #5E4C45; text-shadow: none; animation: none; }
.mn .neon { margin-left: auto; }
@media (min-width: 1020px) { .mn .neon { margin-left: 8px; } }
.neon-claro { margin-top: 10px; width: fit-content; }
.of-dados .neon-claro { display: flex; }

.gl-botoes { gap: 14px; align-items: stretch; }
.bt-chopp, .bt-zap2 { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 68px; border-radius: 20px; text-decoration: none; isolation: isolate;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .3s var(--mola), box-shadow .3s, background-color .3s; }
.bt-chopp { padding: 14px 20px 10px 10px; overflow: hidden; color: var(--malte);
  background: linear-gradient(180deg, #FFD54A 0%, #FBB810 46%, #E58E00 100%);
  box-shadow: 0 -3px 0 rgb(120 50 0 / .3) inset, 0 1px 0 rgb(255 255 255 / .5) inset, 0 16px 30px -16px rgb(216 110 0 / .95); }
/* a espuma no alto, andando devagar */
.bt-chopp::before { content: ""; position: absolute; left: -20px; right: -20px; top: -6px; height: 15px; z-index: -1;
  background: radial-gradient(circle at 10px 6px, #FFF8EA 8.5px, transparent 9px) 0 0 / 19px 15px repeat-x, linear-gradient(#FFF8EA, #FFF8EA) 0 0 / 100% 5px no-repeat;
  filter: drop-shadow(0 1px 0 rgb(200 120 0 / .35)); animation: chopp-espuma 7s linear infinite; }
/* bolhas subindo dentro do chope */
.bt-chopp::after { content: ""; position: absolute; inset: 10px 0 0; z-index: -1; opacity: .7;
  background-image: radial-gradient(1.6px 1.6px at 12% 70%, #FFF6D6 60%, transparent 62%), radial-gradient(1.2px 1.2px at 38% 30%, #FFF6D6 60%, transparent 62%), radial-gradient(1.8px 1.8px at 63% 85%, #FFF6D6 60%, transparent 62%), radial-gradient(1.1px 1.1px at 84% 45%, #FFF6D6 60%, transparent 62%), radial-gradient(1.4px 1.4px at 93% 90%, #FFF6D6 60%, transparent 62%);
  background-size: 150px 56px; animation: chopp-bolhas 2.8s linear infinite; }
@keyframes chopp-espuma { to { background-position: 19px 0, 0 0; } }
@keyframes chopp-bolhas { from { background-position: 0 56px; } to { background-position: 0 0; } }
.bt-chopp-ic, .bt-zap2-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; }
.bt-chopp-ic { background: var(--malte); color: var(--ouro); box-shadow: 0 6px 12px -6px rgb(60 20 0 / .8); }
.bt-chopp-ic .ic { width: 22px; height: 22px; }
.bt-chopp-txt, .bt-zap2-txt { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.bt-chopp-txt b { font: 400 20px/1.05 var(--titulo); letter-spacing: .005em; }
.bt-chopp-txt small { font: 700 12.5px/1.2 var(--texto); color: rgb(42 18 9 / .78); }
.bt-chopp-seta { width: 22px; height: 22px; margin-left: 6px; transition: translate .3s var(--mola); }
.bt-chopp:hover { transform: translateY(-2px); box-shadow: 0 -3px 0 rgb(120 50 0 / .3) inset, 0 1px 0 rgb(255 255 255 / .5) inset, 0 22px 34px -16px rgb(216 110 0 / 1); }
.bt-chopp:hover .bt-chopp-seta { translate: 5px 0; }
.bt-chopp:active, .bt-zap2:active { transform: scale(.98); }
.bt-zap2 { padding: 10px 20px 10px 10px; color: var(--tinta); background: rgb(255 255 255 / .62); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1.5px rgb(42 18 9 / .14) inset, 0 12px 26px -20px rgb(23 10 5 / .6); }
.bt-zap2:hover { background: #fff; transform: translateY(-2px); }
.bt-zap2-ic { background: var(--zap); color: #fff; box-shadow: 0 6px 12px -6px rgb(37 211 102 / .8); border-radius: 50%; }
.bt-zap2-ic .ic { width: 24px; height: 24px; }
.bt-zap2-txt b { font: 800 16.5px/1.1 var(--texto); }
.bt-zap2-txt small { font: 600 13px/1.2 var(--texto); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.bt-chopp:focus-visible, .bt-zap2:focus-visible { outline: 3px solid var(--tijolo); outline-offset: 3px; }
/* no celular a barra de baixo já tem o WhatsApp: no topo fica só o Monte seu pedido (nunca 2 botões iguais na tela) */
@media (max-width: 759px) { .bt-zap2 { display: none; } .bt-chopp { width: 100%; } .bt-chopp-seta { margin-left: auto; } }
.bt-chopp { gap: 12px; padding-right: 16px; }
.bt-chopp-seta { margin-left: 2px; }
.bt-zap2 { gap: 12px; padding-right: 18px; }
.bt-chopp::before { background: radial-gradient(circle at 10px 6px, #FFF8EA 8.5px, transparent 9px) 0 0 / 19px 15px repeat-x, radial-gradient(circle at 6px 4px, #FFF8EA 6px, transparent 6.5px) 9px 3px / 23px 13px repeat-x, linear-gradient(#FFF8EA, #FFF8EA) 0 0 / 100% 5px no-repeat; }
@keyframes chopp-espuma { to { background-position: 19px 0, 32px 3px, 0 0; } }
@media (max-width: 959px) { .gl-botoes { order: 4; margin-top: 22px; } .gl-sub { order: 5; } }
@media (min-width: 960px) and (max-width: 1279px) { .bt-zap2-txt small { display: none; } .bt-zap2 { padding-right: 16px; } .gl-botoes { flex-wrap: nowrap; } }

/* ===== 03/11 (pedido do John): tampinhas no "Pôr no pedido" e na quantidade (fim da cara de modelo pronto) ===== */
.tp { position: relative; flex: none; width: 34px; height: 34px; transition: rotate .55s var(--mola), scale .2s; }
.tp::before { content: ""; position: absolute; inset: 0; -webkit-mask: url(img/tampa.svg) center / contain no-repeat; mask: url(img/tampa.svg) center / contain no-repeat;
  background: radial-gradient(circle, transparent 57%, rgb(110 60 0 / .45) 59%, transparent 63%), radial-gradient(circle at 36% 30%, #FFE68A, var(--ouro) 46%, #B67C00 100%);
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / .45)); }
.tp::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; translate: -50% -50%;
  background: linear-gradient(var(--malte), var(--malte)) center / 100% 2.6px no-repeat, linear-gradient(var(--malte), var(--malte)) center / 2.6px 100% no-repeat; }
.tp-menos::after { background: linear-gradient(var(--malte), var(--malte)) center / 100% 2.6px no-repeat; }
.tp-mini { width: 20px; height: 20px; } .tp-mini::after { width: 8px; height: 8px; background-size: 100% 2px, 2px 100%; }
.ct-por, .es-janela .es-pedir { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 6px 6px 6px 14px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, #2E180D, #190B06); color: var(--claro); font: 800 12.5px/1 var(--texto); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 0 0 1px rgb(255 192 0 / .32) inset, 0 1px 0 rgb(255 246 232 / .08) inset, 0 10px 18px -14px #000; transition: box-shadow .3s, background-color .3s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ct-por:hover, .es-janela .es-pedir:hover { box-shadow: 0 0 0 1.5px var(--ouro) inset, 0 1px 0 rgb(255 246 232 / .08) inset, 0 12px 22px -14px rgb(255 192 0 / .5); }
.ct-por:hover .tp, .es-janela .es-pedir:hover .tp { rotate: 90deg; }
.ct-por:active .tp, .es-janela .es-pedir:active .tp { rotate: 160deg; scale: .9; }
.es-janela .es-pedir { width: auto; min-width: 220px; min-height: 52px; font-size: 13.5px; padding-left: 18px; }
.es-janela .es-pedir .tp { width: 38px; height: 38px; }
/* quantidade: o rótulo âmbar com 2 tampinhas escuras */
.qt { flex: 1; display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 3px; border-radius: 14px;
  background: linear-gradient(180deg, #FFD54A, #F2A800); color: var(--malte); box-shadow: 0 -2px 0 rgb(120 50 0 / .3) inset, 0 1px 0 rgb(255 255 255 / .5) inset; }
.qt .tp-bt { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.qt .tp-bt .tp::before { background: radial-gradient(circle, transparent 57%, rgb(255 192 0 / .35) 59%, transparent 63%), radial-gradient(circle at 36% 30%, #5A3220, #2A140A 55%, #120705); }
.qt .tp-bt .tp::after { background: linear-gradient(var(--ouro), var(--ouro)) center / 100% 2.6px no-repeat, linear-gradient(var(--ouro), var(--ouro)) center / 2.6px 100% no-repeat; }
.qt .tp-bt .tp-menos::after { background: linear-gradient(var(--ouro), var(--ouro)) center / 100% 2.6px no-repeat; }
.qt .tp-bt:hover .tp { rotate: 90deg; }
.qt .tp-bt:active .tp { rotate: -70deg; scale: .9; }
.qt output { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 4.5ch; overflow: hidden; }
.qt output b { font: 400 21px/1 var(--titulo); font-variant-numeric: tabular-nums; }
.qt output small { font: 800 9.5px/1 var(--texto); letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.qt output b.gira { animation: qt-rola .42s var(--mola); }
@keyframes qt-rola { from { transform: translateY(-75%); opacity: 0; } }
.pd-sacola .qt { width: 132px; } .pd-sacola .qt output small { display: none; }
.pd-chip { gap: 8px; padding-left: 8px; }

/* ===== Procedência em rótulos de garrafa ===== */
.pv-rotulos { display: grid; gap: 16px; margin: var(--s-bloco) 0 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .pv-rotulos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.pv-rotulo { position: relative; padding: 16px 18px 20px; border-radius: 16px; color: var(--tinta); rotate: var(--incl, 0deg);
  background: radial-gradient(120% 90% at 30% 0%, #FFFBF1, #FBEFD8 70%, #F3E1BF); box-shadow: 0 18px 30px -18px #000, 0 2px 0 rgb(255 255 255 / .5) inset;
  transition: rotate .6s var(--mola), translate .6s var(--mola); }
.pv-rotulo::before { content: ""; position: absolute; inset: 7px; border-radius: 11px; border: 1.2px solid rgb(176 56 0 / .38); pointer-events: none; }
.pv-rotulo::after { content: ""; position: absolute; inset: 10px; border-radius: 9px; border: .8px dashed rgb(176 56 0 / .22); pointer-events: none; }
.pv-r1 { --incl: -1.2deg; } .pv-r2 { --incl: .9deg; background: radial-gradient(120% 90% at 30% 0%, #FBF0DC, #F1DDB8 70%, #E6CB9C); }
.pv-r3 { --incl: .7deg; background: radial-gradient(120% 90% at 30% 0%, #FBF0DC, #F1DDB8 70%, #E6CB9C); } .pv-r4 { --incl: -.8deg; }
.pv-rotulo:hover { rotate: 0deg; translate: 0 -3px; }
.pv-desenho { width: 100%; max-width: 190px; height: auto; aspect-ratio: 120 / 64; margin: 2px auto 10px; overflow: visible; }
.pv-num { text-align: center; font: 800 10.5px/1 var(--texto); letter-spacing: .26em; color: #B03800; }
.pv-rotulo h4 { margin: 6px 0 6px; text-align: center; font: 400 19px/1.15 var(--titulo); }
.pv-rotulo h4 + p { text-align: center; font-size: 14.5px; line-height: 1.4; color: var(--tinta-suave); }
.pv-desenho * { vector-effect: non-scaling-stroke; }
.pv-desenho path, .pv-desenho circle, .pv-desenho rect, .pv-desenho ellipse { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-chao { stroke-dasharray: 3 5; opacity: .5; }
.pv-tr-bau { fill: #FFC000 !important; } .pv-tr-cab { fill: #D84800 !important; } .pv-tr-vidro { fill: #CFEAF5 !important; }
.pv-tr-txt { font: 800 6.5px var(--texto); letter-spacing: .08em; text-anchor: middle; fill: var(--tinta); stroke: none; }
.pv-roda circle { fill: #2A1209 !important; } .pv-roda path { stroke: #FFF6E8 !important; stroke-width: 1.4 !important; }
.pv-vento path { stroke: #B03800 !important; opacity: .6; }
.pv-gargalo { fill: #8FD3F2 !important; fill-opacity: .35 !important; } .pv-cap { fill: #FFC000 !important; } .pv-lacre { fill: #D84800 !important; stroke: none !important; }
.pv-selo { fill: #1E8A4C !important; stroke: none !important; } .pv-check { stroke: #fff !important; stroke-width: 3 !important; stroke-dasharray: 24; stroke-dashoffset: 24; }
.pv-papel { fill: #fff !important; } .pv-linhas { stroke: #B03800 !important; } .pv-barras { stroke-width: 1.6 !important; } .pv-impressora { fill: #2A1209 !important; }
.pv-fundo-lata { fill: #D6DCDF !important; } .pv-fundo-lata2 { fill: #E9EDEF !important; stroke-width: 1.4 !important; }
.pv-ponto { fill: #2A1209; stroke: none !important; }
.pv-lote { font: 800 13px var(--texto); letter-spacing: .14em; text-anchor: middle; fill: url(#pv-pontos); stroke: none; }
.pv-lupa-vidro { fill: rgb(207 234 245 / .35) !important; stroke-width: 2.6 !important; } .pv-lupa-cabo { stroke-width: 4.5 !important; stroke: #D84800 !important; }
/* movimentos: entram quando o rótulo aparece e depois ficam num ciclo calmo */
.pv-caminhao, .pv-roda, .pv-confere, .pv-nota, .pv-lupa { transform-box: fill-box; }
.pv-roda { transform-origin: center; }
.visivel .pv-caminhao { animation: pv-chega 8s var(--suave) infinite; }
.visivel .pv-roda { animation: pv-gira 8s linear infinite; }
.visivel .pv-vento { animation: pv-vento 8s ease-in-out infinite; }
@keyframes pv-chega { 0% { transform: translateX(-46px); } 22%, 86% { transform: none; } 100% { transform: translateX(-46px); } }
@keyframes pv-gira { 0% { transform: rotate(-500deg); } 22%, 86% { transform: none; } 100% { transform: rotate(-500deg); } }
@keyframes pv-vento { 0%, 20% { opacity: .6; } 30%, 80% { opacity: 0; } 100% { opacity: .6; } }
.pv-confere { transform-origin: center; }
.visivel .pv-confere { animation: pv-selo 7s var(--mola) infinite; } .visivel .pv-check { animation: pv-risca 7s ease infinite; }
@keyframes pv-selo { 0%, 8% { transform: scale(0); } 18%, 88% { transform: none; } 96%, 100% { transform: scale(0); } }
@keyframes pv-risca { 0%, 18% { stroke-dashoffset: 24; } 30%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 24; } }
.visivel .pv-nota { animation: pv-imprime 8s steps(14, end) infinite; }
@keyframes pv-imprime { 0% { transform: translateY(42px); } 40%, 88% { transform: none; } 100% { transform: translateY(42px); } }
.visivel .pv-lupa { animation: pv-procura 6s ease-in-out infinite alternate; }
@keyframes pv-procura { 0% { transform: translateX(-6px); } 100% { transform: translateX(44px); } }
.pv-ponto { fill: #2A1209 !important; stroke: none !important; }
.pv-roda .pv-cubo { fill: #C9CDD2 !important; stroke: none !important; } .pv-roda .pv-raio { stroke: #C9CDD2 !important; stroke-width: 1.6 !important; }
.pv-roda circle:first-child { fill: #2A1209 !important; }
/* celular: nada quebrando em 2 linhas nos botões e na quantidade */
.ct-por > span:first-child { white-space: nowrap; }
@media (max-width: 480px) {
  .ct-por { padding-left: 11px; font-size: 13px; letter-spacing: .01em; text-transform: none; }
  .ct-por .tp { width: 30px; height: 30px; }
  .qt output small { display: none; }
  .qt .tp-bt { width: 36px; height: 36px; } .qt .tp-bt .tp { width: 30px; height: 30px; }
  .pd-sacola li { grid-template-columns: 48px minmax(0, 1fr); }
  .pd-sacola li .qt { grid-column: 1 / -1; width: 100%; }
}
.aviso-pedido { width: max-content; max-width: min(440px, calc(100% - 32px)); }
.aviso-pedido span { flex: 1; min-width: 0; }
@media (min-width: 960px) { .pv-story { justify-self: center; } }

/* 05/11: página de texto (privacidade) */
.pg-texto { background: var(--espuma); color: var(--tinta); }
.pg-texto-miolo { max-width: 44rem; margin: 0 auto; padding: 40px 20px 72px; }
.pg-texto-marca { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-bottom: 28px; font: 400 21px/1 var(--titulo); color: var(--tinta); text-decoration: none; }
.pg-texto-marca img { border-radius: 50%; }
.pg-texto h1 { font: 400 clamp(32px, 6vw, 48px)/1.08 var(--titulo); }
.pg-texto-data { margin-top: 10px; color: var(--tinta-suave); font-size: 15px; }
.pg-texto h2 { margin-top: 32px; font: 400 21px/1.2 var(--titulo); }
.pg-texto p { margin-top: 10px; font-size: 17px; line-height: 1.6; }
.pg-texto p a { color: var(--tijolo); font-weight: 600; }
.pg-texto-volta { display: inline-flex; margin-top: 36px; }
.rd-lei a, .pd-aviso a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Telas estreitas (05/11/2026, teste nos aparelhos): a tampinha saía do botão abaixo de 375 px, e o Safari deixava a página andar 3 px para o lado */
html { overflow-x: clip; }
@media (max-width: 389px) { .ct-por { padding: 5px 5px 5px 9px; gap: 4px; } }
@media (max-width: 374px) {
  .ct-por { line-height: 1.12; text-align: left; }
  .ct-por > span:first-child { white-space: normal; min-width: 0; }
}
@media (max-width: 340px) {
  .bf .bf-zap { gap: 5px; font-size: 13.5px; }
}
@media (max-width: 355px) { .ct-preco { font-size: 18px; } }