/* Igarapé Açaí — estilos
   Fontes: Bricolage Grotesque (display), Manrope (texto), Dela Gothic One (katakana decorativo) */

:root {
  --bg: #2A0E2E; --bg2: #3A1640; --bg3: #4A1D50; --vivo: #6B1E6E; --cena: #1c011c;
  --creme: #F6EEDC; --folha: #3E7B3A; --sol: #F2B53A; --ink: #1C0920;
  --muted: rgba(246,238,220,.74); --line: rgba(246,238,220,.14); --line2: rgba(246,238,220,.28);
  --r-lg: 28px; --sh-pop: 8px 8px 0 #0E0310;
  --ez: cubic-bezier(.22,1,.36,1);
  --gut: clamp(16px,3vw,40px);
  --hdr: 68px; --top: 0px;
  --d: 'Bricolage Grotesque', sans-serif;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
html, body { margin: 0; background: var(--bg); color: var(--creme); font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
html, body { overflow-x: clip }
img { max-width: 100%; display: block }
a { color: var(--sol) }
a:hover { color: var(--creme) }
button { font: inherit; cursor: pointer; color: inherit }
button:disabled { cursor: not-allowed }
input, select, textarea { font: inherit }
:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px }
::selection { background: var(--sol); color: var(--ink) }
html { scrollbar-color: var(--vivo) var(--bg); accent-color: var(--sol); caret-color: var(--sol) }
::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: var(--vivo); border-radius: 999px; border: 2px solid var(--bg) }
.ico { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.x, .rbtn, .banner .b-x { display: inline-flex; align-items: center; justify-content: center }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
[hidden] { display: none !important }

/* ---------- peças tipográficas ---------- */
.d { font-family: var(--d); font-weight: 800; letter-spacing: -.04em }
.tw { font-family: var(--d); font-weight: 800; text-shadow: 3px 3px 0 var(--ink) }
.sol { color: var(--sol) }
.kick { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.jp { font-family: 'Dela Gothic One', sans-serif; font-weight: 400; letter-spacing: .3em; color: var(--sol) }
.muted { color: var(--muted) }
.tag-ex { display: inline-flex; padding: 4px 10px; border: 1px dashed var(--line2); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.wrap { padding-left: var(--gut); padding-right: var(--gut) }
.logo { display: flex; align-items: baseline; gap: 6px; text-decoration: none; color: var(--creme) }
.logo__n { position: relative; font-family: var(--d); font-weight: 800; font-size: 26px; letter-spacing: -.04em }
.logo__n img { position: absolute; left: 2%; bottom: -7px; width: 96%; height: 8px }
.logo__a { font-family: var(--d); font-weight: 800; text-shadow: 2px 2px 0 var(--ink); font-size: 17px; color: var(--sol) }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px; border: 0; background: transparent; white-space: nowrap; transition: transform .25s var(--ez), box-shadow .25s var(--ez) }
.btn-sol { background: var(--sol); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--creme); font-family: var(--d); font-size: 17px }
.btn-sol:hover { color: var(--ink); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--creme) }
.btn-sol:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--creme) }
.btn-line { border: 3px solid var(--creme); color: var(--creme) }
.btn-line:hover { background: var(--creme); color: var(--ink) }
.btn-ghost { border: 1.5px solid var(--line2); color: var(--creme) }
.btn-ghost:hover { border-color: var(--creme); color: var(--creme) }
.btn-off, .btn-sol:disabled { background: var(--bg3); color: var(--muted); border-color: var(--bg3); box-shadow: none; transform: none }
.btn-full { width: 100% }

/* chip selecionável (aria-pressed) */
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 10px; border-radius: 999px; border: 1.5px solid var(--line2); background: transparent; color: var(--creme); font-weight: 700; font-size: 14px; text-align: left; transition: background .2s, border-color .2s, transform .2s }
.chip:active { transform: scale(.97) }
.chip[aria-pressed="true"] { background: var(--sol); border-color: var(--sol); color: var(--ink) }
.chip:disabled { opacity: .4 }
.sw { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--line2) }

/* ---------- link sublinhado animado ---------- */
.ul { color: var(--creme); text-decoration: none; padding: 6px 0; background: linear-gradient(var(--sol),var(--sol)) left bottom / 0% 2px no-repeat; transition: background-size .35s var(--ez) }
.ul:hover { background-size: 100% 2px; color: var(--creme) }

/* ---------- preloader ---------- */
.pre { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(20px,4vw,48px); transition: opacity .6s var(--ez) }
.pre.is-out { opacity: 0; pointer-events: none }
.pre__top { display: flex; justify-content: space-between; gap: 10px }
.pre__brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap }
.pre__n { position: relative; font-family: var(--d); font-weight: 800; font-size: clamp(64px,13vw,200px); line-height: .85; letter-spacing: -.045em }
.pre__n img { position: absolute; left: 2%; bottom: -.16em; width: 96%; height: .12em }
.pre__a { font-size: clamp(40px,7vw,110px); color: var(--sol); line-height: .85 }
.pre__bot { display: flex; align-items: flex-end; gap: 20px }
.pre__bar { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden }
.pre__bar i { position: absolute; inset: 0; background: var(--sol); transform-origin: left; transform: scaleX(0) }
.pre__pct { font-family: var(--d); font-weight: 700; font-size: clamp(40px,6vw,88px); line-height: .8; font-variant-numeric: tabular-nums; letter-spacing: -.03em }

/* ---------- faixa de quem volta ---------- */
.banner { position: fixed; top: 0; left: 0; right: 0; z-index: 70; min-height: 52px; background: var(--sol); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px clamp(8px,1.4vw,18px); padding: 6px 12px; font-size: 14px; font-weight: 700 }
.banner button { min-height: 40px; border: 0; background: transparent; color: var(--ink); font-weight: 800; font-size: 13px; padding: 0 6px }
.banner .b-main { padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--creme) }
.banner .b-x { width: 40px; font-size: 20px }
body.has-banner { --top: 52px }

