/* ============================================================================
   LEVERPRO — as landing pages
   ----------------------------------------------------------------------------
   A folha exclusiva das 27 páginas geradas por src/lp/gabarito.mjs. Entra
   DEPOIS de style.css e só consome tokens dela — nenhuma linha aqui redefine
   a camada 1 ou 2. Ver PLANO-LANDING-PAGES.md, seção 5.

   DUAS REGRAS DE ESCOPO, e elas são o que impede este arquivo de encostar na
   home ou nas seções importadas:

     · todo seletor começa com `.lp-` ou `.lpbar`;
     · as classes que NÃO começam assim (`.cases-*`, `.fecho`, `.fo`, `.btn`)
       são reaproveitadas de style.css sem retoque, e as poucas regras daqui
       que as tocam vêm sempre aninhadas dentro de um escopo `.lp-*`.

   O CABEÇALHO É REESCRITO, e não copiado. O menu do herói vive em hero.css
   preso a `#lp-hero` e à unidade `--u` dele (`min(1vw,15px)`), que só faz
   sentido dentro de uma seção de altura cheia. Aqui o markup é o mesmo — as
   classes `.mm-*` são idênticas, então o script do menu serve aos dois —, mas
   a medida vem dos tokens da casa.
   ============================================================================ */

/* ============================================================================
   1 — A BARRA
   ============================================================================ */

/* Ela ACOMPANHA A ROLAGEM, ao contrário da do herói. A da home sai de cena com
   o herói porque mora dentro dele; aqui a página é longa, tem quadro de vídeo
   no meio e o botão de demo precisa continuar alcançável. */
.lpbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap-group);
  padding:14px clamp(16px,3.2vw,48px);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:var(--vidro-desfoque);
          backdrop-filter:var(--vidro-desfoque);
  border-bottom:1px solid transparent;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
/* O fio e a sombra só aparecem quando há conteúdo passando por baixo. No topo
   a barra é parte da mesma folha do herói e uma linha ali seria costura. */
.lpbar[data-rolou="true"]{
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--rule-2);
  box-shadow:0 1px 2px rgb(16 24 40 / 4%), 0 12px 32px -22px rgb(16 24 40 / 30%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lpbar{background:rgba(255,255,255,.96)}
}
@media (prefers-reduced-motion:reduce){.lpbar{transition:none}}

.lpbar-marca{display:flex;align-items:center;flex:none;text-decoration:none}
.lpbar-marca img{display:block;height:32px;width:auto}
@media(max-width:767px){.lpbar-marca img{height:27px}}

.lpbar .mm{display:flex;align-items:center;gap:clamp(6px,1.2vw,18px);position:relative}
.lpbar .mm > a{
  color:var(--text-1);text-decoration:none;font-size:var(--fs-ui);font-weight:500;
  padding:9px 10px;border-radius:8px;transition:color .18s ease;
}
.lpbar .mm > a:hover{color:var(--interactive)}

/* ---- os gatilhos ---- */
.lpbar .mm-grupo{position:static;display:inline-flex}
.lpbar .mm-gatilho{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 10px;border-radius:8px;
  font-family:var(--font-body);font-size:var(--fs-ui);font-weight:500;line-height:1.2;
  color:var(--text-1);
  transition:color .18s ease;
}
.lpbar .mm-gatilho svg{width:15px;height:15px;opacity:.55;transition:transform .22s var(--ease),opacity .18s ease}
.lpbar .mm-gatilho:hover,
.lpbar .mm-gatilho[aria-expanded="true"]{color:var(--interactive)}
.lpbar .mm-gatilho[aria-expanded="true"] svg{transform:rotate(180deg);opacity:1}
.lpbar .mm-gatilho:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.lpbar .mm-gatilho svg{transition:none}}

/* ---- o painel ----
   Largura fixa e alinhado pela DIREITA da barra de navegação, não pelo
   gatilho: são três painéis de conteúdos bem diferentes, e ancorar cada um no
   próprio botão os faria pular de lugar a cada troca.

   PELA DIREITA, E NÃO CENTRADO. O elemento de referência é o `.mm`, que vive
   encostado na direita do cabeçalho; centrar o painel nele jogava 63px para
   fora da janela em 1280px — a coluna "o que você vê rodando" ficava cortada.
   Alinhado à direita, os 920px crescem para dentro da página, que é onde há
   espaço. */
.lpbar .mm-painel{
  position:absolute;top:calc(100% + 16px);right:0;left:auto;z-index:70;
  width:min(920px,calc(100vw - 32px));
  background:var(--folha);
  border:1px solid var(--rule-2);
  border-radius:20px;
  box-shadow:0 1px 2px rgb(16 24 40 / 5%), 0 24px 64px -24px rgb(16 24 40 / 28%);
  animation:lp-abre .18s var(--ease);
}
.lpbar .mm-painel[hidden]{display:none}
@keyframes lp-abre{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.lpbar .mm-painel{animation:none}}
.lpbar .mm-painel-in{padding:26px 28px 22px}

.lpbar .mm-eyebrow{
  margin:0 0 16px;font-size:var(--fs-conta);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
.lpbar .mm-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.lpbar .mm-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:12px;
  color:var(--text-1);text-decoration:none;
  transition:background-color .16s ease;
}
.lpbar .mm-item:hover{background:var(--grey-100)}
.lpbar .mm-ic{
  flex:none;display:grid;place-items:center;
  width:34px;height:34px;border-radius:10px;
  background:var(--grey-100);color:var(--interactive);
}
.lpbar .mm-ic svg{width:18px;height:18px}
.lpbar .mm-nome{font-size:var(--fs-ui);font-weight:500}

.lpbar .mm-duas{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px}
.lpbar .mm-rot{
  margin:0 0 10px;font-size:var(--fs-conta);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
}
.lpbar .mm-area{
  display:block;padding:10px 12px;border-radius:12px;
  color:var(--text-1);text-decoration:none;
  transition:background-color .16s ease;
}
.lpbar .mm-area:hover{background:var(--grey-100)}
.lpbar .mm-area-nome{display:block;font-size:var(--fs-ui);font-weight:600}
.lpbar .mm-area-desc{display:block;margin-top:2px;font-size:var(--fs-micro);color:var(--text-2);line-height:1.45}
.lpbar .mm-lista{display:grid;gap:0}
.lpbar .mm-linha{
  display:block;padding:11px 12px;
  border-bottom:1px solid var(--rule-2);
  color:var(--text-2);text-decoration:none;font-size:var(--fs-micro);
  transition:color .16s ease;
}
.lpbar .mm-linha:last-child{border-bottom:0}
.lpbar .mm-linha:hover{color:var(--interactive)}

.lpbar .mm-cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  padding:11px 20px;border-radius:var(--r-pill);
  background:var(--btn-primary-bg);color:var(--btn-primary-fg);
  text-decoration:none;font-size:var(--fs-micro);font-weight:600;
  transition:background-color .18s ease;
}
.lpbar .mm-cta:hover{background:var(--btn-primary-bg-hover)}
.lpbar .mm-cta svg{width:16px;height:16px;flex:none}

.lpbar .mm-login{
  padding:9px 16px;border:1px solid var(--rule-1);border-radius:var(--r-pill);
  transition:border-color .18s ease,background-color .18s ease;
}
.lpbar .mm-login:hover{border-color:var(--grey-500);background:var(--grey-100)}
.lpbar .mm .cta{
  padding:10px 20px;border-radius:var(--r-pill);
  background:var(--btn-primary-bg);color:var(--btn-primary-fg)!important;
  font-weight:600;
}
.lpbar .mm .cta:hover{background:var(--btn-primary-bg-hover);color:#FFFFFF!important}

/* Abaixo de 1080 o menu inteiro sai e sobra o botão: painel de 920px não cabe,
   e um acordeão de três níveis numa barra fixa é pior que nenhum menu. A
   navegação continua pelo rodapé, que é completo. */
@media(max-width:1080px){
  .lpbar .mm-grupo,.lpbar .mm-login,.lpbar .mm > a:not(.cta){display:none}
}
@media(max-width:560px){
  .lpbar{padding-inline:14px;gap:10px}
  /* `nowrap` porque "Agendar demo" quebrava em duas linhas e a pílula crescia
     até encostar no botão da gaveta. Numa barra, rótulo de ação não quebra. */
  .lpbar .mm .cta{padding:9px 14px;font-size:var(--fs-micro);white-space:nowrap}
  .lpbar-marca img{height:24px}
}

/* ============================================================================
   2 — A MIGALHA
   ============================================================================ */
.lp-migalha{max-width:var(--sheet);margin:0 auto;padding:22px var(--gutter) 0}
.lp-migalha ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:var(--fs-micro);color:var(--text-3);
}
.lp-migalha a{color:var(--text-3);text-decoration:none;transition:color .16s ease}
.lp-migalha a:hover{color:var(--interactive);text-decoration:underline}
.lp-migalha li + li::before{content:"›";margin-right:7px;color:var(--grey-200)}
.lp-migalha [aria-current]{color:var(--text-1);font-weight:500}

/* ============================================================================
   3 — O HERÓI
   A mesma lavagem das seções da home, com a rampa pastel do topo somada por
   cima: é o que faz a primeira dobra de uma landing page ler como a primeira
   dobra do site, sem ser o pacote fechado do herói da home.
   ============================================================================ */
.lp-topo{
  position:relative;
  background-color:var(--folha);
  background-image:
    radial-gradient(52% 46% at 8% -6%,  var(--rampa-indigo), var(--rampa-indigo-0) 70%),
    radial-gradient(46% 42% at 92% -2%, var(--rampa-ciano),  var(--rampa-ciano-0) 70%),
    radial-gradient(40% 40% at 62% 6%,  var(--rampa-roxo),   var(--rampa-roxo-0) 70%),
    linear-gradient(180deg, #F4F6FC 0%, #FAFBFE 46%, #FFFFFF 100%);
  background-repeat:no-repeat;
}
/* A malha de linhas do pacote, a mesma de `.topo` na home, morrendo antes do
   fim do herói. Sem ela o topo da landing page fica liso ao lado de uma home
   texturizada — e as duas são o mesmo site. */
.lp-topo::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(assets/textura-malha.svg) center top/cover no-repeat;
  opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 82%);
          mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 82%);
}
.lp-topo > *{position:relative;z-index:1}

.lp-hero{max-width:var(--sheet);margin:0 auto;padding:clamp(34px,4.4vw,58px) var(--gutter) clamp(30px,3.4vw,46px)}
.lp-hero--centro{text-align:center}
.lp-hero--duo{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  align-items:center;gap:clamp(28px,4vw,60px);
}
@media(max-width:940px){
  .lp-hero--duo{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,38px)}
}

.lp-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 10px;border-radius:var(--r-pill);
  background:var(--vidro-forte);
  box-shadow:var(--vidro-aresta);
  -webkit-backdrop-filter:var(--vidro-desfoque);
          backdrop-filter:var(--vidro-desfoque);
  font-size:var(--fs-conta);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);
}
.lp-eyebrow::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--interactive);flex:none;
}

.lp-h1{
  margin-top:var(--gap-group);
  font-size:clamp(30px,4.3vw,54px);line-height:1.1;
  font-weight:600;letter-spacing:-.03em;
  color:var(--grad-hero-solid);
  text-wrap:balance;
  /* a folga do descendente, como em toda manchete da casa */
  padding-block:.18em;margin-block:var(--gap-group) -.18em;
}
.lp-hero--centro .lp-h1{max-width:20ch;margin-inline:auto}
/* O realce é a MESMA varredura das manchetes de seção da home
   (`.cases-realce`, `.agcab-realce`): roxo → azul → ciano recortada no texto.
   Uma voz só em todo o site. */
