/* ============================================================================
   Deli Smash: site.css
   Gramatica "Counter service". Seis cores, duas familias. O engine
   (scrollcraft.css) nao e editado: aqui so tokens e markup proprio.

   Unidade do hero: --u = min(1vw, 1.6vh). O palco do hero tem 100u x 62.5u
   (16:10), centrado. Em retrato e telas quadradas o hero recompoe em vw/svh.
   ========================================================================== */

:root {
  --sc-canvas:      #FCF5E8;
  --sc-surface:     #F6E9D3;
  --sc-ink:         #2A1511;
  --sc-ink-soft:    #6A4A41;
  --sc-accent:      #CC2219;
  --sc-accent-ink:  #FCF5E8;
  --sc-font-display: "Playfair Display", "Times New Roman", serif;
  --sc-font-text:    "Figtree", system-ui, sans-serif;
  --sc-shadow-color: 8 55% 12%;

  --red:      #CC2219;
  --red-hot:  #E3261D;
  --red-deep: #9E1F25;
  --cream:    #F6E9D3;
  --paper:    #FCF5E8;
  --steel:    #1D1B1A;
  --ink:      #2A1511;

  --u:   min(1vw, 1.6vh);
  --sx:  calc(50% - 50 * var(--u));
  --sy:  calc((100svh - 62.5 * var(--u)) / 2);
  --band-h: max(2.9rem, calc(4.5 * var(--u)));
}

html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--red); color: var(--paper); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: .75rem; top: -4rem; z-index: 200;
  background: var(--ink); color: var(--paper); padding: .7rem 1rem; border-radius: 999px;
  font-weight: 700; text-decoration: none; transition: top 160ms var(--sc-ease-out);
}
.skip:focus-visible { top: .75rem; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
img { -webkit-user-drag: none; user-select: none; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.1rem; padding: .85rem 1.55rem;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 800 clamp(.8rem, .74rem + .2vw, .92rem)/1 var(--sc-font-text);
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.btn:active { transform: scale(.97); }
.btn--red {
  background: var(--red); color: var(--paper);
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / .18), 0 .55rem 1.1rem -.5rem hsl(var(--sc-shadow-color) / .55);
}
.btn--cream {
  background: var(--cream); color: var(--red-deep);
  box-shadow: inset 0 -4px 0 rgb(120 40 30 / .22), 0 .55rem 1.1rem -.5rem rgb(60 8 5 / .55);
}
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: scale(.97); }
  .btn--red:hover { background: #D6281F; }
  .btn--ghost:hover { background: rgb(42 21 17 / .07); }
}
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.close .btn:focus-visible, .estilo .btn:focus-visible { outline-color: var(--paper); }
.btn[hidden] { display: none; }

/* ------------------------------------------------------ checker strips -- */
.checks {
  --sq: clamp(14px, 2.1vw, 30px);
  height: calc(var(--sq) * 2);
  background: repeating-conic-gradient(var(--red) 0 25%, var(--cream) 0 50%) 0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
}

/* ================================================================ LOAD == */
.load {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-content: center; justify-items: center; gap: 1.4rem;
  background: var(--red); color: var(--paper);
  clip-path: circle(150vmax at 50% 50%);
}
.load.is-out { clip-path: circle(0 at 50% 50%); transition: clip-path 760ms var(--sc-ease-in-out); pointer-events: none; }
.load.is-gone { display: none; }
html.no-js .load { display: none; }

