/* ═══════════════════════════════════════════════════════════
   RED BULL · 250 ml — folha de estilo da landing scroll-driven
   Ordem: base → utilitários de entrada → atos, na ordem da página.
   ═══════════════════════════════════════════════════════════ */

:root{
  --breu:#05070F;      --breu2:#0A0F1E;
  --azul:#1B3FAE;      --azul-claro:#4E86FF;
  --vermelho:#DB0A40;  --ouro:#FFC61E;
  --prata:#C3CCDB;     --papel:#F4F7FD;
  --gut:clamp(20px,4vw,52px);
  --borda:rgba(255,255,255,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--breu);color:var(--papel);overflow-x:hidden;
  font:400 16px/1.65 Barlow,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--vermelho);color:#fff}
:focus-visible{outline:2px solid var(--ouro);outline-offset:4px;border-radius:3px}

/* atalho de teclado: invisível até receber foco, aí desce por cima do nav */
.pulo{
  position:fixed;top:14px;left:14px;z-index:70;translate:0 -220%;
  padding:12px 22px;border-radius:999px;
  background:var(--ouro);color:var(--breu);font-weight:600;font-size:14px;
  transition:translate .3s;
}
.pulo:focus{translate:0 0}

.display{
  font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  font-weight:900;line-height:.84;letter-spacing:-.015em;text-transform:uppercase;
}
.olho{
  display:inline-block;font-weight:600;font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--azul-claro);margin-bottom:24px;
}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}

/* granulado + vinheta: dão peso de filme e escondem banding do gradiente */
.grain{
  position:fixed;inset:-120%;z-index:3;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation:tremor 7s steps(6) infinite;
}
@keyframes tremor{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-2%,1.5%)}
  40%{transform:translate(1.5%,-1%)} 60%{transform:translate(-1%,-2%)} 80%{transform:translate(2%,1%)}
}
.vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 45%,transparent 42%,rgba(0,0,0,.62) 100%);
}

/* barras de progresso: largura cheia + scaleX. O JS mexe nisso a cada frame,
   entao nao pode ser width -- seria layout em toda rolagem. */
#progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  background:linear-gradient(90deg,var(--azul-claro),var(--ouro),var(--vermelho));
  box-shadow:0 0 14px rgba(255,198,30,.6);
}

/* magnetismo: o JS escreve um translate proporcional à distância do cursor;
   a transição com overshoot devolve o elemento com molejo quando ele sai */
.ima{transition:transform .5s cubic-bezier(.2,.75,.3,1.4)}

/* ── NAV ────────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px var(--gut);
  transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
/* encolher = escalar o conteudo, nao mexer no padding (padding animado = layout) */
nav.encolhe{
  background:rgba(5,7,15,.72);backdrop-filter:blur(14px);
  border-bottom-color:var(--borda);
}
nav .mark,nav .links{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
nav.encolhe .mark{transform:scale(.88);transform-origin:left center}
nav.encolhe .links{transform:scale(.92);transform-origin:right center}
nav .mark{
  display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:20px;letter-spacing:.06em;
}
nav .mark i{
  width:11px;height:11px;border-radius:50%;background:var(--vermelho);
  box-shadow:0 0 0 4px rgba(219,10,64,.22);animation:pulso 2.6s ease-in-out infinite;
}
@keyframes pulso{50%{box-shadow:0 0 0 10px rgba(219,10,64,0)}}
nav .links{display:flex;gap:clamp(14px,2.4vw,30px)}
nav .links a{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--prata);position:relative;padding:4px 0;
}
nav .links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ouro);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){
  nav .links a:hover{color:var(--papel)}
  nav .links a:hover::after{transform:scaleX(1)}
}

/* ── parallax + entradas ────────────────────────────────────
   O JS escreve SÓ a variável --py (deslocamento do parallax); quem monta o
   transform é o CSS. Assim os dois efeitos convivem no mesmo elemento em vez
   de um sobrescrever o transform do outro. */
[data-par],[data-fundo]{transform:translate3d(0,var(--py,0px),0)}

[data-vem]{
  opacity:0;transition:opacity .9s cubic-bezier(.16,.84,.28,1),transform .9s cubic-bezier(.16,.84,.28,1),filter .9s;
  filter:blur(6px);
}
[data-vem="esquerda"]{transform:translate3d(-16vw,var(--py,0px),0) rotate(-5deg)}
[data-vem="direita"] {transform:translate3d(16vw,var(--py,0px),0) rotate(3deg)}
[data-vem="baixo"]   {transform:translate3d(0,calc(64px + var(--py,0px)),0)}
[data-vem].visivel{opacity:1;transform:translate3d(0,var(--py,0px),0);filter:none}

/* título fatiado em caracteres: cada um sobe do próprio corte.
   O padding/margem negativa no topo abre espaço para acentos: com line-height
   .84 o recorte comia o circunflexo de "CÂMERA". */
.fatia{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-top:.18em;margin-top:-.18em;
}
.fatia > i{
  display:inline-block;font-style:normal;transform:translateY(130%) rotate(9deg);
  transition:transform .9s cubic-bezier(.16,.84,.28,1);
  transition-delay:calc(var(--i) * 28ms);
}
.visivel .fatia > i,.fatia.visivel > i{transform:none}

/* odômetro: cada algarismo é uma coluna de 0-9 que rola até o dígito final.
   O separador de milhar entra como coluna fixa pra alinhar igual às demais. */
.rolo{
  display:inline-block;overflow:hidden;height:1em;line-height:1;
  vertical-align:-.13em;
}
.rolo--fixo{overflow:visible}
.rolo__tira{display:block;transition:transform 1.7s cubic-bezier(.16,.8,.22,1)}
.rolo__tira i{display:block;height:1em;font-style:normal}