/* ---------- header ---------- */
.hdr { position: fixed; left: 0; right: 0; top: var(--top); z-index: 60; height: var(--hdr); display: flex; align-items: center; gap: clamp(10px,2vw,28px); padding: 0 clamp(14px,3vw,40px); transition: background .4s, top .3s }
.hdr.is-solid { background: rgba(28,8,32,.92) }
.hdr nav { display: none; gap: 26px; margin-left: 24px; font-size: 14px; font-weight: 600 }
.hdr__r { margin-left: auto; display: flex; align-items: center; gap: 12px }
.status { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); font-size: 12px; font-weight: 700; white-space: nowrap }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #E0565B }
.status.is-open i { background: #7ED07A }
.hdr .btn-sol { min-height: 44px; padding: 0 20px; font-size: 15px }
@media (min-width: 1100px) { .hdr nav { display: flex } }
@media (max-width: 759px) { .hdr .btn-sol { display: none } }

/* ---------- HERO cinematográfico (vídeo na rolagem) ---------- */
.cine { position: relative; height: 420svh; background: var(--cena) }
.cine__stage { position: sticky; top: 0; height: 100svh; overflow: hidden }
.cine__scene { position: absolute; inset: 0; transform-origin: 50% 60%; will-change: transform }
.cine__cv { position: absolute; inset: 0; width: 100%; height: 100% }
.cine__fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(28,1,28,.92) 0%, rgba(28,1,28,.55) 34%, rgba(28,1,28,0) 56%) }
.cine__copy { position: absolute; left: clamp(16px,4vw,64px); top: calc(var(--hdr) + var(--top) + clamp(24px,8svh,96px)); width: min(46%, 620px); z-index: 3 }
.cine__slot { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; gap: clamp(12px,2vh,20px); opacity: 0; pointer-events: none; transition: opacity .5s var(--ez) }
.cine__slot.is-on { opacity: 1; pointer-events: auto }
.cine__num { display: flex; align-items: center; gap: 12px }
.cine__num b { font-family: var(--d); font-size: 14px; color: var(--sol); font-variant-numeric: tabular-nums }
.cine__t { margin: 0; font-family: var(--d); font-weight: 800; font-size: clamp(44px,5.8vw,92px); line-height: .9; letter-spacing: -.04em; text-wrap: balance }
.cine__t em { font-style: normal; color: var(--sol); text-shadow: .05em .05em 0 var(--ink) }
.cine__t .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-right: .2em }
.cine__t .w > span { display: inline-block }
.cine__sub { margin: 0; max-width: 38ch; font-size: clamp(16px,1.25vw,19px); line-height: 1.5; color: var(--muted); text-wrap: pretty }
.cine__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px }
.cine__iga { position: absolute; right: clamp(16px,5vw,80px); bottom: clamp(96px,16svh,170px); z-index: 3; display: flex; align-items: flex-end; gap: 10px }
.cine__iga img { width: clamp(72px,6.4vw,104px); height: auto; transition: transform .5s var(--ez) }
.fala { position: relative; display: inline-block; padding: 10px 14px; border-radius: 18px; background: var(--creme); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-family: var(--d); font-weight: 800; font-size: 15px; line-height: 1.25; max-width: 230px; text-wrap: balance; margin-bottom: 40px }
.fala::after { content: ""; position: absolute; right: -10px; bottom: 16px; width: 14px; height: 14px; background: var(--creme); border-right: 3px solid var(--ink); border-top: 3px solid var(--ink); transform: rotate(45deg) }
.cine__hud { position: absolute; left: clamp(16px,4vw,64px); right: clamp(16px,4vw,64px); bottom: 26px; z-index: 3; display: flex; align-items: center; gap: 16px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--muted) }
.cine__dots { display: flex; gap: 6px }
.cine__dots button { width: 24px; height: 24px; padding: 8px; box-sizing: border-box; border: 0; border-radius: 999px; background: var(--line2); background-clip: content-box; transition: width .4s var(--ez), background .4s }
.cine__dots button[aria-current="true"] { width: 40px; background-color: var(--sol) }
.cine__bar { flex: 1; height: 2px; background: var(--line); overflow: hidden }
.cine__bar i { display: block; height: 100%; background: var(--sol); transform-origin: left; transform: scaleX(0) }
.cine__frame { font-variant-numeric: tabular-nums; white-space: nowrap }
.cine__end { position: absolute; left: 0; right: 0; bottom: clamp(90px,14svh,150px); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; opacity: 0; pointer-events: none }
.cine__end.is-on { pointer-events: auto }
.cine__end .d { font-size: clamp(40px,6vw,96px); line-height: .9 }
.selo { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; border-radius: 999px; background: rgba(26,0,26,.86); border: 1px solid var(--line2); box-shadow: 0 12px 30px rgba(0,0,0,.4) }
.selo strong { display: block; font-family: var(--d); font-size: 15px }
.selo span span { font-size: 13px; color: var(--sol); font-weight: 800 }
.selo button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sol); color: var(--ink); font-size: 24px; font-weight: 800; line-height: 1 }
.cine__skip { min-height: 44px; position: absolute; right: clamp(16px,4vw,64px); bottom: 54px; z-index: 3; font-size: 12px; font-weight: 700; color: var(--muted); background: none; border: 0; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px }