.lp-realce{
  background-image:linear-gradient(102deg,
    var(--aro-roxo) 0%, var(--aro-azul) 46%, var(--aro-ciano) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .lp-realce{background-image:none;color:var(--aro-azul);-webkit-text-fill-color:currentColor}
}
@media print{.lp-realce{background-image:none;color:var(--grey-900);-webkit-text-fill-color:currentColor}}

.lp-sub{
  margin-top:var(--gap-element);max-width:62ch;
  font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--text-2);
}
.lp-hero--centro .lp-sub{margin-inline:auto}
.lp-sub b{color:var(--text-1);font-weight:600}

.lp-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,32px)}
.lp-hero--centro .lp-acoes{justify-content:center}

/* ---- a fileira de fatos do herói ----
   Três pares rótulo/valor. Não são métricas de cliente: são fatos do produto
   (categoria, quantas telas, duração), que é o que se pode afirmar. */
.lp-fatos{
  display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,38px);
  margin-top:clamp(26px,3vw,38px);padding-top:var(--gap-group);
  border-top:1px solid var(--rule-2);
  list-style:none;
}
.lp-hero--centro .lp-fatos{justify-content:center}
.lp-fatos dt,.lp-fato-rot{
  font-size:var(--fs-conta);letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);
}
.lp-fatos dd,.lp-fato-val{
  margin:5px 0 0;font-family:var(--font-title);font-weight:600;
  font-size:var(--fs-title);color:var(--text-1);letter-spacing:-.01em;
}

/* ============================================================================
   4 — AS SEÇÕES
   ============================================================================ */
.lp-sec{position:relative;background:var(--folha)}
.lp-sec--wash{background-image:var(--wash);background-repeat:no-repeat}
.lp-sec-in{max-width:var(--sheet);margin:0 auto;padding:clamp(52px,6vw,92px) var(--gutter)}
/* A chamada do meio não abre assunto: ela interrompe. Com o recuo cheio das
   duas seções vizinhas somando ~180px de cada lado, ela lia como uma seção
   própria e quebrava o ritmo em vez de aproveitá-lo. */
.lp-sec-in--fino{padding-block:clamp(10px,1.4vw,22px)}
.lp-sec-in--largo{max-width:1560px}

.lp-cab{max-width:74ch;margin-bottom:clamp(28px,3.4vw,46px)}
.lp-cab--centro{text-align:center;margin-inline:auto}
.lp-rotulo{
  margin:0 0 12px;font-size:var(--fs-conta);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
.lp-h2{
  font-size:clamp(25px,3.1vw,38px);line-height:1.14;
  font-weight:600;letter-spacing:-.028em;color:var(--grad-hero-solid);
  max-width:22ch;text-wrap:balance;
  padding-block:.18em;margin-block:-.18em;
}
.lp-cab--centro .lp-h2{margin-inline:auto}
.lp-cab-sub{margin-top:var(--gap-element);font-size:var(--fs-body);line-height:1.6;color:var(--text-2);max-width:64ch}
.lp-cab--centro .lp-cab-sub{margin-inline:auto}

/* ============================================================================
   5 — O PROBLEMA
   Três cartões de dor. Sem ícone de alerta e sem vermelho: a dor é do leitor,
   e enfeitá-la com sinal de erro transforma o diagnóstico em acusação.
   ============================================================================ */
.lp-dores{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);list-style:none;margin:0;padding:0;
}
@media(max-width:900px){.lp-dores{grid-template-columns:minmax(0,1fr)}}
.lp-dor{
  padding:clamp(20px,2.2vw,28px);
  border-radius:18px;
  background:var(--vidro-forte);
  box-shadow:var(--vidro-aresta),var(--sombra-peca);
  -webkit-backdrop-filter:var(--vidro-desfoque);
          backdrop-filter:var(--vidro-desfoque);
}
.lp-dor h3{
  font-size:var(--fs-title);line-height:1.3;font-weight:600;color:var(--text-1);
  letter-spacing:-.018em;
}
.lp-dor p{margin-top:10px;font-size:var(--fs-micro);line-height:1.62;color:var(--text-2)}

/* ============================================================================
   6 — OS PILARES NUMERADOS
   A forma do Drivetrain: número grande, título, parágrafo. Em duas colunas,
   porque em uma só quatro pilares viram uma escada longa demais.
   ============================================================================ */
.lp-pilares{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px);list-style:none;margin:0;padding:0;counter-reset:pilar;
}
@media(max-width:820px){.lp-pilares{grid-template-columns:minmax(0,1fr)}}
.lp-pilar{counter-increment:pilar;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.lp-pilar::before{
  content:counter(pilar,decimal-leading-zero);
  font-family:var(--font-title);font-weight:700;font-size:20px;
  line-height:1;letter-spacing:-.02em;
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:14px;
  box-shadow:var(--vidro-aresta);
}
.lp-pilar h3{font-size:var(--fs-title);line-height:1.3;font-weight:600;color:var(--text-1);letter-spacing:-.018em}
.lp-pilar p{margin-top:8px;font-size:var(--fs-micro);line-height:1.62;color:var(--text-2)}

/* ============================================================================
   7 — O QUADRO DA ANIMAÇÃO
   A moldura, a tela, a capa, a linha de tempo e os cartões vêm inteiros de
   style.css. Aqui só a caixa que os segura e o rótulo acima.
   ============================================================================ */
.lp-palco{position:relative}
.lp-palco-fora{width:min(100%,1180px);margin-inline:auto}
.lp-palco-fora--largo{width:min(96vw,1460px)}
/* A legenda embaixo do quadro: o que é aquilo e de onde veio. Uma tela de
   produto sem legenda é um print; com legenda é uma demonstração. */
.lp-palco-nota{
  margin:var(--gap-element) auto 0;max-width:72ch;text-align:center;
  font-size:var(--fs-micro);color:var(--text-3);
}

/* ============================================================================
   8 — AS MARCAÇÕES DA TELA
   O que acontece no vídeo, com o minuto. É o bloco que transforma a animação
   em argumento: sem ele a pessoa vê movimento e não sabe o que olhar.
   ============================================================================ */
.lp-beats{list-style:none;margin:0;padding:0;display:grid;gap:0}
.lp-beat{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,26px);
  padding:clamp(18px,2vw,24px) 0;
  border-top:1px solid var(--rule-2);
}
.lp-beat:last-child{border-bottom:1px solid var(--rule-2)}
.lp-beat-t{
  font-family:var(--font-body);font-variant-numeric:tabular-nums;
  font-size:var(--fs-micro);font-weight:600;color:var(--interactive);
  padding-top:2px;min-width:5ch;
}
.lp-beat h3{font-size:var(--fs-ui);line-height:1.35;font-weight:600;color:var(--text-1);letter-spacing:-.012em}
.lp-beat p{margin-top:6px;font-size:var(--fs-micro);line-height:1.62;color:var(--text-2);max-width:72ch}

/* ============================================================================
   9 — ANTES / DEPOIS
   Duas colunas, e a diferença entre elas é só tipográfica: o "hoje" em texto
   normal sobre a folha, o "com a LeverPro" em vidro com a aresta acesa. Sem
   vermelho contra verde — o leitor está do lado esquerdo hoje.
   ============================================================================ */
.lp-contraste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
@media(max-width:820px){.lp-contraste{grid-template-columns:minmax(0,1fr)}}
.lp-lado{padding:clamp(22px,2.4vw,32px);border-radius:20px;border:1px solid var(--rule-2)}
.lp-lado--hoje{background:transparent}
.lp-lado--depois{
  background:var(--vidro-forte);border-color:transparent;
  box-shadow:var(--vidro-aresta),var(--sombra-peca);
  -webkit-backdrop-filter:var(--vidro-desfoque);
          backdrop-filter:var(--vidro-desfoque);
}
.lp-lado-rot{
  font-size:var(--fs-conta);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);
}
.lp-lado--depois .lp-lado-rot{color:var(--interactive)}
.lp-lado ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.lp-lado li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;
  font-size:var(--fs-micro);line-height:1.6;color:var(--text-2);
}
.lp-lado li::before{
  content:'';width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--grey-100);
  /* o traço do "hoje": um menos */
  background-image:linear-gradient(currentColor,currentColor);
  background-size:9px 1.6px;background-position:center;background-repeat:no-repeat;
  color:var(--text-3);flex:none;
}
.lp-lado--depois li::before{
  background-color:#E8F5EF;color:var(--credito);
  /* o tique do "depois", desenhado em SVG para não depender de fonte */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300765F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px 11px;
}
.lp-lado--depois li{color:var(--text-1)}

/* ============================================================================
   10 — OS PASSOS — a linha do tempo
   ----------------------------------------------------------------------------
   Mecanismo de @reactbits-pro/how-it-works-6. O script escreve `--prog` (0 a 1)
   no `<ol>` conforme a seção atravessa a tela; cada nó carrega o próprio `--at`
   e acende quando o progresso o alcança.

   ELA SUBSTITUIU A INCLINAÇÃO 3D. Ver a nota de `passos()` no gabarito: o
   `corporate-trust` lista cartão que inclina como anti-padrão para software
   empresarial, e uma linha do tempo diz o que a seção quer dizer — que os
   passos têm ordem — em vez de só se mexer.

   SEM JS ELA NASCE INTEIRA ACESA. `--prog` cai em 1 por padrão, então quem
   chega sem script vê os três passos completos, e não uma fileira apagada.
   ============================================================================ */
.lp-passos{
  --prog:1;
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);
}
@media(max-width:820px){.lp-passos{grid-template-columns:minmax(0,1fr)}}

/* ---- o trilho ----
   Ele corre pelo CENTRO dos nós, que ficam no topo de cada cartão. `left` e
   `right` recuam meia coluna de cada lado para o trilho começar e terminar
   dentro do primeiro e do último nó, e não nas bordas da grade. */
.lp-linha-trilho{
  position:absolute;top:17px;left:calc(100% / 6);right:calc(100% / 6);
  height:2px;border-radius:2px;background:var(--rule-1);
  overflow:hidden;
}
.lp-linha-fill{
  display:block;height:100%;border-radius:inherit;
  background:var(--interactive);
  transform:scaleX(var(--prog));transform-origin:0 50%;
  transition:transform .25s linear;
}
@media(max-width:820px){
  /* Empilhado o trilho vira vertical, encostado na coluna dos nós. */
  .lp-linha-trilho{
    top:17px;bottom:17px;left:17px;right:auto;width:2px;height:auto;
  }
  .lp-linha-fill{
    width:100%;height:100%;
    transform:scaleY(var(--prog));transform-origin:50% 0;
  }
}

.lp-passo{
  position:relative;
  padding:clamp(48px,4vw,56px) clamp(4px,1vw,10px) 0;
}
@media(max-width:820px){
  .lp-passo{padding:0 0 clamp(22px,3vw,30px) 46px}
  .lp-passo:last-child{padding-bottom:0}
}

/* ---- o nó ----
   Apagado até o progresso chegar nele. A troca é de cor e escala, em 280ms —
   tempo suficiente para se ver acontecer e curto demais para virar espetáculo.
   O aro branco de 6px é o que separa o nó do trilho passando por trás. */
.lp-passo-no{
  position:absolute;top:0;left:50%;translate:-50% 0;
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--folha);color:var(--text-3);
  font-family:var(--font-title);font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--rule-1), 0 0 0 6px var(--folha);
  transition:background-color .28s var(--ease),color .28s var(--ease),
             box-shadow .28s var(--ease),scale .28s var(--ease);
}
@media(max-width:820px){
  .lp-passo-no{left:0;translate:0 0}
}
.lp-passo.is--on .lp-passo-no{
  background:var(--btn-primary-bg);color:var(--btn-primary-fg);
  box-shadow:0 0 0 2px var(--btn-primary-bg), 0 0 0 6px var(--folha);
  scale:1.06;
}
@media (prefers-reduced-motion:reduce){
  .lp-passo-no{transition:none}
  .lp-linha-fill{transition:none}
}

