/* A CASA, EM UMA FOLHA SO' (10/10/2026)
   ═══════════════════════════════════════════════════════════════════════
   Era tudo inline no apresentacao.html. Com a pagina de Solucoes nascendo
   ao lado, inline viraria a mesma folha escrita duas vezes -- e duas folhas
   iguais sao duas folhas que divergem na primeira correcao.

   O crediario (crediario.html) NAO usa esta folha: ele e' a pagina antiga,
   inteira e intocada, e mexer nela para economizar linha e' trocar risco
   por arrumacao.
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   D'MOBIX — CREDIARIO PROPRIO
   ───────────────────────────────────────────────────────────────
   CLARA, NOS TOKENS DO PROPRIO APP (loja.css). O lojista ve esta
   pagina antes de assinar e a tela do sistema depois; se as duas
   nao forem a mesma marca, a segunda parece outro produto.
   Fundo, cartao, linha, ciano e raio sao os mesmos nomes e os
   mesmos valores de la'. A fonte tambem: Manrope, como no app.

   RITMO DE FAIXAS. A primeira versao era clara do comeco ao fim e
   o Eder resumiu: "ta tudo muito branco". As tres concorrentes
   que ele mandou olhar (Paymobi, Cell+, AurusPay) abrem com uma
   faixa escura na cor da marca e alternam com blocos claros. Aqui
   a faixa escura e' a MESMA do app (`--tv-faixa`, a lateral): topo,
   numeros da casa e fecho. O resto continua claro, como a tela.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --fundo:#f4f7f8; --cartao:#fff; --cartao-2:#f7fafb; --tinta:#11191d;
  --media:#4d5b64; --fraca:#74818b; --linha:#e3e9ec; --linha-forte:#d3dde1;
  --ciano:#00a9d2; --ciano-forte:#008fb6; --ciano-claro:#16cee2; --ciano-marca:#72deea; --ciano-veu:#e5f8fb;
  --bom:#2f9b60; --bom-veu:#e8f8ef; --aviso:#a87421; --aviso-veu:#fff5df; --perigo:#be4d57; --perigo-veu:#ffebed;
  --faixa:linear-gradient(170deg,#080c0e 0%,#0b2b33 58%,#064c59 100%);
  --corpo:"Manrope",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --raio:18px; --raio-p:12px; --pilula:999px;
  --apoio:0 1px 2px rgba(17,25,29,.05); --alto:0 12px 34px -18px rgba(17,25,29,.3);
  --flutua:0 28px 64px -30px rgba(17,25,29,.34);
  --limite:1160px; --curva:cubic-bezier(.22,1,.36,1);
  --brilho:radial-gradient(60% 55% at 85% 10%,rgba(22,206,226,.22),transparent 70%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* MOVIMENTO. A referencia e' a pagina da Aurus: cada bloco sobe e aparece
   quando entra na tela, o print do sistema flutua devagar. A mecanica e' a
   mesma (IntersectionObserver + classe), a curva e a cadencia sao as nossas.
   As classes so' sao postas pelo JS: sem script, a pagina nasce inteira. */
.revela{opacity:0;transform:translateY(28px);transition:opacity .9s var(--curva),transform .9s var(--curva)}
.revela.visto{opacity:1;transform:none}
[data-cadencia]>*{opacity:0;transform:translateY(24px);transition:opacity .75s var(--curva),transform .75s var(--curva)}
[data-cadencia].visto>*{opacity:1;transform:none}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.heroi .janela{animation:flutua 7s ease-in-out infinite;will-change:transform}
@keyframes pulso{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}}
/* CONVERSA DE CAPTURA. O botao do WhatsApp virou uma conversa curta que pede
   nome, e-mail e WhatsApp antes de mandar para o comercial -- e' a mesma ideia
   do chat da Paymobi. O que ela colhe vai para `platform_leads` (PostgREST,
   anon so' insere) e aparece no Master, na aba Leads do CreD'Mobix. */