@media (max-width: 759px) {
  .cine__fade { background: linear-gradient(180deg, rgba(28,1,28,.96) 0%, rgba(28,1,28,.7) 34%, rgba(28,1,28,0) 52%) }
  .cine__copy { left: 16px; right: 16px; width: auto; top: calc(var(--hdr) + var(--top) + 14px) }
  .cine__t { font-size: clamp(34px,9.6vw,44px) }
  .cine__sub { font-size: 15px }
  .cine__iga { right: 10px; bottom: 142px; flex-direction: column; align-items: flex-end; gap: 12px }
  .cine__iga img { width: 66px }
  .fala { font-size: 12.5px; max-width: min(136px, 34vw); margin-bottom: 0; padding: 9px 11px }
  .fala::after { right: 24px; bottom: -9px; transform: rotate(135deg) }
  .cine__hud { bottom: 86px }
  .cine__skip { bottom: 98px; right: 12px }
  .cine__end { bottom: 120px; padding: 0 16px }
}

/* ---------- prova rápida ---------- */
.prova { padding: clamp(72px,9vw,140px) var(--gut) clamp(56px,7vw,100px); border-top: 1px solid var(--line) }
.prova__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 28px; flex-wrap: wrap }
.prova__grid { display: flex; flex-wrap: wrap; gap: clamp(24px,4vw,64px); align-items: flex-end }
.prova__big { flex: 1.5 1 420px; min-width: 0 }
.prova__nota { font-family: var(--d); font-weight: 800; font-size: clamp(140px,19vw,300px); line-height: .78; letter-spacing: -.06em; font-variant-numeric: tabular-nums }
.prova__side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 28px; min-width: 0 }
.prova__row { border-top: 1px solid var(--line2); padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap }
.prova__row .d { font-size: clamp(56px,7vw,110px); line-height: .85; letter-spacing: -.05em; font-variant-numeric: tabular-nums }
.prova__row > span:last-child { font-size: 14px; color: var(--muted); max-width: 18ch }

/* ---------- monte seu açaí ---------- */
.monte { position: relative; padding: clamp(64px,8vw,120px) 0; background: var(--vivo); overflow: hidden; scroll-margin-top: 60px }
.monte__big { font-size: min(11.2vw,220px); line-height: .8; letter-spacing: -.05em; white-space: nowrap; padding: 0 var(--gut) }
.monte__jp { padding: 8px var(--gut) 0; font-size: 13px; letter-spacing: .5em; white-space: nowrap; overflow: hidden }
.monte__grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(20px,4vw,64px); padding: clamp(40px,4vw,64px) var(--gut) 0; align-items: start }
.cupbox { position: sticky; top: calc(96px + var(--top)); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 32px 28px; border-radius: var(--r-lg); background: var(--bg); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink) }
.cupbox__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; width: 100%; text-align: center }
.cupbox__total { font-family: var(--d); font-weight: 800; font-size: clamp(40px,4.4vw,64px); line-height: 1; letter-spacing: -.04em; color: var(--sol); font-variant-numeric: tabular-nums }
.cup { position: relative; width: 260px; height: 330px; flex: none; transform-origin: 50% 100%; transition: transform .6s var(--ez) }
.cup__glow { position: absolute; left: -30%; right: -30%; top: -10%; bottom: -10%; border-radius: 50%; background: radial-gradient(closest-side,rgba(150,60,160,.45),rgba(42,14,46,0)) }
.cup__shadow { position: absolute; left: 10%; right: 10%; bottom: -6%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0)) }
.cup__body { position: absolute; inset: 0; clip-path: polygon(3% 0,97% 0,84% 100%,16% 100%); background: linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 30%,rgba(255,255,255,.02) 65%,rgba(255,255,255,.13)); overflow: hidden }
.cup__fill { position: absolute; inset: 0; transform-origin: 50% 100%; transition: transform .8s var(--ez) }
.cup__band { position: absolute; left: -6%; right: -6%; border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%; box-shadow: inset 0 -3px 0 rgba(0,0,0,.14), inset 0 2px 0 rgba(255,255,255,.4) }
.cup__cob { position: absolute; left: 0; right: 0; height: 9%; transition: opacity .4s, top .8s var(--ez); border-radius: 0 0 40% 40% / 0 0 100% 100% }
.cup__drip { position: absolute; width: 4%; border-radius: 0 0 999px 999px; transform-origin: top }
.cup__drip.is-new { animation: escorre 1.4s var(--ez) both }
.cup__top { position: absolute }
.cup__top > div { width: 100%; height: 100%; border-radius: inherit; background: inherit }
.cup__top.is-new > div { animation: cair .9s var(--ez) both }
.cup__top img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)) }
.cup__shine { position: absolute; top: 0; bottom: 0; left: 16%; width: 7%; background: rgba(255,255,255,.12); transform: skewX(-6deg) }
.cup__glass { position: absolute; inset: 0; clip-path: polygon(3% 0,97% 0,84% 100%,16% 100%); pointer-events: none; background: linear-gradient(90deg,rgba(255,255,255,0) 9%,rgba(255,255,255,.3) 15%,rgba(255,255,255,0) 23%,rgba(255,255,255,0) 72%,rgba(255,255,255,.16) 80%,rgba(255,255,255,0) 88%) }
.cup__rim { position: absolute; left: -2%; right: -2%; top: -3%; height: 5%; border-radius: 50%; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.6); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(28,9,32,.4) }
.cup__foot { position: absolute; left: 15%; right: 15%; bottom: -1.5%; height: 4%; border-radius: 50%; border: 2px solid rgba(255,255,255,.28); border-top-color: transparent }
.ploft { position: absolute; left: 50%; width: 130%; height: 60%; transform: translate(-50%,-50%); pointer-events: none; z-index: 4 }
.ploft i { position: absolute; inset: -40% 10% 30%; background: repeating-linear-gradient(90deg,transparent 0 12px,rgba(246,238,220,.9) 12px 14px,transparent 14px 26px); -webkit-mask-image: linear-gradient(transparent,#000 40%,transparent); mask-image: linear-gradient(transparent,#000 40%,transparent); animation: linhas .55s ease-out both }
.ploft b { position: absolute; left: 50%; top: 30%; font-family: var(--d); font-weight: 800; font-size: clamp(26px,2.6vw,38px); color: var(--sol); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); white-space: nowrap; animation: ploft .9s var(--ez) both }
.passos { display: flex; flex-direction: column; gap: clamp(28px,3vw,40px); min-width: 0; padding-bottom: 20px }
.passo { display: flex; flex-direction: column; gap: 14px }
.passo__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.passo__h > span:first-child { font-family: var(--d); font-weight: 800; font-size: 44px; line-height: .8; color: var(--sol) }
.passo__h h3 { margin: 0; font-family: var(--d); font-size: 22px; font-weight: 700 }
.passo__count { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: var(--bg); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums }
.opts { display: grid; gap: 10px }
.opts--size { grid-template-columns: repeat(auto-fit,minmax(130px,1fr)) }
.opts--base, .opts--adds { grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 8px }
.opts--wrap { display: flex; flex-wrap: wrap; gap: 8px }
.opt-size { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 18px; min-height: 0 }
.opt-size b { font-family: var(--d); font-weight: 800; font-size: 26px; letter-spacing: -.03em }
.opt-size small { display: flex; justify-content: space-between; width: 100%; font-size: 12px; font-weight: 700 }
.opt-size small span:last-child { opacity: .7 }
.opt-base { gap: 12px; padding: 12px 14px; border-radius: 16px }
.opt-base .sw { width: 26px; height: 26px; box-shadow: 0 0 0 2px rgba(246,238,220,.4) }
.opt-base span span { display: block; font-size: 12px; font-weight: 500; opacity: .75 }
.opt-base strong { font-weight: 800; font-size: 15px }
.opt-add { justify-content: space-between; min-height: 48px; padding: 0 14px; border-radius: 14px }
.opt-add .sw { border-radius: 5px; width: 16px; height: 16px }
.opt-add > span { display: flex; align-items: center; gap: 8px }
.opt-add > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap }
@media (max-width: 759px) {
  .monte__grid { grid-template-columns: 1fr }
  .cupbox { top: calc(var(--hdr) + var(--top)); flex-direction: row; padding: 12px 14px; box-shadow: 5px 5px 0 var(--ink) }
  .cupbox__info { text-align: left }
  .cupbox .btn-sol { min-height: 44px; font-size: 15px; padding: 0 16px }
  .cup { width: 120px; height: 150px }
  .cupbox__total { font-size: 34px }
}