.lp-passo h3{
  font-size:var(--fs-ui);line-height:1.32;font-weight:600;color:var(--text-1);
  letter-spacing:-.012em;
}
.lp-passo p{margin-top:8px;font-size:var(--fs-micro);line-height:1.62;color:var(--text-2);max-width:42ch}
@media(min-width:821px){
  .lp-passos{text-align:center}
  .lp-passo p{margin-inline:auto}
}

/* ============================================================================
   11 — OS PAPÉIS
   ============================================================================ */
.lp-papeis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);list-style:none;margin:0;padding:0}
@media(max-width:900px){.lp-papeis{grid-template-columns:minmax(0,1fr)}}
.lp-papel{padding-top:18px;border-top:2px solid var(--azul-100)}
.lp-papel h3{font-size:var(--fs-ui);font-weight:600;color:var(--text-1);line-height:1.3}
.lp-papel p{margin-top:8px;font-size:var(--fs-micro);line-height:1.62;color:var(--text-2)}

/* ============================================================================
   12 — O DEPOIMENTO
   Um só, e sempre um dos seis reais. Ver PLANO-LANDING-PAGES.md, seção 6.
   ============================================================================ */
.lp-dep{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,2.6vw,36px);
  align-items:start;
  padding:clamp(26px,3vw,44px);
  border-radius:24px;
  background:var(--vidro-forte);
  box-shadow:var(--vidro-aresta),var(--sombra-peca);
  -webkit-backdrop-filter:var(--vidro-desfoque);
          backdrop-filter:var(--vidro-desfoque);
}
@media(max-width:700px){.lp-dep{grid-template-columns:minmax(0,1fr)}}
/* O RETRATO, no lugar da pastilha de iniciais que estava aqui ate 21/09.
   O arquivo e 168x168 e o slot e 64: quadrado em quadrado, `cover` nao chega a
   cortar nada. As medidas vao no HTML para a linha nao pular enquanto a foto
   carrega — o cartao e uma grade de duas colunas e a primeira e o retrato. */
.lp-dep-foto{
  display:block;
  width:64px;height:64px;border-radius:var(--r-pill);
  object-fit:cover;object-position:center;
}
.lp-dep blockquote{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.52;color:var(--text-1);letter-spacing:-.012em}
.lp-dep figcaption{margin-top:var(--gap-element);font-size:var(--fs-micro);color:var(--text-2)}
.lp-dep figcaption b{color:var(--text-1);font-weight:600}
.lp-dep-emp{
  display:inline-block;margin-top:10px;
  font-size:var(--fs-conta);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);
}

/* ============================================================================
   13 — AS TELAS IRMÃS  ·  14 — A GRADE DE LINKS
   Cartão de link com capa. A capa é o próprio poster do vídeo, que já está em
   disco — nenhuma arte nova, e o que se vê é o que se vai ver.
   ============================================================================ */
/* `auto-fit` com TETO de 320px, e a grade centrada. Com `1fr` sem teto, uma
   seção de dois cartões — que é o caso das telas irmãs de Controladoria —
   esticava cada um para 596px e o cartão virava um banner. Com teto, dois
   cartões ficam do mesmo tamanho que seis e a fileira curta fica centrada sob
   a manchete, que também é centrada. */
.lp-cartoes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,320px));
  justify-content:center;
  gap:clamp(14px,1.8vw,24px);list-style:none;margin:0;padding:0;
}
/* Grade de duas linhas: a capa mede pela própria proporção, o texto ocupa o
   resto. É o que faz `margin-top:auto` no "Ver a tela" empurrar o link para o
   pé de todos os cartões, mesmo os de descrição curta. */
.lp-cartao{
  display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;
  border-radius:18px;overflow:hidden;
  background:var(--folha);
  border:1px solid var(--rule-2);
  text-decoration:none;color:inherit;
  transition:transform .22s var(--ease),box-shadow .22s ease,border-color .22s ease;
}
.lp-cartao:hover{
  transform:translateY(-3px);
  border-color:transparent;
  box-shadow:var(--sombra-peca);
}
.lp-cartao:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .lp-cartao{transition:none}
  .lp-cartao:hover{transform:none}
}
/* `height:auto` NÃO É REDUNDANTE, e sem ele o cartão nasce com 1244px de
   altura. Os atributos `width` e `height` da <img> viram dica de apresentação
   (`height:1080px`), e dica de apresentação é CSS de autor de origem mais
   baixa — mas ainda assim CSS. Com uma altura declarada, o `aspect-ratio` não
   tem o que resolver: ele só age quando uma das duas medidas é `auto`. O
   `width:100%` abaixo sobrescreve a largura e deixava a altura intacta em
   1080px, então a capa mostrava um recorte gigante da tela em vez do quadro
   16:9. Os atributos ficam porque são eles que reservam o espaço antes de a
   imagem chegar. */
.lp-cartao-capa{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;object-position:center top;
  background:var(--grey-100);border-bottom:1px solid var(--rule-2);
}
.lp-cartao-txt{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.lp-cartao-cat{font-size:var(--fs-conta);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.lp-cartao-nome{font-family:var(--font-title);font-size:var(--fs-ui);font-weight:600;color:var(--text-1);line-height:1.3}
.lp-cartao-desc{font-size:var(--fs-micro);line-height:1.55;color:var(--text-2)}
.lp-cartao-ir{
  margin-top:auto;padding-top:10px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-micro);font-weight:600;color:var(--interactive);
}
.lp-cartao-ir svg{width:15px;height:15px;transition:transform .18s ease}
.lp-cartao:hover .lp-cartao-ir svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.lp-cartao-ir svg,.lp-cartao:hover .lp-cartao-ir svg{transition:none;transform:none}}

/* ---- a variante sem capa, para os links de plataforma ---- */
/* Sem capa, o cartão é uma linha só. */
.lp-cartao--liso{grid-template-rows:minmax(0,1fr)}
.lp-cartao--liso .lp-cartao-txt{padding:20px 20px 22px}

.lp-cartao--liso .lp-cartao-ic{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  margin-bottom:4px;
}
.lp-cartao--liso .lp-cartao-ic svg{width:19px;height:19px}

/* ============================================================================
   15 — OS AGENTES
   Os doze ícones do pacote de identidade, do mesmo sprite que a home usa.
   ============================================================================ */
.lp-agentes{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:clamp(10px,1.2vw,16px);list-style:none;margin:0;padding:0;
}
.lp-agente{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-radius:14px;
  background:var(--vidro-lamela);
  box-shadow:var(--vidro-aresta);
  -webkit-backdrop-filter:var(--vidro-desfoque);
          backdrop-filter:var(--vidro-desfoque);
}
.lp-agente svg{width:38px;height:38px;flex:none}
.lp-agente-nm{display:block;font-family:var(--font-title);font-size:var(--fs-micro);font-weight:600;color:var(--text-1);line-height:1.25}
.lp-agente-ds{display:block;font-size:var(--fs-conta);color:var(--text-3);margin-top:2px;line-height:1.4}

/* ============================================================================
   16 — O FAQ, EM DUAS COLUNAS
   ----------------------------------------------------------------------------
   Forma de @reactbits-pro/faq-6. Coluna da esquerda fixa com a manchete e os
   canais de contato; à direita o acordeão numerado.

   NÃO É O `.faq-*` DA HOME. Aquele é um tablist de cinco categorias com uma
   marca que desliza, feito para trinta perguntas. Aqui são quatro ou cinco, e
   `<details name>` resolve o exclusivo, o teclado e o leitor de tela sozinho.
   ============================================================================ */
.lp-faq-duas{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,72px);align-items:start;
}
@media(max-width:900px){.lp-faq-duas{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,36px)}}

/* `top` é a altura da barra mais uma folga: a barra é `sticky`, e sem o recuo
   a manchete encostaria por baixo dela ao grudar. */
@media(min-width:901px){
  .lp-faq-aside{position:sticky;top:calc(var(--h-cabecalho) + 24px)}
}
.lp-faq-aside .lp-h2{max-width:16ch}
.lp-faq-aside .lp-cab-sub{max-width:38ch}

.lp-faq-canais{display:grid;gap:10px;margin-top:clamp(22px,2.6vw,32px)}
.lp-faq-canal{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-radius:14px;
  border:1px solid var(--rule-2);
  color:var(--text-1);text-decoration:none;
  transition:border-color .18s ease,background-color .18s ease;
}
.lp-faq-canal:hover{border-color:var(--rule-1);background:var(--grey-100)}
.lp-faq-canal-ic{
  flex:none;display:grid;place-items:center;
  width:36px;height:36px;border-radius:10px;
  background:var(--grey-100);color:var(--interactive);
}
.lp-faq-canal-ic svg{width:18px;height:18px}
.lp-faq-canal > span:last-child{display:grid;gap:2px;min-width:0}
.lp-faq-canal b{font-size:var(--fs-micro);font-weight:600}
.lp-faq-canal span span{font-size:var(--fs-conta);color:var(--text-3)}

.lp-faq{border-top:1px solid var(--rule-2)}
.lp-faq details{border-bottom:1px solid var(--rule-2)}
.lp-faq summary{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;gap:16px;
  padding:20px 4px;cursor:pointer;list-style:none;
  transition:color .16s ease;
}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary:hover .lp-faq-q{color:var(--interactive)}
.lp-faq summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:6px}
/* O número é ordem, não decoração: ele diz quantas perguntas existem e onde a
   pessoa está nelas, que é o que uma lista sem numeração não diz. */
.lp-faq-n{
  font-size:var(--fs-conta);font-weight:600;color:var(--text-3);
  font-variant-numeric:tabular-nums;padding-top:3px;
}
.lp-faq details[open] .lp-faq-n{color:var(--interactive)}
.lp-faq-q{
  font-family:var(--font-title);font-size:var(--fs-ui);font-weight:600;
  line-height:1.4;color:var(--text-1);
  transition:color .16s ease;
}
.lp-faq-sinal{
  flex:none;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--rule-1);color:var(--text-2);
  transition:transform .22s var(--ease),border-color .18s ease,color .18s ease;
}
.lp-faq-sinal svg{width:14px;height:14px}
.lp-faq details[open] .lp-faq-sinal{transform:rotate(180deg);border-color:var(--interactive);color:var(--interactive)}
@media (prefers-reduced-motion:reduce){.lp-faq-sinal,.lp-faq-q,.lp-faq summary{transition:none}}
.lp-faq-r{
  padding:0 4px 22px 46px;
  font-size:var(--fs-micro);line-height:1.68;color:var(--text-2);max-width:68ch;
}
@media(max-width:560px){
  .lp-faq summary{gap:12px}
  .lp-faq-r{padding-left:0}
}

/* ============================================================================
   17 — A ESTEIRA DE LOGOS  (prova social curta, abaixo do herói)
   ============================================================================ */
/* UMA LINHA SO, a pedido. Com a Dengo fora sao oito marcas, e na medida antiga
   elas somavam 1.228px numa faixa de 1.192: sete ficavam na primeira linha e a
   oitava caia sozinha na segunda — orfa, que le como marca esquecida. O vao
   encolheu de 52 para 38 e a altura de 27 para 24, o que devolve folga
   suficiente sem que nenhuma marca fique pequena demais para reconhecer.

   `nowrap` so a partir de 900px. Abaixo disso oito marcas numa linha dariam
   menos de 40px cada, e uma fila de marcas que nao se reconhece nao e prova de
   nada — ali elas voltam a quebrar. */