.load__stage { position: relative; width: min(52vw, 17rem); aspect-ratio: 1; }
.load__rec {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, #1b1311 0 2px, #261b18 2px 3.5px);
  box-shadow: 0 1.4rem 2.4rem -1rem rgb(40 5 3 / .6);
  animation: loadDrop 640ms var(--sc-ease-out) both, loadSpin 2.2s linear 640ms infinite;
}
.load__sheen { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 8%, rgb(255 255 255 / .16) 12%, transparent 18% 50%, rgb(255 255 255 / .13) 62%, transparent 68%); }
.load__label { position: absolute; inset: 31%; width: 38%; height: 38%; border-radius: 50%; }
.load__arm { position: absolute; right: -26%; top: -14%; width: 44%; height: auto; transform-origin: 72% 12%; animation: armDrop 900ms var(--sc-ease-out) 600ms both; filter: drop-shadow(0 .5rem .5rem rgb(40 5 3 / .35)); }
.load__txt { font: 900 clamp(2rem, 7vw, 3.4rem)/1 var(--sc-font-display); letter-spacing: -.01em; }
.load__dots i { font-style: normal; animation: dot 1.1s infinite; opacity: .2; }
.load__dots i:nth-child(2) { animation-delay: .18s; }
.load__dots i:nth-child(3) { animation-delay: .36s; }
.load__sub { font: 700 .78rem/1 var(--sc-font-text); letter-spacing: .26em; text-transform: uppercase; opacity: .9; }
@keyframes loadDrop { from { transform: translateY(-120%) scale(1.15); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes loadSpin { to { transform: rotate(360deg); } }
@keyframes armDrop { from { transform: rotate(-34deg); } to { transform: rotate(6deg); } }
@keyframes dot { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* ================================================================ BAND == */
.band {
  position: fixed; left: 0; right: 0; top: 0; z-index: 3;
  height: var(--band-h);
  display: flex; align-items: center; justify-content: flex-start;
  padding-left: max(env(safe-area-inset-left), calc(var(--sx) + 6 * var(--u)));
  padding-right: env(safe-area-inset-right);
  background: var(--red); color: var(--paper);
  transform: translate3d(0, var(--band-y, 0px), 0);
  will-change: transform;
}
.band.is-docked { z-index: 60; box-shadow: 0 .7rem 1.2rem -.7rem hsl(var(--sc-shadow-color) / .55); }
.band__nav { display: flex; align-items: stretch; height: 100%; }
.band__a {
  position: relative; display: flex; align-items: center;
  padding-inline: clamp(.7rem, calc(2.4 * var(--u)), 2.8rem);
  font: 700 clamp(.72rem, calc(.95 * var(--u)), .94rem)/1 var(--sc-font-text);
  letter-spacing: .3em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: inherit; transition: background-color 140ms var(--sc-ease-out);
}
.band__a + .band__a::before {
  content: ""; position: absolute; left: 0; top: 27%; bottom: 27%; width: 2px; background: rgb(252 245 232 / .6);
}
.band__a:focus-visible { outline: 3px solid var(--paper); outline-offset: -5px; border-radius: 0; }
.band__a.is-on { background: rgb(0 0 0 / .17); }
@media (hover: hover) and (pointer: fine) { .band__a:hover { background: rgb(0 0 0 / .15); } }

.band__cta {
  position: absolute; right: max(.8rem, calc(var(--sx) + 6 * var(--u) - 1rem)); top: 50%; translate: 0 -50%;
  height: auto; padding: .5rem 1rem; border-radius: 999px;
  background: var(--paper); color: var(--red-deep); letter-spacing: .12em;
  font-size: clamp(.64rem, .55rem + .22vw, .78rem);
}
.band__cta::before { display: none; }
@media (pointer: coarse) { .band__cta { min-height: 2.5rem; display: inline-flex; align-items: center; } }
@media (hover: hover) and (pointer: fine) { .band__cta:hover { background: #fff; } }

.band__badge {
  position: absolute; z-index: 2;
  left: max(env(safe-area-inset-left), calc(var(--sx) + 6 * var(--u) - var(--band-h) * 1.5 - .9rem), .6rem);
  top: calc(var(--band-h) * .09); width: calc(var(--band-h) * 1.5); aspect-ratio: 1;
  opacity: 0; pointer-events: none; transition: opacity 220ms var(--sc-ease-out);
}
.band.is-docked .band__badge { opacity: 1; pointer-events: auto; }
.band__badge img {
  width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 0 0 max(2px, calc(var(--band-h) * .035)) #25211f;
  filter: drop-shadow(0 .45rem .5rem rgb(40 5 3 / .45));
}
.band__chain { display: none; }
.band__badge:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; border-radius: 50%; }

/* ================================================================ HERO ==
   O plate do balcao (azulejo + faixa vermelha + tampo + friso cromado + frente
   vermelha) ancora no rodape. --ph e a altura do plate: nunca menor que o palco
   (62.5u) nem que a tela, para a faixa-letreiro e o tampo ficarem alinhados com
   a foto em qualquer proporcao. Fracoes medidas no plate: faixa vermelha
   0.57-0.66, tampo 0.665-0.745, friso 0.745-0.79, frente 0.79-1. */
.hero { --ph: max(calc(62.5 * var(--u)), 100svh); position: relative; height: 100svh; overflow: clip; background: #EDE5D6; }
.hero__stage { position: absolute; inset: 0; }
.hero__layer {
  position: absolute; will-change: transform;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--s, 1));
}
.hero__layer > img { width: 100%; height: auto; }

.hero__wall { left: calc(50% - var(--ph) * 8 / 9); bottom: 0; width: calc(var(--ph) * 16 / 9); height: var(--ph); }
.hero__wall > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__wall .wall__m { transform: scaleX(-1); }
.hero__wall .wall__m--l { left: -100%; }
.hero__wall .wall__m--r { left: 100%; }

.hero__sign { left: calc(var(--sx) + 6 * var(--u)); top: calc(var(--sy) + 3.2 * var(--u)); z-index: 2; }
.sign {
  font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase;
  font-size: calc(13.5 * var(--u)); line-height: .86; letter-spacing: -.015em;
  color: var(--red-hot);
  -webkit-text-stroke: calc(.22 * var(--u)) var(--cream); paint-order: stroke fill;
  text-shadow:
    calc(.08 * var(--u)) calc(.08 * var(--u)) 0 #8f1c20, calc(.16 * var(--u)) calc(.16 * var(--u)) 0 #8f1c20,
    calc(.24 * var(--u)) calc(.24 * var(--u)) 0 #8f1c20, calc(.32 * var(--u)) calc(.32 * var(--u)) 0 #8a1b1f,
    calc(.4 * var(--u)) calc(.4 * var(--u)) 0 #84191d, calc(.48 * var(--u)) calc(.48 * var(--u)) 0 #7f181c,
    calc(.56 * var(--u)) calc(.56 * var(--u)) 0 #7a171b, calc(.64 * var(--u)) calc(.64 * var(--u)) 0 #751619,
    calc(1.3 * var(--u)) calc(1.7 * var(--u)) calc(1.7 * var(--u)) rgb(60 10 6 / .34);
  text-wrap: nowrap;
}
.sign__l { display: block; }
.sign__i { display: inline-block; }

.hero__hang { left: calc(var(--sx) + 69 * var(--u)); top: calc(var(--sy) - 6 * var(--u)); width: calc(14 * var(--u)); z-index: 2; }
.hero__hang > img {
  position: relative; margin-top: calc(6 * var(--u)); border-radius: 50%; box-shadow: 0 0 0 calc(.32 * var(--u)) #25211f; filter: drop-shadow(0 calc(.7 * var(--u)) calc(.9 * var(--u)) rgb(60 10 6 / .42));
  transform-origin: 50% -30%; animation: sway 6.5s ease-in-out infinite;
}
.hero__chain { position: absolute; left: 50%; top: 0; width: 0; height: calc(6.4 * var(--u)); border-left: calc(.18 * var(--u)) solid #8d8478; translate: -50% 0; }
@keyframes sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }

/* the band's home: centred on the red tile stripe of the plate */
.hero__bandspot { position: absolute; left: 0; right: 0; top: calc(100svh - var(--ph) * .385 - var(--band-h) / 2); height: var(--band-h); pointer-events: none; }

.hero__tray { left: calc(var(--sx) + 55 * var(--u)); bottom: calc(var(--ph) * .266); width: calc(44 * var(--u)); z-index: 5; }
.hero__tray > img {
  position: relative; z-index: 1; filter: drop-shadow(0 calc(.8 * var(--u)) calc(1 * var(--u)) rgb(50 8 5 / .3));
  -webkit-box-reflect: below calc(-.1 * var(--u)) linear-gradient(transparent 90%, rgb(255 255 255 / .2));
}
.hero__tray::after {
  content: ""; position: absolute; left: 3%; right: -1%; bottom: -3%; height: 12%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgb(36 6 3 / .62), rgb(36 6 3 / .26) 46%, rgb(36 6 3 / 0) 72%);
}

/* copy rides on the red counter face, like a menu strip */
.hero__text {
  left: calc(var(--sx) + 6 * var(--u)); right: calc(var(--sx) + 6 * var(--u)); bottom: calc(var(--ph) * .045); z-index: 6;
  right: auto; width: calc(60 * var(--u));
  color: var(--cream); text-shadow: 0 1px 14px rgb(80 8 4 / .5);
}
.hero__tag { font: 800 calc(3.3 * var(--u))/1.04 var(--sc-font-display); letter-spacing: -.01em; text-wrap: balance; }
.hero__sub { margin-top: calc(.8 * var(--u)); font: 500 max(.95rem, calc(1.35 * var(--u)))/1.4 var(--sc-font-text); max-width: 50ch; text-wrap: pretty; }
.hero__cta { right: calc(var(--sx) + 6 * var(--u)); bottom: calc(var(--ph) * .06); z-index: 6; }

.hero__props--cond { left: calc(var(--sx) + 44.5 * var(--u)); bottom: calc(var(--ph) * .246); width: calc(7 * var(--u)); z-index: 7; }
.hero__bellwrap { left: calc(var(--sx) + 85.5 * var(--u)); bottom: calc(var(--ph) * .242); width: calc(8.6 * var(--u)); z-index: 8; }
.bell {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-radius: 50%;
}
.bell img { width: 100%; height: auto; filter: drop-shadow(0 calc(.7 * var(--u)) calc(.8 * var(--u)) rgb(50 8 5 / .4)); transform-origin: 50% 90%; }
.bell:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.bell:active img { transform: scale(.96); }
.bell.is-ring img { animation: bellRing 760ms var(--sc-ease-out); }
.bell::before, .bell::after {
  content: ""; position: absolute; left: 50%; top: 46%; width: 100%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 2px solid rgb(158 31 37 / .6); translate: -50% -50%; scale: .5; opacity: 0;
}
.bell.is-ring::before { animation: ringWave 900ms var(--sc-ease-out); }
.bell.is-ring::after { animation: ringWave 900ms var(--sc-ease-out) 150ms; }
@keyframes ringWave { 0% { scale: .5; opacity: .85; } 100% { scale: 2.3; opacity: 0; } }
.bell.is-hint img { animation: bellHint 900ms var(--sc-ease-out); }
.bell__slip {
  position: absolute; left: 50%; bottom: 96%; translate: -50% 0; padding: .45rem .8rem .5rem; white-space: nowrap;
  background: var(--tp, #FFFDF6); color: var(--red-deep); border-radius: 3px;
  font: 900 clamp(.9rem, calc(1.5 * var(--u)), 1.25rem)/1 var(--sc-font-display); letter-spacing: .01em;
  box-shadow: 0 .3rem .6rem -.2rem rgb(60 20 12 / .45); rotate: -4deg; opacity: 0; pointer-events: none;
}
.bell.is-ring .bell__slip { animation: slipPop 1900ms var(--sc-ease-out) both; }
@keyframes bellRing {
  0% { transform: translateY(0) rotate(0); } 12% { transform: translateY(-9%) rotate(-6deg); } 28% { transform: translateY(0) rotate(5deg); }
  44% { transform: rotate(-3.4deg); } 60% { transform: rotate(2.4deg); } 78% { transform: rotate(-1.2deg); } 100% { transform: rotate(0); }
}
@keyframes bellHint { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg) translateY(-4%); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); } }
@keyframes slipPop {
  0% { opacity: 0; transform: translateY(40%) scale(.6); } 14% { opacity: 1; transform: translateY(-6%) scale(1.06); }
  24% { transform: translateY(0) scale(1); } 80% { opacity: 1; transform: translateY(-14%) scale(1); } 100% { opacity: 0; transform: translateY(-34%) scale(.96); }
}
.hero__props > img { filter: drop-shadow(0 calc(.8 * var(--u)) calc(.9 * var(--u)) rgb(50 8 5 / .38)); }