/* ---------- cardápio ---------- */
.menu { padding: clamp(72px,9vw,130px) 0 clamp(48px,6vw,80px); scroll-margin-top: 0 }
.menu__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap }
.menu__h { margin: 0; font-size: clamp(64px,10vw,160px); line-height: .82; letter-spacing: -.05em }
.menu__head p { margin: 0; max-width: 34ch; color: var(--muted); font-size: 15px; line-height: 1.5 }
.menu__head .jp { display: block; font-size: 12px; margin-bottom: 8px }
.tabs { position: sticky; top: calc(var(--hdr) + var(--top)); z-index: 30; margin-top: 32px; background: var(--bg); border-bottom: 1px solid var(--line) }
.tabs__in { display: flex; gap: 6px; overflow-x: auto; padding: 10px var(--gut); scrollbar-width: none }
.tabs__in::-webkit-scrollbar { display: none }
.tabs .chip { flex: none; padding: 0 18px; font-weight: 800 }
.tabs .chip span { opacity: .6; font-weight: 600 }
.busca { flex: none; display: flex; align-items: center; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--line2); padding: 0 14px; gap: 8px; color: var(--muted) }
.busca input { width: 150px; border: 0; background: transparent; color: var(--creme); font-size: 16px; outline: 0; min-height: 40px }
.cats { display: flex; flex-direction: column; gap: clamp(48px,6vw,80px); padding: clamp(28px,3vw,40px) var(--gut) 0 }
.cat { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: calc(var(--hdr) + var(--top) + 76px) }
.cat__h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px }
.cat__h h3 { margin: 0; font-size: clamp(32px,3.6vw,52px) }
.cat__h .tw { font-size: 20px; color: var(--muted) }
.grid-itens { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,240px),1fr)); gap: clamp(12px,1.4vw,20px) }
.item { position: relative; display: flex; flex-direction: column; background: var(--bg2); border-radius: 22px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--vivo); transition: transform .4s var(--ez) }
.item:hover, .item:focus-within { transform: translateY(-4px) }
.item--wide { grid-column: span 2 }
.item__pic { position: relative; margin: 16px 16px 0; aspect-ratio: 1/1; overflow: hidden; background: #fff; border: 6px solid #fff; border-radius: 18px; box-shadow: 0 0 0 3px var(--ink), 5px 5px 0 3px var(--ink); transform: rotate(-1.4deg) }
.item:nth-child(even) .item__pic { transform: rotate(1.4deg) }
.item--wide .item__pic { aspect-ratio: 16/9 }
.item__img { position: absolute; inset: 0; transition: transform .7s var(--ez) }
.item:hover .item__img, .item.is-tap .item__img { transform: scale(1.07) }
.item__img > img { width: 100%; height: 100%; object-fit: cover }
.item--esg .item__img { filter: grayscale(.9) brightness(.6) }
.ph { position: absolute; inset: 0; background: radial-gradient(circle at 50% 62%,#FFE9C7 0 34%,#F6C9A8 62%,#E9A3B0 100%); display: flex; align-items: center; justify-content: center }
.ph img { height: 74%; width: auto; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(4px 4px 0 rgba(28,9,32,.35)) }
.ph span { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--creme); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap }
.badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; pointer-events: none }
.badge { padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--creme); color: var(--ink) }
.badge--sol { background: var(--sol); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--creme) }
.spark { position: absolute; line-height: 1; pointer-events: none; text-shadow: 2px 2px 0 var(--ink); animation: brilho 2.6s ease-in-out infinite }
.spark--a { right: 8px; top: 4px; font-size: 26px; color: var(--sol) }
.item__b { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1 }
.item__b h4 { margin: 0; font-family: var(--d); font-weight: 700; font-size: 20px; letter-spacing: -.02em; line-height: 1.1 }
.item__b p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty }
.item__f { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px }
.price { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 14px; border-radius: 999px; background: var(--creme); color: var(--ink); font-family: var(--d); font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums }
.price small { font-size: 11px; white-space: nowrap }
.price--from { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1; padding: 6px 14px 7px; border-radius: 16px }
.price--from small { font-size: 10px; margin-bottom: 2px }
.item__f button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--sol); color: var(--ink); font-weight: 800; font-size: 14px }
.item__f button:disabled { background: var(--bg3); color: var(--muted) }
.menu__vazio { padding: 24px 0; color: var(--muted) }
@media (max-width: 759px) {
  .grid-itens { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px }
  .item { border-radius: 18px; box-shadow: 4px 4px 0 var(--vivo) }
  .item--wide { grid-column: span 2 }
  .item__pic { margin: 10px 10px 0; border-width: 4px; border-radius: 14px }
  .item__b { padding: 12px 10px; gap: 6px }
  .item__b h4 { font-size: 16px }
  .item__b p { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
  .item:not(.item--wide) .item__f { flex-direction: column; align-items: stretch; gap: 8px }
  .item:not(.item--wide) .price { align-self: flex-start; font-size: 16px }
  .item__f button { min-height: 44px }
  .ph span { font-size: 8px; padding: 3px 8px; bottom: 6px }
  .spark--a { font-size: 20px }
  .opts--adds { grid-template-columns: 1fr }
}

/* ---------- promoções (marquee) ---------- */
.promos { padding: 28px 0; overflow: hidden }
.promos__band { transform: rotate(-2deg); background: var(--sol); color: var(--ink); padding: 18px 0; margin: 0 -20px; overflow: hidden }
.marq { display: flex; width: max-content; animation: marquee 38s linear infinite }
.promo { display: flex; align-items: center; gap: 18px; padding: 0 22px; white-space: nowrap }
.promo > span:first-child { padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--sol); font-size: 12px; font-weight: 800; letter-spacing: .1em }
.promo .d { font-size: clamp(22px,2.4vw,34px); letter-spacing: -.03em }
.promo .tw { font-size: clamp(18px,1.8vw,26px); text-shadow: none }
.promo i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink) }

