@import url("fontes.b8777a945b.css");

/* ==========================================================================
   FLOAT — sistema visual
   Dono: Estúdio.  RASCUNHO — não publicado.

   CONCEITO (14/08/2026): Maré. A marca é a palavra: o "o" de float é um
   círculo pela metade, na linha d'água. Daí sai a paleta — um campo frio e
   claro, quase sem cor, e o ciano aparecendo num lugar só de cada vez. O
   âmbar é a única coisa quente da página, e é secundário de propósito.
   Rótulo e número em monoespaçada, como em desenho técnico — é a textura
   que nenhum site do setor tem, e ela sobreviveu à troca de marca.

   O QUE MUDOU, e por quê: a versão anterior era "prancha de projeto",
   concreto quente com tinta de aço, e foi construída para as direções que o
   Lucas recusou em 14/08. Os VALORES trocaram; a estrutura de token, a
   escala tipográfica e a pesquisa abaixo continuam valendo — foi por causa
   dela que a troca coube em quatro blocos em vez de uma reescrita.
   A fonte da verdade das cores é ../../marca/KIT.html.

   PESQUISA QUE SUSTENTA AS ESCOLHAS (29/07/2026, ver PESQUISA-DE-DESIGN.md):
   · Quase todo site de construtora usa vermelho/laranja como marca
     (McCarthy, Sundt, MATT, Schimenti, WSP, Bechtel, Perkins). Azul é o que
     nos separa do setor — e é a cor de quem cuida de dinheiro. O ciano leva
     esse achado um passo além: separa também dos azuis corporativos.
   · Nenhum site premium usa preto puro. Todos usam um quase-preto com viés de
     cor (Linear #08090a, Harvey #1f1d1a quente, Mercury #272735 azulado).
     O nosso é #0C1518, com viés de azul-esverdeado — a mesma família da marca.
   · Nenhum usa branco puro DE FUNDO (Runway #f5f7fa, Retool #e9eae7,
     Clay #f2f2f2, Attio #e6e7ea). A página é #F4F6F7 e obedece. O CARTÃO é
     branco puro de propósito: é o que faz o cartão subir do papel sem sombra
     pesada, e o achado era sobre o fundo da página, não sobre o painel.
   · O sinal de "top tier" em tipografia é fonte própria, não fonte de sistema
     (Digits/StabilGrotesk, Autodesk/ArtifaktElement, Harvey e Ramp com fonte
     fechada). Não temos fonte própria — usamos uma grotesca industrial bem
     desenhada (Archivo) em toda a escala, que é o mesmo padrão do Linear.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
/* Toda tinta abaixo foi MEDIDA contra TODAS as superfícies do seu escopo, e
   não contra a mais fácil. A régua é WCAG 2.1, mínimo 4,5:1. Quem mexer numa
   cor aqui refaz a medição inteira do escopo antes de salvar — foi assim que
   apareceu o único reprovado da migração (ver o bloco 4, o ink-3). */
:root {
  /* --- superfícies: papel frio, quase sem cor --- */
  --paper:      #F4F6F7;
  --paper-2:    #E8EDEF;
  --surface:    #FFFFFF;
  --line:       #DCE3E5;
  --line-2:     #BFCACE;

  /* --- tinta: quase-preto com viés da própria marca --- */
  --ink:        #0C1518;
  --ink-2:      #33454B;
  /* Reber e Schwarz mostraram que a mesma frase é julgada verdadeira com mais
     frequência em contraste ALTO do que em médio. Para uma empresa que vende
     honestidade, contraste é argumento — por isso o texto de apoio tem folga
     em vez de passar raspando.

     ⚠️ Este valor é MAIS ESCURO que o tinta-3 que o KIT publicava, e o motivo
     é que o site tem fundos que o kit não tem. Medido só contra papel, cartão
     e faixa, o #5C6E75 dava 4,51:1 e passava. O site também pinta fundo de
     estado, e o --bad-wash é a superfície mais escura da página: ali o mesmo
     tom caía para 4,25:1, e a renderização das 24 páginas pegou isso em duas
     datas de 11,5px. Agora: 4,77:1 no pior dos OITO fundos claros.
     O KIT foi corrigido junto, para os dois não discordarem. */
  --ink-3:      #56666C;

  /* --- marca: Maré --- */
  /* DUAS cianos, e a divisão é por função, igual à regra que o PALETA.md fixa:
     --mare      é o DESENHO da marca. Não é texto, então pode ser mais aberta.
     --mare-ink  é o ciano de TEXTO, link e botão. O --mare como letra dava
                 4,94:1 no papel e 4,73:1 no lavado — passava, mas por um
                 décimo, e texto de 12,5px não pode depender de um décimo.
     NÃO "unifique" as duas achando que é inconsistência. */
  --mare:       #0E7490;
  --mare-ink:   #0A6480;
  --mare-hover: #084F66;
  --mare-lit:   #22D3EE;   /* só vive em fundo escuro */
  --mare-deep:  #072E3A;   /* a laje da seção escura e a faixa de fecho */
  --mare-wash:  #E3F3F7;
  --on-mare:    #F2FBFD;   /* 6,35:1 sobre o botão, 8,62:1 sobre o hover */

  /* --- secundária: âmbar. PROVISÓRIA, por decisão do Lucas em 14/08 --- */
  /* Mesma divisão por função das cianos:
     --ambar      é fio, borda e fundo. Como letra dá 2,26:1 no papel.
     --ambar-ink  é o âmbar de texto: 5,86:1 no pior fundo. Ele carrega coisa
                  pequena (rótulo de cartão, número de etapa, a etiqueta de
                  "dados fictícios"), e é onde um décimo custa caro.
     Enquanto ela for provisória, NADA crítico depende só dela. */
  --ambar:      #F0A93B;
  --ambar-ink:  #7A5207;
  --ambar-wash: #F7EEDC;

  /* --- semânticos: reservados, NUNCA são cor de marca --- */
  --ok:   #1C6B45;  --ok-wash:   #E0EDE6;
  --warn: #8A4F08;  --warn-wash: #F5EAD5;   /* 5,23:1 no pior dos oito fundos */
  --bad:  #9E2B22;  --bad-wash:  #F3E2DF;

  /* ⚠️ O CONFLITO CONHECIDO, e ele não tem conserto por hexadecimal.
     A secundária da marca é âmbar e o estado "atenção" é âmbar. Como TEXTO os
     dois são âmbar escuro, e ficam a 1,05:1 um do outro — o olho não separa.
     Testei três variantes de --warn; todas caem entre 1,05 e 1,20:1 contra o
     --ambar-ink, porque o problema é a faixa de brilho, não o tom.

     Por isso a regra da paleta manda que os dois NUNCA sejam a única diferença
     entre duas coisas: rótulo de marca e aviso de estado sempre vêm com ícone
     ou palavra ao lado. E é uma das razões de o âmbar ser provisório: se um dia
     o conflito incomodar numa tela de verdade, quem cede é o da MARCA.

     O que eu não posso fazer é o que eu tinha feito na primeira passada desta
     migração: deixar os dois com o MESMO valor. Aí some até a distinção no
     token, e alguém "simplifica" um no outro sem saber que são duas ideias. */

  /* --- tipografia --- */
  --sans: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --t-micro: 11.5px;
  --t-label: 12.5px;
  --t-small: 14px;
  --t-body:  17px;
  --t-lead:  20px;
  --t-h4:    19px;
  --t-h3:    23px;
  --t-h2:    clamp(28px, 3.6vw, 40px);
  --t-h1:    clamp(36px, 5.4vw, 60px);
  --t-hero:  clamp(38px, 6.2vw, 68px);

  /* --- forma --- */
  --r-sm: 4px;
  --r:    7px;
  --r-lg: 10px;

  --lift-1: 0 1px 2px rgba(16,21,25,.05);
  --lift-2: 0 1px 2px rgba(16,21,25,.05), 0 18px 40px -22px rgba(16,21,25,.28);
  --lift-3: 0 2px 4px rgba(16,21,25,.06), 0 34px 70px -30px rgba(16,21,25,.34);

  --wrap: 1180px;
  --nav-h: 72px;

  /* --- os nomes antigos NÃO viraram apelido, e a razão vale registro ------
     A primeira versão desta migração manteve --steel e --sand como apelidos
     (--steel: var(--mare-ink)) para não mexer em 66 usos. Renderizando as 24
     páginas, quatro textos apareceram com a cor do tema errado dentro da seção
     escura — e a causa não estava em nenhum deles.

     var() dentro de custom property é resolvida ONDE A PROPRIEDADE É
     DECLARADA, não onde é usada. --steel: var(--mare-ink) declarada no :root
     calcula #0A6480 ali e desce como esse valor literal. Redefinir --mare-ink
     dentro da .sec-escura não reapontava o apelido: o link ficava azul-escuro
     sobre a laje azul-escura, em 2,15:1.

     Isso já era um defeito latente do arquivo antes de mim (o --brand tinha o
     mesmo problema e ninguém tinha usado ele numa seção escura). O conserto
     não foi repetir os apelidos nos quatro escopos — foi apagar os apelidos.
     Uma coisa, um nome. E --band vira literal pelo mesmo motivo. */
  --band: #072E3A;
  --band-text: #EAF3F5;   /* 12,76:1 sobre a faixa */
  --band-muted: #8FAEB6;  /*  6,09:1 sobre a faixa */
}

