/* =====================================================================
ASTRO REDE — páginas públicas (landing, login, cadastro, recuperar)
Folha COMPLETA e independente: traz os próprios tokens.
NÃO carregue painel.css junto — as duas têm classes com o mesmo nome
(.cta, .nav, .brand, .card, .btn, .inp...) e uma quebra a outra.
===================================================================== */
html{scroll-behavior:smooth}
/* ============ TOKENS (mesmos do dashboard) ============ */
*{box-sizing:border-box;margin:0;padding:0}
/* Superfícies TRANSLÚCIDAS, e não painéis opacos: no hero, o cartão
deixa a animação de fundo passar por baixo, e é isso que dá
profundidade. Um card preto sólido mataria o efeito. */
html{
--bg:#050507;--panel:#0a0a0f;
--card:rgba(255,255,255,.025);--card-2:rgba(255,255,255,.05);
--field:rgba(255,255,255,.04);--field-2:rgba(255,255,255,.07);
--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);--line-3:rgba(255,255,255,.24);
--fg:#f0f0f5;--fg-2:rgba(240,240,245,.72);
--muted:rgba(240,240,245,.5);--muted-2:rgba(240,240,245,.35);
--accent:#fff;--accent-fg:#050507;
--green:#4ade80;--green-2:#4ade80;--green-bg:rgba(74,222,128,.09);--green-bd:rgba(74,222,128,.22);
--red:#ef4444;--red-bg:rgba(239,68,68,.10);--red-bd:rgba(239,68,68,.24);
--amber:#fbbf24;--amber-bg:rgba(251,191,36,.10);--amber-bd:rgba(251,191,36,.24);
--r-sm:8px;--r-md:10px;--r-lg:14px;--r-xl:18px;
--sh-1:0 1px 2px rgba(0,0,0,.5);
--sh-2:0 24px 80px rgba(0,0,0,.45);
--ring:0 0 0 3px rgba(255,255,255,.14);
--ease:cubic-bezier(.22,1,.36,1);
--max:1180px;
--mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
color-scheme:dark;
}
html[data-theme="light"]{
--bg:#f6f7f9;--panel:#fff;--card:#fff;--card-2:#f9fafb;--field:#f1f2f4;--field-2:#e9eaee;
--line:#e8e9ed;--line-2:#dcdde3;--line-3:#c9cad2;
--fg:#101828;--fg-2:#364153;--muted:#6a7282;--muted-2:#99a1af;
--accent:#101828;--accent-fg:#fff;
--green:#00a544;--green-2:#008138;--green-bg:rgba(0,165,68,.09);--green-bd:rgba(0,165,68,.20);
--red:#e40014;--red-bg:rgba(228,0,20,.08);--red-bd:rgba(228,0,20,.18);
--amber:#cd8900;--amber-bg:rgba(205,137,0,.10);--amber-bd:rgba(205,137,0,.22);
--sh-1:0 1px 2px rgba(16,24,40,.05);
--sh-2:0 10px 30px -10px rgba(16,24,40,.16);
--ring:0 0 0 3px rgba(16,24,40,.10);
color-scheme:light;
}
body{font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--fg);
font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit}
:focus-visible{outline:none;box-shadow:var(--ring)}
/* Números e rótulos técnicos em mono, como no resto do sistema visual:
é o que faz um valor parecer medido em vez de escrito. */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.mono{font-family:var(--mono);letter-spacing:-.01em}
img,svg{display:block;max-width:100%}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--line-3)}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ============ BASE ============ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.view{display:none}
.view.on{display:block}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:42px;height:42px;flex:0 0 auto;display:flex;align-items:center;
justify-content:center;background:none;border-radius:0;box-shadow:none}
.brand .mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand .wm{height:30px;width:auto;display:none}
html[data-theme="dark"] .brand .wm.dk{display:block}
html[data-theme="light"] .brand .wm.lt{display:block}
/* Agora sao dois arquivos de verdade — branco e quase-preto — e nao um
arquivo invertido por filtro. O invert so funcionava enquanto a arte
fosse monocromatica; com dois arquivos a marca pode ganhar cor sem
que nada aqui precise mudar. */
.brand{gap:0}
footer .brand .wm{height:26px}
.brand b{font-size:17.5px;font-weight:800;letter-spacing:.4px;line-height:1.1;display:block}
.brand small{font-size:8.5px;letter-spacing:4.5px;color:var(--muted-2);display:block;margin-top:3px}
.btn{background:var(--accent);color:var(--accent-fg);border:0;border-radius:var(--r-md);padding:14px 22px;
font:700 15.5px/1 inherit;cursor:pointer;box-shadow:var(--sh-1);
transition:filter .15s,transform .12s var(--ease);
display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:hover{filter:brightness(.92)}.btn:active{transform:scale(.99)}
.btn svg{width:16px;height:16px}
.btn.sec{background:var(--card-2);color:var(--fg);border:1px solid var(--line);box-shadow:none}
.btn.sec:hover{filter:none;border-color:var(--line-3)}
.btn.sm{padding:11px 18px;font-size:14px}
.btn.lg{padding:16px 28px;font-size:16px}
.btn.full{width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;border-radius:99px;
padding:5px 12px;background:var(--card-2);border:1px solid var(--line);color:var(--muted)}
.chip.up{background:var(--green-bg);border-color:var(--green-bd);color:var(--green-2)}
.chip.am{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber)}
.chip svg{width:12px;height:12px}
/* CARTÃO SEM SOMBRA, COM MAIS AR
A sombra saiu porque não fazia trabalho nenhum: no preto puro não há
para onde escurecer, então `--sh-1` gastava uma propriedade para
render nada. Quem separa o cartão do fundo é a borda.
E o respiro subiu de 24 para 32px. É a mudança que mais muda a
impressão de acabamento -- conteúdo colado na borda é o que faz um
bloco parecer apertado, mesmo quando todo o resto está certo. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
color:var(--muted-2);margin-bottom:12px}
.sec-h{max-width:660px;margin:0 auto 44px;text-align:center}
/* O teto caiu de 40 para 32px. Título de seção competindo em tamanho
com o do hero achata a hierarquia: se tudo grita, nada é manchete.
O espaçamento virou relativo pelo mesmo motivo do título principal --
-1.2px fixo é proporção errada quando o corpo encolhe no celular. */
.sec-h h2{font-size:clamp(24px,3.2vw,32px);font-weight:800;letter-spacing:-.032em;line-height:1.2}
.sec-h p{font-size:16.5px;color:var(--muted);margin-top:14px;line-height:1.65}
section{padding:88px 0}
.divide{border-top:1px solid var(--line)}
/* SELO DE ÍCONE REAPROVEITÁVEL
O mesmo desenho do `.step .n`, disponível para qualquer bloco que
precise de um ícone com peso. Uso:
CHAMA-SE `selo` E NÃO `ico` PORQUE `.ico` JÁ EXISTE aqui embaixo --
é o botão redondo do menu, no cabeçalho. Duas regras com o mesmo
nome não dão erro: a de baixo vence nas propriedades que declara e a
de cima vaza o resto. O hambúrguer teria virado um círculo de 48px
sem ninguém entender por quê.
O SVG é forçado a 20px aqui dentro: ícone solto vem em tamanhos
diferentes conforme de onde foi copiado, e um selo com ícones de
tamanhos diferentes denuncia a colagem na hora. */
.selo{width:48px;height:48px;flex:0 0 auto;border-radius:99px;background:var(--field-2);
display:flex;align-items:center;justify-content:center;color:var(--fg);margin-bottom:16px}
.selo svg{width:20px;height:20px}
/* Variantes de cor, para quando o ícone precisa dizer o que é: verde
para ganho, âmbar para atenção. Sem exagero -- três selos coloridos
na mesma seção viram enfeite e param de significar. */
.selo.ok{background:var(--green-bg);color:var(--green-2)}
.selo.am{background:var(--amber-bg);color:var(--amber)}
/* 24px entre cartões, e não 18. Com o respiro interno em 32px, um
vão de 18 fazia os cartões parecerem grudados: o espaço ENTRE dois
blocos precisa competir com o espaço DENTRO deles, senão a grade lê
como um bloco só cortado por linhas. */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ============ TOPBAR ============ */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--bg) 86%,transparent);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav-in{display:flex;align-items:center;gap:14px;height:72px}
.nav-l{display:flex;align-items:center;gap:4px;margin-left:34px}
.nav-l a{padding:9px 13px;border-radius:var(--r-sm);font-size:14.5px;font-weight:500;color:var(--muted);
transition:background .15s,color .15s}
.nav-l a:hover{background:var(--card-2);color:var(--fg)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:9px}
.ico{background:none;border:1px solid transparent;color:var(--muted);cursor:pointer;display:flex;
padding:9px;border-radius:var(--r-sm);transition:background .15s,color .15s}
.ico:hover{background:var(--card-2);color:var(--fg)}
.ico svg{width:19px;height:19px}
.burger{display:none}
@media(max-width:900px){
.nav-l{display:none}
.burger{display:flex}
/* O "Entrar" ficava escondido aqui e o menu antigo não o trazia de volta:
no celular não havia por onde entrar na conta. Agora ele vive no menu. */
.nav-r .hide-sm{display:none}
}
/* ============ MENU DE CELULAR (tela cheia) ============ */
.mmenu{position:fixed;inset:0;z-index:95;background:var(--panel);
display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
opacity:0;transform:translateX(-14px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.mmenu.on{opacity:1;transform:none}
.mmenu[hidden]{display:none}
.mmenu-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:20px 22px 18px;position:sticky;top:0;background:var(--panel);z-index:1}
.mmenu-top b{font-size:19px;font-weight:700;letter-spacing:-.2px}
.mmenu-l{display:flex;flex-direction:column;padding:8px 12px 30px}
.mmenu-l a{display:flex;align-items:center;gap:15px;padding:15px 14px;border-radius:var(--r-md);
font-size:16px;font-weight:500;color:var(--fg);transition:background .15s}
.mmenu-l a:active{background:var(--card-2)}
.mmenu-l a svg{width:20px;height:20px;flex:0 0 auto;color:var(--muted)}
.mmenu-sep{height:1px;background:var(--line);margin:10px 14px}
html.mmenu-aberto,html.mmenu-aberto body{overflow:hidden}
@media(min-width:901px){ .mmenu{display:none} }
@media(prefers-reduced-motion:reduce){ .mmenu{transition:none} }
/* ============ HERO ============ */
.hero::before{z-index:1}
.hero-in{z-index:2}
.hero{padding:78px 0 76px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% 20% auto;height:520px;pointer-events:none;
background:radial-gradient(closest-side,rgba(255,255,255,.055),transparent 72%)}
html[data-theme="light"] .hero::before{background:radial-gradient(closest-side,rgba(16,24,40,.05),transparent 72%)}
/* A LARGURA DO HERO É DITADA PELO TÍTULO
Eram 800px, e o título em `nowrap` passava de 1000. Com o
`overflow:hidden` do .hero, a primeira linha era CORTADA nas duas
pontas -- o que lia como texto mal centralizado, e não como texto
grande demais. O sintoma não apontava para a causa.
1040px é o que cabe a linha mais longa (~864px a 60px de corpo) com
folga dos dois lados. */
.hero-in{position:relative;text-align:center;max-width:1040px;margin:0 auto}
/* O parágrafo NÃO acompanha essa largura. Linha de texto corrido acima
de ~70 caracteres cansa: o olho perde o começo da linha seguinte.
Quem precisava de espaço era o título, não a explicação. */
.hero .sub{max-width:660px;margin-left:auto;margin-right:auto}
/* DUAS LINHAS, SEMPRE — E O QUE ISSO CUSTA
O `nowrap` é o que garante: cada uma das duas partes ocupa uma linha
e não quebra sozinha, aconteça o que acontecer com a largura.
Só que texto que não quebra precisa CABER, então o tamanho passa a
acompanhar a tela quase até o fim. O piso caiu de 36px para 17px --
num celular estreito o título fica bem menor do que ficava. É a troca
direta: ou ele encolhe, ou vira três linhas. Não há terceira saída
com este texto.
Se em algum aparelho ficar pequeno demais, o caminho não é mexer
nestes números (aumentar o piso traz a barra de rolagem horizontal de
volta) -- é encurtar a primeira linha. Cada caractere a menos permite
um corpo maior em todas as telas.
O ESPAÇAMENTO ENTRE LETRAS VIROU RELATIVO. Era -2.2px fixo, pensado
para 60px. A 17px isso seria -13% do corpo, e as letras se
atropelariam. Em `em` a proporção é a mesma em qualquer tamanho:
-.037em dá exatamente os mesmos -2.2px quando o título está em 60px. */
/* DUAS LINHAS TRAVADAS SÓ NO COMPUTADOR
No celular o título volta a quebrar sozinho e mantém um corpo
legível. Travar as duas linhas lá custava caro demais: o texto tinha
de encolher até uns 20px para caber numa linha, e manchete de 20px
não é manchete.
Acima de 900px o `nowrap` entra e o corpo passa a acompanhar a
largura -- 6.3vw é o maior valor em que a primeira linha ainda cabe
inteira aos 900px, que é o pior caso da faixa. */
.hero h1{font-size:clamp(30px,6.4vw,52px);font-weight:800;letter-spacing:-.037em;
line-height:1.07;margin:20px 0 0}
@media(min-width:900px){
/* O teto subiu de 60 para 70px. O fator de 6.3vw ficou como estava: é
ele que garante o encaixe no pior caso da faixa (900px de janela,
onde a primeira linha ocupa ~816px dos 852 disponíveis). Subir o
fator junto com o teto tiraria essa folga e traria a barra de
rolagem horizontal de volta. */
.hero h1{font-size:min(6.3vw,60px);white-space:nowrap}
}
/* A segunda linha do título. Um resolveria, mas quebra de linha em
título fluido é decisão de desenho, não de texto: com um bloco dá para
mudá-la no CSS depois sem mexer no conteúdo. */
.hero h1 .l2{display:block}
/* As duas etiquetas de abertura. Centralizadas como o resto do hero, e
passando para duas linhas no celular em vez de espremer as duas numa
faixa estreita. */
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hero h1 .hl{color:var(--muted)}
/* O H1 PRECISA DIZER O QUE O SITE É
A linha grande é texto de venda e não carrega termo de busca nenhum:
ninguém digita "seus links viram renda todo mês" no Google. E o
é um dos sinais mais fortes de uma página.
Então ele passa a carregar as duas coisas -- o nome da categoria em
cima, pequeno, e a promessa embaixo, do tamanho de sempre. Ocupa o
lugar visual de uma eyebrow; para o buscador, continua sendo o H1.
As três propriedades herdadas do h1 (corpo enorme, entrelinha 1.07 e
letter-spacing negativo) precisam ser desfeitas uma a uma: em texto
pequeno e maiúsculo elas grudam as letras. */
.hero h1 .h1-tag{display:block;font-size:11.5px;font-weight:700;
letter-spacing:1px;line-height:1.4;text-transform:uppercase;
color:var(--muted);margin-bottom:14px}
/* frase que troca sozinha */
.troca{display:block;color:var(--muted);overflow:hidden}
.troca-i{display:block;opacity:1;transform:none;
transition:opacity .42s var(--ease),transform .42s var(--ease)}
.troca-i.sai{opacity:0;transform:translateY(-.34em)}
.troca-i.entra{opacity:0;transform:translateY(.34em);transition:none}
/* A frase do título desliza sempre. Se este bloco voltar, o JS troca o
texto mas o CSS anula o movimento e a mudança fica brusca. */
.hero p.sub{font-size:clamp(16px,2vw,18.5px);color:var(--muted);margin:22px auto 0;max-width:620px;line-height:1.68}
.hero-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.hero-note{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:26px;
font-size:13.5px;color:var(--muted-2)}
.hero-note i{display:inline-flex;align-items:center;gap:6px;font-style:normal}
.hero-note svg{width:13px;height:13px;color:var(--green-2)}
/* caixa de demonstração */
.demo{max-width:640px;margin:44px auto 0;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-xl);padding:16px;box-shadow:var(--sh-2)}
.demo-row{display:flex;gap:10px}
.demo .inp{flex:1}
.inp{display:flex;align-items:center;gap:10px;background:var(--field);border:1px solid var(--line-2);
border-radius:var(--r-md);padding:0 13px;min-height:48px;transition:border-color .15s,box-shadow .15s}
.inp:focus-within{border-color:var(--line-3);box-shadow:var(--ring)}
.inp svg{width:15px;height:15px;color:var(--muted-2);flex:0 0 auto}
.inp input,.inp select{flex:1;min-width:0;background:none;border:0;color:var(--fg);font-size:15px;
padding:13px 0;outline:none}
.inp input::placeholder{color:var(--muted-2)}
.inp .pre{color:var(--muted);font-size:14px;padding-right:11px;border-right:1px solid var(--line-2)}
.inp.err{border-color:var(--red);box-shadow:0 0 0 3px var(--red-bg)}
.demo-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:13px 5px 3px;font-size:13px;color:var(--muted-2)}
@media(max-width:600px){.demo-row{flex-direction:column}.demo-row .btn{width:100%}}
/* ============ TRAÇÃO (prova social) ============ */
/* Faixa fina logo abaixo do hero. Fica de propósito SEM cartões: a faixa
de números do produto, logo abaixo, já é uma grade de cartões — duas
grades iguais em sequência viram ruído e nenhuma das duas se destaca.
Aqui a leitura é "quanto a plataforma já rodou"; lá embaixo é "como o
produto funciona". */
.prova{padding:8px 0 0}
.prova-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pv{padding:30px 22px;text-align:center;position:relative}
.pv + .pv::before{content:"";position:absolute;left:0;top:22px;bottom:22px;
width:1px;background:var(--line)}
.pv .v{font-size:clamp(30px,4.2vw,42px);font-weight:800;letter-spacing:-1.4px;line-height:1.02}
.pv b{display:block;margin-top:10px;font-size:11.5px;font-weight:700;letter-spacing:1px;
text-transform:uppercase;color:var(--fg-2)}
.pv span{display:block;margin-top:5px;font-size:13px;color:var(--muted-2);line-height:1.5}
/* A grade de numeros do produto vem logo abaixo. Sem isto ela encosta na
borda da faixa e as duas parecem um bloco so. */
.prova + .wrap{padding-top:44px}
/* ============ NÚMEROS ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.stat b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
color:var(--muted-2);margin-bottom:10px}
.stat .v{font-size:34px;font-weight:800;letter-spacing:-1.3px;line-height:1.05}
.stat span{display:block;font-size:13px;color:var(--muted);margin-top:7px}
/* ============ PASSOS ============ */
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;position:relative}
/* O SELO REDONDO, DE 48px
Era um quadrado de 38px com borda. Virou um círculo de 48px sem
borda, num tom acima do cartão.
Os três detalhes trabalham juntos: o círculo não compete com o
retângulo do cartão (dois cantos arredondados diferentes na mesma
caixa é o que faz um bloco parecer amador); os 48px dão presença
suficiente para o selo ancorar o texto ao lado; e tirar a borda deixa
UMA borda por cartão, a de fora. Borda dentro de borda é ruído. */
.step .n{width:48px;height:48px;border-radius:99px;background:var(--field-2);border:0;
display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--fg);
margin-bottom:18px}
.step h3{font-size:18px;font-weight:700;letter-spacing:-.3px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--muted);line-height:1.68}
/* ============ RECURSOS ============ */
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;
transition:border-color .18s,transform .18s var(--ease)}
.feat:hover{border-color:var(--line-3);transform:translateY(-2px)}
/* Mesmo selo do `.step .n`: círculo de 48px, sem borda. Os seis
cartões de Recursos e os três de Como Funciona passam a falar a
mesma língua -- antes um tinha quadrado com borda e o outro
quadrado sem, e a diferença lia como descuido, não como intenção. */
.feat .ic{width:48px;height:48px;border-radius:99px;background:var(--field-2);border:0;
display:flex;align-items:center;justify-content:center;color:var(--fg-2);margin-bottom:17px}
.feat .ic svg{width:20px;height:20px}
.feat h3{font-size:16.5px;font-weight:700;letter-spacing:-.2px;margin-bottom:7px}
.feat p{font-size:14.5px;color:var(--muted);line-height:1.68}
/* ============ TABELAS ============ */
.tbl-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tbl-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;
border-bottom:1px solid var(--line);background:var(--card-2)}
.tbl-h h3{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:9px}
.tbl-h h3 svg{width:16px;height:16px;color:var(--muted)}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:520px}
th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
color:var(--muted-2);padding:13px 20px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:15px 20px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--fg-2)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--card-2)}
td b{color:var(--fg);font-weight:700}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:4px 10px;
font-size:11px;font-weight:700}
.badge::before{content:"";width:5px;height:5px;border-radius:99px;background:currentColor}
.badge.ok{background:var(--green-bg);color:var(--green-2)}
.badge.am{background:var(--amber-bg);color:var(--amber)}
/* ============ PRÊMIOS ============ */
.prz{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
display:flex;align-items:center;gap:15px;transition:border-color .18s}
.prz:hover{border-color:var(--line-3)}
.prz .ic{width:44px;height:44px;flex:0 0 auto;border-radius:12px;background:var(--field-2);
border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--fg-2)}
.prz .ic svg{width:20px;height:20px}
.prz .tx{min-width:0}
.prz .tx b{display:block;font-size:15px;font-weight:700}
.prz .tx span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.prz .meta{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap}
/* ============ FAQ ============ */
/* 920px, e não os 1000px da dashboard: mais largo que isso, a linha da
resposta passa de uns 100 caracteres e o olho se perde na volta para
o começo da seguinte. */
.faq{max-width:920px;margin:0 auto;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden}
.faq-i{border-bottom:1px solid var(--line)}
.faq-i:last-child{border-bottom:0}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:none;
border:0;color:var(--fg);cursor:pointer;text-align:left;padding:24px 28px;
font:inherit;font-size:17px;font-weight:600;line-height:1.45}
/* A fonte vem em partes, e não num atalho só. Era `font:700 16px/1.45
inherit`: `inherit` não pode entrar no meio do atalho, o navegador
jogava a linha fora e o botão ficava com a fonte padrão dele (13,3px,
sem negrito, fora da Plus Jakarta). As perguntas pareciam miúdas por
isso, e não pelo tamanho que estava escrito. */
.faq-q:hover{background:var(--card-2)}
.faq-q svg{width:20px;height:20px;flex:0 0 auto;color:var(--muted);transition:transform .2s var(--ease)}
.faq-i.on .faq-q svg{transform:rotate(45deg)}
.faq-a{display:none;padding:0 28px 26px;font-size:16px;line-height:1.75;color:var(--muted)}
.faq-i.on .faq-a{display:block;animation:in .2s var(--ease)}
/* No celular o respiro dos lados encolhe: 28px de cada lado numa tela de
375px deixariam a pergunta quebrando em três linhas. */
@media(max-width:620px){
.faq-q{padding:20px 18px;font-size:16px;gap:14px}
.faq-q svg{width:18px;height:18px}
.faq-a{padding:0 18px 20px;font-size:15.5px}
}
/* ============ CTA FINAL ============ */
.cta{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-xl);
padding:56px 40px;text-align:center;box-shadow:var(--sh-2);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:auto -10% -70% ;height:340px;pointer-events:none;
background:radial-gradient(closest-side,rgba(255,255,255,.06),transparent 70%)}
html[data-theme="light"] .cta::before{background:radial-gradient(closest-side,rgba(16,24,40,.05),transparent 70%)}
.cta h2{position:relative;font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-1.1px;line-height:1.18}
.cta p{position:relative;font-size:16.5px;color:var(--muted);margin:14px auto 28px;max-width:520px}
.cta .btn{position:relative}
/* ============ RODAPÉ ============ */
/* RODAPÉ TRANSPARENTE.
Tinha `background:var(--panel)`, um tom acima do fundo da página —
ele se destacava como um bloco à parte. Sem fundo próprio, o que
separa o rodapé do conteúdo passa a ser só a linha de cima, e a
segunda linha continua dividindo os links do crédito.
`transparent` em vez de apagar a linha: escrito, fica claro que a
ausência de fundo é decisão, e não alguém que esqueceu de pôr. */
footer{border-top:1px solid var(--line);padding:56px 0 34px;background:transparent}
.ft-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:34px;margin-bottom:40px}
.ft-top p{font-size:14px;color:var(--muted);line-height:1.7;margin-top:16px;max-width:290px}
.ft-c h4{font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
color:var(--muted-2);margin-bottom:14px}
.ft-c a{display:block;font-size:14.5px;color:var(--muted);padding:6px 0;transition:color .15s}
.ft-c a:hover{color:var(--fg)}
.ft-b{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding-top:26px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted-2)}
/* O crédito do desenvolvedor é o único link desta faixa. Fica um tom
acima do texto ao redor para se ler como link, sem virar destaque:
é assinatura, não chamada. */
.ft-b a{color:var(--muted);transition:color .15s}
.ft-b a:hover{color:var(--fg)}
/* ============ LOGIN / CADASTRO ============ */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.auth-form{display:flex;flex-direction:column;justify-content:center;padding:44px;min-width:0}
.auth-box{width:100%;max-width:420px;margin:0 auto}
.auth-back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--muted);
margin-bottom:36px;cursor:pointer;background:none;border:0;padding:0;transition:color .15s}
.auth-back:hover{color:var(--fg)}
.auth-back svg{width:15px;height:15px}
.auth-box h1{font-size:30px;font-weight:800;letter-spacing:-1.1px;line-height:1.2;margin:22px 0 8px}
.auth-box .lead{font-size:15px;color:var(--muted);margin-bottom:30px;line-height:1.65}
.f{display:block;font-size:13px;font-weight:600;color:var(--fg-2);margin:0 0 8px}
.fld{margin-bottom:16px}
.cp{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:6px;display:flex}
.cp:hover{background:var(--card);color:var(--fg)}
.cp svg{width:16px;height:16px}
.row-mid{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.chk{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13.5px;color:var(--muted);
line-height:1.5;user-select:none}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk .bx{width:18px;height:18px;flex:0 0 auto;margin-top:1px;border-radius:5px;background:var(--field);
border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;transition:.15s}
.chk .bx svg{width:11px;height:11px;color:var(--accent-fg);opacity:0;transition:opacity .12s}
.chk input:checked + .bx{background:var(--accent);border-color:var(--accent)}
.chk input:checked + .bx svg{opacity:1}
.chk input:focus-visible + .bx{box-shadow:var(--ring)}
.chk a{color:var(--fg);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.lnk{font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;background:none;border:0;padding:0;
transition:color .15s}
.lnk:hover{color:var(--fg)}
.msg{font-size:13.5px;color:var(--red);margin-bottom:16px;display:none}
.msg.on{display:block}
.sep{display:flex;align-items:center;gap:14px;margin:26px 0;font-size:12px;color:var(--muted-2)}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.oauth{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.oauth .btn{width:100%;font-size:14px;padding:12px}
.auth-ft{text-align:center;font-size:14px;color:var(--muted);margin-top:28px}
.auth-ft button{font-weight:700;color:var(--fg)}
.pwbar{display:flex;gap:5px;margin:11px 0 7px}
.pwbar i{flex:1;height:4px;border-radius:99px;background:var(--field-2);transition:background .2s}
.pwbar i.a{background:var(--red)}.pwbar i.b{background:var(--amber)}.pwbar i.c{background:var(--green-2)}
.pwmsg{font-size:12.5px;color:var(--muted-2)}
.pwmsg.err{color:var(--red)}.pwmsg.ok{color:var(--green-2)}
/* painel lateral do auth */
.auth-side{background:var(--panel);border-left:1px solid var(--line);padding:56px 48px;
display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.auth-side::before{content:"";position:absolute;inset:-30% -30% auto auto;width:520px;height:520px;
pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.06),transparent 70%)}
html[data-theme="light"] .auth-side::before{background:radial-gradient(closest-side,rgba(16,24,40,.05),transparent 70%)}
.auth-side .in{position:relative;max-width:420px;margin:0 auto;width:100%}
.auth-side h2{font-size:27px;font-weight:800;letter-spacing:-1px;line-height:1.25;margin:20px 0 30px}
.perk{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.perk:last-of-type{border-bottom:0}
.perk .ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--field-2);
border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--fg-2)}
.perk .ic svg{width:16px;height:16px}
.perk b{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px}
.perk span{font-size:13.5px;color:var(--muted);line-height:1.6}
@media(max-width:960px){
.auth{grid-template-columns:1fr}
.auth-side{display:none}
.auth-form{padding:32px 22px 56px}
}
/* =====================================================================
ETAPAS — o simulador de ganhos
O MÓDULO TEM UMA COR SÓ, E ELA VEM DE CIMA
Antes este bloco era verde: barra verde, etapa concluída verde, valor
verde. Verde não aparece em nenhum outro lugar desta página — o
simulador parecia recortado de outro produto, e o olho ia para a cor
antes de ir para o número.
Agora o acento é uma variável do próprio bloco, --et. No estado
normal ela é a tinta da página; quando a chave liga o Turbo, a classe
.turbo-on troca as três variáveis de uma vez e o módulo inteiro vira
âmbar — barra, etapas concluídas e valor. Uma linha muda tudo, e
nenhuma regra abaixo precisa saber que o Turbo existe.
A HIERARQUIA É DE TAMANHO, NÃO DE COR
"Você recebe" é a resposta que o simulador existe para dar. Antes ela
se destacava por ser o único número verde; agora se destaca por ser o
cartão do meio, mais largo, com superfície um tom acima e o número
bem maior. Continua funcionando em preto e branco, que é o teste de
que a hierarquia é de verdade.
O VISTO FICOU SÓ NA LINHA 2
As duas linhas usavam o mesmo selo para coisas diferentes: "meu link
tem 4 etapas" e "o visitante concluiu 3". Visto quer dizer FEITO. Ele
ficou na segunda; a primeira é uma escolha, e escolha se marca com
contorno.
===================================================================== */
.etp-wrap{--et:var(--fg);
/* As duas derivadas saem de --et por color-mix, e nao escritas a mao:
assim a chave do Turbo troca UMA variavel e o bloco inteiro segue
junto. Escrever as tres separadas era o convite para um dia mudar o
acento e esquecer a borda. */
--et-bd:color-mix(in srgb,var(--et) 34%,transparent);
--et-bg:color-mix(in srgb,var(--et) 10%,transparent);
max-width:900px;margin:0 auto;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-xl)}
.etp-wrap.turbo-on{--et:var(--amber)}
/* Barra de ferramentas do cartão, igual à do cartão da tabela logo
abaixo: as duas leem como peças da mesma família. */
.etp-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
padding:14px 20px;border-bottom:1px solid var(--line);background:var(--card-2)}
.etp-top h3{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:9px}
.etp-top h3 svg{width:16px;height:16px;color:var(--muted)}
.etp-corpo{padding:26px 24px 24px}
.etp{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.etp button{position:relative;background:var(--field);border:1px solid var(--line);border-radius:var(--r-md);
padding:15px 10px;cursor:pointer;color:var(--fg);text-align:center;
transition:border-color .18s,background .18s,color .18s,transform .18s var(--ease)}
.etp button:hover:not(:disabled){border-color:var(--line-3);transform:translateY(-2px)}
.etp .n{display:block;font-size:22px;font-weight:800;letter-spacing:-.7px;line-height:1;
color:var(--muted);transition:color .18s}
.etp .l{display:block;font-size:11.5px;color:var(--muted-2);margin-top:6px}
/* LINHA 1 — quantas etapas o link tem. É uma escolha: contorno firme e
um degrau de superfície, sem selo. */
.etp button.on{border-color:var(--fg);background:var(--field-2);
box-shadow:inset 0 0 0 1px var(--line-2)}
.etp button.on .n{color:var(--fg)}
.etp button.on .l{color:var(--muted)}
/* LINHA 2 — quantas o visitante concluiu. Aqui sim, visto. */
.etp button.feito{border-color:var(--et-bd);
background:linear-gradient(180deg,var(--et-bg),color-mix(in srgb,var(--et) 4%,transparent));
box-shadow:inset 0 0 0 1px var(--et-bd)}
.etp button.feito .n{color:var(--et)}
.etp button.feito .l{color:var(--et);opacity:.75}
.etp button.feito::after{content:"\2713";position:absolute;top:-7px;right:-7px;
width:19px;height:19px;border-radius:99px;background:var(--et);color:var(--bg);
border:2px solid var(--bg);font-size:10.5px;font-weight:800;line-height:1;
display:flex;align-items:center;justify-content:center}
/* Etapa que este tipo de link nem tem: sai do caminho, mas continua
ocupando a coluna — a grade não pode dançar a cada troca. */
.etp button.larg{opacity:.3;cursor:default;background:transparent;border-style:dashed}
.etp-lbl{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
font-size:13px;font-weight:600;color:var(--fg-2);margin-bottom:11px}
.etp-lbl .q{font-size:12.5px;font-weight:500;color:var(--muted-2)}
.etp-bloco{margin-bottom:24px}
/* A BARRA
Trilho afundado e preenchimento com brilho. O gradiente nasce apagado
e termina na cor cheia: dá direção ao avanço, em vez de uma tarja
chapada. */
.etp-bar{height:8px;border-radius:99px;background:var(--field);overflow:hidden;margin-top:14px;
box-shadow:inset 0 0 0 1px var(--line)}
.etp-bar i{display:block;height:100%;border-radius:99px;width:16.6%;
background:linear-gradient(90deg,color-mix(in srgb,var(--et) 35%,transparent),var(--et));
box-shadow:0 0 16px -3px var(--et);
transition:width .45s var(--ease),background .25s}
/* OS TRÊS NÚMEROS
Filho direto, e não qualquer div: sem o > a regra também pegava a div
do valor lá dentro, e cada número saía dentro de uma caixinha com
borda que ninguém pediu. */
.etp-out{display:grid;grid-template-columns:1fr 1.22fr 1fr;gap:12px;align-items:stretch}
.etp-out>div{background:var(--field);border:1px solid var(--line);border-radius:var(--r-lg);
padding:20px 16px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.etp-out b{display:block;font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
color:var(--muted-2);margin-bottom:9px}
.etp-out .v{font-size:26px;font-weight:800;letter-spacing:-1.1px;line-height:1;color:var(--fg-2)}
.etp-out span{display:block;font-size:12.5px;color:var(--muted);margin-top:7px}
/* O cartão do meio é a resposta. */
.etp-out .alvo{background:var(--card-2);border-color:var(--et-bd);
box-shadow:inset 0 0 0 1px var(--et-bd),0 12px 34px -22px var(--et)}
.etp-out .alvo b{color:var(--et);opacity:.85}
.etp-out .alvo .v{font-size:36px;color:var(--et);letter-spacing:-1.6px}
.etp-out .alvo span{color:var(--fg-2)}
/* A nota fecha o cartão: divisória, em vez de mais uma caixa dentro da
caixa. */
.etp-nota{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;
font-size:14px;line-height:1.65;color:var(--muted);text-align:center}
.etp-nota b{color:var(--fg);font-weight:700}
@media(max-width:720px){
.etp{grid-template-columns:repeat(3,1fr)}
.etp-out{grid-template-columns:1fr}
.etp-corpo{padding:20px 16px 18px}
.etp-top{padding:13px 16px}
.etp-out .alvo .v{font-size:32px}
}
/* ============ CPM TURBO ============ */
.turbo-sw{display:inline-flex;gap:4px;background:var(--field-2);border:1px solid var(--line-2);
border-radius:99px;padding:4px}
.turbo-sw button{background:none;border:0;color:var(--muted);cursor:pointer;border-radius:99px;
padding:8px 16px;font:700 13px/1 inherit;display:inline-flex;align-items:center;gap:7px;
transition:background .18s,color .18s}
.turbo-sw button svg{width:14px;height:14px}
.turbo-sw button.on{background:var(--card);color:var(--fg);box-shadow:var(--sh-1)}
.turbo-sw button.on[data-turbo="1"]{background:var(--amber-bg);color:var(--amber);
box-shadow:inset 0 0 0 1px var(--amber-bd)}
.chip.tb{background:var(--amber-bg);border-color:var(--amber-bd);color:var(--amber)}
.tb-val{color:var(--amber);font-weight:700}
.turbo-box{display:flex;gap:14px;align-items:flex-start;background:var(--card);
border:1px solid var(--amber-bd);border-radius:var(--r-lg);padding:20px 22px;margin-top:18px}
.turbo-box .ic{width:42px;height:42px;flex:0 0 auto;border-radius:12px;background:var(--amber-bg);
border:1px solid var(--amber-bd);display:flex;align-items:center;justify-content:center;color:var(--amber)}
.turbo-box .ic svg{width:20px;height:20px}
.turbo-box b{display:block;font-size:16px;font-weight:700;margin-bottom:5px}
.turbo-box p{font-size:14.5px;color:var(--muted);line-height:1.65;margin:0}
.turbo-box .agora{margin-left:auto;align-self:center;white-space:nowrap}
@media(max-width:720px){
.turbo-box{flex-direction:column}
.turbo-box .agora{margin:0;align-self:flex-start}
.turbo-sw button{padding:8px 12px;font-size:12.5px}
}
/* ============ MÉTODOS DE RETIRADA ============ */
.pay{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
text-align:center;transition:border-color .18s,transform .18s var(--ease)}
.pay:hover{border-color:var(--line-3);transform:translateY(-3px)}
.pay .ic{width:56px;height:56px;margin:0 auto 18px;border-radius:16px;background:var(--field-2);
border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--fg)}
.pay .ic svg{width:26px;height:26px}
/* As logos das formas de pagamento são as oficiais, coloridas. Elas não
seguem o tema: a cor É a marca, e é por ela que a pessoa reconhece o
Pix antes mesmo de ler o nome. */
.pay .ic img{width:30px;height:30px;display:block;object-fit:contain}
.pay h3{font-size:17px;font-weight:700;letter-spacing:-.2px;margin-bottom:7px}
.pay p{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:16px}
.pay .kvs{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px}
.pay .kv{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.pay .kv span{color:var(--muted-2)}
.pay .kv b{font-weight:700}
/* ============ ANIMAÇÕES ============ */
/* =====================================================================
VITRINES — cartão com cena ilustrada
Cada cena é um SVG desenhado à mão, em escala de cinza. Não há
imagem: as seis somam poucos KB, não borram em tela de retina e
acompanham os tokens do tema.
A MOLDURA INTERNA (.vit-cena) é o que dá o ar de apresentação. Fundo
um tom acima do cartão e raio MAIOR que o dele -- é o que faz a
ilustração ler como uma janela para dentro do produto, e não como um
desenho colado. Igualar os dois raios mata o efeito.
===================================================================== */
/* A CENA VEM NO TOPO
O cartão é uma coluna flex só para poder inverter a ordem sem mexer
no HTML: a cena sobe com `order:-1` e o texto desce. Abrir pela
ilustração é o que dá o ritmo de vitrine -- o olho pega a imagem,
depois lê o título.
Fica no CSS, e não na marcação, porque a de destaque precisa da ordem
contrária e é a MESMA cena. Duas ordens no mesmo HTML seria markup
duplicado. */
.vit{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:32px;transition:border-color .18s,transform .18s var(--ease)}
.vit:hover{border-color:var(--line-3);transform:translateY(-2px)}
.vit h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.vit p{font-size:14.5px;color:var(--muted);line-height:1.68}
.vit-cena{margin-top:24px;background:var(--card-2);border:1px solid var(--line);
border-radius:18px;padding:18px;overflow:hidden}
.vit-cena svg{width:100%;height:auto;display:block}
/* Duas colunas caem para uma bem antes do ponto geral do site: as cenas
têm texto pequeno dentro do SVG, e a 700px de largura de coluna a
linha do JSON da API já fica no limite do legível. */
@media(max-width:900px){ .grid.vitrines{grid-template-columns:1fr} }
/* A linha de TRÊS passa por duas antes de virar uma. Sem esse degrau,
ela saltaria de 360px por cartão direto para a largura cheia.
A faixa é fechada dos dois lados de propósito. Abaixo de 900px a
regra acima já manda uma coluna, e `.grid.g3.vitrines` tem
especificidade maior que `.grid.vitrines` -- sem o `min-width` ela
venceria e devolveria duas colunas justamente no celular. */
@media(max-width:1040px) and (min-width:901px){
.grid.g3.vitrines{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* AS FAIXAS LARGAS
Sem cartão: nem fundo, nem borda, nem respiro interno. Só a moldura
da cena de um lado e o texto do outro, direto sobre a página.
É a diferença que faz a seção respirar. Três cartões em cima já são
três caixas; embrulhar as faixas em mais uma caixa criaria caixa
dentro de caixa, e o olho para de saber o que é agrupamento e o que é
decoração. */
.vit-larga{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;
align-items:center;margin-top:56px}
.vit-larga .vit-cena{margin:0}
.vit-larga .vit-txt h3{font-size:24px;font-weight:700;letter-spacing:-.025em;margin-bottom:12px}
.vit-larga .vit-txt p{font-size:15.5px;color:var(--muted);line-height:1.68;margin-bottom:26px}
/* A INVERSÃO É SÓ NO CSS
`order` troca os lados sem duplicar marcação. As faixas alternam para
o olho não cair no mesmo trilho três vezes -- lido em sequência, o
zigue-zague obriga uma pausa a cada bloco, e é essa pausa que faz
parecer que cada um foi pensado sozinho. */
.vit-larga.inv .vit-cena{order:2}
@media(max-width:900px){
.vit-larga{grid-template-columns:1fr;gap:24px;margin-top:44px}
/* Empilhado, o texto vem sempre primeiro -- inclusive nas invertidas.
Numa coluna só, abrir pela ilustração mostra o desenho antes de
dizer do que se trata. */
.vit-larga .vit-txt{order:-1}
.vit-larga .vit-txt h3{font-size:20px}
}
/* A ESCALA DE CINZA DAS CENAS
Cinco degraus de traço e cinco de preenchimento, e nada fora deles.
Sem matiz, a leitura depende de opacidade e peso -- o que obriga a
hierarquia a ser decidida, em vez de resolvida com uma cor gritante.
O branco puro (.g-max / .t-max) é usado com avareza: UM elemento por
cena, no máximo dois. É ele que diz "olhe aqui", e só funciona
enquanto for raro. */
.g-grade{stroke:rgba(255,255,255,.07)}
.g-fraco{stroke:rgba(255,255,255,.18)}
.g-medio{stroke:rgba(255,255,255,.34)}
.g-forte{stroke:rgba(255,255,255,.62)}
.g-max{stroke:#fff}
.f-fraco{fill:rgba(255,255,255,.05)}
.f-medio{fill:rgba(255,255,255,.10)}
.t-fraco{fill:rgba(255,255,255,.32)}
.t-medio{fill:rgba(255,255,255,.5)}
.t-forte{fill:rgba(255,255,255,.75)}
.t-max{fill:#fff}
/* =====================================================================
BLOG
Reaproveita os tokens e os componentes da landing -- `.chip`, `.btn`,
`.eyebrow`, `.grid`. O que existe aqui é só o que o blog tem e o
resto do site não: o cartão de artigo e a tipografia do texto longo.
===================================================================== */
/* ---- filtros de categoria ---- */
.bl-filtros{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:34px}
.bl-filtros .chip{transition:background .15s,border-color .15s,color .15s}
.bl-filtros .chip:hover{border-color:var(--line-3);color:var(--fg-2)}
/* O ativo inverte: fundo branco, texto preto. Contraste cheio é o que
diz "você está aqui" sem precisar de legenda nem de seta. */
.bl-filtros .chip.bl-on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
/* ---- cartão de artigo ---- */
.bl-grade{align-items:stretch}
.bl-cartao{display:flex;flex-direction:column;background:var(--card);
border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
transition:border-color .18s,transform .18s var(--ease)}
.bl-cartao:hover{border-color:var(--line-3);transform:translateY(-3px)}
/* A capa tem proporção fixa. Sem isso, capas de tamanhos diferentes
deixariam os títulos em alturas diferentes na mesma linha -- e a
grade inteira parece torta por causa de uma imagem. */
.bl-capa{aspect-ratio:16/9;background:var(--card-2);overflow:hidden}
.bl-capa img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .4s var(--ease)}
.bl-cartao:hover .bl-capa img{transform:scale(1.04)}
/* Artigo sem imagem não vira buraco: a mesma proporção, com um leve
gradiente. Um cartão sem capa ao lado de dois com capa é o que faz a
listagem parecer quebrada. */
.bl-capa-vazia{background:linear-gradient(135deg,var(--card-2),transparent 70%)}
.bl-corpo{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.bl-corpo h2{font-size:17.5px;font-weight:700;letter-spacing:-.02em;line-height:1.32}
.bl-corpo p{font-size:14px;color:var(--muted);line-height:1.65;margin-top:9px}
/* `margin-top:auto` assenta a data no pé de todos os cartões, mesmo com
resumos de tamanhos diferentes. */
.bl-data{margin-top:auto;padding-top:16px;font-size:11.5px;color:var(--muted-2)}
/* ---- paginação ---- */
.bl-pag{display:flex;align-items:center;justify-content:space-between;gap:14px;
margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
/* ---- o artigo ---- */
.bl-artigo{padding:44px 0 20px}
.bl-artigo .wrap{max-width:760px}
/* 760px, e não os 1180 do site. Linha de texto corrido acima de ~75
caracteres cansa: o olho perde o começo da linha seguinte e relê. É a
única medida desta folha escolhida por legibilidade, e não por
desenho. */
.bl-migalha{display:flex;gap:8px;font-size:12px;color:var(--muted-2);margin-bottom:20px}
.bl-migalha a{color:var(--muted)}
.bl-migalha a:hover{color:var(--fg)}
.bl-artigo h1{font-size:clamp(28px,4.4vw,42px);font-weight:800;
letter-spacing:-.032em;line-height:1.14}
.bl-meta{display:flex;gap:9px;align-items:center;font-size:12.5px;
color:var(--muted-2);margin-top:16px}
.bl-chamada{font-size:17.5px;line-height:1.62;color:var(--fg-2);margin-top:22px}
.bl-hero{margin:32px 0 8px;border-radius:var(--r-lg);overflow:hidden;
border:1px solid var(--line)}
.bl-hero img{width:100%;height:auto;display:block}
/* ---- o corpo do texto ----
Espaçamento generoso e hierarquia clara. Um artigo se lê ou não se lê
por isto, e não pela paleta. */
.bl-texto{margin-top:34px;font-size:16.5px;line-height:1.78;color:var(--fg-2)}
.bl-texto > *:first-child{margin-top:0}
.bl-texto p{margin:0 0 22px}
.bl-texto h2{font-size:24px;font-weight:700;letter-spacing:-.025em;
line-height:1.28;color:var(--fg);margin:44px 0 14px}
.bl-texto h3{font-size:19px;font-weight:700;letter-spacing:-.015em;
color:var(--fg);margin:32px 0 10px}
.bl-texto ul,.bl-texto ol{margin:0 0 22px;padding-left:22px}
.bl-texto li{margin-bottom:9px}
.bl-texto a{color:var(--fg);text-decoration:underline;
text-underline-offset:3px;text-decoration-color:var(--line-3)}
.bl-texto a:hover{text-decoration-color:var(--fg)}
.bl-texto strong{color:var(--fg);font-weight:700}
.bl-texto img{width:100%;height:auto;border-radius:var(--r-md);
border:1px solid var(--line);margin:8px 0 24px}
.bl-texto blockquote{margin:0 0 22px;padding:2px 0 2px 20px;
border-left:2px solid var(--line-3);color:var(--muted)}
.bl-texto code{font-family:var(--mono);font-size:14px;background:var(--field);
border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.bl-texto pre{background:var(--field);border:1px solid var(--line);
border-radius:var(--r-md);padding:16px;overflow-x:auto;margin:0 0 22px}
.bl-texto pre code{background:none;border:0;padding:0}
.bl-texto table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.bl-texto th,.bl-texto td{text-align:left;padding:10px 12px;
border-bottom:1px solid var(--line)}
.bl-texto th{color:var(--fg);font-weight:700}
/* ---- convite do fim ---- */
.bl-cta{margin:44px 0 8px;padding:30px;text-align:center;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.bl-cta b{display:block;font-size:19px;letter-spacing:-.02em}
.bl-cta span{display:block;font-size:14.5px;color:var(--muted);
margin:8px auto 20px;max-width:420px;line-height:1.6}
@media(max-width:760px){
.bl-artigo{padding-top:28px}
.bl-texto{font-size:16px}
.bl-texto h2{font-size:21px;margin-top:34px}
.bl-pag{flex-direction:column}
}
/* =====================================================================
BLOG — cabecalho do artigo
Houve aqui um layout de duas colunas com barra lateral, no formato do
visastepguide. Saiu: os 320px da lateral vinham da largura do texto,
que e o produto da pagina.
Sobrou uma coluna so, com 860px em vez dos 760px originais. Nao mais
que isso de proposito -- acima de ~90 caracteres por linha o olho
perde o comeco da linha seguinte e rele. E o unico numero desta folha
escolhido por legibilidade, e nao por desenho.
===================================================================== */
.wrap.bl-um{max-width:860px}
/* ---- voltar para artigos ---- */
.bl-volta{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
color:var(--muted);padding:26px 0 10px;transition:color .15s}
.bl-volta svg{width:15px;height:15px;transition:transform .18s var(--ease)}
.bl-volta:hover{color:var(--fg)}
.bl-volta:hover svg{transform:translateX(-3px)}
/* ---- cabecalho do artigo ---- */
.bl-post{padding:8px 0 20px}
.bl-selo{display:inline-block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);border:1px solid var(--line-2);border-radius:999px;
padding:5px 11px;margin-bottom:16px;transition:color .15s,border-color .15s}
.bl-selo:hover{color:var(--fg);border-color:var(--line-3)}
.bl-post h1{font-size:clamp(28px,4.4vw,42px);font-weight:800;
letter-spacing:-.032em;line-height:1.14}
/* Tempo, data e autoria. Vem depois da regra antiga de `.bl-meta` na
folha, entao e esta que vale. */
.bl-meta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;
font-size:13px;color:var(--muted-2);margin-top:18px}
.bl-meta span{display:inline-flex;align-items:center;gap:6px}
.bl-meta svg{width:14px;height:14px;flex:none;opacity:.8}
.bl-leia{margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
.nav.stuck{box-shadow:var(--sh-2)}
.hero-in>*{animation:rise .7s var(--ease) both}
.hero-in>*:nth-child(1){animation-delay:.02s}
.hero-in>*:nth-child(2){animation-delay:.10s}
.hero-in>*:nth-child(3){animation-delay:.18s}
.hero-in>*:nth-child(4){animation-delay:.26s}
.hero-in>*:nth-child(5){animation-delay:.34s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.btn,.chip,.feat,.pay,.prz,.etp button,.stat{will-change:transform}
.stat{transition:border-color .18s,transform .18s var(--ease)}
.stat:hover{border-color:var(--line-3);transform:translateY(-2px)}
.step{transition:border-color .18s,transform .18s var(--ease)}
.step:hover{border-color:var(--line-3);transform:translateY(-2px)}
.step .n{transition:background .18s,color .18s,border-color .18s}
.step:hover .n{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.nav-l a{position:relative}
.nav-l a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1.5px;
background:var(--fg);border-radius:2px;transform:scaleX(0);transform-origin:left;
transition:transform .25s var(--ease)}
.nav-l a:hover::after{transform:scaleX(1)}
.brand .mark{transition:transform .3s var(--ease)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.05)}
tbody tr{transition:background .15s}
.faq-q{transition:background .15s}
@media(prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;transition:none}
.hero-in>*{animation:none}
*{scroll-behavior:auto !important}
}
/* ============ SEÇÃO DO PAINEL ============ */
.pchips{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.pchips .chip{padding:9px 16px;font-size:13.5px;font-weight:600;background:var(--card);border-color:var(--line-2)}
.pchips .chip svg{width:14px;height:14px}
.palco{position:relative;padding:0 0 10px}
.palco::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
background:linear-gradient(to bottom,transparent,var(--bg) 88%)}
/* cartões que flutuam ao redor */
.flut{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:11px;
background:var(--card);border:1px solid var(--line-2);border-radius:99px;
padding:11px 18px 11px 11px;font-size:14px;font-weight:600;white-space:nowrap;
box-shadow:var(--sh-2);animation:boia 5.5s var(--ease) infinite}
.flut i{width:32px;height:32px;flex:0 0 auto;border-radius:99px;background:var(--field-2);
border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--fg-2)}
.flut i svg{width:15px;height:15px}
.flut b{width:8px;height:8px;border-radius:99px;background:var(--green-2);flex:0 0 auto;margin-left:2px}
.flut.f1{left:-8px; top:22%; animation-delay:0s}
.flut.f2{right:-8px; top:14%; animation-delay:.7s}
.flut.f3{left:2%; bottom:16%;animation-delay:1.4s}
.flut.f4{right:2%; bottom:24%;animation-delay:2.1s}
@keyframes boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* o painel em si */
/* A moldura agora guarda uma CAPTURA, e nao um desenho.
Saiu a grade de duas colunas (ela existia para posicionar a barra
lateral falsa) e saiu a inclinacao de 3,2 graus: num mock vetorial o
`rotateX` dava profundidade sem custo, mas numa imagem de tela ele
reamostra o texto na diagonal e borra as letras pequenas. Perspectiva
e bonita ate o momento em que o print precisa ser LIDO.
Para devolver, e so a linha do `transform`. */
.mock{position:relative;z-index:1;
background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-xl);overflow:hidden;
box-shadow:var(--sh-2);margin:0 auto;max-width:1000px}
.mock img{display:block;width:100%;height:auto}
/* O QUADRO SE LEVANTA AO ROLAR
Ele entra deitado para trás e vai ficando de pé conforme sobe na
tela, como a dashboard do alpharede.com. A profundidade vem do
`perspective` no palco: sem ele, o `rotateX` achata o quadro em vez
de inclinar. Quem mexe no quadro é o script "O PAINEL SE LEVANTA AO
ROLAR", no fim do index.php.
FEITO EM JAVASCRIPT, E NÃO MAIS EM CSS
Era `animation-timeline: view()`, que o Firefox não tem: lá o quadro
ficava parado. E o CSS não faz o amortecimento, o quadro que continua
se acomodando um instante depois que a rolagem para. Se o script
falhar, o quadro aparece reto: nunca fica um estado torto congelado.
Só do tablet para cima. No celular o quadro ocupa a largura toda e a
inclinação come altura útil sem acrescentar nada. */
@media (min-width:768px){
.palco{perspective:2000px}
}
/* Menos movimento no sistema: o quadro nasce reto e fica. */
@media (prefers-reduced-motion:reduce){
.mock{transform:none!important}
}
.mock *{font-size:inherit}
/* O FACHO QUE PERCORRE A BORDA
Um brilho branco dá uma volta lenta no contorno do quadro, em 14
segundos. É o que tira a moldura da imobilidade sem competir com o
conteúdo -- movimento longo o bastante para você nunca ver começar
nem terminar.
COMO A LUZ FICA SÓ NA BORDA
O truque é a máscara. O pseudo-elemento cobre o quadro inteiro e
recebe um gradiente de 300%; a máscara então SUBTRAI o miolo, usando
duas camadas iguais das quais uma é limitada ao `content-box`. Sobra
exatamente a faixa de 1px do `padding` -- a borda.
Sem isso, o brilho passaria por cima do painel. É por isso que a
`mask` aparece duas vezes: a versão padrão com `exclude` e a do
WebKit com `mask-composite:xor`, que ainda é a que o Safari entende.
O movimento é do `background-position`, e não da caixa: assim nada é
reposicionado a cada quadro, e a animação roda na placa de vídeo em
vez de disputar o processador com o resto da página. */
.mock::before{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
border-radius:inherit;padding:1px;
background:radial-gradient(circle at 50% 50%,
transparent 30%, rgba(255,255,255,.85) 42%, transparent 54%);
background-size:300% 300%;
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
animation:facho 14s linear infinite;
}
@keyframes facho{
0% {background-position:0% 0%}
50% {background-position:100% 100%}
100%{background-position:0% 0%}
}
/* Quem pediu menos movimento no sistema fica com a borda parada, e não
com a borda sumida: o facho vira um brilho fixo e discreto. */
@media(prefers-reduced-motion:reduce){
.mock::before{animation:none;background-position:50% 50%;opacity:.5}
}
/* Coluna flex para o bloco do usuario ficar colado no pe, como no painel
de verdade. O menu no meio recorta se faltar altura - e o que uma janela
real faria, entao o corte parece produto, nao defeito. */
.mock-sb{background:var(--panel);border-right:1px solid var(--line);padding:14px 12px;
display:flex;flex-direction:column;min-height:0}
.mock-nav{flex:1;min-height:0;overflow:hidden}
.mock-brand{display:flex;align-items:center;gap:7px;padding:2px 6px 14px}
.mock-brand .mk{width:20px;height:20px;border-radius:6px;flex:0 0 auto;
background:linear-gradient(145deg,var(--fg),var(--muted))}
.mock-brand b{display:block;font-size:11px;font-weight:800;letter-spacing:.6px;line-height:1.1}
.mock-brand small{display:block;font-size:5.5px;letter-spacing:3px;color:var(--muted-2);margin-top:2px}
.mock-cta{background:var(--accent);color:var(--accent-fg);border-radius:7px;
display:flex;align-items:center;justify-content:center;gap:6px;
padding:9px;font-size:9.5px;font-weight:700;margin-bottom:14px}
.mock-cta .pl{position:relative;width:8px;height:8px;flex:0 0 auto}
.mock-cta .pl::before,.mock-cta .pl::after{content:"";position:absolute;background:currentColor;border-radius:1px}
.mock-cta .pl::before{left:0;right:0;top:3.5px;height:1.6px}
.mock-cta .pl::after{top:0;bottom:0;left:3.2px;width:1.6px}
/* Ferramentas e um grupo que abre no painel real, com seta a direita. */
.mock-gr{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px;
font-size:9.5px;color:var(--muted);font-weight:500}
.mock-gr>svg{width:11px;height:11px;flex:0 0 auto;opacity:.7}
.mock-gr .cr{width:5px;height:5px;margin-left:auto;flex:0 0 auto;
border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
transform:rotate(-45deg);opacity:.45}
/* Usuario no pe da barra lateral. */
.mock-u{display:flex;align-items:center;gap:7px;margin-top:auto;padding:9px 6px 0;
border-top:1px solid var(--line)}
.mock-u .av{width:18px;height:18px;border-radius:6px;flex:0 0 auto;
background:var(--field-2);border:1px solid var(--line-2)}
.mock-u b{display:block;font-size:8.5px;font-weight:700}
.mock-u i{display:block;font-size:7.5px;font-style:normal;color:var(--muted-2);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}
.mock-sb p{font-size:7.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
color:var(--muted-2);padding:0 6px;margin:12px 0 5px}
.mock-sb a{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px;
font-size:9.5px;color:var(--muted);font-weight:500}
.mock-sb a svg{width:11px;height:11px;flex:0 0 auto;opacity:.7}
.mock-sb a.on svg{opacity:1}
.mock-sb a.on{background:var(--card-2);color:var(--fg);font-weight:700}
.mock-main{min-width:0;display:flex;flex-direction:column}
.mock-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.mock-user{display:flex;align-items:center;gap:7px}
.mock-user .av{width:20px;height:20px;border-radius:6px;background:var(--field-2);
border:1px solid var(--line-2);flex:0 0 auto}
.mock-user b{display:block;font-size:8.5px;font-weight:800;letter-spacing:.4px}
.mock-user i{display:block;font-size:8px;font-style:normal;color:var(--muted)}
.mock-user i::after{content:"";}
.mock-busca{flex:1;background:var(--card-2);border:1px solid var(--line);border-radius:7px;
padding:6px 10px;font-size:8.5px;color:var(--muted-2)}
.mock-bell{width:18px;height:18px;flex:0 0 auto;border-radius:6px;
background:var(--card-2);border:1px solid var(--line)}
.mock-lv{display:inline-flex;align-items:center;gap:4px;
background:var(--card);border:1px solid var(--line);border-radius:99px;
padding:5px 10px;font-size:8.5px;font-weight:700;white-space:nowrap}
.mock-lv svg{width:8px;height:8px;flex:0 0 auto;color:var(--amber)}
.mock-body{padding:14px}
.mock-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.mock-h h4{font-size:15px;font-weight:800;letter-spacing:-.4px}
.mock-h span{font-size:8.5px;color:var(--muted)}
.mock-sel{background:var(--card-2);border:1px solid var(--line);border-radius:6px;
padding:5px 10px;font-size:8.5px;color:var(--fg-2);white-space:nowrap}
.mock-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:11px}
.mock-stats>div{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px}
.mock-stats .hd{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.mock-stats .hd i{display:flex;flex:0 0 auto;color:var(--muted-2)}
.mock-stats .hd i svg{width:10px;height:10px}
/* O respiro agora e do .hd; manter margem aqui somaria duas vezes. */
.mock-stats b{display:block;font-size:7px;font-weight:700;letter-spacing:.7px;color:var(--muted-2);
text-transform:uppercase;margin-bottom:0}
.mock-stats .v{font-size:16px;font-weight:800;letter-spacing:-.6px;line-height:1.05;margin-bottom:7px}
.mock-stats span{display:inline-block;font-size:7.5px;font-weight:700;border-radius:99px;
padding:2px 7px;background:var(--card-2);border:1px solid var(--line);color:var(--muted)}
.mock-stats span.up{background:var(--green-bg);border-color:var(--green-bd);color:var(--green-2)}
.mock-cols{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:9px}
.mock-card{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px}
.mock-ch{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.mock-ch b{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700}
.mock-ch b svg{width:10px;height:10px;flex:0 0 auto;color:var(--muted)}
.mock-ch span{font-size:7.5px;color:var(--muted);border:1px solid var(--line);
border-radius:99px;padding:2px 7px}
.mock-chart{width:100%;height:112px;display:block}
/* A linha se desenha quando o mock entra na tela. O dasharray e medido no
JS, porque depende do comprimento real do traco. */
#mockLine{transition:stroke-dashoffset 1.6s cubic-bezier(.32,.72,.3,1)}
.mock.anim #mockArea,.mock.anim #mockDot{opacity:0;transition:opacity .5s ease .9s}
.mock.anim.viva #mockArea,.mock.anim.viva #mockDot{opacity:1}
/* pulso discreto no ponto final, para o painel parecer vivo */
@keyframes mockPulso{0%,100%{r:3.2}50%{r:4.4}}
.mock.anim.viva #mockDot{animation:mockPulso 2.4s ease-in-out 2.2s infinite}
/* o item ativo do menu acende junto */
.mock-sb a.on{transition:background .5s ease .5s,color .5s ease .5s}
.mock-act{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--line)}
.mock-act:last-child{border-bottom:0;padding-bottom:0}
.mock-act i{width:16px;height:16px;flex:0 0 auto;border-radius:5px;background:var(--green-bg);
border:1px solid var(--green-bd);margin-top:1px}
.mock-act b{display:block;font-size:8.5px;font-weight:700}
.mock-act span{display:block;font-size:8px;color:var(--muted)}
@media(max-width:1080px){
.flut.f1,.flut.f2{top:8%}
.flut{font-size:13px;padding:9px 14px 9px 9px}
.flut i{width:28px;height:28px}
}
@media(max-width:860px){
.flut{display:none}
.mock{transform:none}
.palco::after{height:70px}
}
@media(max-width:640px){
.mock{grid-template-columns:1fr}
.mock-sb{display:none}
.mock-stats{grid-template-columns:repeat(2,1fr)}
.mock-cols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){ .flut{animation:none} }
/* toast */
.toast{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:11px;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 17px;
box-shadow:var(--sh-2);opacity:0;transform:translateY(12px);pointer-events:none;transition:.28s var(--ease)}
.toast.on{opacity:1;transform:none}
.toast i{width:20px;height:20px;border-radius:99px;background:var(--green);color:#000;display:flex;
align-items:center;justify-content:center;flex:0 0 auto;font-size:12px;font-weight:800}
.toast b{font-size:14.5px;font-weight:700;display:block}
.toast span{font-size:13px;color:var(--muted)}
@media(max-width:900px){
section{padding:64px 0}
.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats{grid-template-columns:repeat(2,1fr)}
/* Em duas colunas o terceiro item ficaria sozinho e torto: aqui a
faixa vira empilhada de uma vez, com divisor horizontal. */
.prova-in{grid-template-columns:1fr}
.pv{padding:24px 18px}
.pv + .pv::before{left:22px;right:22px;top:0;bottom:auto;width:auto;height:1px}
.ft-top{grid-template-columns:repeat(2,1fr);gap:28px}
}
@media(max-width:620px){
.g2,.g3,.g4{grid-template-columns:1fr}
.stats{grid-template-columns:1fr}
.ft-top{grid-template-columns:1fr}
.cta{padding:40px 22px}
.oauth{grid-template-columns:1fr}
}
/* ---------------------------------------------------------------------
Vindos do painel: usados nas caixas de aviso, textos legais e formulários
de entrada. Ficam aqui para esta folha continuar independente.
--------------------------------------------------------------------- */
.note{font-size:14px;color:var(--muted);margin:10px 0;line-height:1.65}
.fsec{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);
margin:22px 0 8px}
.fsec:first-child{margin-top:0}
.warn{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-md);padding:14px 16px;
margin-bottom:16px;background:rgba(251,44,54,.10);border:1px solid rgba(251,44,54,.34)}
.warn.amb{background:var(--amber-bg);border-color:var(--amber-bd)}
.warn.inf{background:var(--field-2);border-color:var(--line-2)}
.warn svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px;color:var(--red)}
.warn.amb svg{color:var(--amber)}
.warn.inf svg{color:var(--muted)}
.warn b{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px}
.warn span{font-size:13.5px;color:var(--fg-2);line-height:1.6}
/* =====================================================================
TRATAMENTO DAS SUPERFÍCIES
Três coisas fazem o conjunto: superfície translúcida, contorno de 1px
em branco baixíssimo, e uma linha de luz no topo do cartão. A linha é
um gradiente horizontal que nasce e morre transparente — dá a
impressão de que a luz vem de cima e bate na borda, e é ela que separa
um cartão de uma caixa qualquer.
===================================================================== */
.card,.demo,.faq,.cta,.tbl-card,.etp-wrap,.step,.feat,.prz{position:relative;overflow:hidden}
.card::before,.demo::before,.faq::before,.cta::before,
.tbl-card::before,.etp-wrap::before,.step::before,.feat::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,var(--line-2) 40%,var(--line-2) 60%,transparent)}
/* No hover o cartão acende de leve, em vez de só mudar a borda. */
.feat:hover,.prz:hover,.stat:hover{background:var(--card-2)}
/* A barra do topo vira vidro: fundo quase da cor da página, mas borrado,
para o conteúdo passar por baixo sem sumir nem competir. */
/* Fica grudada no topo em toda a rolagem. O z-index passa do canvas e
de qualquer seção. */
.nav{position:sticky;top:0;z-index:50;
background:color-mix(in srgb,var(--bg) 80%,transparent);
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
/* A sombra só aparece depois de sair do topo — grudada e sem sombra, ela
parece parte da página; com sombra sempre, parece solta. */
.nav.stuck{box-shadow:0 10px 34px -12px rgba(0,0,0,.7)}
/* Pílula de chamada, no topo do hero. */
.chip{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* Rótulos técnicos: CPM, prazos, contagens. */
.hero-note,.demo-ft,.stat b,.eyebrow,.ft-b,.an-escala{font-family:var(--mono)}
.hero-note,.demo-ft{letter-spacing:-.01em}
/* O destaque do título: uma barra clara ATRÁS da palavra, e não um
sublinhado — sublinhado lê como link. */
.hero h1 em{font-style:normal;position:relative;display:inline-block;z-index:0}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.18em;
background:rgba(255,255,255,.12);border-radius:2px;z-index:-1}
/* =====================================================================
FUNDO ANIMADO, SÓ NO HERO
O canvas mora dentro do .hero, atrás do conteúdo (.hero-in está em
z-index 2), e não recebe clique. As outras seções ficam no preto liso.
A borda de baixo se apaga aos poucos: sem isso as ondas terminariam
numa linha reta, cortadas em cima da seção seguinte.
===================================================================== */
#bg-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;
-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);
mask-image:linear-gradient(to bottom,#000 55%,transparent)}
/* O conteúdo sobe acima do canvas. A barra do topo fica FORA desta
regra: ela é sticky, e `position:relative` aqui a soltaria do topo —
com especificidade maior que a regra original, o que a fazia rolar
junto com a página. */
body>main,body>section,body>footer,body>.wrap{position:relative;z-index:1}
html[data-theme="light"] #bg-canvas{display:none}
/* ============================================================
BLOQUEIO DE PÁGINA — seção da landing
============================================================ */
.bq{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:64px;align-items:center}
.bq-txt .eyebrow{color:var(--green-2)}
.bq-txt h2{font-size:clamp(27px,3.6vw,39px);font-weight:800;letter-spacing:-1.2px;line-height:1.14}
.bq-txt h2 em{font-style:normal;color:var(--green-2)}
.bq-txt>p{margin-top:16px;max-width:50ch;font-size:16.5px;color:var(--muted);line-height:1.65}
.bq-lista{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:13px}
.bq-lista li{display:flex;align-items:center;gap:12px;
font-size:15.5px;font-weight:600;color:var(--fg-2);line-height:1.4}
.bq-lista i{flex:0 0 auto;width:30px;height:30px;border-radius:9px;
display:flex;align-items:center;justify-content:center;
background:var(--field-2);border:1px solid var(--line-2);color:var(--fg)}
.bq-lista i svg{width:15px;height:15px}
/* ---------- a demonstração ---------- */
.bq-demo{position:relative;display:flex;justify-content:center}
/* Halo verde atrás do cartão. Solta a tela do fundo escuro sem precisar
de uma borda grossa, que endureceria o desenho. */
.bq-demo::before{content:"";position:absolute;z-index:0;
top:50%;left:50%;transform:translate(-50%,-50%);
width:340px;height:340px;border-radius:50%;
background:radial-gradient(circle,var(--green-bg),transparent 66%);
filter:blur(14px)}
.bq-tela{position:relative;z-index:1;width:100%;max-width:340px;padding:20px;
background:var(--panel);border:1px solid var(--line-2);border-radius:20px;
box-shadow:var(--sh-2)}
.bq-capa{height:104px;border-radius:12px;margin-bottom:16px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(130deg,var(--field-2),var(--field));
border:1px solid var(--line);color:var(--muted-2)}
.bq-capa svg{width:34px;height:34px}
.bq-t{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.3px}
.bq-s{display:block;font-size:13px;color:var(--muted);margin:3px 0 16px}
/* ---------- linhas de ação ---------- */
.bq-ac{display:flex;align-items:center;gap:11px;padding:11px 12px;margin-bottom:9px;
background:var(--card);border:1px solid var(--line);border-radius:12px}
/* Fundo branco fixo no selo da rede: o logo do YouTube tem o play em
branco vazado, e sobre o cartão escuro ele sumiria. */
.bq-ac>i{flex:0 0 auto;width:30px;height:30px;border-radius:8px;overflow:hidden;
display:flex;align-items:center;justify-content:center;background:#fff}
.bq-ac>i svg{width:22px;height:22px}
.bq-ac>b{flex:1;font-size:14.5px;font-weight:700;letter-spacing:-.2px}
.bq-ac .mk{flex:0 0 auto;width:21px;height:21px;border-radius:99px;
display:flex;align-items:center;justify-content:center;
border:1.6px solid var(--line-2);color:#08130c}
.bq-ac .mk svg{width:11px;height:11px;opacity:0}
.bq-bar{height:6px;border-radius:99px;background:var(--field-2);overflow:hidden;margin:16px 0 13px}
.bq-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--green)}
/* Os dois rótulos ficam empilhados no mesmo lugar e trocam por opacidade.
Trocar o texto de um span só mudaria a largura no meio da animação. */
.bq-bt{position:relative;height:46px;border-radius:12px;
background:var(--field-2);border:1px solid var(--line-2)}
.bq-bt span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
font-size:14px;font-weight:800;letter-spacing:-.2px}
.bq-bt svg{width:15px;height:15px;flex:0 0 auto}
.bq-bt .off{color:var(--muted)}
.bq-bt .on{color:var(--accent-fg);opacity:0}
/* ---------- os +1 ---------- */
.bq-toasts{position:absolute;top:14px;right:14px;z-index:3;
display:flex;flex-direction:column;align-items:flex-end;gap:7px;pointer-events:none}
.bq-toast{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
padding:6px 11px 6px 9px;border-radius:99px;
background:var(--green);color:#08130c;
font-size:12px;font-weight:800;letter-spacing:-.1px;
box-shadow:0 8px 22px -8px rgba(0,0,0,.6);
opacity:0;transform:translateX(16px) scale(.9)}
.bq-toast svg{width:13px;height:13px;flex:0 0 auto}
/* ============================================================
O CICLO — 8s, tudo no mesmo relógio
10% ação 1 marcada, +1 inscrito entra
38% ação 2 marcada, +1 Like entra
56% botão destrava
90% segura o resultado
100% volta ao início
Um relógio único em vez de `animation-delay` por elemento: com
delay cada animação reinicia na sua própria hora e a cena se
desmonta em pedaços em vez de recomeçar junta.
============================================================ */
.bq-ac.a1{animation:bqRow1 8s var(--ease) infinite}
.bq-ac.a2{animation:bqRow2 8s var(--ease) infinite}
.bq-ac.a1 .mk{animation:bqMk1 8s var(--ease) infinite}
.bq-ac.a2 .mk{animation:bqMk2 8s var(--ease) infinite}
.bq-ac.a1 .mk svg{animation:bqTick1 8s var(--ease) infinite}
.bq-ac.a2 .mk svg{animation:bqTick2 8s var(--ease) infinite}
.bq-bar i{animation:bqBar 8s var(--ease) infinite}
.bq-bt{animation:bqBt 8s var(--ease) infinite}
.bq-bt .off{animation:bqBtOff 8s var(--ease) infinite}
.bq-bt .on{animation:bqBtOn 8s var(--ease) infinite}
.bq-toast.t1{animation:bqToast1 8s var(--ease) infinite}
.bq-toast.t2{animation:bqToast2 8s var(--ease) infinite}
@keyframes bqRow1{0%,9%{background:var(--card);border-color:var(--line)}
12%,90%{background:var(--green-bg);border-color:var(--green-bd)}
100%{background:var(--card);border-color:var(--line)}}
@keyframes bqRow2{0%,37%{background:var(--card);border-color:var(--line)}
40%,90%{background:var(--green-bg);border-color:var(--green-bd)}
100%{background:var(--card);border-color:var(--line)}}
/* O pulinho de escala é o que dá a sensação de "marcou agora". */
@keyframes bqMk1{0%,9%{background:transparent;border-color:var(--line-2);transform:scale(1)}
13%{background:var(--green);border-color:var(--green);transform:scale(1.25)}
17%,90%{background:var(--green);border-color:var(--green);transform:scale(1)}
100%{background:transparent;border-color:var(--line-2);transform:scale(1)}}
@keyframes bqMk2{0%,37%{background:transparent;border-color:var(--line-2);transform:scale(1)}
41%{background:var(--green);border-color:var(--green);transform:scale(1.25)}
45%,90%{background:var(--green);border-color:var(--green);transform:scale(1)}
100%{background:transparent;border-color:var(--line-2);transform:scale(1)}}
@keyframes bqTick1{0%,10%{opacity:0}14%,90%{opacity:1}100%{opacity:0}}
@keyframes bqTick2{0%,38%{opacity:0}42%,90%{opacity:1}100%{opacity:0}}
@keyframes bqBar{0%,9%{width:0}14%,37%{width:50%}42%,90%{width:100%}100%{width:0}}
@keyframes bqBt{0%,50%{background:var(--field-2);border-color:var(--line-2)}
56%,90%{background:var(--accent);border-color:var(--accent)}
100%{background:var(--field-2);border-color:var(--line-2)}}
@keyframes bqBtOff{0%,50%{opacity:1}55%,90%{opacity:0}100%{opacity:1}}
@keyframes bqBtOn{0%,51%{opacity:0}57%,90%{opacity:1}100%{opacity:0}}
/* Entram deslizando, seguram pouco mais de um segundo e somem. Ler
"+1 inscrito" é rápido; mais tempo em tela vira enfeite parado em
vez de notificação. */
@keyframes bqToast1{0%,10%{opacity:0;transform:translateX(16px) scale(.9)}
14%,28%{opacity:1;transform:translateX(0) scale(1)}
34%,100%{opacity:0;transform:translateX(0) scale(.94)}}
@keyframes bqToast2{0%,38%{opacity:0;transform:translateX(16px) scale(.9)}
42%,56%{opacity:1;transform:translateX(0) scale(1)}
62%,100%{opacity:0;transform:translateX(0) scale(.94)}}
@media(max-width:980px){
.bq{grid-template-columns:1fr;gap:44px}
.bq-txt{text-align:center}
.bq-txt>p{margin-left:auto;margin-right:auto}
.bq-lista{max-width:400px;margin-left:auto;margin-right:auto;text-align:left}
}
@media(max-width:560px){
.bq-txt h2 br{display:none}
.bq-lista li{font-size:14.5px}
.bq-tela{padding:16px;border-radius:16px}
}
/* Sem movimento: a cena congela já resolvida. Congelar no meio do
caminho não explicaria nada. */
@media(prefers-reduced-motion:reduce){
.bq-ac,.bq-ac .mk,.bq-ac .mk svg,.bq-bar i,.bq-bt,.bq-bt span,.bq-toast{animation:none!important}
.bq-ac{background:var(--green-bg);border-color:var(--green-bd)}
.bq-ac .mk{background:var(--green);border-color:var(--green)}
.bq-ac .mk svg{opacity:1}
.bq-bar i{width:100%}
.bq-bt{background:var(--accent);border-color:var(--accent)}
.bq-bt .off{opacity:0}
.bq-bt .on{opacity:1}
}
/* =====================================================================
LOGIN / CADASTRO — tratamento svounk
Redefine só as superfícies do bloco `.auth` lá de cima. Os componentes
de dentro (.chk, .inp, .pwbar, .sep, .oauth, .msg) ficam como estão —
são usados em outras telas e não têm nada de errado.
A ideia: em vez de duas metades chapadas, o formulário vira um cartão
de vidro flutuando sobre o mesmo fundo animado da landing, e a coluna
da direita deixa de ser um bloco preenchido para virar conteúdo sobre
o mesmo chão, separado por um fio.
===================================================================== */
/* O `.auth` é filho direto do mas não é main/section/footer/.wrap,
então ficava de fora da regra de z-index — e o canvas, que é fixo e
posicionado, era pintado POR CIMA do formulário. As partículas
passavam na frente do texto. */
.auth{position:relative;z-index:1}
.auth-form{padding:52px 44px}
.auth-box{max-width:452px}
/* ---------- o cartão ---------- */
.auth-box{position:relative;padding:38px 36px 34px;
background:var(--card);border:1px solid var(--line);border-radius:22px;
box-shadow:var(--sh-2);overflow:hidden}
/* O fio de luz no topo. É ele que separa um cartão de uma caixa: dá a
impressão de que a luz vem de cima e bate na borda. */
.auth-box::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,var(--line-2) 40%,var(--line-2) 60%,transparent)}
/* ---------- voltar ---------- */
.auth-back{margin-bottom:0;padding:6px 13px 6px 9px;border-radius:99px;
border:1px solid var(--line);background:var(--card-2);
font-size:12.5px;transition:border-color .18s,color .18s}
.auth-back:hover{border-color:var(--line-3);color:var(--fg)}
/* Fica ACIMA do cartão, não dentro: é navegação da página, não do
formulário. Como o PHP o imprime dentro do .auth-box, sobe por
margem negativa em vez de mudar a marcação. */
.auth-box .auth-back{position:absolute;top:-46px;left:0}
.auth-box{margin-top:46px}
/* ---------- marca e título ---------- */
.auth-box .brand{margin-bottom:26px}
.auth-box .brand .wm{height:26px}
.auth-selo{display:inline-flex;align-items:center;gap:7px;
padding:5px 12px 5px 10px;margin-bottom:14px;border-radius:99px;
border:1px solid var(--line-2);background:var(--card-2);
font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:1.2px;
text-transform:uppercase;color:var(--muted)}
.auth-selo i{width:5px;height:5px;border-radius:99px;background:var(--green);flex:0 0 auto}
.auth-box h1{font-size:27px;letter-spacing:-1px;margin:0 0 8px}
.auth-box .lead{font-size:14.5px;margin-bottom:26px}
/* ---------- campos ---------- */
/* Rótulo técnico em mono e caixa alta. É a assinatura mais reconhecível
desse estilo: o campo fica com cara de painel, não de formulário. */
.auth-box .f{font-family:var(--mono);font-size:10.5px;font-weight:600;
letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.auth-box .fld{margin-bottom:18px}
.auth-box .inp{min-height:50px;border-radius:12px;background:var(--field)}
.auth-box .btn.full{min-height:50px;border-radius:12px;font-size:15px}
.auth-ft{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px}
/* ---------- coluna da direita ---------- */
/* Sem preenchimento: o fundo animado passa por baixo dos dois lados e a
página vira uma coisa só, em vez de duas metades coladas. */
.auth-side{background:none;padding:56px 52px}
.auth-side::before{inset:-24% -24% auto auto;width:560px;height:560px}
.auth-side .in{max-width:400px}
.auth-side .chip{font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase}
.auth-side h2{font-size:25px;letter-spacing:-.9px;margin:18px 0 26px}
/* Cada vantagem numa linha com fio embaixo — o mesmo recurso do cartão,
repetido em escala menor. */
.perk{padding:16px 0;gap:14px}
.perk .ic{width:36px;height:36px;border-radius:11px;background:var(--card-2);border-color:var(--line)}
.perk b{font-size:14px}
.perk span{font-size:13px}
@media(max-width:1120px){
.auth-form{padding:44px 32px}
.auth-side{padding:48px 36px}
}
@media(max-width:960px){
/* Sem a coluna da direita o cartão vai para o meio da tela. */
.auth{min-height:100vh;place-items:center}
.auth-form{padding:74px 20px 48px;width:100%}
.auth-box{margin-top:0}
.auth-box .auth-back{top:-44px}
}
@media(max-width:480px){
/* Numa tela estreita a moldura do cartão só rouba largura do campo:
vira página inteira, mantendo o fio de cima como remate. */
.auth-box{padding:28px 20px 26px;border-radius:16px;box-shadow:none}
.auth-box h1{font-size:23px}
.auth-form{padding:70px 14px 40px}
}
/* =====================================================================
CADASTRO — coluna única e larga
===================================================================== */
/* Sem o painel de vantagens ao lado, a tela vira uma coluna só, com o
cartão centrado. Quem chegou no cadastro já decidiu criar a conta: a
essa altura o argumento de venda só rouba largura dos oito campos. */
.auth.solo{grid-template-columns:1fr;place-items:center}
.auth.solo .auth-form{width:100%;padding:74px 24px 64px}
.auth-box.xl{max-width:720px}
/* Aviso da análise. Não é `.warn`: aquele é vermelho e lê como erro, e
aqui a informação é neutra — a conta vai ser conferida, não recusada. */
.cd-nota{display:flex;gap:11px;align-items:flex-start;margin-bottom:22px;
padding:13px 15px;border-radius:12px;
background:var(--card-2);border:1px solid var(--line)}
.cd-nota svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:var(--muted)}
.cd-nota p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}
.cd-nota b{color:var(--fg-2);font-weight:700}
.cd-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
/* A barra de força fica embaixo do par, valendo pelos dois campos. */
.auth-box .pwbar{margin:2px 0 6px}
/* ---------- onde vai divulgar ---------- */
.cd-canal{border:0;padding:0;margin:20px 0 22px;min-width:0}
.cd-canal legend{padding:0;margin-bottom:11px}
/* COLUNAS CONTADAS, E NÃO "QUANTAS COUBEREM"
São 10 redes, e só 5 ou 2 colunas fecham as fileiras. Com auto-fill,
a quantidade seguia a largura da tela: onde coubessem 3, 4 ou 6, o
último cartão sobrava sozinho numa fileira. Ao mudar a lista de
canaisDivulgacao() (includes/auth.php), refaça esta conta. */
.cd-grade{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.cd-rede{display:block;cursor:pointer;min-width:0}
.cd-rede input{position:absolute;opacity:0;width:0;height:0}
/* O cartão é IRMÃO do input, não o pai — assim o estado marcado sai com
`input:checked + .cx`, que funciona em qualquer navegador. Com :has()
a marcação seria menor, mas onde ela não existe o cartão escolhido
ficaria idêntico aos outros, que é o pior defeito num campo
obrigatório. */
.cd-rede .cx{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
height:100%;padding:15px 8px 13px;
background:var(--card);border:1px solid var(--line);border-radius:14px;
transition:border-color .18s,background .18s,transform .18s var(--ease)}
.cd-rede:hover .cx{border-color:var(--line-3);background:var(--card-2);transform:translateY(-2px)}
.cd-rede .ic{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
flex:0 0 auto;opacity:.82;transition:opacity .18s}
.cd-rede .ic svg{width:100%;height:100%;display:block}
.cd-rede b{font-size:12px;font-weight:600;color:var(--muted);text-align:center;
line-height:1.3;transition:color .18s;overflow-wrap:anywhere}
.cd-rede .mk{position:absolute;top:7px;right:7px;width:17px;height:17px;border-radius:99px;
background:var(--accent);color:var(--accent-fg);
display:flex;align-items:center;justify-content:center;
opacity:0;transform:scale(.4);transition:.18s var(--ease)}
.cd-rede .mk svg{width:9px;height:9px}
.cd-rede input:checked + .cx{border-color:var(--line-3);background:var(--card-2)}
.cd-rede input:checked + .cx .ic{opacity:1}
.cd-rede input:checked + .cx b{color:var(--fg)}
.cd-rede input:checked + .cx .mk{opacity:1;transform:none}
.cd-rede input:focus-visible + .cx{box-shadow:var(--ring);border-color:var(--line-3)}
/* Quando o servidor recusa o campo, o aro vermelho vai no grupo todo —
o erro é "nenhum escolhido", não um cartão específico. */
.cd-canal.err .cd-grade{border-radius:16px;box-shadow:0 0 0 1px var(--red),0 0 0 4px var(--red-bg)}
/* Abaixo de 640px não cabem 5 cartões de pé: viram 2 colunas, com o
ícone ao lado do nome. Deitado, o cartão fica baixo, e a lista inteira
ocupa menos altura que as fileiras de antes. O respiro da direita é
do sinal de marcado, que fica no canto. */
@media(max-width:639px){
.cd-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cd-rede .cx{flex-direction:row;justify-content:flex-start;gap:10px;padding:11px 28px 11px 12px}
.cd-rede .ic{width:26px;height:26px}
.cd-rede b{text-align:left}
}
@media(max-width:620px){
.auth.solo .auth-form{padding:70px 14px 44px}
/* Empilhado: em tela estreita duas colunas deixam cada campo com
largura de meia senha, e o texto digitado some para o lado. */
.cd-par{grid-template-columns:1fr;gap:0}
}
/* =====================================================================
CELULAR — ergonomia de toque
=====================================================================
Medido em 375x812, na home, com o site no ar:
18 alvos de toque abaixo de 40px
1 campo com fonte 15px
Nada disso vaza da tela nem quebra layout — por isso passou
despercebido. Incomoda de outro jeito: erra o toque e dá zoom sozinho.
===================================================================== */
@media (max-width: 760px) {
/* O CAMPO PRECISA DE 16px. NÃO É ESTÉTICA.
No iOS, tocar num campo com fonte MENOR que 16px faz o Safari dar
zoom na página inteira. A pessoa toca para digitar e o site salta;
para voltar, tem de pinçar a tela. É o defeito de celular mais
comum que existe, e a correção é um número.
15px vira 16px só aqui. No desktop continua 15. */
.inp input,
.inp select,
.inp textarea {
font-size: 16px;
}
/* Links do rodapé: 34px viram 44.
44px é a medida que a Apple publica como mínimo confortável, e ela
não é arbitrária — é a área que a polpa do dedo cobre. Abaixo disso
o toque erra o alvo, e num rodapé com sete links empilhados o erro
leva para a página errada.
Cresce por `padding`, e não por `height`: assim a área clicável
aumenta sem mexer no tamanho do texto nem no espaçamento visual. */
.ft-c a {
padding-block: 6px;
}
/* O crédito do rodapé tinha 18px de altura. */
.ft-b a {
display: inline-block;
padding-block: 8px;
}
/* A chave CPM normal / CPM Turbo. Dois botões colados de 34px: é
onde o toque errado troca uma escolha pela outra. */
.turbo-sw button {
min-height: 44px;
}
}
/* Marca em texto: entra quando a instalacao nao usa imagem (MARCA_* vazio).
Cabecalho vazio nao diz em que site a pessoa esta, e o link da marca
viraria uma area invisivel de clicar. */
.brand .wm-txt{
font-size:19px;font-weight:600;letter-spacing:-.5px;line-height:1;
color:var(--txt,#18181b);white-space:nowrap
}
.brand .wm-txt b{font-weight:400;opacity:.62}
footer .brand .wm-txt{font-size:16px}
/* =====================================================================
TELINHA DO BOT DE TELEGRAM (secao #bot)
A moldura NAO e nova: o cartao reaproveita `.bq-demo` e `.bq-tela`,
os mesmos da campanha de engajamento -- painel solido, borda, sombra
e o brilho verde por tras. So o miolo e daqui.
O CICLO -- 9s, tudo no mesmo relogio
6% /start entra
13% os tres pontinhos de "digitando"
21% a saudacao ocupa o lugar dos pontinhos
29% os dois botoes
35% o ponteiro entra pelo canto de baixo
44% chega no botao de acesso
46% clica: o ponteiro encolhe, a onda abre, o botao acende
51% o bot responde "Acesso liberado"
93% segura o resultado
100% volta ao inicio
Um relogio unico em vez de `animation-delay` por elemento, pela mesma
razao escrita la em cima na campanha: com delay cada animacao
reinicia na sua propria hora e a cena se desmonta em pedacos.
AS MENSAGENS ENTRAM SO POR OPACIDADE, e nunca por display. Elas
ocupam o espaco delas desde o primeiro quadro, entao o cartao tem
altura fixa o ciclo inteiro. Fazendo aparecer de verdade, o cartao
cresceria seis vezes por volta e a secao tremeria junto.
===================================================================== */
.tgm-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.tgm-av{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--field-2);
display:flex;align-items:center;justify-content:center;color:var(--fg)}
.tgm-av svg{width:18px;height:18px}
.tgm-id{flex:1;min-width:0}
.tgm-id b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.2px}
.tgm-id span{display:block;font-size:12px;color:var(--muted)}
.tgm-on{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
color:var(--muted);background:var(--card-2);border:1px solid var(--line);
border-radius:99px;padding:4px 9px}
.tgm-fluxo{padding-top:14px;display:flex;flex-direction:column;gap:10px}
.tgm-b{font-size:13.5px;line-height:1.5}
.tgm-bot{align-self:flex-start;max-width:250px;padding:10px 13px;
background:var(--card-2);border-radius:14px 14px 14px 4px}
.tgm-eu{align-self:flex-end;padding:8px 13px;font-weight:500;font-family:var(--mono);
background:var(--field);border:1px solid var(--line-2);border-radius:14px 14px 4px 14px}
/* O "digitando" fica SOBRE a saudacao, nao antes dela: no fluxo ele
empurraria tudo para baixo e devolveria ao sumir. */
.tgm-espera{position:relative;align-self:stretch}
.tgm-dig{position:absolute;top:0;left:0;opacity:0;display:flex;align-items:center;gap:5px;
padding:13px;background:var(--card-2);border-radius:14px 14px 14px 4px}
.tgm-dig i{width:6px;height:6px;border-radius:50%;background:var(--fg);display:block;
animation:tgmPonto 1.2s ease-in-out infinite}
.tgm-dig i:nth-child(2){animation-delay:.15s}
.tgm-dig i:nth-child(3){animation-delay:.3s}
@keyframes tgmPonto{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.tgm-bts{display:flex;flex-direction:column;gap:7px}
.tgm-bt{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
padding:11px 12px;border-radius:11px;font-size:12.5px;font-weight:700;
letter-spacing:.4px;text-transform:uppercase}
.tgm-bt svg{width:15px;height:15px;flex:0 0 auto}
/* O botao de acao usa o primario do site -- fundo --accent, texto
--accent-fg. E o mesmo .btn do cabecalho e do rodape. */
.tgm-bt.e1{background:var(--accent);border:1px solid var(--accent);color:var(--accent-fg);box-shadow:var(--sh-1)}
.tgm-bt.e2{background:var(--field);border:1px solid var(--line-2);color:var(--fg-2)}
.tgm-ok{align-self:flex-start;max-width:262px;padding:12px 13px;
background:var(--card-2);border:1px solid var(--line-2);border-radius:14px 14px 14px 4px}
.tgm-ok-t{display:flex;align-items:center;gap:8px}
.tgm-ok-t i{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--accent);
color:var(--accent-fg);display:flex;align-items:center;justify-content:center}
.tgm-ok-t i svg{width:11px;height:11px}
.tgm-ok-t b{font-size:14px;font-weight:800;letter-spacing:-.2px;color:var(--fg)}
.tgm-ok p{margin:7px 0 10px;font-size:13px;line-height:1.5;color:var(--fg-2)}
.tgm-ok .tgm-bt{background:var(--field-2);border:0;color:var(--fg);font-size:12px;
min-height:44px;padding:9px 12px;border-radius:10px}
/* O ponteiro e a onda ficam FORA do fluxo, presos ao cartao. */
.tgm-seta,.tgm-onda{position:absolute;top:0;left:0;pointer-events:none;opacity:0}
.tgm-seta{z-index:5}
.tgm-seta svg{width:21px;height:21px;display:block}
.tgm-onda{z-index:4;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;
border:2px solid var(--line-3)}
.tgm .tg1{animation:tgm1 9s var(--ease) infinite}
.tgm .tgm-dig{animation:tgmDig 9s var(--ease) infinite}
.tgm .tg2{animation:tgm2 9s var(--ease) infinite}
.tgm .tg3{animation:tgm3 9s var(--ease) infinite}
.tgm .tg4{animation:tgm4 9s var(--ease) infinite}
.tgm .e1{animation:tgmToque 9s var(--ease) infinite}
.tgm .tgm-seta{animation:tgmSeta 9s var(--ease) infinite}
.tgm .tgm-onda{animation:tgmOnda 9s var(--ease) infinite}
.tgm .tg1,.tgm .tg2,.tgm .tg3,.tgm .tg4{opacity:0}
@keyframes tgm1{0%,6%{opacity:0;transform:translateX(10px)}11%,93%{opacity:1;transform:none}100%{opacity:0;transform:translateX(10px)}}
@keyframes tgmDig{0%,13%{opacity:0}17%,20%{opacity:1}24%,100%{opacity:0}}
@keyframes tgm2{0%,21%{opacity:0;transform:translateY(8px)}26%,93%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
@keyframes tgm3{0%,29%{opacity:0;transform:translateY(8px)}34%,93%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
@keyframes tgm4{0%,51%{opacity:0;transform:translateY(8px)}57%,93%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
@keyframes tgmSeta{
0%,35%{opacity:0;transform:translate(296px,352px) scale(1)}
39%{opacity:1;transform:translate(258px,308px) scale(1)}
44%{opacity:1;transform:translate(170px,228px) scale(1)}
46%,47%{opacity:1;transform:translate(170px,228px) scale(.8)}
49%{opacity:1;transform:translate(170px,228px) scale(1)}
55%{opacity:0;transform:translate(196px,268px) scale(1)}
100%{opacity:0;transform:translate(296px,352px) scale(1)}
}
@keyframes tgmOnda{
0%,45%{opacity:0;transform:translate(170px,228px) scale(.1)}
47%{opacity:.6;transform:translate(170px,228px) scale(.35)}
54%,100%{opacity:0;transform:translate(170px,228px) scale(1)}
}
@keyframes tgmToque{
0%,45%{filter:none;transform:none}
47%,49%{filter:brightness(.86);transform:scale(.99)}
53%,100%{filter:none;transform:none}
}
/* Quem desligou movimento no sistema ve a conversa inteira, parada --
e nao um cartao vazio, que e o que sobraria com as animacoes mortas
e as mensagens em opacidade zero. */
@media (prefers-reduced-motion: reduce){
.tgm .tg1,.tgm .tg2,.tgm .tg3,.tgm .tg4{opacity:1;transform:none;animation:none}
.tgm .tgm-dig,.tgm .tgm-seta,.tgm .tgm-onda{display:none}
.tgm .e1{animation:none}
}
@media (max-width:920px){
.tgm-bot,.tgm-ok{max-width:none}
.tgm .tgm-seta,.tgm .tgm-onda{display:none}
}
/* ---------------------------------------------------------------------
#bot SEM COR DE ACENTO
A secao herda tres regras verdes de `.bq`, que foram escritas para a
campanha de engajamento. Aqui elas sao desligadas.
O criterio e o do simulador de ganhos: la o acento e `--et: var(--fg)`,
e o destaque vem de SUPERFICIE, BORDA E SOMBRA -- nunca de matiz. O
verde so entra quando o Turbo liga, porque ali ele significa uma coisa.
Numa secao institucional nao significa nada, e cor sem significado e
so barulho.
--------------------------------------------------------------------- */
#bot .bq-txt .eyebrow{color:var(--muted-2)}
/* O `em` continua marcando a quebra da frase, mas por peso e por linha,
nao por cor: o titulo inteiro fica no branco do resto da pagina. */
#bot .bq-txt h2 em{color:inherit}
/* O brilho atras da telinha passa a ser o mesmo do cartao de chamada do
rodape -- branco a 6%, que no preto le como profundidade e nao como
cor. */
#bot .bq-demo::before{background:radial-gradient(closest-side,rgba(255,255,255,.06),transparent 70%)}
html[data-theme="light"] #bot .bq-demo::before{background:radial-gradient(closest-side,rgba(16,24,40,.05),transparent 70%)}
/* A nota de receita fecha a lista. O desenho e o da `.etp-nota` do
simulador de ganhos -- linha de cima, texto apagado, o que importa em
negrito branco -- porque as duas fazem a mesma coisa: dizer em uma
frase o que os numeros acima significam em dinheiro. */
.bot-paga{border-top:1px solid var(--line);margin-top:24px;padding-top:18px;
font-size:14.5px;line-height:1.65;color:var(--muted);max-width:52ch}
.bot-paga b{color:var(--fg);font-weight:700}
.bot-paga a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px;
text-decoration-color:var(--line-3)}
.bot-paga a:hover{color:var(--fg);text-decoration-color:var(--fg-2)}