:root{
  --preto:#09090A; --carvao:#141417; --carvao2:#1c1c20; --fio:rgba(255,255,255,.10);
  --amarelo:#F2E14C; --ouro:#C9A43A; --branco:#F4F3EE; --cinza:#9a9aa0; --azul:#2134A0;
  --titulo:'Anton',Impact,'Arial Narrow',sans-serif; --corpo:'Manrope',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --vh:100svh;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--preto);color:var(--branco);scroll-snap-type:y proximity;-webkit-text-size-adjust:100%}
body{font-family:var(--corpo);font-size:16px;line-height:1.55;background:var(--preto);overflow-x:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
.pular{position:absolute;left:-999px;top:8px;z-index:99;background:var(--amarelo);color:#000;padding:8px 14px;border-radius:8px}
.pular:focus{left:12px}
:focus-visible{outline:2px solid var(--amarelo);outline-offset:3px}

/* topo */
.topo{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:14px;padding:10px clamp(14px,3vw,28px);
  background:linear-gradient(rgba(9,9,10,.72),rgba(9,9,10,.45));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--fio)}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;opacity:0;transition:opacity .25s}
.marca.vis{opacity:1}
.marca-wp{height:34px;width:auto;aspect-ratio:980/260;filter:drop-shadow(0 0 10px rgba(241,196,10,.25))}
.marca-nome{font-family:'Parisienne',cursive;font-size:40px;line-height:1;color:#fff;white-space:nowrap;transform:translateY(2px)}

.topo-secao{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--cinza);letter-spacing:.08em;text-transform:uppercase}
.topo-linha{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--amarelo);transform-origin:left;transform:scaleX(0)}
@keyframes brilho{0%,80%,100%{filter:brightness(1)}88%{filter:brightness(1.6) drop-shadow(0 0 8px rgba(242,225,76,.6))}}

.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--amarelo);color:#111;
  font-weight:700;text-decoration:none;letter-spacing:.01em;transition:transform .2s,filter .2s;white-space:nowrap}
.botao:hover{filter:brightness(1.08);transform:translateY(-1px)}
.botao-pq{min-height:40px;padding:0 16px;font-size:14px}
.botao-linha{background:transparent;color:var(--branco);border:1px solid rgba(255,255,255,.3)}
.acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* filme */
.filme{position:relative}
.passo{height:var(--vh);scroll-snap-align:start}
.palco{position:sticky;top:0;height:var(--vh);margin-bottom:calc(-1 * var(--vh));overflow:hidden;z-index:1;background:#000}
.filme::before{content:"";display:block;height:0}
#tela{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.vinheta{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(9,9,10,.86) 0,rgba(9,9,10,.45) 30%,rgba(9,9,10,0) 48%),
  linear-gradient(rgba(9,9,10,.55),rgba(9,9,10,0) 18%)}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.painel{position:absolute;left:clamp(18px,5vw,72px);top:50%;transform:translateY(-46%);width:min(440px,40vw);opacity:0;visibility:hidden;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s .5s;z-index:5}