.hero__glint {
  position: absolute; left: 0; right: 0; top: calc(100svh - var(--ph) * .2575); height: calc(var(--ph) * .036);
  z-index: 4; overflow: hidden; pointer-events: none;
}
.hero__glint::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 24%; translate: -130% 0;
  background: linear-gradient(100deg, rgb(255 255 255 / 0), rgb(255 255 255 / .9) 50%, rgb(255 255 255 / 0));
  mix-blend-mode: soft-light; animation: glint 9s ease-in-out 3.2s infinite;
}
@keyframes glint { 0% { translate: -130% 0; } 14% { translate: 520% 0; } 100% { translate: 520% 0; } }
.hero__light {
  position: absolute; inset: 0; z-index: 8; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(112deg, transparent 42%, rgb(255 244 214 / .38) 52%, transparent 62%);
  transform: translate3d(var(--lx, 0px), 0, 0);
}

/* entrance (after the loader) */
html.js:not(.hero-in):not(.lit) .hero__layer > *,
html.js:not(.hero-in):not(.lit) .hero__text > *, html.js:not(.hero-in):not(.lit) .hero__cta > * { opacity: 0; }
html.hero-in .hero__sign .sign__i { animation: signIn 900ms var(--sc-ease-out) both; }
html.hero-in .hero__sign .sign__l:nth-child(2) .sign__i { animation-delay: 110ms; }
html.hero-in .hero__tray > img { animation: trayServe 1250ms cubic-bezier(.2, .8, .25, 1) 260ms both; }
html.hero-in .hero__text > *, html.hero-in .hero__cta > * { animation: textIn 700ms var(--sc-ease-out) both; }
html.hero-in .hero__text > :nth-child(1) { animation-delay: 420ms; }
html.hero-in .hero__text > :nth-child(2) { animation-delay: 500ms; }
html.hero-in .hero__cta > * { animation-delay: 580ms; }
html.hero-in .hero__props--cond > img { animation: propUp 800ms var(--sc-ease-out) 480ms both; }
html.hero-in .bell { animation: propUp 800ms var(--sc-ease-out) 1250ms both; }
html.hero-in .hero__hang > img { animation: hangIn 1100ms var(--sc-ease-out) 350ms both, sway 6.5s ease-in-out 1.45s infinite; }
@keyframes signIn { from { opacity: 0; transform: translateY(.35em) scale(.98); } to { opacity: 1; transform: none; } }
/* a bandeja e servida: desliza pelo balcao, passa um pouco do ponto e assenta */
@keyframes trayServe {
  0% { opacity: 0; transform: translateX(calc(26 * var(--u))); }
  18% { opacity: 1; }
  68% { transform: translateX(calc(-1.4 * var(--u))); }
  86% { transform: translateX(calc(.35 * var(--u))); }
  100% { transform: none; }
}
@keyframes textIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes propUp { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes hangIn { from { opacity: 0; transform: translateY(-40%) rotate(-8deg); } to { opacity: 1; transform: none; } }
html.lit .hero__layer > *, html.lit .hero__text > *, html.lit .hero__cta > * { opacity: 1 !important; animation: none !important; }

/* ============================================================== A CHAPA == */
.smash { background: var(--steel); }
.smash__stage { background: var(--steel); color: var(--cream); }
.smash__bg { position: absolute; inset: 0; }
.smash__bg img { width: 100%; height: 100%; object-fit: cover; }
.smash__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 42%, transparent 38%, rgb(10 8 8 / .62) 100%); }