.lp-clientes{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(20px,2.6vw,38px);
  list-style:none;margin:0;padding:0;
}
@media(min-width:900px){.lp-clientes{flex-wrap:nowrap}}
.lp-clientes img{display:block;height:clamp(20px,1.8vw,24px);width:auto;filter:brightness(0);opacity:.5}
.lp-clientes-rot{
  text-align:center;margin-bottom:var(--gap-group);
  font-size:var(--fs-conta);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);
}
.lp-faixa-clientes{border-block:1px solid var(--rule-2);background:var(--folha)}
.lp-faixa-clientes .lp-sec-in{padding-block:clamp(26px,3vw,40px)}

/* ============================================================================
   18 — A CAIXA ESCURA  (segurança e outros blocos de contraste)
   ============================================================================ */
/* CHAPADO, como `.seg-caixa` da home — que é `background:var(--azul-950)` e
   mais nada. Esta caixa tinha três camadas de degradê; a da home tem zero. */
.lp-escuro{
  border-radius:28px;overflow:hidden;position:relative;
  padding:clamp(30px,4vw,60px);
  background:var(--azul-950);
  color:#FFFFFF;
}
.lp-escuro .lp-rotulo{color:rgba(255,255,255,.52)}
.lp-escuro .lp-h2{
  color:transparent;
  background-image:var(--grad-caixa);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .lp-escuro .lp-h2{background-image:none;color:#FFFFFF;-webkit-text-fill-color:currentColor}
}
.lp-escuro .lp-cab-sub{color:rgba(255,255,255,.72)}
.lp-escuro-grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));
  gap:clamp(20px,2.6vw,36px);margin-top:clamp(28px,3.2vw,44px);
  list-style:none;padding:0;
}
.lp-escuro-item h3{font-size:var(--fs-ui);font-weight:600;color:#FFFFFF;line-height:1.3}
.lp-escuro-item p{margin-top:8px;font-size:var(--fs-micro);line-height:1.62;color:rgba(255,255,255,.68)}
.lp-escuro-ic{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  margin-bottom:14px;
  background:rgba(255,255,255,.08);color:#9EC2FF;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.lp-escuro-ic svg{width:19px;height:19px}

/* ============================================================================
   19 — A MALHA DE ERPS  (página de Integrações)
   Reaproveita `.erp-tile` de style.css — as marcas já estão em src/assets/erp.
   ============================================================================ */
.lp-erps{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:10px;list-style:none;margin:0;padding:0;
}
.lp-erp{
  display:grid;place-items:center;gap:6px;
  min-height:76px;padding:12px 10px;
  border-radius:14px;
  background:var(--vidro-forte);
  box-shadow:var(--vidro-aresta);
  -webkit-backdrop-filter:var(--vidro-desfoque);
          backdrop-filter:var(--vidro-desfoque);
}
.lp-erp img{display:block;max-width:82px;max-height:28px;width:auto;height:auto;object-fit:contain}
.lp-erp span{font-size:var(--fs-conta);font-weight:600;color:var(--text-2);text-align:center;line-height:1.25}
.lp-erp--mais{background:transparent;box-shadow:inset 0 0 0 1px var(--rule-1)}
.lp-erp--mais span{color:var(--text-1)}

/* ============================================================================
   20 — AS SUPERFÍCIES  (página de Propagação)
   ============================================================================ */
.lp-superficies{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;list-style:none;margin:0;padding:0;
}
@media(max-width:820px){.lp-superficies{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lp-superficie{
  padding:20px 16px;border-radius:16px;text-align:center;
  background:var(--vidro-forte);
  box-shadow:var(--vidro-aresta);
  -webkit-backdrop-filter:var(--vidro-desfoque);
          backdrop-filter:var(--vidro-desfoque);
}
.lp-superficie svg{width:38px;height:38px;display:block;margin:0 auto}
.lp-superficie-nm{display:block;margin-top:12px;font-size:var(--fs-conta);color:var(--text-3)}
.lp-superficie-val{
  display:block;margin-top:4px;font-family:var(--font-body);font-weight:600;
  font-size:var(--fs-numeric-sm);color:var(--text-1);
  font-variant-numeric:tabular-nums;
}

/* ============================================================================
   21 — O ROTEIRO DO LEVIR  (página do Levir AI)
   Sete passos em coluna, com o fio vertical ligando-os. Estático: o roteiro
   animado vive no arquivo.html e não se duplica.
   ============================================================================ */
.lp-roteiro{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0}
/* Chapado no azul-pulso. Era um degradê de três paradas; a home resolve fio
   com cor única — `.cases-card-fill` é `var(--interactive)` e pronto. */
.lp-roteiro::before{
  content:'';position:absolute;left:15px;top:14px;bottom:14px;width:2px;
  background:var(--azul-500);
}
.lp-etapa{position:relative;padding:14px 0 14px 46px}
.lp-etapa::before{
  content:'';position:absolute;left:8px;top:20px;
  width:16px;height:16px;border-radius:50%;
  background:var(--folha);
  box-shadow:inset 0 0 0 2.5px var(--interactive);
}
.lp-etapa h3{font-size:var(--fs-ui);font-weight:600;color:var(--text-1);line-height:1.32}
.lp-etapa p{margin-top:5px;font-size:var(--fs-micro);line-height:1.6;color:var(--text-2);max-width:66ch}

/* ============================================================================
   22 — A PILHA DAS TRÊS CAMADAS  (página da Plataforma)
   ============================================================================ */
.lp-camadas{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.lp-camada{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2vw,26px);align-items:center;
  padding:clamp(20px,2.2vw,28px);
  border-radius:18px;
  background:var(--vidro-forte);
  box-shadow:var(--vidro-aresta),var(--sombra-peca);
  -webkit-backdrop-filter:var(--vidro-desfoque);
          backdrop-filter:var(--vidro-desfoque);
}
@media(max-width:760px){.lp-camada{grid-template-columns:auto minmax(0,1fr)}.lp-camada-n{display:none}}
.lp-camada-ic{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  flex:none;
}
.lp-camada-ic svg{width:22px;height:22px}
.lp-camada h3{font-size:var(--fs-title);font-weight:600;color:var(--text-1);line-height:1.3;letter-spacing:-.018em}
.lp-camada p{margin-top:7px;font-size:var(--fs-micro);line-height:1.62;color:var(--text-2)}
.lp-camada-n{
  font-family:var(--font-title);font-weight:700;font-size:34px;
  color:var(--grey-200);letter-spacing:-.04em;line-height:1;
}

/* ============================================================================
   23 — A CHAMADA INTERMEDIÁRIA
   Uma faixa fina entre seções, com uma frase e um link. Existe porque a página
   é longa e quem se convence no meio não deve ter de rolar até o fim.
   ============================================================================ */
.lp-meio{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--gap-group);
  padding:clamp(22px,2.4vw,32px) clamp(22px,2.6vw,38px);
  border-radius:20px;
}
.lp-meio p{font-family:var(--font-title);font-size:var(--fs-title);font-weight:600;color:var(--text-1);letter-spacing:-.018em;max-width:46ch;line-height:1.35}

/* ============================================================================
   24 — A ENTRADA EM CENA
   O mesmo princípio da casa: nada CHEGA, tudo já está no lugar e só assenta.
   8px de deslocamento, uma vez, e o elemento que o navegador não alcançar por
   JS nasce visível (o estado inicial só é aplicado pelo script).
   ============================================================================ */
@media (prefers-reduced-motion:no-preference){
  .lp-surge{opacity:0;translate:0 10px;transition:opacity .5s var(--ease),translate .5s var(--ease)}
  .lp-surge.lp-visivel{opacity:1;translate:0}
}

/* ============================================================================
   25 — AJUSTES DO QUADRO DE VÍDEO DENTRO DA LANDING PAGE
   O quadro da home mede 70vw porque é a peça maior de uma página larga. Aqui
   ele vive dentro da folha de 1240px e precisa respeitá-la.
   ============================================================================ */
.lp-palco .cases-fora{width:100%;max-width:none;margin:0}
.lp-palco .cases-cards{margin-top:clamp(14px,1.6vw,22px)}
/* As setas da home ficam penduradas FORA do quadro; numa folha de 1240 elas
   sairiam da área útil. Aqui vão para dentro, encostadas na borda. */
.lp-palco .cases-seta--ant{right:auto;left:clamp(10px,1.2vw,18px)}
.lp-palco .cases-seta--prox{left:auto;right:clamp(10px,1.2vw,18px)}
/* No telefone o quadro mede ~300px de largura e a placa com o nome da tela é
   a peça mais larga da capa. "Aging de Recebíveis e Pagáveis" em 20px não
   cabe — e uma placa que encosta nas duas bordas do quadro não lê como
   legenda, lê como erro. */
@media(max-width:560px){
  .lp-palco .cases-capa-nome{font-size:var(--fs-ui);padding:6px 14px;max-width:100%}
  .lp-palco .cases-capa-dica{font-size:var(--fs-conta)}
  .lp-palco .cases-capa{padding:16px;gap:10px}
}

/* ============================================================================
   26 — O FECHO E O RODAPÉ
   Vêm inteiros de style.css. A única coisa que muda é a margem superior,
   porque nas landing pages a seção anterior é sempre um FAQ com fio embaixo.
   ============================================================================ */
.lp-pagina .fecho{margin-top:0}

/* ============================================================================
   27 — O PULO PARA O CONTEÚDO
   ============================================================================ */
.lp-pula{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;border-radius:0 0 12px 0;
  background:var(--btn-primary-bg);color:var(--btn-primary-fg);
  text-decoration:none;font-size:var(--fs-micro);font-weight:600;
}
.lp-pula:focus{left:0}

/* ============================================================================
   28 — OS COMPONENTES DA REACT BITS
   ----------------------------------------------------------------------------
   Seis peças das landing pages foram trocadas por componentes da React Bits
   (MIT, github.com/DavidHDev/react-bits), portados para cá.

   PORTADOS, E NÃO INSTALADOS. Este site é HTML/CSS estático: não há React, não
   há bundler, e um `.tsx` aqui não compila. É o mesmo caminho que a casa já
   tinha percorrido três vezes — `.border-glow-card` (BorderGlow), `.seg-caixa`
   (SpotlightCard) e `.logos-esteira` (Social Proof 9) vieram de lá do mesmo
   jeito. O que se leva é o MECANISMO; o JSX vira markup no gabarito e
   comportamento em lp.js.

   TRÊS COISAS MUDAM EM TODO PORTE:
     · a paleta. Cada componente chega com a cor dele — o MagicBento é roxo
       #8400FF sobre #120F17, o StarBorder é branco sobre preto. Nenhuma entra:
       tudo é reescrito nos tokens da casa, e é isso que faz seis componentes
       de origens diferentes lerem como um sistema só;
     · o fundo. Todos os seis foram desenhados para tela escura. Sobre a folha
       branca, efeito que "acende" precisa virar efeito que "assenta" — os
       alfas caem para cerca de um terço e o que era brilho vira sombra colorida;
     · o prefixo. Classes viram `.lp-*` e `@keyframes` viram `lp-*`, senão dois
       componentes da mesma biblioteca colidem entre si.

   Movimento reduzido desliga os seis. Nenhum deles carrega informação: são
   todos realce de estado, e o conteúdo se lê inteiro sem nenhum.
   ============================================================================ */

/* ---- 28.1 · MagicBento nos cartões de dor -----------------------------------
   Origem: Components/MagicBento. O mecanismo é o `::after` com um radial
   recortado só na borda por `mask-composite: exclude` — uma moldura de luz de
   1,5px que segue o ponteiro. As três variáveis (`--glow-x`, `--glow-y`,
   `--glow-i`) são escritas pelo script.

   O QUE SAIU: as partículas e o `mix-blend-mode: screen` do holofote global.
   `screen` sobre branco não pinta nada — branco é o resultado de `screen` com
   qualquer coisa —, então o holofote do original é invisível aqui. Quem faz o
   trabalho é a moldura, e ela basta.
--------------------------------------------------------------------------- */
.lp-dores{position:relative}
.lp-dor{
  position:relative;
  --glow-x:50%; --glow-y:50%; --glow-i:0; --glow-r:340px;
  transition:transform .3s var(--ease);
  /* A SOMBRA ACOMPANHA O ANEL, e não o `:hover`. É o que faz o cartão vizinho
     assentar um pouco quando o ponteiro passa perto — o mesmo gradiente de
     atenção que o anel desenha, um degrau abaixo. `calc()` dentro de `rgba()`
     numa box-shadow é legal e anima junto com a variável. */
  box-shadow:var(--vidro-aresta),
    0 1px 2px rgba(34,98,227,calc(.05 + var(--glow-i) * .03)),
    0 8px 20px -8px rgba(34,98,227,calc(.09 + var(--glow-i) * .09)),
    0 28px 56px -22px rgba(34,98,227,calc(.13 + var(--glow-i) * .10));
}
/* O RAIO DO ANEL COBRE A BORDA INTEIRA. Em 260px ele morria aos 161px (62% da
   parada transparente) e um cartão de 380px ficava com as quinas apagadas —
   lia como mancha, não como moldura. 340px fecha os 210px que faltavam. */
.lp-dor::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  padding:2px;border-radius:inherit;
  background:radial-gradient(var(--glow-r) circle at var(--glow-x) var(--glow-y),
    rgba(55,116,239,calc(var(--glow-i) * .95)) 0%,
    rgba(128,81,225,calc(var(--glow-i) * .45)) 34%,
    transparent 62%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask-composite:exclude;
}
.lp-dor:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){
  .lp-dor{transition:none}
  .lp-dor:hover{transform:none}
  .lp-dor::after{display:none}
}

/* ---- 28.2 · TiltedCard — REMOVIDO ------------------------------------------
   Ele viveu aqui sobre `.lp-passos` por uma rodada. Saiu quando a skill
   `corporate-trust` entrou no projeto: ela lista "cartões de produto que
   flutuam ou inclinam" entre os anti-padrões de página de software
   empresarial (§11.26), ao lado de parallax e scroll-jacking, com o argumento
   de que numa compra avaliada por comitê movimento decorativo lê como
   fornecedor imaturo — "restraint signals maturity".

   O lugar dele é hoje a linha do tempo da seção 10, que não é decoração: ela
   mostra que os passos têm ordem, que é o argumento da seção.
--------------------------------------------------------------------------- */

/* ---- 28.3 · ChromaGrid nos papéis -------------------------------------------
   Origem: Components/ChromaGrid. Cada cartão tem o próprio tom, e o ponteiro
   é quem o revela: um radial em `--mouse-x`/`--mouse-y` que acende sob o
   cursor.

   O ORIGINAL É AO CONTRÁRIO. Lá o cartão nasce colorido e uma camada de
   `grayscale(1) brightness(.78)` cobre tudo, com uma máscara radial abrindo
   um buraco sob o cursor — dessaturar o resto é o efeito. Sobre folha branca
   isso não funciona: não há o que dessaturar, e a camada escura viraria uma
   mancha cinza sobre a página. Inverti o sentido — o cartão é quieto e a cor
   ENTRA sob o cursor —, o que dá a mesma leitura ("o ponteiro revela") com
   uma camada em vez de três.

   A régua de cima também ganhou o tom: ela é o que diferencia os três papéis
   quando ninguém está com o ponteiro na seção, que é a maior parte do tempo.
--------------------------------------------------------------------------- */
.lp-papel{
  position:relative;overflow:hidden;
  --mouse-x:50%; --mouse-y:50%;
  --tom:var(--aro-azul);
  padding:20px 20px 22px;
  border-top:2px solid var(--tom);
  border-radius:0 0 16px 16px;
  transition:background-color .3s ease;
}
.lp-papel::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(240px circle at var(--mouse-x) var(--mouse-y),
    color-mix(in srgb, var(--tom) 16%, transparent) 0%,
    color-mix(in srgb, var(--tom) 6%, transparent) 38%,
    transparent 70%);
  opacity:0;transition:opacity .4s ease;
}
@supports not (background:color-mix(in srgb,red,blue)){
  /* Safari antigo: sem color-mix, o realce vira um véu azul único. Ele perde a
     distinção entre os três tons e mantém o gesto, que é o que importa. */
  .lp-papel::before{background:radial-gradient(240px circle at var(--mouse-x) var(--mouse-y),
    rgba(55,116,239,.12) 0%, rgba(55,116,239,.05) 38%, transparent 70%)}
}
.lp-papel:hover::before{opacity:1}
.lp-papel > *{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .lp-papel::before{display:none}
  .lp-papel{transition:none}
}

/* ---- 28.4 · StarBorder — REMOVIDO -------------------------------------------
   Ele correu por uma rodada na moldura do painel "Com a LeverPro", para marcar
   qual dos dois lados era o vivo quando os dois eram vidro branco.

   Saiu quando os painéis ganharam cor: o lado da LeverPro passou a ter tinta
   própria e sombra, e o facho virou um segundo sinal para a mesma coisa. Some
   também o `@keyframes` dele. Movimento em laço já era anti-padrão para esta
   categoria (`corporate-trust`, §11.28); sobre superfície colorida, é ruído.
--------------------------------------------------------------------------- */

/* ---- 28.5 · GlareHover no depoimento ----------------------------------------
   Origem: Animations/GlareHover. Uma faixa de luz em diagonal que atravessa o
   cartão quando o ponteiro entra — o gradiente não se move, o que se move é a
   `background-position`.

   O ORIGINAL usa branco a 80% sobre fundo escuro. Sobre vidro branco isso é
   invisível; aqui o clarão é o AZUL da casa a 10%, que sobre o vidro lê como
   uma passada de luz e não como uma faixa.
--------------------------------------------------------------------------- */
.lp-dep{position:relative;overflow:hidden;isolation:isolate}
.lp-dep::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(-42deg,
    rgba(55,116,239,0) 58%,
    rgba(55,116,239,.10) 68%,
    rgba(128,81,225,.07) 74%,
    rgba(55,116,239,0) 84%);
  background-size:260% 260%;
  background-repeat:no-repeat;
  background-position:-120% -120%;
  transition:background-position .9s var(--ease);
}
.lp-dep:hover::after{background-position:120% 120%}
@media (prefers-reduced-motion:reduce){
  .lp-dep::after{display:none}
}