:root[data-theme="dark"] {
  /* A noite da marca: #071A21 é o "noite" do KIT, um quase-preto com o mesmo
     viés azul-esverdeado do ciano. A página escura é a marca de fundo inteiro
     — é onde a identidade aparece com menos esforço. */
  --paper:      #071A21;
  --paper-2:    #0B242D;
  --surface:    #0E2831;
  --line:       #1C3A45;
  --line-2:     #2C505C;

  --ink:        #E8EFF1;
  --ink-2:      #B2C5CB;
  --ink-3:      #87A1A9;   /* 5,25:1 no pior fundo deste escopo */

  /* No escuro a marca inverte: quem carrega a cor é o ciano VIVO. O #0A6480
     do tema claro daria 1,9:1 aqui — cor de marca não atravessa tema sozinha. */
  --mare:       #22D3EE;
  --mare-ink:   #22D3EE;   /* 7,92:1 no pior fundo */
  --mare-hover: #67E3F7;
  --mare-lit:   #67E3F7;
  --mare-deep:  #0D3541;
  --mare-wash:  #0C2E3A;
  --on-mare:    #04222B;   /* 9,16:1 sobre o botão ciano */

  --ambar:      #F0A93B;
  --ambar-ink:  #F0A93B;   /* no escuro o âmbar claro já passa: pior caso 7,12:1 */
  --ambar-wash: #241B0C;

  --ok:   #52BC86;  --ok-wash:   #10231A;
  --warn: #D2A03A;  --warn-wash: #221B0D;
  --bad:  #E38C83;  --bad-wash:  #26150F;

  /* Rodada 13: a faixa de fecho era MAIS ESCURA que a página escura, dando
     corte de 1,03:1 contra 12,62:1 do tema claro. A faixa existe em 8 páginas
     e nelas era a única quebra grande, então no escuro elas não tinham nenhuma.
     Sobe, como a seção escura, porque no piso não há para onde descer.
     Fica em 1,36:1, de propósito abaixo da laje da seção escura (1,46:1), para
     a hierarquia da home continuar: a seção de segurança é a quebra maior, a
     faixa de fecho é a segunda. Texto conferido: 11,63:1 e o rótulo em 5,55:1. */
  --band: #0D3541;
  --band-text: #EAF3F5;
  --band-muted: #8FAEB6;

  --lift-1: 0 1px 2px rgba(0,0,0,.4);
  --lift-2: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.7);
  --lift-3: 0 2px 4px rgba(0,0,0,.5), 0 34px 70px -30px rgba(0,0,0,.8);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 640;
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
p  { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg { max-width: 100%; }
strong, b { font-weight: 620; }

a { color: var(--mare-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

:focus-visible {
  outline: 2px solid var(--mare-ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 780px; }

/* rótulo monoespaçado com fio — a assinatura tipográfica do site */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--ambar);
  flex: none;
}

.lead  { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); letter-spacing: -0.012em; }
.small { font-size: var(--t-small); color: var(--ink-3); }

.mono {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. AVISO DE RASCUNHO
   -------------------------------------------------------------------------- */
/* NÃO usa os tokens de tema de propósito: a faixa de aviso tem de ficar igual
   no fundo claro e no escuro. Se ela invertesse junto, no escuro viraria uma
   barra clara — que parece defeito de renderização, não aviso. */
.rascunho {
  background: #0C1518;
  color: #E8EFF1;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 8px 20px;
}
.rascunho::before { content: "▲ "; color: var(--ambar); }

/* --------------------------------------------------------------------------
   4. NAV
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav > .wrap { display: flex; align-items: center; gap: 32px; height: var(--nav-h); }

/* O LOGOTIPO
   Era um ícone (um nível de bolha) ao lado da palavra "Float". A marca nova
   não tem ícone ao lado: o "o" de float É o símbolo — um círculo pela metade,
   na linha d'água. Ícone e palavra viraram um objeto só, então o markup também
   virou um só, sem <svg> de 26px antes do texto.

   Os números são os mesmos do marca/KIT.html, e não valores parecidos:
   0,70em de diâmetro, traço de 0,15 do diâmetro (= 15 num viewBox de 100),
   espaçamento −0,045em, e o translateY de 0,005em que assenta o círculo na
   linha de base do "fl" e do "at". Se um dia divergirem, o KIT está certo.

   DUAS cores de propósito: a palavra herda currentColor (tinta no claro,
   quase-branco no escuro) e só o "o" carrega o ciano. Pintar a palavra
   inteira de ciano enfraquece as duas coisas. */
.logo {
  display: inline-flex; align-items: baseline; flex: none;
  font-family: var(--sans);
  font-size: 22px; font-weight: 700; letter-spacing: -0.045em;
  line-height: 1; white-space: nowrap;
  color: var(--ink); text-decoration: none;
}
.logo:hover { text-decoration: none; color: var(--ink); }
.logo .o {
  display: inline-block; width: .70em; height: .70em;
  transform: translateY(.005em); margin: 0 .012em;
}
.logo .o svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* o rodapé pede a marca um pouco menor que a da navegação */
.fgrid .logo { font-size: 20px; }

.nav-links {
  display: flex; align-items: center; gap: 26px;
  margin-left: auto; list-style: none;
  font-size: 15px; font-weight: 480;
}
.nav-links a { color: var(--ink-2); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* O contato dentro do menu SÓ existe no celular. No computador ele já está
   no cabeçalho como botão; o mesmo link duas vezes lado a lado não ajuda,
   faz duvidar se são a mesma coisa. */
.nav-contato { display: none; }

.nav-acts { display: flex; align-items: center; gap: 10px; flex: none; }

.theme-btn {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: transparent; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; font-size: 14px; line-height: 1;
  transition: color .15s, border-color .15s;
}
.theme-btn:hover { color: var(--ink); border-color: var(--line-2); }
.theme-btn svg { width: 15px; height: 15px; display: block; }
.menu-btn { display: none; }

/* --------------------------------------------------------------------------
   5. BOTÕES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15.5px; font-weight: 560;
  letter-spacing: -0.01em;
  padding: 13px 24px; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: none; }

.btn-1 { background: var(--mare-ink); color: var(--on-mare); }
.btn-1:hover { background: var(--mare-hover); }
:root[data-theme="dark"] .btn-1:hover { background: var(--mare-lit); }

.btn-2 { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-2:hover { border-color: var(--mare-ink); color: var(--mare-ink); }

.btn-3 { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--lift-1); }
.btn-3:hover { border-color: var(--line-2); }

.btn-band { background: var(--on-mare); color: var(--mare-hover); }
.btn-band:hover { background: #fff; }
:root[data-theme="dark"] .btn-band { background: var(--ink); color: var(--paper); }

.btn-sm { font-size: 14.5px; padding: 9px 17px; }
.btn-wide { width: 100%; }

/* Botão desabilitado tem de PARECER desabilitado. O do WhatsApp está sem
   número ainda, e estava se levantando ao passar o mouse como se
   funcionasse. Controle que reage insinua que faz algo. */
.btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; filter: grayscale(.35);
}
.btn[aria-disabled="true"]:hover { transform: none; background: var(--mare-ink); }

/* --------------------------------------------------------------------------
   6. SEÇÕES
   -------------------------------------------------------------------------- */
section { padding: 104px 0; }
.sec-alt { background: var(--paper-2); border-block: 1px solid var(--line); }
.sec-tight { padding: 68px 0; }

/* --- SEÇÃO ESCURA -------------------------------------------------------
   Ao renderizar a página inteira ficou claro que ela era monótona: seis
   seções com o mesmo peso e um único momento escuro, no fim. Ramp, Vanta e
   Mercury alternam escuro NO MEIO — é o que dá ritmo.

   Não repinta componente nenhum: redefine os TOKENS só dentro da seção, e
   cartão, rótulo, fio e link viram escuros sozinhos. É o motivo de existir
   token em vez de cor solta.

   Usada na seção de segurança de propósito: é o assunto que mais precisa
   passar gravidade, e escuro carrega gravidade. */
.sec-escura {
  /* #072E3A é o "ciano profundo" do KIT: a laje é a própria marca, escurecida
     até virar fundo. Corte de 13,26:1 contra a página clara. */
  --paper:      #072E3A;
  --paper-2:    #0A3846;
  --surface:    #0B3140;
  --line:       #124A5C;
  --line-2:     #1B6076;
  --ink:        #EAF3F5;
  --ink-2:      #B9D0D6;
  --ink-3:      #8FAEB6;   /* 4,90:1 no pior fundo deste escopo */
  --mare:       #5CE1F5;
  --mare-ink:   #5CE1F5;   /* 7,46:1 no pior fundo */
  --mare-hover: #96EDFA;
  --mare-lit:   #96EDFA;
  --mare-wash:  #0D3E4E;
  --on-mare:    #072E3A;
  --ambar:      #F0A93B;
  --ambar-ink:  #F0A93B;   /* 5,75:1 no pior fundo */
  --ambar-wash: #241B0C;
  --lift-1: 0 1px 2px rgba(0,0,0,.34);
  --lift-2: 0 1px 2px rgba(0,0,0,.34), 0 18px 40px -22px rgba(0,0,0,.6);
  --ok:   #57C089;  --ok-wash:   #11241B;
  --warn: #D6A43E;  --warn-wash: #231C0E;
  --bad:  #E69189;  --bad-wash:  #271610;

  background: var(--paper);
  color: var(--ink);
  /* var(--line), e não o valor copiado. A regra vem do 01 (R-034), que achou a
     barra do portal dele pintada num segundo lugar com a cor velha depois de ele
     trocar um valor de paleta. A frase dele: mudar uma variável não é mudar uma
     cor, é mudar todos os lugares que copiaram aquele valor à mão. Aqui a
     borda copiava o mesmo
     #27363F que este bloco declara como --line logo acima, então mudar um não
     mudava o outro. Agora ela segue o token nos dois temas sozinha. */
  border-block: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   A SEÇÃO ESCURA DENTRO DO TEMA ESCURO
   O defeito, medido na rodada 13 e não percebido a olho: no tema claro esta
   seção corta a página com 15,44:1, e é a única quebra estrutural grande que a
   página tem. No tema escuro ela encostava num fundo quase igual ao dela,
   1,07:1, então a quebra simplesmente não existia. Medindo faixa por faixa, o
   maior contraste entre dois fundos da página escura era 1,16:1: a página
   inteira era uma superfície só.

   Por que não dá para resolver escurecendo: a página escura já está perto do
   piso, então não há para onde descer. A direção com espaço é subir, e subir é
   o certo, porque em tema escuro estrutura se diz por elevação, não por laje
   preta.

   A escada aqui é deliberadamente ao contrário da intuição: a LAJE SOBE e os
   cartões AFUNDAM dentro dela. A primeira tentativa foi subir tudo junto, e a
   medição reprovou cinco tintas nos cartões (link em 4,28:1, ink-3 em 4,02:1).
   Afundando o cartão, o texto ganha contraste em vez de perder, e a hierarquia
   interna continua existindo.

   Números conferidos, todos contra as três superfícies desta escada: nenhuma
   tinta abaixo de 4,5:1, com a pior em 4,71:1. O corte da laje contra a página
   ficou em 1,49:1, que é o teto possível sem empurrar o link e o ocre para
   perto do limite.

   O tema claro não muda nada aqui. Isto é só o escuro.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .sec-escura {
  --paper:      #0F3A47;   /* a laje sobe: 1,46:1 contra a página */
  --paper-2:    #0B2E39;   /* afunda */
  --surface:    #0A2934;   /* cartão e livro afundam mais */
  --line:       #1E5061;
  --line-2:     #2A6577;
  --mare-wash:  #0E3948;
  --on-mare:    #0F3A47;
  /* O ink-3 clareia SÓ aqui, e este é o único reprovado que a medição da
     migração pegou: com os valores herdados do escopo escuro ele dava 4,49:1
     na laje e 4,06:1 no lavado. A laje sobe, então a tinta fraca tem que subir
     junto. Agora: 5,25:1 no pior fundo. */
  --ink-3:      #95AEB6;
  /* a linha de border-block-color que existia aqui foi apagada: com a borda
     usando var(--line), este bloco já a corrige só por redefinir --line. Uma
     duplicata a menos é uma chance a menos de as duas discordarem depois. */
}
/* malha de prancha, discreta — a mesma linguagem da faixa de fecho */
.sec-escura::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 110% at 88% 0%, #000 0%, transparent 70%);
}
.sec-escura > .wrap { position: relative; }

.sec-head { max-width: 720px; margin-bottom: 54px; }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head h2 { margin-bottom: 18px; }
.sec-head p { color: var(--ink-2); font-size: 18.5px; line-height: 1.5; }

.page-head { padding: 72px 0 52px; border-bottom: 1px solid var(--line); }
.page-head .eyebrow { margin-bottom: 20px; }
.page-head h1 { margin-bottom: 20px; max-width: 900px; }
.page-head p { color: var(--ink-2); font-size: 19px; max-width: 700px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   7. HERÓI
   -------------------------------------------------------------------------- */
/* --- HERÓI ----------------------------------------------------------------
   Refeito na rodada 5, depois de renderizar Linear e Mercury LADO A LADO com
   o nosso e medir a diferença. O que eles fazem e o nosso não fazia:

   · o título domina de verdade (Linear ~76px; o nosso estava em ~60px
     competindo com um parágrafo de quatro linhas ao lado);
   · o apoio é UMA linha curta e pequena, não um parágrafo;
   · há muito ar acima do título (~230px no Linear; ~90px no nosso);
   · o visual do produto é a ESTRELA, largo, embaixo do título — não um
     cartão na coluna lateral;
   · há profundidade: uma peça flutuando sobre a outra, com sombra própria.

   Erro que eu estava cometendo: julgar a nossa página sozinha, em vez de
   comparar com as referências depois de cada mudança.
   -------------------------------------------------------------------------- */
.hero {
  padding: 88px 0 72px; position: relative;
  background:
    radial-gradient(96% 58% at 6% -8%, #FFFFFF 0%, rgba(255,255,255,0) 56%),
    radial-gradient(78% 42% at 50% 112%, rgba(14,116,144,.10) 0%, rgba(14,116,144,0) 68%),
    linear-gradient(180deg, #FBFCFD 0%, var(--paper) 44%, #E4EAEC 100%);
}
:root[data-theme="dark"] .hero {
  background:
    radial-gradient(96% 58% at 6% -8%, #0E2E39 0%, rgba(14,46,57,0) 56%),
    radial-gradient(78% 42% at 50% 112%, rgba(111,160,210,.10) 0%, rgba(111,160,210,0) 68%),
    linear-gradient(180deg, #0A2029 0%, var(--paper) 44%, #041217 100%);
}
.hero + section { padding-top: 0; }

.hero-solo { max-width: 1010px; }
.hero-solo .eyebrow { margin-bottom: 26px; }
.hero-solo h1 {
  font-size: clamp(38px, 5.2vw, 63px);
  letter-spacing: -0.04em; line-height: 1.06;
  margin: 0 0 24px;
}
.hero-solo h1 em { font-style: normal; color: var(--mare-ink); }
.hero-solo .lead { font-size: 18.5px; max-width: 560px; margin-bottom: 28px; color: var(--ink-3); }
.hero-solo .hero-acts { margin-bottom: 18px; }
.hero-solo .fina { font-size: 13.5px; color: var(--ink-3); max-width: 46ch; }

.hero-visual { margin-top: 52px; margin-bottom: 132px; position: relative; }
.hero-visual::before {
  content: ""; position: absolute; z-index: 0;
  left: 6%; right: 6%; bottom: -26px; height: 60px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(16,21,25,.16), transparent 72%);
  filter: blur(6px); pointer-events: none;
}
.hero-visual > * { position: relative; z-index: 1; }

/* malha de prancha: quase invisível, mas é o que faz o fundo não ser "branco" */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .5;
  mask-image: radial-gradient(120% 90% at 78% 8%, #000 0%, transparent 68%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }

.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 68px; align-items: center; }
.hero h1 { font-size: var(--t-hero); letter-spacing: -0.036em; margin: 22px 0 24px; }
.hero h1 em { font-style: normal; color: var(--mare-ink); }
.hero .lead { max-width: 540px; margin-bottom: 36px; }
.hero-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }

/* --------------------------------------------------------------------------
   8. PAINEL DE EXEMPLO  (o herói visual — dados fictícios, sempre rotulado)
   -------------------------------------------------------------------------- */
.painel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
  overflow: hidden;
}
.painel-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.painel-topo .ficticio {
  margin-left: auto;
  color: var(--ambar-ink);
  border: 1px dashed var(--ambar);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  letter-spacing: .05em;
}
.painel-num { padding: 22px 20px 18px; border-bottom: 1px solid var(--line); }
.painel-num .rot {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 8px;
}
.painel-num .val {
  font-size: 40px; font-weight: 640; letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.painel-num .obs { font-size: var(--t-small); color: var(--ink-3); margin-top: 8px; }

.linha {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: start;
  padding: 15px 20px;
}
.linha + .linha { border-top: 1px solid var(--line); }
.linha .cod {
  font-family: var(--mono); font-size: var(--t-micro);
  color: var(--ink-3); padding-top: 3px; font-variant-numeric: tabular-nums;
}
.linha .txt { font-size: 15px; line-height: 1.45; }
.linha .txt b { display: block; font-weight: 600; }
.linha .txt span { color: var(--ink-3); font-size: 13.5px; }

/* estado: forma + ícone + palavra. Nunca só cor. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-sm);
  border: 1px solid; white-space: nowrap;
}
.chip-bad  { color: var(--bad);  background: var(--bad-wash);  border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.chip-warn { color: var(--warn); background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.chip-ok   { color: var(--ok);   background: var(--ok-wash);   border-color: color-mix(in srgb, var(--ok) 35%, transparent); }

.painel-pe {
  padding: 14px 20px;
  background: var(--mare-wash);
  border-top: 1px solid var(--line);
  font-size: var(--t-small); color: var(--ink-2);
}

/* --- painel no formato largo (o herói) ----------------------------------
   Rodada 6: a densidade subiu. Comparado com Linear e Attio lado a lado, o
   nosso painel tinha 4 linhas contra dezenas de elementos deles, e por isso
   lia como cartão, não como tela de trabalho.

   A densidade vem de REGIÕES DE INTERFACE que existem no domínio (barra de
   resumo, cabeçalho de recorte, obra e valor por linha, barra de estado com
   hora da última leitura), nunca de enfeite inventado. Continua sem moldura
   de janela: o painel é um exemplo rotulado, não print de produto entregue.
   -------------------------------------------------------------------------- */
.painel-largo { display: grid; grid-template-columns: 250px 1fr; }
.painel-largo .painel-topo { grid-column: 1 / -1; padding: 14px 22px; }
.painel-largo .painel-topo .recorte { margin-left: auto; margin-right: 16px; color: var(--ink-3); }

/* barra lateral de resumo */
.trilho {
  border-right: 1px solid var(--line);
  padding: 22px; display: flex; flex-direction: column; gap: 22px;
  background: var(--paper);
}
.trilho .rot {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 7px;
}
.trilho .val {
  font-size: 42px; font-weight: 640; letter-spacing: -0.038em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.trilho .obs { font-size: 13px; color: var(--ink-3); margin-top: 9px; line-height: 1.4; }
.trilho .medidas { display: grid; gap: 9px; padding-top: 20px; border-top: 1px solid var(--line); }
.trilho .medidas div {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3);
}
.trilho .medidas b {
  color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums;
}

/* cabeçalho do recorte, acima das linhas */
.lista-cab {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 22px; border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.lista-cab .qt { font-size: 14.5px; font-weight: 600; }
.lista-cab .filtro {
  font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 2px 8px;
}
.lista-cab .filtro-on { color: var(--mare-ink); border-color: var(--mare-ink); background: var(--mare-wash); }

.painel-largo .lista { min-width: 0; }
/* linha densa: código, texto, obra, valor, estado */
.painel-largo .linha {
  grid-template-columns: auto 1fr auto auto auto;
  gap: 14px; padding: 13px 22px; align-items: center;
}
.painel-largo .linha .txt b { font-size: 14.8px; }
.painel-largo .linha .txt span { font-size: 13px; }
.linha .obra {
  font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 7px;
  white-space: nowrap;
}
.linha .vl {
  font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 550;
  min-width: 88px; text-align: right;
}
.linha .vl-vazio { color: var(--ink-3); font-weight: 400; }

/* faixa de fecho: a conclusão do dia, e não um apontamento. Ela existe também
   por um motivo de layout: cria a área vazia no canto direito que a peça
   flutuante precisa para sobrepor sem cobrir informação. Nas três tentativas
   anteriores ela cobriu conteúdo, porque eu tentava encaixá-la num painel
   cheio em vez de projetar o vazio. */
.painel-largo .fecho {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 22px; border-top: 1px solid var(--line);
  background: var(--ok-wash);
  font-size: 14.5px; color: var(--ink-2);
}

/* barra de estado: texto à esquerda de propósito, porque a peça flutuante
   sobrepõe o canto direito e não pode cobrir informação */
.painel-largo .barra {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 11px 22px; border-top: 1px solid var(--line);
  background: var(--paper-2);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .04em; color: var(--ink-3);
}
.painel-largo .barra .pulso {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none;
}

/* --------------------------------------------------------------------------
   MOVIMENTO AMBIENTE
   Só DUAS coisas se movem sozinhas no site inteiro, e as duas afirmam algo
   verdadeiro. Animação demais é o que mais faz um site parecer feito por
   máquina, e as próprias referências quase não mexem nada: Linear e Attio
   têm print PARADO, e o movimento fica na atmosfera do fundo.

   1) O pulso da barra de estado: a conferência roda todo dia, sozinha, sem
      ninguém pedir. É a única coisa do painel que se mexe, e é exatamente a
      que carrega essa ideia.
   2) A textura da faixa de fecho: deriva devagar, como luz passando no
      material. Atmosfera, não informação.

   O que eu decidi NÃO fazer, e é decisão, não esquecimento:
   · nada de contagem crescente nos números. É a resposta de fábrica, e
     "R$ 0,00" subindo até zero não faz sentido nenhum;
   · nada de hover nas linhas nem nas etiquetas de filtro do painel. Ele é
     uma ILUSTRAÇÃO rotulada como exemplo, não uma demonstração ao vivo.
     Fazer a ilustração responder ao mouse insinua um produto que ainda não
     existe, e essa é a única mentira que este site não pode contar.
   -------------------------------------------------------------------------- */
@keyframes pulsar {
  0%, 100% { transform: scale(.82); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 30%, transparent); }
  55%      { transform: scale(1);   box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 0%, transparent); }
}
.painel-largo .barra .pulso { animation: pulsar 2.9s cubic-bezier(.4,0,.6,1) infinite; }

@keyframes derivar {
  from { background-position: center 34%; }
  to   { background-position: center 48%; }
}
.band-foto { animation: derivar 26s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .painel-largo .barra .pulso,
  .band-foto { animation: none; }
}

/* profundidade: uma peça sobre a outra, com sombra própria. É o truque do
   Linear (a janela de conversa flutuando sobre o aplicativo). */
/* posicionada à esquerda e bem abaixo de propósito: na primeira tentativa
   ela ficou à direita e COBRIU o estado da linha 04 — esconder informação
   pra ganhar profundidade é troca ruim. Aqui ela sobrepõe só a borda. */
.flutuante {
  position: absolute; right: 24px; bottom: -94px; width: 316px; z-index: 3;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--lift-3);
}
.flutuante .rot {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ambar-ink); margin-bottom: 10px;
}
.flutuante .txt { font-size: 15px; line-height: 1.4; margin-bottom: 6px; }
.flutuante .txt b { font-weight: 620; }
.flutuante .meta {
  font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3);
  letter-spacing: .02em;
}
.flutuante .chip { margin-top: 12px; }

/* --- entrada do painel, ao carregar ---------------------------------------
   UM momento orquestrado, uma vez só: o painel entra, as linhas aparecem em
   sequência (é a leitura acontecendo) e só depois de todas os estados
   chegam juntos (é a classificação). A ordem conta a mesma história que o
   texto ao lado: primeiro a gente lê tudo, depois aponta.

   Nada de piscar, nada de repetir. Se a pessoa pediu menos animação, cai
   tudo pro estado final e ela não perde nada. */
@keyframes painel-entra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes linha-entra {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes estado-chega {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}

/* ATENÇÃO ao padrão aqui, e ele é o certo por um motivo que eu aprendi errando:
   a animação de entrada só existe quando o programa MARCA o painel com
   data-anima. Sem a marca, tudo aparece normal.

   Antes era o contrário: as linhas começavam invisíveis e só surgiam pela
   animação. Renderizei no fundo escuro e o painel apareceu VAZIO, porque a
   animação não tinha rodado naquela captura. Ou seja: o conteúdo mais
   importante da página dependia de uma animação dar certo. Isso é frágil de
   um jeito inaceitável, porque a informação existe e a decoração não pode
   ser a condição para ela ser vista. Enfeite falha; conteúdo não pode. */
.hero .painel[data-anima] { animation: painel-entra .62s cubic-bezier(.22,.61,.36,1) both; }
.hero .painel[data-anima] .lista .linha { animation: linha-entra .44s cubic-bezier(.22,.61,.36,1) both; }
.hero .painel[data-anima] .lista .linha:nth-child(1) { animation-delay: .40s; }
.hero .painel[data-anima] .lista .linha:nth-child(2) { animation-delay: .53s; }
.hero .painel[data-anima] .lista .linha:nth-child(3) { animation-delay: .66s; }
/* as linhas 4 e 5 saíram do painel em 14/08 (a lista foi de 5 para 3
   apontamentos); os atrasos delas saíram junto para não ficar regra
   apontando para elemento que não existe. */
.hero .painel[data-anima] .chip {
  animation: estado-chega .34s cubic-bezier(.34,1.4,.64,1) both;
  animation-delay: 1.16s;
}
.hero-visual[data-anima] .flutuante {
  animation: painel-entra .5s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: 1.30s;
}
/* Aqui havia uma chave de fechamento órfã, sobra de um bloco @media que foi
   desfeito em alguma rodada anterior. O navegador ignora e nada quebra na
   tela — mas a folha ficava com uma chave a mais do que abre, e é isso que
   faz uma conferência automática de sintaxe apontar erro no arquivo inteiro
   e deixar de valer. Encontrada contando as chaves linha a linha. */

/* --------------------------------------------------------------------------
   9. DIAGRAMA DE PASSOS
   -------------------------------------------------------------------------- */
.diagram {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px; box-shadow: var(--lift-2);
}
.diagram-title {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.step { display: flex; gap: 15px; align-items: flex-start; padding: 14px 0; }
.step + .step { border-top: 1px solid var(--line); }
.step .dot {
  flex: none; width: 24px; height: 24px; margin-top: 2px;
  border-radius: var(--r-sm);
  background: var(--mare-ink); color: var(--on-mare);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.step b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 3px; }
.step span { font-size: var(--t-small); color: var(--ink-3); line-height: 1.5; }

.diagram-out {
  margin-top: 18px; padding: 15px 17px; border-radius: var(--r);
  background: var(--ambar-wash);
  border-left: 2px solid var(--ambar);
  font-size: var(--t-small);
}
.diagram-out b { color: var(--ink); }

/* --------------------------------------------------------------------------
   8b. VISUAL DA CONCILIAÇÃO
   Segundo visual do site, e de propósito NADA parecido com o primeiro. O
   painel do topo é uma lista de apontamentos; este mostra o mecanismo: dois
   lados que precisam casar, e o que não casou.

   Motivo: comparando com Linear, Ramp e Attio, cada seção de recurso deles
   tem o SEU visual. O nosso tinha um só, e da metade da página pra baixo
   virava texto e cartão até o fim.

   NÃO tem moldura de janela (o Attio usa). Moldura faria o exemplo parecer
   tela de produto entregue, que é exatamente o oposto do que a etiqueta
   "dados fictícios" está dizendo.

   Número à direita e tabular; estado com glifo e palavra, nunca só cor; a
   linha que falhou tem fundo próprio além do glifo, pra quem não distingue
   vermelho de verde ler igual.
   -------------------------------------------------------------------------- */
.conciliar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-2);
}
.conciliar-cab {
  display: grid; grid-template-columns: 1fr 74px 1fr;
  border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.conciliar-cab > div {
  padding: 12px 22px;
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.conciliar-cab > div:last-child { border-left: 1px solid var(--line); }

.par { display: grid; grid-template-columns: 1fr 74px 1fr; align-items: stretch; }
.par + .par { border-top: 1px solid var(--line); }
.par .lado {
  padding: 15px 22px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 18px; font-size: 15.5px;
}
.par .lado .dt {
  font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3);
  letter-spacing: .04em; flex: none;
}
.par .lado .vl { font-variant-numeric: tabular-nums; font-weight: 550; }
.par .lado .vazio { color: var(--ink-3); font-size: 14.5px; }
.par .lado-dir { border-left: 1px solid var(--line); }

/* o fio pontilhado com o glifo sentado nele: comunica "ligação" sem texto */
.par .liga { position: relative; display: grid; place-items: center; }
.par .liga::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: 50%;
  border-top: 1px dashed var(--line-2);
}
.par .liga span {
  position: relative; background: var(--surface); padding: 0 5px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--ok);
}
.par-falha { background: var(--bad-wash); }
.par-falha .liga span { background: var(--bad-wash); color: var(--bad); }
.par-falha .liga::before { border-top-style: dotted; border-color: var(--bad); }