.smash__world {
  position: absolute; inset: 0; --d: min(58svh, 44vw);
}
.smash__spot { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.smash__spot > * {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%) translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--r, 0deg)) scale(var(--s, 1));
  opacity: var(--o, 1); will-change: transform, opacity;
}
.smash__spot img { max-width: none; height: auto; }
.smash__ball  { width: calc(var(--d) * .5); --o: 0; }
.smash__patty { width: calc(var(--d) * 1.14); filter: drop-shadow(0 calc(var(--d) * .012) calc(var(--d) * .02) rgb(0 0 0 / .55)); }
.smash__press { width: calc(var(--d) * 1.1); --o: 0; }
.smash__shadow {
  width: calc(var(--d) * .62); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / .62), rgb(0 0 0 / .32) 55%, transparent);
  --o: 0;
}
.smash__shadow--patty { width: calc(var(--d) * 1.34); background: radial-gradient(closest-side, rgb(8 5 4 / .6), rgb(8 5 4 / .32) 58%, transparent); }
.smash__shadow--press { width: calc(var(--d) * 1.28); background: radial-gradient(closest-side, rgb(0 0 0 / .55), rgb(0 0 0 / .28) 58%, transparent); }

.smash__steam { position: absolute; left: 50%; top: 42%; width: 0; height: 0; opacity: var(--steam, 0.12); }
.smash__steam i {
  position: absolute; left: 0; top: 0; width: calc(var(--d) * .7); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / .22), transparent);
  translate: -50% -50%; animation: steam 5.5s ease-in infinite;
}
.smash__steam i:nth-child(2) { animation-delay: 1.1s; left: 7%; }
.smash__steam i:nth-child(3) { animation-delay: 2.2s; left: -9%; }
.smash__steam i:nth-child(4) { animation-delay: 3.3s; left: 4%; }
.smash__steam i:nth-child(5) { animation-delay: 4.4s; left: -4%; }
@keyframes steam {
  0% { transform: translate3d(0, 6%, 0) scale(.7); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate3d(0, -62%, 0) scale(1.6); opacity: 0; }
}

.smash__flash { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgb(255 240 210 / .95), rgb(255 240 210 / .0) 62%); }

.smash__copy { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.smash__line {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: max(7svh, 2.5rem);
  text-align: center; opacity: 0; transform: translate3d(0, var(--ly, 14px), 0);
  font: 800 clamp(1.7rem, 1.1rem + 2.7vw, 3.7rem)/1.05 var(--sc-font-display); letter-spacing: -.01em;
  color: var(--cream); text-wrap: balance;
  text-shadow: 0 2px 18px rgb(0 0 0 / .55);
}
.smash__boom {
  position: absolute; left: 0; right: 0; bottom: max(6svh, 2.4rem); text-align: center;
  font: 900 min(19vw, 30svh)/.9 var(--sc-font-display); text-transform: uppercase; letter-spacing: -.02em;
  color: var(--red-hot); -webkit-text-stroke: min(.5vw, .8svh) var(--cream); paint-order: stroke fill;
  text-shadow: 0 min(1vw, 1.5svh) 0 var(--red-deep), 0 min(2.4vw, 3.4svh) min(3vw, 4svh) rgb(0 0 0 / .5);
  opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--br, 0deg)) scale(var(--bs, 1));
  transform-origin: 50% 70%;
}
.smash__iris { position: absolute; inset: 0; z-index: 9; background: var(--cream); pointer-events: none;
  clip-path: circle(var(--ir, 0px) at 50% 42%); }

/* final state without motion / without JS */
html:not(.motion) .smash__ball, html:not(.motion) .smash__press, html:not(.motion) .smash__shadow { --o: 0; }
html:not(.motion) .smash__shadow--patty { --o: .9; }
@media (min-aspect-ratio: 5/4) { html:not(.motion) .smash__spot { top: 36%; } }
html:not(.motion) .smash__line[data-line="4"] { opacity: 1; transform: none; bottom: calc(max(4svh, 1.5rem) + min(19vw, 30svh) * .95); }
html:not(.motion) .smash__line:not([data-line="4"]) { display: none; }
html:not(.motion) .smash__boom { opacity: 1; }
html:not(.motion) .smash__iris { display: none; }

/* ================================================================= TRIO == */
.trio { background: var(--cream); }
.trio__stage { background: var(--cream); color: var(--ink); --R: min(86svh, 74vw); --cap: 15svh; }