/* ---------- história (creme) ---------- */
.hist { background: var(--creme); color: var(--ink); padding: clamp(72px,9vw,140px) var(--gut); overflow: hidden; margin-top: 40px }
.hist .tw { color: var(--vivo) }
.hist__big { font-size: min(16.5vw,280px); line-height: .78; letter-spacing: -.06em; white-space: nowrap; margin-left: -.05em; margin-bottom: clamp(28px,4vw,56px) }
.hist__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: clamp(24px,4vw,64px); align-items: start }
.hist__txt { display: flex; flex-direction: column; gap: 22px; padding-top: clamp(0px,4vw,80px) }
.hist__txt h2 { margin: 0; font-size: clamp(36px,4vw,60px); line-height: .95; text-wrap: balance }
.hist__txt h2 .tw { font-weight: 400; color: inherit; text-shadow: none; font-style: italic }
.hist__txt p { margin: 0; font-size: 17px; line-height: 1.6; max-width: 52ch; text-wrap: pretty }
.hist__nums { border-top: 2px solid var(--ink) }
.hist__nums > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 0; border-bottom: 1px solid rgba(28,9,32,.2) }
.hist__nums .d { font-size: clamp(48px,5vw,80px); letter-spacing: -.05em; line-height: .9 }
.hist__nums > div > span:last-child { font-size: 14px; max-width: 16ch; text-align: right }
.slot { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #e9dcc2; display: flex; align-items: flex-end; padding: 16px; color: var(--ink); background-image: repeating-linear-gradient(135deg, rgba(28,9,32,.05) 0 12px, transparent 12px 24px) }
.slot span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--creme) }
.slot--dark { background-color: var(--bg2); color: var(--creme); background-image: repeating-linear-gradient(135deg, rgba(246,238,220,.04) 0 12px, transparent 12px 24px) }
.slot--dark span { background: var(--bg); color: var(--muted) }

/* ---------- como funciona ---------- */
.como { padding: clamp(72px,9vw,130px) var(--gut) }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(32px,4vw,56px) }
.h-xl { margin: 0; font-size: clamp(44px,6vw,96px); line-height: .88; letter-spacing: -.05em }
.como ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); border-top: 1px solid var(--line2) }
.como li { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px 28px 0; border-bottom: 1px solid var(--line2) }
.como li > span { font-family: var(--d); font-weight: 800; font-size: clamp(80px,9vw,140px); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--sol) }
.como h3 { margin: 0; font-family: var(--d); font-weight: 700; font-size: 26px; letter-spacing: -.02em }
.como p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 28ch }