/* ── ATO 0 · ABERTURA ───────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  padding:110px var(--gut) 90px;overflow:hidden;
  /* o dedo arrasta pro lado pra pular de lata; a rolagem vertical e o zoom
     continuam sendo do navegador -- nada aqui dá preventDefault */
  touch-action:pan-y pinch-zoom;
  /* registrada como <color> lá embaixo, --tom interpola de verdade;
     transition:background num gradiente não anima nada, só salta */
  transition:--tom 1.2s;
  background:
    radial-gradient(70% 55% at 50% 62%,rgba(27,63,174,.44),transparent 72%),
    linear-gradient(180deg,#070B18 0%,#05070F 62%,#080D1C 100%);
}
@property --tom{syntax:'<color>';inherits:true;initial-value:rgb(78,134,255)}
.hero__aura{
  position:absolute;width:min(760px,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--tom) 55%,transparent),rgba(219,10,64,.16) 45%,transparent 68%);
  filter:blur(70px);top:46%;left:50%;translate:-50% -50%;
  scale:calc(1 + var(--hp,0) * .3);
}
.hero__rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.hero__rings span{
  position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%;
  width:min(540px,86vw);aspect-ratio:1;animation:respira 9s ease-in-out infinite;
}
.hero__rings span:nth-child(2){width:min(760px,118vw);animation-delay:-3s;border-color:rgba(78,134,255,.10)}
.hero__rings span:nth-child(3){width:min(980px,150vw);animation-delay:-6s;border-color:rgba(255,255,255,.04)}
@keyframes respira{50%{transform:scale(1.055);opacity:.55}}

.hero__type{
  grid-area:1/1;font-size:clamp(78px,17.5vw,250px);text-align:center;
  display:flex;flex-direction:column;line-height:.8;
  /* drop-shadow e não text-shadow: o overflow de cada .fatia recortaria a
     sombra letra a letra e deixaria retângulos visíveis atrás do texto */
  filter:drop-shadow(0 20px 46px rgba(0,0,0,.6));
  /* --hp = progresso do ato: o título cresce e apaga enquanto a lata assume */
  transform:scale(calc(1 + var(--hp,0) * .12));
  opacity:calc(1 - var(--hp,0) * .45);
}
.hero__type .ln--out{
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.42);
}
/* --hp = progresso 0→1 do ato da hero; --rol = inclinação pela velocidade do
   scroll. O JS só escreve as variáveis, o transform é montado aqui. */
.hero__can{
  grid-area:1/1;position:relative;z-index:2;will-change:transform;
  display:grid;place-items:center;
  /* a margem sobe a lata uns 20px do centro: abre respiro entre a base dela
     e a legenda, que desceu para perto do rodapé da hero */
  margin-bottom:44px;
  animation:flutua 6.5s ease-in-out infinite;
}
.hero__cue{opacity:calc(1 - var(--hp,0) * 6)}
/* a flutuação vive na img, não na figure: a figure é quem recebe o parallax e
   uma animação de transform sempre vence o transform do elemento */
/* a troca não é mais uma animação disparada e sim POSIÇÃO: o laço escreve
   transform/opacity de cada lata a partir do índice contínuo do scroll (com
   inércia). Não existe animação pra falhar nem pra ser interrompida no meio.
   A flutuação e a inclinação (--rol) vivem na figure; os keyframes resolvem a
   variável a cada quadro, senão a animação atropelaria o rotate. */
.hero__can img{
  grid-area:1/1;height:min(74svh,660px);width:auto;will-change:transform,opacity;
  filter:drop-shadow(0 46px 60px rgba(0,0,0,.72)) drop-shadow(0 0 46px color-mix(in srgb,var(--tom) 34%,transparent));
  opacity:0;
  /* o tranco de quando a lata abre mora em scale (propriedade independente):
     o transform é do laço e não pode ganhar transição nenhuma */
  transition:scale .19s cubic-bezier(.3,.7,.3,1.35);
}
.hero__can img.atual{opacity:1}   /* estado sem JS / movimento reduzido */
/* --tx/--ty são o tilt do mouse; entram aqui dentro porque uma animação sempre
   vence o transform inline do elemento -- é a mesma razão do --rol */
@keyframes flutua{
  0%,100%{transform:perspective(950px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) rotate(var(--rol,0deg)) translateY(0)}
  50%{transform:perspective(950px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) rotate(var(--rol,0deg)) translateY(-16px)}
}

/* ── a lata abre: PSSHT ─────────────────────────────────────
   O botão é transparente e ocupa a caixa da lata; o rótulo só aparece no hover
   (ou sempre, discreto, no toque) e some depois da primeira aberta. */
.hero__abrir{
  position:absolute;inset:0;z-index:4;padding:0;border:0;background:none;
  cursor:pointer;border-radius:20px;
}
.hero__abrir b{
  position:absolute;top:13%;left:50%;translate:-50% 0;white-space:nowrap;
  padding:8px 15px;border-radius:999px;pointer-events:none;
  font:600 10px/1 Barlow,sans-serif;letter-spacing:.24em;text-transform:uppercase;
  color:var(--papel);background:rgba(5,7,15,.52);border:1px solid var(--borda);
  backdrop-filter:blur(6px);opacity:0;transition:opacity .4s;
}
@media (hover:hover){.hero__abrir:hover b{opacity:1}}
/* no toque não existe hover: o convite fica sempre visível, mas fora da arte --
   desce pro respiro entre a base da lata e a legenda */
@media (hover:none){.hero__abrir b{top:auto;bottom:-36px;opacity:.55}}
.hero__abrir:focus-visible b{opacity:1}
.hero__can.jaabriu .hero__abrir b{opacity:0}

/* anel de pressão: o JS posiciona no lacre e reinicia a animação a cada aberta */
.hero__anel{
  position:absolute;z-index:1;pointer-events:none;
  width:min(300px,58vw);aspect-ratio:1;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--tom) 72%,transparent);
  translate:-50% -50%;opacity:0;
}
.hero__anel.solta{animation:anelExpande .75s cubic-bezier(.2,.7,.25,1)}
@keyframes anelExpande{
  from{scale:.16;opacity:.85}
  to{scale:2.5;opacity:0}
}
/* a onomatopeia estoura ao lado do lacre e sobe */
.hero__pssht{
  position:absolute;z-index:5;pointer-events:none;font-style:normal;
  font-family:"Barlow Condensed",sans-serif;font-weight:900;
  font-size:clamp(24px,3.6vw,52px);letter-spacing:.01em;color:var(--tom);
  text-shadow:0 6px 26px rgba(0,0,0,.7);opacity:0;translate:-4% -100%;
}
.hero__pssht.solta{animation:psshtSai .95s cubic-bezier(.2,.7,.25,1)}
@keyframes psshtSai{
  0%{opacity:0;scale:.5;rotate:-15deg}
  22%{opacity:1;scale:1.14;rotate:-8deg}
  60%{opacity:1;scale:1;rotate:-9deg}
  100%{opacity:0;scale:1.06;rotate:-4deg;translate:-4% -155%}
}

