/* =====================================================================
 * HOME: CSS próprio da landing. Não depende de style.css legado.
 *
 * As medidas seguem a home de referência (Tailwind compilado): container de
 * 72rem, breakpoints 640/768/1024/1280, curvas e tempos das transições.
 * Fonte: Metropolis, em /assets/metropolis.css. Verde e gradiente: tokens.css.
 * Cinzas: --t3 é o tom mais baixo que passa de 4.5:1 nas quatro superfícies
 * (4,56:1 sobre #161616). --mt só em título grande, onde o mínimo é 3:1. --t4 só nos
 * rótulos dos mini-painéis ilustrativos: ali é desenho, não texto de leitura.
 * ===================================================================== */

:root{
  --bg:#080808;--sf:#0f0f0f;--sf2:#131313;--sf3:#161616;
  --t1:#d4d4d8;--t2:#a1a1aa;--t3:#7f7f87;--t4:#52525b;--mt:#71717a;
  --ease:cubic-bezier(.25,.46,.45,.94);--spring:cubic-bezier(.34,1.56,.64,1);--tw:cubic-bezier(.4,0,.2,1);
  --sans:Metropolis,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:70px;scroll-behavior:smooth;background:var(--bg)}
/* Em px de propósito: herda igual e pesa mais no corpo pequeno, onde a Metropolis fecha demais. */
body{margin:0;background:var(--bg);color:#fff;font-family:var(--sans);letter-spacing:.3px;overflow-x:clip}
h1,h2,h3,p{margin:0;font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:none}
button,input{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;margin:0}
button{cursor:pointer}
i,em{font-style:normal}
svg{display:block}
.ic{flex-shrink:0}
::selection{background:rgba(var(--br-rgb),.22);color:var(--br)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#ffffff12;border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--br-rgb),.28)}
:focus-visible{outline:2px solid var(--br);outline-offset:2px}
[hidden]{display:none!important}

@keyframes scroll{to{transform:translate(-50%)}}
@keyframes pulse{50%{opacity:.5}}
@keyframes draw-line{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}

/* Entrada por rolagem. O estado oculto só vale com .js: sem JavaScript a página
   aparece inteira, e a prévia do construtor também (ela não recebe .js). */
.js .rv{opacity:0;transform:translateY(var(--y,20px));transition:opacity var(--t,.7s) ease var(--d,0s),transform var(--t,.7s) ease var(--d,0s)}
.js .hero .rv{transition:opacity var(--t,.7s) var(--tw) var(--d,0s),transform var(--t,.7s) var(--tw) var(--d,0s)}
.is-in .rv{opacity:1;transform:none}
.js .rb{opacity:0;filter:blur(8px);transition:filter .8s ease var(--d,0s),opacity .8s ease var(--d,0s)}
.is-in .rb{opacity:1;filter:blur(0)}
.js .bi,.js .tk{opacity:0}
.is-in .bi,.is-in .tk{opacity:1}

.w6{max-width:72rem;margin:0 auto;padding:0 24px}
.w5{max-width:64rem;margin:0 auto;padding:0 24px}
.w3{max-width:48rem;margin:0 auto;padding:0 24px}
.hl{padding:.14em 0;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mt{color:var(--mt)}
.nl{position:relative}
.nl::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--br);transition:width .25s ease}
.nl:hover::after{width:100%}

/* ─── Cabeçalho ─── */
/* A borda já existe transparente no estado parado: sem ela, o transition:all a anima a partir
   da cor do texto e uma linha branca pisca a cada vez que a rolagem cruza o limite. */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .5s var(--tw);background:transparent;border-bottom:1px solid transparent}