/* ---- 28.6 · PillNav na barra ------------------------------------------------
   Origem: Components/PillNav. O que veio de lá é a PÍLULA QUE SEGUE: um fundo
   arredondado que desliza de um item para o outro em vez de acender e apagar
   em cada um. É o gesto que dá à barra a sensação de uma peça só.

   O QUE NÃO VEIO, e por quê: o `hover-circle` que cresce do pé de cada pílula
   e a `label-stack` de dois rótulos que giram. Os dois existem para inverter a
   cor do texto no meio do hover — necessário quando a pílula é preta sobre
   barra preta, como no original. Aqui a pílula é um cinza de 6% sobre branco e
   o texto não precisa inverter: a maquinaria toda seria dois elementos a mais
   por item, em markup que o teclado já percorre bem.

   A PÍLULA NASCE DESLIGADA e só aparece depois que o ponteiro encosta em algum
   item — senão ela entraria deslizando do canto esquerdo no primeiro hover.
--------------------------------------------------------------------------- */
.lpbar .mm{isolation:isolate}
.lp-pilula{
  position:absolute;top:var(--p-t,0);left:var(--p-l,0);
  width:var(--p-w,0);height:var(--p-h,0);
  border-radius:var(--r-pill);
  background:var(--grey-100);
  opacity:0;z-index:-1;pointer-events:none;
  transition:left .32s var(--ease),width .32s var(--ease),
             top .32s var(--ease),height .32s var(--ease),opacity .2s ease;
}
.lpbar .mm[data-pilula="on"] .lp-pilula{opacity:1}
@media (prefers-reduced-motion:reduce){
  .lp-pilula{transition:opacity .2s ease}
}
@media(max-width:1080px){.lp-pilula{display:none}}

/* ============================================================================
   29 — A GAVETA DO TELEFONE
   ----------------------------------------------------------------------------
   Portada de @reactbits-pro/navbar-4. Ver o comentário da função `gaveta()` em
   gabarito.mjs para o que veio de lá e por quê.

   O CORTE É EM 1080px, e não nos 768 do original: é onde o painel de 920px do
   menu grande deixa de caber. Acima disso a gaveta não existe; abaixo, ela é a
   única navegação além do rodapé.
   ============================================================================ */
.lp-menu-btn{
  display:none;
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  width:40px;height:40px;padding:0;margin-left:2px;
  border-radius:var(--r-pill);
  background:var(--grey-100);color:var(--text-1);
  place-items:center;
  transition:background-color .18s ease;
}
.lp-menu-btn:hover{background:var(--rule-1)}
.lp-menu-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.lp-menu-tracos{display:grid;gap:4px;width:17px}
.lp-menu-tracos i{
  display:block;height:2px;border-radius:1px;background:currentColor;
  transition:transform .22s var(--ease),opacity .16s ease;
}
/* O X: o traço de cima desce e gira, o do meio some, o de baixo sobe e gira. */
.lp-menu-btn[aria-expanded="true"] .lp-menu-tracos i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.lp-menu-btn[aria-expanded="true"] .lp-menu-tracos i:nth-child(2){opacity:0}
.lp-menu-btn[aria-expanded="true"] .lp-menu-tracos i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.lp-menu-tracos i{transition:none}}

/* ---- o véu ----
   `position:fixed` e não `absolute`: a barra é `sticky`, e um véu absoluto
   dentro dela cobriria só a altura da própria barra. */
.lp-veu{
  position:fixed;inset:0;z-index:55;
  background:rgba(13,39,86,.22);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:lp-veu-entra .22s ease;
}
.lp-veu[hidden]{display:none}
@keyframes lp-veu-entra{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lp-veu{animation:none}}

/* ---- a folha ---- */
.lp-gaveta{
  position:fixed;inset:68px 0 0;z-index:58;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--folha);
  border-top:1px solid var(--rule-2);
  animation:lp-gaveta-entra .28s cubic-bezier(.32,.72,0,1);
}
.lp-gaveta[hidden]{display:none}
@keyframes lp-gaveta-entra{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.lp-gaveta{animation:none}}
.lp-gav-in{padding:14px 16px 40px;display:grid;gap:2px}

.lp-gav-cab{
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:0 12px;border-radius:12px;
  background:transparent;color:var(--text-1);
  font-family:var(--font-title);font-size:var(--fs-ui);font-weight:600;text-align:left;
  transition:background-color .16s ease;
}
.lp-gav-cab:hover{background:var(--grey-100)}
.lp-gav-cab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.lp-gav-cab svg{width:17px;height:17px;flex:none;color:var(--text-3);transition:transform .2s var(--ease)}
.lp-gav-cab[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.lp-gav-cab svg{transition:none}}

.lp-gav-lista{
  list-style:none;margin:2px 0 6px 12px;padding:0 0 0 14px;
  border-left:1px solid var(--rule-2);display:grid;gap:1px;
}
.lp-gav-lista[hidden]{display:none}
.lp-gav-lista a{
  display:flex;align-items:center;min-height:42px;padding:0 10px;
  border-radius:8px;text-decoration:none;
  color:var(--text-2);font-size:var(--fs-micro);
  transition:background-color .16s ease,color .16s ease;
}
.lp-gav-lista a:hover{background:var(--grey-100);color:var(--text-1)}

