/* ==========================================================================
   COPÃO LL — estilos
   Layout: mobile-first; palco do copo em cima e painel embaixo no celular,
   lado a lado no desktop. Identidade única escura (marca noturna).
   ========================================================================== */
:root {
  /* cor */
  --ink: #07050a;          /* preto profundo */
  --ink-2: #110c14;        /* superfícies */
  --ink-3: #1b1420;        /* superfícies elevadas */
  --line: #2e2433;         /* divisórias */
  --pink: #ff2d8a;         /* rosa neon */
  --pink-deep: #c4106a;
  --lime: #c8ff3e;         /* verde-limão pontual */
  --white: #ffffff;
  --text: #f6eff4;
  --muted: #b5a7b2;
  --danger: #ff6b7d;
  --whats: #25d366;
  /* tipo */
  --f-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-brush: 'Permanent Marker', 'Comic Sans MS', cursive;
  /* ritmo */
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --r: 14px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 400 16px/1.6 var(--f-body);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lime); color: var(--ink); padding: 10px 14px; border-radius: 8px; font-weight: 800; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
section[id], footer[id] { scroll-margin-top: 72px; }
.muted { color: var(--muted); }

/* ------------------------------------------------------------ botões */
.btn {
  --bg: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent;
  font: 400 1.05rem/1 var(--f-display); letter-spacing: .06em; text-decoration: none; cursor: pointer;
  background: var(--bg); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn-primary { --bg: var(--pink); color: var(--white); box-shadow: 0 0 0 0 rgba(255, 45, 138, .0), 0 10px 30px -10px rgba(255, 45, 138, .8); }
.btn-primary:hover { box-shadow: 0 0 0 6px rgba(255, 45, 138, .16), 0 14px 40px -10px rgba(255, 45, 138, .95); transform: translateY(-2px); }
.btn-ghost { border-color: rgba(255, 255, 255, .35); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, .06); }
.btn-ghost:disabled { opacity: .35; cursor: not-allowed; }
.btn-sm { min-height: 46px; padding: 0 20px; font-size: .98rem; }
.btn.full { width: 100%; }
.btn-whats { --bg: var(--whats); color: #062b14; font-size: 1.05rem; }
.btn-whats svg { width: 22px; height: 22px; }
.btn-whats:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(37, 211, 102, .8); }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--pink); cursor: pointer; font-weight: 700; }
.link-btn.small { font-size: .85rem; color: var(--muted); font-weight: 600; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--ink-2); cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------ cabeçalho */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--gut-r) 10px var(--gut);
  background: linear-gradient(to bottom, rgba(7, 5, 10, .92), rgba(7, 5, 10, .55) 70%, rgba(7, 5, 10, 0));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 18px rgba(255, 45, 138, .5); }
.brand-name { font: 400 1.25rem/1 var(--f-display); letter-spacing: .04em; }
.brand-name b { font-weight: 400; color: var(--pink); }
.nav { display: none; margin-left: auto; gap: 26px; }
.nav a { text-decoration: none; font-weight: 700; font-size: .92rem; letter-spacing: .04em; color: var(--muted); position: relative; padding: 6px 0; }
.nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--pink); transition: right .3s var(--ease); }
.nav a:hover { color: var(--white); }
.nav a:hover::after { right: 0; }
.cart-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(17, 12, 20, .8); cursor: pointer; font-weight: 800;
}
.cart-btn svg { width: 22px; height: 22px; }
.cart-btn-label { display: none; }
.cart-count { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--pink); color: var(--white); font-size: .8rem; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.cart-btn.bump { animation: bump .5s var(--ease); }
@keyframes bump { 30% { transform: scale(1.14); box-shadow: 0 0 0 8px rgba(255, 45, 138, .25); } }

/* ------------------------------------------------------------ hero */
/* fundo preto absoluto (referência de campanha), luz rosa atrás do copo,
   copo real que cai + líquido neon desenhado em canvas por cima */