/* ---------- entrega ---------- */
.entrega { padding: clamp(56px,7vw,110px) var(--gut); background: var(--bg2); scroll-margin-top: 40px }
.two { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: clamp(24px,4vw,64px); align-items: start }
.col { display: flex; flex-direction: column; gap: 22px }
.h-l { margin: 0; font-size: clamp(44px,5.4vw,84px); line-height: .88; letter-spacing: -.05em }
.tempo { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2) }
.tempo .d { font-size: 64px; line-height: .8; letter-spacing: -.05em }
.zone { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.zone > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-family: var(--d); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums }
.zone i, .mdot i { width: 10px; height: 10px; border-radius: 50%; flex: none }
.zone > span:last-child { font-size: 14px; line-height: 1.5; color: var(--muted) }
.mapa { position: relative; aspect-ratio: 1/1; border-radius: var(--r-lg); overflow: hidden; background: var(--bg) }
.rio { position: absolute; top: -10%; height: 125%; background: var(--vivo); opacity: .55; border-radius: 999px }
.mapa .lbl { position: absolute; font-size: 15px; color: var(--muted) }
.anel { position: absolute; left: 54%; top: 44%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--line2); transform: translate(-50%,-50%) }
.mdot { position: absolute; display: flex; align-items: center; gap: 5px; transform: translate(-5px,-5px); white-space: nowrap; font-size: 11px; font-weight: 700 }
.mdot span { color: var(--muted); font-weight: 600 }
.loja-pin { position: absolute; left: 54%; top: 44%; width: 18px; height: 18px; border-radius: 50%; background: var(--sol); border: 3px solid var(--ink); transform: translate(-50%,-50%) }
.loja-pulse { position: absolute; left: 54%; top: 44%; width: 26px; height: 26px; border-radius: 50%; background: var(--sol); animation: pulso 2.4s var(--ez) infinite }
.loja-tag { position: absolute; left: 57%; top: 47%; padding: 4px 10px; border-radius: 999px; background: var(--sol); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--creme); font-size: 12px; font-weight: 800 }
@media (max-width: 759px) { .mdot { font-size: 9px } .mdot span { display: none } }

/* ---------- galeria ---------- */
.gal { padding: clamp(72px,9vw,130px) var(--gut) }
.gal__grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: 220px; gap: 10px }
.gal__grid .slot { border-radius: 18px }
.g-w2 { grid-column: span 2 } .g-h2 { grid-row: span 2 }
@media (max-width: 759px) { .gal__grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 150px } }

/* ---------- avaliações ---------- */
.revs { padding: 0 0 clamp(72px,9vw,130px); overflow: hidden }
.revs__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px }
.revs__head h2 { margin: 0; font-size: clamp(32px,3.6vw,52px) }
.revs .marq { gap: 14px; animation-duration: 60s }
.revs .marq:hover { animation-play-state: paused }
.rev { margin: 0; width: min(78vw,360px); flex: none; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 22px; background: var(--bg2) }
.rev > span { color: var(--sol); letter-spacing: .12em; font-size: 15px }
.rev blockquote { margin: 0; font-family: var(--d); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty }
.rev figcaption { margin-top: auto; font-size: 13px; color: var(--muted) }
.rev strong { color: var(--creme) }

/* ---------- FAQ ---------- */
.faq { padding: clamp(56px,7vw,110px) var(--gut); border-top: 1px solid var(--line) }
.faq__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr)); gap: clamp(24px,4vw,64px); align-items: start }
.faq__side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px }
.faq__side p { margin: 0; color: var(--muted); font-size: 15px; max-width: 34ch }
.faq__list { border-top: 1px solid var(--line2) }
.faq__it { border-bottom: 1px solid var(--line2) }
.faq__it button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; border: 0; background: transparent; color: var(--creme); text-align: left; font-family: var(--d); font-weight: 700; font-size: clamp(18px,1.6vw,22px) }
.faq__it button i { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-size: 18px; font-style: normal; transition: transform .35s var(--ez) }
.faq__it button[aria-expanded="true"] i { transform: rotate(45deg) }
.faq__it p { margin: 0 0 20px; max-width: 58ch; font-size: 15px; line-height: 1.6; color: var(--muted); animation: sobe .45s var(--ez) both }

/* ---------- local + CTA final ---------- */
.local { padding: clamp(56px,7vw,110px) var(--gut) clamp(72px,9vw,130px); background: var(--bg2) }
.local__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr)); gap: clamp(24px,4vw,56px) }
.local h2 { margin: 0; font-size: clamp(36px,4vw,60px); line-height: .95 }
.hours { border-top: 1px solid var(--line2) }
.hours div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500 }
.hours div span:last-child { font-variant-numeric: tabular-nums }
.hours .is-hoje { font-weight: 800; color: var(--sol) }
.mapbox { position: relative; min-height: 360px; border-radius: var(--r-lg); overflow: hidden; background: var(--bg) }
.mapbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.mapbox__load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; color: var(--muted); font-size: 14px }
.fim { margin-top: clamp(56px,8vw,120px); display: flex; flex-direction: column; gap: 24px; align-items: flex-start }
.fim .d { font-size: clamp(40px,12vw,200px); line-height: .8; letter-spacing: -.06em }

/* ---------- rodapé ---------- */
.foot { padding: clamp(48px,6vw,80px) var(--gut) 48px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted) }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: 32px }
.foot__grid > div { display: flex; flex-direction: column; gap: 8px }
.foot strong { color: var(--creme) }
.foot__grid a { color: var(--muted); text-decoration: none; align-self: flex-start; background: linear-gradient(var(--sol),var(--sol)) left 85% / 0% 2px no-repeat; transition: background-size .35s var(--ez), color .2s }
.foot__grid a:hover { color: var(--creme); background-size: 100% 2px }
.foot__grid a { padding: 6px 0 }
@media (max-width: 759px) { .foot__grid a { padding: 10px 0 } .foot__grid > div { gap: 2px } }
.foot .logo__n { font-size: 28px } .foot .logo__a { font-size: 24px; text-shadow: 3px 3px 0 var(--ink) }
.foot__bot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px }
@media (max-width: 759px) { .foot { padding-bottom: 110px } }

