/* Agency.AI · V5 "Tela filmada" (desenho: layout.pen, frames ZexUC desktop e v9POL6 mobile)
   Mobile-first; o layout de desktop entra em 1024px. A textura de vídeo filmado (.film) vai só em imagens, prints e mockups. */
@font-face{font-family:"Monument Extended";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/MonumentExtended-Regular.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/Inter-var-latin.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("../fonts/JetBrainsMono-var-latin.woff2") format("woff2")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/Raleway-var-latin.woff2") format("woff2")}
:root{
  --bg:#000;--widget:#090909;--card:#0D0D0D;--head:#fff;--text:#909090;--dim:#5A5A5A;--lime:#C2FE0B;--red:#FF4D4D;
  --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.13);--line-3:rgba(255,255,255,.08);
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--display:"Monument Extended",system-ui,sans-serif;
  --g:24px;--pad:24px;--guide:12px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--lime) #111}
body{margin:0;background:var(--bg);color:var(--text);font:500 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1023px){.only-d{display:none!important}}
@media (min-width:1024px){.only-m{display:none!important}}

/* moldura: as duas guias verticais que correm a página inteira */
.page{position:relative;overflow:clip}
.page::before,.page::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);z-index:5;pointer-events:none}
.page::before{left:var(--guide)}
.page::after{right:var(--guide)}
.in{width:min(1200px,100% - var(--pad)*2);margin-inline:auto;position:relative}
section{position:relative}

/* divisória hachurada entre as seções */
.hatch{height:48px;border-block:1px solid var(--line);position:relative}
.hatch::before{content:"";position:absolute;top:0;bottom:0;left:var(--guide);right:var(--guide);/* sem borda lateral: as guias da página já fazem a linha */
  background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(255,255,255,.05) 9px 10px)}

/* tipografia */
.h2{color:var(--head);font:500 30px/1.02 var(--body);letter-spacing:-1.1px}
.lead{font:500 15px/1.5 var(--body);letter-spacing:-.2px;color:var(--text)}
/* eyebrow padrão (mesmo da pill "Desafio prático" da hero): pílula escura, bolinha verde pulsando num círculo, texto branco */
.eyebrow,.pill{display:inline-flex;align-items:center;gap:10px;height:36px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);
  font:500 13.5px/1 var(--body);letter-spacing:-.1px;color:#fff;white-space:nowrap;width:fit-content} /* fit-content: em pai flex em coluna a pílula não estica */
.eyebrow::before,.pill::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;box-sizing:border-box;border:1px solid rgba(194,254,11,.25);
  background:radial-gradient(circle,var(--lime) 0 4px,transparent 4.5px),rgba(194,254,11,.1);animation:pulse 2s ease-in-out infinite}

/* botões */
/* botão de compra: o mesmo Atomik do index-teste.html (CSS e JS copiados de lá) */
.atomik-wrapper-btn{--tom:440deg;--saturacao:.5;position:relative;width:fit-content;padding:5px;border-radius:100px;display:flex;justify-content:center;align-items:center;text-decoration:none;
  background:linear-gradient(to right,rgba(255,255,255,var(--dg1,0)) 0%,transparent 40%,transparent 60%,rgba(255,255,255,var(--dg2,.2)))}
