/* Cor, tipografia, espaço, raio, sombra e motion vêm de design/tokens.css.
   Nada de token novo aqui: o que for reutilizável sobe para lá. */
:root{ --r:var(--raio) }
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
section{padding:78px 0}
.hero+section{padding-top:16px}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity var(--dur-lenta) var(--t),transform var(--dur-lenta) var(--t)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(251,252,253,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
nav .in{display:flex;align-items:center;justify-content:space-between;height:68px;
  max-width:1120px;margin:0 auto;padding:0 24px}
.logo{display:block;line-height:0}
.logo img{height:38px;width:auto;display:block}
nav ul{display:flex;gap:28px;list-style:none;font-size:14.5px}
nav a{color:var(--cinza);text-decoration:none;transition:color var(--dur-rapida) var(--t)}
nav a:hover{color:var(--grafite)}
.cta{background:var(--grafite);color:#fff;text-decoration:none;font-weight:600;font-size:14.5px;
  padding:11px 20px;border-radius:8px;display:inline-block;
  transition:transform var(--dur-rapida) var(--t),box-shadow var(--dur-rapida) var(--t)}
.cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(40,43,50,.22)}
.cta:active{transform:translateY(0) scale(.99)}
/* Abaixo de 900px o menu passa para uma segunda linha, em vez de sumir.
   São doze páginas: esconder os links deixaria o visitante de celular sem
   navegação nenhuma, e um menu sanfona exigiria JS para resolver o que o
   flex-wrap resolve sozinho. */
@media(max-width:900px){
  html{scroll-padding-top:136px}     /* barra de duas linhas */
  nav .in{flex-wrap:wrap;height:auto;padding:14px 24px 0}
  nav ul{order:3;width:100%;gap:18px;justify-content:space-between;
    padding:12px 0;margin-top:12px;border-top:1px solid var(--linha)}
  .hero{min-height:calc(100dvh - 124px)}
}

/* ---------- hero ---------- */
/* centralizado: decisão do cliente. Corpo longo e tabelas seguem alinhados
   à esquerda, porque texto corrido centralizado prejudica a leitura. */
.ctr{text-align:center}
.ctr .lead,.ctr h1,.ctr h2{margin-left:auto;margin-right:auto}

/* hero ocupa a tela inteira: nada da próxima seção aparece antes do scroll */
.hero{min-height:calc(100dvh - 68px);display:flex;align-items:center;
  position:relative;text-align:center;overflow:hidden;padding:48px 0}

/* fundo: malha fina + o X da marca em escala, com uma luz que atravessa.
   Motivo geométrico da própria logo, não ornamento genérico. */
.heroBg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hgrid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(40,43,50,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,43,50,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 45%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 45%,#000 30%,transparent 78%)}
/* traço ascendente do X da logo, atravessando o hero. Só o azul: o X inteiro
   atrás de um título afirmativo lê como marca de "errado".
   --ang controla a inclinação; a da logo é acentuada. */
.hx{position:absolute;left:50%;top:56%;width:200%;height:240px;
  transform:translate(-50%,-50%) rotate(var(--ang,-34deg));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.hx i{position:absolute;left:0;right:0;display:block}
.hx .b{height:58px;top:46px;background:rgba(88,176,221,.13)}
.hx .g{height:12px;top:138px;background:rgba(40,43,50,.04)}
.hglow{position:absolute;left:50%;top:50%;width:min(1000px,100vw);height:620px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 55% 48% at 50% 50%,rgba(88,176,221,.20),transparent 68%);
  animation:pulsa 11s ease-in-out infinite}
.hsweep{position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(88,176,221,.16) 50%,transparent 62%);
  transform:translateX(-100%);animation:varre 7.5s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes varre{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.hero .wrap{position:relative;z-index:1}
.eyebrow{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--azulT);font-weight:700}
.hero .eyebrow{font-size:12.5px;letter-spacing:.21em}
/* título curto, então ganha escala. text-wrap:balance equilibra as duas
   linhas e evita palavra órfã; onde não houver suporte, o max-width segura. */
.hero h1{font-size:clamp(38px,6.2vw,72px);margin:38px auto 34px;max-width:20ch;
  text-wrap:balance;line-height:1.06}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.14em;
  background:var(--azul);opacity:.42;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-cena) var(--t) var(--dur)}