.trio__words { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.trio__word {
  position: absolute; left: 0; right: 0; top: max(8svh, 4.5rem); text-align: center;
  font: 900 min(17vw, 27svh)/.88 var(--sc-font-display); text-transform: uppercase; letter-spacing: -.02em;
  color: var(--red); opacity: 0; transform: translate3d(0, 24px, 0);
  padding-inline: 4vw; text-wrap: balance;
}

.trio__wheel {
  position: absolute; left: 50%; top: calc(100% - var(--cap) + var(--R));
  width: calc(var(--R) * 2); height: calc(var(--R) * 2);
  translate: -50% -50%; z-index: 2;
  transform: rotate(var(--rot, 0deg)); will-change: transform;
}
.trio__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgb(0 0 0 / .045) 0 2px, transparent 2px 7px),
    var(--red);
  box-shadow: 0 -1.2rem 2.4rem -1rem rgb(60 8 5 / .45);
}
.trio__rim {
  position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background: repeating-conic-gradient(var(--cream) 0 3deg, var(--red-deep) 0 6deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.4svh), #000 calc(100% - 3.4svh));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.4svh), #000 calc(100% - 3.4svh));
}
.trio__item {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  height: var(--ih, 40svh); width: auto;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--a) * 1deg))
    translateY(calc(-1 * var(--R) + 1.4svh))
    rotate(calc(var(--a) * -1deg - var(--rot, 0deg)))
    translateY(-50%);
  will-change: transform;
}
.trio__item > img { width: auto; height: 100%; max-width: none; filter: drop-shadow(0 1.4svh 1.6svh rgb(60 8 5 / .35)); }
.trio__item[data-i="0"] { --a: 0;   --ih: min(46svh, 38vw); }
.trio__item[data-i="1"] { --a: 120; --ih: min(60svh, 50vw); }
.trio__item[data-i="2"] { --a: 240; --ih: min(52svh, 44vw); }

.trio__copy { position: absolute; left: clamp(1.25rem, 5vw, 5.5rem); bottom: calc(var(--cap) + 8svh); width: min(22rem, 26vw); z-index: 3; }
.trio__p {
  position: absolute; left: 0; bottom: 0; width: 100%;
  font: 500 clamp(1rem, .9rem + .42vw, 1.28rem)/1.5 var(--sc-font-text); color: var(--ink); text-wrap: pretty;
  opacity: 0; transform: translate3d(0, 14px, 0);
}
.trio__note {
  position: absolute; right: clamp(1.25rem, 3.4vw, 4rem); bottom: calc(var(--cap) * .26);
  z-index: 4; color: var(--cream); font: 700 .74rem/1 var(--sc-font-text); letter-spacing: .24em; text-transform: uppercase;
}
.trio__static { display: none; }

/* ============================================================== ESTILO == */
.estilo { position: relative; background: var(--red); color: var(--paper); padding-bottom: clamp(4rem, 9vw, 9rem); }
.estilo .checks { margin-bottom: clamp(3.5rem, 7vw, 7rem); }
.estilo__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: center;
  width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--sc-gutter);
}
.estilo__deck { position: relative; width: min(100%, 36rem); aspect-ratio: 1 / 1.02; justify-self: center; }
.rec {
  position: absolute; left: 0; top: 8%; width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #1b1311 0 2px, #261b18 2px 3.5px);
  box-shadow: 0 2.2rem 3.4rem -1.4rem rgb(40 4 2 / .65), 0 0 0 .5rem rgb(0 0 0 / .08);
  transform: rotate(var(--rr, 0deg));
}
.rec__spin { position: absolute; inset: 0; border-radius: 50%; animation: recSpin 9s linear infinite; }
.rec__sheen { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 8%, rgb(255 255 255 / .16) 12%, transparent 18% 50%, rgb(255 255 255 / .13) 62%, transparent 68%); }
.rec__label { position: absolute; inset: 31%; border-radius: 50%; overflow: hidden; background: var(--red-deep); }
.rec__label img { width: 100%; height: 100%; }
.rec__hole { position: absolute; left: 50%; top: 50%; width: 3.2%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px rgb(0 0 0 / .25); }
@keyframes recSpin { to { transform: rotate(360deg); } }
.arm { position: absolute; right: -2%; top: 0; width: 34%; height: auto; overflow: visible; filter: drop-shadow(0 .8rem .8rem rgb(40 4 2 / .4)); }
.arm__pivot { transform-origin: 118px 52px; transform: rotate(var(--arm, 8deg)); transition: transform 120ms linear; }

.estilo__h { font: 900 clamp(2.8rem, 1.6rem + 5.2vw, 6.2rem)/.92 var(--sc-font-display); letter-spacing: -.02em; color: var(--paper); text-shadow: 0 .06em 0 var(--red-deep); }
.estilo__p { margin-top: 1.2rem; font: 500 clamp(1.05rem, .95rem + .5vw, 1.4rem)/1.45 var(--sc-font-text); max-width: 28ch; color: var(--paper); }
.tracks { list-style: none; margin: clamp(1.8rem, 3vw, 2.8rem) 0 0; padding: 0; border-top: 2px solid rgb(252 245 232 / .5); }
.tracks__row {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline;
  padding: clamp(.8rem, 1.4vw, 1.15rem) .85rem; border-bottom: 2px solid rgb(252 245 232 / .5);
  transition: background-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out);
}
.tracks__n { font: 800 .86rem/1 var(--sc-font-text); letter-spacing: .14em; opacity: .85; }
.tracks__t { font: 900 clamp(1.5rem, 1rem + 1.8vw, 2.5rem)/1 var(--sc-font-display); }
.tracks__d { font: 600 clamp(.9rem, .85rem + .22vw, 1.05rem)/1.2 var(--sc-font-text); text-align: right; }
.tracks__row.is-on { background: var(--paper); color: var(--red-deep); }