/* (layout da hero) */
.hero {
  --hx: 74%; --hy: 42%;
  position: relative; overflow: hidden; isolation: isolate; background: #010002;
  padding: calc(64px + env(safe-area-inset-top, 0px)) var(--gut-r) 48px var(--gut);
  display: flex; flex-direction: column; justify-content: center;
}
.hero-light {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(34% 30% at var(--hx) var(--hy), rgba(255, 45, 138, .5), rgba(255, 45, 138, 0) 72%),
    radial-gradient(70% 22% at var(--hx) calc(var(--hy) + 30%), rgba(255, 45, 138, .16), transparent 70%),
    radial-gradient(30% 40% at 6% 100%, rgba(200, 255, 62, .05), transparent 70%);
  opacity: 0; transition: opacity 1.4s ease .1s;
}
.hero::after { /* luz que segue o ponteiro (só variáveis CSS) */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 40%), rgba(255, 45, 138, .1), transparent 70%);
}
.hero-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.016) 0 2px, transparent 2px 7px); }
.is-ready .hero-light { opacity: 1; }
.fx-impact .hero-light { animation: heroFlash .9s ease-out; }
@keyframes heroFlash { 0% { filter: brightness(1); } 12% { filter: brightness(1.9); } 100% { filter: brightness(1); } }
.fx-pouring .hero-light { filter: brightness(1.25); transition: filter .6s ease; }
/* título e botões à esquerda, copão interativo à direita — em todas as larguras */
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 10px; width: 100%; max-width: 1240px; margin: 0 auto; }
.hero-copy { position: relative; z-index: 2; display: grid; gap: 12px; justify-items: start; min-width: 0; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 14px 6px 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero-kicker img { width: 30px; height: 30px; border-radius: 50%; }
.hero-kicker::before { content: ''; order: 3; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.hero-title { margin: 0; font: 400 clamp(2.1rem, 10.6vw, 7.8rem)/.9 var(--f-display); letter-spacing: .005em; text-wrap: balance; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .line > span { display: inline-block; }
.hero-title .accent { color: var(--pink); text-shadow: 0 0 34px rgba(255, 45, 138, .55); }
.hero-sub { margin: 0; font-size: clamp(.9rem, 3.4vw, 1.3rem); line-height: 1.45; color: #e8dbe4; max-width: 30ch; }
.hero-ctas { display: grid; gap: 10px; margin-top: 4px; width: 100%; max-width: 260px; }
.hero-ctas .btn { min-height: 46px; padding: 0 14px; font-size: clamp(.8rem, 3.3vw, 1.05rem); letter-spacing: .05em; white-space: nowrap; }
.hero-kicker { font-size: clamp(.56rem, 2.4vw, .85rem); padding: 4px 9px 4px 4px; gap: 6px; white-space: nowrap; letter-spacing: .05em; }
.hero-kicker img { width: 24px; height: 24px; }

/* palco da cena: no celular vem primeiro; o canvas cobre da borda superior
   da hero até o chão do palco, para o líquido nascer do topo da tela */
.hero-visual { position: relative; order: 0; height: clamp(360px, 62svh, 640px); display: grid; place-items: end center; }
.hero-scene { position: absolute; left: 0; top: 0; z-index: 1; cursor: pointer; }
.hero-fallback { width: clamp(150px, 40vw, 260px); height: auto; margin-bottom: 30px; filter: drop-shadow(0 0 24px rgba(255, 45, 138, .5)); }
/* a foto estática só aparece se a animação não puder rodar (evita o "outro copo" antes da cena) */
.hero-fallback { visibility: hidden; }
.scene-fail .hero-fallback, .hero-noscript .hero-fallback { visibility: visible; }
.hero-replay { position: absolute; z-index: 3; left: 50%; bottom: -6px; transform: translate(-50%, 8px); display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 45, 138, .7); background: rgba(10, 4, 10, .7); color: var(--white);
  font: 700 .78rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 18px rgba(255, 45, 138, .35); opacity: 0; transition: opacity .5s ease, transform .5s var(--ease), background .2s; }
.hero-replay svg { width: 16px; height: 16px; }
.hero-replay.on { opacity: 1; transform: translate(-50%, 0); }
.hero-replay:hover { background: rgba(255, 45, 138, .25); }

@media (prefers-reduced-motion: no-preference) {
  .hero-pre .hero-kicker, .hero-pre .hero-sub, .hero-pre .hero-ctas > * { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .hero-pre .hero-title .line > span { transform: translateY(105%); transition: transform 1s var(--ease); }
  .copy-in .hero-kicker { opacity: 1; transform: none; transition-delay: .15s; }
  .copy-in .hero-title .line > span { transform: none; transition-delay: .3s; }
  .copy-in .hero-title .accent > span { transition-delay: .45s; }
  .copy-in .hero-sub { opacity: 1; transform: none; transition-delay: .7s; }
  .copy-in .hero-ctas > * { opacity: 1; transform: none; transition-delay: .85s; }
  .copy-in .hero-ctas > *:nth-child(2) { transition-delay: .95s; }
}
.hero-scroll { position: absolute; left: 50%; bottom: 16px; width: 26px; height: 42px; margin-left: -13px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 14px; display: none; }
.hero-scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--pink); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 60% { transform: translateY(12px); opacity: 0; } }

/* ------------------------------------------------------------ cabeçalhos de seção */
.section-head { max-width: 1240px; margin: 0 auto 28px; display: grid; gap: 10px; }
.eyebrow { margin: 0; font: 400 1rem/1 var(--f-brush); color: var(--lime); letter-spacing: .02em; transform: rotate(-2deg); transform-origin: left; }
.section-title { margin: 0; font: 400 clamp(2.6rem, 11vw, 5.4rem)/.9 var(--f-display); letter-spacing: .005em; text-wrap: balance; }
.section-title em { font-style: normal; color: var(--pink); }
.section-lead { margin: 0; color: var(--muted); max-width: 58ch; font-size: 1.02rem; }

/* revelação ao rolar: visível em repouso, entra a partir do estado visível */
[data-reveal] { transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s; }
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal]:not(.in) { opacity: .35; transform: translateY(24px); }
}

/* ------------------------------------------------------------ configurador */
.config { position: relative; padding: 72px var(--gut-r) 80px var(--gut);
  background: radial-gradient(80% 50% at 50% 0%, rgba(255, 45, 138, .1), transparent 70%), var(--ink); }
