/* Import YT · Paulinho Pena
   Tokens 1:1 do design system da marca (Telegraf, Titillium Web, #111111, #4B55DB, #34E0E0) */
@font-face{font-family:'Telegraf';font-weight:100 500;font-style:normal;font-display:swap;src:url(/assets/fonts/telegraf-regular.woff2) format('woff2')}
@font-face{font-family:'Telegraf';font-weight:600 900;font-style:normal;font-display:swap;src:url(/assets/fonts/telegraf-ultrabold.woff2) format('woff2')}
@font-face{font-family:'Titillium Web';font-weight:300;font-style:normal;font-display:swap;src:url(/assets/fonts/titillium-300.woff2) format('woff2')}
@font-face{font-family:'Titillium Web';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/titillium-400.woff2) format('woff2')}
@font-face{font-family:'Titillium Web';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/titillium-600.woff2) format('woff2')}
@font-face{font-family:'Titillium Web';font-weight:400;font-style:italic;font-display:swap;src:url(/assets/fonts/titillium-400-italic.woff2) format('woff2')}

:root{
  --ink:#111111; --ice:#F3F3F3; --brand:#4B55DB; --cyan:#34E0E0; --brand-300:#8C93F0; --brand-900:#2B3290;
  --bg:#111111; --bg-2:#0A0A0A; --surface:#1A1A1C; --surface-2:#232326;
  --fg:#F3F3F3; --fg-muted:#B4B4BA; --fg-subtle:#7E7E86;
  --line:rgba(243,243,243,.12); --line-strong:rgba(243,243,243,.28);
  --accent:#8C93F0; --accent-2:#4B55DB; --on-accent:#FFFFFF; --accent-soft:rgba(140,147,240,.14);
  --danger:#F07178;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 44px -18px rgba(0,0,0,.7);
  --shadow-lg:0 2px 8px rgba(0,0,0,.5),0 40px 80px -30px rgba(0,0,0,.8);
  --f-display:'Telegraf','Titillium Web',system-ui,-apple-system,sans-serif;
  --f-head:'Telegraf','Titillium Web',system-ui,sans-serif;
  --f-body:'Titillium Web',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px; --r-leaf:20px 0 20px 0;
  --maxw:1240px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
::selection{background:var(--cyan); color:#111}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--f-display); font-weight:400; letter-spacing:-.015em; line-height:1.08; margin:0; text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic; font-weight:400}
p{margin:0; text-wrap:pretty}
.bal{text-wrap:balance}
.nw{white-space:nowrap}
.shell{width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:20px}
.eyebrow{font-family:var(--f-head); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; color:var(--accent); margin:0}
.eyebrow--cyan{color:var(--cyan)}
.sec{position:relative; padding:80px 0}
.sec-h{display:grid; gap:16px; max-width:760px; margin-bottom:44px}
.sec-h h2{font-size:clamp(2rem,4.2vw,3.2rem)}
.sec-h p:not(.eyebrow){color:var(--fg-muted); font-size:1.08rem; font-weight:300; line-height:1.6; text-wrap:balance}
.sec-h--c{margin-inline:auto; text-align:center; justify-items:center}

/* Luzes de fundo contínuas, sem marcar onde a dobra termina */
.dark-wrap{position:relative; overflow:hidden; isolation:isolate}
.glow{position:absolute; z-index:-1; border-radius:50%; filter:blur(120px); opacity:.22; pointer-events:none}
.glow--a{width:620px; height:620px; background:var(--brand); left:-260px; top:38%}
.glow--b{width:520px; height:520px; background:var(--cyan); right:-240px; top:70%; opacity:.12}
.glow--c{width:560px; height:560px; background:var(--brand); right:-200px; top:18%; opacity:.16}
.glow--d{width:600px; height:600px; background:var(--cyan); left:-280px; bottom:-120px; opacity:.1}

/* ---------- Preloader ---------- */
.preloader{position:fixed; inset:0; z-index:1000; background:#111; display:grid; place-items:center; animation:pre-sai .4s ease 3s forwards}
.preloader img{width:88px; height:auto; animation:pre-pulsa 1.4s ease-in-out infinite}
.preloader.fora{opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s .4s}
@keyframes pre-pulsa{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes pre-sai{to{opacity:0; visibility:hidden}}

/* ---------- Botões ---------- */
.btn{--_bg:var(--accent-2); --_fg:var(--on-accent);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; white-space:nowrap;
  font-family:var(--f-head); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:15px; line-height:18px;
  padding:16px 34px; border-radius:var(--r-leaf); border:1px solid transparent;
  background:var(--_bg); color:var(--_fg); transition:transform .16s, filter .2s, background .2s, color .2s}
.btn b{font-weight:800}
.btn:hover{filter:brightness(1.1)} .btn:active{transform:translateY(1px)}
.btn--cyan{--_bg:var(--cyan); --_fg:#111}
.btn--ghost{background:transparent; color:var(--fg); border-color:var(--line-strong)}
.btn--ghost:hover{background:rgba(243,243,243,.07); filter:none}
.btn--sm{font-size:12px; padding:10px 18px; border-radius:14px 0 14px 0}
.btn--block{width:100%}
.btn[disabled]{opacity:.6; cursor:wait}
.btn.carregando::after{content:""; width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.cta-nota{font-size:.86rem; color:var(--fg-subtle); display:flex; gap:8px 16px; flex-wrap:wrap; align-items:center}
.cta-nota i{font-style:normal; display:inline-flex; gap:6px; align-items:center}
.cta-nota i::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan)}

/* ---------- Topo fixo ---------- */
.nav{position:sticky; top:0; z-index:200; transition:background .25s, border-color .25s, backdrop-filter .25s; border-bottom:1px solid transparent}
.nav.solida{background:rgba(17,17,17,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px}
.marca{display:inline-flex; align-items:center; gap:12px; font-family:var(--f-head); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan)}
.marca img{height:24px; width:auto}

/* ---------- Hero ---------- */
.hero{position:relative; padding:40px 0 40px}
.hero-bg{position:absolute; inset:-68px 0 0 34%; z-index:-1; opacity:.5; pointer-events:none; overflow:hidden; transform:translate3d(0,var(--py,0px),0);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%),linear-gradient(180deg,#000 50%,transparent 100%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 55%),linear-gradient(180deg,#000 50%,transparent 100%); mask-composite:intersect}
.hero-bg i{position:absolute; inset:-4%; background:url(/assets/img/luz-liquida.webp) right center/cover no-repeat; animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-3%,2%,0)}}
.hero-in{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:56px; align-items:center}
.hero-txt{display:grid; gap:22px; justify-items:start}
.selo{display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border:1px solid var(--line-strong); border-radius:var(--r-pill); font-family:var(--f-head); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-muted); background:rgba(17,17,17,.5)}
.selo b{background:var(--cyan); color:#111; font-weight:800; padding:4px 9px; border-radius:var(--r-pill); letter-spacing:.12em}
.hero h1{font-size:clamp(2.7rem,5.6vw,4.7rem); line-height:1}
.hero h1 .t{display:block; font-family:var(--f-head); font-size:.3em; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); margin-bottom:18px; line-height:1.4}
.lead{max-width:54ch; color:var(--fg-muted); font-size:1.12rem; font-weight:300; line-height:1.6; text-wrap:balance}
.hero-acoes{display:grid; gap:14px; justify-items:start; margin-top:6px}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.tag{font-size:.86rem; border:1px solid var(--line); background:rgba(26,26,28,.6); color:var(--fg-muted); padding:6px 12px; border-radius:var(--r-pill)}

/* ---------- Painel da extensão (mockup em código) ---------- */
.mock{position:relative; justify-self:end; width:min(470px,100%)}
.mock::before{content:""; position:absolute; inset:12% -6% -8% 8%; background:radial-gradient(closest-side,rgba(75,85,219,.55),transparent); filter:blur(40px); z-index:-1}
.janela{background:#1C1C1F; border:1px solid rgba(243,243,243,.14); border-radius:var(--r-leaf); box-shadow:var(--shadow-lg); overflow:hidden; font-size:13px}
.jan-barra{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:#141416; border-bottom:1px solid var(--line); color:var(--fg-subtle); font-size:11px; letter-spacing:.04em}
.jan-barra span{display:flex; gap:10px; align-items:center}
.jan-barra em{font-style:normal; color:var(--fg)}
.jan-barra s{text-decoration:none; color:var(--fg-subtle)}
.pp{padding:16px; display:grid; gap:12px}
.pp-top{display:flex; align-items:center; justify-content:space-between}
.pp-tit{display:flex; align-items:center; gap:9px; font-family:var(--f-display); font-size:1.05rem}
.pp-tit img{height:15px; width:auto}
.pp-tit small{font-family:var(--f-head); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-subtle)}
.motor{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-head); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); border:1px solid rgba(52,224,224,.3); padding:5px 10px; border-radius:var(--r-pill)}
.motor i{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 3px rgba(52,224,224,.18)}
.pp-url{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px}
.pp-in{background:#0F0F11; border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:9px 11px; color:var(--fg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pp-in b{color:var(--fg); font-weight:400}
.pp-btn{display:grid; place-items:center; background:var(--brand); color:#fff; border:0; border-radius:10px 0 10px 0; padding:0 16px; font-family:var(--f-head); font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.pp-video{display:grid; grid-template-columns:118px minmax(0,1fr); gap:12px; align-items:center; background:#232326; border-radius:var(--r-md); padding:8px}
.pp-thumb{position:relative; aspect-ratio:16/9; border-radius:8px; background:url(/assets/img/thumb.webp) center/cover; overflow:hidden}
.pp-thumb::after{content:""; position:absolute; left:50%; top:50%; width:26px; height:26px; transform:translate(-50%,-50%); border-radius:50%; background:rgba(17,17,17,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23F3F3F3'/%3E%3C/svg%3E") center/16px no-repeat}
.pp-thumb span{position:absolute; right:5px; bottom:5px; background:rgba(0,0,0,.75); font-size:10px; padding:1px 5px; border-radius:4px}
.pp-video b{display:block; font-weight:600; font-size:13px; line-height:1.3}
.pp-video small{color:var(--fg-subtle); font-size:11.5px}
.pp-seg{display:grid; grid-template-columns:1fr 1fr; background:#0F0F11; border:1px solid var(--line); border-radius:10px; padding:3px}
.pp-seg span{text-align:center; padding:6px; border-radius:8px; color:var(--fg-subtle)}
.pp-seg .on{background:#2A2A2E; color:var(--fg)}
.pp-row{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pp-f{display:grid; gap:5px}
.pp-f>span{font-family:var(--f-head); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-subtle)}
.pp-sel{position:relative; background:#0F0F11; border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:8px 28px 8px 11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pp-sel::after{content:""; position:absolute; right:11px; top:45%; width:6px; height:6px; border-right:1.5px solid var(--fg-subtle); border-bottom:1.5px solid var(--fg-subtle); transform:translateY(-50%) rotate(45deg)}
.pp-trim{background:#232326; border-radius:var(--r-md); padding:11px; display:grid; gap:10px}
.pp-trim-h{display:flex; justify-content:space-between; align-items:center}
.sw{display:inline-flex; align-items:center; gap:8px}
.sw i{width:28px; height:16px; border-radius:99px; background:var(--brand); position:relative}
.sw i::after{content:""; position:absolute; right:2px; top:2px; width:12px; height:12px; border-radius:50%; background:#fff}
.sw.off i{background:#3A3A3F}
.sw.off i::after{right:auto; left:2px; background:#9A9AA2}
.pp-tempo{font-variant-numeric:tabular-nums; color:var(--cyan); font-size:12px}
.trilha{position:relative; height:34px; border-radius:6px; background:repeating-linear-gradient(90deg,#3A3A40 0 2px,transparent 2px 5px); background-color:#151517; overflow:hidden}
.trilha::before{content:""; position:absolute; inset:9px 0; background:repeating-linear-gradient(90deg,rgba(243,243,243,.16) 0 2px,transparent 2px 4px); -webkit-mask:linear-gradient(90deg,#000,#000); }
.sel-trecho{position:absolute; top:0; bottom:0; left:38%; width:24%; background:rgba(75,85,219,.32); border-left:3px solid var(--brand-300); border-right:3px solid var(--brand-300)}
.cabeca{position:absolute; top:-2px; bottom:-2px; left:47%; width:2px; background:var(--cyan)}
.pp-acoes{display:flex; gap:6px; flex-wrap:wrap}
.pp-acoes span{border:1px solid var(--line-strong); border-radius:8px 0 8px 0; padding:5px 10px; font-size:11.5px; color:var(--fg)}
.pp-acoes span b{color:var(--cyan); font-weight:600; margin-right:3px}
.pp-opc{display:grid; gap:7px}
.ck{display:flex; align-items:center; gap:8px; color:var(--fg-muted)}
.ck i{width:15px; height:15px; border-radius:4px; border:1px solid var(--line-strong); flex:none; display:grid; place-items:center}
.ck.on i{background:var(--brand); border-color:var(--brand)}
.ck.on i::after{content:""; width:7px; height:4px; border-left:1.6px solid #fff; border-bottom:1.6px solid #fff; transform:rotate(-45deg) translate(1px,-1px)}
.ck.on{color:var(--fg)}
.pp-go{background:var(--brand); color:#fff; text-align:center; border-radius:14px 0 14px 0; padding:11px; font-family:var(--f-head); font-size:12px; letter-spacing:.04em; text-transform:uppercase}
.pp-go b{font-weight:800}
.pp-fila{border-top:1px solid var(--line); padding-top:11px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center}
.pp-fila .ok{width:24px; height:24px; border-radius:8px 0 8px 0; background:rgba(52,224,224,.14); display:grid; place-items:center}
.pp-fila .ok::after{content:""; width:9px; height:5px; border-left:2px solid var(--cyan); border-bottom:2px solid var(--cyan); transform:rotate(-45deg) translate(1px,-1px)}
.pp-fila b{display:block; font-weight:600; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pp-fila small{color:var(--fg-subtle); font-size:11.5px}
.pp-fila em{font-style:normal; font-family:var(--f-head); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-subtle); border:1px solid var(--line); padding:4px 7px; border-radius:6px}
.flutua{position:absolute; left:-58px; top:150px; background:var(--cyan); color:#111; border-radius:14px 0 14px 0; padding:10px 14px; font-size:.86rem; box-shadow:var(--shadow-lg); display:grid; gap:1px; line-height:1.25}
.flutua b{font-family:var(--f-display); font-weight:400; font-size:1rem}

/* ---------- Como funciona ---------- */
.passos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; counter-reset:p}
.passo{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-leaf); padding:30px 26px; display:grid; gap:12px; align-content:start}
.passo .n{font-family:var(--f-display); font-size:3rem; line-height:1; color:transparent; -webkit-text-stroke:1px var(--brand-300)}
.passo h3{font-size:1.4rem}
.passo p{color:var(--fg-muted); font-weight:300; text-wrap:balance}
.passo+.passo::before{content:""; position:absolute; left:-17px; top:50%; width:18px; height:1px; background:var(--line-strong)}
.ganhos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 32px; margin-top:44px; padding-top:40px; border-top:1px solid var(--line)}
.ganho{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start}
.ic{width:40px; height:40px; border-radius:12px 0 12px 0; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:none}
.ic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ganho b{display:block; font-family:var(--f-display); font-weight:400; font-size:1.08rem; margin-bottom:4px}
.ganho p{color:var(--fg-subtle); font-size:.95rem; text-wrap:balance}

/* ---------- Diferenciais ---------- */
.dif{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.dc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-leaf); padding:26px; display:grid; gap:12px; align-content:start}
.dc h3{font-size:1.3rem}
.dc p{color:var(--fg-muted); font-weight:300; text-wrap:balance}
.dc--big{grid-column:span 2; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:center; padding:32px; border-color:rgba(140,147,240,.55)}
.dc--big h3{font-size:1.7rem}
.dc--big .txt{display:grid; gap:14px}
.kbd{display:inline-block; font-family:var(--f-head); font-size:.72rem; letter-spacing:.06em; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:6px; padding:1px 7px; color:var(--fg)}
.mini-trim{background:#1C1C1F; border:1px solid var(--line); border-radius:var(--r-md); padding:16px; display:grid; gap:12px; font-size:13px}
.mini-trim .linha{display:flex; justify-content:space-between; color:var(--fg-subtle); font-variant-numeric:tabular-nums; font-size:12px}
.mini-trim .linha b{color:var(--cyan); font-weight:400}
.mini-trim .trilha{height:46px}
.mini-trim .pp-acoes span{font-size:12px}
.dc--tl .tl{background:#151517; border:1px solid var(--line); border-radius:10px; padding:10px; display:grid; gap:5px; margin-top:4px}
.tl div{height:14px; border-radius:3px; background:#2A2A2E; position:relative}
.tl div span{position:absolute; top:0; bottom:0; border-radius:3px}
.tl .v2 span{left:8%; width:34%; background:#3A3F8F}
.tl .v1 span{left:0; width:30%; background:#3A3F8F}
.tl .v1 span+span{left:30%; width:26%; background:var(--cyan); box-shadow:0 0 0 1px #111}
.tl .a1 span{left:0; width:58%; background:#2E5B4F}
.tl small{color:var(--fg-subtle); font-size:11px; display:flex; justify-content:space-between; gap:10px}
.dc--tl .tl{width:100%}

/* ---------- Antes x depois (dobra clara) ---------- */
.claro{background:#F3F3F3; color:#111; --fg:#111111; --fg-muted:#4A4A4F; --fg-subtle:#7C7C82; --line:rgba(17,17,17,.12); --line-strong:rgba(17,17,17,.28); --accent:#4B55DB; --surface:#F9F9F9; color-scheme:light}
.claro .eyebrow{color:var(--brand)}
.tabela{width:100%; border-collapse:separate; border-spacing:0; background:#F9F9F9; border:1px solid var(--line); border-radius:var(--r-leaf); overflow:hidden; box-shadow:0 1px 2px rgba(17,17,17,.05),0 12px 32px -16px rgba(17,17,17,.22)}
.tabela th{font-family:var(--f-head); font-weight:400; text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; text-align:left; padding:20px 26px; color:var(--fg-muted); border-bottom:1px solid var(--line)}
.tabela th:last-child{background:#111; color:var(--cyan)}
.tabela td{padding:18px 26px; font-size:1.02rem; border-bottom:1px solid var(--line); vertical-align:middle; width:50%}
.tabela tr:last-child td{border-bottom:0}
.tabela td:first-child{color:var(--fg-muted)}
.tabela td:last-child{background:#111; color:#F3F3F3; border-bottom-color:rgba(243,243,243,.1)}
.tabela td span{display:flex; gap:12px; align-items:center}
.x,.v{width:22px; height:22px; border-radius:50%; flex:none; position:relative}
.x{border:1px solid rgba(17,17,17,.3)}
.x::before,.x::after{content:""; position:absolute; left:50%; top:50%; width:9px; height:1.5px; background:#7C7C82; transform:translate(-50%,-50%) rotate(45deg)}
.x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.v{background:var(--cyan)}
.v::after{content:""; position:absolute; left:6px; top:7px; width:9px; height:5px; border-left:2px solid #111; border-bottom:2px solid #111; transform:rotate(-45deg)}
.claro-cta{display:flex; justify-content:center; margin-top:40px}

/* ---------- Sobre o Paulinho ---------- */
.sobre{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center}
.sobre-foto{position:relative; border-radius:var(--r-leaf); overflow:hidden; aspect-ratio:4/4.3; background:#000}
.sobre-foto img{width:100%; height:100%; object-fit:cover; object-position:68% center}
.sobre-foto::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(17,17,17,.85))}
.sobre-foto figcaption{position:absolute; left:24px; right:24px; bottom:22px; z-index:1; display:flex; justify-content:space-between; align-items:end; gap:12px}
.sobre-foto figcaption b{font-family:var(--f-display); font-weight:400; font-size:1.3rem; display:block}
.sobre-foto figcaption small{font-family:var(--f-head); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan)}
.sobre-foto figcaption img{width:44px; height:auto}
.sobre-txt{display:grid; gap:20px}
.sobre-txt h2{font-size:clamp(2rem,4vw,3rem)}
.sobre-txt p:not(.eyebrow){color:var(--fg-muted); font-weight:300; font-size:1.06rem; line-height:1.65}
.citacao{border-left:2px solid var(--cyan); padding:4px 0 4px 20px; display:grid; gap:10px}
.citacao p{font-family:var(--f-display); font-size:1.25rem; line-height:1.4; color:var(--fg); font-weight:400; text-wrap:balance}
.citacao small{font-family:var(--f-head); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-subtle)}
.numeros{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:4px}
.num{background:var(--surface); border:1px solid var(--line); border-radius:14px 0 14px 0; padding:16px; display:grid; gap:4px}
.num b{font-family:var(--f-display); font-weight:400; font-size:1.9rem; line-height:1}
.num small{color:var(--fg-subtle); font-size:.86rem; line-height:1.35; text-wrap:balance}

/* ---------- FAQ ---------- */
.faq-g{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:start}
.faq-g .sec-h{margin-bottom:0; position:sticky; top:100px}
.faq{display:grid; gap:10px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:14px 0 14px 0; transition:border-color .2s}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{list-style:none; cursor:pointer; padding:20px 22px; display:flex; justify-content:space-between; gap:18px; align-items:center; font-family:var(--f-display); font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; width:11px; height:11px; flex:none; border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details p{padding:0 22px 20px; color:var(--fg-muted); font-weight:300; text-wrap:balance}

/* FAQ na dobra clara */
.claro .faq details{background:#F9F9F9; box-shadow:0 1px 2px rgba(17,17,17,.04),0 10px 28px -18px rgba(17,17,17,.25)}
.claro .faq details[open]{border-color:rgba(75,85,219,.45)}
.claro .faq details:hover{border-color:rgba(75,85,219,.45)}
.claro .faq summary{color:#111}
.claro .faq details p{color:#4A4A4F}
.claro .eyebrow{color:var(--brand)}

/* ---------- CTA final + rodapé ---------- */
.final{position:relative; text-align:center; overflow:hidden}
.final::before{content:""; position:absolute; inset:0; background:var(--img-fundo,url(/assets/img/luz-liquida.webp)) center/cover no-repeat; opacity:.38; z-index:-1;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 60%,#000,transparent); mask-image:radial-gradient(60% 70% at 50% 60%,#000,transparent)}
.final-in{display:grid; gap:22px; justify-items:center; max-width:720px; margin:0 auto}
.final h2{font-size:clamp(2.2rem,5vw,3.8rem)}
.final p:not(.eyebrow){color:var(--fg-muted); font-size:1.1rem; font-weight:300; text-wrap:balance}
.rodape{border-top:1px solid var(--line); padding:36px 0 44px}
.rodape-in{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.rodape img{height:28px; width:auto}
.rodape nav{display:flex; gap:22px; flex-wrap:wrap; font-size:.92rem; color:var(--fg-muted)}
.rodape nav a:hover{color:var(--fg)}
.rodape-legal{width:100%; display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; font-size:.82rem; color:var(--fg-subtle); padding-top:22px; border-top:1px solid var(--line)}
.rodape-legal p{max-width:70ch; text-wrap:balance}

/* ---------- Barra fixa no celular ---------- */
.barra{position:fixed; left:0; right:0; bottom:0; z-index:150; padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px)); background:rgba(17,17,17,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); display:none; transform:translateY(110%); transition:transform .3s}
.barra.mostra{transform:none}

/* ---------- Popup ---------- */
.overlay{position:fixed; inset:0; z-index:300; background:rgba(10,10,10,.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:grid; place-items:center; padding:20px; overflow:auto}
.modal{position:relative; width:min(480px,100%); background:var(--surface); color:var(--fg); border:1px solid var(--line); border-radius:var(--r-leaf); box-shadow:var(--shadow-lg); padding:30px; display:grid; gap:12px; animation:entra .25s ease}
@keyframes entra{from{opacity:0; transform:translateY(10px)}}
.fechar{position:absolute; right:14px; top:14px; width:36px; height:36px; border-radius:10px 0 10px 0; border:1px solid var(--line); background:transparent; display:grid; place-items:center; color:var(--fg-muted)}
.fechar:hover{color:var(--fg); border-color:var(--line-strong)}
.fechar svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none}
.modal-topo{display:flex; gap:14px; align-items:center; padding-right:40px}
.modal-topo .ic{width:46px; height:46px}
.modal h3{font-size:1.75rem}
.modal-sub{color:var(--fg-muted); font-weight:300; text-wrap:balance}
#lead{display:grid; gap:14px; margin-top:8px}
.f{display:grid; gap:6px; min-width:0}
.f>label{font-family:var(--f-head); text-transform:uppercase; letter-spacing:.12em; font-size:.6rem; color:var(--fg-muted)}
input,select{font-family:var(--f-body); font-size:1rem; color:var(--fg); background:var(--bg-2); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:12px 13px; width:100%; min-width:0; transition:border-color .2s, box-shadow .2s}
input:focus,select:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(140,147,240,.24)}
input::placeholder{color:var(--fg-subtle)}
.msg{font-style:normal; color:var(--danger); font-size:.84rem}
.msg:empty{display:none}
.campo-erro input{border-color:var(--danger)}
.tel{display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px}
.pais{position:relative; min-width:96px}
.pais-v{display:flex; align-items:center; justify-content:center; gap:6px; height:100%; padding:0 26px 0 12px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--bg-2); font-size:.98rem; white-space:nowrap; pointer-events:none}
.pais-v::after{content:""; position:absolute; right:11px; top:50%; width:7px; height:7px; border-right:1.5px solid var(--fg-subtle); border-bottom:1.5px solid var(--fg-subtle); transform:translateY(-70%) rotate(45deg)}
.pais select{position:absolute; inset:0; opacity:0; cursor:pointer; font-size:16px}
.pais:focus-within .pais-v{border-color:var(--accent); box-shadow:0 0 0 3px rgba(140,147,240,.24)}
.dica-email{font-size:.84rem; color:var(--fg-muted)}
.dica-email button{background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; text-underline-offset:3px; font-size:inherit}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.aceite{font-size:.8rem; color:var(--fg-subtle); text-align:center; text-wrap:balance; line-height:1.5}
.aceite a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.alerta{padding:11px 14px; border-radius:12px 0 12px 0; font-size:.92rem; background:rgba(240,113,120,.12)}

/* ---------- Obrigado ---------- */
.obrigado{position:fixed; inset:0; z-index:500; background:#111; display:grid; place-items:center; padding:20px; overflow:auto; isolation:isolate}
.obrigado::before{content:""; position:absolute; inset:0; background:var(--img-fundo,url(/assets/img/luz-liquida.webp)) center/cover; opacity:.3; z-index:-1; -webkit-mask-image:radial-gradient(55% 60% at 50% 50%,#000,transparent); mask-image:radial-gradient(55% 60% at 50% 50%,#000,transparent)}
.ob{width:min(560px,100%); display:grid; gap:20px; justify-items:center; text-align:center}
.ob .ok{width:64px; height:64px; border-radius:20px 0 20px 0; background:var(--cyan); display:grid; place-items:center}
.ob .ok::after{content:""; width:22px; height:11px; border-left:3px solid #111; border-bottom:3px solid #111; transform:rotate(-45deg) translate(2px,-3px)}
.ob h1{font-size:clamp(2rem,5vw,3rem)}
.ob p{color:var(--fg-muted); font-weight:300; font-size:1.08rem; text-wrap:balance}
.progresso{width:min(320px,100%); height:4px; border-radius:99px; background:var(--line); overflow:hidden}
.progresso i{display:block; height:100%; width:0; background:var(--cyan)}
.progresso.anda i{width:100%; transition:width var(--t,4s) linear}
.ob small{color:var(--fg-subtle); font-size:.86rem; text-wrap:balance}
.ob .marca{margin-bottom:10px}

/* ---------- Responsivo ---------- */
@media (max-width:1020px){
  .hero-in{grid-template-columns:1fr; gap:48px}
  .mock{justify-self:center}
  .flutua{left:-14px}
  .sobre{grid-template-columns:1fr; gap:36px}
  .sobre-foto{aspect-ratio:16/11}
  .faq-g{grid-template-columns:1fr; gap:36px}
  .faq-g .sec-h{position:static}
  .dif{grid-template-columns:1fr 1fr}
  .dc--big{grid-column:span 2}
}
@media (max-width:760px){
  .sec{padding:64px 0}
  .hero{padding:20px 0 64px}
  .hero-bg{inset:-68px 0 auto 0; height:560px; opacity:.4;
    -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%); mask-image:linear-gradient(180deg,#000 30%,transparent 100%); -webkit-mask-composite:source-over; mask-composite:add}
  /* No celular, tudo centralizado; só parágrafos longos ficam à esquerda */
  .hero-txt,.hero-acoes{justify-items:center; text-align:center}
  .tags,.cta-nota{justify-content:center}
  .cta-nota{font-size:.78rem; gap:6px 12px}
  .sec-h{margin-inline:auto; text-align:center; justify-items:center}
  .passos,.ganhos,.dif{grid-template-columns:1fr}
  .passo,.dc{text-align:center; justify-items:center}
  .passo+.passo::before{display:none}
  .ganho{grid-template-columns:1fr; justify-items:center; text-align:center; gap:10px}
  .dc--big{grid-column:auto; grid-template-columns:1fr; padding:26px}
  .dc--big .txt{justify-items:center}
  .tabela th,.tabela td{padding:14px 14px; font-size:.92rem}
  .tabela th{font-size:.58rem; letter-spacing:.12em}
  .tabela td span{flex-direction:column; align-items:flex-start; gap:8px}
  .sobre-txt{text-align:center; justify-items:center}
  .sobre-txt>p:not(.eyebrow){text-align:left}
  .citacao{border-left:0; border-top:2px solid var(--cyan); padding:18px 0 0}
  .numeros{grid-template-columns:1fr 1fr 1fr; width:100%}
  .num{padding:14px 10px; text-align:center}
  .num b{font-size:1.5rem}
  .num small{font-size:.78rem}
  .rodape-in{flex-direction:column; text-align:center}
  .rodape nav{display:grid; grid-template-columns:auto auto; justify-content:center; gap:12px 26px}
  .rodape-legal{justify-content:center; text-align:center}
  .barra{display:block}
  body.tem-barra{padding-bottom:78px}
  .nav .btn{display:none}
  .nav-in{justify-content:center}
  .flutua{display:none}
  .mock{width:100%}
  .modal{padding:26px 20px}
}

/* ---------- Aviso de cookies ---------- */
.cookies{position:fixed; left:20px; bottom:20px; z-index:250; width:min(520px,calc(100% - 40px)); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-leaf); box-shadow:var(--shadow-lg); padding:18px 20px; display:grid; gap:14px}
.cookies p{font-size:.9rem; color:var(--fg-muted)}
.cookies a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.cookies-acoes{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}

/* ---------- Páginas internas ---------- */
.topo-simples{border-bottom:1px solid var(--line)}
.topo-simples-in{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:68px}
.legal{max-width:860px; margin:0 auto; padding:44px max(20px,env(safe-area-inset-left,0px)) 80px}
.legal h1{font-size:clamp(2.1rem,4.4vw,3rem); margin:12px 0 14px}
.legal h2{font-size:1.25rem; margin:32px 0 10px}
.legal p,.legal li{color:var(--fg-muted); font-size:1rem; line-height:1.7}
.legal p+p{margin-top:12px}
.legal ul{padding-left:20px; margin:10px 0; display:grid; gap:4px}
.legal a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.legal b{color:var(--fg); font-weight:600}
.legal p.eyebrow{font-size:.68rem; color:var(--accent); line-height:1.4}
.blockpage{min-height:78vh; display:grid; place-items:center; padding:40px 20px}
.blockpage .box{width:min(560px,100%); display:grid; gap:18px; justify-items:start}
.blockpage h1{font-size:clamp(2rem,4vw,2.8rem)}
.blockpage .lead{color:var(--fg-muted); font-size:1.05rem; font-weight:300}
.contorno{font-family:var(--f-display); font-size:clamp(9rem,22vw,16rem); line-height:.85; letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1.5px rgba(243,243,243,.38)}
.diag-t{width:100%; border-collapse:collapse; margin:20px 0}
.diag-t td{border-bottom:1px solid var(--line); padding:12px 10px; vertical-align:top; color:var(--fg-muted); font-size:.94rem}
.diag-t td:first-child{color:var(--fg); white-space:nowrap; width:1%; padding-left:0}
.pt{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:10px; vertical-align:middle; background:var(--fg-subtle)}
.pt.ok{background:var(--cyan)} .pt.erro{background:var(--danger)}
.diag-acoes{display:flex; gap:10px; flex-wrap:wrap}

.linkbtn{background:none; border:0; padding:0; color:var(--accent); font-family:var(--f-head); text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; display:inline-flex; gap:6px; align-items:center; cursor:pointer}
.linkbtn:hover{text-decoration:underline; text-underline-offset:4px}
.alerta.ok{background:rgba(52,224,224,.12)}
.legal-pg .rodape{margin-top:0}
.diag .pt.neutro{background:var(--fg-subtle)}
@media (max-width:760px){
  .cookies{left:12px; right:12px; bottom:12px; width:auto}
  .cookies-acoes{justify-content:center}
  body.tem-barra .cookies{bottom:90px}
  .topo-simples-in{flex-direction:column; justify-content:center; padding:16px 0}
  .legal h1,.legal>.eyebrow{text-align:center}
  .blockpage .box{justify-items:center; text-align:center}
}

/* =====================================================================
   Movimento. Tudo some com "reduzir movimento" do sistema e sem JavaScript
   a página aparece inteira (as classes de estado só existem com .js).
   ===================================================================== */
:root{--ease:cubic-bezier(.2,.75,.2,1); --ease-out:cubic-bezier(.16,1,.3,1)}

/* Barra de leitura no topo */
.progresso-leitura{position:fixed; left:0; top:0; z-index:260; height:2px; width:100%; background:var(--cyan); transform-origin:0 50%; transform:scaleX(var(--p,0)); pointer-events:none}

/* Topo some ao descer e volta ao subir */
.nav{transition:background .25s, border-color .25s, transform .4s var(--ease)}
.nav.some{transform:translateY(-100%)}

/* Entrada ao rolar */
.js [data-r]{opacity:0; transform:translate3d(0,34px,0); transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out); transition-delay:var(--d,0s); will-change:opacity,transform}
.js [data-r="esq"]{transform:translate3d(-56px,0,0)}
.js [data-r="dir"]{transform:translate3d(56px,0,0)}
.js [data-r="zoom"]{transform:scale(.9)}
.js [data-r="blur"]{filter:blur(12px); transform:translate3d(0,18px,0)}
.js [data-r].vis{opacity:1; transform:none; filter:none}

/* Títulos palavra por palavra */
.js [data-split] .w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .07em .1em; margin:0 -.07em -.1em}
.js [data-split] .wi{display:inline-block; transform:translate3d(0,108%,0) rotate(4deg); transform-origin:0 100%; transition:transform 1.05s var(--ease-out); transition-delay:calc(var(--d,0s) + var(--i,0) * 55ms)}
.js [data-split].vis .wi{transform:none}
.js [data-split][data-r]{opacity:1; transform:none}

/* Luzes de fundo em deriva lenta */
.glow{animation:deriva 22s ease-in-out infinite alternate}
.glow--b{animation-duration:26s; animation-delay:-6s}
.glow--c{animation-duration:30s; animation-delay:-12s}
.glow--d{animation-duration:24s; animation-delay:-3s}
@keyframes deriva{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(90px,-70px,0) scale(1.18)}100%{transform:translate3d(-40px,60px,0) scale(.92)}}

/* Luz que segue o mouse no topo */
.luz-mouse{position:absolute; z-index:-1; left:0; top:0; width:520px; height:520px; border-radius:50%; background:var(--brand); opacity:0; filter:blur(110px); pointer-events:none; transform:translate3d(var(--lx,-999px),var(--ly,-999px),0) translate(-50%,-50%); transition:opacity .6s}
.hero:hover .luz-mouse{opacity:.22}

/* Selo do topo com brilho */
.selo b{position:relative; overflow:hidden}
.selo b::after{content:""; position:absolute; top:-20%; bottom:-20%; width:30%; left:-40%; background:rgba(255,255,255,.65); transform:skewX(-20deg); animation:brilho-selo 4.5s ease-in-out 2s infinite}
@keyframes brilho-selo{0%,70%{left:-40%}100%{left:130%}}

/* Botões: faixa de brilho, anel pulsando e efeito ímã */
.btn{position:relative; overflow:hidden; isolation:isolate; transition:transform .25s var(--ease), filter .2s, background .2s, color .2s, box-shadow .3s}
.btn::after{content:""; position:absolute; z-index:-1; top:-10%; bottom:-10%; width:34%; left:-60%; background:rgba(255,255,255,.22); transform:skewX(-22deg); transition:left .7s var(--ease)}
.btn:hover::after{left:130%}
.btn--brilho::after{animation:brilho 5s ease-in-out 3s infinite}
@keyframes brilho{0%,78%{left:-60%}100%{left:130%}}
.btn:hover{box-shadow:0 14px 34px -14px rgba(75,85,219,.85)}
.btn--cyan:hover{box-shadow:0 14px 34px -14px rgba(52,224,224,.75)}
.pulso{position:relative; display:inline-grid}
.pulso .btn{animation:halo 2.6s var(--ease) infinite}
.pulso .btn:hover{animation-play-state:paused}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(75,85,219,.55)}70%,100%{box-shadow:0 0 0 16px rgba(75,85,219,0)}}
.pulso .btn--cyan{animation-name:halo-cyan}
@keyframes halo-cyan{0%{box-shadow:0 0 0 0 rgba(52,224,224,.5)}70%,100%{box-shadow:0 0 0 16px rgba(52,224,224,0)}}
@keyframes anel{0%{opacity:.7; transform:scale(1)}100%{opacity:0; transform:scale(1.35,1.7)}}
.ima{transform:translate3d(var(--mx,0),var(--my,0),0)}

/* Etiquetas do topo entram uma a uma */
.js .cta-nota i{opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--d,0s) + var(--i,0) * 120ms)}
.js .vis .cta-nota i,.js .cta-nota.vis i{opacity:1; transform:none}
.cta-nota i::before{animation:ponto 2.4s ease-in-out infinite}
.cta-nota i:nth-child(2)::before{animation-delay:.8s}
.cta-nota i:nth-child(3)::before{animation-delay:1.6s}
@keyframes ponto{0%,100%{box-shadow:0 0 0 0 rgba(52,224,224,.6)}50%{box-shadow:0 0 0 5px rgba(52,224,224,0)}}

/* ---------- Painel animado ---------- */
.mock{perspective:1400px}
.janela{transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)); transform-style:preserve-3d; transition:transform .5s var(--ease)}
.js .mock[data-r]{opacity:0; transform:translate3d(70px,0,0) rotateY(-16deg)}
.js .mock[data-r].vis{opacity:1; transform:none}
.flutua{animation:boia 5s ease-in-out infinite}
@keyframes boia{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(0,-10px,0) rotate(1deg)}}
.flutua b{font-variant-numeric:tabular-nums}
.motor i{animation:motor 1.8s ease-in-out infinite}
@keyframes motor{0%,100%{box-shadow:0 0 0 0 rgba(52,224,224,.55)}60%{box-shadow:0 0 0 6px rgba(52,224,224,0)}}
.pp-in{position:relative}
.pp-in .txt::after{content:""; display:inline-block; width:1px; height:1em; margin-left:2px; vertical-align:-2px; background:var(--cyan); animation:pisca .9s steps(1) infinite; opacity:0}
.s-digita .pp-in .txt::after{opacity:1}
@keyframes pisca{50%{visibility:hidden}}
.pp-btn{transition:transform .2s, box-shadow .3s}
.s-colar .pp-btn{animation:aperta .5s var(--ease)}
@keyframes aperta{40%{transform:scale(.9)}100%{transform:none}}
.pp-video,.pp-seg,.pp-row,.pp-trim,.pp-opc,.pp-go{transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.anima .pp-video{opacity:.18; transform:translateY(8px)}
.anima.s-video .pp-video{opacity:1; transform:none}
.pp-thumb::before{content:""; position:absolute; inset:0; background:rgba(255,255,255,.18); transform:translateX(-110%) skewX(-18deg); z-index:1}
.s-video .pp-thumb::before{animation:varre 1.1s var(--ease) .15s}
@keyframes varre{to{transform:translateX(130%) skewX(-18deg)}}
.sel-trecho{transition:left 1.2s var(--ease), width 1.2s var(--ease)}
.anima .sel-trecho{left:6%; width:88%}
.anima.s-trim .sel-trecho{left:38%; width:24%}
.cabeca{transition:left .3s linear}
.s-trim .cabeca{animation:cabeca 2.2s linear infinite}
@keyframes cabeca{from{left:38%}to{left:62%}}
.trilha::before{animation:onda 8s linear infinite}
@keyframes onda{to{background-position:-200px 0}}
.pp-acoes span{transition:background .3s, border-color .3s, color .3s}
.s-mi .pp-acoes span:nth-child(1),.s-mo .pp-acoes span:nth-child(2){background:rgba(52,224,224,.16); border-color:var(--cyan)}
.s-baixar .pp-go{animation:aperta .5s var(--ease)}
.pp-go{position:relative; overflow:hidden}
.pp-go::after{content:""; position:absolute; inset:0; background:rgba(255,255,255,.25); transform:scaleX(0); transform-origin:0 50%}
.s-baixar .pp-go::after{animation:carga 2.4s var(--ease) forwards}
@keyframes carga{to{transform:scaleX(1); opacity:0}}
.pp-fila{transition:opacity .5s var(--ease-out), transform .5s var(--ease-out)}
.anima .pp-fila{opacity:0; transform:translateY(10px)}
.anima.s-baixar .pp-fila{opacity:1; transform:none}
.pp-fila .barra-p{display:block; height:3px; border-radius:99px; background:var(--line); margin-top:6px; overflow:hidden}
.pp-fila .barra-p i{display:block; height:100%; width:var(--pct,0%); background:var(--cyan); transition:width .12s linear}
.s-pronto .pp-fila .barra-p{display:none}
.pp-fila small .pronto{display:none}
.s-pronto .pp-fila small .pronto{display:inline}
.s-pronto .pp-fila small .baixando{display:none}
.pp-fila .ok{transform:scale(.6); opacity:.35; transition:transform .5s cubic-bezier(.3,1.6,.5,1), opacity .3s}
.s-pronto .pp-fila .ok{transform:scale(1); opacity:1}
.s-pronto .flutua{animation:boia 5s ease-in-out infinite, pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{scale:.7}100%{scale:1}}

/* Faixa rolando com os recursos */
.faixa{position:relative; overflow:hidden; padding:26px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.faixa-trilho{display:flex; width:max-content; animation:rola 46s linear infinite}
.faixa:hover .faixa-trilho{animation-play-state:paused}
.faixa-grupo{display:flex; align-items:center; gap:34px; padding-right:34px; flex:none}
.faixa-grupo span{font-family:var(--f-display); font-size:clamp(1.4rem,2.6vw,2.2rem); white-space:nowrap; line-height:1.1}
.faixa-grupo span em{font-style:italic; color:var(--cyan)}
.faixa-grupo img{width:34px; height:auto; opacity:.5; flex:none}
@keyframes rola{to{transform:translate3d(-50%,0,0)}}

/* Cartões: luz que segue o mouse e leve subida */
.passo,.dc,.num,.faq details{transition:transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease)}
.passo,.dc{position:relative; overflow:hidden; isolation:isolate}
.passo::after,.dc::after{content:""; position:absolute; z-index:-1; left:var(--cx,50%); top:var(--cy,50%); width:420px; height:420px; border-radius:50%; background:var(--brand); filter:blur(80px); opacity:0; transform:translate(-50%,-50%); transition:opacity .4s; pointer-events:none}
.passo:hover::after,.dc:hover::after{opacity:.22}
.passo:hover,.dc:hover{transform:translateY(-6px); border-color:rgba(140,147,240,.45); box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.ic{transition:transform .5s cubic-bezier(.3,1.6,.5,1), background .3s, color .3s}
.dc:hover .ic,.ganho:hover .ic{transform:rotate(-8deg) scale(1.12); background:var(--brand); color:#fff}
.js .vis .ic{animation:pop-ic .7s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--d,0s) + .25s)}
@keyframes pop-ic{from{transform:scale(.4) rotate(-20deg); opacity:0}to{transform:none; opacity:1}}

/* Números dos passos se enchem */
.passo .n{background:linear-gradient(90deg,var(--brand-300) 50%,transparent 50%) 100% 0/200% 100% no-repeat; -webkit-background-clip:text; background-clip:text; transition:background-position 1.3s var(--ease-out); transition-delay:calc(var(--d,0s) + .35s)}
.js .passo.vis .n,.passo:hover .n{background-position:0 0}
.js .passo+.passo::before{transform:scaleX(0); transform-origin:0 50%; transition:transform .8s var(--ease-out) calc(var(--d,0s) + .5s)}
.js .passo.vis+.passo.vis::before{transform:none}

/* Destaque do corte: borda respira e o trecho se ajusta sozinho */
.dc--big{animation:respira 4s ease-in-out infinite}
@keyframes respira{0%,100%{box-shadow:0 0 0 0 rgba(75,85,219,0), 0 30px 60px -40px rgba(75,85,219,.5)}50%{box-shadow:0 0 0 4px rgba(75,85,219,.12), 0 30px 70px -30px rgba(75,85,219,.75)}}
.mini-trim .sel-trecho{animation:ajusta 6s var(--ease) infinite}
@keyframes ajusta{0%,100%{left:12%; width:70%}30%,70%{left:38%; width:24%}}
.mini-trim .cabeca{animation:varre-trim 6s linear infinite}
@keyframes varre-trim{0%,28%{left:38%; opacity:0}32%{opacity:1}68%{left:62%; opacity:1}72%,100%{left:62%; opacity:0}}
.mini-trim .pp-acoes span{animation:marca 6s steps(1) infinite}
.mini-trim .pp-acoes span:nth-child(2){animation-name:marca2}
.mini-trim .pp-acoes span:nth-child(3){animation-name:marca3}
@keyframes marca{0%,100%{background:transparent}20%{background:rgba(52,224,224,.16); border-color:var(--cyan)}26%{background:transparent; border-color:var(--line-strong)}}
@keyframes marca2{0%,100%{background:transparent}26%{background:rgba(52,224,224,.16); border-color:var(--cyan)}32%{background:transparent; border-color:var(--line-strong)}}
@keyframes marca3{0%,100%{background:transparent}34%{background:rgba(140,147,240,.16); border-color:var(--accent)}68%{background:transparent; border-color:var(--line-strong)}}

/* Clipe caindo na timeline */
.tl{position:relative}
.tl .v1 span+span{animation:encaixa 4.5s var(--ease) infinite}
@keyframes encaixa{0%,12%{transform:translate3d(0,-30px,0) scale(.9); opacity:0}30%,82%{transform:none; opacity:1}100%{transform:none; opacity:0}}
.tl::after{content:""; position:absolute; top:6px; bottom:22px; left:calc(30% + 10px); width:2px; background:var(--cyan); animation:pisca 1s steps(1) infinite}

/* Tabela: linhas entram, o jeito antigo é riscado e o novo é confirmado */
.js .tabela tbody tr{opacity:0; transform:translate3d(0,16px,0); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay:calc(var(--i,0) * 130ms)}
.js .tabela.vis tbody tr{opacity:1; transform:none}
.risco{position:relative}
.risco::after{content:""; position:absolute; left:0; right:0; top:55%; height:1.5px; background:rgba(17,17,17,.45); transform:scaleX(0); transform-origin:0 50%; transition:transform .7s var(--ease-out); transition-delay:calc(var(--i,0) * 130ms + .5s)}
.js .tabela.vis .risco::after{transform:scaleX(1)}
.no-js .risco::after{transform:scaleX(1)}
.js .tabela .v{transform:scale(0); transition:transform .55s cubic-bezier(.3,1.8,.5,1); transition-delay:calc(var(--i,0) * 130ms + .8s)}
.js .tabela.vis .v{transform:scale(1)}
.tabela tbody tr td:last-child{transition:background .3s}
.tabela tbody tr:hover td:last-child{background:#1A1A1C}
.tabela tbody tr:hover td:first-child{color:#111}

/* Foto do Paulinho abre como cortina e aproxima devagar */
.js .sobre-foto[data-r]{opacity:1; transform:none}
.js .sobre-foto::before{content:""; position:absolute; inset:0; z-index:2; background:#111; transform-origin:100% 50%; transition:transform 1.4s var(--ease-out); pointer-events:none}
.js .sobre-foto.vis::before{transform:scaleX(0)}
.sobre-foto img{transition:transform 2.4s var(--ease-out), scale .8s var(--ease)}
.js .sobre-foto img{transform:scale(1.22)}
.js .sobre-foto.vis img{transform:scale(1)}
.sobre-foto:hover img{scale:1.04}
.citacao{position:relative; border-left-color:transparent}
.citacao::before{content:""; position:absolute; left:-2px; top:0; bottom:0; width:2px; background:var(--cyan); transform:scaleY(0); transform-origin:50% 0; transition:transform 1.1s var(--ease-out) .3s}
.js .citacao.vis::before,.no-js .citacao::before{transform:none}
.num b{font-variant-numeric:tabular-nums}
.num:hover{transform:translateY(-4px); border-color:var(--line-strong)}

/* FAQ abre com altura animada */
.faq details{overflow:hidden}
.faq details:hover{border-color:var(--line-strong); transform:translateX(4px)}
.faq .resp{overflow:hidden}

/* CTA final: fundo em deriva */
.final::before{animation:kb 30s ease-in-out infinite alternate}

/* Popup e obrigado */
.overlay{animation:aparece .3s ease}
@keyframes aparece{from{opacity:0}}
.modal{animation:entra-modal .55s var(--ease-out)}
@keyframes entra-modal{from{opacity:0; transform:translate3d(0,26px,0) scale(.95)}}
#lead>*{animation:sobe .6s var(--ease-out) both; animation-delay:calc(.12s + var(--i,0) * 60ms)}
@keyframes sobe{from{opacity:0; transform:translateY(12px)}}
.modal .ic svg{animation:seta 1.8s ease-in-out infinite}
@keyframes seta{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}
.campo-erro input{animation:treme .4s}
@keyframes treme{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.ob>*{animation:sobe .7s var(--ease-out) both; animation-delay:calc(var(--i,0) * 110ms)}
.ob .ok{position:relative; animation:pop-ok .8s cubic-bezier(.3,1.6,.5,1) both .1s}
.ob .ok::after{display:none}
.ob .ok svg{width:30px; height:30px; fill:none; stroke:#111; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:risca .6s var(--ease-out) .55s forwards}
.ob .ok::before{content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--cyan); animation:anel 2s var(--ease) .6s infinite}
@keyframes pop-ok{from{transform:scale(0) rotate(-30deg)}}
@keyframes risca{to{stroke-dashoffset:0}}

/* Preloader: o símbolo se desenha */
.preloader img{animation:pre-pulsa 1.4s ease-in-out infinite, pre-entra .7s var(--ease-out)}
@keyframes pre-entra{from{transform:scale(.7); opacity:0}}
.preloader.fora img{transform:scale(1.25); transition:transform .4s var(--ease)}

/* Celular: menos efeitos pesados */
@media (hover:none),(max-width:760px){
  .js [data-r="esq"],.js [data-r="dir"]{transform:translate3d(0,30px,0)}
  .js [data-r="blur"]{filter:none}
  .luz-mouse,.passo::after,.dc::after{display:none}
  .js .mock[data-r]{transform:translate3d(0,40px,0)}
  .passo:hover,.dc:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .js [data-r],.js [data-split] .wi,.js .tabela tbody tr,.js .cta-nota i{opacity:1!important; transform:none!important; filter:none!important; clip-path:none!important}
  .js .tabela .v{transform:none}
  .js .tabela .risco::after{transform:scaleX(1)}
  .faixa-trilho{animation:none}
}

/* Páginas do link de download e do descadastro */
.ob .ic-g{width:64px; height:64px; border-radius:20px 0 20px 0; background:var(--brand); color:#fff; display:grid; place-items:center}
.ob .ic-g.off{background:rgba(243,243,243,.08); border:1px solid var(--line); color:var(--fg)}
.ob .ic-g svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ob .meta-l{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; font-family:var(--f-head); text-transform:uppercase; letter-spacing:.14em; font-size:.6rem; color:var(--fg-subtle)}
.ob form{width:min(400px,100%); display:grid; gap:12px; text-align:left}
.ob form label{font-family:var(--f-head); text-transform:uppercase; letter-spacing:.12em; font-size:.6rem; color:var(--fg-muted)}
.ob form input{width:100%; font:inherit; font-size:1rem; color:var(--fg); background:rgba(243,243,243,.06); border:1px solid var(--line-strong); border-radius:10px; padding:12px 14px}
.ob form input:focus{outline:0; border-color:var(--cyan)}
.ob .btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; margin-right:8px; vertical-align:-3px}
.ob .acoes-l{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.ob form.acoes-l{display:flex;width:auto;justify-content:center}