/* facho especular: mora dentro da figure (herda a flutuação e o tilt) e é
   recortado na silhueta da lata ativa -- a máscara é trocada pelo JS */
.hero__brilho{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(42% 30% at var(--mx,50%) var(--my,38%),
    rgba(255,255,255,.62),rgba(255,255,255,.14) 40%,transparent 72%);
  mix-blend-mode:screen;transition:opacity .55s;
}
@media (hover:hover){.hero:hover .hero__brilho{opacity:.48}}
/* pulso de chegada: quando a lata crava no centro, um clarão rápido percorre o
   brilho dela -- o from/to implícito herda o filter base, só o pico é descrito */
.hero__can img.chega{animation:cravou .8s cubic-bezier(.3,.65,.3,1)}
@keyframes cravou{
  30%{filter:drop-shadow(0 46px 60px rgba(0,0,0,.72)) drop-shadow(0 0 72px color-mix(in srgb,var(--tom) 62%,transparent)) brightness(1.3) saturate(1.12)}
}
/* bolhas de carbonatação: canvas desenhado no mesmo laço, atrás da lata */
/* width/height explícitos: canvas é replaced element, inset:0 sozinho não estica */
.hero__gas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ficha do sabor: escorrega da lateral oposta à entrada da lata */
.hero__ficha{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  left:clamp(26px,8vw,150px);max-width:min(300px,30vw);text-align:right;
  --dx:-70px;
  transform:translateX(var(--dx));opacity:0;
  transition:transform .9s cubic-bezier(.16,.84,.28,1),opacity .6s;
}
.hero__ficha.dir{left:auto;right:clamp(26px,8vw,150px);text-align:left;--dx:70px}
.hero__ficha.mostra{transform:none;opacity:1}
.hero__ficha strong{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:clamp(30px,3.6vw,52px);line-height:.94;text-transform:uppercase;
  letter-spacing:.02em;color:var(--tom);margin-bottom:12px;
}
.hero__ficha span{color:var(--prata);font-size:14px;line-height:1.65;display:block}

/* trilha de sabores: um traço por lata, encostada na borda direita */
.hero__trilha{
  position:absolute;right:clamp(16px,3vw,44px);top:50%;translate:0 -50%;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero__trilha i{
  width:3px;height:26px;border-radius:2px;background:rgba(255,255,255,.13);
  transform:scaleY(.62);transform-origin:50% 100%;
  transition:background .5s,transform .5s cubic-bezier(.2,.7,.2,1);
}
.hero__trilha i.foi{background:rgba(255,255,255,.36);transform:scaleY(.62)}
.hero__trilha i.aqui{background:var(--tom);transform:scaleY(1)}
/* no primeiro toque a trilha pisca em cascata: é o aviso de que dá pra arrastar
   de lata em lata. Anima scale (independente) pra não pisar no transform acima */
.hero__trilha.dica i{animation:dicaPulsa .8s ease-in-out;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes dicaPulsa{50%{scale:2.4 1.15}}
.hero__trilha b{
  margin-top:6px;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.14em;color:var(--prata);
  writing-mode:vertical-rl;
}
.hero__trilha b strong{color:var(--tom);font-weight:800}
.hero__sabor{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tom);
}

/* mais para baixo que o fim do grid: a margem negativa empurra a legenda para
   dentro do padding da hero, longe da base da lata; a sombra dupla mantém a
   leitura mesmo quando a lata flutua por trás */
.hero__sub{
  grid-area:1/1;align-self:end;text-align:center;z-index:3;margin-bottom:-64px;
  color:var(--prata);font-size:14px;letter-spacing:.06em;line-height:1.8;
  text-shadow:0 2px 14px rgba(0,0,0,.9),0 0 30px rgba(0,0,0,.65);
}
.hero__sub b{color:var(--papel);font-weight:600}
/* o cue sai do centro (a legenda desceu para lá) e vai para o canto esquerdo,
   espelhando a trilha de sabores que já mora na direita */
.hero__cue{
  position:absolute;bottom:22px;left:var(--gut);z-index:4;
  font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--prata);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.hero__cue i{
  width:1px;height:44px;background:linear-gradient(var(--ouro),transparent);
  animation:desce 1.9s ease-in-out infinite;
}
@keyframes desce{0%{opacity:0;transform:scaleY(.2)}45%{opacity:1}100%{opacity:0;transform:translateY(20px) scaleY(.2)}}

/* o único pedido de ação da página: pílula que herda a cor do sabor ativo */
.hero__cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:13px 28px;
  border:1px solid color-mix(in srgb,var(--tom) 62%,transparent);border-radius:999px;
  font-weight:600;font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  line-height:1;color:var(--papel);
  background:color-mix(in srgb,var(--tom) 15%,transparent);
  transition:transform .5s cubic-bezier(.2,.75,.3,1.4),background-color .4s,border-color .4s,box-shadow .4s;
}
.hero__cta i{font-style:normal;color:var(--ouro);transition:transform .35s}
@media (hover:hover){
  .hero__cta:hover{
    background:color-mix(in srgb,var(--tom) 34%,transparent);
    box-shadow:0 10px 34px color-mix(in srgb,var(--tom) 36%,transparent);
  }
  .hero__cta:hover i{transform:translateY(3px)}
}