.conciliar-pe {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 14px 22px; border-top: 1px solid var(--line);
  background: var(--paper-2);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .04em; color: var(--ink-3);
}
.conciliar-pe b { color: var(--ink-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   8c. LIVRO DE CONTAS  (terceiro visual: um registro, não uma lista)
   Forma diferente de propósito. O painel do topo é uma lista de
   apontamentos; a conciliação são dois lados que casam; este é um
   REGISTRO CRONOLÓGICO que só aceita adição. O cadeado e o "de → para" são
   a forma; a mensagem é que a linha não pode ser reescrita depois.

   Vai na seção escura de segurança, que era a única do site com peso de
   assunto e nenhum visual.
   -------------------------------------------------------------------------- */
.livro {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-2);
}
.registro { display: grid; grid-template-columns: 128px 1fr; gap: 0; }
.registro + .registro { border-top: 1px solid var(--line); }
.registro .quando {
  padding: 17px 0 17px 20px;
  font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3);
  letter-spacing: .04em; display: flex; gap: 8px; align-items: flex-start;
}
.registro .selo { color: var(--ok); flex: none; }
.registro .corpo { padding: 17px 22px 17px 8px; }
.registro .corpo b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }

/* a troca em si: de um lado para o outro, com a conta mascarada */
.troca {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .03em;
}
.troca .de, .troca .para {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 8px;
}
.troca .de { color: var(--ink-3); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ink-3) 50%, transparent); }
.troca .para { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent);
  background: var(--bad-wash); }