.cfg { max-width: 1240px; margin: 0 auto; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 22px; overflow: clip; background: var(--ink-2); }
.cfg-stage { position: relative; display: grid; place-items: center; min-height: 0; height: clamp(330px, 52svh, 520px); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(255, 45, 138, .22), transparent 70%),
    linear-gradient(180deg, #0c0810 0%, #150c17 70%, #0a070c 100%); }
.stage-light { position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(100deg, transparent 0 12%, rgba(255, 45, 138, .18) 14%, transparent 30%),
    linear-gradient(0deg, rgba(255,255,255,.04), transparent 22%);
}
.cfg-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(255, 45, 138, .07)), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 40px); }
.glass-host { position: absolute; inset: 44px 0 26px; display: block; }
.glass-host > .mix-canvas { display: block; width: 100%; height: 100%; }
.glass-fallback { margin: auto; height: 100%; }
.glass-svg { display: block; height: 100%; width: 100%; max-width: 100%; overflow: visible; transition: transform 1.2s var(--ease), filter 1.2s; }
.glass-fallback { display: grid; gap: 12px; place-items: center; text-align: center; padding: 24px; color: var(--muted); max-width: 32ch; }
.glass-fallback img { width: 120px; border-radius: 50%; }
.stage-hud { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; pointer-events: none; }
.stage-name { margin: 0; font: 400 1.15rem/1.1 var(--f-display); letter-spacing: .03em; color: var(--white); }
.stage-status { margin: 0; font-size: .8rem; font-weight: 700; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
.stage-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.is-busy .stage-status::before { background: var(--pink); box-shadow: 0 0 10px var(--pink); animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.stage-note { position: absolute; left: 16px; right: 16px; bottom: 8px; margin: 0; font-size: .68rem; color: rgba(181, 167, 178, .7); text-align: center; }

/* animações das camadas do copo */
.glass-svg .item { transition: opacity .4s ease; }
.glass-svg .leaving { opacity: 0 !important; transition: opacity .4s ease, transform .4s ease; }
.glass-svg .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw .9s var(--ease) var(--delay) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.glass-svg .drip { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: dripIn .4s var(--ease) forwards; }
@keyframes dripIn { to { transform: scale(1); } }
.glass-svg .bubble { transform-box: fill-box; animation: bubble 4s linear infinite; }
@keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-260px); opacity: 0; } }
.glass-svg .cream .blob { transform: scale(0); transition: transform .55s cubic-bezier(.3, 1.5, .5, 1); }
.glass-svg .cream.on .blob { transform: scale(1); }
.glass-svg .cream > ellipse { opacity: 0; transition: opacity .4s ease; }
.glass-svg .cream.on > ellipse { opacity: 1; }
.glass-svg .popsicle .popsicle-drop { transform: translate(40px, -240px) rotate(-24deg); opacity: 0; transition: transform .85s cubic-bezier(.3, 1.35, .5, 1), opacity .3s ease; transform-origin: 220px 120px; }
.glass-svg .popsicle.on .popsicle-drop { transform: none; opacity: 1; }
.glass-svg .roll-drop { animation: roll 9s ease-in infinite; }
@keyframes roll { 0%, 40% { transform: translateY(0); opacity: 1; } 90% { transform: translateY(120px); opacity: .6; } 100% { transform: translateY(130px); opacity: 0; } }
.glass-svg .light-sweep { opacity: 0; }
.glass-svg.is-finished .light-sweep { animation: gSweep 1.6s var(--ease) .1s both; }
@keyframes gSweep { 0% { opacity: 0; transform: skewX(-14deg) translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: skewX(-14deg) translateX(640px); } }
.glass-svg.is-finished { animation: present 1.6s var(--ease); }
@keyframes present { 0% { transform: scale(1); } 45% { transform: scale(1.035) translateY(-4px); filter: drop-shadow(0 0 26px rgba(255, 45, 138, .45)); } 100% { transform: none; } }
.glass-svg .crown { transform-box: fill-box; transform-origin: 50% 100%; animation: crownUp .62s cubic-bezier(.2,.8,.3,1) forwards; }
.glass-svg .crown.big { animation-duration: 1.2s; }
@keyframes crownUp { 0% { transform: scale(.55, .05); opacity: 0; } 18% { opacity: 1; } 55% { transform: scale(1, 1); opacity: .95; } 100% { transform: scale(1.06, 1.04) translateY(-4px); opacity: 0; } }
.glass-svg .liquid-surface-tex { mix-blend-mode: overlay; }
.glass-svg .glass-logo { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

/* painel */
.cfg-panel { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.cfg-steps { list-style: none; margin: 0; padding: 10px 10px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-top: 1px solid var(--line); }
.cfg-steps button { width: 100%; min-height: 48px; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.cfg-steps b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); font-size: .78rem; font-variant-numeric: tabular-nums; }
.cfg-steps button[aria-current] { color: var(--white); }
.cfg-steps button[aria-current] b { background: var(--pink); border-color: var(--pink); color: var(--white); box-shadow: 0 0 14px rgba(255, 45, 138, .6); }
.cfg-steps button.is-done b { border-color: var(--lime); color: var(--lime); }
.cfg-body { padding: 18px 16px 8px; min-width: 0; }
.step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.step.is-active { display: grid; gap: 14px; animation: stepIn .45s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } }
.step-title { margin: 0; padding: 0; font: 400 1.5rem/1.05 var(--f-display); letter-spacing: .02em; outline: none; }
.step-sub { display: block; margin-top: 4px; font: 700 .72rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* CARDÁPIO: as categorias são o cardápio. Cartazes verticais com a foto real
   em destaque, etiqueta de preço e os sabores à mostra. */
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cat-card { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; cursor: pointer; isolation: isolate;
  background: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line); transition: transform .35s var(--ease), box-shadow .3s; min-width: 0; }