/* CTA fixo do celular: aparece depois da hero e some quando a galeria chega */
.cta-fixa{display:none}
@media (max-width:760px){
  .cta-fixa{
    display:flex;position:fixed;left:16px;right:16px;bottom:14px;z-index:55;
    justify-content:center;align-items:center;padding:15px;border-radius:14px;
    font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18px;
    letter-spacing:.08em;text-transform:uppercase;color:#fff;
    background:linear-gradient(120deg,var(--azul),#2E56D8);
    box-shadow:0 10px 30px rgba(0,0,0,.5);
    transform:translateY(140%);transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .cta-fixa.mostra{transform:none}
}

/* ── TARJA ──────────────────────────────────────────────── */
.fita{
  border-block:1px solid var(--borda);background:var(--breu2);
  overflow:hidden;padding:16px 0;position:relative;z-index:4;
}
.fita__pista{display:flex;gap:34px;white-space:nowrap;will-change:transform;align-items:center}
.fita span{
  font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:clamp(24px,3.6vw,46px);
  letter-spacing:.01em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);
}
.fita span:nth-of-type(even){color:var(--ouro);-webkit-text-stroke:0}
.fita b{color:var(--vermelho);font-size:26px}

/* ── ATOS COM PALCO FIXO ────────────────────────────────── */
.ato{height:var(--altura);position:relative}
.ato__palco{position:sticky;top:0;height:100svh;overflow:hidden}

/* ATO 1 · FÓRMULA -- roda de tipografia gigante. Sem lata: a hero já é o
   showcase dela. Cada passo é uma tela inteira que gira num tambor vertical
   (o laço escreve o transform por quadro, o CSS não anima nada aqui). */
.formula{
  display:grid;place-items:center;perspective:1100px;
  background:radial-gradient(58% 50% at 50% 50%,#0C1526,var(--breu) 78%);
}
.palco__luz{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:min(620px,90vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--luzcor,var(--azul-claro)) 0%,var(--azul) 34%,transparent 66%);
  filter:blur(72px);opacity:.35;
}
.roda{
  list-style:none;grid-area:1/1;position:relative;
  width:min(940px,94vw);height:100svh;transform-style:preserve-3d;
}
.passo{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  padding:0 var(--gut);will-change:transform,opacity;backface-visibility:hidden;
}
.passo__fantasma{
  position:absolute;inset:0;display:grid;place-items:center;z-index:-1;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:normal;
  font-size:min(56svh,34vw);line-height:1;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--ac) 22%,transparent);
}
.passo__rotulo{
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;font-weight:600;
  color:var(--ac);margin-bottom:16px;
}
.passo h2{font-size:clamp(52px,8vw,130px);margin-bottom:18px}
.passo h2 small{font-size:.3em;letter-spacing:.02em;color:var(--prata);margin-left:.12em}
.passo h2 em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ac)}
.passo p{color:var(--prata);font-size:15px;line-height:1.7;max-width:44ch;margin:0 auto}

/* traço de energia que o scroll desenha atrás do tambor; a cor acompanha a
   --luzcor do passo ativo, escrita no palco pelo laço */
.formula__linha{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.formula__linha path{
  stroke:var(--luzcor,var(--ouro));stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke .5s;filter:drop-shadow(0 0 6px var(--luzcor,var(--ouro)));
}

.trilho{
  position:absolute;right:calc(var(--gut) / 2);top:50%;translate:0 -50%;
  display:flex;flex-direction:column;gap:9px;z-index:5;
}
.trilho i{
  width:2px;height:38px;background:rgba(255,255,255,.16);
  transform:scaleY(.68);transition:background .35s,transform .35s cubic-bezier(.2,.7,.2,1);
}
.trilho i.on{background:var(--ouro);transform:scaleY(1)}

/* ATO 2 · FILME — o vídeo toca sozinho, grudado no fundo pelo palco sticky;
   o texto é absoluto na primeira tela da seção, então sobe com a página e vai
   embora enquanto o filme continua rodando atrás */
.filme{display:grid;place-items:center;background:#000}
.filme__video{
  grid-area:1/1;width:100%;height:100svh;object-fit:cover;
}
.filme__veu{
  grid-area:1/1;width:100%;height:100svh;
  /* sem texto por cima, o véu só funde as bordas do vídeo com o fundo da página */
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 26%,rgba(0,0,0,0) 72%,rgba(0,0,0,.62));
  /* o véu cobre o vídeo inteiro: sem isso ele engoliria o clique do botão */
  pointer-events:none;
}

/* botão de som: fica no canto do palco, aparece junto com o filme */
.filme__som{
  grid-area:1/1;place-self:end start;z-index:2;position:relative;
  margin:0 0 clamp(26px,5vh,54px) clamp(20px,5vw,64px);
  display:flex;align-items:center;gap:11px;
  padding:11px 20px 11px 16px;border-radius:999px;cursor:pointer;
  background:rgba(5,7,15,.5);border:1px solid var(--borda);
  backdrop-filter:blur(9px);color:var(--papel);
  font:600 11px/1 Barlow,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;translate:0 14px;pointer-events:none;
  transition:opacity .5s,translate .5s,border-color .3s,background .3s;
}
.filme__som.mostra{opacity:1;translate:0 0;pointer-events:auto}
@media (hover:hover){
  .filme__som:hover{background:rgba(5,7,15,.78);border-color:color-mix(in srgb,var(--ouro) 55%,transparent)}
}
.filme__som:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
/* no celular o CTA fixo mora no mesmo canto: o botão de som sobe pra cima dele */
@media (max-width:760px){
  .filme__som{margin-bottom:92px}
}
/* as três barrinhas: paradas enquanto está mudo, dançando quando o som abre */
.filme__eq{display:flex;align-items:flex-end;gap:3px;height:14px}
.filme__eq i{
  width:3px;height:100%;border-radius:2px;background:var(--ouro);
  transform-origin:50% 100%;scale:1 .28;
  animation:eqBarra .9s ease-in-out infinite;animation-play-state:paused;
}
.filme__eq i:nth-child(2){animation-duration:.62s;animation-delay:-.2s}
.filme__eq i:nth-child(3){animation-duration:1.15s;animation-delay:-.45s}
.filme__som[aria-pressed="true"] .filme__eq i{animation-play-state:running}
@keyframes eqBarra{0%,100%{scale:1 .28}50%{scale:1 1}}

/* ATO 3 · GALERIA HORIZONTAL */
.galeria{
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(180deg,#05070F,#0B1122 55%,#05070F);
}
.galeria__cabeca{padding:0 var(--gut) clamp(18px,3vh,38px);flex:0 0 auto}
.galeria__cabeca h2{font-size:clamp(40px,7vw,104px)}
.galeria__pista{
  display:flex;gap:clamp(16px,2.4vw,34px);padding:0 var(--gut);
  will-change:transform;flex:0 0 auto;
}
.sab{
  flex:0 0 clamp(240px,30vw,400px);position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--borda);isolation:isolate;
  cursor:pointer;   /* o card vira no mouse: o ponteiro avisa que tem verso */
  perspective:1300px;   /* profundidade do flip do .sab__miolo */
  background:linear-gradient(170deg,color-mix(in srgb,var(--cor) 46%,transparent),rgba(8,12,24,.9) 62%);
  opacity:0;transform:translateY(54px) rotate(2.5deg) scale(.93);
  transition:border-color .4s,opacity .85s ease,transform .85s cubic-bezier(.16,.8,.24,1);
}
.sab.visivel{opacity:1;transform:none}
.sab::before{
  content:"";position:absolute;inset:auto 0 -30% 0;height:70%;z-index:-1;
  background:radial-gradient(ellipse at 50% 100%,var(--cor2),transparent 68%);
  opacity:.32;filter:blur(28px);
}
/* o hover redeclara a transição para não herdar o ritmo lento da entrada */
@media (hover:hover){
  .sab:hover{
    border-color:color-mix(in srgb,var(--cor2) 60%,transparent);transform:translateY(-8px);
    transition:border-color .4s,opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1);
  }
}
.sab figure{
  height:clamp(300px,44svh,460px);padding:26px 0 10px;overflow:hidden;
}
/* object-fit em vez de height:100%: a linha do grid era automática, então o
   percentual virava auto e a lata saía em tamanho natural, estourando o card */