.zap{align-items:center;background:var(--tinta);border:0;border-radius:var(--pilula);bottom:22px;box-shadow:0 18px 40px -18px rgba(17,25,29,.6);color:#fff;cursor:pointer;display:flex;font:800 14px/1 var(--corpo);gap:10px;padding:12px 18px 12px 12px;position:fixed;right:22px;transition:transform .25s var(--curva),box-shadow .25s;z-index:60}
.zap:hover{box-shadow:0 22px 48px -18px rgba(17,25,29,.7);transform:translateY(-2px)}
.zap i{align-items:center;animation:pulso 2.4s ease-out infinite;background:#25d366;border-radius:50%;display:flex;height:30px;justify-content:center;width:30px}
.zap svg{display:block;height:17px;width:17px}
.papo{background:var(--cartao);border:1px solid var(--linha);border-radius:22px;bottom:22px;box-shadow:var(--flutua);display:none;flex-direction:column;max-height:min(620px,calc(100vh - 44px));overflow:hidden;position:fixed;right:22px;width:min(360px,calc(100vw - 32px));z-index:61}
.papo.aberto{display:flex}
.papo-topo{align-items:center;background:var(--faixa);color:#fff;display:flex;gap:12px;padding:16px 18px}
.papo-topo i{align-items:center;background:linear-gradient(120deg,var(--ciano),var(--ciano-claro));border-radius:50%;color:#06232b;display:flex;flex:none;height:38px;justify-content:center;width:38px}
.papo-topo b{display:block;font-size:15px}
.papo-topo small{color:rgba(255,255,255,.65);display:block;font-size:12px}
.papo-topo button{appearance:none;background:rgba(255,255,255,.1);border:0;border-radius:50%;color:#fff;cursor:pointer;font-size:18px;height:32px;line-height:1;margin-left:auto;width:32px}
.papo-corpo{display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding:18px}
.papo-msg{border-radius:16px;font-size:14.5px;line-height:1.45;max-width:86%;padding:11px 14px}
.papo-msg.dela{background:var(--cartao-2);border:1px solid var(--linha);border-top-left-radius:6px}
.papo-msg.minha{align-self:flex-end;background:var(--ciano-veu);border:1px solid rgba(0,169,210,.25);border-top-right-radius:6px;color:var(--tinta)}
.papo-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.papo-acoes .botao{padding:11px 16px}
.papo-form{border-top:1px solid var(--linha);display:flex;gap:8px;padding:12px}
.papo-form input{border:1px solid var(--linha-forte);border-radius:var(--pilula);flex:1;font:500 15px/1 var(--corpo);min-width:0;padding:12px 16px}
.papo-form input:focus{border-color:var(--ciano);outline:0}
.papo-form button{appearance:none;background:linear-gradient(120deg,var(--ciano),var(--ciano-claro));border:0;border-radius:50%;color:#06232b;cursor:pointer;flex:none;height:44px;width:44px}
.papo-form button:disabled{opacity:.5}
.papo-erro{color:var(--perigo);font-size:12.5px;margin:-4px 0 0}
.papo-pe{color:var(--fraca);font-size:11.5px;padding:0 14px 12px;text-align:center}
.papo-pe a{color:var(--ciano-forte)}
.papo-mel{display:none}
@media (max-width:640px){.zap span{display:none}.zap{padding:10px}}
body{background:var(--fundo);color:var(--tinta);font-family:var(--corpo);font-size:17px;line-height:1.62;margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.faixa-larga{margin:0 auto;max-width:var(--limite);padding:0 24px}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.035em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
/* Os rotulos de secao ("COMO FUNCIONA", "A REGUA DE COBRANCA") sairam de
   vez: ele marcou dois seguidos com "nao gostei". O titulo segura sozinho.
   O markup fica, escondido, caso um dia voltem com outra cara. */
.rotulo{display:none}
.num{font-variant-numeric:tabular-nums}

/* ── TOPO ─────────────────────────────────────────────────────── */
/* A BARRA DE CIMA MUDA DE CORPO CONFORME O QUE PASSA ATRAS DELA.
   Sobre o herói escuro, a barra branca se destaca sozinha -- e é assim que ele
   gosta. Passando para as seções claras ela sumia: branco sobre #f4f7f8, com
   uma sombra de 1px e 5% de opacidade, não separa nada. A partir dali ela se
   DESCOLA: encolhe para dentro das margens, vira pílula, ganha contorno e uma
   sombra de verdade. O fundo é pintado pelo ::before justamente para poder
   encolher sem mexer no lugar do logo e dos botões. */
.topo{align-items:center;background:transparent;display:flex;gap:24px;justify-content:space-between;padding:20px 28px;position:sticky;top:0;transition:padding .3s var(--curva);z-index:50}
.topo::before{backdrop-filter:blur(16px);background:rgba(244,247,248,.82);border:1px solid transparent;bottom:0;content:'';left:0;position:absolute;right:0;top:0;transition:background .3s,border-color .3s,border-radius .4s var(--curva),box-shadow .4s var(--curva),top .4s var(--curva),right .4s var(--curva),bottom .4s var(--curva),left .4s var(--curva);z-index:0}
.topo>*{position:relative;z-index:1}
.topo.encolhido{padding:12px 28px}
.topo.encolhido::before{background:rgba(255,255,255,.94);border-bottom-color:var(--linha)}
/* NO CLARO A BARRA FICA ESCURA, e nao branca sobre branco. Foi o pedido dele
   depois de ver a primeira versao: *"poderia ficar no azul escuro quando
   atingir a parte branca"*. E e' o que separa de verdade -- a pilula escura
   sobre a pagina clara tem o mesmo contraste que a barra branca tinha sobre o
   heroi, so' que ao contrario. Texto e contorno invertem junto, senao o menu
   fica cinza-escuro em cima de azul-escuro. */
.topo.sobre-claro::before{background:linear-gradient(175deg,#0d3b47 0%,#07262f 60%,#06232b 100%);border-color:rgba(255,255,255,.14);border-radius:var(--pilula);bottom:8px;left:16px;right:16px;top:8px;
  /* O BRILHO: um fio de luz na borda de cima (o vidro pegando a claridade da
     pagina), um halo ciano por baixo -- a mesma cor do botao, entao a barra
     parece acesa e nao pintada -- e a sombra que descola do papel. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.25),0 0 0 1px rgba(0,169,210,.1),0 10px 34px -12px rgba(0,169,210,.3),0 20px 44px -18px rgba(6,35,43,.7)}
/* O reflexo que corre a metade de cima da pilula. E' so' luz: nao captura
   clique e some quando a barra volta a ser barra. */
.topo.sobre-claro::after{background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%);border-radius:var(--pilula) var(--pilula) 40px 40px;bottom:50%;content:'';left:17px;pointer-events:none;position:absolute;right:17px;top:9px;z-index:0}
.topo.sobre-claro .marca{color:#fff}
.topo.sobre-claro nav a{color:rgba(255,255,255,.76)}
.topo.sobre-claro nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.topo.sobre-claro .botao.fraco{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.topo.sobre-claro .botao.fraco:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
.topo .marca,.topo nav a,.topo .botao.fraco{transition:color .3s,background .3s,border-color .3s}
@media (max-width:880px){.topo.sobre-claro::before{left:10px;right:10px}}
@media (prefers-reduced-motion:reduce){.topo::before{transition:none}}
.marca{align-items:center;display:flex;font:800 22px/1 var(--corpo);gap:10px;letter-spacing:-.05em}
.marca img{height:28px;width:28px}
.topo-acoes{align-items:center;display:flex;gap:10px}
.topo-acoes .botao.fraco{background:transparent}
.topo nav{display:flex;gap:2px}
.topo nav a{border-radius:var(--pilula);color:var(--media);font:700 15px/1 var(--corpo);padding:9px 15px;transition:color .2s,background .2s}
.topo nav a:hover{background:var(--cartao);color:var(--tinta)}
.botao{align-items:center;border:1px solid transparent;border-radius:var(--pilula);cursor:pointer;display:inline-flex;font:800 14.5px/1 var(--corpo);gap:9px;padding:13px 22px;transition:transform .2s var(--curva),box-shadow .25s,background .25s,border-color .25s}
.botao.forte{background:linear-gradient(120deg,var(--ciano) 0%,var(--ciano-claro) 100%);box-shadow:0 8px 20px -12px rgba(0,169,210,.9);color:#06232b}
.botao.forte:hover{box-shadow:0 14px 30px -12px rgba(0,169,210,1);transform:translateY(-2px)}
.botao.fraco{background:var(--cartao);border-color:var(--linha-forte);color:var(--tinta)}
.botao.fraco:hover{background:var(--ciano-veu);border-color:var(--ciano);color:var(--ciano-forte)}
@media (max-width:880px){.topo nav,.topo-acoes .botao.fraco{display:none}}

/* ── HEROI ────────────────────────────────────────────────────── */
.heroi{background:var(--faixa);color:#fff;overflow:hidden;padding:84px 0 108px;position:relative}
.heroi::before{background:var(--brilho);content:"";inset:0;pointer-events:none;position:absolute}
.heroi-grade{align-items:center;display:grid;gap:52px;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);position:relative}
.heroi h1{font-size:clamp(38px,5.2vw,64px);letter-spacing:-.045em;margin:16px 0 20px}
.heroi h1 em{color:var(--ciano-marca);font-style:normal}
.heroi-linha{color:rgba(255,255,255,.74);font-size:18.5px;max-width:29em}
.heroi-linha b{color:#fff}
.heroi .botao.fraco{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26);color:#fff}
.heroi .botao.fraco:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
.heroi-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* NUMEROS NA DOBRA. A Cell+ poe "+800 lojistas" embaixo do botao, antes de
   qualquer explicacao. Os nossos sao da propria operacao e ficavam la' no
   fim da pagina, onde so' chega quem ja' se convenceu. */
.heroi-numeros{border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:30px;padding-top:24px}
.heroi-numeros div{border-left:2px solid var(--ciano-marca);flex:1 1 150px;padding-left:14px}
.heroi-numeros b{display:block;font:800 26px/1 var(--corpo);letter-spacing:-.05em}
.heroi-numeros span{color:rgba(255,255,255,.55);display:block;font:700 10px/1.3 var(--mono);letter-spacing:.12em;margin-top:7px;text-transform:uppercase}
.heroi .janela{box-shadow:0 46px 90px -36px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1)}
@media (max-width:940px){.heroi-grade{gap:42px;grid-template-columns:1fr}}
/* ── PRINT DO SISTEMA ─────────────────────────────────────────────
   Imagem REAL do app, so' com canto arredondado e sombra. A versao
   anterior desenhava a tela em CSS e ficou estranha justamente por
   isso: nunca era igual a de verdade, e quem conhece percebe. A barra
   de "janela de navegador" com tres bolinhas tambem saiu -- "nao gostei".
   `.tela img` cai fora se o arquivo faltar, sem quebrar o layout. */
.janela{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--flutua);overflow:hidden}
.janela-topo{align-items:center;background:var(--cartao-2);border-bottom:1px solid var(--linha);display:flex;gap:8px;padding:11px 14px}
.janela-topo i{background:var(--linha-forte);border-radius:50%;display:block;height:9px;width:9px}
.janela-topo span{color:var(--fraca);font:600 11.5px/1 var(--mono);margin-left:7px}
.janela img{display:block;width:100%}
.janela.vazia{align-items:center;background:var(--cartao-2);color:var(--fraca);display:flex;font:600 13px/1.5 var(--corpo);justify-content:center;min-height:300px;padding:30px;text-align:center}

/* ── FAIXA DE COMPATIBILIDADE, e NAO mural de parceria ────────── */
.compat{margin-top:-56px;position:relative;z-index:2}
.compat-caixa{align-items:center;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--alto);display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;padding:34px 36px 38px}
.compat-caixa span{color:var(--fraca);flex-basis:100%;font:700 12px/1 var(--mono);letter-spacing:.16em;margin-bottom:6px;text-align:center;text-transform:uppercase}
.compat-caixa b{color:var(--media);font:800 24px/1 var(--corpo);letter-spacing:-.045em;transition:color .2s}
.compat-caixa b:hover{color:var(--tinta)}

/* ── SECOES ───────────────────────────────────────────────────── */
section{padding:76px 0}
.escura{background:var(--faixa);color:#fff;overflow:hidden;position:relative}
.escura::before{background:var(--brilho);content:"";inset:0;pointer-events:none;position:absolute}
.escura>.faixa-larga{position:relative}
.escura .cabeca p{color:rgba(255,255,255,.7)}
/* Cabecalho de secao centralizado, como nas tres referencias: alinhado a'
   esquerda sobrava meia tela vazia do lado direito. */
.cabeca{margin:0 auto 44px;max-width:36em;text-align:center}
.cabeca h2{font-size:clamp(29px,3.7vw,44px);letter-spacing:-.045em;margin:0 0 15px}
.cabeca p{color:var(--media);font-size:17.5px;margin:0 auto;max-width:34em}
.clara{background:var(--cartao);border-block:1px solid var(--linha)}

/* ── TRES PASSOS ──────────────────────────────────────────────── */
.passos{counter-reset:p;display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.passo{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--apoio);padding:26px;transition:border-color .3s,box-shadow .3s,transform .3s var(--curva)}
.passo:hover{border-color:var(--ciano);box-shadow:var(--alto);transform:translateY(-3px)}
.passo::before{align-items:center;background:linear-gradient(120deg,var(--ciano),var(--ciano-claro));border-radius:12px;box-shadow:0 8px 18px -10px rgba(0,169,210,.9);color:#06232b;content:counter(p);counter-increment:p;display:inline-flex;font:800 15px/1 var(--corpo);height:38px;justify-content:center;margin-bottom:18px;width:38px}
.passo h3{font-size:20px;letter-spacing:-.04em;margin-bottom:9px}
.passo p{color:var(--media);font-size:15px}
@media (max-width:880px){.passos{grid-template-columns:1fr}}

/* ── A REGUA ──────────────────────────────────────────────────── */
.regua-grade{align-items:start;display:grid;gap:52px;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.escada-real img{border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--alto);display:block;width:100%}
.regua-texto h3{font-size:21px;letter-spacing:-.04em;margin-bottom:11px}
.regua-texto p{color:var(--media);margin-bottom:24px}
.regua-lista{display:grid;gap:17px;list-style:none;margin:0;padding:0}
.regua-lista li{display:grid;gap:13px;grid-template-columns:21px minmax(0,1fr)}
.regua-lista i{background:var(--ciano-veu);border:1px solid rgba(0,169,210,.34);border-radius:6px;display:block;height:19px;margin-top:4px;position:relative;width:19px}
.regua-lista i::after{border-bottom:2px solid var(--ciano-forte);border-left:2px solid var(--ciano-forte);content:"";height:4px;left:5px;position:absolute;top:5px;transform:rotate(-45deg);width:8px}
.regua-lista b{display:block;font-size:15.5px;font-weight:750}
.regua-lista span{color:var(--media);font-size:14.5px}
@media (max-width:940px){.regua-grade{gap:38px;grid-template-columns:1fr}}

/* ── PORTAL ───────────────────────────────────────────────────── */
.portal-grade{align-items:center;display:grid;gap:52px;grid-template-columns:minmax(0,1fr) minmax(0,.74fr);position:relative}
.portal-grade::after{background:radial-gradient(circle,rgba(22,206,226,.22),transparent 68%);content:"";height:520px;pointer-events:none;position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:520px}
.portal-grade .moldura{position:relative;z-index:1}
/* O print do portal e' comprido (a tela rola) e num celular so' os botoes de
   alteracao ficavam de fora. Dois celulares do mesmo print: o de tras mostra
   o topo, o da frente esta' rolado ate' "Precisa mudar alguma coisa?" -- e
   leva um encarte explicando o que sao aqueles botoes ("coloca um encarte
   no segundo"). */
.moldura-dupla{align-items:flex-start;display:flex;justify-content:center;margin:0 auto;max-width:440px}
.moldura{aspect-ratio:430/932;background:var(--tinta);border-radius:34px;box-shadow:var(--flutua);flex:0 0 auto;overflow:hidden;padding:10px;width:250px}
.moldura img{border-radius:26px;display:block;height:100%;object-fit:cover;object-position:top;width:100%}
.moldura-frente{flex:0 0 auto;margin:96px 0 0 -64px;position:relative;z-index:2}
.moldura.fim img{object-position:bottom}
/* O encarte e' o AVISO DE BLOQUEIO que o cliente ve no celular ("aquele pop
   up de seu celular foi bloqueado"): sobe por cima do portal escurecido. */
.moldura.fim::after{background:rgba(6,20,25,.5);border-radius:26px;content:"";inset:10px;position:absolute}
.encarte{background:#0b1417;border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 30px 60px -22px rgba(0,0,0,.75);color:#fff;left:50%;padding:18px 16px 16px;position:absolute;text-align:center;top:31%;transform:translateX(-50%);width:212px;z-index:3}
.encarte i{align-items:center;background:var(--perigo-veu);border-radius:50%;color:var(--perigo);display:inline-flex;height:40px;justify-content:center;width:40px}
.encarte i svg{height:19px;width:19px}
.encarte b{display:block;font-size:15px;letter-spacing:-.02em;line-height:1.2;margin:10px 0 6px}
.encarte span{color:rgba(255,255,255,.7);display:block;font-size:12.5px;line-height:1.45}
.encarte em{background:linear-gradient(120deg,var(--ciano),var(--ciano-claro));border-radius:var(--pilula);color:#06232b;display:block;font:800 12.5px/1 var(--corpo);font-style:normal;margin-top:13px;padding:10px}
@media (max-width:520px){.moldura{width:210px}.moldura-frente{margin:70px 0 0 -50px}.encarte{width:186px}}
.moldura.vazia{align-items:center;color:var(--fraca);display:flex;font:600 13px/1.5 var(--corpo);justify-content:center;min-height:440px;padding:30px;text-align:center}
@media (max-width:940px){.portal-grade{gap:40px;grid-template-columns:1fr}}
/* ── DUAS ESTEIRAS: ANDROID E IPHONE ──────────────────────────── */
.trilhos{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}
.trilho{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--apoio);display:flex;flex-direction:column;padding:30px}
.trilho-marca{align-items:center;border-radius:var(--raio-p);display:flex;height:40px;justify-content:center;margin-bottom:18px;width:40px}
.trilho.verde .trilho-marca{background:var(--bom-veu);color:var(--bom)}
.trilho.claro .trilho-marca{background:var(--cartao-2);border:1px solid var(--linha);color:var(--tinta)}
.trilho header{align-items:center;display:flex;gap:14px;margin-bottom:18px}
.trilho header .trilho-marca{margin:0}
.trilho h3{font-size:22px;letter-spacing:-.04em}
.trilho-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.trilho-chips b{background:var(--cartao-2);border:1px solid var(--linha);border-radius:var(--pilula);color:var(--media);font:800 13.5px/1 var(--corpo);letter-spacing:-.02em;padding:9px 13px}
/* AS LINHAS VIRARAM PERGUNTA E RESPOSTA. O visto de "certo" nao dizia nada:
   os dois lados tinham tres vistos verdes e nenhum deles marcava diferenca
   nenhuma -- eram tres frases soltas com um enfeite na frente. O rotulo em
   cima e a resposta embaixo deixam o olho comparar na horizontal, que e' o
   unico motivo de existirem duas colunas. */
.trilho-lista{border-top:1px solid var(--linha);display:grid;list-style:none;margin:auto 0 0;padding:0}
.trilho-lista li{border-bottom:1px solid var(--linha);display:grid;gap:4px;padding:15px 0}
.trilho-lista li:last-child{border-bottom:0;padding-bottom:0}
.trilho-lista span{color:var(--fraca);font:800 11px/1 var(--corpo);letter-spacing:.11em;text-transform:uppercase}
.trilho-lista b{color:var(--tinta);font:600 15px/1.45 var(--corpo);letter-spacing:-.01em}
/* O robo verde e' o logo do Android de verdade, e nao um retangulo de celular:
   a plataforma se reconhece pelo simbolo dela, como a maca do lado. */
.trilho-marca.android{background:rgba(61,220,132,.16);color:#20b566}
@media (max-width:880px){.trilhos{grid-template-columns:1fr}}

/* ── NUMEROS DA CASA ──────────────────────────────────────────── */
.numeros-grade{display:grid;gap:24px;grid-template-columns:repeat(4,1fr)}
/* SIMULADOR. A pergunta que o lojista faz primeiro nao e' "como funciona":
   e' "quanto eu ganho". Duas plataformas concorrentes respondem isso com
   calculadora na propria pagina, e ganham a conversa antes do preco. Aqui os
   numeros sao os DELE -- o preco que pratica, o juro que cobra --, porque
   exemplo pronto o lojista desconta na hora. */
.sim{align-items:start;display:grid;gap:28px;grid-template-columns:1.05fr .95fr}
.sim-controles{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--apoio);padding:26px 26px 28px}
.sim-campo+.sim-campo{margin-top:24px}
.sim-campo header{align-items:baseline;display:flex;gap:12px;justify-content:space-between;margin-bottom:9px}
.sim-campo label{color:var(--media);font-size:14.5px;font-weight:600}
.sim-campo output{font:700 18px/1 var(--mono);letter-spacing:-.03em}
.sim-campo input[type=range]{accent-color:var(--ciano);cursor:pointer;display:block;width:100%}
.sim-parcelas{display:flex;flex-wrap:wrap;gap:8px}
.sim-parcelas button{background:var(--cartao-2);border:1px solid var(--linha-forte);border-radius:var(--pilula);color:var(--media);cursor:pointer;font:700 14px/1 var(--corpo);padding:10px 16px;transition:all .18s}
.sim-parcelas button:hover{border-color:var(--ciano)}
.sim-parcelas button[aria-pressed=true]{background:var(--ciano-veu);border-color:var(--ciano);color:var(--ciano-forte)}
.sim-saida{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--alto);overflow:hidden}
.sim-saida-topo{background:var(--faixa);color:#fff;padding:24px 26px}
.sim-saida-topo span{color:var(--ciano-marca);font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.sim-saida-topo b{display:block;font-size:clamp(32px,4.4vw,42px);letter-spacing:-.05em;line-height:1.1;margin-top:8px}
.sim-linhas{padding:6px 26px 20px}
.sim-linha{align-items:baseline;border-bottom:1px solid var(--linha);display:flex;gap:16px;justify-content:space-between;padding:13px 0}
.sim-linha:last-child{border-bottom:0}
.sim-linha span{color:var(--media);font-size:15px}
.sim-linha b{font:700 17px/1 var(--mono);letter-spacing:-.02em;white-space:nowrap}
.sim-linha.ganho b{color:var(--bom);font-size:19px}
.sim-nota{color:var(--fraca);font-size:13.5px;margin:22px 0 0;max-width:62em}
@media(max-width:860px){.sim{grid-template-columns:1fr}}
.numero b{background:linear-gradient(120deg,#fff 20%,var(--ciano-marca));-webkit-background-clip:text;background-clip:text;color:transparent;display:block;font:800 clamp(34px,4.4vw,52px)/1 var(--corpo);letter-spacing:-.055em}
.numero span{color:rgba(255,255,255,.62);display:block;font-size:14.5px;margin-top:7px}
.numeros-pe{border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);font-size:13px;margin-top:40px;padding-top:20px}
@media (max-width:760px){.numeros-grade{gap:30px 18px;grid-template-columns:repeat(2,1fr)}}

/* ── PLANOS ───────────────────────────────────────────────────── */
.planos{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.plano{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--apoio);display:flex;flex-direction:column;padding:30px;position:relative;transition:border-color .3s,box-shadow .3s,transform .3s var(--curva)}
.plano:hover{box-shadow:var(--alto);transform:translateY(-3px)}
.plano.destaque{background:linear-gradient(var(--cartao),var(--cartao)) padding-box,linear-gradient(150deg,var(--ciano),var(--ciano-claro) 55%,var(--ciano-marca)) border-box;border-color:transparent;border-width:2px;box-shadow:var(--alto)}
.plano.destaque::after{background:linear-gradient(120deg,var(--ciano),var(--ciano-claro));border-radius:var(--pilula);color:#06232b;content:"Mais escolhido";font:800 10.5px/1 var(--corpo);padding:7px 13px;position:absolute;right:22px;top:-11px}
.plano h3{font-size:22px;letter-spacing:-.04em}
.plano .preco{align-items:baseline;display:flex;gap:5px;margin:14px 0 4px}
.plano .preco b{font:800 38px/1 var(--corpo);letter-spacing:-.055em}
.plano .preco span{color:var(--fraca);font-size:14px}
.plano .frase{color:var(--media);font-size:14px;min-height:42px}
.plano ul{border-top:1px solid var(--linha);display:grid;gap:11px;list-style:none;margin:20px 0 24px;padding:20px 0 0}
.plano li{display:grid;font-size:14.5px;gap:10px;grid-template-columns:16px minmax(0,1fr);line-height:1.45}
.plano li i{border-bottom:2px solid var(--ciano-forte);border-left:2px solid var(--ciano-forte);height:5px;margin-top:6px;transform:rotate(-45deg);width:9px}
.plano .botao{justify-content:center;margin-top:auto;width:100%}
/* ── LICENCAS AVULSAS ──────────────────────────────────────────────────
   O preco saiu da pagina em 22/09 (*"nao precisa dizer os precos das
   licencas"*): aqui se explica o que a licenca E', e quanto custa e' assunto
   do comercial. O desenho foi refeito em 23/09 -- ver o comentario no corpo
   da pagina. */
/* O BLOCO E' ESCURO (23/09/2026: *"faz um negocio mais premium"*). Em branco
   ele era o quarto cartao claro de uma secao de cartoes claros e sumia. No
   escuro ele vira o pe da secao: as barrinhas do carne ACENDEM, as fichas
   viram vidro e a luz do cursor entra de graca -- a classe `escura` ja' traz
   o fundo, o brilho fixo e o `::after` que segue o mouse (o JS varre
   `.escura` sozinho, nao precisa registrar nada). */
.licencas{border:1px solid rgba(255,255,255,.1);border-radius:clamp(20px,2vw,26px);border-top-color:rgba(22,206,226,.34);box-shadow:0 40px 90px -52px rgba(6,35,43,.8);margin-top:26px;padding:clamp(26px,3vw,42px)}
/* Acima do brilho e da luz, que sao `::before`/`::after` da propria caixa. */
.licenca-topo,.licenca-corpo,.licenca-nota{position:relative;z-index:1}
.licenca-topo{max-width:68ch}
.licencas h3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.04em;margin-bottom:10px}
.licencas p{color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.6}
.licenca-corpo{display:grid;gap:clamp(24px,3vw,52px);grid-template-columns:minmax(0,1fr) minmax(0,.82fr);margin-top:clamp(24px,2.6vw,34px)}

/* A CONTA, DESENHADA. Cada barrinha e' uma parcela; o vao separa de doze em
   doze, e a ficha no fim so' repete o que os grupos ja' mostraram. */
.licenca-chapeu{color:rgba(255,255,255,.45);display:block;font:700 10px/1 var(--mono);letter-spacing:.14em;margin-bottom:8px;text-transform:uppercase}
.carne{align-items:center;display:flex;flex-wrap:wrap;gap:8px 14px;padding:14px 0}
.carne+.carne{border-top:1px solid rgba(255,255,255,.08)}
.carne>b{color:rgba(255,255,255,.92);font:700 13.5px/1 var(--mono);letter-spacing:-.03em;width:34px}
/* O suporte das parcelas: um trilho de vidro que cresce com o prazo. E' o
   que faz 36x PARECER tres vezes 12x antes de ler o numero. */
.carne-barras{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:11px;display:flex;gap:12px;padding:8px 11px}
.doze{display:flex;gap:3px}
.doze i{background:linear-gradient(180deg,var(--ciano-marca),var(--ciano));border-radius:2px;box-shadow:0 0 11px rgba(22,206,226,.5);display:block;height:22px;width:5px}
.carne em{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--pilula);color:var(--ciano-marca);font:800 12px/1 var(--corpo);font-style:normal;margin-left:auto;padding:8px 13px;white-space:nowrap}
.licenca-moral{border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.74);font-size:14.5px;margin-top:2px;padding-top:16px}
.licenca-moral b{color:#fff;font-weight:800}

/* AS OUTRAS TRES REGRAS SAO LINHAS, NAO CARTOES: cartao de mesmo tamanho para
   tudo foi o que apagou a hierarquia da versao anterior. */
.licenca-regras{align-content:center;border-left:1px solid rgba(255,255,255,.1);display:grid;gap:22px;list-style:none;margin:0;padding:0 0 0 clamp(24px,3vw,48px)}
@media (max-width:980px){.licenca-regras{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:26px 0 0}}
.licenca-regras li{display:grid;gap:15px;grid-template-columns:38px minmax(0,1fr)}
.licenca-regras i{-webkit-backdrop-filter:blur(8px);align-items:center;backdrop-filter:blur(8px);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:12px;color:var(--ciano-marca);display:flex;height:38px;justify-content:center;width:38px}
.licenca-regras svg{height:18px;width:18px}
.licenca-regras b{color:#fff;display:block;font:750 14.5px/1.3 var(--corpo);letter-spacing:-.02em;margin-bottom:4px}
.licenca-regras span{color:rgba(255,255,255,.68);font-size:13.8px;line-height:1.55}

.licenca-nota{align-items:center;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;margin-top:clamp(24px,2.6vw,34px);padding-top:24px}
.licenca-nota span{color:rgba(255,255,255,.62);font-size:13.2px;line-height:1.55;max-width:66ch}
.licenca-nota .botao{flex:0 0 auto;font-size:13.5px;padding:12px 21px}

/* A CADENCIA: as parcelas se enchem da esquerda para a direita e a ficha cai
   depois da ultima. O `--i` e o `--d` vem do HTML, um por barrinha e um por
   linha. Esconder e' trabalho da classe que o JS poe (`.revela`): sem script
   o carne nasce cheio. */
@keyframes barrinha{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
@keyframes ficha{from{opacity:0;transform:translateX(-7px) scale(.92)}to{opacity:1;transform:none}}
.licencas.revela .doze i{opacity:0;transform-origin:50% 100%}
.licencas.revela .carne em{opacity:0}
.licencas.revela.visto .doze i{animation:barrinha .42s var(--curva) both;animation-delay:calc(var(--i,0)*24ms + 160ms)}
.licencas.revela.visto .carne em{animation:ficha .5s var(--curva) both;animation-delay:calc(var(--d,0)*24ms + 240ms)}

@media (max-width:980px){.licenca-corpo{grid-template-columns:1fr}}
@media (max-width:620px){
  .doze i{height:18px;width:4px}
  .doze{gap:2px}
  .carne-barras{gap:8px}
  /* No estreito a ficha sempre desce para a linha de baixo, alinhada com as
     barras: com `flex` so' o 12x cabia ao lado, e as tres ficavam desiguais. */
  .carne{display:grid;gap:9px;grid-template-columns:30px minmax(0,1fr)}
  .carne>b{grid-column:1;width:auto}
  /* `justify-self:start` senao os tres trilhos esticam igual na coluna e o
     36x deixa de PARECER tres vezes o 12x, que e' o ponto do desenho. */
  .carne-barras,.carne em{grid-column:2;justify-self:start}
  .carne em{justify-self:start;margin-left:0}
  .licenca-nota .botao{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.licencas.revela .doze i,.licencas.revela .carne em{opacity:1}}
.tabela{border:1px solid var(--linha);border-radius:var(--raio-p);overflow:hidden}
.tabela-linha{align-items:center;border-top:1px solid var(--linha);display:grid;gap:10px;grid-template-columns:minmax(0,1fr) repeat(4,minmax(0,.62fr));padding:11px 15px}
.tabela-linha:first-child{background:var(--cartao-2);border-top:0}
.tabela-linha:first-child span{color:var(--fraca);font:700 9.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.tabela-linha b{font:750 14px/1 var(--corpo)}
.tabela-linha em{font:700 14px/1 var(--mono);font-style:normal;letter-spacing:-.03em}
@media (max-width:980px){.planos{grid-template-columns:1fr}}
@media (max-width:620px){.tabela-linha{font-size:12px;padding:10px 11px}.tabela-linha em{font-size:12px}}

/* ── PERGUNTAS ────────────────────────────────────────────────── */
.pergunta{border-bottom:1px solid var(--linha)}
.pergunta summary{align-items:center;cursor:pointer;display:flex;font:750 17px/1.35 var(--corpo);gap:20px;justify-content:space-between;letter-spacing:-.035em;list-style:none;padding:21px 0;transition:color .2s}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary:hover{color:var(--ciano-forte)}
.pergunta summary i{border:1px solid var(--linha-forte);border-radius:50%;flex:none;height:26px;position:relative;transition:transform .3s var(--curva),border-color .3s;width:26px}
.pergunta summary i::before,.pergunta summary i::after{background:var(--media);content:"";height:1.5px;inset:50% 7px auto;position:absolute;transform:translateY(-50%)}
.pergunta summary i::after{transform:translateY(-50%) rotate(90deg);transition:opacity .25s}
.pergunta[open] summary i{border-color:var(--ciano);transform:rotate(180deg)}
.pergunta[open] summary i::after{opacity:0}
.pergunta p{color:var(--media);font-size:15.5px;max-width:52em;padding:0 46px 22px 0}

/* ── FECHO E RODAPE ───────────────────────────────────────────── */
.fecho{background:var(--faixa);border-radius:var(--raio);color:#fff;overflow:hidden;padding:62px 46px;position:relative;text-align:center}
.fecho::before{background:var(--brilho);content:"";inset:0;pointer-events:none;position:absolute}
.fecho>*{position:relative}
.fecho h2{font-size:clamp(27px,3.8vw,42px);letter-spacing:-.045em;margin-bottom:14px}
.fecho p{color:rgba(255,255,255,.72);font-size:17px;margin:0 auto 28px;max-width:34em}
.fecho .heroi-acoes{justify-content:center}
.fecho .botao.fraco{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.fecho .botao.fraco:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}
.rodape{background:var(--cartao);border-top:1px solid var(--linha);color:var(--fraca);font-size:13.5px;margin-top:88px;padding:32px 0 44px}
.rodape-grade{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
.rodape a:hover{color:var(--tinta)}
@media (max-width:620px){.fecho{padding:42px 24px}}
/* QUEM PEDIU AO SISTEMA "menos animacao" -- Windows: Acessibilidade > Efeitos
   visuais > "Efeitos de animacao" (e tambem "Ajustar para melhor desempenho");
   macOS: Acessibilidade > Tela > Reduzir movimento -- desligava a pagina
   INTEIRA aqui, e num PC com esse ajuste ela abria morta. O que sai e' o
   MOVIMENTO; o esmaecer fica, porque esmaecer nao move nada. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:opacity .45s ease!important}
  .revela,[data-cadencia]>*{transform:none!important}
}
/* ═══════════════════════════════════════════════════════════════
   A PAGINA DA CASA (10/10/2026): *"tinha que ter uma apresentacao
   dmobix.com.br/apresentacao que apresenta a empresa dmobix e o
   cred mobix, e os outros modelos de negocio"*.

   Ate' hoje /apresentacao era a pagina de VENDA do crediario. Ela
   nao sumiu -- mudou de endereco (/crediario e cred.dmobix.com.br)
   e continua inteira. Aqui fica a casa: o sistema, a familia de
   produtos e os ramos que ela atende.

   O desenho e' o MESMO arquivo: tokens, fontes, faixas, cartoes e
   o papo do comercial vieram de la' sem uma linha nova de tema. Uma
   casa com duas caras seria a primeira coisa a desmentir o discurso.
   ═══════════════════════════════════════════════════════════════ */


/* ── A FAMILIA, DESENHADA ──────────────────────────────────────────
   A fila de cinco cartoes iguais nao conta o que importa aqui. O fato
   dificil e' que A CASA ESTA' DENTRO DO NOME: Cre+D'Mobix, Aten+D'Mobix,
   Agen+D'Mobix. Entao o desenho alinha a palavra "D'Mobix" numa coluna
   so' e deixa o prefixo mudar a esquerda dela -- o olho le' a marca se
   repetindo e o produto trocando, que e' a arquitetura inteira numa
   imagem. A TV nao forma palavra e vem antes, separada: e' a excecao, e
   ela se ve' no mesmo alinhamento. */
.arvore{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--raio);box-shadow:0 46px 90px -36px rgba(0,0,0,.8);padding:30px 32px}
.arvore-topo{align-items:center;border-bottom:1px solid rgba(255,255,255,.12);display:flex;gap:12px;margin-bottom:22px;padding-bottom:20px}
.arvore-topo img{height:34px;width:34px}
.arvore-topo b{color:#fff;font:800 19px/1 var(--corpo);letter-spacing:-.05em}
.arvore-topo span{color:rgba(255,255,255,.5);font:700 10px/1.3 var(--mono);letter-spacing:.12em;margin-left:auto;text-transform:uppercase}
.arvore ol{display:grid;gap:3px;list-style:none;margin:0;padding:0}
.arvore li a{align-items:baseline;border-radius:var(--raio-p);display:grid;gap:0 14px;grid-template-columns:minmax(0,1fr) auto;padding:10px 12px;transition:background .2s}
.arvore li a:hover{background:rgba(255,255,255,.07)}
/* A coluna da esquerda e' alinhada a' DIREITA: e' o que faz os cinco
   "D'Mobix" cairem exatamente uns sobre os outros. */
.arvore-nome{color:#fff;font:800 25px/1.15 var(--corpo);letter-spacing:-.05em;text-align:right;white-space:nowrap}
/* UMA COR SO', UM PESO SO' (regra dele, 08/10/2026: *"a parte do cred na
   mesma letra que ficou Mobix"*). O que mostra a costura aqui e' o
   ALINHAMENTO -- cinco "D'Mobix" caindo na mesma coluna --, e nao um
   prefixo pintado de outra cor: pintado, a marca passa a ler como duas
   palavras justamente na pagina que existe para dizer que e' uma. */
.arvore-nome i{color:inherit;font-style:normal}
.arvore-diz{color:rgba(255,255,255,.62);font:600 13.5px/1.2 var(--corpo);letter-spacing:-.01em;white-space:nowrap}
.arvore-pe{border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.45);font-size:12.5px;line-height:1.5;margin-top:20px;padding-top:18px}
@media (max-width:1040px){.arvore-nome{font-size:21px}}
@media (max-width:620px){
  /* O rotulo e' enfeite e quebrava em duas linhas ao lado da marca. No
     celular ele sai: a lista logo abaixo diz a mesma coisa melhor. */
  .arvore-topo span{display:none}
  .arvore{padding:24px 20px}
  .arvore li a{grid-template-columns:1fr;gap:3px}
  .arvore-nome,.arvore-diz{text-align:left;white-space:normal}
}

/* ── AS SOLUCOES, EM LINHAS ───────────────────────────────────────
   Tres colunas por linha: quem e' a solucao (nome, para quem e o endereco),
   o que ela liga, e o que fica de fora. A terceira e' a que importa -- sem
   ela a pagina seria seis paragrafos dizendo "serve para voce tambem", e
   nenhum lojista acredita nisso. */
.solucoes{display:grid;list-style:none;margin:0;padding:0}
.solucoes li{border-top:1px solid var(--linha)}
.solucoes li:last-child{border-bottom:1px solid var(--linha)}
.solucoes a{align-items:start;display:grid;gap:14px 30px;grid-template-columns:minmax(220px,.85fr) minmax(0,1.25fr) minmax(0,.9fr);padding:26px 14px;transition:background .25s,padding .25s var(--curva)}
.solucoes a:hover{background:var(--cartao-2);padding-left:22px}
.solucao-quem h3{font-size:23px;letter-spacing:-.045em}
.solucao-quem h3 i{color:inherit;font-style:normal}
.para{color:var(--media);display:block;font:600 14px/1.35 var(--corpo);margin-top:6px}
.solucoes .onde{color:var(--fraca);display:block;font:600 12.5px/1 var(--mono);letter-spacing:-.02em;margin-top:11px;transition:color .2s}
.solucoes a:hover .onde{color:var(--ciano-forte)}
.solucoes .liga{color:var(--tinta);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
/* O que fica de fora e' informacao, nao letra miuda: cinza mais claro e um
   fio a esquerda, para o olho saber que e' a outra metade da resposta. */
.solucoes .fora{border-left:2px solid var(--linha-forte);color:var(--fraca);font-size:14.5px;padding-left:16px}
@media (max-width:980px){
  .solucoes a,.solucoes a:hover{grid-template-columns:1fr;padding:24px 0}
  .solucoes .fora{border-left:0;border-top:1px solid var(--linha);padding:12px 0 0}
}

/* ── O QUE VEM DENTRO ──────────────────────────────────────────────
   Area por area, com as telas como pastilhas. A pastilha diz o nome que
   a pessoa vai ver no menu -- lista de recurso inventado nao sobrevive a
   primeira demonstracao. */
.areas{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.area{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--apoio);padding:26px;transition:border-color .3s,box-shadow .3s,transform .3s var(--curva)}
.area:hover{border-color:var(--ciano);box-shadow:var(--alto);transform:translateY(-3px)}
.area h3{font-size:19px;letter-spacing:-.04em;margin-bottom:8px}
.area p{color:var(--media);font-size:14.5px;margin-bottom:16px}
.area ul{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.area li{background:var(--cartao-2);border:1px solid var(--linha);border-radius:var(--pilula);color:var(--media);font:700 12.5px/1 var(--corpo);letter-spacing:-.01em;padding:8px 12px}
@media (max-width:980px){.areas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.areas{grid-template-columns:1fr}}


/* ── OS EFEITOS (estavam no fim da pagina, junto do script deles) ──────── */
/* 1) O PRINT DO HEROI INCLINA COM O MOUSE. A flutuacao continua na `.janela`
   (que ja' existia); a inclinacao vai na imagem, senao as duas brigariam pelo
   mesmo `transform`. */
.heroi .janela{perspective:1200px}
.heroi .janela img{transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateZ(0);transform-style:preserve-3d;transition:transform .55s var(--curva)}
.heroi .janela.segurando img{transition:transform .08s linear}

/* 2) A LUZ QUE SEGUE O CURSOR no fundo escuro do heroi. E' um segundo
   `::after` por cima do `::before` que ja' pinta o brilho fixo. */
.heroi::after{background:radial-gradient(520px circle at var(--mx,50%) var(--my,40%),rgba(0,169,210,.16),transparent 62%);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .6s}
.heroi.aceso::after{opacity:1}

/* 3) OS DOIS CELULARES DO PORTAL flutuam em contratempo, e o da frente
   responde ao mouse. */
.moldura{animation:flutua 8s ease-in-out infinite;transition:transform .5s var(--curva),box-shadow .5s}
.moldura-frente .moldura{animation-delay:-4s}
.moldura-frente:hover .moldura{animation-play-state:paused;box-shadow:0 40px 80px -30px rgba(6,35,43,.55);transform:translateY(-10px) rotate(-2deg)}

/* 4) OS CARTOES LEVANTAM AO PASSAR O MOUSE. O `.passo` ja' fazia isso; os
   planos e os trilhos passam a fazer o mesmo, para a pagina ter UM gesto. */
.plano,.trilho{transition:border-color .3s,box-shadow .3s,transform .3s var(--curva)}
.plano:hover,.trilho:hover{border-color:var(--ciano);box-shadow:var(--alto);transform:translateY(-4px)}
.plano.destaque:hover{transform:translateY(-6px)}

/* 5) O PRINT DA REGUA anda mais devagar que a pagina (paralaxe). */
.escada-real{overflow:hidden}
.escada-real img{transform:translateY(var(--par,0px)) scale(1.06);transition:transform .15s linear;will-change:transform}

/* 6) O BOTAO PRINCIPAL DO HEROI E' IMANTADO: puxa uns pixels para o cursor. */
.heroi .botao.forte{transition:transform .25s var(--curva),box-shadow .25s}

/* 7) O NUMERO QUE CONTA ganha um leve destaque enquanto sobe. */
.num.contando{color:var(--ciano-marca)}
.numeros-grade .num.contando,.heroi-numeros .num.contando{text-shadow:0 0 24px rgba(114,222,234,.35)}

@media (hover:none){.heroi .janela img{transform:none!important}}
@media (prefers-reduced-motion:reduce){
  .heroi .janela,.moldura{animation:none}
  .heroi .janela img,.escada-real img,.heroi .botao.forte,.moldura{transform:none!important;transition:none}
  .heroi::after{display:none}
}

/* ── A CAMADA DE ROLAGEM ────────────────────────────────────────────────── */
/* A) A BARRA DE PROGRESSO: dois pixels de ciano no topo, do tamanho do que
   ja' foi lido. Fica ACIMA da pilula (z 60 > 50). */
.progresso{background:linear-gradient(90deg,var(--ciano),var(--ciano-claro));height:2px;left:0;pointer-events:none;position:fixed;top:0;transform-origin:0 50%;transform:scaleX(var(--lido,0));width:100%;z-index:60}

/* B) O MENU SABE ONDE VOCE ESTA'. O link da secao visivel acende. */
.topo nav a.ativa{color:var(--ciano-forte)}
.topo.sobre-claro nav a.ativa{background:rgba(255,255,255,.08);color:var(--ciano-marca)}

/* C) A LUZ QUE SEGUE O MOUSE, em TODA faixa escura. Mesmo desenho do heroi. */
.escura::after{background:radial-gradient(520px circle at var(--mx,50%) var(--my,40%),rgba(0,169,210,.14),transparent 62%);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .6s}
.escura.aceso::after{opacity:1}

/* D) OS CARTOES INCLINAM NA MAO. Leve (4 graus) e por cima do levantar que
   ja' existe: o `--tx/--ty` entra no mesmo transform do hover. */
/* Especificidade de proposito: `[data-cadencia].visto>*` (a cadencia de
   entrada) e `.passo:hover` (o levantar antigo) escrevem `transform` com
   duas classes cada, e venciam este seletor de uma -- a variavel mudava e o
   cartao nao mexia. Tres classes ganham das duas; e so' DEPOIS de `.visto`,
   para nao atropelar a subida de entrada. */
[data-cadencia].visto>.passo,[data-cadencia].visto>.plano,[data-cadencia].visto>.trilho{transform:translateY(var(--sobe,0px)) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transform-style:preserve-3d}
.passo:hover,.plano:hover,.trilho:hover{--sobe:-4px}
.plano.destaque:hover{--sobe:-6px}
.passos,.planos,.trilhos{perspective:1400px}

/* E) O NUMERO DO PASSO PULA quando o cartao aparece. */
@keyframes pulo{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
[data-cadencia].visto>.passo::before{animation:pulo .6s var(--curva) both;animation-delay:inherit}

/* F) OS CELULARES DO PORTAL descem em velocidades diferentes. */
.moldura-dupla>.moldura{transform:translateY(var(--p1,0px))}
.moldura-frente{transform:translateY(var(--p2,0px))}
.moldura-dupla>.moldura,.moldura-frente{transition:transform .2s linear}
.moldura-frente:hover{transition:transform .5s var(--curva)}

@media (prefers-reduced-motion:reduce){
  .progresso{display:none}
  .escura::after{display:none}
  .passo,.plano,.trilho,.moldura-dupla>.moldura,.moldura-frente{transform:none!important;transition:none}
  [data-cadencia].visto>.passo::before{animation:none}
}


/* ── O HEROI CURTO, da pagina de Solucoes ─────────────────────────────────
   Quem clicou em "Soluções" ja' sabe por que veio: titulo grande de novo so'
   empurra a lista para baixo da dobra. */
.heroi.curto{padding:56px 0 44px}
.heroi.curto h1{font-size:clamp(30px,3.9vw,46px);margin:0 0 14px}
.heroi.curto .heroi-linha{max-width:38em}

/* ── A FICHA DA EMPRESA ───────────────────────────────────────────────────
   Razao social, CNPJ e cidade sao o que alguem procura antes de passar
   cartao para um software que nunca viu. Duas colunas, rotulo a esquerda --
   e' ficha, nao cartao de marketing. */
.ficha{border-top:1px solid var(--linha);display:grid;list-style:none;margin:0 auto;max-width:780px;padding:0}
.ficha li{align-items:baseline;border-bottom:1px solid var(--linha);display:grid;gap:4px 28px;grid-template-columns:minmax(150px,.4fr) minmax(0,1fr);padding:18px 0}
.ficha span{color:var(--fraca);font:700 11px/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.ficha b{color:var(--tinta);font:700 16px/1.4 var(--corpo);letter-spacing:-.02em}
.ficha a{color:var(--ciano-forte)}
.ficha a:hover{text-decoration:underline}
@media (max-width:620px){.ficha li{grid-template-columns:1fr}}

/* Os cartoes de "Como a gente trabalha" nao tem lista de pastilhas: sem a
   `ul`, o paragrafo e' o fim do cartao e a margem de baixo dele sobra. */
.area p:last-child{margin-bottom:0}

/* ── O MESMO SISTEMA, OUTRAS CHAVES LIGADAS ───────────────────────────────
   O ramo nao e' produto: e' um preset em `config.modules`. Esta lista mostra
   o preset, e a terceira coluna -- o que fica DESLIGADO -- e' a que prova que
   a adaptacao e' de verdade. Sem ela seriam quatro paragrafos dizendo "serve
   para voce tambem", e nenhum lojista acredita nisso.
   Mesmo desenho das `.solucoes`, de proposito: sao a mesma natureza de linha,
   e dois layouts para a mesma coisa so' fazem a pagina parecer remendada. */
.quem{border-top:1px solid var(--linha);display:grid;list-style:none;margin:0;padding:0}
.quem li{align-items:start;border-bottom:1px solid var(--linha);display:grid;gap:10px 30px;grid-template-columns:minmax(220px,.85fr) minmax(0,1.25fr) minmax(0,.9fr);padding:26px 0}
.quem h3{font-size:22px;letter-spacing:-.045em}
.quem h3 span{color:var(--media);display:block;font:600 14px/1.35 var(--corpo);letter-spacing:normal;margin-top:6px;text-transform:none}
.quem .liga{color:var(--tinta);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.quem .liga b{color:var(--ciano-forte)}
.quem .fora{border-left:2px solid var(--linha-forte);color:var(--fraca);font-size:14.5px;padding-left:16px}
@media (max-width:980px){
  .quem li{grid-template-columns:1fr}
  .quem .fora{border-left:0;border-top:1px solid var(--linha);padding:12px 0 0}
}