.troca .seta { color: var(--ink-3); }
.registro .meta {
  margin-top: 9px; font-family: var(--mono); font-size: var(--t-micro);
  color: var(--ink-3); letter-spacing: .03em;
}
.livro-pe {
  padding: 13px 22px; border-top: 1px solid var(--line); background: var(--paper-2);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .04em; color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   8d. SIMULAÇÃO ANTES DE GRAVAR  (quarto visual: um formulário de conferência)
   Quarta forma: pares de campo e valor, como um documento a ser conferido.
   Existe para a frente que mais assusta (a única que escreve no Sienge).

   Sem botão de confirmar. Botão numa ilustração insinua controle que
   funciona, e a regra do site é não insinuar produto que não existe. No
   lugar dele, uma faixa dizendo o que acontece a seguir.
   -------------------------------------------------------------------------- */
.simulacao {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-2);
}
.simulacao .aviso {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-bottom: 1px solid var(--line);
  background: var(--warn-wash);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .06em; text-transform: uppercase; color: var(--warn);
}
.campos { display: grid; }
.campo {
  display: grid; grid-template-columns: 180px 1fr; gap: 18px;
  padding: 12px 22px; align-items: baseline;
}
.campo + .campo { border-top: 1px solid var(--line); }
.campo dt {
  font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3);
  letter-spacing: .07em; text-transform: uppercase;
}
.campo dd { margin: 0; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.campo dd .fonte { color: var(--ink-3); font-size: 13px; margin-left: 8px; }
.simulacao-pe {
  padding: 15px 22px; border-top: 1px solid var(--line); background: var(--mare-wash);
  font-size: 14.5px; color: var(--ink-2);
}
.simulacao-pe b { color: var(--ink); }

/* --------------------------------------------------------------------------
   9b. FITA DE PASSOS  (uma peça só, dividida por fio, não caixas soltas)
   -------------------------------------------------------------------------- */
.passos-caixa {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-1);
}
.passos { display: grid; grid-template-columns: repeat(4, 1fr); }
.passos > div { padding: 26px 28px; }
.passos > div + div { border-left: 1px solid var(--line); }
.passos .n {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .12em; color: var(--ambar-ink); font-variant-numeric: tabular-nums;
}
.passos h4 { font-size: 17px; margin: 11px 0 7px; letter-spacing: -0.022em; }
.passos p { font-size: 14.5px; color: var(--ink-3); line-height: 1.5; }
.passos-pe {
  padding: 18px 28px; border-top: 1px solid var(--line);
  background: var(--ambar-wash); font-size: 15.5px; color: var(--ink-2);
}
.passos-pe b { color: var(--ink); }