.sab figure img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.6));
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){.sab:hover figure img{transform:scale(1.07) translateY(-6px)}}
.sab__txt{padding:16px 22px 26px;border-top:1px solid var(--borda);background:rgba(5,7,15,.42)}
.sab__txt h3{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:23px;
  letter-spacing:.01em;text-transform:uppercase;
}
.sab__txt small{display:block;color:var(--prata);font-size:13px;margin-top:5px;line-height:1.5}

/* verso do card: clique/toque vira a carta em 3D e mostra notas + dados.
   O flip vive no miolo pra não brigar com a entrada/hover, que vivem no .sab. */
.sab__miolo{position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.25,.7,.25,1)}
.sab.vira .sab__miolo{transform:rotateY(180deg)}
.sab__face{backface-visibility:hidden}
.sab__verso{
  position:absolute;inset:0;backface-visibility:hidden;transform:rotateY(180deg);
  display:flex;flex-direction:column;justify-content:center;gap:12px;padding:26px 26px 30px;
  background:linear-gradient(200deg,color-mix(in srgb,var(--cor) 52%,#070B16),rgba(7,10,20,.97) 72%);
}
.sab__verso h4{font-size:32px;color:var(--cor2)}
.sab__verso p{color:var(--prata);font-size:14px;line-height:1.65}
.sab__verso ul{list-style:none;margin-top:8px;display:grid;gap:9px}
.sab__verso li{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--borda);padding-top:9px}
.sab__verso li b{
  font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:20px;
  color:var(--cor2);white-space:nowrap;
}
.sab__verso li span{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--prata)}
.sab__mais{
  position:absolute;right:14px;top:14px;z-index:3;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-size:19px;line-height:1;
  background:rgba(5,7,15,.55);border:1px solid var(--borda);color:var(--papel);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),background-color .3s;
}
.sab.vira .sab__mais{transform:rotate(45deg);background:color-mix(in srgb,var(--cor) 70%,transparent)}
.galeria__barra{
  margin:clamp(18px,3vh,36px) var(--gut) 0;height:2px;background:rgba(255,255,255,.14);flex:0 0 auto;
}
.galeria__barra i{
  display:block;height:100%;width:100%;background:var(--ouro);border-radius:2px;
  transform:scaleX(.18);transform-origin:0 50%;will-change:transform;
}

/* ── ATO 4 · GELADA ─────────────────────────────────────── */
.gelada{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,80px);
  padding:clamp(90px,14vh,170px) var(--gut);position:relative;overflow:hidden;
  background:linear-gradient(120deg,#0A1020,#141A2E 48%,#0A1020);
}
.gelada::after{
  content:"";position:absolute;width:70vw;aspect-ratio:1;border-radius:50%;left:-24vw;top:-20%;
  background:radial-gradient(circle,rgba(219,10,64,.22),transparent 66%);filter:blur(60px);pointer-events:none;
}
.gelada__lata{justify-self:center;position:relative;z-index:2;will-change:transform}
.gelada__lata img{
  height:min(76svh,660px);width:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.65));
}
/* condensação: campo de gotículas em camadas de radial-gradient, recortado no
   contorno da própria lata pela máscara; cada camada escorre na altura do seu
   tile, então o loop fecha sem emenda */
.gelada__gotas{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  -webkit-mask:url("cans/melancia.webp") center/contain no-repeat;
  mask:url("cans/melancia.webp") center/contain no-repeat;
  background:
    radial-gradient(3px 4.5px at 30% 40%,rgba(255,255,255,.55) 40%,transparent 62%) 0 0/57px 43px,
    radial-gradient(2px 3px at 60% 20%,rgba(255,255,255,.42) 40%,transparent 62%) 7px 3px/43px 61px,
    radial-gradient(2.6px 3.8px at 20% 70%,rgba(210,235,255,.5) 40%,transparent 62%) 3px 9px/61px 47px,
    radial-gradient(1.6px 2.2px at 80% 60%,rgba(255,255,255,.36) 40%,transparent 62%) 0 0/37px 29px;
  animation:pinga 11s linear infinite;
}
@keyframes pinga{
  to{background-position:0 43px,7px 64px,3px 56px,0 29px}
}
/* troca automática: a lata evapora num blur e condensa de volta com outro
   sabor; anima opacity/filter/scale da figura — o transform dela é do
   parallax (--py) e não pode ser pisado */