.cat-card input { position: absolute; opacity: 0; pointer-events: none; }
.cat-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px rgba(255, 45, 138, .6), 0 18px 40px -18px rgba(255, 45, 138, .6); }
.cat-card:has(input:checked) { box-shadow: inset 0 0 0 2.5px var(--pink), 0 0 34px -6px rgba(255, 45, 138, .7); }
.cat-card:has(input:focus-visible) { outline: 3px solid var(--lime); outline-offset: 3px; }
.cat-photo { position: relative; display: block; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: linear-gradient(135deg, var(--pink-deep), var(--ink)); }
.cat-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); filter: saturate(1.08) contrast(1.05); }
.cat-card:hover .cat-photo img { transform: scale(1.06); }
.cat-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,5,10,0) 45%, rgba(7,5,10,.55) 72%, var(--ink-3) 100%); }
.cat-body { position: relative; z-index: 2; display: grid; gap: 6px; align-content: start; margin-top: -54px; padding: 0 12px 14px; min-width: 0; }
.cat-name { font: 400 clamp(1.35rem, 6vw, 1.9rem)/.95 var(--f-display); letter-spacing: .02em; text-wrap: balance; text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.cat-body small { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.cat-flavors { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.cat-fl { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.cat-fl .swatch { width: 14px; height: 14px; }
.cat-fl .fl-fruit { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.cat-fl.is-pending { padding: 3px 9px; color: #e9ffc0; border-color: rgba(200,255,62,.35); background: rgba(200,255,62,.08); }
.cat-price { position: absolute; z-index: 3; top: 10px; right: 10px; font: 400 1rem/1 var(--f-brush); color: var(--white); background: var(--pink); padding: 7px 10px 5px; border-radius: 4px; transform: rotate(-4deg); box-shadow: 0 6px 18px -6px rgba(255,45,138,.9); white-space: nowrap; }
.cat-flag { position: absolute; z-index: 3; top: 12px; left: 12px; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--lime); padding: 4px 8px; border-radius: 5px; }
.cat-check { position: absolute; z-index: 3; left: 10px; bottom: 10px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: rgba(7,5,10,.5); transition: all .25s var(--ease); display: none; }
.cat-card:has(input:checked) .cat-check { display: block; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--pink); left: auto; right: 10px; bottom: auto; top: 46px; }
/* Copão LL em destaque: cartaz horizontal ocupando as duas colunas */
.cat-card.is-featured { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
.cat-card.is-featured .cat-photo { aspect-ratio: auto; height: 100%; min-height: 230px; }
.cat-card.is-featured .cat-photo::after { background: linear-gradient(90deg, rgba(7,5,10,0) 55%, var(--ink-3) 100%); }
.cat-card.is-featured .cat-body { margin: 0; padding: 18px 14px 16px 6px; align-content: center; }
.cat-card.is-featured .cat-name { font-size: clamp(1.8rem, 8vw, 2.6rem); color: var(--pink); }
.cat-card.is-featured .cat-price { right: 12px; left: auto; top: 12px; bottom: auto; }
.cat-card.is-featured .cat-body { padding-top: 52px; }
/* Caipirinhas: as frutas de cada sabor saltam do cartaz */
.cat-pop { position: absolute; z-index: 1; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; pointer-events: none; }
.cat-pop img { position: absolute; width: 34%; height: auto; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); transition: transform .6s var(--ease); }
.cat-pop .pop-0 { right: -5%; top: 18%; width: 32%; transform: rotate(-18deg); }
.cat-pop .pop-1 { left: -7%; top: 34%; width: 34%; transform: rotate(12deg); }
.cat-pop .pop-2 { right: 18%; top: 48%; width: 26%; transform: rotate(24deg); }
.cat-card:hover .cat-pop .pop-0 { transform: rotate(-26deg) translate(6px, -10px) scale(1.08); }
.cat-card:hover .cat-pop .pop-1 { transform: rotate(4deg) translate(-6px, -8px) scale(1.08); }
.cat-card:hover .cat-pop .pop-2 { transform: rotate(34deg) translate(4px, -12px) scale(1.08); }
@media (prefers-reduced-motion: no-preference) {
  .cat-pop img { animation: popFloat 5s ease-in-out infinite; }
  .cat-pop .pop-1 { animation-delay: -1.6s; } .cat-pop .pop-2 { animation-delay: -3.1s; }
}
@keyframes popFloat { 50% { translate: 0 -6px; } }
.fl-fruit { width: 26px; height: 26px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.duo-sw { background: conic-gradient(#6fbff0, #f3a2b0, #f6cf62, #6fbff0); }
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip > span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 54px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--ink-3); font-weight: 700; transition: border-color .2s, background .2s; }
.chip > span small { flex-basis: 100%; margin-left: 32px; margin-top: -6px; color: var(--muted); font-weight: 600; font-size: .74rem; }
.chip:hover > span { border-color: rgba(255, 45, 138, .6); }
.chip input:checked + span { border-color: var(--pink); background: rgba(255, 45, 138, .14); }
.chip input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 2px; }
.swatch { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 0 12px rgba(255,255,255,.08); }
.chip-sm > span { min-height: 46px; }
.duo { display: grid; gap: 10px; padding: 14px; border-radius: var(--r); border: 1px dashed rgba(255, 45, 138, .5); }
.duo-title { margin: 0; font-size: .92rem; }
.pending { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(200, 255, 62, .08); border: 1px solid rgba(200, 255, 62, .35); color: #e9ffc0; font-size: .9rem; }
.recipe { margin: 0; color: var(--muted); font-size: .92rem; }
.opt-list { display: grid; gap: 10px; }
.opt { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; text-align: left; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--ink-3); cursor: pointer; transition: border-color .2s, background .2s; }
.opt:hover { border-color: rgba(255, 45, 138, .6); }
.opt.is-on { border-color: var(--pink); background: rgba(255, 45, 138, .1); }
.opt-text { display: grid; min-width: 0; }
.opt-text small { color: var(--muted); font-size: .78rem; }
.opt-tag { font-size: .74rem; font-weight: 800; letter-spacing: .04em; color: var(--lime); white-space: nowrap; }
.opt-tag.is-paid { color: var(--white); background: var(--pink); padding: 3px 7px; border-radius: 6px; }
.switch { width: 40px; height: 24px; border-radius: 12px; background: var(--line); position: relative; transition: background .2s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); transition: transform .25s var(--ease); }
.opt.is-on .switch { background: var(--pink); }
.opt.is-on .switch i { transform: translateX(16px); }
.opt-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--ink-2) center/70% no-repeat; border: 1px solid var(--line); }
.opt-ice { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='5' y='7' width='16' height='14' rx='3' fill='%23dff6ff' fill-opacity='.35' stroke='%23fff'/%3E%3Crect x='13' y='13' width='14' height='13' rx='3' fill='%23dff6ff' fill-opacity='.45' stroke='%23fff'/%3E%3C/svg%3E"); }
.opt-cream { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 22c0-4 3-6 6-6 0-4 3-7 6-7s5 3 5 6c3 0 5 3 5 7Z' fill='%23fff'/%3E%3C/svg%3E"); }
.opt-popsicle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='9' y='3' width='14' height='19' rx='7' fill='%23ff2d8a'/%3E%3Crect x='14.5' y='20' width='3' height='9' rx='1.5' fill='%23e9cf9b'/%3E%3C/svg%3E"); }
.opt-nutella { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 6h20v6c0 2-2 2-2 5s-2 3-2 6-2 3-3 0-2-4-3-6-3-1-4-4-3-1-4-3Z' fill='%23592b14'/%3E%3C/svg%3E"); }
.review { margin: 0; display: grid; gap: 0; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; }
.review > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.review > div:last-child { border-bottom: 0; background: rgba(255, 45, 138, .08); }
.review dt { color: var(--muted); font-size: .85rem; font-weight: 700; }
.review dd { margin: 0; font-weight: 700; min-width: 0; }
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty button { width: 46px; height: 46px; border: 0; background: var(--ink-3); cursor: pointer; font-size: 1.3rem; font-weight: 700; }
.qty button:hover { background: rgba(255, 45, 138, .2); }
.qty output { min-width: 40px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.qty-sm button { width: 38px; height: 38px; font-size: 1.1rem; }
.qty-sm output { min-width: 30px; }
.cfg-error { min-height: 0; margin: 10px 0 0; color: var(--danger); font-weight: 700; font-size: .9rem; }
.cfg-error:empty { margin: 0; }
.cfg-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: rgba(17, 12, 20, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cfg-price { display: grid; line-height: 1.1; min-width: 0; }
.cfg-price-label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cfg-price strong { white-space: nowrap; font: 400 1.7rem/1.05 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cfg-price small { color: var(--muted); font-size: .74rem; }
.cfg-actions { display: flex; gap: 8px; }
#cfgNext.is-add { background: var(--lime); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(200, 255, 62, .8); }

/* ------------------------------------------------------------ cardápio */
.menu { padding: 80px var(--gut-r) 80px var(--gut); }
.menu-grid { max-width: 1240px; margin: 0 auto; display: grid; gap: 18px; grid-template-columns: 1fr; }
.menu-card { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); min-width: 0; }
.menu-media { position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: linear-gradient(135deg, #2a0f20, var(--ink)); }
.menu-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(1.05) contrast(1.04); }
.menu-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7, 5, 10, .85)); }
.menu-card:hover .menu-media img { transform: scale(1.05); }
.menu-body { position: relative; margin-top: -64px; z-index: 1; padding: 0 18px 18px; display: grid; gap: 8px; align-content: start; }
.menu-body h3 { margin: 0; font: 400 2rem/1 var(--f-display); letter-spacing: .02em; text-wrap: balance; }
.menu-body p { margin: 0; color: var(--muted); font-size: .92rem; }
.menu-body .flv { color: var(--text); font-weight: 700; font-size: .85rem; }
.badge { justify-self: start; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--lime); color: var(--ink); padding: 4px 8px; border-radius: 5px; }
.menu-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.price-tag { font: 400 1.5rem/1 var(--f-brush); color: var(--white); background: var(--pink); padding: 8px 12px 6px; border-radius: 4px; transform: rotate(-3deg); box-shadow: 0 0 22px rgba(255, 45, 138, .4); }
.menu-foot { max-width: 1240px; margin: 26px auto 0; text-align: center; }
.img-err img { display: none; }

/* ------------------------------------------------------------ combos */
.combos { display: grid; gap: 28px; padding: 40px var(--gut-r) 90px var(--gut); max-width: calc(1240px + 64px); margin: 0 auto; align-items: center; }
.combos-media { position: relative; border-radius: 22px; overflow: hidden; max-width: 100%;
  box-shadow: 0 0 0 1px rgba(255, 45, 138, .6), 0 0 60px -10px rgba(255, 45, 138, .6), -30px 0 80px -30px rgba(255, 45, 138, .7); }
.combos-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: contrast(1.08) saturate(1.05); }
.combos-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(255, 45, 138, .25), transparent 40%), linear-gradient(0deg, rgba(7,5,10,.55), transparent 35%); mix-blend-mode: normal; }
.combos-copy { display: grid; gap: 18px; justify-items: center; text-align: center; min-width: 0; max-width: 760px; margin: 0 auto; }
.combos-copy .eyebrow { transform-origin: center; }
.combos-title span, .combos-title em { display: block; }
.combos-title em { margin-top: .28em; }
#combosCta { line-height: 1.2; text-align: center; padding-block: 10px; }
.combos-copy .combos-text { margin-inline: auto; }
.combos-text { margin: 0; color: var(--muted); font-size: 1.05rem; max-width: 46ch; }
.combo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.combo-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); }
.combo-list span { color: var(--muted); font-size: .9rem; }
.combo-list em { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 400 1.3rem var(--f-brush); font-style: normal; color: var(--pink); }