/* --------------------------------------------------------------------------
   10. GRADES E CARTÕES
   -------------------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* três cartões, o primeiro com mais peso — porque é verdade que ele vem
   primeiro (é a frente de risco zero, a que sempre recomendamos começar).
   Peso desigual só se justifica quando a diferença é real. */
.grid-3-destaque { display: grid; grid-template-columns: 1.28fr 1fr 1fr; gap: 20px; }
.grid-3-destaque > :first-child {
  background: var(--mare-wash);
  border-color: color-mix(in srgb, var(--mare-ink) 26%, transparent);
}
.grid-3-destaque > :first-child .card-icon {
  background: var(--mare-ink); color: var(--on-mare); border-color: transparent;
}
.split  { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; }
/* texto curto ao lado de cartão alto: alinha pelo topo, senão abre um buraco
   no meio da seção (erro que só apareceu quando a página foi renderizada) */
.split-wide { grid-template-columns: 1.12fr .88fr; align-items: start; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px;
  display: flex; flex-direction: column; gap: 13px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card h3 { font-size: 21px; }
.card p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }

.card-kicker {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ambar-ink);
}

/* marcador de etapa: só existe porque a ORDEM é informação de verdade
   (as três frentes vão da de risco zero pra de risco alto) */
.card-icon {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-sm);
  background: transparent; color: var(--mare-ink);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

.pain {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px 30px;
  position: relative;
}
.pain::before {
  content: ""; position: absolute; left: 0; top: 28px; bottom: 28px;
  width: 2px; background: var(--mare-ink); opacity: .42;
}
.pain h3 { font-size: 19px; margin-bottom: 10px; letter-spacing: -0.024em; }
.pain p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }

/* --------------------------------------------------------------------------
   10a2. FRAGMENTO DE TELA DENTRO DO CARTÃO
   Medido contra o Ramp em 30/07, renderizando o meio da página dele ao lado do
   nosso (com "menos movimento" forçado, que desliga a revelação por rolagem e
   deixa o meio aparecer numa captura alta).

   O achado: TODO cartão de recurso deles tem um pedaço de tela de produto
   dentro. Os nossos eram título e parágrafo, e os visuais viviam em blocos
   separados abaixo. Cartão com fragmento dentro dá densidade sem alongar a
   página.

   Fragmento, não tela inteira: três telas inteiras lado a lado viram ruído.
   Cada um mostra a MENOR unidade reconhecível da sua frente.
   -------------------------------------------------------------------------- */
.card-visual {
  margin-top: auto; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); overflow: hidden;
}
.cv-topo {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.cv-linha {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 11px; font-size: 12.5px; line-height: 1.3;
}
.cv-linha + .cv-linha { border-top: 1px solid var(--line); }
.cv-linha .g {
  flex: none; width: 13px; text-align: center;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
}
.cv-linha .g-bad { color: var(--bad); }
.cv-linha .g-warn { color: var(--warn); }
.cv-linha .g-ok { color: var(--ok); }
.cv-linha .n {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 550;
  font-family: var(--mono); font-size: 11.5px;
}
.cv-linha .fraco { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; margin-left: auto; }
.cv-linha .rot {
  flex: none; width: 46px; font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .04em;
}
.cv-nota {
  margin-top: 20px; font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .04em; color: var(--ambar-ink);
}

/* --------------------------------------------------------------------------
   10b. COMPARAÇÃO  (o que sai da mesa × o que fica)
   Substituiu uma seção que era só texto e uma caixa — ela não tinha peso
   próprio ao lado das vizinhas. Comparar em duas colunas dá informação de
   verdade em vez de adjetivo: dá pra ler os dois lados e se reconhecer num.
   -------------------------------------------------------------------------- */
.comparar-caixa {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-1);
}
.comparar { display: grid; grid-template-columns: 1fr 1fr; }
.comparar > div { padding: 32px 34px; }
.comparar > div + div { border-left: 1px solid var(--line); }
.comparar .lado-sai { background: var(--paper-2); }
.comparar h3 { font-size: 20px; margin: 12px 0 6px; }
.comparar .obs { font-size: 14px; color: var(--ink-3); margin-bottom: 22px; line-height: 1.45; }
.comparar ul { list-style: none; display: grid; gap: 13px; }
.comparar li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 16px; line-height: 1.45;
}
.comparar li > span:first-child {
  flex: none; width: 18px; text-align: center; padding-top: 2px;
  font-family: var(--mono); font-size: 12.5px;
}
.lado-sai li > span:first-child { color: var(--ink-3); }
.lado-fica li > span:first-child { color: var(--mare-ink); }
.lado-sai li { color: var(--ink-3); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ink-3) 45%, transparent); }
.lado-fica li { color: var(--ink); font-weight: 500; }
.comparar-pe {
  padding: 20px 34px; border-top: 1px solid var(--line);
  background: var(--ambar-wash); font-size: 15.5px; color: var(--ink-2); line-height: 1.5;
}
.comparar-pe b { color: var(--ink); }

/* --------------------------------------------------------------------------
   10c. FAIXA DE NÚMEROS
   Era o único gargalo que eu não podia resolver com trabalho: todo site B2B
   de topo tem faixa de estatística, e todo número que a gente tinha era de
   operação de cliente. Resolvido com SIMULAÇÃO rotulada — dá a escala do
   problema sem usar dado de ninguém.

   O drama aqui é o TAMANHO do número, não cor. Número sempre tabular.
   -------------------------------------------------------------------------- */
/* Fundo próprio: é o único lugar do site onde o ocre aparece em escala.
   Uma vez só — em mais de um lugar ele briga com o aço. Dá à página uma
   terceira temperatura (claro / cinza / OCRE / escuro) sem gastar mais cor. */
.faixa-numeros {
  padding: 82px 0;
  background: var(--ambar-wash);
  border-block: 1px solid color-mix(in srgb, var(--ambar) 32%, transparent);
}
.faixa-numeros .topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap; margin-bottom: 44px;
}
.faixa-numeros .topo h2 { font-size: clamp(24px, 2.9vw, 32px); max-width: 640px; }

.numeros { display: grid; grid-template-columns: repeat(4, 1fr); }
.numeros > div { padding: 4px 32px; }
.numeros > div:first-child { padding-left: 0; }
.numeros > div + div { border-left: 1px solid color-mix(in srgb, var(--ambar) 30%, transparent); }
.numeros .val {
  font-size: clamp(36px, 4.4vw, 56px); font-weight: 640;
  letter-spacing: -0.042em; line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
  white-space: nowrap;
}
/* para o valor que tem prefixo de moeda ou intervalo: cabe na coluna sem
   quebrar em duas linhas, que foi o defeito da primeira versão */