.gelada__lata.vira{animation:lataGela 1.05s cubic-bezier(.4,0,.2,1) both}
@keyframes lataGela{
  0%{opacity:1;filter:blur(0);scale:1}
  42%{opacity:0;filter:blur(16px);scale:.96}
  58%{opacity:0;filter:blur(16px);scale:.96}
  100%{opacity:1;filter:blur(0);scale:1}
}
.gelada__txt{max-width:44ch;position:relative;z-index:2}
.gelada__txt h2{font-size:clamp(44px,6.4vw,104px);margin-bottom:22px}
.gelada__txt p{color:var(--prata);line-height:1.75}
.marcadores{list-style:none;display:flex;gap:34px;margin-top:34px;flex-wrap:wrap}
.marcadores b{
  display:block;font-family:"Barlow Condensed",sans-serif;font-weight:900;
  font-size:44px;color:var(--ouro);line-height:1;
}
.marcadores li>span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--prata)}

/* ── ATO 5 · NÚMEROS ────────────────────────────────────── */
.numeros{padding:clamp(90px,14vh,160px) 0;background:var(--breu)}
.grande{font-size:clamp(52px,10vw,148px);margin:10px 0 clamp(40px,6vh,72px)}
.cartas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.carta{
  border:1px solid var(--borda);border-radius:20px;padding:34px 30px 40px;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  will-change:transform;transition:border-color .4s,background .4s;
}
@media (hover:hover){.carta:hover{border-color:rgba(78,134,255,.5);background:linear-gradient(165deg,rgba(78,134,255,.12),rgba(255,255,255,.02))}}
/* nowrap: as colunas do odômetro criam pontos de quebra que o texto corrido
   não tinha, e o "1.000mg" partia em duas linhas */
.carta__k{
  display:block;font-family:"Barlow Condensed",sans-serif;font-weight:900;
  font-size:clamp(56px,6.4vw,92px);line-height:1;color:var(--azul-claro);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.carta__k em{font-style:normal}
.carta h3{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:20px;margin:14px 0 10px;
}
.carta p{color:var(--prata);font-size:14px;line-height:1.7}

/* ── MOMENTOS · rituais ─────────────────────────────────── */
.momentos{padding:clamp(90px,14vh,160px) 0;background:var(--breu2)}
.momentos__grade{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.momento{
  position:relative;overflow:hidden;border:1px solid var(--borda);border-radius:20px;
  padding:28px 24px 168px;
  background:linear-gradient(170deg,color-mix(in srgb,var(--cor) 32%,transparent),rgba(8,12,24,.92) 66%);
  transition:border-color .4s,transform .5s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){.momento:hover{border-color:color-mix(in srgb,var(--cor2) 55%,transparent);transform:translateY(-8px)}}
.momento time{
  display:block;font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.3em;color:var(--cor2);
}
.momento h3{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:24px;
  text-transform:uppercase;letter-spacing:.01em;margin:10px 0 12px;line-height:1.05;
}
.momento p{color:var(--prata);font-size:14px;line-height:1.65}
/* a lata espia pelo canto de baixo, meio cortada de propósito */
.momento img{
  position:absolute;right:-20px;bottom:-38px;height:190px;width:auto;
  transform:rotate(9deg);filter:drop-shadow(0 20px 26px rgba(0,0,0,.55));
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){.momento:hover img{transform:rotate(3deg) translateY(-10px)}}
.momento b{
  position:absolute;left:24px;bottom:22px;
  font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cor2);
}

/* ── TIMELINE · 1987 → hoje ─────────────────────────────── */
.tempo{padding:clamp(90px,14vh,160px) 0;background:var(--breu);overflow:hidden}
.tempo__fluxo{position:relative;padding:6px 0 20px}
.tempo__linha{
  position:absolute;left:50%;top:0;bottom:0;width:2px;translate:-50% 0;
  background:rgba(255,255,255,.09);
}
/* o preenchimento é escrito pelo laço (scaleY conforme o scroll desce) */
.tempo__linha i{
  display:block;height:100%;width:100%;
  background:linear-gradient(180deg,var(--azul-claro),var(--ouro) 55%,var(--vermelho));
  transform:scaleY(0);transform-origin:50% 0;will-change:transform;
  box-shadow:0 0 12px rgba(255,198,30,.35);
}
.marco{
  width:calc(50% - 44px);position:relative;margin-bottom:clamp(26px,4vh,44px);
  border:1px solid var(--borda);border-radius:18px;padding:22px 26px;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
}
.marco--dir{margin-left:auto}
.marco::before{
  content:"";position:absolute;top:28px;right:-49px;width:10px;height:10px;border-radius:50%;
  background:var(--ouro);box-shadow:0 0 0 5px rgba(255,198,30,.14);
}
.marco--dir::before{right:auto;left:-49px}
.marco b{
  font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:15px;
  letter-spacing:.22em;color:var(--ouro);
}
.marco h3{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:23px;
  text-transform:uppercase;letter-spacing:.01em;margin:6px 0 10px;
}
.marco p{color:var(--prata);font-size:14px;line-height:1.7;max-width:44ch}

/* ── QUIZ · qual é a sua lata ───────────────────────────── */
.quiz{padding:clamp(90px,14vh,160px) 0;background:var(--breu2)}
.quiz__caixa{
  max-width:780px;margin:0 auto;border:1px solid var(--borda);border-radius:26px;
  padding:clamp(28px,5vw,52px);position:relative;overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(8,12,24,.6));
}
.quiz__dots{display:flex;gap:8px;margin-bottom:28px}
.quiz__dots i{width:28px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .4s}
.quiz__dots i.on{background:var(--ouro)}
.quiz__perg{display:none}
.quiz__perg.ativa{display:block;animation:pergEntra .55s cubic-bezier(.16,.84,.28,1)}
@keyframes pergEntra{from{opacity:0;transform:translateX(44px)}}
.quiz__perg h3{
  font-family:"Barlow Condensed",sans-serif;font-weight:800;
  font-size:clamp(26px,4vw,40px);text-transform:uppercase;letter-spacing:.01em;
  margin-bottom:22px;
}
.quiz__ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.quiz__ops button{
  padding:18px 16px;border-radius:14px;border:1px solid var(--borda);
  background:rgba(255,255,255,.04);color:var(--papel);
  font:600 14px/1.4 Barlow,sans-serif;letter-spacing:.04em;cursor:pointer;
  transition:border-color .3s,background-color .3s,transform .3s;
}
@media (hover:hover){.quiz__ops button:hover{border-color:var(--ouro);background:rgba(255,198,30,.08);transform:translateY(-3px)}}
.quiz__ops button.marcada{border-color:var(--ouro);background:rgba(255,198,30,.16)}
.quiz__res{display:none;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,44px);align-items:center;outline:none}
.quiz__res.mostra{display:grid;animation:pergEntra .6s cubic-bezier(.16,.84,.28,1)}
/* confete do resultado: cada peça cai com deriva e giro próprios (vars postas
   inline pelo JS) e é removida no fim da animação. A caixa contém tudo. */