/* ------------------------------------------------------------ como pedir */
.how { padding: 70px var(--gut-r) 90px var(--gut); border-top: 1px solid var(--line); }
.how-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1240px; display: grid; gap: 14px; }
.how-list li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 4px 16px; padding: 20px; border-left: 2px solid var(--pink); background: linear-gradient(90deg, rgba(255, 45, 138, .08), transparent 70%); }
.how-list svg { grid-row: 1 / 4; width: 48px; height: 48px; color: var(--pink); }
.how-list b { font: 400 .95rem/1 var(--f-brush); color: var(--lime); }
.how-list h3 { margin: 0; font: 400 1.6rem/1.05 var(--f-display); letter-spacing: .02em; }
.how-list p { margin: 0; color: var(--muted); }
.how-list li:hover svg { animation: wiggle .6s var(--ease); }
@keyframes wiggle { 30% { transform: rotate(-8deg) scale(1.08); } 60% { transform: rotate(5deg); } }

/* ------------------------------------------------------------ rodapé */
.footer { padding: 56px var(--gut-r) calc(36px + env(safe-area-inset-bottom, 0px)) var(--gut); background: #050307; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.footer > * { max-width: 1240px; width: 100%; margin: 0 auto; }
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand img { width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 0 30px rgba(255, 45, 138, .4); }
.footer-brand p { margin: 0; font: 400 1.6rem/1.05 var(--f-display); }
.footer-info { margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer-info dt { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); margin-bottom: 4px; }
.footer-info dd { margin: 0; color: var(--text); font-weight: 600; }
.footer-info a { text-decoration-color: var(--pink); text-underline-offset: 4px; }
.pend { color: var(--muted); font-weight: 600; font-style: italic; }
.footer-legal { color: var(--muted); font-size: .8rem; margin: 0 auto; }

/* ------------------------------------------------------------ carrinho */
.drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s; }
.drawer-scrim.on { opacity: 1; }
.drawer { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(100%, 460px); display: grid; grid-template-rows: auto 1fr;
  background: var(--ink-2); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .35s var(--ease);
  padding-top: env(safe-area-inset-top, 0px); padding-right: env(safe-area-inset-right, 0px); }