.hero.in h1 em::after{transform:scaleX(1)}
.hero .lead{font-size:20px;line-height:1.6;color:var(--cinza);max-width:54ch;margin:0 auto 52px}
.hero .acts{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:center}
.hero .acts .cta{padding:16px 30px;font-size:15.5px}
.ghost{background:#EDF0F3;color:var(--grafite)}
.ghost:hover{box-shadow:0 6px 18px rgba(40,43,50,.12)}
.hero .loc{margin-top:54px;font-size:14.5px;color:var(--cinza2)}

/* ---------- painel interativo ---------- */
.panel{background:var(--card);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 2px rgba(40,43,50,.04),0 16px 44px rgba(40,43,50,.07)}
.switch{display:flex;border-bottom:1px solid var(--linha);background:#F2F5F7}
.switch button{flex:1;appearance:none;background:none;border:0;cursor:pointer;font:inherit;
  padding:17px 20px;text-align:left;color:var(--cinza);border-right:1px solid var(--linha);
  transition:background var(--dur) var(--t)}
.switch button:last-child{border-right:0}
.switch b{display:block;font-size:15px;color:var(--grafite);transition:color var(--dur-rapida) var(--t)}
.switch small{font-size:12.5px}
.switch [aria-pressed=true]{background:var(--card)}
.switch [aria-pressed=true] b{color:var(--azulT)}
.switch button:focus-visible{outline:2px solid var(--azulT);outline-offset:-3px}
.pbody{padding:28px}
.rh,.row{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) minmax(0,1.05fr);gap:14px;align-items:center}
.rh{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--cinza2);
  padding-bottom:11px;border-bottom:1px solid var(--linha)}
.rh span:not(:first-child),.row span:not(:first-child){text-align:right}
.row{padding:16px 0;border-bottom:1px solid var(--linha);transition:opacity var(--dur) var(--t),filter var(--dur) var(--t)}
.row strong{font-size:16px;font-weight:600}
.row .v{font-size:15.5px;color:var(--cinza)}
.row .res{font-size:16.5px;font-weight:700;transition:color var(--dur) var(--t)}
.pos{color:var(--verde)}.neg{color:var(--vermelho)}
.row.cut{opacity:.26;filter:grayscale(1)}
.bar{height:5px;border-radius:3px;margin-top:7px;transform-origin:left;
  transition:transform var(--dur-lenta) var(--t),background var(--dur) var(--t)}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1px;
  background:var(--linha);border-top:1px solid var(--linha);margin-top:24px}
