/* ═══════════════════════════════════════════════════════════
   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;    --carvao:#111827;
  --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}

.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);
}

/* ── CURSOR ─────────────────────────────────────────────────
   Ponto cravado no mouse + anel que persegue com atraso (lerp no laço).
   Os elementos só existem em pointer:fine; no touch nada disso é criado. */
html.tem-mira,html.tem-mira a,html.tem-mira summary,html.tem-mira button{cursor:none}
.mira,.mira-anel{
  position:fixed;left:0;top:0;z-index:80;pointer-events:none;border-radius:50%;
  will-change:transform;
}
.mira{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--ouro)}
.mira-anel{
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border:1.5px solid rgba(255,255,255,.45);
  transition:width .3s,height .3s,margin .3s,border-color .3s,background-color .3s;
}
.mira-anel.ativa{
  width:60px;height:60px;margin:-30px 0 0 -30px;
  border-color:var(--ouro);background:rgba(255,198,30,.07);
}

/* 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);
}
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;
  background:
    radial-gradient(70% 55% at 50% 62%,rgba(27,63,174,.44),transparent 72%),
    linear-gradient(180deg,#070B18 0%,#05070F 62%,#080D1C 100%);
}
/* registrada como <color> a variável interpola de verdade; transition:background
   num gradiente não anima nada, só salta */
@property --tom{syntax:'<color>';inherits:true;initial-value:rgb(78,134,255)}
.hero{transition:--tom 1.2s}
.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));
}
.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;
  animation:flutua 6.5s ease-in-out infinite;
}
.hero__type{
  transform:scale(calc(1 + var(--hp,0) * .12));
  opacity:calc(1 - var(--hp,0) * .45);
}
.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;
}
.hero__can img.atual{opacity:1}   /* estado sem JS / movimento reduzido */
@keyframes flutua{
  0%,100%{transform:rotate(var(--rol,0deg)) translateY(0)}
  50%{transform:rotate(var(--rol,0deg)) translateY(-16px)}
}
/* 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)}
.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);
}

.hero__sub{
  grid-area:1/1;align-self:end;text-align:center;z-index:3;
  color:var(--prata);font-size:14px;letter-spacing:.06em;line-height:1.8;
}
.hero__sub b{color:var(--papel);font-weight:600}
.hero__cue{
  position:absolute;bottom:22px;left:50%;translate:-50% 0;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: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 i{font-style:normal;color:var(--ouro);transition:transform .35s}
.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 */
.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;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.15) 38%,rgba(0,0,0,.28) 62%,rgba(0,0,0,.86));
}
.filme__texto{
  grid-area:1/1;z-index:2;text-align:center;padding:0 var(--gut);max-width:900px;
  text-shadow:0 4px 26px rgba(0,0,0,.85);
}
.filme__texto h2{
  font-size:clamp(48px,9.5vw,150px);margin-bottom:20px;
  /* .84 do .display faz o acento do "É"/"Â" bater na linha de cima */
  line-height:.96;
  text-shadow:none;filter:drop-shadow(0 8px 34px rgba(0,0,0,.85));
}
.filme__texto p{color:var(--prata);max-width:38ch;margin:0 auto;font-size:15px}
.filme__texto .olho{margin-bottom:36px}   /* o título é enorme e encostava no olho */
.filme__quadro{
  position:absolute;left:var(--gut);right:var(--gut);bottom:34px;height:2px;
  background:rgba(255,255,255,.16);z-index:3;
}
.filme__quadro i{
  display:block;height:100%;width:100%;background:var(--ouro);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
}

/* 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;
  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 */
.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);
}
.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{perspective:1300px}
.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}
}
.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;
}
.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);
}
.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);
}
.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;
}
.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}
.quiz__res.mostra{display:grid;animation:pergEntra .6s cubic-bezier(.16,.84,.28,1)}
.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;
}
.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}
summary:hover{color:var(--ouro)}
summary::after{content:"+";color:var(--ouro);font-size:24px;line-height:1;flex:0 0 auto}
details[open] summary::after{content:"–"}
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}
.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;
  animation:desfila 84s linear infinite;
  will-change:transform;
}
.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)}
.desfile__pista img:hover{transform:scale(1.12)}
/* 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}
  .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}
  .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)}
}

/* ── MOVIMENTO REDUZIDO ─────────────────────────────────── */
@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}
  .filme__video,.filme__veu{height:70svh}
  .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)}
}