/* ================================================================= CASA == */
.casa { background: var(--paper); }
.casa__stage { background: var(--paper); display: flex; align-items: center; }
.casa__rail { display: flex; align-items: center; gap: clamp(1.2rem, 2.6vw, 3rem); padding-inline: var(--sc-gutter) 8vw; will-change: transform; }
.casa__lead { flex: 0 0 auto; width: min(31rem, 80vw); }
.casa__lead h2 { font: 900 clamp(2.4rem, 1.4rem + 4vw, 5.4rem)/.95 var(--sc-font-display); letter-spacing: -.02em; color: var(--red); }
.casa__lead p { margin-top: 1.3rem; font: 500 clamp(1rem, .92rem + .4vw, 1.25rem)/1.55 var(--sc-font-text); max-width: 34ch; color: var(--ink); }
.card {
  --tilt: 0deg; --lift: 0px; --ar: 16 / 9; --h: min(36svh, 22rem);
  flex: 0 0 auto; margin: 0; padding: 10px 10px 0; background: #fff;
  transform: translateY(var(--lift)) rotate(var(--tilt));
  box-shadow: 0 .3rem .5rem rgb(60 20 12 / .14), 0 1.4rem 2.2rem -.9rem rgb(60 20 12 / .36);
  border-radius: 3px;
}
.card img { display: block; height: var(--h); width: auto; aspect-ratio: var(--ar); object-fit: cover; max-width: none; background: var(--cream); }
.card figcaption { padding: .7rem .2rem .8rem; font: 800 .74rem/1 var(--sc-font-text); letter-spacing: .22em; text-transform: uppercase; color: var(--red-deep); }
.card--a { --tilt: -2.2deg; --lift: -4svh; }
.card--b { --tilt: 1.8deg;  --lift: 5svh;  --ar: 3 / 4; --h: min(42svh, 26rem); }
.card--c { --tilt: -1.2deg; --lift: -3svh; }
.card--d { --tilt: 2.4deg;  --lift: 4svh;  --ar: 3 / 4; --h: min(37svh, 23rem); }
.card--e { --tilt: -2deg;   --lift: -2svh; --ar: 3 / 4; --h: min(42svh, 26rem); }
.casa__end { flex: 0 0 auto; width: min(14rem, 60vw); font: 800 .86rem/1.5 var(--sc-font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft, #6A4A41); }

/* ============================================================== PEDIDO == */
.pedido { background: var(--cream); padding-block: clamp(4.5rem, 9vw, 9rem); }
.pedido__wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(2rem, 6vw, 6rem);
  width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--sc-gutter); align-items: start;
}
.pedido__intro { grid-column: 1; }
.pedido__intro h2 { font: 900 clamp(2.6rem, 1.5rem + 4.4vw, 5.6rem)/.94 var(--sc-font-display); letter-spacing: -.02em; color: var(--red); }
.pedido__intro p { margin-top: 1.2rem; font: 500 clamp(1rem, .92rem + .4vw, 1.2rem)/1.55 var(--sc-font-text); max-width: 38ch; color: var(--ink); }
.pedido__form { grid-column: 1; margin-top: clamp(2rem, 4vw, 3.2rem); display: grid; gap: 1.5rem; }
.pedido__out { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 5.5rem; }

.opt { border: 0; padding: 0; margin: 0; min-width: 0; }
.opt legend { padding: 0; margin-bottom: .7rem; font: 800 .76rem/1 var(--sc-font-text); letter-spacing: .24em; text-transform: uppercase; color: var(--red-deep); }
.opt__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.chip span {
  display: inline-flex; align-items: center; min-height: 2.9rem; padding: .6rem 1.2rem; border-radius: 999px;
  font: 700 1rem/1 var(--sc-font-text); color: var(--ink);
  background: var(--paper); box-shadow: inset 0 0 0 2px rgb(42 21 17 / .28);
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.chip input:checked + span { background: var(--red); color: var(--paper); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2); }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.chip input:active + span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .chip input:not(:checked):hover + span { box-shadow: inset 0 0 0 2px var(--red); } }