.sum>div{background:var(--card);padding:17px 19px}
.sum span{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--cinza2)}
.sum .big{font-size:25px;font-weight:700;letter-spacing:-.02em;margin-top:4px}
.sum .delta{font-size:12.5px;font-weight:600;color:var(--vermelho);opacity:0;transition:opacity var(--dur) var(--t) var(--dur-rapida)}
.sum .delta.on{opacity:1}
.story{padding:24px 28px;border-top:1px solid var(--linha);background:#F6F9FA;display:flex;gap:16px}
.mark{flex:0 0 auto;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:14px;background:var(--azul);color:#0E2C3B;transition:background var(--dur) var(--t),color var(--dur) var(--t)}
.story.alert .mark{background:var(--vermelho);color:#fff}
.story p{font-size:15px;color:var(--cinza);max-width:76ch}
.story b{color:var(--grafite)}
.act{padding:22px 28px;border-top:1px solid var(--linha);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:14.5px;
  padding:12px 21px;border-radius:8px;transition:transform var(--dur-rapida) var(--t),box-shadow var(--dur-rapida) var(--t)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:focus-visible{outline:2px solid var(--azulT);outline-offset:2px}
.danger{background:var(--vermelho);color:#fff;box-shadow:0 2px 10px rgba(179,38,30,.26)}
.hint{font-size:13px;color:var(--cinza2)}
.ilus{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza2);
  border:1px solid var(--linha);border-radius:99px;padding:5px 12px;margin-top:18px}

/* ---------- secao escura (teto + AI) ---------- */
.dark{background:var(--grafite2);color:#EEF1F4}
.dark h2{color:#fff}
.dark .lead{color:#A8AFB9}
.dark .eyebrow{color:var(--azul)}
.teto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:52px;align-items:center;margin-top:44px}
.calc{background:#232730;border:1px solid var(--linhaD);border-radius:var(--r);padding:26px}
.calc .line{display:flex;justify-content:space-between;padding:11px 0;font-size:15px;color:#A8AFB9;
  border-bottom:1px solid var(--linhaD)}
.calc .line b{color:#EEF1F4;font-weight:600}
.calc .line.tot{border-bottom:0;padding-top:16px;font-size:17px}
.calc .line.tot b{font-size:22px}
input[type=range]{width:100%;margin:22px 0 6px;accent-color:var(--azul);height:26px}
input[type=range]:focus-visible{outline:2px solid var(--azul);outline-offset:4px}
.slabel{display:flex;justify-content:space-between;font-size:13px;color:#A8AFB9}
.gauge{margin-top:26px;background:#232730;border:1px solid var(--linhaD);border-radius:var(--r);padding:24px}
.gtrack{height:14px;border-radius:7px;background:#31363F;overflow:hidden;position:relative;margin:16px 0 10px}
.gfill{height:100%;width:0;border-radius:7px;transition:width var(--dur) var(--t),background var(--dur) var(--t)}
.gceil{position:absolute;top:-5px;bottom:-5px;width:2px;background:#EEF1F4}
.state{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase}
.dot{width:9px;height:9px;border-radius:50%;background:currentColor}
.sDentro{color:#4ADE9B}.sAtencao{color:#F0B45E}.sEstourou{color:#FF7A72}
.resline{font-size:15px;color:#A8AFB9;margin-top:14px}
.resline b{color:#fff;font-size:20px}
@media(max-width:900px){.teto{grid-template-columns:1fr;gap:32px}}

/* ---------- GBV ---------- */
.gbv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center;margin-top:44px}
.gcalc{background:var(--card);border:1px solid var(--linha);border-radius:var(--r);padding:26px;
  box-shadow:0 1px 2px rgba(40,43,50,.04),0 14px 36px rgba(40,43,50,.06)}
.gcalc .line{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;
  font-size:15px;color:var(--cinza);border-bottom:1px solid var(--linha)}
.gcalc .line b{color:var(--grafite);font-weight:600;font-size:16px}
.gcalc .line.tot{border-bottom:0;padding-top:18px}
.gcalc .line.tot b{font-size:26px;letter-spacing:-.02em}
/* GBV: comparação que cresce ao entrar em cena. Sem controle: aqui o visitante
   observa, não opera. É o terceiro dos quatro modos das seções de método. */
.race{margin-top:8px}
.rrow{margin-bottom:20px}
.rlab{display:flex;justify-content:space-between;align-items:baseline;font-size:14.5px;
  color:var(--cinza);margin-bottom:8px}
.rlab b{color:var(--grafite);font-size:17px;font-weight:700}
.rtrack{height:22px;border-radius:6px;background:#EDF0F3;overflow:hidden}
.rfill{height:100%;width:0;border-radius:6px;transition:width var(--dur-cena) var(--t)}
.rfill.lucro{background:var(--grafite)}
.rfill.custo{background:var(--vermelho)}
.race.on .rfill.lucro{width:68.6%}          /* 480 de 700 */
.race.on .rfill.custo{width:80%}            /* 560 de 700 */
.rstamp{margin-top:6px;opacity:0;transform:scale(.94);
  transition:opacity var(--dur) var(--t) var(--dur-cena),transform var(--dur) var(--t) var(--dur-cena)}
.race.on .rstamp{opacity:1;transform:scale(1)}
.verd{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;margin-top:16px;padding:9px 15px;border-radius:99px}
.vCria{background:#E6F5EF;color:var(--verde)}
.vDestroi{background:#FBEAE8;color:var(--vermelho)}
@media(max-width:900px){.gbv{grid-template-columns:1fr;gap:30px}}

/* ---------- regime de competência: DRE econômica x caixa ---------- */
/* Motion graphic narrativo: o visitante assiste, não opera. Cada uma das quatro
   seções de método usa um modo diferente (decidir / explorar / observar / assistir). */
.comp{background:#F2F5F7}
.tlw{max-width:820px;margin:40px auto 0;position:relative}
.tlgrid{display:grid;grid-template-columns:minmax(150px,1.1fr) 1fr 1fr;gap:1px;
  background:#DFE4E9;border:1px solid #DFE4E9;border-radius:var(--r);overflow:hidden}
.tlgrid>div{background:#fff;padding:16px 18px}
.tlh{background:#F7F9FA!important;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--cinza2);font-weight:700}
.tll{font-size:14.5px;font-weight:600;color:var(--grafite)}
.tll small{display:block;font-weight:400;font-size:12.5px;color:var(--cinza2);margin-top:2px}
/* Valor da linha do tempo. Antes ficava visível em #C3C9D0 a opacity .35 antes
   de ser revelado, o que dava 1,19:1 contra o papel — ilegível, e ainda assim
   lido em voz alta pelo leitor de tela, entregando o desfecho antes da história.
   Agora o valor não revelado simplesmente não existe para ninguém: visibility
   hidden tira da tela e da árvore de acessibilidade ao mesmo tempo. A transição
   de visibility com atraso deixa a saída acontecer depois do fade, para a
   aparição continuar suave. Texto invisível não tem requisito de contraste. */
.tlv{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--cinza2);
  opacity:0;visibility:hidden;
  transition:color var(--dur-cena) var(--t),opacity var(--dur-cena) var(--t),
    visibility 0s linear var(--dur-cena)}
.tlv.on{opacity:1;visibility:visible;transition-delay:0s,0s,0s}
.tlv.on.p{color:var(--verde)} .tlv.on.n{color:var(--vermelho)}
/* "segue saudável" é texto de conteúdo, não marcador de vazio: precisa passar
   em contraste. O #C3C9D0 anterior dava 1,7:1. */
.tlv .dash{color:var(--cinza2);font-weight:400;font-size:18px}
/* colunas do grid: 1.1fr 1fr 1fr, então os centros caem em ~51,6% e ~83,8% */
.chip{position:absolute;left:51.6%;top:-14px;transform:translate(-50%,6px);
  background:var(--laranja);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  padding:7px 14px;border-radius:99px;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-lenta) var(--t),transform var(--dur-lenta) var(--t),left 2.2s var(--t);
  box-shadow:0 6px 18px rgba(156,90,0,.32)}
.chip.on{opacity:1;transform:translate(-50%,0)}
.chip.go{left:83.8%}
.tlcap{min-height:56px;margin-top:26px;text-align:center;font-size:17px;color:var(--cinza);
  transition:opacity var(--dur) var(--t)}
.tlcap b{color:var(--grafite)}
.tlcap.fade{opacity:0}
.tlbar{display:flex;gap:6px;justify-content:center;margin-top:6px}
.tlbar i{width:26px;height:3px;border-radius:2px;background:#D3D9DF;transition:background var(--dur) var(--t)}
.tlbar i.on{background:var(--azulT)}
@media(max-width:640px){.tlgrid{grid-template-columns:1fr}.tlh:first-child{display:none}
  .chip{left:18px!important}}
.dre{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.dcard{background:var(--card);border:1px solid var(--linha);border-radius:var(--r);padding:26px;
  box-shadow:0 1px 2px rgba(40,43,50,.04),0 12px 30px rgba(40,43,50,.05)}
.dcard .tit{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.dcard.eco .tit{color:var(--azulT)}
.dcard.cx .tit{color:var(--cinza2)}
.dcard h3{font-size:19px;margin:7px 0 3px}
.dcard .qq{font-size:13.5px;color:var(--cinza2);margin-bottom:16px}
.dline{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:15px;
  color:var(--cinza);border-bottom:1px solid var(--linha)}
.dline b{color:var(--grafite);font-weight:600;white-space:nowrap}
.dline.tot{border-bottom:0;padding-top:16px;font-size:16px}
.dline.tot b{font-size:25px;letter-spacing:-.02em}
.veredito{margin-top:22px;text-align:center;font-size:17px;color:var(--grafite)}
.veredito b{color:var(--vermelho)}
.conseq{max-width:660px;margin:26px auto 0;background:#fff;border:1px solid var(--linha);
  border-left:4px solid var(--vermelho);border-radius:var(--r);padding:24px 26px;
  text-align:left;display:none}
.conseq.on{display:block;animation:sobe var(--dur-lenta) var(--t)}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.conseq h5{font-size:17px;margin-bottom:12px}
.conseq .dline:last-of-type{border-bottom:0}
@media(max-width:900px){.dre{grid-template-columns:1fr}}

/* ---------- soluções: grade que vira painel + pilha ----------
   Estado 1: seis cards iguais em 3x2.
   Estado 2: o escolhido ocupa o bloco grande à esquerda, os outros cinco
   viram barras empilhadas à direita. A transição usa FLIP: mede antes e
   depois do reflow e anima a diferença em transform, que é barato na GPU. */
.acc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;height:404px;
  transition:height var(--dur-lenta) var(--t)}
.acc.sel{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  grid-template-rows:repeat(5,1fr);height:496px}
.acc.sel .ai.open{grid-column:1;grid-row:1/6}
.acc.sel .ai:not(.open){grid-column:2}

.ai{position:relative;background:var(--card);border:1px solid var(--linha);border-radius:var(--r);
  overflow:hidden;cursor:pointer;will-change:transform;
  transition:box-shadow var(--dur) var(--t),border-color var(--dur) var(--t),background var(--dur) var(--t)}
.ai:hover{border-color:#C4CCD4;box-shadow:0 8px 22px rgba(40,43,50,.07)}
.ai.open{cursor:default;box-shadow:0 2px 4px rgba(40,43,50,.05),0 18px 46px rgba(40,43,50,.10)}
.ai::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--azul);
  transform:scaleY(0);transform-origin:top;transition:transform var(--dur) var(--t) var(--dur-rapida)}
.ai.open::after{transform:scaleY(1)}
.atab{position:absolute;inset:0;appearance:none;background:none;border:0;padding:0;
  cursor:inherit;z-index:3}
.atab:focus-visible{outline:2px solid var(--azulT);outline-offset:-4px;border-radius:var(--r)}

.inner{height:100%;transition:opacity var(--dur-rapida) linear}
.acc.movendo .inner{opacity:0}

/* cartão fechado */
.mini{height:100%;padding:24px 26px;display:flex;flex-direction:column}
.mini .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--azulT);font-weight:700}
.mini h3{font-size:20px;margin:10px 0 9px}
/* A linha de resumo vem do primeiro período do texto do serviço, então varia de
   tamanho. Em Valuation ela estourava a altura fixa da grade e era cortada no
   meio da linha, sem reticência. Limitada a quatro linhas: corta de propósito e
   avisa que continua. Abaixo de 900px o card cresce sozinho e o limite sai. */
.mini .one{font-size:14.5px;color:var(--cinza);display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.mini .tp{margin-top:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza2)}
/* barra estreita, quando outro está aberto */
.acc.sel .ai:not(.open) .mini{padding:0 22px;justify-content:center}
.acc.sel .ai:not(.open) .mini h3{font-size:16.5px;margin:0}
.acc.sel .ai:not(.open) .mini .k,
.acc.sel .ai:not(.open) .mini .one,
.acc.sel .ai:not(.open) .mini .tp{display:none}
.ai.open .mini{display:none}

/* Painel aberto do acordeão. Chamava-se .full e colidia com o modificador
   .f.full do formulário, que marca campo de largura total. O resultado era
   grave e invisível numa auditoria de DOM: abaixo de 900px o max-height:0
   desta regra vencia e cortava e-mail, serviço, mensagem e aceite para altura
   zero — no celular o formulário mostrava só Nome e Empresa. No desktop
   vazavam o padding de 34px e o overflow:auto. Renomeado para .detalhe. */
.detalhe{display:none;height:100%;overflow-y:auto;padding:34px 38px}
.ai.open .detalhe{display:block}
.detalhe .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--azulT);font-weight:700}
.detalhe h3{font-size:clamp(24px,2.4vw,31px);margin:10px 0 14px}
.detalhe .desc{font-size:16.5px;color:var(--cinza);max-width:50ch}
.detalhe h4{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza2);margin:24px 0 12px}
.detalhe ul{list-style:none;max-width:54ch}
.detalhe li{position:relative;padding-left:20px;font-size:15.5px;color:var(--cinza);margin-bottom:9px}
.detalhe li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--azul)}
.detalhe .ress{font-size:13.5px;color:var(--cinza2);margin-top:16px;max-width:54ch}
.detalhe .foot{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:26px;
  padding-top:20px;border-top:1px solid var(--linha)}
.detalhe .tp{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza2)}
.fechar{position:absolute;top:14px;right:16px;z-index:4;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--linha);background:#fff;color:var(--cinza);cursor:pointer;
  font-size:17px;line-height:1;display:none;transition:background var(--dur-rapida) var(--t)}
.ai.open .fechar{display:block}
.fechar:hover{background:#F2F5F7}

@media(max-width:900px){
  .acc,.acc.sel{display:flex;flex-direction:column;gap:10px;height:auto}
  .mini .one{display:block;-webkit-line-clamp:none}   /* card cresce: cabe inteiro */
  .ai::after{display:none}
  .mini,.acc.sel .ai:not(.open) .mini{padding:20px 22px}
  .acc.sel .ai:not(.open) .mini .k{display:block}
  .acc.sel .ai:not(.open) .mini h3{font-size:19px;margin:8px 0 0}
  .ai.open .mini{display:flex}
  .ai.open .mini .one,.ai.open .mini .tp{display:none}
  .detalhe{max-height:0;padding:0 22px;overflow:hidden;display:block;
    transition:max-height var(--dur) var(--t),padding var(--dur) var(--t)}
  .ai.open .detalhe{max-height:900px;padding:0 22px 26px}
  .detalhe h3,.detalhe .k{display:none}
  .fechar{display:none!important}
}

/* ---------- modalidades ---------- */
.mod{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:42px}
.mcard{background:var(--card);border:1px solid var(--linha);border-radius:var(--r);padding:30px 32px;
  position:relative;overflow:hidden}
.mcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.mcard.pres::before{background:var(--grafite)}
.mcard.onl::before{background:var(--azul)}
.mcard .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.mcard.pres .k{color:var(--cinza2)} .mcard.onl .k{color:var(--azulT)}
.mcard h3{font-size:23px;margin:9px 0 12px}
.mcard p{font-size:16px;color:var(--cinza)}
.mcard h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza2);margin:22px 0 10px}
.mcard ul{list-style:none}
.mcard li{position:relative;padding-left:19px;font-size:15px;color:var(--cinza);margin-bottom:8px}
.mcard li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;
  background:#C3CBD3}
.mcard.onl li::before{background:var(--azul)}
.modnota{margin-top:24px;text-align:center;font-size:16px;color:var(--cinza)}
.modnota b{color:var(--grafite)}
@media(max-width:900px){.mod{grid-template-columns:1fr}}

/* ---------- sócios ----------
   As fotos são de estúdio com fundo preto. Cartão escuro faz o fundo
   desaparecer, em vez de deixar um retângulo preto sobre a página clara. */
.socios{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:42px}
.soc{background:var(--grafite2);border-radius:var(--raio);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr)}
.soc img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.soc .txt{padding:28px 28px 28px 26px;display:flex;flex-direction:column;justify-content:center}
.soc h3{font-size:21px;color:#fff;margin-bottom:4px}
.soc .fn{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--azul);
  font-weight:700;margin-bottom:14px}
.soc p{font-size:14.5px;color:#A8AFB9;line-height:1.6}
.soc .zap{margin-top:16px;font-size:14px;color:#EEF1F4;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  border-bottom:1px solid var(--linhaD);padding-bottom:3px;transition:border-color var(--dur-rapida) var(--t)}
.soc .zap:hover{border-color:var(--azul)}
@media(max-width:900px){.socios{grid-template-columns:1fr}
  .soc{grid-template-columns:minmax(0,150px) minmax(0,1fr)}}
@media(max-width:640px){.soc{grid-template-columns:1fr}
  .soc img{aspect-ratio:4/3;object-position:center 22%}}

/* ---------- missão, visão, valores ---------- */
.mvv{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:42px;
  border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.mvv>div{padding:34px 30px;border-right:1px solid var(--linha)}
.mvv>div:last-child{border-right:0}
.mvv .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--azulT);
  font-weight:700;margin-bottom:14px}
.mvv p{font-size:17px;color:var(--grafite);line-height:1.5}
.mvv ol{list-style:none;counter-reset:v}
.mvv li{counter-increment:v;font-size:16px;color:var(--grafite);padding:9px 0;
  border-bottom:1px solid var(--linha);display:flex;gap:12px;align-items:baseline}
.mvv li:last-child{border-bottom:0}
.mvv li::before{content:"0" counter(v);font-size:11px;font-weight:700;color:#B9C0C8;
  font-variant-numeric:tabular-nums}
.mvv li small{display:block;font-size:13.5px;color:var(--cinza2);margin-top:2px}
@media(max-width:900px){.mvv{grid-template-columns:1fr}
  .mvv>div{border-right:0;border-bottom:1px solid var(--linha)}
  .mvv>div:last-child{border-bottom:0}}

/* ---------- ai ---------- */
.aicard{background:#232730;border:1px solid var(--linhaD);border-radius:var(--r);padding:22px}
.acct{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--linhaD);font-size:14.5px}
.acct:last-child{border-bottom:0}
.acct .nm{color:#EEF1F4}
.acct .vl{color:#A8AFB9;font-size:13.5px}

/* ---------- situações típicas ---------- */
/* Padrão recorrente, não case de cliente. Não exige autorização de ninguém
   porque não se refere a nenhuma empresa específica. Ver docs/decisions.md D012. */
.sit{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--linha);border:1px solid var(--linha);border-radius:var(--r);
  overflow:hidden;margin-top:42px}
.sit>div{background:var(--card);padding:28px 30px}
.sit .q{font-size:17.5px;color:var(--grafite);font-weight:600;line-height:1.4;
  padding-left:18px;border-left:3px solid var(--azul)}
.sit .a{font-size:15.5px;color:var(--cinza);margin-top:16px}
.sit .a b{color:var(--grafite);font-weight:600}
.sitnota{margin-top:22px;text-align:center;font-size:14.5px;color:var(--cinza2)}

/* ---------- contato ---------- */
.who{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
.who a{display:flex;gap:13px;align-items:center;text-decoration:none;color:var(--grafite);
  background:var(--card);border:1px solid var(--linha);border-radius:10px;padding:14px 20px 14px 14px;
  transition:transform var(--dur-rapida) var(--t),box-shadow var(--dur-rapida) var(--t)}
.who a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(40,43,50,.1)}
.av{width:40px;height:40px;border-radius:50%;background:#EAF4FA;color:var(--azulT);
  display:grid;place-items:center;font-weight:700;font-size:13.5px}
.who b{display:block;font-size:15px}.who small{color:var(--cinza)}
footer{border-top:1px solid var(--linha);padding:36px 0;font-size:13.5px;color:var(--cinza2)}

/* ---------- formulário ---------- */
.form{max-width:660px;margin:44px auto 0;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--r);padding:32px;text-align:left;
  box-shadow:0 1px 2px rgba(40,43,50,.04),0 16px 44px rgba(40,43,50,.06)}
.form h2{font-size:19px;margin-bottom:6px}
.form .sub{font-size:14.5px;color:var(--cinza);margin-bottom:24px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:7px}
.f.full{grid-column:1/-1}
.f label{font-size:13.5px;font-weight:600;color:var(--grafite)}
.f label span{color:var(--cinza2);font-weight:400}
.f input,.f select,.f textarea{font:inherit;font-size:15px;color:var(--grafite);
  background:#fff;border:1px solid #CFD5DC;border-radius:8px;padding:11px 13px;
  transition:border-color var(--dur-rapida) var(--t),box-shadow var(--dur-rapida) var(--t)}
.f textarea{resize:vertical;min-height:96px}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--azulT);
  box-shadow:0 0 0 3px rgba(15,92,122,.14)}
.f .help{font-size:12.5px;color:var(--cinza2)}
/* padding vertical existe para o alvo de toque, não para respiro: o rótulo
   inteiro é clicável e media 21px de altura, abaixo dos 24px do WCAG 2.2
   (2.5.8). Com 3px em cima e embaixo passa a 27px. */
.check{display:flex;gap:10px;align-items:flex-start;margin-top:4px;padding:3px 0;
  font-size:14px;color:var(--cinza)}
.check input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--azulT)}
.check a{color:var(--azulT)}
.aviso{font-size:13.5px;color:var(--cinza);background:#F4F7F9;border:1px solid var(--linha);
  border-radius:8px;padding:13px 15px;margin-top:20px}
.form .cta{margin-top:22px;width:100%;text-align:center;border:0;cursor:pointer;font:inherit;
  font-weight:600;font-size:15.5px;padding:15px 24px}
.okmsg{display:none;text-align:center;padding:26px 10px}
.okmsg b{display:block;font-size:18px;margin-bottom:6px}
.okmsg p{color:var(--cinza);font-size:15px}
.form.enviado .fgrid,.form.enviado .aviso,.form.enviado .cta,.form.enviado h3,.form.enviado .sub{display:none}
.form.enviado .okmsg{display:block}
@media(max-width:640px){.fgrid{grid-template-columns:1fr}.form{padding:24px 20px}}

@media(max-width:900px){
  section{padding:68px 0}
  .rh{display:none}
  .row{grid-template-columns:1fr auto;gap:5px 12px}
  .row .v::before{content:attr(data-l) " ";font-size:11px;text-transform:uppercase;color:#9AA1AA}
  .row .v,.row .res{text-align:left}.row .bw{grid-column:1/-1}
  .pbody{padding:20px 16px}.story,.act{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}.hero h1 em::after{transform:scaleX(1)}}

/* ==================== cabeçalho e rodapé do site ==================== */

/* Atalho para quem navega por teclado: fica escondido até receber foco */
.pular{position:absolute;left:-9999px;top:0;z-index:200;background:var(--grafite);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--raio-sm) 0;font-weight:600;text-decoration:none}
.pular:focus{left:0}

nav a:focus-visible,footer a:focus-visible,.logo:focus-visible{outline:2px solid var(--azulT);
  outline-offset:3px;border-radius:3px}

footer{border-top:1px solid var(--linha);background:var(--papel-alt);margin-top:0}
.frodape{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:36px;padding-top:52px;padding-bottom:40px}
.frodape h2{font-size:var(--txt-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cinza2);margin-bottom:14px}
.frodape ul{list-style:none}
.frodape li{margin-bottom:9px}
.frodape a{color:var(--cinza);text-decoration:none;font-size:14.5px;
  transition:color var(--dur-rapida) var(--t)}
.frodape a:hover{color:var(--grafite)}
.flogo{height:34px;width:auto;display:block;margin-bottom:16px}
.fend{font-size:14px;color:var(--cinza2);line-height:1.6;margin-bottom:10px}
.ftel{color:var(--cinza2);font-size:13px}
.flegal{border-top:1px solid var(--linha);padding-top:22px;padding-bottom:30px;
  font-size:13px;color:var(--cinza2)}

@media(max-width:900px){.frodape{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:640px){.frodape{grid-template-columns:1fr}}

/* ==================== páginas internas ==================== */

.pagina{padding:64px 0 20px}
.pagina .eyebrow{margin-bottom:14px}
.pagina h1{font-size:clamp(32px,4.4vw,50px);max-width:20ch;margin-bottom:18px;text-wrap:balance}
.pagina .lead{font-size:19px;color:var(--cinza);max-width:60ch}
.migalha{font-size:13.5px;color:var(--cinza2);margin-bottom:22px}
.migalha a{color:var(--cinza2);text-decoration:none}
.migalha a:hover{color:var(--grafite)}

.prosa{max-width:var(--medida);padding-bottom:40px}
.prosa h2{font-size:clamp(21px,2.4vw,27px);margin:38px 0 12px}
.prosa h3{font-size:18px;margin:26px 0 8px}
.prosa p{font-size:16.5px;color:var(--cinza);margin-bottom:14px}
.prosa ul{list-style:none;margin-bottom:16px}
.prosa li{position:relative;padding-left:20px;font-size:16px;color:var(--cinza);margin-bottom:9px}
.prosa li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  border-radius:2px;background:var(--azul)}
.prosa .ressalva{background:var(--papel-alt);border-left:3px solid var(--laranja);
  border-radius:0 var(--raio-sm) var(--raio-sm) 0;padding:18px 22px;margin:24px 0;font-size:15.5px}

/* Grade de serviços: índice de soluções e bloco "outras soluções" das páginas
   de serviço. auto-fit resolve as faixas sozinho — 3 colunas no container
   cheio, 2 no tablet, 1 no celular — sem media query própria. */
.grid6{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.svc{display:flex;flex-direction:column;text-align:left;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);padding:24px 26px;
  transition:transform var(--dur-rapida) var(--t),border-color var(--dur-rapida) var(--t),
    box-shadow var(--dur) var(--t)}
.svc:hover{transform:translateY(-2px);border-color:#C4CCD4;box-shadow:var(--sombra-hover)}
.svc:focus-visible{outline:2px solid var(--azulT);outline-offset:3px}
.svc .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--azulT);font-weight:700}
.svc h3{font-size:19px;margin:10px 0 8px}
.svc p{font-size:14.5px;color:var(--cinza)}
.svc .t{margin-top:auto;padding-top:18px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cinza2)}

.fim{background:var(--papel-alt);border-top:1px solid var(--linha);padding:56px 0}
.fim h2{font-size:clamp(23px,2.8vw,32px);margin-bottom:12px}
.fim p{font-size:17px;color:var(--cinza);max-width:52ch;margin:0 auto 26px}

.erro{min-height:60vh;display:flex;flex-direction:column;justify-content:center;text-align:center}
.erro .cod{font-size:76px;font-weight:700;color:var(--linha);letter-spacing:-.04em;line-height:1}

/* campo-armadilha do antispam: fora da tela, sem display:none para o robô preencher */
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.errmsg{display:none;text-align:center;padding:22px 10px;color:var(--vermelho)}
.errmsg b{display:block;font-size:17px;margin-bottom:6px}
.errmsg p{color:var(--cinza);font-size:15px}
.form.falhou .errmsg{display:block}

/* ==========================================================================
   Anel de foco padrão.
   Tinham regra própria apenas nav, rodapé, .logo, .btn, .svc, .atab e o
   controle deslizante. Todo o resto — inclusive o botão de enviar do
   formulário, os cartões de WhatsApp, o link de pular e o CTA do Polux AI —
   caía no anel padrão do navegador. O do Chrome é bom; o de cada navegador é
   diferente, e depender disso é depender de sorte.
   A variante clara existe porque o azul escuro da marca desapareceria contra
   os fundos dos blocos escuros.
   Campos de formulário ficam de fora de propósito: têm indicador próprio
   (borda + halo) e regra mais específica, que continua vencendo.
   ========================================================================== */
:focus-visible{outline:2px solid var(--azulT);outline-offset:3px}
.dark :focus-visible,
.calc :focus-visible,
.aicard :focus-visible,
.pular:focus{outline:2px solid var(--azul);outline-offset:3px}

/* ==========================================================================
   Classes que substituíram os 72 atributos style="" herdados do protótipo.
   Enquanto existiam, a CSP era obrigada a permitir style-src 'unsafe-inline'
   — ver docs/security.md. Agora ela é 'self'.
   ========================================================================== */

/* Fila de botões. Só existia dentro do hero, e por isso os dois botões do 404
   e os três do fim de cada página de serviço saíam com 4px entre si em vez de
   18px: o justify-content dos atributos inline não fazia nada num display
   block. O centramento acompanha .ctr, em vez de ser repetido no HTML. */
.acts{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.ctr .acts,.hero .acts{justify-content:center}
.ctr .who{justify-content:center}

/* Título e subtítulo de seção. Não havia regra base para .lead fora do hero e
   das páginas internas — era essa lacuna que obrigava cada seção da home a
   repetir tamanho, cor e medida no HTML. As variações de 0,5px no tamanho e
   de 2 a 8ch na medida vinham do protótipo, não de decisão de design, e foram
   colapsadas em dois degraus: seção comum e seção de tese. */
.stitle{font-size:clamp(26px,3.6vw,40px);margin:16px auto 14px}
.stitle.tese{font-size:clamp(26px,3.6vw,42px);margin-bottom:18px}
.w24{max-width:24ch}
.w26{max-width:26ch}
.lead{font-size:17px;color:var(--cinza);max-width:62ch}
.lead.tese{font-size:17.5px;max-width:65ch}
.lead.miuda{font-size:15.5px}

/* Espaçamento de seção. A régua é section{padding:78px 0}; estas ajustam
   quando uma seção vem colada na anterior e o respiro cheio ficaria demais. */
section.pt0{padding-top:0}
section.pt20{padding-top:20px}
section.pt34{padding-top:34px}
section.pt56{padding-top:56px}
section.pb0{padding-bottom:0}

/* Deslocamento vertical pontual */
.mt6{margin-top:6px}
.mt10{margin-top:10px}
.mt14{margin-top:14px}
.mt16{margin-top:16px}
.mt18{margin-top:18px}
.mt24{margin-top:24px}
.mt26{margin-top:26px}
.mt30{margin-top:30px}
.mt32{margin-top:32px}
.mt38{margin-top:38px}

/* Prosa mais estreita que a medida padrão (66ch) */
.prosa.estreita{max-width:62ch}

/* Linha do e-mail, logo abaixo dos WhatsApps dos sócios */
.email-linha{margin-top:26px;color:var(--cinza);font-size:15px}

/* Blocos escuros: notas de rodapé, etiqueta do cartão e prosa do GBV */
.nota-escura{font-size:14.5px;color:#A8AFB9;margin-top:18px}
.nota-escura.miuda{font-size:13.5px;color:#8A929C;margin-top:16px}
.eyebrow-card{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#8A929C;margin-bottom:6px}
.aiwrap{max-width:520px;margin:44px auto 0}
.gbv-txt{font-size:17px;color:var(--cinza)}
.gbv-txt b{color:var(--grafite)}
.gbv-nota{font-size:16px;color:var(--cinza);margin-top:16px}

/* Cores pontuais em números, traços e no CTA sobre fundo escuro */
.c-azul{color:var(--azul)}
.c-branco{color:#fff}
.c-vermelho{color:var(--vermelho)}
.c-cinza2{color:var(--cinza2)}
.ilus.escura{color:#8A929C;border-color:var(--linhaD)}
.calc .line.tot.somada{border-top:1px solid var(--linha);margin-top:6px}
.cta.azul{background:var(--azul);color:#0E2C3B}

/* Segunda opção sobre fundo escuro: contorno em vez de preenchimento, para não
   competir com o botão principal. O .ghost claro, usado no hero, ficaria mais
   chamativo que o azul num bloco escuro — o oposto da hierarquia pretendida. */
.dark .cta.linha{background:transparent;color:#EEF1F4;
  box-shadow:inset 0 0 0 1px var(--linhaD)}
.dark .cta.linha:hover{background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px #4A515C}