.lp-gav-solto{
  display:flex;align-items:center;min-height:48px;padding:0 12px;
  border-radius:12px;text-decoration:none;
  color:var(--text-1);font-family:var(--font-title);
  font-size:var(--fs-ui);font-weight:600;
  transition:background-color .16s ease;
}
.lp-gav-solto:hover{background:var(--grey-100)}
.lp-gav-cta{
  display:flex;align-items:center;justify-content:center;
  min-height:50px;margin-top:14px;border-radius:var(--r-pill);
  background:var(--btn-primary-bg);color:var(--btn-primary-fg);
  text-decoration:none;font-weight:600;font-size:var(--fs-ui);
}
.lp-gav-cta:hover{background:var(--btn-primary-bg-hover);color:#FFFFFF}

/* A gaveta e o botão só existem onde o menu grande não cabe. */
@media(min-width:1081px){
  .lp-menu-btn,.lp-veu,.lp-gaveta{display:none!important}
}
@media(max-width:1080px){
  .lp-menu-btn{display:grid}
}
/* Com a gaveta aberta, a página por baixo não rola. */
body.lp-travado{overflow:hidden}
/* E a barra fixa do pé sai de cena: ela tem `z-index:70` contra os 58 da
   gaveta, então ficava por cima, com o mesmo "Agendar diagnóstico" da gaveta
   repetido logo abaixo dele. Dois botões idênticos empilhados não é ênfase. */
body.lp-travado .mobile-cta{display:none}

/* ============================================================================
   30 — A RÉGUA DE PROVA
   ----------------------------------------------------------------------------
   Na forma da "editorial bordered metric strip" do @reactbits-pro/hero-20, com
   a ordem e o rigor da escada de confiança do `corporate-trust` (§5 e §6).

   FIOS, E NÃO CARTÕES. Quatro cartões de vidro aqui seriam a quinta peça de
   vidro da mesma página, e o §11 lista "glassmorphism empilhado" entre os
   sinais de página genérica. Um fio de 1px separando células numa faixa é o
   que a categoria usa: lê como quadro de dados, não como banner.

   NUMERAL TABULAR obrigatório (§6): sem ele, "5 dias úteis" e "+100" não
   alinham a base e a régua parece desmontada.
   ============================================================================ */
.lp-prova{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(28px,3.2vw,44px);
  border-top:1px solid var(--rule-2);
}
@media(max-width:900px){.lp-prova{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.lp-prova{grid-template-columns:minmax(0,1fr)}}
.lp-prova-cel{
  padding:clamp(20px,2.2vw,28px) clamp(14px,1.8vw,26px);
  border-right:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
}
.lp-prova-cel:last-child{border-right:0}
@media(max-width:900px){
  .lp-prova-cel:nth-child(2n){border-right:0}
}
@media(max-width:480px){
  .lp-prova-cel{border-right:0}
}
.lp-prova-n{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(22px,2.2vw,30px);line-height:1.1;letter-spacing:-.025em;
  color:var(--text-1);
  font-variant-numeric:tabular-nums;
}
.lp-prova-d{
  margin-top:8px;font-size:var(--fs-micro);line-height:1.5;color:var(--text-2);
  max-width:34ch;
}
/* A ATRIBUIÇÃO É PARTE DO NÚMERO, não um rodapé dele: número de cliente sem
   fonte é o anti-padrão #11. Fica em maiúsculas miúdas para se ler como
   crédito, e não como mais uma linha de texto. */
.lp-prova-fonte{
  margin-top:10px;font-size:var(--fs-conta);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
}
.lp-prova-fonte::before{content:"— "}

/* ============================================================================
   32 — A BANDA DE CONFIANÇA
   ----------------------------------------------------------------------------
   Duas colunas: reconhecimentos à esquerda, mecanismo de segurança à direita.
   Ver a nota de `bandaConfianca()` no gabarito para por que ela existe.

   OS PRÊMIOS FICAM DISCRETOS de propósito. A escada de confiança põe prêmio em
   rank 8 — o sinal de menor peso para um comprador cético — e manda a faixa
   ser "pequena, discreta, não superdimensionada". Eles entram em escala de
   cinza a 60% e só ganham cor no hover: presentes para quem procura, sem
   competir com a régua de números, que é rank 1.
   ============================================================================ */
.lp-confianca{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,4.4vw,72px);align-items:start;
}
@media(max-width:900px){.lp-confianca{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px)}}
.lp-conf-lado > .lp-rotulo{margin-bottom:18px}

.lp-conf-premios{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.2vw,30px);
}
/* SEM `grayscale`, e com alfa mais alto. A dessaturação dos quatro prêmios
   somada a 60% de alfa os transformava em manchas escuras ilegíveis — e um
   selo que não se lê não é discrição, é ruído. Discreto aqui é o TAMANHO e o
   alfa; a arte continua como foi desenhada. */
.lp-conf-premios img{
  display:block;height:clamp(34px,3.4vw,46px);width:auto;
  opacity:.78;
  transition:opacity .2s ease;
}
.lp-conf-premios li:hover img{opacity:1}
@media (prefers-reduced-motion:reduce){.lp-conf-premios img{transition:none}}
.lp-conf-nota{margin-top:16px;font-size:var(--fs-conta);color:var(--text-3);max-width:40ch}

.lp-conf-lista{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,26px);
}
@media(max-width:620px){.lp-conf-lista{grid-template-columns:minmax(0,1fr)}}
.lp-conf-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start}
.lp-conf-ic{
  flex:none;display:grid;place-items:center;
  width:34px;height:34px;border-radius:10px;
  background:var(--folha);color:var(--interactive);
  box-shadow:var(--vidro-aresta);
}
.lp-conf-ic svg{width:17px;height:17px}
.lp-conf-item h3{font-size:var(--fs-micro);font-weight:600;color:var(--text-1);line-height:1.3}
.lp-conf-item p{margin-top:5px;font-size:var(--fs-conta);line-height:1.55;color:var(--text-2)}
.lp-conf-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:clamp(18px,2vw,26px);
  font-size:var(--fs-micro);font-weight:600;color:var(--interactive);text-decoration:none;
}
.lp-conf-link:hover{text-decoration:underline;text-underline-offset:3px}
.lp-conf-link svg{width:15px;height:15px}

/* ============================================================================
   33 — A COR DA PÁGINA
   ----------------------------------------------------------------------------
   As landing pages nasceram brancas: vidro sobre folha branca, com a lavagem
   da casa em alfa baixo. Ao lado da home — que é colorida — liam como outro
   site. Esta seção resolve isso, e resolve com a cor QUE JÁ EXISTE: nenhum hex
   novo entra aqui.

   DE ONDE VEM A COR. O `<body>` de cada página carrega cinco variáveis
   (`--tinta-base` e `--tinta-1..4`) escritas pelo gabarito a partir de
   `TINTAS`, em comum.mjs. As cinco paletas de área são as `data-mesh` das
   categorias do quadro de cases; as seis de plataforma vêm do objeto `AG` de
   `src/hero.js`, que pinta os cartões de agente do herói da home.

   O ACORDO: tinta pinta SUPERFÍCIE, nunca texto. Os pastéis vão para fundo,
   moldura e cartão; o texto continua nos neutros de style.css. É o que mantém
   o contraste AA numa página colorida — e é também a regra que a home segue.
   ============================================================================ */

/* ---- 33.1 · a malha da casa, como utilitário ----
   A fórmula de cinco radiais que a home usa no quadro dos cases e nos cartões
   de agente: um clarão branco no centro, quatro cores nos cantos, sobre a cor
   de chão. Reproduzida aqui com as variáveis da página no lugar dos hexes. */
.lp-malha{
  background-color:var(--tinta-base);
  background-image:
    radial-gradient(at 50% 55%, rgba(255,255,255,.65) 0px, transparent 60%),
    radial-gradient(at 10% 12%, var(--tinta-1) 0px, transparent 55%),
    radial-gradient(at 92%  8%, var(--tinta-2) 0px, transparent 55%),
    radial-gradient(at 85% 92%, var(--tinta-3) 0px, transparent 55%),
    radial-gradient(at  8% 88%, var(--tinta-4) 0px, transparent 55%);
}

/* ---- 33.2 · o chão do herói ----
   Substitui a rampa genérica indigo/ciano/roxo que estava aqui. A rampa era a
   mesma nas 27 páginas; a tinta muda por área, e é ela que diz de cara se
   você está numa página de Tesouraria (verde) ou de Estratégia (rosa).

   ALFA BAIXO NOS CANTOS. A malha cheia é para uma moldura de 600px; esticada
   por um herói inteiro ela viraria um fundo saturado com texto por cima. Aqui
   os quatro cantos entram a cerca de um terço e o branco fecha embaixo, então
   o gradiente morre antes da primeira linha de corpo de texto. */
.lp-topo{
  background-color:var(--folha);
  background-image:
    radial-gradient(60% 52% at 6% -8%,  var(--tinta-1), transparent 62%),
    radial-gradient(54% 48% at 96% -4%, var(--tinta-2), transparent 62%),
    radial-gradient(46% 44% at 74% 34%, var(--tinta-3), transparent 64%),
    radial-gradient(40% 40% at 2% 52%,  var(--tinta-4), transparent 64%),
    linear-gradient(180deg, var(--tinta-base) 0%, #FFFFFF 92%);
  background-repeat:no-repeat;
}
/* O véu branco é o que segura o contraste: ele deita sobre os radiais e deixa
   o campo colorido a cerca de 40% da força, que é onde o subtítulo em
   `--grey-600` ainda passa o piso de 4,5:1. */
.lp-topo::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.74) 58%, #FFFFFF 100%);
}
.lp-topo::after{opacity:.38}

/* ---- 33.3 · as lavagens de seção ----
   A `--wash` da casa é o véu genérico azul/indigo. Trocada pela tinta da
   página, no mesmo alfa discreto: a seção continua sendo um descanso entre
   duas brancas, só que na cor da área. */
.lp-sec--wash{
  background-color:var(--folha);
  background-image:
    radial-gradient(1100px 520px at 0% 0%,   var(--tinta-1), transparent 62%),
    radial-gradient(900px 460px at 100% 12%, var(--tinta-3), transparent 60%);
  background-repeat:no-repeat;
}
.lp-sec--wash::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:rgba(255,255,255,.72);
}
.lp-sec--wash > *{position:relative;z-index:1}

/* ---- 33.4 · os cartões deixam de ser brancos ----
   Eles eram vidro branco a 75% — sobre fundo claro, branco. Passam a levar a
   tinta da página CHAPADA, que é como a home pinta cartão: `.cases-card` é
   rgba(255,255,255,.66), `.surface.pulse` é #E8F0FF, `.erp-tile` é --folha.
   As cores vêm de `--tinta-s1..s4`, os quatro cantos da paleta clareados por
   regra — ver `clareia()` em comum.mjs, com a medida que fixou os 72%. */
.lp-dor,
.lp-passo,
.lp-papel,
.lp-lado--depois,
.lp-dep,
.lp-meio,
.lp-conf-ic,
.lp-erp,
.lp-superficie,
.lp-agente,
.lp-cartao--liso{background:var(--tinta-s1)}

/* A variação entre cartões irmãos é de TOM, não de degradê. */
.lp-dor:nth-child(2),
.lp-passo:nth-child(3),
.lp-papeis > .lp-papel:nth-child(2){background:var(--tinta-s2)}
.lp-dor:nth-child(3),
.lp-passo:nth-child(4),
.lp-papeis > .lp-papel:nth-child(3){background:var(--tinta-s3)}

/* O fio do topo do cartão de dor: chapado, e um tom por cartão. */
.lp-dor{position:relative;overflow:hidden}
.lp-dor::before{content:'';position:absolute;inset:0 0 auto;height:3px;z-index:1;background:var(--tinta-1)}
.lp-dor:nth-child(2)::before{background:var(--tinta-2)}
.lp-dor:nth-child(3)::before{background:var(--tinta-3)}