.numeros .val-compacto { font-size: clamp(28px, 3.2vw, 42px); }
.numeros .val .un {
  font-size: .42em; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-3);
}
.numeros .rot { margin-top: 14px; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
/* fonte embaixo de cada número. Não é rodapé de cortesia: número sem fonte
   nomeada é a vagueza que a gente combateu no texto, e num site cuja tese é
   honestidade a citação faz parte do argumento. */
.numeros .fonte {
  margin-top: 11px; padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--ambar) 30%, transparent);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .03em; color: var(--ink-3); line-height: 1.5;
}
.numeros .fio {
  width: 26px; height: 2px; background: var(--ambar); margin-bottom: 18px;
}
.faixa-numeros .pe {
  margin-top: 42px; padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--ambar) 30%, transparent);
  font-size: 14.5px; color: var(--ink-3); max-width: 780px; line-height: 1.5;
}
.faixa-numeros .pe b { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   10d. AÇÃO NO MEIO DA PÁGINA
   A pesquisa de rolagem diz duas coisas: cerca de 40% nunca passa do topo, e
   a maior parte das conversões acontece acima da dobra. Mas quem ROLA numa
   compra de consideração alta está procurando resposta, e converte no ponto
   em que se convence, não no fim.

   O nosso corpo de página tinha ação no topo e depois só a ~95% do fim. Esta
   faixa fica logo depois da simulação de números, que é onde a pessoa acabou
   de ver o tamanho do problema dela.

   Fina de propósito: a faixa grande de fecho já existe no fim, e duas faixas
   grandes viram insistência.
   -------------------------------------------------------------------------- */
.acao-meio {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.acao-meio > .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; padding-block: 26px;
}
.acao-meio p { font-size: 17.5px; color: var(--ink-2); max-width: 62ch; }
.acao-meio p b { color: var(--ink); }

/* --------------------------------------------------------------------------
   POS-FRENTES, a ação que faltava no meio de baixo
   Medido na rodada 15, com os botões pintados de uma cor de teste e a página
   inteira capturada (9.571 px a 1440 de largura): as ações estavam em 6,2%,
   34,1%, 83,2%, 89,1% e 94,9% da altura. Entre 34,1% e 83,2% havia 49 pontos
   sem nenhuma ação, e dentro desse vão estão as duas seções que mais convencem,
   que são as três frentes e a de segurança.
   De propósito NÃO é uma faixa: já existe faixa de ação no meio e no fim, e uma
   terceira faixa vira insistência. É uma linha dentro da própria seção.
   -------------------------------------------------------------------------- */
.pos-frentes {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}

.pos-frentes p {
  margin: 0;
  max-width: 56ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.pos-frentes p b { color: var(--ink); }

.pf-acts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.pf-link { font-size: 15px; }

@media (max-width: 700px) {
  .pos-frentes { display: block; }
  .pf-acts { margin-top: 18px; }
}

/* --------------------------------------------------------------------------
   DECLARAÇÃO, a pausa tipográfica do meio da página
   Por que existe: comparando o meio da nossa página com o de Linear e Mercury
   (rodada 12), o achado foi de RITMO, não de cor. Quatro blocos seguidos nossos
   tinham a mesma forma: rótulo, título de duas linhas, parágrafo, fileira de
   caixas com borda. Só o fundo mudava. As duas referências quebram essa textura
   com UMA superfície grande, e a nossa página não quebrava nunca no meio.
   A quebra aqui é de propósito TIPOGRÁFICA e silenciosa, não outra superfície
   escura: a seção escura da segurança vem imediatamente depois, e duas coisas
   pesadas encostadas uma na outra se anulam. Então esta respira, e a próxima
   pesa. Sem caixa, sem borda, sem cartão: é a única parte da página em que o
   texto fica sozinho.
   -------------------------------------------------------------------------- */
.declaracao { background: var(--paper); border-bottom: 1px solid var(--line); }

.declaracao > .wrap { padding-block: clamp(58px, 7vw, 96px); }

.declaracao .eyebrow { margin-bottom: 26px; }

/* Maior que qualquer h2 da página e ainda menor que o h1, para o topo continuar
   sendo o topo. O limite de largura está em ch e foi conferido renderizando:
   já errei antes apertando demais e transformando duas linhas em quatro. */
.declaracao .frase {
  font-family: var(--sans);
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 640;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 26ch;
  text-wrap: balance;
}

.declaracao .frase i { font-style: normal; color: var(--mare-ink); }

.declaracao .apoio {
  margin-top: 28px;
  max-width: 58ch;
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-2);
}

.declaracao .apoio b { color: var(--ink); font-weight: 600; }

.declaracao .saber { margin-top: 22px; }

@media (max-width: 700px) {
  .declaracao .frase { max-width: none; }
}

/* --------------------------------------------------------------------------
   11. LISTA FAZ / NÃO FAZ
   -------------------------------------------------------------------------- */
.checklist { list-style: none; display: grid; gap: 15px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; }
.checklist .mk {
  flex: none; width: 21px; height: 21px; margin-top: 3px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; line-height: 1;
  border: 1px solid;
}
.mk-yes { background: var(--mare-wash); color: var(--mare-ink); border-color: color-mix(in srgb, var(--mare-ink) 28%, transparent); }
.mk-no  { background: transparent; color: var(--ink-3); border-color: var(--line-2); }

/* --------------------------------------------------------------------------
   12. CITAÇÃO E DESTAQUE
   -------------------------------------------------------------------------- */
.quote {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 38px;
  position: relative;
}
.quote p { font-size: 22px; line-height: 1.38; letter-spacing: -0.024em; font-weight: 500; }
.quote .who {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}

.callout {
  background: var(--ambar-wash);
  border: 1px solid color-mix(in srgb, var(--ambar) 28%, transparent);
  border-left: 2px solid var(--ambar);
  border-radius: var(--r); padding: 22px 26px; font-size: 16px; line-height: 1.55;
}
.callout strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   13. FAIXA ESCURA  (pontuação, não decoração)
   -------------------------------------------------------------------------- */
.band {
  background: var(--band); color: var(--band-text);
  padding: 96px 0; position: relative; overflow: hidden;
}
.band::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(90% 120% at 12% 50%, #000 0%, transparent 72%);
  pointer-events: none;
}
.band > .wrap { position: relative; }
.band .eyebrow { color: var(--band-muted); margin-bottom: 20px; }
.band .eyebrow::before { background: var(--ambar); }
.band h2 { margin-bottom: 20px; max-width: 720px; letter-spacing: -0.032em; }
.band p { color: var(--band-muted); font-size: 18.5px; max-width: 620px; margin-bottom: 34px; line-height: 1.5; }
.band .small { color: var(--band-muted); margin-top: 20px; }
.band-acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   AS TRÊS LINHAS DO FECHO
   Rodada 24. Evidência: Dixon e McKenna (HBR, junho de 2022), a partir de 2,5
   milhões de conversas de venda gravadas, encontraram que entre 40% e 60% dos
   negócios se perdem para gente que DIZ que quer comprar e não age. O ponto de
   maior perda não é convencer, é o instante de agir.
   Auditando a página achei que as nossas frases mais fortes contra hesitação
   estavam todas em contato.html, ou seja atrás do clique: só via quem já tinha
   agido. Estas três trazem as melhores para o último ponto de decisão.
   Discretas de propósito: quem já decidiu não deve tropeçar nelas, e quem está
   hesitando encontra as respostas ali mesmo, sem precisar clicar para descobrir.
   -------------------------------------------------------------------------- */
.fecho-garantias {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 14.5px;
  color: var(--band-muted);
}

.fecho-garantias li {
  position: relative;
  padding-left: 18px;
  line-height: 1.5;
}

.fecho-garantias li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 1px;
  background: var(--ambar);
}

.fecho-garantias li b { color: var(--band-text); font-weight: 600; }

@media (max-width: 640px) {
  .fecho-garantias { display: block; }
  .fecho-garantias li { margin-bottom: 8px; }
}
.band .btn-2 { color: var(--band-text); border-color: rgba(255,255,255,.26); }
.band .btn-2:hover { border-color: var(--band-text); color: var(--band-text); background: rgba(255,255,255,.06); }

/* --- variante com textura de material ------------------------------------
   TESTE (29/07/2026). A imagem é uma TEXTURA DE MATERIAL — malha de
   armação — nunca uma obra. Motivo: não temos obra pra mostrar e foto de
   obra de cliente é proibida. Material abstrato não afirma nada sobre
   projeto nenhum, e ainda amarra com a malha de prancha do resto do site.
   `luminosity` pega só a luz da foto e tinge no aço da marca: vira
   material nosso, não foto de banco de imagem.
   ⚠ Imagem gerada por IA, não é fotografia de obra real — registrado em
   PUBLICAR.md item 7b pra ninguém achar que é projeto nosso. */
/* A IMAGEM SÓ BAIXA QUANDO A FAIXA CHEGA PERTO DA TELA.
   Medido em 14/08: a faixa fica a 14.285 px do topo — dezessete telas de
   celular abaixo da dobra — e mesmo assim o navegador baixava os 205 KB de
   cara. Em 3G isso ocupava a conexão dos 3,5s aos 9,3s, disputando banda com
   a FONTE, que é o que a pessoa está esperando para ler.
   A imagem não atrapalhava a primeira pintura (LCP = 944 ms com ela); o custo
   era ocupar a rede à toa. Agora ela entra quando a faixa se aproxima, e a cor
   de fundo segura a faixa até lá — sem pulo de layout, porque a altura não
   depende da imagem. */
.band-foto {
  background-color: #072E3A;
  background-size: cover;
  background-position: center 38%;
  background-blend-mode: luminosity;
}
.band-foto.com-foto { background-image: url("imagens/armacao.jpg"); }
.band-foto::before {
  /* a malha desenhada sai: a foto JÁ é uma malha. Fica um véu pra o texto
     ter contraste garantido em cima da imagem. */
  background-image: linear-gradient(100deg,
    rgba(9,16,22,.94) 0%, rgba(9,16,22,.86) 46%, rgba(9,16,22,.42) 100%);
  background-size: auto;
  mask-image: none;
}
:root[data-theme="dark"] .band-foto {
  /* Era #0E2032, que dava 1,13:1 contra a página escura, abaixo do limite de
     ~1,25:1 em que a quebra deixa de existir. A faixa só se separava do resto
     por causa da fotografia. Como a decisão de ter foto ainda é do DONO
     (PUBLICAR.md 7b), a faixa não pode depender dela para existir.
     Usa o MESMO valor do --band escuro de propósito: o 01 adotou esse tom no
     portal dele (R-034) e três cinza-azulados escuros quase iguais seria
     fragmentar a paleta por nada. */
  background-color: #0D3541;
}
:root[data-theme="dark"] .band-foto::before {
  background-image: linear-gradient(100deg,
    rgba(5,9,13,.95) 0%, rgba(5,9,13,.90) 46%, rgba(5,9,13,.58) 100%);
}