/* ---------- carrinho flutuante + barra mobile ---------- */
.fcart { position: fixed; right: 28px; bottom: 28px; z-index: 55; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 10px 0 22px; border-radius: 999px; background: var(--sol); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--sh-pop); font-family: var(--d); font-weight: 700; font-size: 16px }
.fcart b { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; background: var(--ink); color: var(--sol); display: flex; align-items: center; justify-content: center; font-weight: 800 }
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line) }
.mbar .btn-sol { flex: 1; font-size: 16px; padding: 0 12px }
.mbar a { flex: none; height: 52px; padding: 0 14px; border-radius: 999px; background: var(--folha); color: #fff; display: flex; align-items: center; text-decoration: none; font-weight: 800; font-size: 13px }
@media (max-width: 759px) { .mbar { display: flex } .fcart { display: none !important } }

/* ---------- cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; opacity: 0; transition: opacity .3s }
.cursor::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sol); transition: transform .3s var(--ez) }
.cursor.is-cta::after { transform: scale(3.85) }

/* ---------- modal de personalização ---------- */
.ovl { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(14,3,16,.78) }
.modal { width: min(100%,560px); max-height: 88vh; display: flex; flex-direction: column; background: var(--bg); border-radius: 28px; box-shadow: var(--sh-pop); overflow: hidden; animation: sobe .45s var(--ez) both }
.modal__pic { position: relative; aspect-ratio: 16/9; flex: none; background: var(--bg3) }
.modal__pic > img { width: 100%; height: 100%; object-fit: cover }
.x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bg); color: var(--creme); font-size: 22px }
.modal__b { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px; display: flex; flex-direction: column; gap: 22px }
.modal__b h3 { margin: 0; font-size: 28px; letter-spacing: -.03em }
.modal__b > div > p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5 }
.grp { display: flex; flex-direction: column; gap: 10px }
.grp__h { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 800 }
.req { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--folha); color: #fff }
.req.is-need { background: var(--sol); color: var(--ink) }
.ing { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line2); background: transparent; color: var(--creme); font-weight: 700; font-size: 13px }
.ing[aria-pressed="false"] { color: var(--muted); text-decoration: line-through }
.chk { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--line2); background: transparent; color: var(--creme); font-weight: 700; font-size: 14px }
.chk > span { display: flex; align-items: center; gap: 10px }
.chk i { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line2); color: var(--ink); font-size: 13px; font-style: normal; display: flex; align-items: center; justify-content: center }
.chk[aria-pressed="true"] { border-color: var(--sol); background: rgba(242,181,58,.12) }
.chk[aria-pressed="true"] i { background: var(--sol); border-color: var(--sol) }
.chk[aria-pressed="true"] i::before { content: "✓" }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700 }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 14px; background: var(--bg2); color: var(--creme); font-size: 16px }
.fld textarea { padding: 12px 14px; resize: none; min-height: 0 }
.fld select { background-color: var(--bg2); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2B53A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(246,238,220,.45) }
.fld__h { display: flex; justify-content: space-between; font-size: 15px }
.fld__h span { font-weight: 600; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums }
.foot-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line) }
.qty { display: flex; align-items: center; border: 1.5px solid var(--line2); border-radius: 999px }
.qty button { width: 44px; height: 48px; border: 0; background: transparent; color: var(--creme); font-size: 22px }
.qty span { min-width: 24px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums }
.qty--s button { width: 40px; height: 40px; font-size: 18px }
.add-btn { flex: 1; justify-content: space-between; padding: 0 22px; font-size: 16px }
@media (max-width: 759px) {
  .ovl { align-items: flex-end }
  .modal { max-height: 92svh; border-radius: 24px 24px 0 0 }
}