.quiz__conf{
  position:absolute;top:16%;z-index:3;pointer-events:none;
  width:9px;height:14px;border-radius:2px;background:var(--cor,#fff);
  opacity:0;animation:confCai 1.15s cubic-bezier(.3,.4,.6,1) forwards;
}
@keyframes confCai{
  0%{opacity:0;translate:0 0;rotate:0deg}
  12%{opacity:1}
  82%{opacity:1}
  100%{opacity:0;translate:var(--dx,0px) var(--dy,220px);rotate:var(--rot,260deg)}
}
.quiz__res img{
  height:min(300px,36svh);width:auto;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.6)) drop-shadow(0 0 44px color-mix(in srgb,var(--cor,var(--azul-claro)) 40%,transparent));
}
.quiz__res h3{font-size:clamp(36px,5.6vw,60px);color:var(--cor,var(--papel));margin-bottom:10px}
.quiz__res>div>p{color:var(--prata);font-size:15px;line-height:1.7}
.quiz__acoes{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.quiz__res .hero__cta{margin-top:0;border-color:color-mix(in srgb,var(--cor,var(--azul-claro)) 62%,transparent);background:color-mix(in srgb,var(--cor,var(--azul-claro)) 15%,transparent)}
.quiz__refaz{
  border:0;background:none;color:var(--prata);cursor:pointer;
  font:600 12px/1 Barlow,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  padding:8px 0;border-bottom:1px solid var(--borda);transition:color .3s,border-color .3s;
}
@media (hover:hover){.quiz__refaz:hover{color:var(--ouro);border-color:var(--ouro)}}

/* ── ATO 6 · DÚVIDAS ────────────────────────────────────── */
.duvidas{padding:clamp(80px,12vh,140px) 0 clamp(90px,14vh,160px);background:var(--breu2);position:relative;overflow:hidden}
.duvidas__grade{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start}
.duvidas__lado h2{font-size:clamp(46px,6vw,96px)}
.duvidas__lata{margin-top:34px;will-change:transform}
.duvidas__lata img{height:min(52svh,470px);width:auto;filter:drop-shadow(0 34px 50px rgba(0,0,0,.6))}
.duvidas__lista{padding-top:10px}
details{border-top:1px solid var(--borda);padding:22px 0}
details:last-child{border-bottom:1px solid var(--borda)}
summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:21px;
  text-transform:uppercase;letter-spacing:.02em;transition:color .3s;
}
summary::-webkit-details-marker{display:none}
@media (hover:hover){summary:hover{color:var(--ouro)}}
/* o "+" gira e vira "×" em vez de trocar de caractere: mesma informação,
   movimento contínuo em lugar de um pulo seco */
summary::after{
  content:"+";color:var(--ouro);font-size:24px;line-height:1;flex:0 0 auto;
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
details[open] summary::after{transform:rotate(135deg)}
/* resposta deslizando: onde o navegador interpola height:auto (Chrome 131+)
   ela abre suave; nos demais segue o abre-fecha instantâneo de sempre */
details{interpolate-size:allow-keywords}
details::details-content{
  block-size:0;overflow-y:clip;
  transition:block-size .34s cubic-bezier(.2,.7,.2,1),content-visibility .34s allow-discrete;
}
details[open]::details-content{block-size:auto}
details p{margin-top:14px;color:var(--prata);max-width:62ch;line-height:1.75}

/* ── RODAPÉ ─────────────────────────────────────────────── */
.rodape{padding:clamp(70px,10vh,120px) var(--gut) 60px;text-align:center;overflow:hidden}
.rodape__gigante{
  font-size:clamp(56px,15vw,220px);color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.22);margin-bottom:26px;
}
.rodape p{color:#6B7688;font-size:12px;max-width:56ch;margin:0 auto;line-height:1.7}

/* ── RESPONSIVO ─────────────────────────────────────────── */
@media (max-width:980px){
  .cartas{grid-template-columns:1fr}
  .gelada{grid-template-columns:1fr;text-align:center}
  .gelada__txt{margin:0 auto}
  .marcadores{justify-content:center}
  .duvidas__grade{grid-template-columns:1fr}
  .duvidas__lata{display:none}
  .momentos__grade{grid-template-columns:1fr 1fr}
  /* a linha do tempo encosta na esquerda e os marcos ficam numa coluna só */
  .tempo__linha{left:5px;translate:0 0}
  .marco,.marco--dir{width:auto;margin-left:34px}
  .marco::before,.marco--dir::before{right:auto;left:-34px}
}
/* ── DESFILE · carrossel automático ─────────────────────── */
.desfile{padding:90px 0 110px;overflow:hidden;text-align:center}
/* etiqueta do sabor sorteado: fixed porque a âncora é a lata NA TELA (o marquee
   está pausado sob o mouse); vida curta, some sozinha */
.desfile__tag{
  position:fixed;z-index:30;pointer-events:none;font-style:normal;
  translate:-50% -130%;white-space:nowrap;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--papel);
  padding:7px 15px;border-radius:999px;
  background:rgba(5,7,15,.82);border:1px solid var(--borda);
  opacity:0;
}
.desfile__tag.solta{animation:tagSobe 1.1s cubic-bezier(.2,.7,.25,1)}
@keyframes tagSobe{
  0%{opacity:0;translate:-50% -104%;scale:.85}
  18%{opacity:1;scale:1}
  72%{opacity:1;translate:-50% -136%}
  100%{opacity:0;translate:-50% -148%;scale:.97}
}
.desfile__olho{display:inline-block;margin-bottom:54px}
.desfile__janela{
  /* esmaece as pontas pra lata nunca "nascer" nem "morrer" seca na borda */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.desfile__pista{
  display:flex;align-items:center;gap:clamp(44px,7vw,110px);
  width:max-content;padding:20px 0;
  /* ~7,6s por lata: a duração acompanha o tamanho da família (23 sabores) */
  animation:desfila 176s linear infinite;
  will-change:transform;
}
@media (hover:hover){.desfile__janela:hover .desfile__pista{animation-play-state:paused}}
.desfile__pista img{
  height:clamp(190px,30svh,300px);width:auto;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.6));
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.desfile__pista img:nth-child(even){translate:0 16px;rotate:2.5deg}
.desfile__pista img:nth-child(odd){translate:0 -6px;rotate:-2deg}
/* profundidade: a cada três latas uma fica "atrás" (menor, desfocada) e outra
   "na frente" (maior), pra fila não ser uma régua plana */