/* --------------------------------------------------------------------------
   14. PREÇO
   -------------------------------------------------------------------------- */
.price {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 56px 48px; text-align: center;
  max-width: 720px; margin: 0 auto; box-shadow: var(--lift-2);
}
.price .eyebrow { justify-content: center; margin-bottom: 18px; }
.price h2 { margin-bottom: 18px; }
.price p { color: var(--ink-2); font-size: 17.5px; max-width: 520px; margin: 0 auto 30px; line-height: 1.55; }

/* --------------------------------------------------------------------------
   O QUE ABRE NO INVESTIMENTO
   Rodada 18. A evidência (TrustRadius, janeiro de 2025, 2.058 compradores) diz
   que falta de preço transparente é a coisa numero um que comprador mudaria.
   Publicar preço é decisão do DONO e continua sendo dele. O que dá para fazer
   sem decidir nada é tirar a opacidade que NÃO é o preço: o que faz o preço
   mudar, e o que a gente vai pedir. Isso responde a pergunta que vem junto e
   deixa a pessoa se qualificar sozinha antes da ligação.
   Alinhado à esquerda de propósito dentro de um cartão centralizado: lista
   centralizada é difícil de ler, e aqui a leitura importa mais que a simetria.
   -------------------------------------------------------------------------- */
.price-nota {
  max-width: 560px !important;
  margin: 0 auto 26px !important;
  font-size: 16px !important;
}
.price-nota b { color: var(--ink); }

.price-abre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin-bottom: 32px;
}

.price-abre .pa-rot {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ambar-ink);
  margin: 0 0 12px !important;
  max-width: none !important;
}

.price-abre ul { margin: 0; padding: 0; list-style: none; }

.price-abre li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 9px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.price-abre li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 1px;
  background: var(--ambar);
}

.price-abre li b { color: var(--ink); }

@media (max-width: 640px) {
  .price-abre { grid-template-columns: 1fr; gap: 22px; }
}

/* --------------------------------------------------------------------------
   15. TEXTO CORRIDO
   -------------------------------------------------------------------------- */
.prose { max-width: 680px; }               /* ~65 caracteres por linha */
.prose h2 { font-size: 28px; margin: 52px 0 16px; }

/* --------------------------------------------------------------------------
   QUEM ESCREVE ISTO
   Rodada 25. Auditoria de fronteira: sete das oito páginas de texto nunca
   diziam o que a gente vende. Quem cai de uma busca lê mil palavras úteis,
   conclui que a gente entende de Sienge, e sai sem saber o que a gente faz.
   Fica no fim do artigo de propósito, e não no topo: o leitor acabou de
   receber valor, que é onde ele está mais receptivo, e o topo pertence à
   promessa do texto.
   Discreto por escolha: quem já conhece a empresa passa reto, quem não
   conhece encontra a resposta sem precisar procurar no menu.
   -------------------------------------------------------------------------- */
.quem-escreve {
  margin: 54px 0 0;
  padding: 24px 26px;
  background: var(--paper-2);
  border-left: 2px solid var(--ambar);
  border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0;
}

.quem-escreve .qe-rot {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ambar-ink);
  margin: 0 0 12px;
}

.quem-escreve p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 10px;
}

.quem-escreve p:last-child { margin-bottom: 0; }
.quem-escreve b { color: var(--ink); }
.quem-escreve .qe-fim { font-size: 15px; }
.prose h3 { font-size: 20px; margin: 36px 0 12px; }
.prose p  { margin-bottom: 18px; color: var(--ink-2); font-size: 17.5px; line-height: 1.62; }
.prose ul, .prose ol { margin: 0 0 20px 24px; color: var(--ink-2); font-size: 17.5px; }
.prose li { margin-bottom: 10px; line-height: 1.55; }
.prose > :first-child { margin-top: 0; }
.prose .callout { margin: 30px 0; }
.prose code {
  font-family: var(--mono); font-size: .88em;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 1px 5px;
}

.toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px 28px; margin-bottom: 44px;
}
.toc h4 {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 14px;
}
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: t; font-size: 15.5px; }
.toc li { counter-increment: t; margin-bottom: 9px; padding-left: 30px; position: relative; }
.toc li::before {
  content: counter(t, decimal-leading-zero);
  position: absolute; left: 0;
  font-family: var(--mono); font-size: var(--t-micro); color: var(--ambar-ink);
}

.artigo {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 28px;
  text-decoration: none; color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.artigo:hover { border-color: var(--mare-ink); text-decoration: none; box-shadow: var(--lift-2); transform: translateY(-2px); }
.artigo .n {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .11em; color: var(--ambar-ink); font-variant-numeric: tabular-nums;
}
.artigo h3 { font-size: 20px; margin: 8px 0 10px; }
.artigo p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
.artigo .estado {
  display: inline-block; margin-top: 14px;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 9px;
}

/* --------------------------------------------------------------------------
   16. FORMULÁRIO
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 40px; box-shadow: var(--lift-2);
}
.field { margin-bottom: 22px; }
.field label {
  display: block; font-size: var(--t-small); font-weight: 600;
  margin-bottom: 7px; letter-spacing: -0.008em;
}
.field .req { color: var(--ambar-ink); }
/* etiqueta de OPCIONAL em vez de asterisco no obrigatório: Baymard, 2024,
   quinhentos usuários de formulário B2B, 25% mais conversão. */
.field .opc {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 400;
  letter-spacing: .05em; color: var(--ink-3); margin-left: 8px;
}
.field .help { font-size: 13.5px; color: var(--ink-3); margin-bottom: 8px; line-height: 1.45; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 16px;
  padding: 12px 14px; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--mare-ink);
  box-shadow: 0 0 0 3px var(--mare-wash);
}
.field textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-narrow { max-width: 250px; }

.wpp-card {
  background: var(--mare-wash);
  border: 1px solid color-mix(in srgb, var(--mare-ink) 20%, transparent);
  border-radius: var(--r-lg); padding: 30px;
}
.wpp-card h3 { font-size: 21px; margin-bottom: 12px; }
.wpp-card p { font-size: 15.5px; color: var(--ink-2); margin-bottom: 22px; line-height: 1.55; }
/* O número em mono e tabular, como todo número do site. Aqui não é estética:
   é o número que a pessoa vai LER EM VOZ ALTA ou copiar à mão para o celular,
   e algarismo de largura variável faz errar dígito. */
.wpp-card p.wpp-num {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink); margin-bottom: 20px;
}

.pendente {
  display: inline-block;
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ambar-ink); background: var(--ambar-wash);
  border: 1px dashed var(--ambar); border-radius: var(--r-sm);
  padding: 2px 8px;
}

/* --------------------------------------------------------------------------
   17. RODAPÉ
   -------------------------------------------------------------------------- */