.drawer.on { transform: none; }
.cart-open { overflow: hidden; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font: 400 1.8rem/1 var(--f-display); letter-spacing: .02em; }
.drawer-body { overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 16px; align-content: start; }
.cart-empty { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 40px 10px; color: var(--muted); }
.cart-empty svg { width: 70px; color: var(--pink); }
.cart-empty p { margin: 0; }
.cart-empty b { color: var(--text); }
.cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cart-list:empty { display: none; }
.cart-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-3); animation: stepIn .35s var(--ease); }
.cart-item > svg { width: 34px; }
.cart-item > .ci-thumb { width: 44px; height: 66px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(255, 45, 138, .35)); }
.ci-main { display: grid; gap: 4px; min-width: 0; }
.ci-main b { line-height: 1.25; }
.ci-main small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.ci-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ci-unit { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.ci-side { display: grid; justify-items: end; align-content: space-between; gap: 8px; }
.ci-sub { font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout { display: grid; gap: 14px; }
.cart-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 6px; }
.cart-total-row span { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; color: var(--muted); }
.cart-total-row strong { font: 400 1.9rem/1 var(--f-display); font-variant-numeric: tabular-nums; text-align: right; }
.fee-note, .field-hint { margin: -6px 0 0; color: var(--muted); font-size: .8rem; }
.form-title { margin: 8px 0 0; font: 400 1.25rem/1 var(--f-display); letter-spacing: .03em; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: grid; place-items: center; min-height: 50px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--ink-3); font-weight: 800; text-align: center; }
.seg input:checked + span { border-color: var(--pink); background: rgba(255, 45, 138, .15); }
.seg input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 2px; }
.field { display: grid; gap: 6px; font-weight: 700; font-size: .85rem; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--ink); color: var(--text); font: 500 1rem var(--f-body); }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--pink); }
.field.invalid input { border-color: var(--danger); }
.addr { display: grid; gap: 14px; }
.form-error { margin: 0; color: var(--danger); font-weight: 700; font-size: .88rem; }
.form-error:empty { display: none; }
.legal-note { margin: -4px 0 0; color: var(--muted); font-size: .76rem; text-align: center; }
.sent-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(37, 211, 102, .1); border: 1px solid rgba(37, 211, 102, .45); font-size: .88rem; }
.sent-note a { color: var(--lime); font-weight: 800; }
.clear-confirm { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: .85rem; }

/* ------------------------------------------------------------ diálogo + toast */
.menu-dialog { padding: 0; border: 0; background: transparent; max-width: min(92vw, 560px); max-height: 92svh; }
.menu-dialog::backdrop { background: rgba(0, 0, 0, .82); }
.menu-dialog img { max-height: 88svh; width: auto; border-radius: 12px; }
.menu-dialog .icon-btn { position: absolute; top: 8px; right: 8px; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); width: max-content; max-width: calc(100% - 32px);
  padding: 12px 16px; border-radius: 14px; background: var(--white); color: var(--ink); font-size: .9rem; box-shadow: 0 16px 40px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast-btn { margin-left: 8px; border: 0; background: var(--pink); color: var(--white); border-radius: 999px; padding: 6px 12px; font-weight: 800; cursor: pointer; }
.noscript { padding: 16px; text-align: center; background: var(--pink); }