.hd.is-st,.hd.is-open{background:rgba(8,8,8,.9);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 1px 24px rgba(0,0,0,.5)}
.hd-w{max-width:72rem;margin:0 auto;padding:0 24px;height:70px;display:flex;align-items:center;justify-content:space-between}
.hd-logo{display:flex;align-items:center;flex-shrink:0;transition:opacity .2s var(--tw)}
.hd-logo:hover{opacity:.75}
.logo-tx{display:block;font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:26px;color:#fff;white-space:nowrap}
.logo-br{color:var(--br)}
.logo-img{display:block;height:26px;width:auto}
.ft-logo .logo-tx{font-size:18px;line-height:22px}
.ft-logo .logo-img{height:22px}
.hd-nav{display:none;align-items:center;gap:2px;padding:4px 6px;border-radius:9999px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .5s var(--tw)}
.hd.is-st .hd-nav{box-shadow:0 0 24px rgba(var(--br-rgb),.04)}
.hd-l{display:flex;align-items:center;gap:4px;padding:6px 16px;font-size:13px;line-height:19.5px;border-radius:9999px;color:var(--t2);transition:color .2s var(--tw);white-space:nowrap}
.hd-l:hover{color:#fff}
.hd-dd{position:relative}
.hd-car{transition:transform .2s var(--tw)}
.hd-dd:hover .hd-car,.hd-dd:focus-within .hd-car{transform:rotate(180deg)}
.hd-pop{position:absolute;top:100%;left:50%;transform:translate(-50%,-4px);padding-top:12px;opacity:0;visibility:hidden;pointer-events:none;transition:all .2s var(--tw)}
.hd-dd:hover .hd-pop,.hd-dd:focus-within .hd-pop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.hd-pop-c{width:600px;max-width:calc(100vw - 2rem);border-radius:16px;border:1px solid rgba(255,255,255,.08);background:var(--sf);box-shadow:0 24px 64px rgba(0,0,0,.6);padding:12px}
.hd-pop-g{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.hd-p{display:flex;gap:12px;padding:12px;border-radius:12px;transition:background-color .2s var(--tw)}
.hd-p:hover{background:rgba(255,255,255,.04)}
.hd-p-i{width:36px;height:36px;border-radius:8px;background:rgba(var(--br-rgb),.1);color:var(--br);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s var(--tw)}
.hd-p:hover .hd-p-i{transform:scale(1.1)}
.hd-p-t{min-width:0;display:block}
.hd-p-t b{display:block;font-size:13px;line-height:19.5px;font-weight:500;color:#fff;transition:color .2s var(--tw)}
.hd-p:hover b{color:var(--br)}
.hd-p-t small{display:block;font-size:11px;line-height:1.375;color:var(--t3);margin-top:2px}
.hd-pop-all{margin-top:4px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.hd-pop-all a{display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px;color:rgba(var(--br-rgb),.8);padding:6px 0;transition:color .2s var(--tw)}
.hd-pop-all a:hover{color:var(--br)}
.hd-act{display:none;align-items:center;gap:8px}
.hd-mob{display:flex;align-items:center;gap:8px}
.hd-loc{position:relative}
.hd-loc-b{display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:9999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--t2);transition:all .2s var(--tw)}
.hd-loc-b:hover{border-color:rgba(255,255,255,.2)}
.hd-loc-b b{font-size:11px;line-height:15px;font-weight:600;color:#fff;letter-spacing:.02em}
.hd-loc-p{position:absolute;top:100%;right:0;margin-top:8px;width:160px;border-radius:12px;background:var(--sf3);border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px rgba(0,0,0,.6);overflow:hidden;z-index:50;opacity:0;visibility:hidden;transform:translateY(-4px) scale(.95);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.hd-loc.on .hd-loc-p{opacity:1;visibility:visible;transform:none}
.hd-loc-i{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(var(--br-rgb),.1);color:var(--br);font-size:12px;font-weight:500}
.hd-loc-i b{font-size:11px;font-weight:600}
.hd-loc-i i{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--br)}
.hd-ent{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9999px;font-size:13px;line-height:19.5px;color:var(--t1);transition:color .2s var(--tw),background-color .2s var(--tw)}
.hd-ent:hover{color:#fff;background:rgba(255,255,255,.05)}
.hd-cta{position:relative;display:block;padding:8px 20px;border-radius:9999px;background:#fff;color:var(--on-br);font-size:13px;line-height:19.5px;font-weight:600;overflow:hidden;flex-shrink:0}
.hd-cta span{position:relative;z-index:1}
.hd-cta i{position:absolute;inset:0;background:var(--br);transform:translateX(-101%);transition:transform .3s var(--tw);border-radius:9999px}
.hd-cta:hover i{transform:none}
.hd-cta:active i{background:var(--br2)}
.hd-tg{color:var(--t2);padding:4px;transition:color .2s var(--tw)}
.hd-tg:hover{color:#fff}
.hd-tg-x,.hd.is-open .hd-tg-o{display:none}
.hd.is-open .hd-tg-x{display:block}
.hd-sh{max-height:0;opacity:0;overflow:hidden;visibility:hidden;transition:all .3s var(--tw)}
.hd.is-open .hd-sh{max-height:min(28rem,calc(100vh - 70px));opacity:1;overflow-y:auto;visibility:visible}
.hd-sh-c{background:var(--sf);border-top:1px solid rgba(255,255,255,.06);padding:16px 24px 24px;display:flex;flex-direction:column;gap:12px}
.hd-sh-c>a{font-size:14px;line-height:20px;padding:4px 0;color:var(--t2);transition:color .2s var(--tw)}
.hd-sh-c>a:hover{color:#fff}
.hd-sh-a{padding-top:12px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.hd-sh-e{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9999px;border:1px solid rgba(255,255,255,.1);color:var(--t1);font-size:14px;font-weight:500}
.hd-sh-c2{display:inline-block;padding:8px 20px;border-radius:9999px;background:#fff;color:var(--on-br);font-size:14px;font-weight:600}

/* ─── Botão verde (hero e chamada final) ─── */
.btn-b{position:relative;display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:9999px;background:var(--br);color:var(--on-br);font-size:14px;line-height:20px;font-weight:600;overflow:hidden;white-space:nowrap;flex-shrink:0;transition:box-shadow .3s var(--tw)}
.btn-b:hover{box-shadow:0 0 28px rgba(var(--br-rgb),.4)}
.btn-b>span,.btn-b>svg{position:relative;z-index:1}
.btn-b>i{position:absolute;inset:0;background:var(--br2);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--tw);border-radius:9999px}
.btn-b:hover>i,.btn-b:active>i{transform:scaleX(1)}
.btn-l{padding:12px 28px}
.btn-l:hover{box-shadow:0 0 32px rgba(var(--br-rgb),.4)}
.btn-l svg{transition:transform .2s var(--tw)}
.btn-l:hover svg{transform:translate(2px,-2px)}
.btn-g{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:9999px;border:1px solid rgba(255,255,255,.1);color:var(--t2);font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;transition:all .2s var(--tw)}
.btn-g:hover{border-color:rgba(255,255,255,.2);color:#fff}

/* ─── Topo ─── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:var(--bg);padding-top:80px}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg i{position:absolute;inset:0;display:block}
.hb-a{background:radial-gradient(ellipse 85% 55% at 50% -10%,rgba(var(--br-rgb),.066),transparent)}
.hb-b{opacity:.55;background-image:linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);background-size:88px 88px}
.hb-c{background:radial-gradient(ellipse 100% 80% at 50% 50%,transparent 35%,#080808 90%)}
.hero-bg .hb-d{top:50%;left:50%;right:auto;bottom:auto;width:500px;height:220px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(var(--br-rgb),.034);filter:blur(80px)}
.hero-w{position:relative;width:100%;max-width:72rem;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:center}
.hero-c{position:relative;z-index:10;text-align:center;max-width:48rem;padding:0 16px}
.h-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:32px;padding:6px 14px;border-radius:9999px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.h-badge>i{width:6px;height:6px;border-radius:50%;background:var(--br);flex-shrink:0}
.h-badge span{font-size:11px;line-height:16.5px;color:var(--t2);letter-spacing:.025em}
/* O selo inteiro não cabe em uma linha abaixo de 640 px: lá entra a versão curta do construtor. */
.h-bd-c{display:none}
@media (max-width:639.98px){.has-c .h-bd-l{display:none}.has-c .h-bd-c{display:inline}}
/* balance mantém a divisão da referência: com a fonte estreita, "para" subiria para a primeira linha. */
.h-t{font-weight:500;font-size:clamp(2.8rem,7vw,5.2rem);line-height:1.02;letter-spacing:-.03em;color:#fff;margin-bottom:24px;text-wrap:balance}
.h-lead{font-size:15px;color:var(--t3);max-width:28rem;margin:0 auto 40px;line-height:1.7}
.h-form{display:flex;flex-direction:column;align-items:center;gap:12px;justify-content:center;max-width:420px;margin:0 auto}
.h-inp{display:flex;flex:1;width:100%;border-radius:9999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow:hidden;transition:all .3s var(--tw)}
.h-inp:focus-within{border-color:rgba(var(--br-rgb),.4);box-shadow:0 0 20px rgba(var(--br-rgb),.1)}
.h-inp input{flex:1;min-width:0;padding:12px 20px;font-size:14px;line-height:20px;color:#fff;outline:0}
.h-inp input::placeholder{color:var(--t3);opacity:1}
.h-bul{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin-top:32px}
.h-bul>span{display:flex;align-items:center;gap:6px}
.h-bul>span>i{width:4px;height:4px;border-radius:50%;background:rgba(var(--br-rgb),.6)}
.h-bul>span>span{font-size:11px;line-height:16.5px;color:var(--t3)}

/* Cartões laterais: sobem na entrada e ficam parados, como na referência. */
.hf{position:absolute;display:none}
.hf-l{left:16px;top:15%}
.hf-r{right:16px;top:10%}
.js .hf{opacity:0;transform:translateY(64px)}
.is-in .hf{opacity:1;transform:none;transition:all 1s var(--tw) .3s}
.is-in .hf-r{transition-delay:.5s}
.hc{position:relative;width:168px}
.hc-card{border-radius:16px;background:var(--sf2);border:1px solid rgba(255,255,255,.09);padding:16px;box-shadow:0 32px 64px rgba(0,0,0,.7)}
.hc-gr{font-size:10px;line-height:15px;color:var(--t4);margin-bottom:2px;font-weight:500}
.hc-nm{font-size:14px;line-height:20px;color:#fff;font-weight:600;margin-bottom:12px}
.hc-box{border-radius:12px;background:linear-gradient(135deg,#181824,#12121a);padding:12px;margin-bottom:12px;border:1px solid rgba(255,255,255,.06)}
.hc-cap{font-size:9px;line-height:13.5px;color:var(--t4);margin-bottom:4px;text-transform:uppercase;letter-spacing:.025em}
.hc-val{font-size:18px;line-height:28px;font-weight:600;color:#fff;letter-spacing:-.025em}
.hc-st{margin-top:10px;display:flex;align-items:center;gap:6px;font-size:9px;line-height:13.5px;color:var(--br);font-weight:500}
.hc-ok{position:relative;width:14px;height:14px;border-radius:50%;background:rgba(var(--br-rgb),.25);flex-shrink:0}
.hc-ok i{position:absolute;inset:4px;border-radius:50%;background:var(--br)}
.hc-ok .pg{inset:0;background:rgba(var(--br-rgb),.2)}
.hc-row{border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);padding:8px 10px;display:flex;align-items:center;gap:8px}
.hc-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,rgba(var(--br-rgb),.3),rgba(var(--br-rgb),.1));flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;color:var(--br)}
.hc-rt{min-width:0}
.hc-rt b{display:block;font-size:9px;line-height:13.5px;color:#fff;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-rt small{display:block;font-size:8px;line-height:12px;color:var(--t4)}
.hc-chip{position:absolute;right:-20px;top:12px;padding:4px 10px;border-radius:9999px;background:var(--br);font-size:10px;line-height:15px;font-weight:700;color:var(--on-br);box-shadow:0 10px 15px -3px rgba(var(--br-rgb),.2);white-space:nowrap}
.hc-foot{margin-top:8px;border-radius:16px;background:var(--sf2);border:1px solid rgba(255,255,255,.06);padding:12px;opacity:.55}
.hc-foot p{display:flex;align-items:center;gap:8px;font-size:9px;line-height:13.5px;color:var(--br)}
.hc-foot p i{width:10px;height:10px;border-radius:50%;background:rgba(var(--br-rgb),.3)}
.hc-foot small{display:block;font-size:10px;line-height:15px;color:var(--t1);margin-top:4px}
.hd2{position:relative;width:168px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.hd2-chip{padding:4px 10px;border-radius:9999px;background:var(--br);font-size:10px;line-height:15px;font-weight:700;color:var(--on-br);margin-right:24px;box-shadow:0 10px 15px -3px rgba(var(--br-rgb),.2)}
.hd2-card{padding:14px;width:100%}
.hd2-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hd2-top span{font-size:9px;line-height:13.5px;color:var(--t3);font-weight:500}
.hd2-top em{font-size:8px;line-height:12px;color:var(--br);background:rgba(var(--br-rgb),.1);padding:2px 6px;border-radius:9999px}
.hd2-bars{display:flex;align-items:flex-end;gap:2px;height:40px;margin-bottom:10px}
.hd2-bars i{flex:1;border-radius:2px;transform-origin:bottom}
.js .hd2-bars i{transform:scaleY(0)}
.is-in .hd2-bars i{transform:scaleY(1);transition:transform .45s var(--spring) var(--d,0ms)}
.hd2-g{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hd2-g>div{background:rgba(255,255,255,.04);border-radius:8px;padding:8px;border:1px solid rgba(255,255,255,.04)}
.hd2-g small{display:block;font-size:8px;line-height:12px;color:var(--t4);margin-bottom:2px}
.hd2-g b{display:block;font-size:11px;line-height:16.5px;font-weight:600;color:#fff}
.hd2-g b.br{color:var(--br)}
.hd2-tk{width:100%;border-radius:12px;background:var(--sf2);border:1px solid rgba(var(--br-rgb),.2);padding:8px 12px;display:flex;align-items:center;gap:8px;box-shadow:0 0 20px rgba(var(--br-rgb),.08)}
.hd2-tk i{width:8px;height:8px;border-radius:50%;background:var(--br);flex-shrink:0}
.hd2-tk span{font-size:9px;line-height:13.5px;color:var(--t1)}

/* Faixa de métodos */
.mq-w{position:relative;width:100%;margin-top:48px;padding-bottom:40px}
.mq-t{text-align:center;font-size:10px;line-height:15px;color:var(--t3);margin-bottom:28px;padding:0 24px;text-transform:uppercase;letter-spacing:.18em}
.mq{position:relative;overflow:hidden}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:112px;z-index:10;pointer-events:none}
.mq::before{left:0;background:linear-gradient(to right,#080808,transparent)}
.mq::after{right:0;background:linear-gradient(to left,#080808,transparent)}
/* O padding fecha a conta do translate(-50%): sem ele a volta do laço salta meio gap. */
.mq-tr{display:flex;align-items:center;gap:48px;padding-right:48px;width:max-content;animation:scroll var(--dur,54.6s) linear infinite}
.mq-i{display:flex;align-items:center;gap:6px;opacity:.6;flex-shrink:0;cursor:default;-webkit-user-select:none;user-select:none;transition:opacity .3s var(--tw)}
.mq-i:hover{opacity:1}
.mq-i svg{color:var(--br)}
.mq-i span{font-size:11px;line-height:16.5px;font-weight:500;white-space:nowrap;color:#c4c4cc}

/* ─── Etiqueta de seção ─── */
.eb{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;vertical-align:top}
.eb-d{position:relative;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(var(--br-rgb),.4);flex-shrink:0}
.eb-d i{width:8px;height:8px;border-radius:50%;background:var(--br)}
.eb-t{font-size:11px;line-height:16.5px;text-transform:uppercase;letter-spacing:.18em;color:var(--br);font-weight:500}

/* ─── Sobre ─── */
.ab{position:relative;padding:64px 0;background:var(--bg);overflow:hidden}
.ab-gl{position:absolute;top:50%;left:50%;width:700px;height:280px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(var(--br-rgb),.034);filter:blur(100px);pointer-events:none}
.ab-w{position:relative;max-width:56rem;margin:0 auto;padding:0 24px;text-align:center}
.ab-t{font-weight:500;font-size:clamp(1.75rem,4.5vw,3.2rem);line-height:1.2;letter-spacing:-.01em;color:#fff}
.ab-t .br{color:var(--br)}
.ab-t .wh{color:#fff}
.ab-g{margin-top:64px;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:1px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.ab-g>div{background:var(--sf);padding:24px;text-align:center;transition:background-color .3s var(--tw)}
.ab-g>div:hover{background:#141414}
.ab-g b{display:block;font-size:24px;line-height:32px;font-weight:500;color:#fff;letter-spacing:-.025em}
.ab-g span{display:block;font-size:12px;line-height:16px;color:var(--t3);margin-top:4px}

/* ─── Seções com grade ─── */
.sx{padding:56px 0;background:var(--bg)}
.sx-h{text-align:center;margin-bottom:56px}
.h2{font-weight:500;font-size:clamp(2rem,4vw,3.25rem);line-height:1.25;letter-spacing:-.01em;color:#fff}
.h2-f{font-size:clamp(2rem,4vw,3rem)}
.bn{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.bn-3{margin-bottom:14px}
.cd{position:relative;border-radius:20px;border:1px solid rgba(255,255,255,.07);overflow:hidden;padding:20px}
.spot{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(var(--br-rgb),.056) 0%,transparent 65%)}
/* translate em vez de transform: a entrada por rolagem usa transform no mesmo elemento. */
.lift{transition:translate .35s var(--ease),box-shadow .35s ease,border-color .35s ease}
.lift:hover{translate:0 -5px;border-color:rgba(var(--br-rgb),.22);box-shadow:0 24px 48px #00000080,0 0 0 1px rgba(var(--br-rgb),.07),0 0 40px rgba(var(--br-rgb),.05)}
.cd-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}
.cd-top2{margin-bottom:8px}
.cd-cap{font-size:11px;line-height:16.5px;color:var(--br);font-weight:600;letter-spacing:.025em;text-transform:uppercase}
.cd-pill{font-size:10px;line-height:15px;color:var(--t3);background:rgba(255,255,255,.04);padding:2px 8px;border-radius:9999px;white-space:nowrap}
.cd-pill-g{color:var(--br);background:rgba(var(--br-rgb),.1)}
.cd-t{font-size:14px;line-height:20px;font-weight:600;color:#fff;margin-bottom:4px}
/* 13 px na Metropolis ocupa o mesmo que 12 px na fonte da referência: mesma entrelinha, mesmas quebras. */
.cd-d{font-size:13px;line-height:19.5px;letter-spacing:0;color:var(--t3)}
.f-bars{display:flex;align-items:flex-end;gap:3px;height:96px}
.f-bars i{flex:1;border-radius:3px;transform-origin:bottom}
.js .f-bars i{transform:scaleY(0)}
.is-in .f-bars i{transform:scaleY(1);transition:transform .5s var(--spring) var(--d,0ms)}
.f-axis{display:flex;justify-content:space-between;font-size:10px;line-height:15px;color:var(--t4);margin:8px 0 16px}
.f-nt{margin-bottom:16px;border-radius:12px;background:var(--sf3);border:1px solid rgba(255,255,255,.06);padding:14px}
.f-nt-r{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.f-nt-i{position:relative;margin-top:2px;width:24px;height:24px;border-radius:8px;background:rgba(var(--br-rgb),.12);color:var(--br);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.f-nt-i i{position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--br)}
.f-nt-k{font-size:10px;line-height:15px;color:var(--t4);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.f-nt-t{font-size:12px;line-height:16px;font-weight:600;color:#fff}
.f-nt-h{font-size:10px;line-height:15px;color:var(--t4);margin-top:2px}
.f-nt-l{border-top:1px solid rgba(255,255,255,.05);padding-top:12px}
.f-nt-l i{display:block;height:6px;border-radius:9999px;background:rgba(255,255,255,.06);width:75%;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.f-nt-l i+i{margin-top:8px;width:50%;background:rgba(255,255,255,.04);animation:none}
.f-ln{height:96px;margin-bottom:16px}
.f-ln svg{width:100%;height:100%}
.js .f-ln-p{stroke-dasharray:600;stroke-dashoffset:600}
.is-in .f-ln-p{stroke-dashoffset:0;animation:draw-line 1.4s ease}
.js .f-ln-d{opacity:0}
.is-in .f-ln-d{opacity:1;transition:opacity .3s 1.3s}
.f-ln-d,.f-ln-g{fill:var(--br)}
.cd-h{display:flex;gap:32px}
.cd-h-t{flex:1;min-width:0}
.cd-pre{white-space:pre-line;line-height:1.375;margin-bottom:8px}
.cd-h .cd-d{margin-top:8px}
.f-tl{display:grid;grid-template-columns:repeat(3,40px);gap:8px;flex-shrink:0;align-self:center}
.f-tl span{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}
.js .f-tl span{transform:scale(0);opacity:0}
.is-in .f-tl span{transform:scale(1);opacity:1;transition:transform .4s var(--spring) var(--d,0ms),opacity .3s var(--d,0ms)}
.f-av{position:relative;display:flex;align-items:center;flex-shrink:0;padding:0 8px 28px 0;align-self:center}
.f-av-r{display:flex}
.f-av-r span{width:40px;height:40px;border-radius:50%;border:2px solid var(--sf);display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px;font-weight:600;color:#fff}
.f-av-r span+span{margin-left:-12px}
.js .f-av-r span{transform:translateX(20px);opacity:0}
.is-in .f-av-r span{transform:none;opacity:1;transition:transform .5s var(--ease) var(--d,0ms),opacity .4s var(--d,0ms)}
.av-a{background:linear-gradient(to bottom right,#f87171,#e11d48)}
.av-b{background:linear-gradient(to bottom right,#38bdf8,#1d4ed8)}
.av-c{background:linear-gradient(to bottom right,#fbbf24,#ea580c)}
.av-d{background:linear-gradient(to bottom right,#71717a,#3f3f46)}
.f-av-c{position:absolute;bottom:0;right:0;padding:4px 10px;border-radius:9999px;background:var(--br);font-size:10px;line-height:15px;font-weight:700;color:var(--on-br);box-shadow:0 10px 15px -3px rgba(var(--br-rgb),.2)}

/* ─── Soluções ─── */
.sl-g{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.sl{padding:24px}
/* Como na referência: a entrada ocupa a transição do cartão, então borda e sombra do hover
   trocam secas, e o cartão não sobe. */
.js .sl.rv{transition:opacity .6s ease var(--d,0s),transform .6s var(--ease) var(--d,0s)}
.sl.lift:hover{translate:none}
.sl-ar{position:absolute;top:16px;right:16px;color:var(--br);opacity:0;transform:translate(6px,-6px);transition:all .3s var(--tw)}
.sl:hover .sl-ar{opacity:1;transform:none}
.sl-ln{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(var(--br-rgb),.3),transparent);opacity:0;transition:opacity .5s var(--tw)}
.sl:hover .sl-ln{opacity:1}
.sl-i{width:48px;height:48px;border-radius:12px;background:rgba(var(--br-rgb),.09);border:1px solid rgba(var(--br-rgb),.14);color:var(--br);display:flex;align-items:center;justify-content:center;margin-bottom:24px;transition:all .3s var(--tw)}
.sl:hover .sl-i{background:rgba(var(--br-rgb),.18);transform:scale(1.1);border-color:rgba(var(--br-rgb),.3)}
.sl-i svg{transition:transform .3s var(--tw)}
.sl:hover .sl-i svg{transform:rotate(6deg)}
.sl h3{font-size:13px;line-height:1.375;font-weight:600;color:#fff;margin-bottom:8px}
.sl p{font-size:13px;line-height:19.5px;letter-spacing:0;color:var(--t3)}

/* ─── Faixa de 3 colunas ─── */
.tm{padding:48px 0;background:var(--bg);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.tm-g{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.tm-c{display:flex;flex-direction:column;align-items:center;text-align:center;cursor:default}
.tm-k{font-size:12px;line-height:16px;font-weight:600;color:var(--t3);margin-bottom:24px;text-transform:uppercase;letter-spacing:.18em;transition:color .3s var(--tw)}
.tm-c:hover .tm-k{color:var(--t1)}
.tm-s{display:flex;gap:2px;margin-bottom:20px;color:var(--br)}
.js .tm-s span{opacity:0}
.is-in .tm-s span{opacity:1}
.tm-q{font-size:13px;line-height:1.75;color:var(--t2);margin-bottom:24px;max-width:260px;transition:color .3s var(--tw)}
.tm-c:hover .tm-q{color:var(--t1)}
.tm-l{display:block;width:32px;height:1px;background:rgba(var(--br-rgb),.3);margin-bottom:20px;transition:all .4s var(--tw)}
.tm-c:hover .tm-l{width:56px;background:rgba(var(--br-rgb),.5)}
.tm-n{font-size:14px;line-height:20px;font-weight:600;color:#fff}
.tm-r{font-size:12px;line-height:16px;color:var(--t3);margin-top:2px}

/* ─── Números ─── */
.st{padding:48px 0;background:var(--bg)}
.st-g{display:grid;grid-template-columns:minmax(0,1fr)}
.st-c{text-align:center;padding:0 24px}
.st-c+.st-c{border-top:1px solid rgba(255,255,255,.06)}
.js .st-c{opacity:0;transform:scale(.75) translateY(12px);filter:blur(6px)}
.is-in .st-c{opacity:1;transform:none;filter:blur(0);transition:opacity .7s ease var(--d,0ms),transform .7s var(--spring) var(--d,0ms),filter .7s ease var(--d,0ms)}
.st-v{font-weight:500;font-size:48px;line-height:1;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.st-b{display:flex;justify-content:center;margin:16px 0 12px}
.st-b i{height:1px;width:36px;background:rgba(var(--br-rgb),.5);border-radius:9999px}
.js .st-b i{width:0}
.is-in .st-b i{width:36px;transition:width .9s ease var(--d2,0ms)}
.st-l{font-size:14px;line-height:1.625;color:var(--t3);max-width:160px;margin:0 auto}

/* ─── Perguntas frequentes ─── */
.fq-h{margin-bottom:48px}
.fq-i{border-bottom:1px solid rgba(255,255,255,.06)}
.fq-i:last-child{border-bottom:0}
.fq-b{width:100%;display:flex;align-items:center;justify-content:space-between;padding:20px 0;text-align:left;cursor:pointer}
.fq-q{font-size:13px;line-height:1.625;padding-right:32px;color:var(--t1);transition:color .2s var(--tw)}
.fq-b:hover .fq-q,.fq-b[aria-expanded=true] .fq-q{color:#fff}
.fq-x{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--t3);transition:all .3s var(--tw)}
.fq-b:hover .fq-x{border-color:rgba(255,255,255,.3)}
.fq-b[aria-expanded=true] .fq-x{transform:rotate(45deg);border-color:rgba(var(--br-rgb),.5);background:rgba(var(--br-rgb),.1);color:var(--br)}
/* max-height como na referência: até 280 px o tempo de abrir é o dela. Resposta mais alta
   grava a própria altura em --fq-h (home.js) e abre inteira. */
.fq-p{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease),opacity .3s ease}
.fq-p p{padding-bottom:20px;font-size:14px;line-height:1.75;color:var(--t3);transform:translateY(6px);transition:transform .3s ease}
.fq-b[aria-expanded=true]+.fq-p{max-height:max(280px,var(--fq-h,280px));opacity:1}
.fq-b[aria-expanded=true]+.fq-p p{transform:none}
.fq-f{margin-top:40px}
.fq-f p{font-size:14px;line-height:20px;color:var(--t3)}
.fq-f a{color:var(--t1);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#3f3f46;transition:all .2s var(--tw)}
.fq-f a:hover{color:var(--br);text-decoration-color:rgba(var(--br-rgb),.4)}

/* ─── Chamada final ─── */
.ct{background:var(--bg);overflow:hidden}
.ct-c{position:relative;border-radius:40px 40px 0 0;background:var(--sf);border:1px solid rgba(255,255,255,.07);border-bottom:0;padding:64px 32px 0;text-align:center;overflow:hidden}
.ct-g{position:absolute;inset:0;background:radial-gradient(ellipse 55% 35% at 50% 0%,rgba(var(--br-rgb),.06),transparent);pointer-events:none}
.ct-t{position:absolute;top:0;left:50%;width:50%;height:1px;transform:translateX(-50%);background:linear-gradient(to right,transparent,rgba(var(--br-rgb),.4),transparent)}
.ct-k{position:relative;font-size:10px;line-height:15px;text-transform:uppercase;letter-spacing:.18em;color:var(--t3);margin-bottom:16px}
.ct-h{position:relative;font-weight:500;font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.25;letter-spacing:-.02em;color:#fff;margin-bottom:16px}
.ct-d{position:relative;font-size:14px;color:var(--t3);max-width:380px;margin:0 auto 40px;line-height:1.75}
.ct-b{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:64px}
.ct-s{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 32px;padding-bottom:48px}
.ct-s span{font-size:12px;line-height:16px;color:var(--t3);font-weight:500}

/* ─── Rodapé ─── */
.ft{background:var(--bg);border-top:1px solid rgba(255,255,255,.05)}
.ft-w{padding-top:40px;padding-bottom:40px}
.ft-top{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:32px}
.ft-logo{display:flex;align-items:center;flex-shrink:0;opacity:.6;transition:opacity .2s var(--tw)}
.ft-logo:hover{opacity:1}
.ft-n{display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.ft-n2{gap:8px 28px}
.ft-n a,.ft-n button{font-size:12px;line-height:16px;color:var(--t3);transition:color .2s var(--tw)}
.ft-n .nl::after{display:none}
.ft-n a:hover,.ft-n button:hover{color:var(--t1)}
.ft-dc{font-size:11px;line-height:1.7;color:var(--t3);max-width:280px}
.ft-mid,.ft-bot{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.04)}
.ft-k{font-size:10px;line-height:15px;color:var(--t3);text-transform:uppercase;letter-spacing:.18em;margin-bottom:12px}
.ft-bot{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:32px}
.ft-c{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;text-align:center;font-size:11px;line-height:16.5px;color:var(--t3)}
.ft-c a{transition:color .2s var(--tw)}
.ft-c a:hover{color:var(--t1)}
.ft-so div{display:flex;align-items:center;gap:8px}
.ft-so a{width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;color:var(--t2);transition:all .2s var(--tw)}
.ft-so a:hover{color:#fff;border-color:rgba(var(--br-rgb),.4)}

/* ─── Aviso de cookies ─── */
.ck{position:fixed;z-index:70;bottom:16px;left:16px;right:16px;opacity:0;transform:translateY(16px);pointer-events:none;transition:all .5s cubic-bezier(0,0,.2,1)}
.ck.on{opacity:1;transform:none;pointer-events:auto}
.ck-c{position:relative;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(15,15,15,.95);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.ck-x{position:absolute;top:16px;right:16px;color:var(--t3);transition:color .2s var(--tw)}
.ck-x:hover{color:var(--t1)}
.ck-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ck-h span{width:32px;height:32px;border-radius:8px;background:rgba(var(--br-rgb),.1);color:var(--br);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ck-h h2{font-size:15px;line-height:22.5px;font-weight:600;color:#fff}
.ck-t{font-size:13px;line-height:1.625;color:var(--t2)}
.ck-t a{color:var(--br);text-decoration:underline;text-underline-offset:2px}
.ck-t a:hover{color:var(--br2)}
.ck-b{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.ck-y,.ck-n{flex:1;padding:10px 20px;border-radius:9999px;font-size:13px;line-height:19.5px;font-weight:600;transition:all .3s var(--tw)}
.ck-y{background:var(--br);color:var(--on-br)}
.ck-y:hover,.ck-y:active{background:var(--br2);box-shadow:0 0 28px rgba(var(--br-rgb),.22)}
.ck-n{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--t1)}
.ck-n:hover{color:#fff;border-color:rgba(255,255,255,.2)}
.ck-f{margin-top:14px;font-size:11px;line-height:1.625;color:var(--t3)}

/* ─── Metropolis: alinhamento pela tinta ───
   A maiúscula sobe na caixa de linha: medido por pixel a 4x, o centro da tinta ficava
   de 0,75 a 1,5 px acima do centro do ícone ou da pílula, com tudo em align-items:center.
   text-box-trim resolveria sem conta, mas ainda não vale em todo navegador. */
.hd-l{padding:7px 16px 5px}
.hd-ent span,.hd-cta span,.eb-t,.h-badge span,.cd-cap,.fq-q,.ck-h h2,.mq-i span,.hd2-tk span,.hc-st span,.hc-foot p span,.h-bul>span>span{position:relative;top:1px}
.btn-b>span{top:.5px}
.h-inp input{padding:13px 20px 11px}
.cd-pill{padding:3px 8px 1px}
.hc-chip,.hd2-chip,.f-av-c{padding:5px 10px 3px}
.hd2-top em{padding:3px 6px 1px}
.ck-y,.ck-n{padding:11px 20px 9px}
.hd-sh-e{padding:9px 16px 7px}
.hd-sh-c2{padding:9px 20px 7px}

/* ─── Breakpoints ─── */
@media (min-width:640px){
  .h-form{flex-direction:row}
  .sl-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-bot{flex-direction:row;align-items:flex-start}
  .ft-c{flex:1;flex-direction:row;justify-content:space-between;gap:24px;text-align:left}
  .ck{left:24px;right:auto;bottom:24px;max-width:420px}
  .ck-b{flex-direction:row}
}
@media (min-width:768px){
  .ab{padding:96px 0}
  .sx{padding:80px 0}
  .bn-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bn-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-g{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tm-g{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .st{padding:64px 0}
  .st-g{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
  .st-c+.st-c{border-top:0;border-left:1px solid rgba(255,255,255,.06)}
  .st-v{font-size:4.5rem}
  .ct-c{padding-left:64px;padding-right:64px}
  .ft-top{flex-direction:row;align-items:center}
}
/* O menu em pílula só cabe inteiro a partir de 1024; abaixo disso vai para a gaveta. */
@media (min-width:1024px){
  .hd-nav,.hd-act{display:flex}
  .hd-mob,.hd-sh{display:none}
  .hf{display:block}
}
/* Sem text-wrap:balance, até 1070 a primeira linha do título abrigaria mais uma palavra e
   invadiria os cartões: nesses navegadores ele fica no vão entre eles. */
@supports not (text-wrap:balance){
  @media (min-width:1024px) and (max-width:1069.98px){
    .hero-c{max-width:calc(100% - 408px)}
    .h-t{font-size:5.6vw}
  }
}
/* A logo tem 108 px: na largura mínima do menu em pílula ela encostaria nele. */
@media (min-width:1024px) and (max-width:1099.98px){
  .hd-l{padding-left:11px;padding-right:11px}
}
@media (min-width:1280px){
  .hf-l{left:0}
  .hf-r{right:0}
}
@media (max-width:767.98px){
  .cd-h{gap:20px}
}
@media (max-width:359.98px){
  .hero-c{padding:0}
  .h-t{font-size:2.3rem}
  .cd-h{flex-direction:column;gap:16px}
  .f-tl,.f-av{align-self:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}