.name { display: grid; gap: .6rem; }
.name span { font: 800 .76rem/1 var(--sc-font-text); letter-spacing: .24em; text-transform: uppercase; color: var(--red-deep); }
.name input {
  width: 100%; max-width: 26rem; min-height: 3.2rem; padding: .7rem 1.1rem; border: 0; border-radius: 999px;
  background: var(--paper); box-shadow: inset 0 0 0 2px rgb(42 21 17 / .28);
  font: 600 1.05rem/1.2 var(--sc-font-text); color: var(--ink);
}
.name input::placeholder { color: #8a6a60; }
.name input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pedido__note { font: 500 .88rem/1.5 var(--sc-font-text); color: var(--ink-soft); }

/* the ticket */
.ticket { --tp: #FFFDF6; position: relative; max-width: 25rem; margin-inline: auto; transform: rotate(1.6deg); filter: drop-shadow(0 1.2rem 1.4rem rgb(60 20 12 / .28)); }
.ticket__edge { height: 11px; background: var(--tp); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; }
.ticket__edge--b { transform: scaleY(-1); }
.ticket__body { background: var(--tp); padding: 1.1rem 1.7rem 1.3rem; color: var(--ink); }
.ticket__head { display: flex; align-items: center; gap: .9rem; padding-bottom: 1rem; border-bottom: 2px dashed rgb(42 21 17 / .4); }
.ticket__head img { width: 4rem; height: 4rem; flex: none; }
.ticket__brand { font: 900 1.7rem/1 var(--sc-font-display); letter-spacing: -.01em; color: var(--red); text-transform: uppercase; }
.ticket__kind { margin-top: .3rem; font: 800 .72rem/1 var(--sc-font-text); letter-spacing: .24em; text-transform: uppercase; }
.ticket__who { margin-top: 1rem; font: 800 .9rem/1.2 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.ticket__lines { list-style: none; margin: .8rem 0 0; padding: 0; }
.ticket__lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .62rem 0; border-bottom: 2px dotted rgb(42 21 17 / .35); font: 600 1rem/1.2 var(--sc-font-text); }
.ticket__lines b { font-weight: 800; text-align: right; }
.ticket__made { margin-top: 1rem; text-align: center; font: 900 1.5rem/1 var(--sc-font-display); color: var(--red); }
.ticket__made span { font-size: .9rem; letter-spacing: .3em; }
.ticket__foot { margin-top: .8rem; text-align: center; font: 700 .76rem/1.7 var(--sc-font-text); letter-spacing: .18em; text-transform: uppercase; }
.ticket__date { margin-top: .7rem; text-align: center; font: 600 .78rem/1 var(--sc-font-text); letter-spacing: .1em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ticket.is-bump .ticket__lines b { animation: bump 360ms var(--sc-ease-out); }
@keyframes bump { 0% { transform: translateY(6px); opacity: .2; } 100% { transform: none; opacity: 1; } }
.pedido__actions { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.pedido__status { margin-top: .9rem; min-height: 1.4em; text-align: center; font: 600 .9rem/1.4 var(--sc-font-text); color: var(--ink-soft); }

/* ================================================================ CLOSE == */
.close { position: relative; background: var(--paper); color: var(--paper); min-height: 100svh; display: flex; flex-direction: column; }
.close__bg { position: absolute; inset: 0; background: var(--red); }
.close__in {
  position: relative; z-index: 2; flex: 1; display: grid; place-content: center; justify-items: center; gap: clamp(1rem, 2.4vw, 1.8rem);
  padding: clamp(4rem, 8vw, 8rem) var(--sc-gutter) clamp(1.5rem, 3vw, 2.5rem); text-align: center;
}
.stamp { position: relative; width: clamp(10rem, 22vw, 17rem); aspect-ratio: 1; }
.stamp__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: recSpin 26s linear infinite; }
.stamp__ring text { font: 800 21px/1 var(--sc-font-text); fill: var(--cream); }
.stamp__badge { position: absolute; inset: 20%; width: 60%; height: 60%; filter: drop-shadow(0 .5rem .6rem rgb(40 4 2 / .4)); }
.close__h { font: 900 clamp(3.2rem, 1.2rem + 9vw, 10.5rem)/.9 var(--sc-font-display); letter-spacing: -.025em; color: var(--paper); text-shadow: 0 .05em 0 var(--red-deep); }
.close__p { font: 600 clamp(1.05rem, .95rem + .6vw, 1.5rem)/1.4 var(--sc-font-text); letter-spacing: .02em; }
/* rodape: linha legal + assinatura, no formato do site da All Black */
.close__foot { position: relative; z-index: 2; width: 100%; padding: 0 var(--sc-gutter) calc(1.1rem + env(safe-area-inset-bottom)); }
.close__legal {
  max-width: var(--sc-maxw); margin-inline: auto; padding-top: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem 2rem;
  border-top: 1px solid rgb(252 245 232 / .38);
  font: 600 .7rem/1.4 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); text-align: left;
}
.close__legal p { margin: 0; }
.close__credit a {
  display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--paper); text-decoration: none;
  text-underline-offset: .3em; transition: color 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .close__credit a:hover { text-decoration: underline; } }
.close__credit a:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; border-radius: 2px; }
.checks--end { position: relative; z-index: 2; }

/* ================================================== MOBILE / PORTRAIT ===== */
/* ===== hero recomposto SO em tela retrato ou quadrada (aspecto <= 5/4). Celular deitado
   (844x390) e tablet deitado usam a composicao em unidade --u, que ja escala pela altura. ===== */
@media (max-aspect-ratio: 5/4) {
  .hero { --sg: calc(var(--band-h) + 4.2svh); --sf: min(25vw, 15.5svh);
          /* o tabuleiro nunca invade o texto: largura limitada pelo espaco entre o fim do texto e o tampo */
          --tb: calc(var(--sg) + var(--sf) * 1.72 + 3svh + 9.4rem); }
  .band { justify-content: center; padding-left: calc(var(--band-h) * 1.3 + 1.1rem); padding-right: .5rem; }
  .band__nav { margin-inline: auto; }
  .band__cta { display: none; }
  .band__badge { width: calc(var(--band-h) * 1.3); left: max(env(safe-area-inset-left), .5rem); top: calc(var(--band-h) * .12); }
  .hero__sign { left: 5vw; top: var(--sg); }
  .sign { font-size: var(--sf); }
  /* o selo pendurado desce com o letreiro: sobra um respiro entre a faixa fixa e o conteudo do hero */
  .hero__hang { left: auto; right: 4vw; top: calc(var(--band-h) + 3.4svh - min(11vw, 6svh)); width: 27vw; }
  .hero__hang > img { margin-top: min(11vw, 6svh); }
  .hero__chain { height: min(11.4vw, 6.2svh); }
  .hero__tray { left: 50%; translate: -50% 0; width: min(104vw, calc((var(--ph) * .732 - var(--tb)) * 1.77)); bottom: calc(var(--ph) * .266); }
  .hero__text {
    left: 6vw; right: 6vw; width: auto; bottom: auto; top: calc(var(--sg) + var(--sf) * 1.72 + 3svh);
    text-shadow: none; color: var(--ink);
  }
  .hero__tag { font-size: clamp(1.7rem, 7.4vw, 2.6rem); }
  .hero__sub { font-size: .98rem; margin-top: .5rem; max-width: 30ch; }
  .hero__cta { left: 0; right: 0; bottom: calc(var(--ph) * .062); display: flex; justify-content: center; }
  .hero__props { display: none; }
  .hero__light { display: none; }
  .hero__bellwrap { left: auto; right: 4.5vw; width: max(4.6rem, 18vw); bottom: calc(var(--ph) * .236); }
  .bell__slip { font-size: 1rem; }
}
/* celular deitado: composicao em --u (ja escala pela altura); tipografia em rem e o botao encolhem para caber */
@media (min-aspect-ratio: 5/4) and (max-height: 520px) {
  .hero__text { width: calc(52 * var(--u)); }
  .hero__tag { font-size: max(1.2rem, calc(3.1 * var(--u))); }
  .hero__sub { font-size: .8rem; max-width: 46ch; }
  .hero__cta .btn { min-height: 2.6rem; padding: .55rem 1.1rem; font-size: .72rem; }
  .band__a { font-size: .72rem; letter-spacing: .14em; padding-inline: 1rem; }
  .hero__props { display: none; }
}
/* celulares (largura <= 600): o texto do hero e curto, o tabuleiro pode ocupar quase a tela toda */
@media (max-aspect-ratio: 5/4) and (max-width: 600px) {
  .hero { --tb: calc(var(--sg) + var(--sf) * 1.72 + 3svh + 7rem); }
}
/* celulares baixos (iPhone SE 1a geracao e parecidos): letreiro e texto mais compactos */
@media (max-aspect-ratio: 5/4) and (max-height: 700px) {
  .hero { --sf: min(23vw, 12.5svh); --tb: calc(var(--sg) + var(--sf) * 1.72 + 3svh + 6.6rem); }
  .hero__tag { font-size: clamp(1.45rem, 6.8vw, 2rem); }
  .hero__sub { font-size: .9rem; max-width: 34ch; }
}