/* ------------------------------------------------------------ breakpoints */
@media (min-width: 600px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .how-list { grid-template-columns: repeat(3, 1fr); }
  .how-list li { grid-template-columns: 1fr; border-left: 0; border-top: 2px solid var(--pink); background: linear-gradient(180deg, rgba(255, 45, 138, .08), transparent 70%); }
  .how-list svg { grid-row: auto; }
  .cart-btn-label { display: inline; }
}
@media (min-width: 960px) {
  .nav { display: flex; }
  .cart-btn { margin-left: 18px; }
  .hero { min-height: min(100svh, 940px); padding-top: calc(84px + env(safe-area-inset-top, 0px)); --hx: 74%; --hy: 46%; }
  .hero-inner { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 22px; }
  .hero-visual { height: min(80svh, 740px); }
  .hero-ctas { display: flex; flex-wrap: wrap; max-width: none; }
  .hero-ctas .btn { min-height: 52px; padding: 0 26px; }
  .hero-kicker { font-size: .85rem; padding: 6px 14px 6px 6px; gap: 10px; }
  .hero-kicker img { width: 30px; height: 30px; }
  .hero-copy { gap: 18px; }
  .hero-scroll { display: block; }
  .cfg { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .cfg-stage { height: min(86svh, 720px); min-height: 560px; position: sticky; top: 70px; align-self: start; border-right: 1px solid var(--line); }
  .cfg-steps { border-top: 0; padding: 16px 16px 0; }
  .cfg-body { padding: 22px 26px 10px; }
  .cfg-bar { position: static; padding: 16px 26px 20px; }
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-card.is-hero { grid-column: span 2; grid-template-columns: 1.1fr .9fr; grid-template-rows: none; }
  .menu-card.is-hero .menu-media { aspect-ratio: auto; height: 100%; min-height: 420px; }
  .menu-card.is-hero .menu-media::after { background: linear-gradient(90deg, transparent 60%, rgba(17, 12, 20, .95)); }
  .menu-card.is-hero .menu-body { margin: 0; padding: 32px 28px; align-content: center; }
  .menu-card.is-hero h3 { font-size: 3.2rem; }
  .combos { gap: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ícone moderno de copão (botão do topo e modal "Meus copões") */
.cup-ico { width: 24px; height: 24px; flex: none; }
.cart-btn .cup-ico { color: var(--white); filter: drop-shadow(0 0 6px rgba(255, 45, 138, .7)); }
.cart-title-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: 10px; border-radius: 12px; vertical-align: -6px;
  background: linear-gradient(145deg, var(--pink), var(--pink-deep)); color: var(--white); box-shadow: 0 8px 22px -8px rgba(255, 45, 138, .9); }
.cart-title-ico .cup-ico { width: 24px; height: 24px; }
.drawer-head h2 { display: flex; align-items: center; }
.cart-empty .cup-ico-xl, .cup-ico-xl { width: 76px; height: 76px; color: var(--pink); filter: drop-shadow(0 0 18px rgba(255, 45, 138, .55)); }

/* =====================================================================
   v2 — refinamentos inspirados nas prévias do MotionSites AI
   ===================================================================== */
/* Hero: névoa rosa neon lenta + luz de fundo + parallax leve */
.hero { --px: 0; --py: 0; }
.hero-mist { position: absolute; inset: -10%; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 2s ease .4s;
  transform: translate3d(calc(var(--px) * -26px), calc(var(--py) * -18px), 0); filter: blur(42px); }
.is-ready .hero-mist { opacity: 1; }
.hero-mist i { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.hero-mist .m1 { width: 46vmax; height: 30vmax; left: 46%; top: 18%; background: radial-gradient(closest-side, rgba(255, 45, 138, .42), transparent); }
.hero-mist .m2 { width: 38vmax; height: 26vmax; left: 58%; top: 46%; background: radial-gradient(closest-side, rgba(196, 16, 106, .38), transparent); }
.hero-mist .m3 { width: 30vmax; height: 22vmax; left: 8%; top: 62%; background: radial-gradient(closest-side, rgba(255, 110, 180, .16), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .hero-mist .m1 { animation: mist1 22s ease-in-out infinite alternate; }
  .hero-mist .m2 { animation: mist2 28s ease-in-out infinite alternate; }
  .hero-mist .m3 { animation: mist3 34s ease-in-out infinite alternate; }
  .fx-served .hero-scene { animation: cupFloat 6s ease-in-out infinite; }
}
@keyframes mist1 { to { transform: translate(-12%, 10%) scale(1.15); } }
@keyframes mist2 { to { transform: translate(10%, -12%) scale(.9); } }
@keyframes mist3 { to { transform: translate(18%, -8%) scale(1.2); } }
@keyframes cupFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.hero-scene { transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 8px), 0); transition: transform .4s ease-out; }
.hero-copy { transform: translate3d(calc(var(--px) * -6px), calc(var(--py) * -4px), 0); transition: transform .4s ease-out; }
.hero-light { transform: translate3d(calc(var(--px) * 18px), calc(var(--py) * 12px), 0); }

/* Montagem: luz do palco acompanha a cor do sabor, com transição */
@property --flavor { syntax: '<color>'; inherits: true; initial-value: #ff2d8a; }
.cfg-stage { --flavor: #ff2d8a; transition: --flavor .9s ease; }
.cfg-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 45% at 50% 52%, color-mix(in srgb, var(--flavor) 34%, transparent), transparent 72%); }
.cfg-progress { height: 3px; background: var(--line); margin: 0; position: relative; overflow: hidden; }
.cfg-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: linear-gradient(90deg, var(--pink), var(--lime)); transition: width .5s var(--ease); }
/* feedback imediato ao tocar e selecionar */
.cat-card:active, .chip:active > span, .opt:active, .seg label:active span { transform: scale(.97); }
.chip > span, .opt, .seg span { transition: transform .15s ease, border-color .2s, background .2s, box-shadow .2s; }
.chip input:checked + span { box-shadow: 0 0 0 3px rgba(255, 45, 138, .18), 0 10px 24px -14px rgba(255, 45, 138, .9); animation: popSel .35s var(--ease); }
.opt.is-on { box-shadow: 0 0 0 3px rgba(255, 45, 138, .14); }
.opt.is-on .opt-ico { animation: popSel .35s var(--ease); }
@keyframes popSel { 40% { transform: scale(1.05); } }
.cfg-price strong.bump { animation: priceBump .45s var(--ease); }
@keyframes priceBump { 40% { transform: scale(1.12); color: var(--lime); } }
.cfg-steps button.is-done b { background: rgba(200, 255, 62, .12); }

/* Pix */
.btn-pix { --bg: transparent; border-color: #32bcad; color: #b8fff6; }
.btn-pix svg { width: 20px; height: 20px; }
.btn-pix:hover { background: rgba(50, 188, 173, .14); }
.pix { display: grid; gap: 14px; padding: 16px; border-radius: 16px; border: 1px solid rgba(50, 188, 173, .5); background: linear-gradient(180deg, rgba(50, 188, 173, .1), rgba(50, 188, 173, .02)); }
.pix.in { animation: stepIn .4s var(--ease); }
.pix-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pix-head h3 { margin: 0; font: 400 1.35rem/1 var(--f-display); letter-spacing: .03em; outline: none; }
.pix-total { display: grid; gap: 2px; }
.pix-total span, .pix-label { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pix-total strong { font: 400 2.2rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.pix-total small, .pix-key small { color: var(--muted); font-size: .78rem; }
.pix-key { display: grid; gap: 6px; }
.pix-key-row { display: flex; gap: 8px; }
.pix-key-row input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--ink); color: var(--text); font: 600 .95rem var(--f-body); }
#pixCopy.is-copied { background: var(--lime); color: var(--ink); }
#pixCopy:disabled { opacity: .4; cursor: not-allowed; }
.pix-missing { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(200,255,62,.08); border: 1px solid rgba(200,255,62,.35); color: #e9ffc0; font-size: .85rem; }
.pix-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text); font-size: .9rem; }

/* v2 — botão "Copões" fixo no canto superior direito */
.site-header .cart-btn { order: 99; }

/* v2 — cards do cardápio aparecem durante a rolagem (em cascata) */
@media (prefers-reduced-motion: no-preference) {
  .cards-anim .cat-card:not(.reveal-done) {
    transition: opacity .7s var(--ease) var(--d, 0s), transform .9s cubic-bezier(.2, .9, .25, 1.12) var(--d, 0s), filter .7s var(--ease) var(--d, 0s), box-shadow .3s;
  }
  .cards-anim .cat-card:not(.is-shown) { opacity: 0; transform: translateY(48px) scale(.94); filter: blur(6px); }
  .cards-anim .cat-card:not(.reveal-done) .cat-photo img { transition: transform 1.3s var(--ease) var(--d, 0s); }
  .cards-anim .cat-card:not(.is-shown) .cat-photo img { transform: scale(1.18); }
  .cards-anim .cat-card:not(.reveal-done) .cat-price { transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0s) + .35s), opacity .4s calc(var(--d, 0s) + .35s); }
  .cards-anim .cat-card:not(.is-shown) .cat-price { opacity: 0; transform: rotate(-14deg) scale(.6); }
  .cards-anim .cat-card:not(.reveal-done) .cat-fl { transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .cards-anim .cat-card:not(.is-shown) .cat-fl { opacity: 0; transform: translateY(8px); }
  .cards-anim .cat-card.is-shown:not(.reveal-done) .cat-fl { transition-delay: calc(var(--d, 0s) + .45s); }
}