/* As peças pequenas ficam com o tom FORTE, não com o claro: são pastilhas de
   34 a 64px sobre superfície já tingida, e precisam de contraste contra ela.
   O que vai dentro delas é o azul-950, que passa com folga. */
.lp-pilar::before,
.lp-camada-ic,
.lp-beat-t,
.lp-faq-canal-ic{background:var(--tinta-1);color:var(--azul-950)}
.lp-faq-canal:hover{background:var(--tinta-s4)}
.lp-cartao--liso .lp-cartao-ic{background:var(--folha);color:var(--azul-950)}

/* O cartão de case fica branco DE PROPÓSITO: ele emoldura um pôster de tela de
   produto, e fundo colorido atrás de captura colorida vira briga. O que ganha
   cor nele é a borda. */
.lp-cartao{border-color:transparent;box-shadow:0 0 0 1px rgba(17,19,34,.07)}
.lp-cartao:hover{box-shadow:0 0 0 1px var(--tinta-1), var(--sombra-peca)}

/* A faixa de clientes é a única que fica branca lisa: ela separa o herói
   colorido do resto, e é o respiro de que a régua de prova precisa. */
.lp-faixa-clientes{background:var(--folha)}

/* ============================================================================
   34 — O HERÓI DE DUAS COLUNAS
   ----------------------------------------------------------------------------
   Forma de @reactbits-pro/hero-1: texto à esquerda, um painel grande de
   cantos arredondados à direita com a imagem em `cover` e um botão no canto.
   Ver a nota de `heroVisual()` no gabarito.
   ============================================================================ */
.lp-hero--duo{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;gap:clamp(28px,4vw,56px);
  text-align:left;
}
@media(max-width:980px){
  .lp-hero--duo{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px)}
}
.lp-hero-diz{min-width:0}
.lp-hero--duo .lp-h1{max-width:15ch}
.lp-hero--duo .lp-sub{max-width:48ch}

.lp-hero-visual{min-width:0}
.lp-hero-moldura{
  position:relative;
  padding:clamp(8px,.9vw,14px);
  border-radius:clamp(20px,2vw,30px);
  box-shadow:var(--sombra-peca);
}
/* MESMA PROPORÇÃO DO QUADRO DE VÍDEO mais abaixo (1920/1040, a mediana das
   dezesseis telas). O herói mostra o pôster e a seção mostra o vídeo: se as
   duas molduras tivessem proporções diferentes, a mesma tela pareceria duas. */
.lp-hero-tela{
  display:block;width:100%;height:auto;aspect-ratio:1920 / 1040;
  object-fit:cover;object-position:center top;
  border-radius:clamp(14px,1.4vw,22px);
  background:var(--folha);
  box-shadow:0 1px 2px rgb(16 24 40 / 8%);
}

/* O ENTALHE do hero-1: um quadrado da cor da folha comendo o canto, com o
   botão dentro. Ele leva ao `#ver`, que é onde o vídeo está — o gesto promete
   "toca" e a página cumpre. */
.lp-hero-play{
  position:absolute;right:clamp(8px,.9vw,14px);bottom:clamp(8px,.9vw,14px);
  display:grid;place-items:center;
  width:clamp(52px,4.6vw,66px);aspect-ratio:1;
  border-radius:var(--r-pill);
  background:var(--btn-primary-bg);color:var(--btn-primary-fg);
  text-decoration:none;
  box-shadow:0 0 0 clamp(6px,.7vw,10px) var(--tinta-base), 0 12px 28px -10px rgb(13 39 86 / 45%);
  transition:transform .2s var(--ease),background-color .2s ease;
}
.lp-hero-play span{display:grid;place-items:center;width:42%;height:42%}
.lp-hero-play svg{width:100%;height:100%;display:block;translate:8% 0}
.lp-hero-play:hover{transform:scale(1.06);background:var(--btn-primary-bg-hover)}
.lp-hero-play:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.lp-hero-play{transition:none}}
@media(max-width:980px){.lp-hero-play:hover{transform:none}}

/* A contagem de telas, para a página de área: ela diz que o pôster é o
   primeiro de vários, e não a única coisa que existe. */
.lp-hero-conta{
  position:absolute;left:clamp(14px,1.4vw,22px);top:clamp(14px,1.4vw,22px);
  padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(12,18,32,.42);color:#FFFFFF;
  -webkit-backdrop-filter:blur(12px) saturate(150%);
          backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(255,255,255,.28);
  font-size:var(--fs-conta);font-weight:600;letter-spacing:.03em;
}

/* ---- 34.1 · a régua de fatos dentro do herói de duas colunas ----
   Em coluna inteira ela cabia numa fileira com `flex`. Na metade da largura,
   um valor longo como "Direto, semana a semana" empurrava o terceiro par para
   a linha de baixo, e a régua virava duas fileiras desalinhadas. Grade de três
   colunas iguais resolve: os três pares ficam na mesma linha e quebram DENTRO
   da própria célula, que é onde a quebra não desmonta nada. */
.lp-hero--duo .lp-fatos{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,22px);
}
.lp-hero--duo .lp-fatos > div{min-width:0}
/* Duas linhas reservadas para o rótulo, mesmo quando ele usa uma só. Sem
   isso "ONDE O CÁLCULO ACONTECE", que quebra em duas, empurra o próprio valor
   para baixo e a régua fica com os três números em alturas diferentes. */