.desfile__pista img:nth-child(3n){
  height:clamp(165px,26svh,258px);opacity:.8;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.6)) blur(1.4px);
}
.desfile__pista img:nth-child(3n+2){height:clamp(212px,33svh,332px)}
@media (hover:hover){.desfile__pista img:hover{transform:scale(1.12)}}
/* troca no hover: encolhe até sumir, o JS muda a arte no meio e ela volta
   estourando; anima a propriedade scale — o transform é do zoom de hover e
   o rotate/translate são da pose de cada lata, nada disso pode ser pisado */
.desfile__pista img.troca{animation:lataTroca .46s both}
@keyframes lataTroca{
  0%{scale:1;animation-timing-function:cubic-bezier(.55,0,.85,.45)}
  40%{scale:0}
  58%{scale:0;animation-timing-function:cubic-bezier(.2,.75,.3,1.4)}
  100%{scale:1}
}
/* a pista tem o conteúdo em dobro: -50% recomeça exatamente na segunda cópia */
@keyframes desfila{to{transform:translateX(-50%)}}

@media (max-width:760px){
  nav{padding:12px var(--gut)}
  nav .mark{font-size:16px;gap:7px}
  nav .mark i{width:9px;height:9px}
  nav .links{gap:13px}
  nav .links a{font-size:10px;letter-spacing:.1em}

  /* no celular não há lateral que caiba a ficha sem cair na lata;
     o nome do sabor continua na linha do subtítulo. O CTA da hero também sai:
     o fixo de rodapé cumpre o papel sem disputar espaço com a lata
     (só o da hero -- o do resultado do quiz continua) */
  .hero__ficha,.hero__sub .hero__cta{display:none}
  /* sem o CTA a legenda tem só duas linhas: descer os -64px do desktop faria
     a linha do fato sentar em cima do "role" no canto */
  .hero__sub{margin-bottom:-40px}
  .momentos__grade{grid-template-columns:1fr}
  .momento{padding-bottom:150px}
  .quiz__res{grid-template-columns:1fr;justify-items:center;text-align:center}
  .quiz__res img{height:min(240px,30svh)}
  .quiz__acoes{justify-content:center}
  .ato{--altura:340vh !important}
  /* o filme não tem mais scrub nem texto: só o vídeo rodando */
  .ato--filme{--altura:200vh !important}
  /* hero e fórmula têm parada por item: achatar pra 340vh apressava a troca
     (lata trocando rápido demais, ingrediente sem cravar no centro).
     A hero é mais alta ainda: com o segmento curto uma rolada de embalo
     atravessava duas latas -- maior, um gesto vale ~uma troca */
  #topo{--altura:520vh !important}
  #formula{--altura:520vh !important}
  .passo h2{font-size:clamp(40px,11vw,64px)}
  .passo p{font-size:14px;max-width:30ch}
  .passo__fantasma{font-size:min(44svh,60vw)}
  .trilho{display:none}
  .hero__trilha{right:12px;gap:8px}
  .hero__trilha i{height:20px}
  .hero__type{font-size:clamp(64px,20vw,120px)}
  .hero__can img{height:56svh}
  [data-vem="esquerda"]{transform:translate3d(-28vw,0,0) rotate(-6deg)}
  [data-vem="direita"]{transform:translate3d(28vw,0,0) rotate(4deg)}
}

/* em 360px o conjunto logo + cinco links passa dos 320px úteis e o
   space-between some: a marca encostava no "Fórmula" */
@media (max-width:380px){
  nav .mark{font-size:14px;gap:6px}
  nav .links{gap:9px}
  nav .links a{font-size:9px;letter-spacing:.06em}
}

/* ── MOVIMENTO REDUZIDO ─────────────────────────────────── */
/* chuva de latinhas: camada fixa que não pega clique; cada lata cai do alto
   com giro e ritmo próprios e se remove no fim */
.chuva{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.chuva img{
  position:absolute;top:0;left:var(--x,50vw);height:110px;width:auto;
  translate:0 -130px;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));
  animation:chuvaCai var(--dur,2s) cubic-bezier(.4,.05,.7,.5) forwards;
}
@keyframes chuvaCai{
  to{translate:-6vw 116vh;rotate:var(--rot,260deg)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  [data-vem]{opacity:1;transform:none;filter:none}
  .fatia > i{transform:none}
  .ato{height:auto !important}
  .ato__palco{position:static;height:auto;padding-block:80px}
  /* o tambor vira lista corrida: todo passo visível, sem transform do laço */
  .roda{position:static;height:auto;display:grid;gap:80px;padding:40px 0}
  .passo{position:static;opacity:1 !important;visibility:visible !important;transform:none !important}
  .passo__fantasma{display:none}
  .hero__trilha{display:none}
  /* sem autoplay: o vídeo ganha controles (JS) e o véu sai da frente deles */
  .filme__video{height:70svh}
  .filme__veu{display:none}
  .galeria__pista{flex-wrap:wrap;justify-content:center;transform:none !important}
  .sab{opacity:1;transform:none}
  .desfile__pista{flex-wrap:wrap;justify-content:center;width:auto}
  .desfile__pista img[aria-hidden]{display:none}
  .grain{animation:none}
  /* sem laço rodando, a linha do tempo já nasce cheia */
  .tempo__linha i{transform:scaleY(1)}
}