/* ---------- gaveta do carrinho ---------- */
.dw-bg { position: fixed; inset: 0; z-index: 95; background: rgba(14,3,16,.7) }
.dw { position: fixed; top: 0; right: 0; bottom: 0; z-index: 96; width: min(100%,460px); display: flex; flex-direction: column; background: var(--bg); box-shadow: var(--sh-pop); animation: entra .4s var(--ez) both }
.dw__h { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line) }
.dw__h h3 { margin: 0; font-size: 24px; letter-spacing: -.03em }
.dw__h img { width: 42px; height: auto; flex: none }
.rbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--creme); font-size: 18px; flex: none }
.dw__b { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px }
.dw__b--pad { padding: 16px; display: flex; flex-direction: column; gap: 18px }
.dw__f { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line) }
.note { flex: none; margin: 12px 16px 0; padding: 14px 16px; border-radius: 16px; background: var(--bg3); display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45 }
.note img { width: 64px; height: auto; flex: none }
.note--dash { background: transparent; border: 1px dashed var(--sol); font-size: 13px; padding: 12px 14px; display: block }
.vazio { padding: 40px 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start }
.vazio > div { display: flex; align-items: center; gap: 12px }
.vazio img { width: 96px; height: auto }
.balao { position: relative; display: inline-block; padding: 10px 14px; border-radius: 18px; background: var(--creme); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-family: var(--d); font-weight: 800; font-size: 14px; line-height: 1.25; max-width: 26ch }
.vazio .d { font-size: 40px; line-height: .9 }
.line { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line) }
.line__h { display: flex; justify-content: space-between; gap: 12px }
.line__h strong { font-family: var(--d); font-size: 18px; font-weight: 700 }
.line__h span { font-weight: 800; font-variant-numeric: tabular-nums }
.line__d { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted) }
.line__a { display: flex; align-items: center; gap: 8px }
.tlink { min-height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--sol); font-weight: 700; font-size: 13px }
.tlink--m { color: var(--muted) }
.minbar { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 700 }
.minbar div { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden }
.minbar i { display: block; height: 100%; background: var(--sol); transform-origin: left; transition: transform .5s var(--ez) }
.row { display: flex; justify-content: space-between; gap: 10px; font-size: 16px }
.row span:last-child, .row strong { font-variant-numeric: tabular-nums }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 999px; background: var(--bg2) }
.seg button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--creme); font-weight: 800 }
.seg button[aria-pressed="true"] { background: var(--sol); color: var(--ink) }
.pay { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 16px; border-radius: 16px; border: 1.5px solid var(--line2); background: transparent; color: var(--creme); text-align: left; width: 100% }
.pay strong { display: block; font-size: 15px }
.pay small { font-size: 12px; color: var(--muted) }
.pay i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line2) }
.pay[aria-pressed="true"] { border-color: var(--sol); background: rgba(242,181,58,.1) }
.pay[aria-pressed="true"] i { border-color: var(--sol); background: var(--sol) }
.resumo { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; background: var(--bg2); font-size: 15px }
.resumo .tot { padding-top: 10px; border-top: 1px solid var(--line2); font-family: var(--d); font-weight: 800; font-size: 24px }
.resumo .tot span:last-child { color: var(--sol) }
.hint { font-size: 12px; color: var(--muted); text-align: center }
.warn { margin: 0; font-size: 13px; color: var(--sol) }
.pixcard { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; border-radius: 22px; background: var(--creme); color: var(--ink) }
.pixcard > span:first-child { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase }
.pixcard img { width: 220px; height: 220px; image-rendering: pixelated }
.pixcard .d { font-size: 36px; letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.copy { min-height: 52px; border-radius: 999px; border: 1.5px solid var(--sol); background: transparent; color: var(--sol); font-weight: 800; font-size: 15px }
.pixinfo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; padding: 14px 16px; border-radius: 16px; background: var(--bg2) }
.pixinfo div { display: flex; justify-content: space-between; gap: 10px }
.pixinfo span { color: var(--muted) }
.pixinfo strong { text-align: right; word-break: break-all }
.alerta { padding: 16px; border-radius: 16px; background: var(--sol); color: var(--ink); font-size: 15px; line-height: 1.5 }
.alerta strong:first-child { display: block; font-family: var(--d); font-size: 18px; margin-bottom: 4px }
.done-h { display: flex; flex-direction: column; gap: 10px }
.done-h img { width: 120px; height: auto; animation: pula 1.2s cubic-bezier(.5,0,.5,1) infinite }
.done-h .d { font-size: 44px; line-height: .9 }
.done-h > span:last-child { font-size: 15px; line-height: 1.5; color: var(--muted) }
.passos3 { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px }
.passos3 li { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; border-radius: 16px; background: var(--bg2); font-size: 13px; font-weight: 700 }
.passos3 b { font-family: var(--d); font-weight: 800; font-size: 28px; color: var(--sol) }
.zap { align-self: flex-end; max-width: 94%; padding: 12px 14px 8px; border-radius: 14px 4px 14px 14px; background: #DCF3D0; color: #14210F; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px 0 rgba(0,0,0,.2) }
.zap div { min-height: 1.2em; white-space: pre-wrap }
.zap .b { font-weight: 700 }
.zap small { display: block; text-align: right; font-size: 11px; opacity: .6; margin-top: 4px }
.limpar { align-self: center; border: 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; padding: 8px }

/* ---------- 404 ---------- */
.nf { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(180deg,#2E0F3A 0%,#4F1C5E 20%,#8A3478 42%,#D2607A 60%,#F2925F 76%,#FBCB86 90%,#FFE2A6 100%); overflow: hidden; position: relative }
.nf__deco { position: absolute; left: -10%; top: 6%; width: min(70%,700px) }
.nf__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 560px; padding: 28px; border-radius: 28px; background: var(--bg); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--ink) }
.nf__card img { width: 150px; height: auto }
.nf__card h1 { margin: 0; font-size: clamp(44px,8vw,84px); line-height: .9 }
.nf__card p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted) }

/* ---------- keyframes ---------- */
@keyframes marquee { to { transform: translateX(-50%) } }
@keyframes cair { 0% { transform: translateY(-260px) rotate(-40deg); opacity: 0 } 55% { opacity: 1 } 80% { transform: translateY(6px) rotate(6deg) } 100% { transform: none; opacity: 1 } }
@keyframes palavra { from { transform: translateY(105%) } to { transform: none } }
@keyframes pulso { 0% { transform: translate(-50%,-50%) scale(.6); opacity: .9 } 100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0 } }
@keyframes sobe { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes entra { from { transform: translateX(40px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes escorre { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes ploft { 0% { transform: translate(-50%,-50%) scale(.2) rotate(-16deg); opacity: 0 } 30% { transform: translate(-50%,-50%) scale(1.25) rotate(-6deg); opacity: 1 } 70% { opacity: 1 } 100% { transform: translate(-50%,-90%) scale(1) rotate(-6deg); opacity: 0 } }
@keyframes linhas { 0% { opacity: 0; transform: translateY(-40%) } 25% { opacity: 1 } 100% { opacity: 0; transform: translateY(40%) } }
@keyframes brilho { 0%,100% { transform: scale(.55) rotate(0); opacity: .35 } 50% { transform: scale(1.1) rotate(45deg); opacity: 1 } }
@keyframes deriva { 0%,100% { transform: translateY(0); opacity: .55 } 50% { transform: translateY(-14px); opacity: 1 } }
@keyframes boia { 0%,100% { transform: translateY(0) rotate(0deg) } 50% { transform: translateY(-12px) rotate(4deg) } }
@keyframes pula { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12%) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important }
}