.lp-hero--duo .lp-fatos dt,
.lp-hero--duo .lp-fato-rot{display:block;min-height:2.6em}
.lp-hero--duo .lp-fatos dd,
.lp-hero--duo .lp-fato-val{font-size:var(--fs-ui);line-height:1.3}
@media(max-width:560px){
  .lp-hero--duo .lp-fatos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- 33.5 · o cinza terciário não sobrevive à tinta ----
   `--text-3` (#58658F) foi calibrado para ser discreto SOBRE BRANCO. Medido
   sobre as superfícies tingidas ele cai:

     sobre a base chapada (#E9F1FF…)        4,93:1  passa
     sob 62% de branco no tom mais forte    4,20:1  REPROVA (piso 4,5)
     sob 72% de branco no tom mais forte    4,57:1  passa

   São dois consertos, e os dois são baratos. O véu das peças pequenas sobe de
   62% para 72%, e o texto que era terciário dentro de superfície tingida passa
   a `--text-2` — que no pior caso dá 5,39:1. Discrição ali passa a vir do
   TAMANHO, que é o que ela deveria ser desde sempre numa página colorida. */

.lp-agente-ds,
.lp-erp span,
.lp-superficie-nm,
.lp-dor .lp-rotulo,
.lp-passo .lp-rotulo{color:var(--text-2)}

/* ============================================================================
   35 — O RESTO DA PÁGINA TAMBÉM PEGA COR
   ----------------------------------------------------------------------------
   As peças grandes que tinham ficado brancas: o par antes/depois, o
   depoimento, a chamada do meio e as marcações da tela.
   ============================================================================ */

/* ---- o par antes / depois ----
   A assimetria continua sendo o argumento: o lado "hoje" é quieto, o lado "com
   a LeverPro" é o vivo. O que muda é que agora os dois têm chão — antes o
   "hoje" era transparente e sumia no fundo da seção. */
.lp-lado--hoje{
  background:var(--grey-100);
  border-color:transparent;
}
.lp-lado--depois{box-shadow:0 0 0 1px rgba(17,19,34,.05), var(--sombra-peca)}
/* O FACHO DO STARBORDER SAIU. Ele existia para marcar qual dos dois lados é o
   vivo, num tempo em que os dois eram vidro branco. Agora o lado da LeverPro
   tem cor própria e sombra, e o facho virou um segundo sinal para a mesma
   coisa — movimento sobre superfície colorida é ruído. */
.lp-lado--depois::before,
.lp-lado--depois::after{display:none}

/* ---- o depoimento ----
   Ele carrega a única prova nomeada da página; um cartão branco a mais no meio
   de brancos fazia a citação passar despercebida. */
/* O clarão do GlareHover fica — é gesto de passagem, não superfície — mas em
   branco puro, sem paradas de cor. */
.lp-dep::after{
  background:linear-gradient(-42deg,
    transparent 58%, rgba(255,255,255,.55) 70%, transparent 82%);
}

/* ---- a chamada do meio ----
   62% de branco sobre a tinta a deixava quase igual à seção. Em 38% ela volta
   a ser uma interrupção, que é o trabalho dela. */
.lp-meio{box-shadow:inset 0 0 0 1px rgba(17,19,34,.06)}

/* ---- as marcações da tela ----
   O minuto passa a vir numa pastilha da cor da página: ele é o que amarra a
   marcação ao vídeo, e em texto azul solto se perdia na lista. */
.lp-beat-t{display:inline-block;min-width:0;padding:3px 9px;border-radius:var(--r-pill)}
.lp-beat{border-top-color:rgba(17,19,34,.08)}

/* ---- os canais do FAQ ---- */


/* ---- a régua de prova ganha um fio de cor no topo ---- */
.lp-prova{border-top:2px solid var(--tinta-1)}

/* ---- 34.2 · a ordem do herói no telefone ----
   Empilhado, a coluna da esquerda inteira vinha antes do visual — e a imagem
   do produto ia parar depois dos botões E da régua de fatos, a uma tela e
   meia de rolagem. O herói de duas colunas existe justamente para o produto
   aparecer cedo; empilhado assim ele perdia a razão de ser.

   `display:contents` DISSOLVE A COLUNA e promove os filhos dela a itens da
   grade, e aí `order` os intercala com o visual. A ordem passa a ser:
   sobrancelha, manchete, subtítulo, IMAGEM, botões, fatos.

   O `gap` da grade vai a zero junto: com os filhos promovidos, ele apareceria
   entre a sobrancelha e a manchete também, somando ao recuo que a manchete já
   tem. Cada peça volta a valer pela própria margem. */
@media(max-width:980px){
  .lp-hero--duo{gap:0}
  .lp-hero--duo .lp-hero-diz{display:contents}
  /* Promovida a item de grade, a pastilha passa a esticar na coluna inteira —
     `inline-flex` não a segura mais, porque quem manda no tamanho de um item
     de grade é o `justify-self`. */
  .lp-hero--duo .lp-eyebrow{justify-self:start}
  .lp-hero--duo .lp-hero-visual{order:1;margin-top:clamp(26px,4vw,34px)}
  .lp-hero--duo .lp-acoes{order:2}
  .lp-hero--duo .lp-fatos{order:3}
}

/* ============================================================================
   36 — A REGRA, ESCRITA UMA VEZ
   ----------------------------------------------------------------------------
   As seções 33 a 35 pintaram cartão com degradê numa primeira versão. Estava
   errado, e o erro tem nome: não é o que a home faz.

     gradiente  →  atmosfera de fundo (`--wash`, `.fluxo::after`, `.topo`)
                   moldura do quadro de vídeo (`.cases-moldura`)
                   holofote que segue o ponteiro (`.seg-caixa::before`)
                   texto de manchete (`--grad-hero`, `.cases-realce`)
     chapado    →  TODO o resto. `.cases-card` é rgba(255,255,255,.66);
                   `.surface.pulse` é #E8F0FF; `.erp-tile` é --folha;
                   `.seg-caixa` é --azul-950; `.painel` é --vidro-forte;
                   `.cases-card-fill` é --interactive.

   As regras acima já estão nesse padrão. Esta seção não acrescenta nada — ela
   registra a régua para quem for acrescentar superfície nova.
   ============================================================================ */

/* ============================================================================
   AS PÁGINAS DE TEXTO LEGAL  (.lp-legal)
   ----------------------------------------------------------------------------
   Termos de Uso e Política de Privacidade. Só texto, e o desenho existe para
   uma tarefa só: achar uma cláusula e lê-la sem cansar.

   FUNDO CLARO, e não a tinta das landing pages. Estas duas não vendem nada;
   herdar o degradê de seção de vendas aqui seria enfeitar um contrato.

   A CAIXA ACOMPANHA A FOLHA DO SITE — o mesmo `--sheet` mais `--gutter` do
   cabecalho, do rodape e de toda landing page —, entao as DUAS margens do
   texto caem nas dos outros blocos da pagina. Medido em janela de 1512: 160px
   a esquerda, o mesmo x da marca no rodape.

   A MEDIDA DE LEITURA FOI ESTICADA de 68 para 92ch, a pedido. 68 e o meio da
   regua classica de 60 a 75 caracteres e deixava metade da folha vazia a
   direita, o que numa pagina sem nenhuma outra peca lia como erro de
   montagem. 92ch e o teto do que ainda se le sem perder a volta na quebra —
   em 1512 de janela da 900px, contra os 1.192 da folha cheia.

   NAO FOI ATE A FOLHA CHEIA de proposito, e este e o unico ponto em que o
   desenho nao segue o pedido ao pe da letra: linha de 1.192px em texto
   juridico corrido custa releitura de paragrafo, e o custo cai em cima de
   quem esta conferindo uma clausula. Para ir ate la, e trocar 92ch por none.
   ============================================================================ */
.lp-pagina[data-lp="termos-de-uso"],
.lp-pagina[data-lp="politica-de-privacidade"]{background:var(--folha)}
.lp-legal{
  max-width:var(--sheet);
  margin:0 auto;
  padding:clamp(28px,4vw,64px) var(--gutter) clamp(56px,6vw,104px);
}
.lp-legal-topo,
.lp-legal-corpo{max-width:92ch}
.lp-legal-topo{
  padding-bottom:clamp(20px,2.4vw,32px);
  border-bottom:1px solid var(--grey-200);
  margin-bottom:clamp(24px,2.8vw,40px);
}
.lp-legal-titulo{
  margin:0;
  font-family:var(--font-title);font-weight:500;
  font-size:clamp(28px,3vw,42px);line-height:1.12;letter-spacing:var(--ls-headline);
  color:var(--text-1);
}
.lp-legal-corpo p{
  margin:var(--gap-element) 0 0;
  font-size:var(--fs-body);line-height:1.7;color:var(--text-1);
}
/* O vão ACIMA da seção é maior que o de baixo, de propósito: é o que faz a
   numeração ler como início de bloco e não como continuação do anterior. */
.lp-legal-h{
  margin:clamp(32px,3.4vw,52px) 0 0;
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(19px,1.6vw,23px);line-height:1.25;letter-spacing:-.015em;
  color:var(--text-1);
}
.lp-legal-h3{
  margin:clamp(22px,2.2vw,30px) 0 0;
  font-family:var(--font-title);font-weight:600;
  font-size:var(--fs-title);line-height:1.3;color:var(--text-1);
}
.lp-legal-lista{
  margin:var(--gap-element) 0 0;padding-left:1.3em;
  display:flex;flex-direction:column;gap:8px;
}
.lp-legal-lista li{
  font-size:var(--fs-body);line-height:1.7;color:var(--text-1);
}
.lp-legal-lista li::marker{color:var(--grey-500)}

/* ============================================================================
   A PÁGINA DE CONTATO  (.lp-ct-*)
   ----------------------------------------------------------------------------
   No molde da /contact do Pigment. SEM CABEÇALHO, de propósito: quem chega
   aqui tem uma tarefa só, e menu é a única coisa da página que o leva embora
   sem preencher. O logo à esquerda é o caminho de volta.
   ============================================================================ */
.lp-pagina[data-lp="contato"]{background:var(--folha)}

/* ---- 1. o pedido ---- */
/* A LAVAGEM É A DA CASA, não a pastel da referência: lá o topo é um arco-íris
   quente que só existe naquela marca. Aqui entram as duas manchas da folha,
   fracas, para o branco não ficar chapado atrás de um formulário branco. */
.lp-ct-topo{
  padding:clamp(28px,3.4vw,56px) var(--gutter) clamp(56px,6vw,96px);
  background-color:var(--folha);
  /* MAIS FORTE, a pedido. As duas manchas foram de .10/.12 para .20/.24 e
     cresceram; entrou uma terceira, em ciano, baixa e larga no pé, que e o que
     faz a cor chegar ate a altura do botao do formulario em vez de morrer na
     metade da secao. Os tres hues sao os do fio unico da casa — roxo, azul,
     ciano —, entao a atmosfera fica mais presente sem introduzir cor nova. */
  background-image:
    radial-gradient(1100px 680px at 4% -6%, rgba(128,81,225,.20), rgba(128,81,225,0) 64%),
    radial-gradient(1000px 640px at 96% 2%, rgba(55,116,239,.24), rgba(55,116,239,0) 62%),
    radial-gradient(1200px 520px at 50% 104%, rgba(28,192,255,.16), rgba(28,192,255,0) 66%);
  background-repeat:no-repeat;
}
.lp-ct-topo-in{
  max-width:var(--sheet);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:clamp(36px,4vw,64px);
  align-items:start;
}
@media(min-width:960px){
  /* A COLUNA DO FORMULÁRIO MANDA NA PROPORÇÃO, e o número não é gosto: o
     construtor do GHL só reorganiza os campos em DUAS COLUNAS acima de ~660px
     de largura útil. Em .84fr o iframe media 638 e o formulário descia numa
     coluna só, com o dobro de altura. Em .66fr ele passa de 700 e a forma da
     referência aparece. */
  .lp-ct-topo-in{grid-template-columns:minmax(0,.66fr) minmax(0,1fr);gap:clamp(36px,3.6vw,64px)}
}
.lp-ct-marca img{display:block;height:34px;width:auto}
.lp-ct-titulo{
  margin:clamp(28px,3vw,44px) 0 0;
  font-family:var(--font-title);font-weight:500;
  font-size:clamp(34px,4.4vw,60px);line-height:1.06;letter-spacing:var(--ls-headline);
  color:var(--text-1);
  padding-block:.18em;margin-block:clamp(28px,3vw,44px) -.18em;
}
.lp-ct-sub{
  margin:var(--gap-group) 0 0;max-width:52ch;
  font-size:var(--fs-ui);line-height:1.65;color:var(--text-2);
}
/* O fio separa o convite do que a conversa entrega. Na referência ele está no
   mesmo lugar e faz o mesmo trabalho. */
.lp-ct-cobre{
  margin-top:clamp(28px,3vw,44px);padding-top:clamp(24px,2.6vw,36px);
  border-top:1px solid var(--grey-200);
}
.lp-ct-cobre .fecho-lista{margin-top:var(--gap-group)}
.lp-ct-cobre .fecho-lista li{color:var(--text-1)}
.lp-ct-cobre .fecho-tick{color:var(--interactive)}
.lp-ct-marcas{margin-top:clamp(28px,3vw,44px)}
/* GRADE DE MARCAS, não esteira: aqui elas são prova parada ao lado de um
   formulário, e coisa andando do lado de um campo de texto disputa a atenção
   que a página está pedindo. */
.lp-ct-marcas ul{
  list-style:none;margin:var(--gap-group) 0 0;padding:0;
  /* QUATRO COLUNAS FIXAS: com a Dengo fora sao OITO marcas, e 4x2 fecha o
     retangulo. Em tres colunas a ultima linha ficava com duas e a borda de
     baixo saia torta. O numero de colunas segue a lista — se ela mudar de
     tamanho, este valor muda junto. */
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px) clamp(16px,1.8vw,28px);
  align-items:center;
}
/* MENORES, a pedido: elas são prova de fundo, não a manchete da coluna. O teto
   de largura existe porque a folha de marca é 400×100 com a tinta centrada —
   sem ele, a arte cresce até o tamanho da célula e as marcas passam a competir
   com o título. */
.lp-ct-marcas img{
  display:block;width:100%;max-width:92px;height:auto;
  filter:brightness(0);opacity:.42;
  margin-inline:auto;
}
/* NO TELEFONE SAO DUAS COLUNAS, nao quatro. Medido em 375: com quatro, cada
   marca saia com 70px de largura — abaixo do que se reconhece de relance, que
   e a unica coisa que uma fila de marcas precisa entregar. Em duas colunas sao
   oito marcas em quatro linhas, e o retangulo continua fechado. */
@media(max-width:560px){
  .lp-ct-marcas ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-ct-marcas img{max-width:112px}
}

/* CENTRADO NA COLUNA, a pedido. A coluna da esquerda mede 730px e o formulario
   617: sobram 113, que viram ~56 em cima e embaixo.

   O `position:sticky` que estava aqui saiu junto, e nao por descuido: grudar no
   topo e ficar centrado sao ordens opostas. Com 113px de folga ele tinha 113px
   de curso — quase nada — e o efeito era o formulario deslizar um dedo e parar,
   que le como defeito e nao como intencao. */
.lp-ct-form{position:relative}
@media(min-width:960px){.lp-ct-form{align-self:center}}
/* A casca clara do formulário é a mesma do fecho, e pelo mesmo motivo: o
   cartão do GHL tem fundo transparente e rótulos em azul-noite. Aqui ela ganha
   borda, porque o fundo atrás dela também é claro e sem o fio o cartão some. */
/* SEM BORDA, so sombra. A borda desenhava o retangulo inteiro, inclusive os
   ~30px que sobram embaixo do botao — o formulario do GHL reporta a altura com
   a margem de baixo da pagina dele dentro. Com o fio, aquela faixa virava um
   pedaco de caixa vazia com contorno; sem ele, e respiro. A sombra sozinha ja
   separa o branco do formulario do branco da secao.

   O RAIO DO IFRAME acompanha o da caixa. Ele nasce com 5px na regra do fecho e
   a caixa aqui tem 15: nos quatro cantos sobrava uma casquinha de 10px entre
   um arredondado e o outro. */
.lp-ct-form .fecho-embed{box-shadow:0 22px 60px rgba(17,19,34,.10)}
.lp-ct-form .fecho-iframe{border-radius:inherit}

/* ---- 2. soa familiar? ---- */
.lp-ct-dores{
  padding:clamp(56px,6vw,104px) var(--gutter);
  /* UM DEGRAU MAIS AZUL, a pedido: #0B0E17 -> #0D1120. Os dois sao da mesma
     escada que o cartao do fecho da home usa (#0B0E17, #0D1120, #161B33), e
     andar nela mantem o escuro da casa em vez de inventar um azul novo. */
  background:#0D1120;color:#FFFFFF;
}
.lp-ct-dores-in{
  max-width:var(--sheet);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:clamp(32px,3.6vw,64px);
}
@media(min-width:900px){.lp-ct-dores-in{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}}
.lp-ct-dores .lp-rotulo{color:rgba(255,255,255,.5)}
.lp-ct-dores-titulo{
  margin:var(--gap-group) 0 0;
  font-family:var(--font-title);font-weight:500;
  font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:var(--ls-headline);
  color:#FFFFFF;
}
.lp-ct-dores-sub{
  margin:var(--gap-group) 0 0;max-width:42ch;
  font-size:var(--fs-ui);line-height:1.65;color:rgba(255,255,255,.62);
}
/* Uma dor por linha, separadas por fio: é uma lista para reconhecer a própria
   rotina, não para ler de cabo a rabo. O fio dá o ritmo de varredura. */
.lp-ct-dores-lista{list-style:none;margin:0;padding:0}
.lp-ct-dores-lista li{
  padding:clamp(16px,1.6vw,22px) 0;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-body);line-height:1.6;color:rgba(255,255,255,.88);
}
.lp-ct-dores-lista li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}

/* ---- 3. quem já opera ---- */
.lp-ct-casos{padding:clamp(56px,6vw,104px) 0 clamp(64px,7vw,112px)}
}