/* v2 — menu (Monte · Cardápio · Copões · Como pedir) também no celular,
   na mesma linha: logo à esquerda, links no meio, botão Copões à direita */
@media (max-width: 959px) {
  .site-header { gap: 10px; }
  .site-header .nav { display: flex; margin-left: auto; gap: clamp(8px, 2.6vw, 22px); }
  .site-header .nav a { font-size: clamp(.68rem, 3.1vw, .9rem); padding: 6px 0; white-space: nowrap; letter-spacing: .02em; }
  .site-header .cart-btn { margin-left: 0; flex: none; }
}
@media (max-width: 559px) {
  .site-header .brand-name { display: none; }
  .site-header .brand img { width: 36px; height: 36px; }
  .site-header .cart-btn { padding: 0 8px 0 9px; gap: 5px; min-height: 40px; }
  .site-header .cart-btn svg { width: 19px; height: 19px; }
}
.site-header .brand, .site-header .brand img { flex: none; }
@media (max-width: 374px) {
  .site-header { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .site-header .brand img { width: 30px; height: 30px; }
  .site-header .nav { gap: 7px; }
  .site-header .nav a { font-size: clamp(.62rem, 3.05vw, .7rem); letter-spacing: 0; }
  .site-header .cart-btn { padding: 0 6px 0 7px; gap: 4px; min-height: 38px; }
  .site-header .cart-btn svg { width: 17px; height: 17px; }
  .site-header .cart-count { min-width: 20px; height: 20px; font-size: .72rem; }
}
@media (min-width: 560px) and (max-width: 759px) {
  .site-header .cart-btn-label { display: none; }
  .site-header .nav { gap: 14px; }
}

/* v2 — local de entrega (frete): 3 botões de opção */
.zone-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zone-opt { position: relative; cursor: pointer; }
.zone-opt input { position: absolute; opacity: 0; pointer-events: none; }
.zone-opt span { display: grid; gap: 3px; place-items: center; text-align: center; min-height: 64px; padding: 10px 6px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--ink-3); transition: border-color .2s, background .2s, transform .15s; }
.zone-opt b { font-size: clamp(.78rem, 3.4vw, .9rem); line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
.zone-opt small { font-size: .8rem; color: var(--muted); font-weight: 700; }
.zone-opt input:checked + span { border-color: var(--pink); background: rgba(255, 45, 138, .14); box-shadow: 0 0 0 3px rgba(255, 45, 138, .18); }
.zone-opt input:checked + span small { color: var(--pink); }
.zone-opt input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.zone-opt:active span { transform: scale(.97); }
.zone-field.invalid .zone-opt span { border-color: #ff5a6e; }