/* ============================================================
TrustPanel — Design System
Compartilhado por todas as paginas.
Fontes via no : Archivo, IBM Plex Sans, IBM Plex Mono
============================================================ */
/* ============================================================
PALETA
O tema deixa de ser o creme da marca e passa a ser o cinza-frio
do design de referencia, por decisao do time. O que muda de
papel, e nao so de valor:
fundo creme #FBF7EA -> cinza #EFF2F6, alternando com branco
tinta #2F473F -> quase-preto #0E1A14
acao #008440 -> #0B7A38
escuro #2F473F -> #16332A
O filete passa a ser uma cor solida (#DCE3EA) e nao mais tinta
com alfa: sobre dois fundos diferentes, alfa dava dois cinzas.
Um valor da referencia nao foi copiado: o cinza de texto fraco
#8A9891 da 2,68:1 sobre o fundo e reprova em AA. Vira #5A6B63,
que da 5,03:1 e mantem a mesma leitura de "apagado".
Contrastes medidos: titulo 15,90:1 | corpo 6,82:1 | verde como
texto 4,85:1 | branco no botao 5,45:1 | texto no bloco escuro
11,95:1 | sinal no escuro 5,79:1.
============================================================ */
:root {
--bg:#EFF2F6;
--bg-2:#FFFFFF;
--bg-3:#E3E9EF;
--accent:#0B7A38;
--accent-2:#0A6B31;
/* Estes dois parecem apelido aqui -- --accent-deep e identico a --accent e
--surface e identico a --bg-2 -- e NAO sao: .section--dark e .quote-card
redefinem os dois no escopo com outro valor. Token que um escopo
redefine nao e apelido, e papel; colapsar por igualdade no :root apaga a
unica diferenca que ele tinha, e ela so aparece no escuro. */
--accent-deep:#0B7A38;
--surface:#FFFFFF;
--light:#FFFFFF;
--light-ink:#0E1A14;
--accent-ink:#FFFFFF;
--ink:#0E1A14;
/* Escada de tinta, numerada por posicao e nao por opacidade. Os nomes
antigos -- --ink-72, --ink-80, --ink-66, --ink-55, --ink-45 -- eram
porcentagens de um desenho que ja tinha saido: --ink-72 e --ink-80
valiam a MESMA cor, e --ink-45 e --ink-55 tambem, entao o numero nao
dizia mais qual era o mais claro. Aqui o numero e a posicao na
escada, que e o idioma que --bg/--bg-2/--bg-3 e --accent/--accent-2
ja falavam neste mesmo bloco. */
--ink-2:#2A3A33;
--ink-3:#47574F;
--ink-4:#5A6B63;
--dark:#16332A;
--dark-ink:#EAF2ED;
--crit:#C0392F;
--line:#DCE3EA;
--line-2:#C3D0D9;
--line-accent:rgba(11,122,56,.18);
--line-accent-2:rgba(11,122,56,.34);
--surface-2:#F5F7FA;
--maxw:1200px;
/* Recuo lateral unico. Convivia 40px em .section, 28px em hero, presenca,
contato, features/how, nav e rodape, e um !important de 18px abaixo de
520 que so alcancava .section: acima de 1280 ninguem via, porque a
medida de 1200 e mais estreita que a tela e centraliza sozinha, mas
abaixo disso cada secao passava a nascer numa coluna diferente. */
--gutter:28px;
/* Raio de midia. A pagina inteira e de canto reto por decisao de projeto, e
agora isso e simplesmente a ausencia de raio: os 33 border-radius:0 que
viviam espalhados nao cancelavam regra nenhuma -- eram fosseis de um
desenho que ja tinha saido. Este token existe so para a capa do video:
superficie
grande, com imagem sangrando ate a borda, e o unico lugar onde o canto
reto faz a capa parecer print colado em vez de player. Quem consome sao
o cartao e o selo -- o selo deriva daqui, nao chuta um valor proprio. */
--radius-media:16px;
--font-sans:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
--font-display:'Archivo',var(--font-sans);
--font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
/* ---------- Reset / base ---------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
margin:0;
background:var(--bg);
color:var(--ink);
font-family:var(--font-sans);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
::selection { background:rgba(0,132,64,.3); color:var(--ink); }
input, textarea { font-family:inherit; }
a { color:inherit; }
img { max-width:100%; }
h1 em, h2 em, h3 em{ font-style:normal; color:inherit; }
/* ---------- Layout helpers ---------- */
.section { padding:clamp(64px,7vw,96px) var(--gutter); background:var(--bg); border-bottom:1px solid var(--line); }
.section--2 { background:var(--bg-2); }
.section--light { background:var(--light); color:var(--light-ink); }
/* Rotulo de secao: mono, caixa alta, com o indice de leitura na frente.
O numero e indice, nao etapa de processo -- por isso e aria-hidden: para
quem ouve a pagina ele nao acrescenta nada e ainda atrapalha. */
.eyebrow {
display:flex; align-items:baseline; gap:10px;
font-family:var(--font-mono); font-size:11px; font-weight:400;
letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep);
margin-bottom:16px;
}
.eyebrow-num::after { content:" —"; }
/* ---------- Buttons ---------- */
/* Botao retangular, com borda da propria cor e sem sombra: no sistema da
referencia quem separa o botao do fundo e o contraste, nao a elevacao.
Saiu o glowPulse junto -- pulso infinito nao existe naquele design, e era
uma das decisoes que estavam em aberto no diagnostico do hero. */
.btn {
display:inline-flex; align-items:center; gap:12px;
text-decoration:none; font-family:var(--font-display); font-weight:600;
font-size:15px; letter-spacing:-.01em;
padding:15px 24px; border:1px solid transparent; cursor:pointer;
transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.btn--primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn--primary:hover { background:var(--accent-2); border-color:var(--accent-2); }
/* Variante escura: na referencia o CTA do fim da secao do problema e preto,
para nao competir com o verde do CTA principal da pagina. */
.btn--ink { background:var(--ink); border-color:var(--ink); color:#FFFFFF; }
.btn--ink:hover { background:#1D2E26; border-color:#1D2E26; }
.btn--lg { font-size:16px; padding:17px 28px; }
.btn--sm { padding:13px 22px; font-size:14px; }
.btn--block { width:100%; justify-content:center; }
/* ---------- Header / nav ---------- */
/* A barra e a mesma superficie da pagina, e nao uma faixa branca por cima
dela: branco sobre o creme do hero desenhava uma tarja que separava o logo
do conteudo que ele encima, sem que houvesse nada ali para separar. Opaca
ela continua, porque o conteudo rola por baixo -- o que muda e a cor.
O .scrolled sobrou so com o fio de baixo: com a barra ja opaca, o blur nao
tem o que borrar e o unico sinal util e a separacao do conteudo que passa
por baixo -- e agora e o unico sinal de que existe uma barra. */
.site-header {
position:fixed; top:0; left:0; right:0; z-index:200;
background:var(--bg);
border-bottom:1px solid transparent;
transition:border-color .35s ease;
}
.site-header.scrolled { border-bottom-color:var(--line-accent); }
/* A medida soma os dois recuos para o logo nascer na mesma linha vertical do
titulo das secoes. Com max-width:1200 e 28px de recuo por dentro, a marca
caia 28px a direita de tudo que ela encima. */
.nav-inner { max-width:calc(var(--maxw) + var(--gutter) * 2); margin:0 auto; padding:16px var(--gutter); display:flex; align-items:center; gap:26px; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex-shrink:0; }
.brand-logo { height:44px; width:auto; display:block; }
.site-footer .brand-logo { height:36px; }
.nav-inner > .locale { margin-left:auto; }
/* ---------- Language switcher ---------- */
.locale { display:inline-flex; gap:4px; font-size:12.5px; font-family:var(--font-mono); color:var(--ink-4); }
.locale span { cursor:pointer; padding:3px 6px; transition:color .2s, background .2s; }
.locale span:hover { color:var(--accent-deep); }
.locale span.active { background:var(--line-accent); color:var(--accent-deep); }
/* ---------- Cards ---------- */
.card { padding:22px; background:var(--surface); border:1px solid var(--line); }
.card--feature { position:relative; overflow:hidden; padding:28px 30px 30px; }
/* .card-glow saiu junto com o tilt: era o halo verde que seguia o cursor
dentro do cartao, e sem o handler nao tinha quem o posicionasse. */
/* ---------- Video embed (lite YouTube facade) ---------- */
/* Sem fio de contorno: a capa vai de borda a borda do cartao e quem separa
o video do fundo e a elevacao, nao um risco de 1px por cima da imagem.
A sombra vem em tres camadas -- contato, corpo e ambiente -- em vez de
um unico borrao de 100px: uma sombra so, muito aberta e muito escura, le
como mancha atras do cartao; empilhada, le como altura. */
.video-embed { position:relative; aspect-ratio:16/9; border-radius:var(--radius-media); overflow:hidden; background:var(--bg-3); cursor:pointer;
box-shadow:0 1px 2px rgba(29,46,40,.06),
0 10px 24px -10px rgba(29,46,40,.20),
0 44px 84px -32px rgba(29,46,40,.40); }
.video-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-embed::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg,rgba(47,71,63,.05),rgba(47,71,63,.45)); transition:background .25s; pointer-events:none; }
.video-embed:hover::after { background:linear-gradient(180deg,rgba(47,71,63,.02),rgba(47,71,63,.3)); }
.video-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; box-shadow:0 12px 40px -8px rgba(0,132,64,.75); transition:transform .25s; z-index:2; }
.video-play::before { content:''; position:absolute; inset:0; border-radius:50%; background:var(--accent); animation:pulseRing 2.4s ease-out infinite; z-index:-1; }
.video-play svg { width:30px; height:30px; margin-left:3px; }
.video-embed:hover .video-play { transform:translate(-50%,-50%) scale(1.08); }
.video-embed.is-playing::after, .video-embed.is-playing .video-play, .video-embed.is-playing .video-thumb { display:none; }
.video-iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:inherit; }
/* ---------- Forms ---------- */
.form {
padding:30px;
background:#FFFFFF;
border:1px solid var(--line); box-shadow:0 24px 60px -34px rgba(47,71,63,.45);
}
.form-fields { display:flex; flex-direction:column; gap:14px; }
.field {
padding:14px 16px; background:#FFFFFF;
border:1px solid var(--line-2); color:var(--ink); font-size:15px; outline:none;
transition:border-color .2s;
}
.field:focus { border-color:var(--accent); }
.field--error, .field--error:focus { border-color:var(--crit); }
textarea.field { resize:vertical; }
/* ---------- Footer ---------- */
.site-footer { padding:70px var(--gutter) 34px; background:var(--bg); border-top:1px solid var(--line); }
.footer-links { display:flex; flex-direction:column; gap:11px; }
.footer-links a { font-size:14px; color:var(--ink-4); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--ink); }
.footer-bottom { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding-top:24px; font-size:12.5px; color:var(--ink-4); }
/* ---------- Legal / article pages ---------- */
.legal-page { padding:130px 28px 80px; background:radial-gradient(900px 480px at 50% -5%,rgba(0,132,64,.08),transparent 60%),var(--bg); }
.legal-content { max-width:720px; margin:0 auto; }
.legal-header { margin-bottom:40px; }
.legal-title { font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.5vw,46px); line-height:1.08; letter-spacing:-.02em; margin:0 0 14px; }
.legal-subtitle { font-size:17px; line-height:1.6; color:var(--ink-3); margin:0 0 16px; max-width:56ch; }
.legal-update { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-4); }
.legal-section { margin:0 0 30px; }
.legal-section h2 { font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--ink); margin:34px 0 12px; }
.legal-section h3 { font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); margin:24px 0 8px; }
/* Medida de linha: a 820px de coluna o paragrafo passava de 100 caracteres,
e o olho perde a linha na volta. O texto corre em 72ch; titulos e listas
continuam usando a largura cheia da coluna. */
.legal-section p, .legal-section li { font-size:15.5px; line-height:1.75; color:var(--ink-2); max-width:62ch; }
.legal-section ul { padding-left:20px; margin:12px 0; }
.legal-section li { margin-bottom:8px; }
.legal-section strong, .legal-content strong { color:var(--ink); }
.legal-section a, .legal-contact a { color:var(--accent); text-decoration:none; }
.legal-section a:hover, .legal-contact a:hover { text-decoration:underline; }
.legal-highlight { margin:16px 0; padding:18px 20px; background:rgba(0,132,64,.08); border:1px solid var(--line-accent-2); }
.legal-highlight p { margin:0; color:var(--ink); }
.legal-contact { margin-top:12px; }
.back-to-top { position:fixed; bottom:24px; right:24px; width:46px; height:46px; border-radius:50%; border:none; background:var(--accent); color:var(--accent-ink); font-size:18px; line-height:1; cursor:pointer; display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; box-shadow:0 10px 30px -8px rgba(0,132,64,.6); z-index:150; }
.back-to-top.show { opacity:1; pointer-events:auto; }
.back-to-top:hover { transform:translateY(-3px); }
/* ---------- Brazil map (Presença Nacional) ---------- */
.presence-map { position:relative; width:520px; max-width:100%; margin:0 auto; filter:drop-shadow(0 22px 40px rgba(47,71,63,.22)); }
.presence-map img { display:block; width:100%; height:auto; }
/* .state e .state-active mudaram de casa: o mapa virou Images/mapa-brasil.svg
e leva as proprias regras dentro. Eram 67KB de path no meio do HTML, no
caminho critico, para mostrar um numero. O hover que levantava o mapa saiu
junto com os outros movimentos decorativos. */
.map-stat { position:absolute; top:8px; left:8px; z-index:2; display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid var(--line-accent-2); background:#FFFFFF; box-shadow:0 14px 30px -16px rgba(47,71,63,.5); }
.map-stat-num { font-family:var(--font-display); font-size:40px; font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--ink); }
.map-stat-label { font-family:var(--font-mono); font-size:11px; line-height:1.3; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; }
.features, .how { padding:clamp(72px,9vw,110px) var(--gutter); background:var(--bg); }
.how { background:var(--bg-2); }
.steps { display:flex; flex-direction:column; gap:20px; }
.step { display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:24px; background:var(--surface); border:1px solid var(--line-accent); }
.feat{ padding:28px; background:var(--surface); border:1px solid var(--line-accent); }
.feat h3{ font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); margin:0 0 8px; }
.feat p{ font-size:14.5px; line-height:1.6; color:var(--ink-3); margin:0; }
@media (max-width:900px) {
.step { grid-template-columns:auto 1fr; }
}
/* ============================================================
Landing (index) — componentes extraídos dos estilos inline
Valores idênticos aos que estavam inline (migração 1:1).
Obs.: os atributos data-* (grids) são mantidos no HTML porque
o CSS responsivo (mais abaixo) depende deles.
============================================================ */
/* larguras de conteúdo */
/* Medida unica da pagina. Havia .wrap, .container e quatro .wrap--NNN, e os
seis valiam a MESMA coisa: 1160, 1100, 1000 e 920 eram todos 1200px depois
que a pagina unificou a medida -- o nome prometia uma largura e o CSS
entregava outra, em quatro lugares. Nome com numero dentro e uma promessa
que o arquivo tem de manter para sempre; .wrap nao promete nada e por isso
nao pode mentir. A largura vem do token, que e o unico dono dela. */
.wrap { max-width:var(--maxw); margin:0 auto; }
/* Cabecalho de secao: rotulo, titulo e lede empilhados, nascendo na mesma
linha vertical do corpo da secao.
Isto era .rail + .rail--head, uma calha lateral de 300px com o rotulo preso
a esquerda -- a assinatura do desenho de referencia. A calha nao sobreviveu
ao uso: os sete cabecalhos da pagina traziam --head, que a desmontava, e
nenhum outro elemento usava .rail. Na calha o titulo nascia 356px (300 da
coluna + 56 do gap) a direita do proprio conteudo que ele titula, porque o
corpo da secao -- grid de cartoes, lista, faixa -- comeca na borda do .wrap
e nao na coluna 2; um titulo que nao se alinha com nada do que encima le
como descuido, nao como composicao. Sete usos de sete desmontando a calha
nao e excecao, e a regra, e o que sobrava da calha era codigo que so
existia para ser sobrescrito tres linhas abaixo.
Com uma coluna so, os grid-column:1 que a versao anterior precisava
declarar viraram o proprio padrao do grid, e sobra o unico ajuste real: a
.eyebrow fecha em 14px em vez dos 16px que ela usa solta. O display:grid
fica porque impede o colapso de margem entre o rotulo e o titulo. */
.sec-head { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; margin-bottom:44px; }
.sec-head > .eyebrow { margin-bottom:14px; }
/* stacks (flex column com gap) */
.stack-12 { display:flex; flex-direction:column; gap:12px; }
.stack-26 { display:flex; flex-direction:column; gap:26px; }
.center-flex { display:flex; justify-content:center; }
.rel { position:relative; }
/* seções com fundo próprio */
.sec-clip { position:relative; overflow:hidden; }
.sec-hero { position:relative; overflow:hidden; padding:150px var(--gutter) 90px;
background:radial-gradient(1100px 620px at 78% 8%,rgba(47,71,63,.055),transparent 60%),
radial-gradient(900px 500px at 8% 90%,rgba(47,71,63,.035),transparent 55%),var(--bg); }
.sec-presence { padding:clamp(72px,9vw,110px) var(--gutter);
background:radial-gradient(680px 340px at 50% 20%,rgba(47,71,63,.04),transparent 60%),var(--bg); }
.sec-contact { padding:clamp(72px,9vw,120px) var(--gutter);
background:radial-gradient(800px 400px at 80% 0%,rgba(47,71,63,.05),transparent 60%),var(--bg-2); }
/* ---------- Clientes (marquee de logos) ---------- */
/* Padding horizontal fica no .wrap, nao na secao: o marquee precisa sangrar de
ponta a ponta. Separa-se dos vizinhos por borda, nao por cor. */
.sec-clients { padding:clamp(64px,8vw,96px) 0; background:var(--bg-2);
border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
/* Mesma origem das demais secoes. A secao e full-bleed (a faixa de logos
precisa correr de borda a borda), entao o recuo lateral mora no wrap, e nao
na secao. Com border-box, o recuo saia de dentro dos 1200 e punha o
cabecalho 28px a direita de todo o resto da pagina; somando os dois recuos
a medida, sobram os mesmos 1200 uteis na mesma linha vertical das demais
secoes, e em tela estreita o recuo continua afastando o texto da borda. */
.sec-clients .wrap{ max-width:calc(var(--maxw) + var(--gutter) * 2); padding:0 var(--gutter); }
/* Dois seletores de propósito: o cabecalho da faixa de clientes e definido depois no arquivo e, com
especificidade igual, venceria o margin:0 auto e jogaria o head para a esquerda. */
.sec-clients .sec-head--clients { margin:0 0 40px; }
/* Fade nas bordas: as logos surgem e somem em vez de serem cortadas. */
/* Faixa de clientes em carrossel. O loop CSS desloca o track em exatamente um
conjunto, entao main.js mede o conjunto real e clona ate cobrir a tela; a
emenda fecha sozinha quando um cliente entra ou sai. --set em 0px sem JS
deixa a animacao em no-op, que e o estado seguro. */
.clients-strip { -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }
.clients-track { --chip-gap:16px; --set:0px;
display:flex; align-items:center; width:max-content;
animation:clients-scroll 34s linear infinite; will-change:transform; }
@keyframes clients-scroll { from{transform:translateX(0)}
to{transform:translateX(calc(var(--set) * -1))} }
/* Pausa no hover e no foco: sem isso nao da para olhar um alvo em movimento. */
.clients-strip:hover .clients-track,
.clients-strip:focus-within .clients-track { animation-play-state:paused; }
/* Sem cartao: a secao e branca e o chip tambem era, entao a moldura so
desenhava retangulos fantasma. Os logos correm soltos sobre o branco. */
/* A largura acompanha a marca, com piso de 134. Travada em 134 sobravam 106px
uteis, e as tres logos mais largas -- Escrinorte, Premix e ADN -- passavam
disso e vazavam por cima das vizinhas (a Escrinorte em 61px, 30 para cada
lado), que e o corte que se via na faixa. Sem moldura, chip de largura fixa
tambem nao ajudava o ritmo: uma marca estreita ganhava 24px de ar em cada
lado e uma larga nenhum, entao o intervalo aparente pulava de logo para
logo. Com largura livre, o intervalo e sempre o mesmo. */
.client-chip { flex:0 0 auto; margin-right:var(--chip-gap); display:grid; place-items:center;
min-width:134px; height:80px; padding:14px; background:var(--bg-2); }
.client-chip img { width:auto; height:auto; max-height:46px; max-width:100%;
object-fit:contain; display:block; }
/* Chaveado por data-logo, e nao por alt: main.js clona o conjunto ate cobrir
a tela e zera o alt dos clones (leitor de tela e Tab so veem as originais).
Com o seletor preso ao alt, nenhuma destas regras alcancava um clone: o
primeiro conjunto saia com estas alturas e todos os seguintes com a regra
generica, entao a mesma marca aparecia de dois tamanhos na mesma faixa.
data-logo vive no chip, sobrevive ao cloneNode e nao e texto acessivel. */
/* Equilibrio optico. Travar todos na mesma altura trata desigual como igual:
um logo empilhado gasta metade da altura no simbolo e o nome sai minusculo,
enquanto um emblema denso grita. Medi area renderizada x cobertura de tinta
de cada marca e ajustei uma por uma, conferindo na tela. */
.client-chip[data-logo="escrinorte"] img { max-height:50px; max-width:200px; }
.client-chip[data-logo="grupo-antaris"] img { max-height:50px; }
.client-chip[data-logo="multicontabil"] img { max-height:50px; }
.client-chip[data-logo="premix"] img { max-height:40px; max-width:154px; }
.client-chip[data-logo="mafa"] img { max-height:50px; }
.client-chip[data-logo="giacomin"] img { max-height:50px; }
.client-chip[data-logo="transterra"] img { max-height:50px; }
.client-chip[data-logo="real"] img { max-height:50px; }
/* O arquivo da ADN e a versao negativa, feita para fundo escuro: o simbolo tem
uma petala branca e o texto e branco, entao sobre o branco da secao sobrava
so a gota amarela. Em vez de recolorir a marca de um cliente, ela ganha a
placa escura para a qual foi desenhada. Sai quando chegar a versao positiva. */
/* A placa vai no proprio img: no layout parado o chip ocupa um terco da
fileira, e a placa no chip viraria uma barra larga com o logo perdido. */
.client-chip--placa img { max-height:34px; box-sizing:content-box; padding:11px 13px;
background:var(--dark); }
@media (max-width:768px){
.sec-head--clients { margin-bottom:32px; }
.clients-track { --chip-gap:34px; }
.client-chip img { max-height:46px; }
.client-chip[data-logo="escrinorte"] img { max-height:48px; max-width:160px; }
.client-chip[data-logo="grupo-antaris"] img { max-height:50px; }
.client-chip[data-logo="multicontabil"] img{ max-height:50px; }
.client-chip[data-logo="premix"] img { max-height:32px; max-width:124px; }
.client-chip[data-logo="mafa"] img { max-height:43px; }
.client-chip[data-logo="giacomin"] img { max-height:40px; }
.client-chip[data-logo="transterra"] img { max-height:45px; }
.client-chip[data-logo="real"] img { max-height:50px; }
.client-chip--placa img { max-height:27px; padding:9px 11px; }
}
/* head de seção reutilizável */
/* eyebrow variações (a .eyebrow base já existe acima) */
.eyebrow--onlight { color:var(--accent-deep); }
/* títulos de seção (o .section-title base já existe; aqui variam tamanho/lh/margem) */
/* Um tamanho de titulo de secao, nao tres. Havia 44, 46 e 48px em uso --
uma diferenca que ninguem enxerga e que nao codificava hierarquia
nenhuma, ja que todas as tres eram
do mesmo nivel. Variacao sem
intencao le como descuido. O modificador de entrelinha fica, porque
titulo de duas linhas realmente pede menos respiro que o de uma. */
.s-title { font-family:var(--font-display); font-weight:700; line-height:1.1; letter-spacing:-.02em; margin:0; font-size:clamp(28px,4vw,44px); }
.s-title--lh108{ line-height:1.08; }
.mt-4 { margin-top:4px; }
.mb-12 { margin-bottom:12px; }
.mb-14 { margin-bottom:14px; }
.mb-16 { margin-bottom:16px; }
.mb-20 { margin-bottom:20px; }
/* lede de seção */
.s-lede { font-size:17px; line-height:1.6; color:var(--ink-3); margin:0; }
.s-lede--165 { font-size:16.5px; }
.s-lede--64 { color:rgba(47,71,63,.64); }
/* Medida de leitura, e nao centralizacao: o modificador so encurta a linha.
Centrado, era a unica lede da pagina que nao nascia junto do titulo dela. */
.s-lede--narrow{ max-width:600px; }
.how-lede { font-size:17px; color:rgba(47,71,63,.64); margin:0; }
/* ---- HERO ---- */
/* A malha cobria a largura inteira e o lado esquerdo era onde ela mais
aparecia -- justamente atras da headline, que e o que precisa de silencio.
Agora fica so na metade do visual, com mascara dissolvendo a borda interna
para nao virar um retangulo, e a opacidade derruba o traco: ela e ambiente,
nao conteudo. A tinta continua no canvas (main.js), fora do passe de
paleta; o que muda aqui e area e presenca. */
.hero-mesh { position:absolute; top:0; bottom:0; right:0; left:auto;
width:min(52%,860px); height:100%; opacity:.5;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%);
mask-image:linear-gradient(90deg,transparent 0,#000 32%);
pointer-events:none; z-index:0; }
/* No empilhado nao existe "ao lado do visual": a malha cairia em cima do
texto. Sai da tela e sai da CPU (o guarda esta no main.js). */
@media (max-width:860px){ .hero-mesh { display:none; } }
/* .hero-anim saiu: era um gradiente verde varrendo o hero em animacao
infinita -- o quinto sistema de movimento, e o unico que ainda lavava
a secao inteira com a cor de acao. */
.hero-inner { position:relative; z-index:2; max-width:1240px; margin:0 auto; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:64px; align-items:center; }
.hero-badge { display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 12px; border:1px solid var(--line); background:var(--bg-2); font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:400; color:var(--ink-2); margin-bottom:34px; }
.hero-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:tpPulse 2.4s ease-in-out infinite; }
.hero-h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(38px,4.2vw,60px); line-height:1.04; letter-spacing:-.035em; margin:0 0 26px; text-wrap:pretty; }
/* O verde volta para dentro da headline, e so aqui. Na referencia nenhuma
outra h2 tem trecho colorido, entao a regra e do hero e nao global: se
virar global, o verde deixa de significar "esta e a promessa da pagina". */
.hero-h1 em { font-style:normal; color:var(--accent); }
.hero-lede { font-size:17px; line-height:1.62; color:var(--ink-3); max-width:520px; margin:0 0 34px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px; }
/* Faixa da base do hero. Sangra de ponta a ponta anulando os 28px de padding
lateral da secao, para o fio dela casar com a borda da secao de clientes
logo abaixo -- um fio inset sobre um fio full-bleed le como descuido.
A cor do texto era rgba(47,71,63,.62), que sobre o creme fica abaixo do
piso de contraste; sobe para --ink-72, que e o piso medido. */
/* Dois fios empilhados a 18px de distancia fechavam o hero: este, sangrando
de borda a borda, e o de .hero-seals, preso a medida de 1200. O que
sangra nao encostava em nada e so duplicava o de baixo. Fica o alinhado. */
.hero-base { margin-top:24px; margin-inline:calc(var(--gutter) * -1); padding:18px var(--gutter); }
.hero-seals { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line);
max-width:1200px; margin-inline:auto; }
.hero-seal { display:flex; align-items:baseline; gap:12px; padding:18px 24px 18px 0;
font-size:14px; color:var(--ink-2); }
.hero-seal + .hero-seal { border-left:1px solid var(--line); padding-left:24px; }
.hero-seal-n { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--accent-deep); }
@media (max-width:760px){
.hero-seals { grid-template-columns:1fr; }
.hero-seal + .hero-seal { border-left:0; border-top:1px solid var(--line); padding-left:0; }
}
.hero-visual { position:relative; }
/* ---- ESTATÍSTICAS ---- */
/* ---- PLATAFORMA ---- */
.mini-card { padding:22px; background:var(--surface); border:1px solid var(--line); }
.mini-head { display:flex; align-items:center; gap:11px; margin-bottom:9px; }
.mini-ico { width:34px; height:34px; background:rgba(47,71,63,.07); border:1px solid var(--line-2); display:grid; place-items:center; color:var(--accent); }
.mini-ico svg { width:18px; height:18px; }
.mini-label { font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); }
.mini-desc { margin:0; font-size:14px; line-height:1.55; color:rgba(47,71,63,.62); }
/* ---- RECURSOS (feature cards; usa .card .card--feature) ---- */
/* Filete unico entre os cartoes, em vez de quatro caixas soltas com espaco:
a grade da referencia e uma malha, e nao uma colecao. O gap de 1px sobre um
fundo de filete e o que desenha a linha interna sem dobrar borda. */
.features-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.features-grid > .card--feature { border:0; }
.feat-num { display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--accent-deep); margin-bottom:14px; }
/* .feat-tag saiu: 01-04 numerava quatro beneficios paralelos como se
fossem sequencia, e ALERTAS/SEGURANCA/GOVERNANCA/AUDITORIA devolvia o
vocabulario de recurso logo acima dos titulos que trabalharam para
evita-lo. A numeracao continua na implantacao, que e sequencia real. */
.feat-title { position:relative; font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.28; color:var(--ink); margin:0 0 12px; letter-spacing:-.02em; }
.feat-desc { position:relative; font-size:15px; line-height:1.62; color:var(--ink-3); margin:0; }
/* ---- EMPRESAS (seção clara) ---- */
.corp-desc { font-size:16.5px; line-height:1.65; color:rgba(47,71,63,.7); margin:0 0 22px; }
.risk-row { display:flex; align-items:flex-start; gap:12px; font-size:15px; color:rgba(47,71,63,.78); font-weight:500; }
.risk-mark { width:22px; height:22px; margin-top:-1px; flex:none; background:rgba(47,71,63,.07); display:grid; place-items:center; color:var(--ink-2); font-size:13px; }
.quote-card { margin:0; padding:34px 36px; background:var(--bg-2); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.quote-mark { display:none; }
.quote-text { margin:0 0 22px; font-size:16px; line-height:1.65; font-weight:400; color:var(--ink-2); }
.quote-cap { display:flex; align-items:center; gap:13px; }
.quote-who { display:block; font-weight:600; font-size:15px; }
/* ---- COMO FUNCIONA (steps) ---- */
.step-row { position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); gap:0 24px; align-items:start; padding:22px 0; border-top:1px solid var(--line); }
.step-num { font-family:var(--font-mono); font-size:14px; letter-spacing:.04em; color:var(--ink-4); padding-top:2px; }
.step-box { padding:0; border:0; background:none; }
.step-h { font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.015em; color:var(--ink); margin:0 0 6px; }
.step-p { margin:0; font-size:15px; line-height:1.62; color:var(--ink-3); }
.how-callout { margin-top:38px; display:flex; align-items:center; gap:13px; padding:18px 22px; background:var(--surface-2); border:0; border-left:3px solid var(--accent); }
.how-check { width:34px; height:34px; flex:none; background:rgba(47,71,63,.1); display:grid; place-items:center; color:var(--ink-2); font-weight:700; }
.how-callout-text { font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); }
/* ---- CONTATO ---- */
.form-title { font-family:var(--font-display); font-weight:600; font-size:21px; margin:0 0 6px; color:var(--ink); }
.form-lede { margin:0 0 20px; font-size:14px; color:rgba(47,71,63,.6); }
/* ---- FAQ (seção clara) ---- */
.faq-item { background:none; border:0; border-top:1px solid var(--line); overflow:hidden; box-shadow:none; }
.faq-btn { width:100%; display:flex; align-items:center; gap:16px; padding:20px 0; background:none; border:none; cursor:pointer; text-align:left; color:var(--ink); }
.faq-q { flex:1; font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:-.015em; }
.faq-icon { flex:none; width:auto; height:auto; font-family:var(--font-mono); font-size:18px; line-height:1; background:none; color:var(--accent-deep); transition:transform .25s ease; }
.faq-panel { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.3,.7,.3,1); }
.faq-a { margin:0; padding:0 0 24px; font-size:15px; line-height:1.65; color:var(--ink-3); max-width:80ch; }
/* ---------- Reveal-on-scroll (JS toggled) ---------- */
[data-reveal], .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
/* ---------- Keyframes ---------- */
@keyframes tpPulse { 0%,100%{opacity:.35;transform:scale(1)} 50%{opacity:.9;transform:scale(1.35)} }
@keyframes pulseRing { 0%{transform:scale(.85);opacity:.6} 70%{transform:scale(1.9);opacity:0} 100%{opacity:0} }
@keyframes pinPulse { 0%{transform:scale(1);opacity:.55} 70%,100%{transform:scale(2.7);opacity:0} }
/* O conteúdo real é um wrapper único dentro do card, então ele também precisa
ser uma coluna flexível — senão o margin-top:auto do botão não tem contra o
que empurrar e os botões dos dois cards desalinham. */
/* [hidden] perde para o display:flex acima; esta regra devolve a precedência. */
/* Skeleton de carregamento */
@keyframes dlPulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
/* ---------- Responsive ---------- */
@media (max-width:900px) {
.nav-inner > .locale { display:none !important; }
.nav-cta { display:none !important; } /* CTA vai para o menu mobile */
[data-hero-grid] { grid-template-columns:1fr !important; }
[data-hero-visual] { margin-top:20px !important; }
[data-features-grid] { grid-template-columns:1fr !important; }
[data-contact-grid] { grid-template-columns:1fr !important; }
[data-dash-side] { display:none !important; }
}
@media (max-width:600px) {
[data-parallax] { display:none !important; } /* cards flutuantes do hero (evita overflow) */
}
@media (max-width:520px) {
:root { --gutter:18px; }
.presence-map { width:300px; }
.map-stat { padding:9px 12px; gap:7px; }
.map-stat-num { font-size:26px; }
.footer-bottom { flex-direction:column; gap:6px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }
/* ---------- Nav: dropdown "Produto" ---------- */
/* A seta e irma do , nunca filha: applyLang() sobrescreve o
innerHTML do elemento traduzido e apagaria a seta na troca de idioma. */
/* :focus-visible separado do :hover -- navegadores sem suporte (Safari <15.4)
descartam a regra inteira quando um seletor da lista falha ao fazer parse,
e isso tiraria o feedback de hover junto. */
/* ============================================================
LP DE CONVERSÃO (agendamento de demonstração)
Componentes novos da reestruturação: header enxuto, faixas de
CTA, bloco "para quem é", campo de qualificação do formulário,
telas de confirmação por faixa e CTA fixo no mobile.
============================================================ */
/* Header sem menu: sobra logo + um CTA, então o espaçamento vem do
space-between e não da coluna do nav que deixou de existir. */
.nav-inner--lean { justify-content:space-between; gap:16px; }
/* Hero ------------------------------------------------------- */
.hero-micro { font-size:14px; line-height:1.55; color:var(--ink-4); margin:18px 0 0; }
/* Utilitários que faltavam ----------------------------------- */
.stack-10 { display:flex; flex-direction:column; gap:10px; }
/* CTA repetido a cada bloco de decisão ----------------------- */
.lp-cta-band { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
margin-top:44px; padding:22px 26px;
border:1px solid var(--line); background:rgba(47,71,63,.035); }
.lp-cta-band-txt { flex:1 1 240px; font-size:16px; line-height:1.5; color:var(--ink-2); max-width:52ch; }
.lp-cta-band .btn { flex:0 1 auto; }
.lp-cta-band--light { border-color:rgba(47,71,63,.14); background:rgba(47,71,63,.04); }
.lp-cta-band--light .lp-cta-band-txt { color:var(--ink-on-light,#123024); }
/* Para quem é ------------------------------------------------ */
.lp-who-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:34px; background:var(--line); border:1px solid var(--line); }
.lp-who-card { padding:24px 26px 28px; border:0; border-top:2px solid var(--accent); background:var(--bg-2); }
.lp-who-h { font-family:var(--font-display); font-size:17px; font-weight:600; letter-spacing:-.015em; margin:0 0 8px; color:var(--ink); }
.lp-who-p { font-size:15px; line-height:1.62; margin:0; color:var(--ink-3); }
.lp-who-not { margin:26px 0 0; max-width:70ch; font-size:15px; line-height:1.62; color:var(--ink-3); }
@media (max-width:860px){ .lp-who-grid { grid-template-columns:1fr; } }
/* O que é a demonstração ------------------------------------- */
.lp-demo-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.lp-demo-list li { position:relative; padding-left:22px; font-size:15px; line-height:1.6; color:var(--ink-2); }
.lp-demo-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--ink-4); font-size:13px; }
.lp-demo-list strong { color:var(--ink); font-weight:600; }
/* Formulário: qualificação ----------------------------------- */
.lp-form-wrap { position:relative; }
.lp-qual { border:0; padding:0; margin:0 0 6px; }
.lp-qual-q { padding:0; margin:0 0 12px; font-size:15px; font-weight:600; line-height:1.45; color:var(--ink); }
.lp-qual-grid { display:grid; gap:8px; }
/* Cartão de toque, nunca