.painel.ativo{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .6s ease .15s,transform .7s cubic-bezier(.2,.7,.2,1) .1s,visibility 0s}
.logo-grande{width:132px;height:132px;border-radius:50%;margin-bottom:18px;box-shadow:0 0 0 1px var(--fio),0 18px 60px rgba(0,0,0,.6);animation:brilho 5s ease-in-out infinite}
.rotulo{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
h1,h2{font-family:var(--titulo);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.01em}
h1{font-size:clamp(58px,8vw,118px);margin:10px 0 14px}
h2{font-size:clamp(38px,4.6vw,68px);margin:8px 0 12px}
h1 em,h2 em{font-style:normal;color:var(--amarelo)}
.texto{color:#d7d6d0;max-width:52ch}
.nota{margin-top:12px;font-size:15px;color:#d7d6d0}.estrelas{color:var(--ouro);letter-spacing:2px}
.etapa{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--amarelo)}
.etapa i{display:block;width:34px;height:3px;background:var(--amarelo);transform:skewX(-35deg) scaleX(0);transform-origin:left;transition:transform .45s ease .3s}
.ativo .etapa i,.secao .etapa i{transform:skewX(-35deg) scaleX(1)}
.controle{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.controle-rotulo{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);margin-right:4px}
.chip{min-height:40px;padding:0 15px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(20,20,23,.6);font-size:15px;font-weight:600;transition:background .2s,color .2s,border-color .2s}
.chip[aria-pressed=true]{background:var(--amarelo);color:#111;border-color:var(--amarelo)}
.chip[aria-pressed=true]::before{content:"✓ "}
.chave{display:inline-flex;align-items:center;gap:10px;min-height:40px;font-size:15px;font-weight:600;color:#e8e7e1}
.chave span{width:42px;height:24px;border-radius:12px;background:#3a3a40;position:relative;transition:background .2s}
.chave span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.chave[aria-checked=true] span{background:var(--amarelo)}.chave[aria-checked=true] span::after{transform:translateX(18px);background:#111}
.cor{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 14px var(--c);position:relative}
.cor[aria-pressed=true]{box-shadow:0 0 0 3px var(--preto),0 0 0 5px var(--amarelo),0 0 18px var(--c)}
.cor-livre{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);overflow:hidden;cursor:pointer}
.cor-livre input{opacity:0;width:100%;height:100%;cursor:pointer}
.legenda{margin-top:12px;font-size:14px;color:var(--cinza)}
.fonte{margin-top:10px;font-size:12px;line-height:1.45;color:#85858b;max-width:56ch}
.cronometro{font-family:var(--mono);font-size:14px;color:var(--amarelo);margin-left:6px}
.recebeu{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.recebeu li{padding:7px 13px;border-radius:999px;border:1px solid var(--fio);font-size:14px;color:var(--cinza)}
.recebeu li.ok{border-color:var(--amarelo);color:var(--branco)}.recebeu li.ok::before{content:"✓ ";color:var(--amarelo)}
.dica{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--cinza);z-index:6;transition:opacity .4s}
.dica::after{content:"";display:block;width:1px;height:28px;margin:6px auto 0;background:linear-gradient(var(--amarelo),transparent);animation:desce 1.6s infinite}
@keyframes desce{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.aviso-ia{position:absolute;right:14px;bottom:10px;font-size:11px;color:rgba(255,255,255,.38);z-index:6}
.chave-fenda{position:absolute;left:0;top:0;z-index:7;opacity:0;pointer-events:none;touch-action:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));transition:opacity .3s}
.chave-fenda.vis{opacity:1;pointer-events:auto;cursor:grab}
.carimbo{position:absolute;z-index:8;left:0;top:0;padding:8px 16px;border:3px solid #ff3b30;color:#ff3b30;font-family:var(--titulo);font-size:34px;letter-spacing:.06em;transform:rotate(-8deg) scale(1.6);opacity:0;pointer-events:none;background:rgba(0,0,0,.35)}
.carimbo.vis{opacity:1;transform:rotate(-8deg) scale(1);transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .15s}
.regua{position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:7;opacity:0;pointer-events:none;touch-action:none}
.regua i{position:absolute;inset:0;background:var(--amarelo);box-shadow:0 0 12px rgba(242,225,76,.8)}
.regua span{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--amarelo);color:#111;display:grid;place-items:center;font-weight:700;cursor:ew-resize}
.regua.vis{opacity:1;pointer-events:auto}

/* seções depois do filme */
.secao{position:relative;z-index:2;background:var(--preto);padding:clamp(70px,10vw,130px) clamp(18px,5vw,72px)}
.cabeca{max-width:820px;margin-bottom:30px}
.filtros{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:18px;scrollbar-width:none}
.filtros .chip{flex:none}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.galeria figure{position:relative;border-radius:14px;overflow:hidden;background:var(--carvao);aspect-ratio:4/3}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.galeria figure:hover img{transform:scale(1.04)}
.galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font-size:13px;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.galeria figure[hidden]{display:none}
.secao-marcas{padding-top:40px;padding-bottom:60px}
.marcas{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.marcas li{height:92px;border-radius:14px;background:var(--carvao);border:1px solid var(--fio);display:grid;place-items:center;padding:14px;overflow:hidden}
.marcas img{max-height:56px;max-width:100%;object-fit:contain;filter:grayscale(1) brightness(1.15);opacity:.9}
.nota-grande{color:var(--ouro)}
.avaliacoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.avaliacoes blockquote{background:var(--carvao);border:1px solid var(--fio);border-radius:16px;padding:22px}
.avaliacoes blockquote::before{content:"★★★★★";display:block;color:var(--ouro);letter-spacing:2px;margin-bottom:10px;font-size:14px}
.avaliacoes p{color:#e2e1db}
.avaliacoes footer{margin-top:12px;font-size:13px;color:var(--cinza)}
.onde{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.onde figure{border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--carvao)}
.onde figure img{width:100%;height:100%;object-fit:cover}
.rodape{position:relative;z-index:2;background:#050506;border-top:1px solid var(--fio);padding:40px 18px 96px;text-align:center;color:var(--cinza);font-size:14px;display:grid;justify-items:center;gap:8px}
.rodape img{border-radius:50%}
.rodape .pequeno{font-size:12px;max-width:60ch}
.zap-flutua{position:fixed;right:16px;bottom:16px;z-index:45;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* celular e tablet em pé: painel embaixo */
@media (max-aspect-ratio:1/1){
  .vinheta{background:linear-gradient(rgba(9,9,10,0) 44%,rgba(9,9,10,.78) 62%,rgba(9,9,10,.95) 100%),linear-gradient(rgba(9,9,10,.6),rgba(9,9,10,0) 14%)}
  .painel{left:16px;right:16px;width:auto;top:auto;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateY(16px);max-height:52%;overflow:auto;scrollbar-width:none}
  .painel.ativo{transform:none}
  .painel[data-passo="0"]{max-height:64%}
  .logo-grande{display:none}
  h1{font-size:clamp(46px,13vw,72px);margin:6px 0 8px}
  h2{font-size:clamp(30px,9vw,46px);margin:6px 0 8px}
  .texto{font-size:15px}
  .fonte{font-size:11px}
  .controle{margin-top:10px;gap:6px}
  .chip{min-height:38px;padding:0 12px;font-size:14px}
  .topo-secao{display:none}
  .topo .botao{margin-left:auto}
  .dica{display:none}
  .aviso-ia{top:64px;bottom:auto;right:12px}
  .onde{grid-template-columns:1fr}
  .zap-flutua{bottom:calc(14px + env(safe-area-inset-bottom));width:50px;height:50px}
  .painel .acoes .botao{min-height:44px}
}
@media (max-width:380px){ .marca small{display:none} .painel{max-height:56%} .texto{font-size:14px} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.01s!important} html{scroll-snap-type:none} }

/* ---------- marca destrinchada (abertura) ---------- */
.mg{position:absolute;left:50%;top:40%;z-index:6;display:flex;flex-direction:column;align-items:center;text-align:center;transform:translate(-50%,-50%);pointer-events:none;width:min(92vw,760px)}
.mg>*{transform-origin:0 0}
.mg::before{content:"";position:absolute;left:50%;top:50%;width:min(130vh,120vw,1100px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(5,5,6,.78),rgba(5,5,6,.55) 55%,rgba(5,5,6,0));opacity:var(--sumir,0);pointer-events:none}
.mg-aneis{position:absolute;left:50%;top:50%;width:min(94vh,94vw,800px);height:auto;transform:translate(-50%,-50%);overflow:visible}
.an{fill:none;stroke-dasharray:1;stroke-dashoffset:1}.an1{stroke:#F2E14C;stroke-width:1.3}.an2{stroke:rgba(255,255,255,.85);stroke-width:.7}.an3{stroke:#2134A0;stroke-width:1.2}
.mg-wp{width:clamp(190px,27vw,400px);height:auto;overflow:visible;filter:drop-shadow(0 0 18px rgba(241,196,10,.22))}
.mg-w,.mg-p{stroke-dasharray:1;stroke-dashoffset:1}
.mg-tag{margin-top:12px;font-family:'Michroma',sans-serif;font-size:clamp(9px,1.05vw,15px);letter-spacing:.42em;color:#d9d9dc;white-space:nowrap;padding-left:.42em}
.mg-tag b,.rodape-tag b{color:#F1C40A;font-weight:400;margin:0 .5em}
.mg-tag i{font-style:normal;display:inline-block;opacity:0}
.mg-nome{font-family:'Parisienne',cursive;font-size:clamp(58px,8.2vw,128px);line-height:1.05;color:#fff;margin-top:6px;white-space:nowrap;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.mg-nome span{display:inline-block;padding:0 .12em}
.mg-sub{font-family:'Montserrat',sans-serif;font-weight:400;font-size:clamp(11px,1.25vw,18px);letter-spacing:.38em;color:#e4e4e7;white-space:nowrap;margin-top:4px;padding-left:.38em}
.mg-sub span{color:#F2E14C}
.mg-selo{width:clamp(64px,7vw,110px);height:auto;margin-top:14px;border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.6);opacity:0}
.mg.fora{visibility:hidden}
/* rodapé */
.rodape-marca{display:grid;justify-items:center;gap:6px;margin-bottom:10px}
.rodape-wp{width:180px;height:auto}
.rodape-tag{font-family:'Michroma',sans-serif;font-size:10px;letter-spacing:.38em;color:#cfcfd3}
.rodape-nome{font-family:'Parisienne',cursive;font-size:52px;line-height:1.05;color:#fff}
.rodape-sub{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.34em;color:#cfcfd3}
.rodape-marca img{border-radius:50%;margin-top:8px}
@media (max-aspect-ratio:1/1){ .mg{top:34%} .marca-wp{height:24px} .marca-nome{font-size:28px} }
@media (max-width:400px){ .marca{gap:8px} .marca-wp{height:20px} .marca-nome{font-size:24px} .topo .botao{padding:0 12px} }