footer {
  background: var(--paper-2); border-top: 1px solid var(--line);
  padding: 64px 0 44px;
}
.fgrid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 40px; }
footer h4 {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 16px;
}
footer ul { list-style: none; display: grid; gap: 11px; font-size: 15px; }
footer ul a { color: var(--ink-2); text-decoration: none; }
footer ul a:hover { color: var(--ink); }
.ftail {
  margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   18. ENTRADA AO ROLAR  (discreta; um só movimento por bloco)
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.vis {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.vis { opacity: 1; transform: none; transition: none; }
  .btn:hover, .artigo:hover, .card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   19. TELA PEQUENA
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  :root { --t-body: 16.5px; }
  .hero-grid, .split, .split-wide { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding: 56px 0 64px; }
  .hero-visual { margin-top: 40px; }
  .painel-largo { grid-template-columns: 1fr; }
  .trilho {
    border-right: none; border-bottom: 1px solid var(--line);
    flex-direction: row; flex-wrap: wrap; gap: 24px; align-items: flex-end;
  }
  .trilho .val { font-size: 34px; }
  .trilho .medidas { border-top: none; padding-top: 0; }
  /* em tela estreita a linha densa perde obra e valor: sobra o que decide */
  .painel-largo .linha { grid-template-columns: auto 1fr auto; }
  .painel-largo .linha .obra, .painel-largo .linha .vl { display: none; }
  /* a peça flutuante sai no celular: sobreposta em tela estreita ela atrapalha */
  .flutuante { display: none; }
  .grid-2, .grid-3, .grid-3-destaque { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr 1fr; }
  .passos > div + div { border-left: none; }
  .passos > div:nth-child(2n) { border-left: 1px solid var(--line); }
  .passos > div:nth-child(n+3) { border-top: 1px solid var(--line); }

  .comparar { grid-template-columns: 1fr; }
  .comparar > div + div { border-left: none; border-top: 1px solid var(--line); }

  /* conciliação em tela estreita: os dois lados empilham e o glifo vira uma
     faixa entre eles, porque fio pontilhado na horizontal deixa de fazer
     sentido quando não há dois lados um ao lado do outro */
  .registro { grid-template-columns: 1fr; }
  .registro .quando { padding: 15px 20px 0; }
  .registro .corpo { padding: 8px 20px 16px; }
  .campo { grid-template-columns: 1fr; gap: 4px; }

  .conciliar-cab { grid-template-columns: 1fr; }
  .conciliar-cab > div:last-child { border-left: none; border-top: 1px solid var(--line); }
  .par { grid-template-columns: 1fr; }
  .par .lado-dir { border-left: none; }
  .par .liga { padding: 2px 22px; place-items: start; }
  .par .liga::before { display: none; }
  .par .liga span { padding: 0; background: none; }

  .numeros { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .numeros > div { padding: 4px 24px; }
  .numeros > div:nth-child(2n+1) { padding-left: 0; border-left: none; }
  .fgrid { grid-template-columns: 1fr 1fr; gap: 32px; }
  section { padding: 72px 0; }
  .hero { padding: 56px 0 72px; }
  .band { padding: 72px 0; }
  .hero::before { mask-image: radial-gradient(140% 60% at 50% 0%, #000 0%, transparent 70%); }

  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 6px 24px 22px; margin: 0; font-size: 17px;
    box-shadow: var(--lift-2);
  }
  .nav-links[hidden] { display: none; }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links a { display: block; padding: 15px 2px; }

  /* Aqui está o buraco que isto tapa: no celular o botão do cabeçalho é
     escondido (.nav-acts .btn abaixo), e ninguém o repunha no menu. Quem
     lia no telefone, no meio da página, abria o menu para falar com a
     gente e via três páginas e nenhuma porta. Medido abrindo o menu. */
  /* No celular as duas colunas viram uma pilha, e o formulário ficava em cima.
     Só que o canal que a gente realmente atende é o WhatsApp — o formulário
     depende do programa de e-mail do visitante abrir. Então no telefone o
     WhatsApp vem primeiro. No computador continuam lado a lado, e a ordem
     não é uma escolha. */
  .split-wide { display: flex; flex-direction: column; }
  /* Aqui existia `.lado-wpp { order: -1 }`, para o WhatsApp subir na frente
     do formulário no celular. O formulário saiu em 14/08 e o WhatsApp virou
     o primeiro bloco da página — a regra passou a fazer o CONTRÁRIO do que
     foi escrita para fazer: empurrava a coluna de apoio (telefone, o que
     acontece depois) para cima da ação principal.
     Regra de ordem que sobrevive à mudança do conteúdo vira armadilha
     silenciosa: nada quebra, só fica errado. */

  .nav-contato { display: block; border-bottom: 0; margin-top: 6px; }
  .nav-contato a { background: var(--mare-ink); color: #F2FBFD; font-weight: 600;
    text-align: center; border-radius: 10px; padding: 15px 18px; }
  .nav-contato a:hover { background: var(--mare-hover); color: #F2FBFD; }
  .nav-acts { order: 9; }
  .menu-btn {
    display: grid; place-items: center; margin-left: auto;
    width: 36px; height: 36px; background: transparent; color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    cursor: pointer; font-size: 16px;
  }
  .nav-acts .btn { display: none; }
}

@media (max-width: 580px) {
  .wrap { padding: 0 22px; }
  .fgrid { grid-template-columns: 1fr; gap: 30px; }
  .price { padding: 34px 26px; }
  .form-card, .quote { padding: 28px; }
  .passos { grid-template-columns: 1fr; }
  .passos > div:nth-child(2n) { border-left: none; }
  .passos > div + div { border-top: 1px solid var(--line); }
  .painel-num .val { font-size: 34px; }
}

@media print {
  .nav, .rascunho, .band, .menu-btn, .theme-btn { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   CENTRO DE CONFIANÇA — o bloco "como você confere"
   Nasceu da pesquisa de 13/08 (pesquisa/APRENDIZADOS-DE-SITES.md): a Vanta
   vende confiança para quem vai entregar acesso ao próprio sistema, e o que
   ela faz não é tranquilizar — é dar ao comprador uma coisa VERIFICÁVEL.
   Promessa vira artefato. Este bloco é o artefato.
   -------------------------------------------------------------------------- */
.confere {
  margin: 22px 0 34px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r-sm);
  background: var(--ambar-wash);
}
.confere-t {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ambar-ink);
  margin-bottom: 9px;
}
.confere p { margin: 0; font-size: var(--t-small); line-height: 1.65; color: var(--ink-2); }
.confere p b { color: var(--ink); }
.confere code {
  font-family: var(--mono); font-size: .92em;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 5px;
}

/* --------------------------------------------------------------------------
   GALERIA DE TELAS  (site/telas.html)
   Nasceu de uma auditoria de links: o cardápio apontava duas vezes para uma
   página de demonstração que não existia. Em vez de tirar o link, construí o
   destino — e ele aplica o princípio que a pesquisa achou em Linear, Vanta e
   Attio: mostrar o produto, não descrevê-lo.
   -------------------------------------------------------------------------- */
.telas-lista { display: grid; gap: 44px; }
.tela-item { margin: 0; }
.tela-item img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--lift-2); background: var(--surface);
}
.tela-item figcaption { padding-top: 18px; max-width: 68ch; }
.tela-item figcaption h3 { font-size: var(--t-h4); margin: 0 0 6px; }
.tela-item figcaption p { color: var(--ink-2); font-size: var(--t-small); margin: 0; }
@media (min-width: 900px) { .telas-lista { gap: 56px; } }

/* botão desabilitado: precisa PARECER desabilitado, senão a pessoa clica e nada acontece */
.btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* --- pular para o conteúdo -------------------------------------------
   Escondido até receber o foco pelo teclado. Sem ele, quem navega por Tab
   atravessa o logo, o botão de menu, os quatro links e o botão de tema em
   TODA página antes de chegar ao texto.
   Não usa display:none nem visibility:hidden de propósito: os dois tiram o
   elemento da ordem de foco, e aí o link nunca chega a aparecer. O jeito
   que funciona é tirá-lo da tela por posição. ---------------------- */
.pular { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mare-ink); color: #F2FBFD; font: 600 15px/1 var(--sans);
  padding: 14px 20px; border-radius: 0 0 10px 0; text-decoration: none; }
.pular:focus { left: 0; }
.pular:focus-visible { outline: 3px solid var(--mare-lit); outline-offset: -3px; }

/* O <main> precisa de tabindex=-1 no HTML para o link de pular levar o
   FOCO junto com a rolagem. Sem isso o navegador rola a página mas deixa o
   foco no topo, e o Tab seguinte volta para o menu — o link parece
   funcionar e não funciona. Medido clicando, não lendo.
   Aqui só apagamos a moldura que o tabindex traz de brinde: quem chegou
   por Tab já sabe onde está, e um retângulo em volta da página inteira
   não informa nada. */
main#conteudo:focus { outline: none; }

/* ===========================================================================
   APERTO DE CELULAR — ganhar rolagem sem tirar uma palavra

   Medi a inicial no celular depois de encurtar o conteúdo: 15 telas, e só
   11% disso é respiro entre seções. Ou seja, não havia gordura de
   espaçamento entre blocos. O que havia era gordura DENTRO deles:

     · rodapé ................ 747px (quase uma tela inteira), com os quatro
       grupos de links empilhados um embaixo do outro
     · lista do painel ....... 5 linhas a 122px cada, para uma linha de texto
     · cartões ............... 30px de recheio em tela de 390px de largura

   Recheio generoso é decisão de desktop, onde sobra espaço lateral. No
   celular ele vira rolagem, e rolagem é o que a pessoa paga para ler.

   Nada aqui muda texto, tamanho de letra nem entrelinha: só recheio, espaço
   entre itens e número de colunas. Se o ganho for pequeno, some — foi medido
   um a um. ================================================================ */
@media (max-width: 620px) {
  /* O maior resto de rolagem estava aqui, e eu não tinha visto: 72px em cima
     e 72px embaixo, DOZE vezes, dá 1.700px — duas telas de celular só de
     respiro entre seções. No desktop esse ar é o que separa um assunto do
     outro num campo de visão largo; no celular a pessoa já vê uma seção de
     cada vez, e o ar vira caminho. 52px continua separando com folga. */
  section { padding: 52px 0; }
  .hero { padding: 40px 0 52px; }
  .band { padding: 52px 0; }

  /* as caixas de dentro: mesma ideia, em menor escala */
  .trilho { padding: 18px; }
  .passos-pe, .comparar-pe { padding: 16px 20px; }
  .sec-head { margin-bottom: 22px; }
  .price { padding: 24px 20px; }
  .passos > div { padding: 18px 0; }
  .comparar li { padding-top: 8px; padding-bottom: 8px; }

  /* As quatro falas em duas colunas. Empilhadas custam 1.091px; são frases
     curtas entre aspas, e o olho lê as quatro de uma vez em vez de rolar
     por elas. Se o texto espremer feio, isto volta — está medido abaixo. */
  /* Duas colunas SÓ na grade das falas da inicial. Aqui a regra era .grid-2 e
     pegou também os cartões de outra página, que têm texto de quatro linhas e
     ficaram espremidos em 166px. É o mesmo tipo de armadilha do .lado-wpp:
     regra escrita para um conteúdo, herdada por outro que chegou depois.
     Frase curta entre aspas cabe em meia largura; parágrafo não cabe. */
  .grid-falas { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid-falas .pain { padding: 18px 16px; }
  .grid-falas .pain h3 { font-size: 15.5px; line-height: 1.28; }
  .grid-falas .pain p { font-size: 13.8px; line-height: 1.45; }
  /* o rodapé em duas colunas: são listas de link curto, cabem lado a lado */
  .fgrid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .fgrid > *:first-child { grid-column: 1 / -1; }
  /* A coluna do contato ocupa a largura toda: em metade de 390px o número     "WhatsApp (73) 99139-7473" quebrava no meio do próprio número, e
     número partido em duas linhas ninguém copia direito. Além disso, ela
     ficava sozinha na última fileira com a metade da direita vazia. */
  .fgrid > *:last-child { grid-column: 1 / -1; }

  /* cartões: 30px de recheio numa tela de 390 come 60px de largura útil */
  .card, .grid-3 .card, .grid-3-destaque .card { padding: 22px 20px; }
  .grid-2 > *, .dores > * { padding: 22px 20px; }
  .grid-2, .grid-3, .grid-3-destaque { gap: 14px; }

  /* Aqui eu tinha escrito uma regra para apertar as linhas do painel do
     topo, achando que 122px por linha era recheio. Medi depois de publicar:
     rendeu ZERO. As linhas são .linha, já com 13px em cima e embaixo — os
     113 a 135px são texto de duas e três linhas. A regra saiu em vez de
     ficar aqui de enfeite, mas o motivo fica: aquele bloco é conteúdo, e
     encurtá-lo é tirar apontamento da lista, não apertar espaço. */
}