@media (max-width: 860px), (max-aspect-ratio: 5/4) {
  :root { --band-h: 2.7rem; }

  .band__a { letter-spacing: .16em; padding-inline: clamp(.55rem, 3vw, 1.2rem); font-size: .72rem; }

  .smash__world { --d: min(78vw, 40svh); }
  .smash__spot { top: 39%; }
  .smash__steam { top: 39%; }
  .smash__flash { background: radial-gradient(circle at 50% 39%, rgb(255 240 210 / .95), rgb(255 240 210 / 0) 62%); }
  .smash__iris { clip-path: circle(var(--ir, 0px) at 50% 39%); }
  .smash__boom { font-size: min(21vw, 17svh); }

  /* A palavra mais larga (BURGER, 4.1em) tem que caber com folga: 21vw = 86% da tela.
     --room e o que sobra entre o fim do texto e o disco: os alimentos crescem ate la. */
  .trio__stage {
    --R: min(150vw, 82svh); --cap: 14svh;
    --fs: min(21vw, 16svh); --t0: max(9svh, 4rem);
    --ty: calc(var(--t0) + var(--fs) * 1.76 + .8rem);
    --room: calc(100svh - var(--cap) - var(--ty) - 5.4rem);
  }
  .trio__word { font-size: var(--fs); top: var(--t0); padding-inline: 3vw; }
  .trio__item[data-i="0"] { --ih: min(34svh, 74vw, var(--room)); }
  .trio__item[data-i="1"] { --ih: min(45svh, 120vw, var(--room)); }
  .trio__item[data-i="2"] { --ih: min(40svh, 100vw, var(--room)); }
  .trio__copy { left: 8vw; right: 8vw; width: auto; top: var(--ty); bottom: auto; }
  .trio__p { top: 0; bottom: auto; text-align: center; font-size: 1.02rem; }
  .trio__note { left: 0; right: 0; text-align: center; bottom: calc(var(--cap) * .3); font-size: .72rem; letter-spacing: .18em; }

  .estilo__wrap { grid-template-columns: 1fr; }
  .estilo__deck { width: min(86vw, 24rem); }
  .tracks__row { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .tracks__d { grid-column: 2; text-align: left; margin-top: -.2rem; }

  .card { --h: min(28svh, 16rem); }
  .card--b { --h: min(36svh, 21rem); }
  .card--d { --h: min(32svh, 19rem); }
  .card--e { --h: min(36svh, 21rem); }
  .casa__lead { width: 80vw; }

  .pedido__wrap { grid-template-columns: 1fr; }
  .pedido__out { grid-column: 1; grid-row: auto; position: static; margin-top: 2.5rem; }
  .pedido__intro, .pedido__form { grid-column: 1; }
}
@media (max-width: 860px) { .close__legal { flex-direction: column; align-items: flex-start; } }
@media (max-width: 420px) {
  .band__a { letter-spacing: .12em; padding-inline: .6rem; }
  .band__x { display: none; }
}

/* ============================================ REDUCED MOTION / NO JS ====== */
@media (prefers-reduced-motion: reduce) {
  .hero__hang > img, .rec__spin, .stamp__ring, .smash__steam i, .load__rec { animation: none !important; }
  html.js:not(.hero-in):not(.lit) .hero__layer > *, html.js:not(.hero-in):not(.lit) .hero__text > *, html.js:not(.hero-in):not(.lit) .hero__cta > * { opacity: 1; }
  .hero__layer { transform: none !important; }
  .band { transform: none !important; }
  .band__badge { opacity: 1; pointer-events: auto; }
  .hero__tray > img, .hero__text > *, .hero__cta > *, .hero__sign .sign__i, .bell, .bell img { animation: none !important; }
  .hero__glint::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .smash, .trio { height: auto !important; }
  .smash__stage, .trio__stage { position: relative !important; height: 100svh; min-height: 34rem; }
  .trio__stage { display: none; }
  .trio__static { display: grid; }
  .casa { height: auto !important; }
  .casa__stage { position: relative !important; height: auto; overflow-x: auto; padding-block: 3rem; }
  .casa__rail { transform: none !important; }
}
html.no-js .smash, html.no-js .trio { height: auto; }
html.no-js .smash__stage { position: relative; height: 100svh; min-height: 34rem; overflow: clip; }
html.no-js .smash__bg video { display: none; }
html.no-js .trio__stage { display: none; }
html.no-js .trio__static { display: grid; }
.trio__static {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 3rem); align-items: end;
  padding: clamp(3rem, 7vw, 6rem) var(--sc-gutter); max-width: 80rem; margin-inline: auto; background: var(--cream);
}
.trio__static article { display: grid; gap: .8rem; }
.trio__static img { width: 100%; max-width: 20rem; justify-self: center; height: auto; }
.trio__static h3 { font: 900 clamp(1.8rem, 1.2rem + 2vw, 3rem)/1 var(--sc-font-display); color: var(--red); text-transform: uppercase; }
.trio__static p { font: 500 1.05rem/1.5 var(--sc-font-text); max-width: 30ch; }
.trio__note--static { grid-column: 1 / -1; position: static; color: var(--red-deep); text-align: center; }
@media (max-width: 700px) { .trio__static { grid-template-columns: 1fr; } }

html.no-js .hero__bellwrap { display: none; }