.btn-atomik-4{position:relative;white-space:nowrap;z-index:1;width:fit-content;overflow:hidden;font:600 1rem "Raleway",sans-serif;color:#0d0d11;
  padding:16px 64px;border-radius:100px;border:2px solid #fff;background:#d1d1d1;display:flex;gap:16px;justify-content:center;align-items:center}
.btn-atomik-4 p{position:relative;z-index:1;margin:0;color:inherit;line-height:24px}
.btn-atomik-4::before{content:"";position:absolute;top:50%;left:50%;width:204px;height:103px;
  background-image:radial-gradient(43.3% 44.23% at 50% 49.51%,#fffff7 29%,#fffacd 48.5%,#f4d2bf 60.71%,hsla(15,5%,83%,0) 100%);
  filter:blur(12px) hue-rotate(var(--tom)) saturate(var(--saturacao));transform:translate(var(--J7p,10%),-50%);border-radius:100%;transition:.3s ease-in-out}
.atomik-wrapper-btn::before,.atomik-wrapper-btn::after{content:"";position:absolute;top:50%;left:50%;width:102%;height:95%;transition:.3s ease-out;
  filter:blur(60px) hue-rotate(var(--tom)) saturate(var(--saturacao));background:linear-gradient(to right,transparent 0%,rgba(255,137,100,.3) 46.45%,#cd3100 90%,#ff7950);
  border-radius:100px;transform:translate(-50%,-50%);z-index:1;opacity:var(--R4h,1)}
.atomik-wrapper-btn::after{background:linear-gradient(to left,transparent 0%,rgba(255,137,100,.2) 46.45%,#cd3100 90%,#ff7950);opacity:var(--K9y,0)}
.btn-atomik-4.ativo::before{transition:transform .1s ease-out!important}
.wrapper-html{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:none!important;mix-blend-mode:plus-lighter;
  filter:blur(20px) hue-rotate(var(--tom)) saturate(var(--saturacao));pointer-events:none}
.glow{pointer-events:none}
.glow::before,.glow::after{content:"";position:absolute;top:50%;left:50%;width:100%;height:50%;transition:.3s ease-out;filter:blur(16px);
  background:linear-gradient(to right,transparent 0%,rgba(255,137,100,.2) 50%,#ff7950 80%,#ff9f50);border-radius:100px;transform:translate(-50%,-50%);z-index:2;opacity:var(--R4h,1)}
.glow::before{background:linear-gradient(to left,transparent 0%,rgba(255,137,100,.2) 50%,#ff7950 80%,#ff9f50);opacity:var(--K9y,0)}
.atomik-wrapper-btn.full,.atomik-wrapper-btn.full .btn-atomik-4{width:100%}
/* blinda o texto do botão contra as regras de p das seções (.hero-offer p, .fecho p...) */
.atomik-wrapper-btn .btn-atomik-4 p{width:auto;max-width:none;margin:0;padding:0;font:inherit;letter-spacing:normal;line-height:24px;color:inherit;text-align:center}
@media (max-width:767px){.atomik-wrapper-btn.b-mob,.atomik-wrapper-btn.b-mob .btn-atomik-4,.atomik-wrapper-btn.b-hero,.atomik-wrapper-btn.b-hero .btn-atomik-4{width:100%}.btn-atomik-4{padding:16px 24px}}

/* ===== TEXTURA "TELA FILMADA" =====
   1 aberração cromática (filtro SVG #fx-ca), 2 scanlines, 3 moiré, 4 grão, 5 vinheta, 6 borda fora de foco, 7 respiração de exposição, 8 glitch */
.film{position:relative;isolation:isolate;overflow:hidden;background:#000}
.film>img,.film>.film-c{filter:url(#fx-ca) contrast(1.04) saturate(.96);animation:breathe 9s ease-in-out infinite}
.film::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,.22) 3px 4px)}
.film::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 45%,rgba(0,0,0,.6) 100%)}
.film .moire{position:absolute;inset:-20px;z-index:3;pointer-events:none;opacity:.35;mix-blend-mode:overlay;transform:rotate(1deg);
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 2px,transparent 2px 9px);animation:moire 14s linear infinite}
.film .grain{position:absolute;inset:-50%;z-index:3;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background:url("grain.svg") 0 0/180px 180px;animation:grain .32s steps(4) infinite}
.film .edge{position:absolute;inset:0;z-index:2;pointer-events:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 62%,#000 100%);mask:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 62%,#000 100%)}
.film .bands{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0}
.film .bands i{position:absolute;left:0;right:0;mix-blend-mode:screen;background:rgba(255,255,255,.09)}
.film .bands i:nth-child(1){top:var(--b1,20%);height:var(--h1,30px);transform:translateX(var(--x1,40px));background:rgba(194,254,11,.1)}
.film .bands i:nth-child(2){top:var(--b2,55%);height:var(--h2,18px);transform:translateX(var(--x2,-30px))}
.film .bands i:nth-child(3){top:var(--b3,78%);height:var(--h3,60px);transform:translateX(var(--x3,20px))}
.film.glitch>img,.film.glitch>.film-c{filter:url(#fx-ca-g) brightness(1.35);transform:translateX(var(--gx,10px)) skewX(-1.5deg);animation:none}
.film.glitch .bands{opacity:1}
.film.glitch .grain{opacity:.28}
.film.lite .edge,.film.lite .moire{display:none}
.film.lite>img{filter:none;animation:none}
.film.lite::before{opacity:.3}
.film.lite::after{background:radial-gradient(ellipse 80% 75% at 50% 50%,transparent 55%,rgba(0,0,0,.35) 100%)}
@keyframes breathe{0%,100%{filter:url(#fx-ca) contrast(1.04) saturate(.96) brightness(.985)}50%{filter:url(#fx-ca) contrast(1.04) saturate(.96) brightness(1.015)}}
@keyframes moire{to{background-position:0 90px}}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-12%,8%)}50%{transform:translate(9%,-14%)}75%{transform:translate(-6%,-5%)}100%{transform:translate(0,0)}}

/* ===== HERO ===== */
.hero{height:750px;overflow:hidden;background:#000}
.hero .logo{position:absolute;z-index:6;top:28px;left:var(--g)}
.logo{display:flex;flex-direction:column;align-items:center;gap:2px;width:138px}
.logo small{font:400 8px/1.4 var(--mono);letter-spacing:2.5px;color:#A3A3A3}
.logo b{font:400 20px/1.2 var(--display);color:var(--lime);white-space:nowrap}
.hero-media{position:absolute;inset:0;z-index:1}
.hero-scene{position:absolute;left:0;right:0;top:120px;z-index:0}
.scene{display:grid;width:100%;overflow:hidden;scale:2;perspective:35em;filter:blur(1px);font-size:16px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 20% 80%,transparent);mask:linear-gradient(90deg,transparent,#000 20% 80%,transparent)}
.a3d{display:grid;place-self:center;transform-style:preserve-3d;animation:ry 82s linear infinite}
@keyframes ry{to{transform:rotateY(360deg)}}
.hcard{--w:200px;display:block;grid-area:1/1;width:var(--w);height:auto;object-fit:contain;backface-visibility:hidden;
  transform:rotateY(calc(var(--i)*(360deg/var(--n)))) translateZ(calc(-1*(0.5*var(--w) + 0.5em)/tan(calc(180deg/var(--n)))))}
.hero-photo{position:absolute;z-index:2;top:84px;left:50%;width:296px;translate:-50% 0}
.hero-photo img{width:100%;height:auto}
.hero-media::after{content:"";position:absolute;left:0;right:0;top:360px;bottom:0;background:linear-gradient(180deg,transparent,#000 140px);z-index:3} /* fecha o carrossel e o ruído embaixo, sem corte seco */
.hero-copy{position:absolute;z-index:6;left:var(--g);right:var(--g);top:350px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.chip{display:inline-flex;align-items:center;gap:10px;height:36px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(255,255,255,.12);
  font:500 13.5px/1 var(--body);letter-spacing:-.1px;color:#fff;white-space:nowrap}
.chip .live{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(194,254,11,.1);border:1px solid rgba(194,254,11,.25)}
.chip .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);animation:pulse 2s ease-in-out infinite}
.chip .sep{width:1px;height:14px;background:rgba(255,255,255,.18)}
.chip .d{display:inline-flex;align-items:center;gap:6px;color:#909090}
.chip .d .ic{width:14px;height:14px}
@keyframes pulse{50%{opacity:.45}}
.h1{color:#fff;font:500 min(32px,8.05vw)/1.08 var(--body);letter-spacing:-1.3px}
.h1 em{font-style:normal;color:var(--lime);white-space:nowrap}
.h1 span{display:block;white-space:nowrap}
.hero-offer{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:4px;width:100%}
.hero-offer p{font:500 15px/1.5 var(--body);color:#909090}
.hero-offer p b{font-weight:500;color:#fff}
.hero-offer .atomik-wrapper-btn{margin-top:4px}

/* ===== DOR ===== */
.dor{padding:72px 0 0}
.dor .in{display:flex;flex-direction:column;gap:44px}
.dor-copy{display:flex;flex-direction:column;gap:28px}
.dor .lead{font-size:16px}
.ciclo{padding-top:12px}
.ciclo li{display:flex;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.ciclo .n{font:500 13px/1.2 var(--body);color:var(--dim);flex:none;min-width:14px}
.ciclo .t{font:500 16px/1.2 var(--body);color:#909090}
.ciclo li.on .n{color:var(--lime)}
.ciclo li.on .t{color:#fff;max-width:125px}
.ciclo li.on .ic{margin-left:auto;width:16px;height:16px;color:var(--lime)}
.dor-copy>small{font:500 14px/1.2 var(--body);color:var(--dim)}
.dor-screen{position:relative;height:433px;border-radius:10px;overflow:hidden;background:radial-gradient(closest-side,#262626,#000)}
.dor-screen .phone{position:absolute;left:50%;top:31px;width:225px;translate:-50% 0;container-type:inline-size}
.dor-screen .fade{position:absolute;left:0;right:0;bottom:0;height:30%;z-index:2;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8) 55%,#000)}

/* celular (app de notas) */
.ph{--u:calc(100cqw / 395);position:relative;height:calc(var(--u)*815);font-family:var(--body)}
.ph .ic{width:1em;height:1em}
.pb{position:absolute;width:calc(var(--u)*4);background:#2A2A2A;border-radius:calc(var(--u)*2.44)}
.pb.a{left:calc(var(--u)*-4);top:calc(var(--u)*144);height:calc(var(--u)*37)}.pb.vu{left:calc(var(--u)*-4);top:calc(var(--u)*205);height:calc(var(--u)*63)}.pb.vd{left:calc(var(--u)*-4);top:calc(var(--u)*283);height:calc(var(--u)*63)}.pb.pw{right:calc(var(--u)*-4);top:calc(var(--u)*232);height:calc(var(--u)*98)}
.ph-body{position:absolute;inset:0;padding:calc(var(--u)*12.2);background:#161616;border:calc(var(--u)*1.83) solid rgba(255,255,255,.2);border-radius:calc(var(--u)*63.44)}
.ph-island{position:absolute;left:50%;top:calc(var(--u)*26);width:calc(var(--u)*120);height:calc(var(--u)*34);translate:-50% 0;border-radius:999px;background:#000}
.ph-scr{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#000;border-radius:calc(var(--u)*52.46)}
.ph-status{display:flex;align-items:center;justify-content:space-between;flex:none;height:calc(var(--u)*61);padding:0 calc(var(--u)*34.16) 0 calc(var(--u)*36.6);color:#fff}
.ph-clock{font:600 calc(var(--u)*17.69)/1 var(--body);font-variant-numeric:tabular-nums}
.ph-ic{display:flex;align-items:center;gap:calc(var(--u)*6.1);font-size:calc(var(--u)*18)}
.ph-nav{display:flex;align-items:center;justify-content:space-between;flex:none;height:calc(var(--u)*46);padding:calc(var(--u)*7.32) calc(var(--u)*19.52) calc(var(--u)*12.2) calc(var(--u)*12.2);color:var(--lime)}
.ph-back{display:flex;align-items:center;gap:calc(var(--u)*2.44);font:500 calc(var(--u)*19.52)/1 var(--body)}
.ph-back .ic{font-size:calc(var(--u)*27)}
.ph-act{display:flex;gap:calc(var(--u)*21.96);font-size:calc(var(--u)*23)}
.ph-note{display:flex;flex-direction:column;gap:calc(var(--u)*7.32);padding:calc(var(--u)*4.88) calc(var(--u)*26.84) 0}
.ph-title{display:flex;align-items:center;gap:calc(var(--u)*9.76);font:700 calc(var(--u)*32.94)/1.2 var(--body);letter-spacing:calc(var(--u)*-0.61);color:#fff}
.ph-title .emo{font:400 calc(var(--u)*26.84)/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.ph-list{display:flex;flex-direction:column;gap:calc(var(--u)*14.64);padding-top:calc(var(--u)*12.2)}
.ph-list li{display:flex;align-items:flex-start;gap:calc(var(--u)*13.42);min-height:calc(var(--u)*26);font:500 calc(var(--u)*18.91)/1.3 var(--body);color:#fff}
.ph-list .cb{display:grid;place-items:center;flex:none;width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:50%;border:calc(var(--u)*1.83) solid #5A5A5E;color:#000;transition:background .25s,border-color .25s}
.ph-list .cb .ic{font-size:calc(var(--u)*16);stroke-width:3;opacity:0;transition:opacity .2s}
.ph-list li.done .cb{background:var(--lime);border-color:var(--lime)}
.ph-list li.done .cb .ic{opacity:1}
.ph-list li.done span{color:#8E8E93}
.ph-prev{display:flex;flex-direction:column;padding:calc(var(--u)*31.72) calc(var(--u)*26.84) 0}
.ph-lbl{margin-bottom:calc(var(--u)*10);font:500 calc(var(--u)*13.42)/1.2 var(--body);letter-spacing:calc(var(--u)*0.73);color:#8E8E93}
.ph-old{display:flex;flex-direction:column;gap:calc(var(--u)*3.66);padding:calc(var(--u)*12.2) 0;border-top:1px solid rgba(255,255,255,.1);opacity:var(--o)}
.ph-old b{font:600 calc(var(--u)*17.08)/1.2 var(--body);color:#fff}
.ph-old>span{font:500 calc(var(--u)*15.25)/1.2 var(--body);color:#8E8E93;white-space:nowrap}
.ph-old em{font-style:normal;margin-right:calc(var(--u)*7.32)}
.ph-tool{position:absolute;left:0;right:0;top:calc(var(--u)*683);height:calc(var(--u)*107);display:flex;justify-content:space-between;padding:calc(var(--u)*17.08) calc(var(--u)*31.72) 0;font-size:calc(var(--u)*26);color:var(--lime);background:linear-gradient(180deg,transparent,#000 35%)}
/* digitação: o que ainda não foi escrito fica invisível, sem mexer no layout */
.ph.pre .ph-list li:not(.on){visibility:hidden}
.ph-list li.typing span::after,.ph-list li.last span::after{content:"";display:inline-block;width:calc(var(--u)*2);height:1.05em;margin-left:calc(var(--u)*1.5);vertical-align:-0.15em;background:var(--lime);animation:caret 1s steps(1) infinite}

/* ===== STATEMENT ===== */
.stm{padding:72px 0;text-align:center}
.stm p{display:flex;flex-direction:column;align-items:center;gap:4px}
.stm .l{display:flex;align-items:center;gap:10px;font:500 30px/1.15 var(--body);letter-spacing:-1.1px;color:#fff}
.stm .l.g{color:#909090}
.tile{display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:9px;background:#262626;border:1px solid rgba(255,255,255,.12);color:#fff;rotate:6deg}
.tile.r{rotate:-5deg}
.tile.lime{background:var(--lime);border:0;color:#0B0B0B}
.tile .ic{width:16px;height:16px}

/* ===== VIRADA ===== */
.virada{padding:290px 0 72px}
.virada .bgm{position:absolute;left:0;right:0;top:0;height:520px}
.virada .bgm img{width:100%;height:100%;object-fit:cover}
.shade{position:absolute;left:0;right:0;top:0;height:520px;z-index:6;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.5) 35%,rgba(0,0,0,.9) 62%,#000 80%)}
.shade-top{position:absolute;left:0;right:0;top:0;height:100px;z-index:6;pointer-events:none;background:linear-gradient(180deg,#000,transparent)}
.virada .in{display:flex;flex-direction:column;gap:32px;z-index:7}
.v-head{display:flex;flex-direction:column;gap:16px}
.cmp{background:var(--widget);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.cmp-h{display:none}
.cmp-r{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.cmp-r:last-child{border-bottom:0}
.cmp .role{display:flex;align-items:center;gap:14px;font:500 16px/1.2 var(--body);letter-spacing:-.3px;color:#fff}
.cmp .tile2{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:#141414;border:1px solid rgba(255,255,255,.13);color:#fff}
.cmp .tile2 .ic{width:17px;height:17px}
.cmp .swap{display:flex;align-items:center;gap:8px}
.cmp .antes{display:flex;align-items:center;gap:12px;opacity:.75}
.cmp .antes .av{display:none}
.cmp .antes b{display:block;font:500 13px/1.2 var(--body);color:#909090}
.cmp .antes small{display:block;margin-top:2px;font:500 12.5px/1.2 var(--body);color:var(--dim)}
.cmp .arr{width:16px;height:16px;color:var(--dim);flex:none}
.cmp .hoje{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-left:auto;font:500 13.5px/1.2 var(--body);color:#fff;text-align:right}
.logos{display:flex}
.logos i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#141414;border:2px solid #000}
.logos i+i{margin-left:-6px}
.logos img{width:18px;height:18px;border-radius:4px}
.cmp-r.you{background:rgba(194,254,11,.04)}
.cmp-r.you .tile2{background:var(--lime);border:0;color:#0B0B0B}
.cmp-r.you .antes{opacity:1}
.cmp-r.you .arr{color:var(--lime)}
.cmp .tag{padding:5px 10px;border:1px solid rgba(194,254,11,.4);border-radius:999px;font:500 13.5px/1.2 var(--body);color:var(--lime);white-space:nowrap}
.cmp-r.tot{background:#0D0D0D;padding-block:16px}
.cmp-r.tot .role{font:500 13px/1.2 var(--body);color:var(--dim);letter-spacing:0}
.cmp-r.tot .antes b{font:500 13px/1.2 var(--body)}
.cmp-r.tot .hoje .ic{width:16px;height:16px}
.v-body{display:flex;flex-direction:column;gap:12px} /* no desktop vira linha (gap 20px) */
.resumo{display:flex;flex-direction:column;gap:12px}
.rcard{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:22px;background:var(--widget);border:1px solid var(--line)}
.rcard .hd{display:flex;align-items:center;justify-content:space-between;height:28px;font:500 12.5px/1.2 var(--body);color:var(--dim)}
.rcard .team{display:flex}
.rcard .team i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1A1A1A;border:2px solid var(--widget);color:var(--dim)}
.rcard .team i+i{margin-left:-8px}
.rcard .team .ic{width:13px;height:13px}
.rcard .big{margin-top:20px;font:500 28px/1.2 var(--body);letter-spacing:-1px;color:var(--dim)}
.rcard .sm{font:500 14px/1.2 var(--body);color:var(--dim)}
.rcard .bars{display:flex;gap:4px;padding-top:6px}
.rcard .bars i{flex:1;height:6px;border-radius:2px;background:rgba(255,255,255,.08)}
.rcard.hj{background:radial-gradient(circle at 0 0,#141B06,#090909 70%);border-color:rgba(194,254,11,.25)}
.rcard.hj .hd span{display:inline-flex;align-items:center;gap:8px;color:#909090}
.rcard.hj .hd span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.rcard.hj .hd b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--lime);color:#0B0B0B}
.rcard.hj .hd .ic{width:15px;height:15px}
.rcard.hj .big{color:#fff}
.rcard.hj .sm{color:var(--lime)}
.rcard.hj .bars i{background:var(--lime);opacity:var(--o)}

/* ===== MERCADO ===== */
.mercado{padding:64px 0 72px}
.mercado .in{display:flex;flex-direction:column;align-items:center;gap:28px}
.m-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.m-head .h2{line-height:1.05}
.m-head .lead{font-size:16px}
.marquee{position:relative;width:100vw;max-width:none;height:40px;overflow:hidden;align-self:center}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:1;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#000,transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,#000,transparent)}
.mq{display:flex;width:max-content;animation:mq 180s linear infinite} /* trilha com 4 listas: 4x a distância de antes, 4x o tempo = mesma velocidade */
.mq ul{display:flex;gap:9.36px;padding-right:9.36px}
.mq li{display:flex;align-items:center;gap:7.8px;height:39px;padding:9.36px 15.6px 9.36px 10.92px;border-radius:999px;background:var(--widget);border:1px solid rgba(255,255,255,.13);
  font:500 11.7px/1 var(--body);letter-spacing:-.16px;color:#fff;white-space:nowrap}
.mq li i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#151515}
.mq li .ic{width:11px;height:11px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ===== MÉTODO ===== */
.metodo{padding:72px 0}
.metodo .in{display:flex;flex-direction:column;align-items:center;gap:32px}
.mt-head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.mt-head .h2{line-height:1.05}
.mt-head .lead{font-size:16px}
.win{width:100%;background:#0D0D0D;border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden}
.win-bar{display:flex;align-items:center;gap:18px;height:52px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.08);overflow-x:auto;scrollbar-width:none}
.win-bar::-webkit-scrollbar{display:none}
.dots3{display:flex;gap:7px;flex:none}
.dots3 i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15)}
.tabs{display:flex;gap:6px;flex:none}
.tab{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);font:500 13px/1 var(--body);color:#BDBDBD;white-space:nowrap;transition:background .25s,color .25s}
.tab small{font:500 11px/1 var(--body);color:var(--dim)}
.tab:hover{background:rgba(255,255,255,.05)}
.tab[aria-selected="true"]{background:#fff;border-color:#fff;color:#0B0B0B}
.tab[aria-selected="true"] small{color:rgba(11,11,11,.5)}
/* tempo até a próxima etapa: barra fina embaixo do texto da pill ativa */
.tab .tbar{display:none;position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--lime) var(--p,0%),rgba(11,11,11,.12) var(--p,0%))}
.tab[aria-selected="true"] .tbar{display:block}
.tab .star{width:6px;height:6px;border-radius:50%;background:var(--lime)}
/* as 6 etapas ocupam a mesma célula: a altura é a da maior e não pula na troca */
.win-body{display:grid;touch-action:pan-y}
.panel{grid-area:1/1;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateX(12px);transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s}
.panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s ease,visibility 0s}
.p-info{display:flex;flex-direction:column;gap:12px;padding:24px 22px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.p-step{display:flex;align-items:center;gap:8px;font:500 13px/1.2 var(--body);color:#fff}
.p-step span{color:var(--dim)}
.p-step em{padding:2px 6px;border-radius:4px;background:rgba(194,254,11,.12);font:500 10px/1.2 var(--body);font-style:normal;color:var(--lime)}
.p-obj{display:none}
.p-info h3{margin-top:4px;font:500 26px/1.05 var(--body);letter-spacing:-1.1px;color:#fff}
.p-info p{font:500 15px/1.55 var(--body);letter-spacing:-.1px;color:#909090}
.p-prog{display:flex;gap:5px;padding-top:18px}
.p-prog i{flex:1;height:3px;border-radius:9px;background:rgba(255,255,255,.1)}
.p-prog i.done{background:rgba(255,255,255,.4)}
.p-prog i.now{background:linear-gradient(90deg,var(--lime) var(--p,0%),rgba(255,255,255,.1) var(--p,0%))} /* como no frame de estados: vistas em branco, atual em lime */
.p-next{display:inline-flex;align-items:center;gap:6px;padding-top:6px;align-self:flex-start;font:500 13px/1.2 var(--body);color:#909090;transition:color .2s}
.p-next:hover{color:#fff}
.p-next .ic{width:14px;height:14px}
.p-prev{aspect-ratio:820/638}
.p-prev img{width:100%;height:100%;object-fit:cover}
.fecho{display:flex;flex-direction:column;align-items:center;gap:26px;padding-top:16px;width:100%;text-align:center}
.fecho p{font:500 20px/1.25 var(--body);letter-spacing:-.8px;color:#fff}

/* ===== SIMULADOR ===== */
.sim{padding:72px 0}
.sim .in{display:flex;flex-direction:column;gap:28px}
.s-head{display:flex;flex-direction:column;gap:14px}
.widget{background:var(--widget);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.ctrl{display:flex;flex-direction:column;gap:26px;padding:22px 20px 26px}
.presets{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border:1px solid var(--line);border-radius:999px}
.presets button{height:33px;padding:0 6px;border-radius:999px;font:600 12.5px/1 var(--body);color:#909090;white-space:nowrap;transition:background .25s,color .25s}
.presets button[aria-pressed="true"]{background:#fff;color:#0B0B0B}
.rng{display:flex;flex-direction:column;gap:14px}
.rng .row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.rng label{font:500 14px/1.2 var(--body);color:#909090}
.rng output{flex:none;white-space:nowrap;font:500 22px/1.2 var(--body);letter-spacing:-.6px;color:#fff;font-variant-numeric:tabular-nums}
.rng .mm{display:flex;justify-content:space-between;font:500 12px/1.2 var(--body);color:var(--dim)}
.rng input{--p:30%;-webkit-appearance:none;appearance:none;width:100%;height:16px;margin:0;background:transparent;cursor:pointer}
.rng input::-webkit-slider-runnable-track{height:2px;border-radius:9px;background:linear-gradient(90deg,#fff var(--p),rgba(255,255,255,.12) var(--p))}
.rng input::-moz-range-track{height:2px;border-radius:9px;background:linear-gradient(90deg,#fff var(--p),rgba(255,255,255,.12) var(--p))}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-7px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 0 rgba(194,254,11,.3);transition:box-shadow .2s}
.rng input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:0}
.rng input:active::-webkit-slider-thumb,.rng input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(194,254,11,.25)}
.rng input:focus-visible{outline:0}
.res{display:flex;flex-direction:column;gap:22px;padding:24px 20px 26px;border-top:1px solid rgba(255,255,255,.08)}
.res .lb{font:500 14px/1.2 var(--body);color:#909090}
.res .val{font:500 56px/1 var(--body);letter-spacing:-2.5px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.res .ex{font:500 14.5px/1.25 var(--body);color:#909090}
.ch-head{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.ch-left{display:flex;flex-direction:column;gap:8px;font:500 13px/1.2 var(--body);color:var(--dim)}
.ch-legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#909090}
.ch-legend span::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--lime)}
.ch-legend span.s::before{background:rgba(255,255,255,.15)}
.ch-legend{display:flex;gap:20px}
.ch-pill{align-self:flex-start;padding:5px 11px;border:1px solid rgba(194,254,11,.35);border-radius:999px;font:500 12.5px/1.2 var(--body);color:var(--lime)}
.chart{display:flex;align-items:flex-end;gap:8px;height:170px}
.chart li{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%}
.chart .stk{display:flex;flex-direction:column;gap:2px;width:100%}
.chart .stk i{display:block;width:100%;transition:height .45s cubic-bezier(.2,.7,.2,1)}
.chart .stk .s{background:rgba(255,255,255,.15)}
.chart .stk .m{background:var(--lime)}
.chart .stk i:first-child{border-radius:4px 4px 0 0}
.chart small{font:500 11.5px/1.2 var(--body);color:var(--dim);white-space:nowrap}
.note{display:flex;align-items:flex-start;gap:8px;font:500 13.5px/1.2 var(--body);color:#fff}
.note .ic{width:14px;height:14px;margin-top:1px;color:#909090}

/* ===== CASES ===== */
.cases{padding:72px 0}
.cases .in{display:flex;flex-direction:column;gap:28px}
.car{position:relative;height:359px;margin-inline:calc(var(--g)*-1);overflow:hidden;touch-action:pan-y}
.car-glow{position:absolute;left:50%;top:-18px;width:432px;height:299px;translate:-50% 0;border-radius:50%;filter:blur(50px);pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--gc,224,72,47),.7) 35%,rgba(var(--gc,224,72,47),.25) 65%,transparent);transition:background .6s}
.car-track{position:absolute;inset:0}
.card{position:absolute;left:50%;top:9px;width:342px;padding:5.4px;display:flex;flex-direction:column;gap:7.2px;border-radius:10.8px;background:#0D0D0D;border:1px solid rgba(255,255,255,.14);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s;transform:translateX(calc(-50% + var(--x,0px))) scale(var(--s,1));opacity:var(--o,1);cursor:pointer}
.card .shot{overflow:hidden;background:#000;border-radius:6.3px;border:1px solid rgba(255,255,255,.08);aspect-ratio:736/453}
.card .shot>img{width:100%;height:100%;object-fit:cover;object-position:top}
.card.side .shot>img{filter:blur(5px)}
.card .val{display:flex;align-items:center;padding:12.6px 9px 7.2px}
.card .val>div{flex:1;display:flex;flex-direction:column;gap:5.4px}
.card .val>div+div{padding-left:22px;border-left:1px solid rgba(255,255,255,.1)}
.card .lb{display:flex;align-items:center;gap:6px;font:500 9px/1.2 var(--body);letter-spacing:1.2px;color:#6B6B6B;text-transform:uppercase}
.card .lb.m::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lime)}
.card .v{display:flex;align-items:flex-end;gap:4px;font:600 24px/1 var(--body);letter-spacing:-.9px;color:#fff}
.card .v small{font:500 12px/1.6 var(--body);letter-spacing:0;color:#909090}
.card .v.m,.card .v.m small:first-child{color:var(--lime)}
.car-ov{position:absolute;top:0;bottom:0;width:12%;z-index:3;pointer-events:none}
.car-ov.l{left:0;background:linear-gradient(90deg,#000,rgba(0,0,0,.8) 35%,transparent)}
.car-ov.r{right:0;background:linear-gradient(270deg,#000,rgba(0,0,0,.8) 35%,transparent)}
.car-nav{position:absolute;left:0;right:0;bottom:12px;z-index:4;display:flex;align-items:center;justify-content:center;gap:16px}
.circ{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);color:#fff;transition:background .2s,border-color .2s}
.circ:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
.circ .ic{width:14px;height:14px}
.car-dots{display:flex;align-items:center;gap:5.4px}
.car-dots button{width:5px;height:5px;border-radius:9px;background:rgba(255,255,255,.2);transition:width .3s,background .3s}
.car-dots button[aria-current="true"]{width:25px;background:#fff}

/* ===== SOBRE ===== */
.sobre{padding:72px 0}
.sobre-body{display:flex;flex-direction:column;gap:16px}
.sobre-body p{font:500 15px/1.6 var(--body);letter-spacing:-.2px;color:#909090}
.sobre-body b{display:block;font-weight:500;color:#fff}
  font:500 11.5px/1.2 var(--body);color:#4A4A4A}

/* ===== PARA QUEM ===== */
.quem{padding:72px 0}
.quem .in{display:flex;flex-direction:column;gap:32px}
.q-head{display:flex;flex-direction:column;gap:24px}
.q-head .h2{line-height:1.05}
.q-head .lead{line-height:1.55;letter-spacing:0}
.q-stack{display:flex;flex-direction:column;gap:14px}
.qcard{display:flex;flex-direction:column;gap:6px;padding:20px 18px;border-radius:24px;background:radial-gradient(circle at 0 0,#141A08,#090909 70%);border:1px solid rgba(194,254,11,.25)}
.qcard.no{background:radial-gradient(circle at 0 0,#1C0B0B,#090909 70%);border-color:rgba(255,77,77,.25)}
.qcard h3{display:flex;align-items:center;gap:14px;padding-bottom:16px;font:600 22px/1.2 var(--body);letter-spacing:-.6px;color:var(--lime)}
.qcard.no h3{color:var(--red)}
.qcard h3 img{width:44px;height:44px}
.qcard li{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--line);font:500 16.5px/1.4 var(--body);color:#fff}
.qcard.no li{color:#BDBDBD}
.qcard li i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:rgba(194,254,11,.1);color:var(--lime)}
.qcard.no li i{background:rgba(255,77,77,.1);color:var(--red)}
.qcard li .ic{width:15px;height:15px}

/* ===== OFERTA ===== */
.oferta{padding:280px 0 72px}
.oferta .bgm{position:absolute;left:0;right:0;top:0;height:520px}
.oferta .bgm{background:#000 url("oferta-bg-poster-mobile.webp") center/cover no-repeat}
.oferta .bgm video{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.oferta .bgm video.on{opacity:1}
@media (min-width:768px){.oferta .bgm{background-image:url("oferta-bg-poster.webp")}}
.oferta .in{display:flex;flex-direction:column;align-items:center;gap:28px;z-index:7}
.o-head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.o-head .h2{font-size:30px;line-height:1.2}
.o-head .lead{font-size:15px}
.obox{display:flex;flex-direction:column;gap:8px;width:100%;padding:8px;border-radius:22px;background:rgba(11,11,11,.9);border:1px solid rgba(255,255,255,.1)}
.inc{display:flex;flex-direction:column;gap:4px;padding:22px 18px}
.inc h3{font:600 17px/1.2 var(--body);color:#fff;padding-bottom:14px}
.inc li{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);font:500 15px/1.2 var(--body);color:#E5E5E5}
.inc li.last{border-bottom:0}
.inc li i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:rgba(194,254,11,.12);color:var(--lime)}
.inc li .ic{width:11px;height:11px}
.inc .bonus{display:flex;align-items:center;gap:10px;padding:22px 0 6px;font:600 15px/1.2 var(--body);color:var(--lime)}
.inc .bonus img{width:30px;height:30px}
.pbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:26px 20px;border-radius:20px;background:#101010;border:1px solid rgba(255,255,255,.09)}
.pbox hr{width:100%;height:1px;margin:0;border:0;background:var(--line)}
.price{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px}
.price .old{font:500 14px/1.2 var(--body);color:#909090}
.price s{text-decoration-color:#BDBDBD;text-decoration-thickness:2px}
.price .big{display:flex;align-items:flex-end;gap:10px;white-space:nowrap}
.price .big span{font:500 18px/2 var(--body);color:#fff}
.price .big b{font:600 48px/1 var(--body);letter-spacing:-1.8px;color:var(--lime)}
.price .av{font:500 14px/1.2 var(--body);color:#909090}
.price .av b{font-weight:600;color:#fff}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;font:500 11.5px/1.2 var(--body);color:#909090}
.trust span{display:inline-flex;align-items:center;gap:5px}
.trust .ic{width:12px;height:12px;color:var(--lime)}
.selos{width:290px;height:auto}

/* ===== GARANTIA ===== */
.garantia{padding:72px 0;overflow:hidden}
.garantia .bg{position:absolute;inset:0;height:1000px}
.garantia .bg img{width:100%;height:100%;object-fit:cover;opacity:.9}
.garantia .bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.35))}
.garantia .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000,transparent 16%,transparent 84%,#000)}
.garantia .in{display:flex;flex-direction:column;gap:36px;z-index:2}
.g-left{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.g-left .h2{font-size:32px;line-height:1.05;letter-spacing:-1.3px}
.g-left .lead{font-size:16px;letter-spacing:0}
.chips{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.chips span{display:inline-flex;align-items:center;gap:6px;height:32px;padding:8px 13px;border-radius:99px;background:rgba(9,9,9,.55);border:1px solid rgba(255,255,255,.13);font:500 13px/1.2 var(--body);color:#D4D4D4}
.chips .ic{width:13px;height:13px;color:var(--lime)}
.g-left strong{font:600 16px/1.2 var(--body);color:#fff}
.mail{display:flex;flex-direction:column;padding:18px;border-radius:20px;background:#1E1E1E;border:1px solid rgba(255,255,255,.08)}
.mail>p:not(.conn){font:500 13px/1.2 var(--body);color:#9A9A9A;padding-bottom:16px}
.mbox{border-radius:16px;background:#2A2A2A;border:1px solid rgba(255,255,255,.06)}
.mbox dl{margin:0;padding:4px 18px;border-bottom:1px solid var(--line)}
.mbox dl div{display:flex;align-items:center;gap:14px;padding:13px 0}
.mbox dl div+div{border-top:1px solid rgba(255,255,255,.05)}
.mbox dt{width:56px;flex:none;font:500 12.5px/1.2 var(--body);color:#9A9A9A}
.mbox dd{margin:0;font:500 14.5px/1.25 var(--body);color:#fff;overflow-wrap:anywhere}
.mbox>p{padding:20px 18px 24px;font:500 15px/1.5 var(--body);color:#E5E5E5}
.conn{display:flex;align-items:center;gap:12px;height:56px;padding-left:34px;font:500 12px/1.2 var(--body);color:#9A9A9A}
.conn::before{content:"";width:1px;height:100%;background:rgba(255,255,255,.18)}
.reply{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:#2A2A2A;border:1px solid rgba(255,255,255,.06)}
.reply .who{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.reply .who img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.reply .who div{display:flex;flex-direction:column;gap:2px}
.reply .who b{font:600 14.5px/1.2 var(--body);color:#fff}
.reply .who small{font:500 12px/1.2 var(--body);color:#9A9A9A}
.reply .ok{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:rgba(194,254,11,.12);font:500 12px/1.2 var(--body);color:var(--lime)}
.reply .ok .ic{width:13px;height:13px}
.reply>p{font:500 15px/1.5 var(--body);color:#E5E5E5}

/* ===== FAQ ===== */
.faq{padding:72px 0}
.faq .in{display:flex;flex-direction:column;gap:32px}
.f-head{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;height:41px;padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.13);font:500 14px/1 var(--body);color:#fff;transition:background .2s}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-ghost .ic{width:14px;height:14px}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{display:flex;align-items:center;gap:16px;list-style:none;cursor:pointer;font:500 18px/1.25 var(--body);letter-spacing:-.3px;color:#D9D9D9}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:1}
.faq summary .ic{width:18px;height:18px;color:#909090;transition:transform .25s}
.faq summary .mi{display:none}
.faq details[open] summary{color:#fff}
.faq details[open] summary .pl{display:none}
.faq details[open] summary .mi{display:block;color:#fff}
.faq details p{padding-top:12px;max-width:640px;font:500 15.5px/1.6 var(--body);color:#909090}

/* ===== FINAL CTA · O JOGO ===== */
.final{padding:72px 0}
.final .in{display:flex;flex-direction:column;align-items:center;gap:28px}
.fn-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.fn-head .h2{line-height:1.1}
.tut{display:flex;align-items:center;gap:8px;font:500 13px/1.2 var(--body);color:var(--lime)}
.tut .ic{width:15px;height:15px}
.tut-d{display:none}
.kbd{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;background:rgba(194,254,11,.05);border:1px solid rgba(194,254,11,.4);border-bottom-width:2.5px;font:600 11px/1 var(--mono);color:var(--lime)}
.game{width:100%;background:#070707;border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden}
.g-bar{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.g-bar .l{display:flex;align-items:center;gap:8px;font:400 10.5px/1 var(--mono);letter-spacing:.8px;color:#D4D4D4}
.g-bar .l .ic{width:14px;height:14px;color:var(--lime)}
.g-bar .c{display:flex;align-items:center;gap:4px;font:500 11px/1 var(--mono);letter-spacing:1px;color:var(--dim)}
.g-bar .c i{width:9px;height:4px;border-radius:2px;background:var(--lime)}
.g-bar .c i.off{background:rgba(255,255,255,.18)}
.g-bar .c .lbl,.g-bar .c b,.g-bar .r{display:none}
.g-view{position:relative;height:360px;background:#000;overflow:hidden;cursor:pointer}
.g-scene{position:absolute;left:50%;top:0;width:360px;height:360px;translate:-50% 0}
.g-scene .film{position:absolute;inset:0}
.g-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.2s ease}
.g-scene .s2{opacity:0}
.game.done .g-scene .s1{opacity:0}
.game.done .g-scene .s2{opacity:1}
.g-scene .fd{position:absolute;pointer-events:none;z-index:5}
.g-scene .fd.b{left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,transparent,#000)}
.g-scene .fd.t{left:0;right:0;top:0;height:90px;background:linear-gradient(180deg,#000,transparent)}
.g-scene .fd.l,.g-scene .fd.r{display:none}
.glass{background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.g-tag{position:absolute;z-index:6;left:12px;top:12px;display:flex;align-items:center;gap:10px;height:32px;padding:8px 12px;border-radius:99px}
.g-tag small{font:500 10.5px/1 var(--mono);letter-spacing:1px;color:#8A8A8A}
.g-tag i{width:1px;height:12px;background:rgba(255,255,255,.15)}
.g-tag b{font:600 13px/1 var(--body);color:#fff}
.g-fala{position:absolute;z-index:6;left:calc(50% - 39px);top:58px;padding:8px 12px;border-radius:12px 12px 12px 2px;background:#fff;font:500 13px/1.2 var(--body);color:#111;white-space:nowrap;transition:background .4s,color .4s}
.g-fala::after{content:"";display:inline-block;width:.5ch;animation:caret 1s steps(1) infinite}
.g-ev{position:absolute;z-index:6;right:12px;display:flex;align-items:center;gap:10px;padding:9px 12px 9px 10px;border-radius:12px;transition:opacity .5s,transform .5s}
.g-ev .ico{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:rgba(255,77,77,.15);color:var(--red)}
.g-ev .ico .ic{width:14px;height:14px}
.g-ev b{display:block;font:600 13px/1.2 var(--body);color:var(--red)}
.g-ev small{display:block;margin-top:1px;font:500 11px/1.2 var(--body);color:#909090}
.g-ev.boleto{bottom:12px;background:rgba(26,5,5,.8)}
.g-ev.cartao{display:none}
.g-ev.cartao .ico{background:rgba(255,138,138,.15);color:#FF8A8A}
.g-ev.cartao b{color:#FF8A8A}
.g-ev.gain{opacity:0;transform:translateX(30px);background:rgba(0,0,0,.7)}
.g-ev.gain .ico{background:rgba(194,254,11,.15);color:var(--lime)}
.g-ev.gain b{color:var(--lime)}
.g-ev.w1{bottom:12px}
.g-ev.w2{display:none}
.game.done .g-ev.boleto,.game.done .g-ev.cartao{opacity:0;transform:translateX(30px)}
.game.done .g-ev.gain{opacity:1;transform:none}
.game.done .g-ev.w2{transition-delay:.25s}
.g-mis{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:#0B0B0B;border-block:1px solid rgba(255,255,255,.08)}
.g-mis small{font:400 10px/1.3 var(--mono);letter-spacing:1px;color:var(--lime)}
.g-mis p{display:flex;align-items:flex-start;gap:8px;font:500 13px/1.35 var(--body);color:#E5E5E5}
.g-mis p i{flex:none;width:12px;height:12px;margin-top:3px;border-radius:3px;border:1px solid rgba(255,255,255,.3);transition:background .3s,border-color .3s}
.game.done .g-mis p{color:#909090}
.game.done .g-mis p i{background:var(--lime);border-color:var(--lime)}
.g-hud{display:flex;gap:14px;padding:14px 14px 16px;background:#070707}
.g-hud>div{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.g-hud .row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.g-hud small{font:500 10px/1.3 var(--mono);letter-spacing:1px;color:#8A8A8A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-hud b{font:600 13px/1.2 var(--body);color:#8A8A8A;white-space:nowrap;transition:color .4s}
.g-hud .bar{height:6px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.g-hud .bar i{display:block;height:100%;width:var(--w);border-radius:2px;background:#8A8A8A;transition:width 1.2s cubic-bezier(.2,.7,.2,1),background .4s}
.g-hud .grana b{color:var(--red)}
.g-hud .grana .bar i{background:var(--red)}
.g-hud .cli b{color:var(--dim)}
.g-hud .cli .bar i{background:var(--dim)}
.game.done .g-hud b,.game.done .g-hud .grana b{color:var(--lime)}
.game.done .g-hud .cli b{color:#fff}
.game.done .g-hud .bar i,.game.done .g-hud .grana .bar i{background:var(--lime)}
.game.done .g-hud .cli .bar i{background:#fff}
@keyframes caret{50%{opacity:0}}
.g-bang{position:absolute;z-index:7;left:48%;top:36%;font:800 34px/1 var(--body);color:var(--lime);opacity:0;text-shadow:0 0 18px rgba(194,254,11,.6);pointer-events:none}
.game.go .g-bang{animation:bang 1s ease forwards}
@keyframes bang{0%{opacity:0;transform:translateY(8px) scale(.6)}20%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.game.done .g-fala{background:var(--lime);color:#0B0B0B}

/* ===== FOOTER ===== */
.footer{position:relative;height:112px;overflow:hidden} /* sem o letreiro: só o texto legal e a linha de horizonte */
.legal{position:absolute;left:0;right:0;top:28px;display:flex;flex-direction:column;align-items:center;gap:6px;font:500 12px/1.25 var(--body);color:#6B6B6B;text-align:center}

/* ===== reveal leve ===== */
/* reveal por tempo ao entrar na tela; ao sair volta ao início sem animar (a transition só existe no .vis) */
.rvon .rv{opacity:0;transform:translateY(28px)}
.rvon .rv.vis{opacity:1;transform:none;transition:opacity .9s ease var(--d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}

/* ===================== TABLET ===================== */
@media (min-width:640px){
  :root{--pad:48px}
  .card{width:520px}
  .car{height:470px}
  .dor-screen{height:560px}
  .dor-screen .phone{width:290px}
}

/* ===================== DESKTOP ===================== */
@media (min-width:1024px){
  :root{--g:60px;--guide:max(12px,calc(50% - 660px))}
  .page::before{left:max(60px,calc(50% - 660px))}
  .page::after{right:max(60px,calc(50% - 660px))}
  :root{--pad:72px}
  .hatch{height:88px}
  .hatch::before{left:max(60px,calc(50% - 660px));right:max(60px,calc(50% - 660px))}
  .h2{font-size:52px;letter-spacing:-1.82px}
  .lead{font-size:17px}

  /* hero */
  .hero{height:760px}
  .hero .logo{left:max(120px,calc(50% - 600px));top:52px}
  .hero-scene{top:170px}
  .hcard{--w:300px}
  .hero-photo{top:56px;width:418px}
  .hero-media::after{display:none}
  .hero-copy{left:max(120px,calc(50% - 600px));right:max(120px,calc(50% - 600px));top:auto;bottom:110px;flex-direction:row;align-items:flex-end;justify-content:space-between;text-align:left;gap:40px}
  .hero-copy>.hl{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
  .h1{font-size:52px;line-height:1;letter-spacing:-1.9px}
  .h1 span+span{margin-top:2px}
  .hero-offer{width:330px;align-items:flex-start;gap:14px;padding:0}
  .hero-offer .sp{height:6px}

  /* dor */
  .dor{padding:0}
  .dor .in{flex-direction:row;align-items:center;gap:80px;height:760px}
  .dor-copy{width:520px;flex:none}
  .dor .h2{width:560px}
  .dor .lead{font-size:19px;width:500px}
  .ciclo{width:500px}
  .ciclo .t{font-size:18px}
  .ciclo li.on .t{max-width:none}
  .dor-screen{flex:1;height:760px;border-radius:18px}
  .dor-screen .phone{left:103px;translate:none;top:54px;width:395px}

  /* statement */
  .stm{padding:160px 0}
  .stm p{gap:6px}
  .stm .l{gap:16px;font-size:50px;letter-spacing:-1.8px}
  .tile{width:55px;height:55px;border-radius:14px}
  .tile .ic{width:24px;height:24px}

  /* virada */
  .virada{padding:400px 0 100px}
  .virada .bgm{height:860px}
  .shade-top{height:140px}
  .shade{height:860px}
  .virada .in{gap:56px}
  .v-head{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .v-head .h2{width:640px}
  .v-head .lead{width:380px}
  .v-body{display:flex;flex-direction:row;gap:20px}
  .cmp{flex:1}
  .cmp-h,.cmp-r{display:grid;grid-template-columns:250px 300px 40px 1fr;align-items:center;padding:18px 26px;gap:0}
  .cmp-h{border-bottom:1px solid var(--line);font:500 12.5px/1.2 var(--body);letter-spacing:.2px;color:var(--dim)}
  .cmp-h span:last-child{display:inline-flex;align-items:center;gap:8px}
  .cmp-h span:last-child::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
  .cmp .swap{display:contents}
  .cmp .antes .av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#1A1A1A;border:1px solid rgba(255,255,255,.13);color:var(--dim)}
  .cmp .antes .av .ic{width:14px;height:14px}
  .cmp .antes b{font-size:14px}
  .cmp .hoje{justify-content:flex-start;margin:0;font-size:15px;text-align:left}
  .cmp-r.tot{padding-block:20px}
  .cmp-r.tot .antes b,.cmp-r.tot .hoje{font-size:15px}
  .cmp .tag{font-size:11.5px}
  .resumo{width:320px;flex:none;gap:16px}
  .rcard{flex:1}

  /* mercado */
  .mercado{padding:88px 0 100px}
  .mercado .in{gap:48px}
  .m-top{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
  .m-head{gap:20px}
  .m-head .lead{font-size:19px;width:640px}
  .marquee{width:100%;height:52px}
  .marquee::before,.marquee::after{width:180px}
  .mq ul{gap:12px;padding-right:12px}
  .mq li{height:50px;gap:10px;padding:12px 20px 12px 14px;font-size:15px;letter-spacing:-.2px}
  .mq li i{width:26px;height:26px}
  .mq li .ic{width:14px;height:14px}

  /* método */
  .metodo{padding:100px 0}
  .metodo .in{gap:56px}
  .mt-head .h2{width:900px}
  .mt-head .lead{font-size:19px;width:600px}
  .win{border-radius:22px}
  .win-bar{height:60px;padding:0 20px}
  .panel{flex-direction:row;height:638px}
  .p-info{width:380px;flex:none;gap:14px;padding:36px 36px 34px;border-bottom:0;border-right:1px solid rgba(255,255,255,.08)}
  .p-obj{display:block;flex:1;min-height:0;position:relative}
  .p-obj img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten}
  .p-info h3{font-size:32px}
  .p-info p{font-size:16px}
  .p-prev{flex:1;aspect-ratio:auto}
  .fecho{width:640px;padding-top:16px}
  .fecho p{font-size:26px}

  /* simulador */
  .sim{padding:100px 0}
  .sim .in{gap:48px}
  .s-head{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .s-head .h2{width:600px}
  .s-head .lead{width:400px}
  .widget{display:flex}
  .ctrl{width:420px;flex:none;gap:34px;padding:36px;border-right:1px solid var(--line)}
  .res{flex:1;padding:36px;border-top:0}
  .res .val{font-size:84px;letter-spacing:-4px}
  .ch-head{flex-direction:row;align-items:center;justify-content:space-between}
  .ch-left{flex-direction:row;align-items:center;gap:20px}
  .chart{gap:14px}

  /* cases */
  .cases{padding:100px 0}
  .cases .in{gap:56px}
  .c-head{display:flex;align-items:flex-end;justify-content:space-between}
  .c-head .h2{width:600px}
  .c-head .lead{width:400px}
  .car{height:674px;margin-inline:0;overflow:visible}
  .car-glow{top:-40px;width:960px;height:664px}
  .card{top:20px;width:760px;padding:12px;gap:16px;border-radius:24px}
  .card .shot{border-radius:14px}
  .card .val{padding:14px 10px 8px}
  .card .val>div{gap:6px}
  .card .val>div+div{padding-left:24px}
  .card .lb{font-size:11px}
  .card .lb.m::before{width:6px;height:6px}
  .card .v{font-size:30px;letter-spacing:-1.1px}
  .card .v small{font-size:15px}
  .card .v small.u{font-size:14px}
  .car-ov{width:380px}
  .car-ov.l{left:-120px}
  .car-ov.r{right:-120px}
  .car-nav{bottom:14px;gap:20px}
  .circ{width:40px;height:40px}
  .circ .ic{width:16px;height:16px}
  .car-dots{gap:6px}
  .car-dots button{width:6px;height:6px}
  .car-dots button[aria-current="true"]{width:28px}

  /* sobre */
  .sobre{padding:100px 0}
  .sobre-body p{font-size:16px}

  /* para quem */
  .quem{padding:100px 0}
  .quem .in{flex-direction:row;align-items:flex-start;gap:80px}
  .q-head{width:440px;flex:none;position:sticky;top:40px}
  .q-head .lead{width:400px}
  .q-stack{flex:1;gap:20px}
  .qcard{padding:32px}

  /* oferta */
  .oferta{padding:380px 0 100px}
  .oferta .bgm{height:860px}
  .oferta .in{gap:48px}
  .o-head{gap:18px;width:700px}
  .o-head .h2{font-size:52px;line-height:1.2;letter-spacing:-1.9px}
  .o-head .lead{font-size:18px}
  .obox{flex-direction:row;gap:12px;padding:12px;border-radius:28px}
  .inc{flex:1;padding:32px 28px;justify-content:center}
  .pbox{width:440px;flex:none;gap:22px;padding:30px 32px}
  .price .big span{font-size:22px;line-height:2.2}
  .price .big b{font-size:64px;letter-spacing:-2.4px}
  .trust{flex-wrap:nowrap;gap:16px}
  .selos{width:340px}

  /* garantia */
  .garantia{padding:108px 0}
  .garantia .bg{height:auto}
  .garantia .in{flex-direction:row;align-items:center;gap:80px}
  .g-left{width:560px;flex:none;gap:24px}
  .g-left .h2{font-size:56px;letter-spacing:-2.2px}
  .g-left .lead{font-size:18px}
  .chips{flex-direction:row}
  .g-left strong{font-size:17px}
  .mail{flex:1;padding:28px}
  .mbox dl{padding:4px 22px}
  .mbox>p{padding:20px 22px 24px}
  .conn{padding-left:40px}
  .reply{padding:22px;gap:14px}
  .reply .ok{margin-left:auto}

  /* faq */
  .faq{padding:100px 0}
  .faq .in{flex-direction:row;align-items:flex-start;gap:80px}
  .f-head{width:380px;flex:none}
  .f-head .h2{font-size:46px;letter-spacing:-1.61px}
  .f-head .lead{font-size:16px}
  .f-list{flex:1}

  /* final */
  .final{padding:100px 0}
  .final .in{gap:44px}
  .fn-head{gap:20px;width:760px}
  .fn-head .h2{line-height:1.08}
  .tut-m{display:none}
  .tut-d{display:flex;align-items:center;gap:14px;padding-top:6px;font:500 13px/1.2 var(--body);color:var(--lime)}
  .tut-d>span{display:inline-flex;align-items:center;gap:5px}
  .tut-d>i{width:3px;height:3px;border-radius:50%;background:rgba(194,254,11,.4)}
  .tut-d .ic{width:15px;height:15px}
  .game{border-radius:20px}
  .g-bar{height:46px;padding:0 18px}
  .g-bar .l{gap:10px;font-size:11.5px;font-weight:500;letter-spacing:1px}
  .g-bar .l .ic{width:15px;height:15px}
  .g-bar .c{gap:8px}
  .g-bar .c i{width:18px;height:5px}
  .g-bar .c .lbl,.g-bar .c b{display:inline}
  .g-bar .c b{font-weight:500;color:#D4D4D4;letter-spacing:0}
  .g-bar .r{display:flex;align-items:center;gap:7px;font:500 11px/1 var(--mono);letter-spacing:1px;color:#909090}
  .g-bar .r::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);animation:pulse 2s infinite}
  .game-body{display:grid;grid-template-columns:1fr;grid-template-rows:680px}
  .g-view{height:680px;grid-area:1/1}
  .g-scene{width:680px;height:680px}
  .g-scene .fd.l,.g-scene .fd.r{display:block;top:0;bottom:0;width:140px}
  .g-scene .fd.l{left:0;background:linear-gradient(90deg,#000,transparent)}
  .g-scene .fd.r{right:0;background:linear-gradient(270deg,#000,transparent)}
  .g-view::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% + 340px);width:1px;background:rgba(255,255,255,.07)}
  .g-tag{left:24px;top:24px}
  .g-fala{left:calc(50% - 84px);top:128px;translate:none}
  .g-ev{right:24px}
  .g-ev.boleto{top:24px;bottom:auto}
  .g-ev.cartao{display:flex;top:86px}
  .g-ev.w1{top:24px;bottom:auto}
  .g-ev.w2{display:flex;top:86px}
  .g-mis{grid-area:1/1;align-self:start;justify-self:start;z-index:6;width:230px;margin:72px 0 0 24px;border-radius:12px;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .g-hud{grid-area:1/1;align-self:end;justify-self:start;z-index:6;flex-direction:column;width:230px;margin:0 0 24px 24px;padding:16px;border-radius:12px;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

  /* footer */
  .footer{height:124px}
  .legal{top:44px;left:max(120px,calc(50% - 600px));right:max(120px,calc(50% - 600px));flex-direction:row;justify-content:space-between;font-size:13px}

}
@media (min-width:1280px){:root{--pad:120px}}
@media (min-width:1024px) and (max-width:1279px){
  .hero-copy{gap:24px}
  .h1{font-size:44px}
  .quem .in,.faq .in,.garantia .in{gap:48px}
  .q-head{width:360px}
  .f-head{width:320px}
  .g-left{width:480px}
  .pbox{width:400px}
  .resumo{width:280px}
  .cmp-h,.cmp-r{grid-template-columns:220px 1fr 32px 200px}
}

/* sem animação: textura parada, sem glitch, sem giro do carrossel */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .a3d,.mq,.film>img,.film>.film-c{animation:none!important}
  .film .grain{animation:none!important}
  .film .bands{display:none}
  .rvon .rv{opacity:1!important;transform:none!important;animation:none!important}
}

.game.done .g-tag small{color:var(--lime)}

/* virada ("Há 2 anos..."): sem as linhas da grade. Some a guia vertical da página e as bordas/divisórias da tabela e dos cards */
.virada{z-index:6;background:#000}
.virada .cmp,.virada .rcard,.virada .rcard.hj{border-color:transparent}
.virada .cmp-r,.virada .cmp-h{border-bottom:0}

/* hero: arte de fundo do Willian, presa no topo e centrada; cada aparelho baixa só a sua */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;filter:blur(5px)}
@media (max-width:767px){.hero::before{background:url("../bg-hero-mobile.webp") top center/100% auto no-repeat}}
@media (min-width:768px){.hero::before{background:url("../bg-hero-desktop.webp") top center/100% auto no-repeat}}

/* oferta: o vídeo vira textura de fundo (escuro e desfocado); só título e subtítulo ficam legíveis */
.oferta .bgm video{filter:none} /* vídeo limpo (o vídeo já é claro, não precisa de brightness): sem textura, sem blur, sem véu */
/* uma camada só: topo claro, escurece no título e chega ao preto onde começam os cards */
.oferta .bgm::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 35%,rgba(0,0,0,.75) 55%,#000 100%)} /* celular: o .bgm tem 520px e o título começa em ~55% */
@media (min-width:768px){.oferta .bgm::after{background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.75) 70%,#000 100%)}}
/* legibilidade: escurece só atrás do título e do sub, não o vídeo todo */
.o-head{position:relative}
.o-head .h2,.o-head .lead{text-shadow:0 2px 18px rgba(0,0,0,.6)}
.o-head .lead{color:#D4D4D4}

/* hero no celular: respiro entre a pill e o H1; rosto do Willian no centro da tela (na foto ele fica a ~35% da largura) */
@media (max-width:767px){
  .hero-copy>.hl{display:flex;flex-direction:column;align-items:center;gap:18px}
  .hero-photo{translate:-43% 0} /* meio-termo: rosto e ombros equilibrados no centro */
  .hero .logo{left:50%;translate:-50% 0} /* no celular a logo fica centrada; no desktop segue alinhada à esquerda com o H1 */
}

/* frases-manifesto: cada palavra (e cada ícone) acende conforme a rolagem. --k vai de 0 a 1 por item (JS) */
.stm .w{opacity:calc(.16 + .84 * var(--k,1))}
.stm .tile{opacity:calc(.16 + .84 * var(--k,1));scale:calc(.8 + .2 * var(--k,1))}
.stm .ws{white-space:normal}

/* hero: glitch curto no carrossel 3D e na foto. Fora do glitch nenhum filtro extra (o carrossel mantém só o blur de 1px do original) */
.hero-media .bands{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
.hero-media .bands i{position:absolute;left:0;right:0;mix-blend-mode:screen;background:rgba(255,255,255,.09)}
.hero-media .bands i:nth-child(1){top:var(--b1,20%);height:var(--h1,30px);transform:translateX(var(--x1,40px));background:rgba(194,254,11,.1)}
.hero-media .bands i:nth-child(2){top:var(--b2,55%);height:var(--h2,18px);transform:translateX(var(--x2,-30px))}
.hero-media .bands i:nth-child(3){top:var(--b3,78%);height:var(--h3,60px);transform:translateX(var(--x3,20px))}
.hero-media.glitch .bands{opacity:1}
.hero-media.glitch .scene{filter:url(#fx-ca-g) blur(1px) brightness(1.3);translate:var(--gx,8px) 0}
.hero-media.glitch .hero-photo img{filter:url(#fx-ca-g) brightness(1.35);transform:translateX(var(--gx,8px)) skewX(-1.5deg)}
@media (prefers-reduced-motion:reduce){.hero-media .bands{display:none}}

/* hero: entrada no carregamento, só CSS (a classe .js entra no topo do <body>, antes da hero).
   Fundo → carrossel → foto → logo → pill → H1 linha a linha → sub → botão, ~1,4s no total */
@keyframes heroIn{from{opacity:var(--o0,0);transform:translateY(var(--ty,0)) scale(var(--sc,1))}}
.js .hero::before,.js .hero-scene,.js .hero-photo,.js .hero .logo,.js .hero .chip,.js .h1>span,.js .hero-offer>p,.js .hero-offer .atomik-wrapper-btn{animation:heroIn var(--du,.7s) cubic-bezier(.2,.7,.2,1) var(--dl,0s) both}
.js .hero::before{--du:.8s;--o0:.01}
.js .hero-scene{--sc:.96;--du:1s;--dl:1.05s} /* os sites do fundo entram por último */
.js .hero-photo{--ty:20px;--du:.8s;--dl:.05s;--o0:.01} /* começa em 1% (não em 0) para o navegador já contar a foto como LCP no 1º quadro */
.js .hero .logo{--dl:.3s}
.js .hero .chip{--ty:12px;--dl:.4s}
.js .h1>span{--ty:16px;--dl:.5s;--o0:.01}
.js .h1>span:nth-child(2){--dl:.58s}
.js .h1>span:nth-child(3){--dl:.66s}
.js .hero-offer>p{--ty:12px;--dl:.74s}
.js .hero-offer>p+p{--dl:.8s}
.js .hero-offer .atomik-wrapper-btn{--ty:12px;--dl:.88s}
@media (prefers-reduced-motion:reduce){.js .hero::before,.js .hero-scene,.js .hero-photo,.js .hero .logo,.js .hero .chip,.js .h1>span,.js .hero-offer>p,.js .hero-offer .atomik-wrapper-btn{animation:none}}

/* hero: ruído de "tela filmada" só sobre o fundo e o carrossel. Camadas: fundo (.hero::before) → carrossel (z0) → ruído (z1) → foto (z2) → texto, logo e botão (fora de .hero-media, z6) */
.hero-noise{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero-noise::before{content:"";position:absolute;inset:0;opacity:.55;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,.22) 3px 4px)}
.hero-noise .moire{position:absolute;inset:-20px;opacity:.35;mix-blend-mode:overlay;transform:rotate(1deg);background:repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 2px,transparent 2px 9px);animation:moire 14s linear infinite}
.hero-noise .grain{position:absolute;inset:-50%;opacity:.16;mix-blend-mode:overlay;background:url("grain.svg") 0 0/180px 180px;animation:grain .32s steps(4) infinite}
.hero-photo{z-index:2}
@media (prefers-reduced-motion:reduce){.hero-noise .moire,.hero-noise .grain{animation:none!important}}
.hero-media{z-index:auto} /* sem contexto próprio: o grão e o moiré (overlay) misturam com o fundo real da hero, sem clarear o preto */
.hero-noise{z-index:auto} /* idem: sem contexto próprio; fica acima do carrossel pela ordem do HTML e abaixo da foto (z2) */

/* método no celular: sem a linha de abas (navegação = segmentos + "Próximo" + swipe); texto enxuto e mockup mais alto */
.p-prog i{cursor:pointer}
@media (max-width:767px){
  .metodo .win-bar{display:none}
  .p-info{gap:8px;padding:18px 18px 16px}
  .p-info h3{margin-top:2px;font-size:26px}
  .p-info p{font-size:14.5px;line-height:1.5}
  .p-prog{padding-top:10px}
  .p-prog{padding-block:6px}
  .p-prog i{height:4px}
  .p-next{padding-top:2px}
  .p-prev{aspect-ratio:820/638} /* como no pen: a tela inteira da etapa, encolhida para caber na largura */
}

/* mercado: o recorte do jornal (e, com JS, o canvas dos 68 quadros do papel desamassando). Quadro 16:9 com fundo preto;
   o recorte fica nas mesmas coordenadas dos quadros (x 116–1163, y 212–508 em 1280x720) */
.news{position:relative;width:calc(100% + var(--pad)*2);margin-inline:calc(var(--pad)*-1);aspect-ratio:16/9;background:#000}
.news .m-cv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.news .paper{position:absolute;left:9.0625%;top:29.444%;width:81.797%;height:auto;max-width:none;filter:none;animation:none}
.news.ready .m-cv{opacity:1}
.news.ready .paper{visibility:hidden}
.news.ready.end .paper{visibility:visible}
@media (min-width:768px){.news{width:min(100%,calc(52vh * 16 / 9));margin-inline:auto;border-radius:20px}}
/* com o efeito ligado (JS e sem "reduzir movimento"): área alta + palco fixo; título, texto e letreiro entram no fim (--t) */
.mscrub .mercado{padding:0}
.mscrub .m-scroll{height:180vh}
.mscrub .m-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.mscrub .mercado .in{gap:20px;width:min(1200px,100% - var(--pad)*2)}
.mscrub .mercado .m-top{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
.mscrub .mercado .m-head,.mscrub .mercado .marquee{opacity:var(--t,1);transform:translateY(calc((1 - var(--t,1)) * 24px))}
@media (min-width:768px){.mscrub .m-scroll{height:220vh}.mscrub .mercado .in{gap:28px}}
/* o quadro 16:9 tem ~29% de preto em cima e embaixo do recorte: margens negativas devolvem o respiro normal entre o recorte e o título */
.mscrub .mercado .news{margin-block:calc((100% + var(--pad)*2) * -.14)}
.mscrub .mercado .m-head,.mscrub .mercado .marquee{position:relative}
@media (min-width:768px){.mscrub .mercado .news{margin-block:calc(min(100%,52vh * 16 / 9) * -.14)}}

/* rolagem suave no desktop (Lenis, em assets/v5/vendor). Regras do lenis.css + sem o scroll-behavior nativo, que brigaria com ele */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* rodapé: links de termos e privacidade */
.legal-links{display:inline-flex;gap:18px}
.legal-links a{color:#8A8A8A;text-decoration:underline;text-decoration-color:rgba(255,255,255,.2);text-underline-offset:3px;transition:color .2s}
.legal-links a:hover,.legal-links a:focus-visible{color:#fff}

/* nichos: 2ª linha no sentido contrário, só no celular */
.marquee-rev{display:none}
@media (max-width:767px){
  .marquee-rev{display:block;margin-top:-10px}
  .marquee-rev .mq{animation-direction:reverse}
}

/* fase final: sub do jogo */
.fn-sub{max-width:620px;text-align:center}
/* tela do jogo limpa: sem rótulos na barra e sem a tag de local */
.g-bar .l,.g-bar .r{visibility:hidden}
.g-tag{display:none!important}
@media (min-width:1024px){.g-mis{margin-top:24px}}
/* método: o objeto mescla (lighten) sempre contra o fundo da janela, inclusive durante o fade do slide */
.p-obj{isolation:isolate;background:#0D0D0D}
/* cases: os cards laterais param nas guias da página */
@media (min-width:1024px){
  .cases{clip-path:inset(-200px calc(var(--guide) + 1px))}
  .car-ov{width:320px}
  .car-ov.l{left:-60px}
  .car-ov.r{right:-60px}
}

/* ===== JOGO: capa + gate de clique (desktop e celular). O jogo 3D só carrega ao clicar em JOGAR AGORA (assets/game/loader.js) ===== */
.g-cover{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:#050505;overflow:hidden;cursor:default}
.g-cover[hidden]{display:none}
.g-cover .film{position:absolute;inset:0;opacity:.55}
.g-cover .film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.8)}
.g-cover::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(70% 60% at 50% 45%,rgba(0,0,0,.05),rgba(0,0,0,.78)),linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.55))}
.g-cover-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;max-width:560px;text-align:center}
.g-cover h3{margin:0;font:600 clamp(22px,3.4vw,34px)/1.15 var(--body);color:#fff;letter-spacing:-.4px;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.g-cover p{margin:0;font:500 14px/1.4 var(--body);color:#c8c8c8}
.g-cover .g-play{--tom:0deg;--saturacao:1;margin:0;border:0;cursor:pointer;font:inherit;color:inherit}
.g-cover .btn-atomik-4{background:#C2FE0B;border-color:#C2FE0B;color:#0b0b0b;gap:10px;padding:16px 44px;transition:background .2s,border-color .2s}
.g-cover .btn-atomik-4 .ic{position:relative;z-index:1;width:18px;height:18px;color:#0b0b0b}
.g-cover .btn-atomik-4::before{background-image:radial-gradient(43.3% 44.23% at 50% 49.51%,#f4ffc2 29%,#dfff6a 48.5%,#c2fe0b 60.71%,rgba(194,254,11,0) 100%)}
.g-cover .g-play::before,.g-cover .g-play::after{background:linear-gradient(to right,transparent 0%,rgba(194,254,11,.35) 46%,#9ed400 90%,#c2fe0b)}
.g-cover .g-play:hover .btn-atomik-4,.g-cover .g-play:focus-visible .btn-atomik-4{background:#d2ff45;border-color:#d2ff45}
.g-load{width:min(320px,70vw);display:flex;flex-direction:column;align-items:center;gap:10px}
.g-load[hidden]{display:none}
.g-load .bar{width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.g-load .bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--lime);box-shadow:0 0 12px rgba(194,254,11,.6);transition:width .15s linear}
.g-load small{font:500 11px/1 var(--mono);letter-spacing:1.5px;color:var(--lime)}
.g-cover.loading h3,.g-cover.loading p,.g-cover.loading .g-play{display:none}
html.g-lock,html.g-lock body{overflow:hidden!important;height:100%}
@media (max-width:767px){.g-cover h3{font-size:22px}.g-cover .btn-atomik-4{padding:14px 30px;font-size:15px}.g-cover-in{padding:18px}}
.game.is-full{opacity:1!important;transform:none!important;transition:none!important} /* o reveal (.rv) reiniciava a transição quando o jogo vai pro body */
@media (max-width:1023px){.game:has(.g-cover:not([hidden])) .g-mis,.game:has(.g-cover:not([hidden])) .g-hud{display:none}} /* no celular a capa ocupa o frame todo */
/* hero desktop: botão ocupa a coluna da oferta (330px) e fecha na borda direita do container */
@media (min-width:1024px){.hero-offer .atomik-wrapper-btn.b-hero,.hero-offer .atomik-wrapper-btn.b-hero .btn-atomik-4{width:100%}.hero-offer .atomik-wrapper-btn.b-hero .btn-atomik-4{padding-inline:20px}}

/* sobre: foto-capa (Willian no carro) com chip e título por cima, texto ao lado e clientes conhecidos */
.sobre .in{display:flex;flex-direction:column;gap:32px}
.sobre-photo{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/4;border-radius:18px;border:1px solid rgba(255,255,255,.12);overflow:hidden}
.sobre-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sobre-photo.film::after{background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 14%,transparent 42%,rgba(0,0,0,.82) 74%,#000)}
.sobre-cap{position:relative;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:0 20px 24px}
.sobre-cap .h2{font-size:30px;line-height:1.08;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.sobre-cap .h2 span{display:block;color:var(--lime)}
.sobre-copy{display:flex;flex-direction:column;gap:32px}
@media (min-width:768px){
  .sobre-cap{padding:0 32px 36px}
  .sobre-cap .h2{font-size:40px}
}
@media (min-width:1024px){
  .sobre .in{flex-direction:row;align-items:flex-start;gap:80px}
  .sobre-photo{width:520px;flex:none}
  .sobre-cap .h2{font-size:44px;letter-spacing:-1.5px}
  .sobre-copy{flex:1;min-width:0;gap:40px}
}
@media (min-width:1024px) and (max-width:1279px){.sobre .in{gap:48px}.sobre-photo{width:420px}.sobre-cap .h2{font-size:36px}}
.sobre-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.sobre-esc{font:500 26px/1.1 var(--body);letter-spacing:-.9px;color:var(--lime);text-shadow:0 2px 18px rgba(0,0,0,.6)}
@media (min-width:768px){.sobre-esc{font-size:34px}}
@media (min-width:1024px){.sobre-head .h2{font-size:46px;letter-spacing:-1.61px}.sobre-esc{font-size:36px;letter-spacing:-1.2px}}
.sobre-esc{font-size:22px;line-height:1.2;letter-spacing:-.6px;max-width:22ch;text-wrap:balance}
@media (min-width:768px){.sobre-esc{font-size:28px;letter-spacing:-.9px}}
@media (min-width:1024px){.sobre-esc{font-size:30px;letter-spacing:-1px}}
.sobre-intro{color:#fff!important}
.sobre-cap{padding:0 16px 16px}
.sobre-loc{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:16px 18px;border-radius:14px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.sobre-loc .loc{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--lime)}
.sobre-loc .loc .ic{width:14px;height:14px}
.sobre-loc p{font:500 16px/1.4 var(--body);letter-spacing:-.3px;color:#D4D4D4}
.sobre-loc p b{font-weight:500;color:#fff}
@media (min-width:768px){.sobre-cap{padding:0 20px 20px}.sobre-loc{padding:18px 20px}.sobre-loc p{font-size:18px}}
.sobre-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.85))}
.sobre-cap{z-index:2}
.sobre-body{gap:20px}
@media (min-width:1024px){.sobre .in{align-items:stretch}.sobre-photo{aspect-ratio:auto;min-height:560px}}