/* ============================================================================
   LEVERPRO — A Vitrine Difusa
   ----------------------------------------------------------------------------
   A página é uma vitrine: o produto aparece funcionando, em peças de vidro
   fosco sobre papel branco, iluminadas por uma luz colorida que nunca chega a
   ser uma cor. Ver DESIGN.md para o sistema inteiro; aqui, só o que o CSS
   precisa lembrar.

   Quatro camadas, cada uma referenciando só a de cima:
     1. PRIMITIVO   valores crus da coleção de marca        --azul-600
     2. SEMÂNTICO   papéis                                   --text-1
     3. COMPONENTE  o contrato temático de uma peça         --btn-primary-bg
     4. UTILITÁRIO  as classes que o HTML usa               .entry, .painel

   Regras do mundo, acima de qualquer preferência local:
     · A folha é #FFFFFF, e toda costura entre seções resolve em --folha.
     · Cor de fundo é bloom radial dessaturado (S 0,70) com alfa, vindo de
       fora do quadro — nunca faixa chapada. Textura só por mistura, com
       base opaca.
     · Vidro é branco a 75% + blur 18 + saturação 1,7, com aresta de luz
       interna e --sombra-peca. Cada lamela tem o próprio filtro.
     · Gradiente só em manchete (--grad-hero), folha a folha, com a folga
       do descendente. Botão é azul-noite chapado.
     · Nada entra em cena: tudo ocupa o lugar e só troca de estado.
   ============================================================================ */

/* ============================================================================
   CAMADA 1 — PRIMITIVOS (coleção de marca)
   ============================================================================ */
:root{
  --grey-100:#EFF1F5; --grey-200:#DBDDE7;
  --folha:#FFFFFF;    /* A FOLHA DA PÁGINA. Fora de --surface-1 porque os
                         modos redefinem aquele, e os esmaecimentos que
                         costuram as seções precisam da cor real do papel. */
  --grey-500:#58658F; --grey-600:#4A5578; --grey-900:#111322;
  --white:#FFFFFF;

  /* Blanket — os véus da coleção. Duas famílias: Light é preto com alfa e
     escurece sem tingir; Color é um hue com alfa e escurece E tinge, que é o
     que mantém uma superfície interna coerente com a página em vez de virar
     cinza neutro no meio de tudo azul. Sobre vidro, véu é obrigatório: cor
     chapada bloqueia o campo colorido de passar.

     Só os dois que a página lê. A coleção tem light-01/03 e cor-neutral/
     primary/success/warning/error; entram quando alguém precisar deles. O
     prefixo `cor-` existe porque a coleção chama de `blanket-light` um token
     em CADA família. */
  --blanket-light-02:rgba(0,0,0,.10);         /* o fio vertical do usuário no chat */
  --blanket-cor-light:rgba(23,28,117,.05);    /* indigo profundo: o balão do pedido */
  --blanket-cor-neutral:rgba(93,107,152,.10); /* ardósia: as linhas do diagrama */

  --azul-100:#D1E0FE; --azul-500:#3774EF; --azul-600:#2262E3;
  --azul-900:#1A3E83; --azul-950:#0D2756;
  --vermelho-500:#E3453F; --vermelho-700:#AB231F;
  --turquesa-700:#00765F;

  /* Hue de acento da coleção. Só aparece em gradiente — nunca como cor chapada
     de um elemento, porque a marca continua sendo azul. */
  --roxo-700:#6748BB;

  /* AS TRÊS CORES DO ARO. Vivem aqui, e não soltas dentro da regra do aro,
     porque agora são duas peças: o arco que gira em volta da interface na
     animação e o anel do console no topo. Mexer numa tem de mexer na outra.
     As variantes -0 são o MESMO hex a alfa zero, nunca `transparent`: em
     `transparent` a interpolação passa pelo preto e suja a ponta do arco. */
  --aro-ciano:#1CC0FF; --aro-ciano-0:#1CC0FF00;
  --aro-azul:#3774EF;  --aro-azul-0:#3774EF00;
  --aro-roxo:#8051E1;  --aro-roxo-0:#8051E100;

  /* Lavagens de fundo: rampa 100 a meia força, e o mesmo hex a zero para o
     esmaecimento. Pares, porque `transparent` esmaece passando pelo preto.

     SATURAÇÃO PADRONIZADA EM 0,700, que é o patamar do gradiente do topo
     (--h-roxo 0,710, --h-ciano 0,704, --h-indigo 0,696). Vinham de 0,886 a
     1,000 — herdadas da rampa 100 crua, que é feita para preencher área, não
     para passar por baixo de texto. Matiz e luz intactos: só o S muda.
     Turquesa já estava em 0,700 e não se mexeu. */
  --w-azul:#D7E2F84D;     --w-azul-0:#D7E2F800;
  --w-indigo:#E5ECFA4D;   --w-indigo-0:#E5ECFA00;
  --w-roxo:#F4EEFC5C;     --w-roxo-0:#F4EEFC00;
  --w-magenta:#FAE1F333;  --w-magenta-0:#FAE1F300;
  --w-ciano:#E4F1FA59;    --w-ciano-0:#E4F1FA00;
  --w-turquesa:#CCF6ED40; --w-turquesa-0:#CCF6ED00;
  --w-laranja:#F7E6D333;  --w-laranja-0:#F7E6D300;

  /* Rampa 200, bem mais viva que as lavagens acima. Só aparece no pé da
     seção do fluxo, onde não há texto nenhum por cima. */
  --c-roxo:#D9C4F5E0;     --c-roxo-0:#D9C4F500;
  --c-ciano:#8CCDEBE0;    --c-ciano-0:#8CCDEB00;
  --c-magenta:#FDF6FBB8;  --c-magenta-0:#FDF6FB00;
  --c-indigo:#B1C2F1E6;   --c-indigo-0:#B1C2F100;

  /* A mesma malha do pé da seção do fluxo, porém mais leve — cerca de metade
     do alfa — e virada de cabeça para baixo, para o topo. Não é um espelho:
     as posições horizontais e a ordem dos hues mudam, senão as duas seções
     leriam como a mesma imagem repetida. */
  --h-roxo:#D9C4F55C;     --h-roxo-0:#D9C4F500;
  --h-ciano:#8CCDEB70;    --h-ciano-0:#8CCDEB00;
  --h-magenta:#FDF6FB47;  --h-magenta-0:#FDF6FB00;
  --h-indigo:#B1C2F175;   --h-indigo-0:#B1C2F100;
  /* OS TRÊS PASTÉIS DA RAMPA do herói, em alfa próprio. São os mesmos hues da
     lavagem, mais firmes: a lavagem é um véu sobre a folha, a rampa é uma
     faixa de cor que se vê.

     Os alfas são o teto medido, não gosto. Somados no pico — que é onde as
     três se sobrepõem, na borda de cima — eles compõem #BFCCF3, e ali o
     subtítulo em grey-600 vale 4,59:1 contra o piso de 4,5. Um degrau acima
     (0,62 / 0,52 / 0,52) compõe #BCC9F3 e o subtítulo cai para 4,47: reprova
     por três centésimos. É por isso que a rampa para exatamente aqui. */
  --rampa-indigo:#B1C2F18C;  --rampa-indigo-0:#B1C2F100;
  --rampa-roxo:#D9C4F573;    --rampa-roxo-0:#D9C4F500;
  --rampa-ciano:#8CCDEB73;   --rampa-ciano-0:#8CCDEB00;

  /* Grão: um feTurbulence de 160×160 em data URI, repetido. Cerca de 400
     bytes, nenhuma requisição, e é o que dá ao vidro alguma coisa para
     desfocar — desfoque sobre gradiente liso não se vê.

     NÃO ENTRA COMO CAMADA NORMAL. Medido, empilhado por cima ele compunha
     #F3F3F3 sobre branco puro: cinza neutro, 10% da luz comida, e o azul da
     folha morto junto. Entra por background-blend-mode, e a mistura exige
     um background-color OPACO na mesma regra: ela acontece dentro da pilha
     de fundo do próprio elemento, e nas áreas chapadas o que está embaixo
     do grão é transparente — misturar com transparente é pintar cru. O
     branco da página atrás do elemento NÃO serve de base.

     O que está no ar é MULTIPLY a .18, escolhido em 16/09 depois de quatro
     comparações lado a lado. Multiply não preserva branco (branco × x = x),
     então cobra na folha, e a densidade é o botão que regula esse preço.
     Medido sobre branco puro e sobre um bloom de ciano:

       multiply   .34   #F3F3F3  10,0%  |  morde 33,2%
       multiply   .22   #F8F8F8   6,5%  |
       multiply   .18   ~#F9F9F9 ~5,5%  |  ~29%           <- no ar
       multiply   .17   #F9F9F9   5,0%  |  morde 29,5%
       multiply   .12   #FBFBFB   3,6%  |  morde 28,6%
       soft-light .34   #FFFFFF   0,0%  |  morde 24,9%    <- custo zero, se precisar */
  /* GRAO DESLIGADO em 18/09/2026, a pedido, na pagina inteira. Um token,
     seis usos: desligar aqui apaga os seis de uma vez e mantem as listas de
     background-image e background-blend-mode alinhadas, porque `none` conta
     como camada. Para reacender, e so devolver a url abaixo.
     A textura era: feTurbulence fractalNoise .85, 3 oitavas, dessaturada,
     a opacity .18, entrando por multiply (Regra do Grao). */
  --grao:none;
  --grao-desligado:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.18'/%3E%3C/svg%3E");
}

/* ============================================================================
   CAMADA 2 — SEMÂNTICO
   Um modo só, o da folha. O campo commitado (.is--field, azul em força total)
   saiu em 16/09 junto com o Livro-Razão: no mundo da vitrine não existe faixa
   chapada. Os papéis ficam, porque são o que os componentes leem.
   ============================================================================ */
:root{
  --surface-1:var(--folha);
  --text-1:var(--grey-900);
  --text-2:var(--grey-600);
  --text-3:var(--grey-500);
  --rule-1:var(--grey-200);
  --rule-2:var(--grey-100);
  --interactive:var(--azul-600);
  --pulse:var(--azul-500);
  --debito:var(--vermelho-700);
  --credito:var(--turquesa-700);

  /* A varredura única. Sai do grafite da marca e só no fim admite o azul e um
     resto de violeta. Todas as paradas são escuras, então o piso de contraste
     é o da parada mais clara, o roxo-700, em 6,7:1 sobre a folha. Vai na
     manchete do herói, na do fluxo e nas aberturas de seção — e em mais nada. */
  --grad-hero:linear-gradient(102deg,
    var(--grey-900) 0%, var(--azul-950) 44%, var(--roxo-700) 100%);
  /* A mesma varredura virada para o escuro: o mesmo ângulo da --grad-hero,
     com as paradas subidas de degrau até clarearem sobre o escuro. Existe
     porque a --grad-hero some no escuro, não para ser uma segunda voz.

     SEM ROXO desde 18/09/2026, a pedido. A terceira parada era o roxo_400
     (#B88EFF); agora a varredura fecha no próprio --azul-100 e a rampa inteira
     é branco -> azul. Duas paradas e não três porque a do meio era justamente
     o --azul-100: mantê-la viraria uma parada repetida.

     Isto muda TAMBÉM a manchete de #seguranca, que vive hoje em arquivo.html
     e é a única outra usuária do token. É de propósito: um gradiente só para
     fundo escuro na página toda continua sendo uma voz só. */
  --grad-caixa:linear-gradient(102deg,
    #FFFFFF 0%, var(--azul-100) 100%);
  --grad-hero-solid:var(--grey-900);

  /* Lavagem padrão da folha; cada seção troca só os dois hues. */
  --w-1:var(--w-azul);   --w-1-0:var(--w-azul-0);
  --w-2:var(--w-indigo); --w-2-0:var(--w-indigo-0);
  --wash:
    radial-gradient(1240px 600px at 2% -16%, var(--w-1), var(--w-1-0) 66%),
    radial-gradient(1040px 540px at 99% 8%,  var(--w-2), var(--w-2-0) 62%);
}

/* ---- tokens não-cromáticos ---- */
:root{
  --font-title:'Manrope','Segoe UI',system-ui,sans-serif;
  --font-body:'Manrope','Segoe UI',system-ui,sans-serif;

  /* Display baixou de 88 para 54: a régua de tipos de arquivo e a faixa de
     logos precisam caber na primeira dobra num notebook de 1366×768. */
  /* 82px no topo, a pedido em 18/09. O termo em vw subiu junto (4,2 -> 5,7)
     para que os 82 sejam alcancados perto de 1440; so mexer no teto
     deixaria a manchete presa em 60px, que e o que 4,2vw devolve ali. */
  --fs-display:clamp(32px,5.7vw,72px);  --lh-display:1.14;  --ls-display:-.028em;
  /* Igualado a manchete da IA Financeira (.fluxo h2), que e a maior da
     pagina e virou a referencia: mesma curva, mesmo teto de 60. So o
     TAMANHO vem de la — o nowrap e o max-width:none de la existem
     porque aquela frase e de linha unica, e aqui quebrariam o resto.
     O token e lido so pelo .hist h2, entao isto e exatamente "as
     manchetes de secao". */
  --fs-headline:clamp(26px,calc(6vw - 3px),60px); --lh-headline:1.08; --ls-headline:-.03em;
  --fs-title:20px;                      --lh-title:1.25;
  --fs-body:16px;                       --lh-body:1.6;
  --fs-ui:15px;                         --lh-ui:1.2;
  --fs-micro:13px;
  --fs-conta:12px;
  --fs-numeric:clamp(30px,4vw,44px);
  --fs-numeric-sm:22px;

  --gap-text:8px; --gap-element:16px; --gap-group:24px;
  --gap-block:40px; --pad-entry:clamp(56px,7vw,104px);

  --r-field:6px; --r-pill:999px;

  --sheet:1240px;
  --gutter:24px;

  /* Altura do cabeçalho no estado do topo: 16 + 36 (marca e botão empatam
     como item mais alto do trilho) + 16. O herói a soma ao próprio recuo de
     topo, porque o cabeçalho paira sobre ele em vez de ocupar faixa
     própria. */
  --h-cabecalho:68px;

  --ease:cubic-bezier(.65,0,.35,1);
  --rola:700ms; --rola-curva:cubic-bezier(.72,0,.24,1);  /* o rolo da palavra da manchete */
}

/* ============================================================================
   CAMADA 3 — COMPONENTE
   ============================================================================ */
:root{
  /* O botão primário é invariante a modo na folha: é a única ação de conversão
     e precisa ser sempre o mesmo azul. Dentro do campo ele inverte, porque
     azul sobre azul não existe. */
  /* Chapado. O gradiente no botão disputava atenção com a varredura dos
     títulos; a ação de conversão precisa ser a coisa mais firme da página. */
  --btn-primary-bg:var(--azul-950);
  --btn-primary-bg-hover:var(--azul-900);
  --btn-primary-fg:var(--white);
  --btn-ghost-fg:var(--text-1);
  --btn-ghost-border:var(--grey-200);
  --input-rule:var(--rule-1);
  --input-rule-focus:var(--interactive);
  --focus-ring:var(--pulse);
  /* Divisória DENTRO de um painel de vidro: um véu, não um cinza chapado, para
     acompanhar o que estiver atrás. Cinza-200 sobre vidro sobre lavagem lia
     como risco sujo. */
  --regua-vidro:rgba(17,19,34,.07);

  /* Vidro fosco. Duas densidades: a lamela (58%) para o cabeçalho do cartão,
     a forte (75%) para superfície que carrega texto e para o cabeçalho
     flutuante. A forte não é capricho — com 58% de branco, o #5D6B98 dos
     horários e dos passos cai para 4,3:1 sobre o ponto mais saturado do
     campo colorido. Com 75% passa o piso. */
  --vidro-desfoque:blur(18px) saturate(1.7);
  --vidro-forte:rgba(255,255,255,.75);
  --vidro-lamela:rgba(255,255,255,.58);
  --fantasma-veu:rgba(34,98,227,.06);  /* azul-600 a 6%: um sopro de cor sobre o cinza do fantasma, não uma lente */
  /* A aresta por box-shadow inset, não por border — técnica trazida do
     cabeçalho importado. Três ganhos concretos: não entra no box-sizing,
     então trocar a espessura não mexe na caixa; não deixa costura subpixel
     no raio, que num raio grande é a diferença entre limpo e serrilhado; e
     não pode ser recortada por overflow do próprio elemento.

     Adaptada ao modo claro, e a adaptação inverte o sinal. No original a
     página é escura e o fio é MAIS CLARO que a superfície (#28282c sobre
     #232325): luz pegando na quina. Aqui a superfície já é quase branca —
     um fio mais claro não desenharia forma nenhuma contra um fundo claro.
     Então são duas camadas: um fio escuro de alfa baixíssimo que define o
     contorno, e o realce branco só no topo, onde a luz bateria.

     Os alfas são DELIBERADAMENTE mais fortes que os do original, e vale
     registrar o número para ninguém "corrigir" isso depois. A aresta do
     heroui mede 1,144:1 contra a própria superfície. Estes dão 1,198 no
     contorno e 1,218 no realce. Cheguei a calibrar para 1,13 e a escolha
     foi voltar: sobre fundo claro o fio quase imperceptuível do original
     não segura a forma, e o realce branco — que o original nem tem — é o
     que dá leitura de vidro aqui. */
  --vidro-aresta:
    inset 0 0 0 1px rgba(17,19,34,.09),
    inset 0 1px 0 rgba(255,255,255,.78);

  /* Profundidade em três alturas, no azul-600 da marca. A primeira versão
     usava azul-950, que a 18% já lê como preto e pesava demais; este tom é
     inequivocamente azul e as opacidades caíram para cerca de dois terços.
     Todas têm deslocamento vertical — halo de offset zero é brilho fingindo
     ser sombra. O contato de 1px assenta a peça; o resto é ambiente. */
  --sombra-peca:
    0 1px 2px rgba(34,98,227,.05),
    0 8px 20px -8px rgba(34,98,227,.09),
    0 28px 56px -22px rgba(34,98,227,.13);
  /* Brilho interno no lugar do contorno. Vai num pseudo-elemento por cima das
     lamelas, porque .chat e .app tem overflow:hidden e um inset aplicado neles
     ficaria escondido atras dos proprios filhos. Tres camadas: o fio de 1px
     que define a aresta, a luz no alto onde bateria a fonte, e o halo largo
     que faz a borda parecer espessura de vidro. */
  --brilho-interno:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 1px 1px rgba(255,255,255,.8),
    inset 0 0 32px rgba(255,255,255,.3);
  /* A luz do arco da seção do fluxo, em sete densidades. São exatamente o
     que buildGlowVars('220 85 58', 1.4) devolve — o azul-pulso da casa
     passado pela mesma função do BorderGlow. Intensidade 1,4 e não 2 (a do
     console) porque aqui é um gesto que passa, não um estado de hover. */
  --luz-aro:hsl(220deg 85% 58% / 100%);
  --luz-aro-60:hsl(220deg 85% 58% / 84%);
  --luz-aro-50:hsl(220deg 85% 58% / 70%);
  --luz-aro-40:hsl(220deg 85% 58% / 56%);
  --luz-aro-30:hsl(220deg 85% 58% / 42%);
  --luz-aro-20:hsl(220deg 85% 58% / 28%);
  --luz-aro-10:hsl(220deg 85% 58% / 14%);
  --aro-halo:64px;   /* o quanto a luz do arco sai para fora da tela */

  --brilho-interno-on:
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 0 38px rgba(255,255,255,.4);
}
/* ============================================================================
   CAMADA 4 — UTILITÁRIO
   ============================================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--surface-1);color:var(--text-1);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  scrollbar-color:var(--grey-200) transparent;scrollbar-width:thin;
  accent-color:var(--azul-600);
}
h1,h2,h3{font-family:var(--font-title);margin:0;font-weight:600;letter-spacing:var(--ls-headline);text-wrap:balance}
p{margin:0}
::selection{background:var(--azul-100);color:var(--grey-900)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--grey-200);border:3px solid var(--folha)}
a{color:var(--interactive);text-underline-offset:3px}
input,select{caret-color:var(--azul-600)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.num{font-variant-numeric:tabular-nums}

/* ---- as seções ----
   A mesma receita do herói e do fluxo: folha opaca como base, o grão por
   mistura e a lavagem por cima. Sem linha entre seções — os blocos validados
   não têm, e a costura é a própria lavagem esmaecendo. */
.entry{
  background-color:var(--folha);
  background-image:var(--grao),var(--wash);
  background-repeat:repeat,no-repeat,no-repeat;
  background-blend-mode:multiply,normal,normal;
  color:var(--text-1);
}
/* O cabeçalho paira; sem isto um link de âncora aterrissa com o topo da seção
   escondido atrás da pílula. Não pinta nada: só muda onde a rolagem para. */
section[id]{scroll-margin-top:116px}

/* Cada seção troca só os dois hues da lavagem — a forma dos blooms é a mesma
   em todas, para a página ler como um campo só e não como seis faixas. */
.tint--integra  {--w-1:var(--w-ciano);   --w-1-0:var(--w-ciano-0);   --w-2:var(--w-azul);     --w-2-0:var(--w-azul-0)}
.tint--eco      {--w-1:var(--w-indigo);  --w-1-0:var(--w-indigo-0);  --w-2:var(--w-roxo);     --w-2-0:var(--w-roxo-0)}
.tint--origem   {--w-1:var(--w-ciano);   --w-1-0:var(--w-ciano-0);   --w-2:var(--w-indigo);   --w-2-0:var(--w-indigo-0)}
.tint--seguranca{--w-1:var(--w-roxo);    --w-1-0:var(--w-roxo-0);    --w-2:var(--w-azul);     --w-2-0:var(--w-azul-0)}
.tint--fecho    {--w-1:var(--w-turquesa);--w-1-0:var(--w-turquesa-0);--w-2:var(--w-azul);     --w-2-0:var(--w-azul-0)}

/* ---- a abertura de seção ----
   Centralizada como a do fluxo, com a mesma varredura. O gradiente vai na
   própria manchete (é uma folha só, não há janela recortando dentro dela) e
   carrega a folga do descendente pela regra compartilhada mais abaixo. */
.entry-in{max-width:var(--sheet);margin:0 auto;padding:var(--pad-entry) var(--gutter);text-align:center}
.hist h2{
  font-size:var(--fs-headline);line-height:var(--lh-headline);font-weight:700;
  max-width:22ch;margin-inline:auto;
  background-image:var(--grad-hero);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .hist h2{background-image:none;color:var(--grad-hero-solid);-webkit-text-fill-color:currentColor}
}
@media print{.hist h2{background-image:none;color:var(--grad-hero-solid);-webkit-text-fill-color:currentColor}}
/* Manchete em duas alturas, o mesmo gesto do herói: a primeira linha no 700
   que a .hist h2 já tem, a segunda em 400. É aí que mora o peso, e não num
   <b> — a manchete inteira já é negrito, então negritar dentro dela não
   diria nada. O contraste é com o 400, como em .hero h1 .linha2. */
.hist h2 .linha2{display:block;font-weight:400}
/* A manchete da Origem quer DUAS linhas, uma por sentenca, e o 22ch geral
   da .hist h2 a quebrava em tres. O 28ch daqui resolve isso.

   ATENCAO, a conta mudou quando a manchete foi igualada a da IA Financeira:
   no tamanho cheio de 60px a segunda linha pede 1087px, e quem limita deixou
   de ser este max-width (28ch da ~1190) e passou a ser a propria coluna, que
   vale 1192 no --sheet. A folga virou 105px, e some junto com a coluna: em
   1150 sobram 5px e abaixo de ~1100 a linha quebra em duas.

   Ou seja: duas linhas so valem acima de ~1150px. Abaixo disso sao tres, e
   nao ha ajuste de largura que resolva — a frase inteira nao cabe naquela
   coluna naquele corpo. Resolver pediria corpo menor so nesta secao, o que
   desfaria o igualamento. */
#origem .hist h2{
  max-width:28ch;
  /* Invertido a pedido: a primeira linha leve, a segunda firme. A frase e
     "o dado muda na origem / todo o resto atualiza no mesmo instante" — o
     peso agora cai na consequencia, nao na premissa. */
  font-weight:400;
}
#origem .hist h2 .linha2{font-weight:700}
.hist .sub{margin:var(--gap-element) auto 0;max-width:64ch;font-size:var(--fs-body);line-height:1.6;color:var(--grey-600)}
.hist .sub b{color:var(--grey-900);font-weight:600}
.entry-cta{margin-top:var(--gap-group)}

/* ---- o painel de vidro ----
   A casca das peças de seção, com a receita do cartão do chat: vidro forte,
   aresta de luz num pseudo-elemento e a sombra azulada. Uma lamela só, porque
   não há cabeçalho. O conteúdo volta a alinhar à esquerda dentro dele — texto
   corrido centralizado é ruim de ler, e tabela centralizada não existe. */
.painel{
  position:relative;text-align:left;
  margin:var(--gap-block) auto 0;
  padding:clamp(22px,3vw,36px);
  border-radius:16px;
  background:var(--vidro-forte);
  -webkit-backdrop-filter:var(--vidro-desfoque);backdrop-filter:var(--vidro-desfoque);
  box-shadow:var(--sombra-peca);
  transform:translateZ(0);backface-visibility:hidden;will-change:backdrop-filter;
}
.painel::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;box-shadow:var(--brilho-interno);
}
.painel > *{position:relative;z-index:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .painel{background:rgba(255,255,255,.95)}
}
.painel--prop{max-width:1000px}
.painel--prods{max-width:1120px;padding:clamp(6px,1vw,12px) clamp(14px,2vw,24px)}
.painel--form{max-width:760px}

.nota{margin-top:var(--gap-element);font-size:var(--fs-micro);color:var(--text-3);max-width:56ch}

.t-numeric{font-weight:600;font-size:var(--fs-numeric);letter-spacing:-.03em}

/* ---- botões ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:var(--gap-group);
  min-height:54px;padding:0 22px;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-ui);line-height:1.2;
  border:1px solid transparent;
  /* PILULA, como o botao do heroi (20/09). O `--r-field` de 6px continua nos
     campos de formulario, que e de onde ele veio; botao passa a ser redondo
     em toda a pagina. */
  border-radius:var(--r-pill);
  cursor:pointer;text-decoration:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.btn--primary:hover{background:var(--btn-primary-bg-hover)}
.btn--ghost{background:transparent;color:var(--btn-ghost-fg);border-color:var(--btn-ghost-border)}
.btn--ghost:hover{border-color:var(--grey-500)}
.btn--sm{min-height:40px;padding:0 16px;gap:var(--gap-element);font-size:var(--fs-micro)}
.btn--block{width:100%}
.btn:disabled{background:var(--rule-1);color:var(--text-3);cursor:not-allowed}
.btn-icn{flex:none;display:grid;place-items:center;transition:transform .15s ease}
.btn:hover .btn-icn{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.btn-icn,.btn:hover .btn-icn{transition:none;transform:none}}

/* ---- barra ---- */
/* ============================================================================
   CABEÇALHO FLUTUANTE
   ----------------------------------------------------------------------------
   Geometria e mecanismo importados de heroui-header, verbatim. Marca, conteúdo
   e vidro são nossos.

     estado      max-w    recuo interno          alt. trilho
     topo        1024px   0                      48px
     flutuante    960px   12px 12px 12px 24px    72px

   O import travava a linha em 32px. Solta, ela assume o item mais alto: era
   o botão (36) e passou a ser a marca no tamanho nativo do arquivo (48).

   O flutuante era 768px no original; 960 é pedido nosso. Efeito colateral a
   registrar: com o topo em 1024, o recolhimento passou de 256px para 64px e
   quase não se percebe. Se quiser o gesto de volta, o caminho é abrir o topo
   — 1240px alinharia com --sheet, a coluna de conteúdo da página.

   O vidro é o da casa: --vidro-desfoque (18px + saturação 1,7) e a aresta
   inset. A saturação importa aqui mais que em qualquer outro lugar — o
   cabeçalho passa por cima da malha colorida do topo, da faixa azul commitada
   da 2.2 e da folha clara, e sem ela a cor de tudo isso lava ao atravessar.

   A densidade é --vidro-forte (75%), não a leve. Motivo medido: sobre o azul
   commitado, os links em grey-600 dão 3,85:1 com 58% de branco. Com 75%
   sobem para 5,0:1. É o pior fundo que o cabeçalho encontra na página.
   ============================================================================ */
.site-header{
  position:sticky;top:0;z-index:60;
  display:flex;width:100%;justify-content:center;
  padding:16px 24px;
  /* O cabeçalho paira sobre o herói em vez de ocupar uma faixa própria acima
     dele: sem isso a malha do topo só começa depois de 68px de folha lisa, e
     a página abre com uma tarja pálida. O herói devolve os 68px no recuo. */
  margin-bottom:calc(-1 * var(--h-cabecalho));
}
@media(max-width:767px){.site-header{padding-inline:16px}}

.header-rail{
  display:flex;width:100%;max-width:1024px;
  align-items:center;justify-content:space-between;
  padding:0;border-radius:0;
  background-color:rgba(255,255,255,0);
  box-shadow:inset 0 0 0 0 transparent;
  -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
  /* Lista explícita no lugar do `all` do original: `all` animaria também
     qualquer propriedade que venha a ser adicionada aqui depois. */
  transition:
    max-width 300ms cubic-bezier(.4,0,.2,1),
    padding 300ms cubic-bezier(.4,0,.2,1),
    border-radius 300ms cubic-bezier(.4,0,.2,1),
    background-color 300ms cubic-bezier(.4,0,.2,1),
    box-shadow 300ms cubic-bezier(.4,0,.2,1),
    backdrop-filter 300ms cubic-bezier(.4,0,.2,1);
}
.header-rail[data-scrolled="true"]{
  max-width:960px;
  /* 12 nos quatro cantos relevantes: com a linha solta, o botão não
     invade mais o recuo, então o vão declarado é o vão real. */
  padding:12px 12px 12px 24px;
  border-radius:9999px;
  background-color:var(--vidro-forte);
  box-shadow:var(--vidro-aresta);
  -webkit-backdrop-filter:var(--vidro-desfoque);backdrop-filter:var(--vidro-desfoque);
  /* camada própria: o cabeçalho paira sobre seções que repintam */
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:backdrop-filter;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header-rail[data-scrolled="true"]{background-color:rgba(255,255,255,.95)}
}
@media (prefers-reduced-motion:reduce){.header-rail{transition:none}}

/* A marca é o lockup 10X em SVG, 1429,57×253,03 — 5,65:1, quase o dobro da
   proporção do PNG antigo (3,3:1). Nos 48px de altura herdados dele o lockup
   media 271px de largura e dominava o trilho; a 36px dá 203px e empata em
   altura com o botão, que passa a dividir com ele o posto de item mais alto.
   A largura segue a proporção, para nunca deformar. */
.brand{display:flex;flex-shrink:0;align-items:center;text-decoration:none}
.brand img{display:block;height:36px;width:auto}
/* No telefone os 203px do lockup dividem 343px de trilho com o botao. Cabe,
   mas encosta; em 30px sao 169 e a linha volta a respirar. A altura do
   cabecalho nao muda: o botao, de 36, continua sendo o item mais alto. */
@media(max-width:767px){.brand img{height:30px}}

/* Sem altura fixa. O original travava a linha em 32px e o botão de 36
   transbordava 2px para cada lado do recuo. Solta, a linha assume os 36 do
   botão e os vãos passam a ser o recuo declarado, sem desconto. */
.actions{display:flex;align-items:center;gap:20px}
.nav-link{
  font-size:14px;font-weight:500;line-height:20px;text-decoration:none;
  color:var(--grey-600);transition:color .15s ease;
}
.nav-link:hover{color:var(--grey-900)}
@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}
.short{display:none}
@media(max-width:940px){
  .nav-link{display:none}
  .full{display:none}
  .short{display:inline}
}

.header-cta{
  position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding-inline:16px;border:0;border-radius:var(--r-pill);
  background-color:var(--btn-primary-bg);color:var(--btn-primary-fg);
  font-family:var(--font-body);font-size:14px;font-weight:600;line-height:20px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .25s ease,background-color .1s cubic-bezier(0,0,.2,1);
}
.header-cta:hover{background-color:var(--btn-primary-bg-hover)}
.header-cta:active{transform:scale(.97)}
.header-cta:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.header-cta{transition:none}}

/* ---- hero ----
   Centralizado, manchete em dois pesos da mesma cor, uma única ação. */
.hero{
  /* A luz do console sai 80px para cada lado (glowRadius do BorderGlow), e o
     console ocupa a largura útil: abaixo de ~928px de viewport isso passa da
     folha e cria rolagem horizontal. Mesmo remédio da .fluxo — `clip`, não
     `hidden`, para não virar contexto de rolagem. */
  overflow-x:clip;
  /* O recuo de topo carrega a altura do cabeçalho, que agora paira por cima.
     O espaço visível entre trilho e manchete fica igual ao de antes; o que
     muda é que a caixa do herói — e portanto a malha — começa em y=0. */
  padding:calc(var(--h-cabecalho) + clamp(44px,5vw,80px)) 0 clamp(52px,6vw,92px);
  /* A base opaca que a mistura do grão exige. Visualmente não muda nada —
     é a mesma cor que já vinha do corpo. */
  background-color:var(--folha);
  /* A RAMPA. Substituiu a aurora em 18/09, e a forma vem do gradiente do
     herói do ai-saas: em vez das seis bolhas espalhadas que havia aqui, são
     quatro elipses MUITO largas, todas centradas em 50%, empilhadas acima da
     borda de cima e morrendo antes da metade da caixa. O que isso compra é
     uma faixa horizontal limpa no topo em vez de um campo malhado — a cor
     vira uma só massa, e a manchete assenta sobre ela sem competir com
     bolha nenhuma.

     A PALETA É DA CASA, e é o que diferencia isto do original. Lá a rampa
     vai ao quase preto e a manchete vira branca; aqui ela para nos hues de
     lavagem do herói, que já eram estes quatro, porque a Regra da Folha
     Branca continua valendo e o texto continua escuro. O tom mais firme fica
     na borda de cima e cada degrau abaixo é mais lavado, que é a ordem do
     SVG de origem.

     O ciano entra com mais alfa que os outros (0x70 contra 0x5C) porque é o
     hue mais claro dos quatro: na mesma opacidade ele sumia contra a folha e
     a rampa perdia o degrau do meio. */
  position:relative;
  background-image:
    radial-gradient(1500px 320px at 50%  -2%, var(--rampa-indigo), var(--rampa-indigo-0) 72%),
    radial-gradient(1400px 300px at 50%   5%, var(--rampa-roxo),   var(--rampa-roxo-0) 74%),
    radial-gradient(1700px 340px at 50% -11%, var(--rampa-ciano),  var(--rampa-ciano-0) 70%);
  background-repeat:no-repeat,no-repeat,no-repeat;
}

/* ---- a tinta do herói (FluidCursor, do ai-saas) ----
   A tela do fluido sobre a rampa, em multiply. O shader de saída da
   simulação inverte o campo, então o repouso dela é BRANCO — e branco
   multiplicado não faz nada, some. Só o rastro do ponteiro escurece o que
   está atrás. É o arranjo inteiro do efeito: sem o multiply, esta tela
   cobriria o herói de branco.

   z-index 1 é o mesmo do grão e do esmaecimento, e a ordem entre os três sai
   da ÁRVORE, não do número: ::before (grão) pinta antes dos filhos, o canvas
   é filho, ::after (esmaecimento) pinta depois de todos. A fumaça fica no
   meio — clareia a rampa JÁ com o grão aplicado, e o esmaecimento do pé a
   dissolve junto com o resto do herói, em vez de deixá-la vazar para a
   seção seguinte.

   O desfoque não é enfeite: a simulação roda a 1/4 da resolução da caixa, e
   sem ele o rastro lê como escada de pixel. */
.hero-tinta{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  pointer-events:none;
  /* OS VALORES SÃO DO BRUNO, achados no painel temporário em 18/09:
     multiply, tinta #F5F6FF, densidade 1,20, opacidade 0,50, desfoque 15px.

     A combinação faz sentido junta e não separada: a tinta é quase branca,
     então cada splat escurece pouquíssimo; a densidade alta compensa e o
     rastro ganha corpo sem virar mancha; a opacidade em metade corta o pico;
     e 15px de desfoque, quase o dobro dos 8 do original, tiram a borda do
     rastro de vez — a simulação roda a 1/4 da resolução e, com a tinta tão
     clara, é o desfoque que faz o gesto parecer vapor em vez de nuvem.

     CONTRASTE, medido, com a regra dispensada pelo Bruno:
     - rastro comum: manchete 3,94:1 e subtítulo 4,44:1. O subtítulo passa
       raspando por baixo do piso de 4,5; a manchete tem folga sobre o dela.
     - pior caso, com o ponteiro parado no mesmo ponto até a tinta saturar em
       preto: 1,14:1 e 1,29:1. A saturação é alcançável em cerca de um
       segundo de ponteiro parado, e enquanto durar o texto ali some.
     Quem for publicar precisa resolver o segundo caso — ou escurecendo a
     rampa e embranquecendo o texto, ou limitando a acumulação no shader. */
  mix-blend-mode:multiply;
  opacity:.5;
  filter:blur(15px);
}

/* O esmaecimento e CAMADA, e nao camada de background do heroi. Veio assim
   da epoca da aurora, que punha um canvas opaco entre o fundo e o conteudo,
   e continua fora porque a fumaca e um canvas no meio da pilha: o
   esmaecimento precisa apagar a fumaca tambem, nao so a rampa. */
/* O GRÃO SAIU DO HERÓI em 18/09, a pedido. Ele continua nas seções .entry,
   onde a lavagem é um véu e a textura dá matéria ao branco; aqui a rampa é
   uma faixa de cor limpa, e o grão por cima dela só fazia sujeira — e comia
   parte da fumaça, que passa a ser a única coisa com matéria no fundo.
   Ficou só o ::after, o esmaecimento do pé. */
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
/* O esmaecimento cobre o HEROI inteiro e so comeca a 62% dele. Com a rampa
   morrendo antes da metade da caixa, os dois nunca se encontram — ele so
   trabalha onde ja nao ha cor.

   Derrete a rampa na folha da pagina, e derrete a fumaca junto: sendo a
   camada de cima das tres, e ele que impede o rastro de vazar para a faixa
   dos clientes e para a secao seguinte.

   O 62% e herdado da epoca da aurora e sobreviveu a ela de proposito: e o
   ponto em que o heroi ja nao tem cor nenhuma para lavar. Duas tentativas de
   amarra-lo a altura de outra coisa deram errado na epoca, e a geometria
   fixa resolve sozinha. */
.hero::after{background-image:linear-gradient(180deg, #FFFFFF00 62%, var(--folha) 100%)}
.hero-in{position:relative;z-index:2}
.hero-in{max-width:var(--sheet);margin:0 auto;padding-inline:var(--gutter);text-align:center}
.hero h1{
  /* Dois pesos de verdade: 700 na primeira linha (o <b>) e 400 na segunda.
     O 400 só passou a ser carregado em 16/09 — até então a segunda linha
     renderizava em 600 por fallback do navegador, sem ninguém ter pedido. */
  font-family:var(--font-title);font-weight:400;
  font-size:var(--fs-display);letter-spacing:var(--ls-display);
  /* A entrelinha vem em PIXEL INTEIRO, calculada em JS. Com 1.14 sobre 54px
     ela dava 61,56 — e a fita, que anda de uma linha por vez, punha cada
     palavra num y fracionário. Texto fora da grade de pixels borra. */
  line-height:var(--linha, calc(var(--fs-display) * var(--lh-display)));
  /* Duas linhas, nada mais. A segunda — "integrados a uma única fonte de
     dados" — mede 1003px a 54px em Jakarta 700, e a coluna útil tem 1192. */
  max-width:min(100%,1060px);margin-inline:auto;
  /* SEM background-clip aqui. Era isto que quebrava o recorte da janela da
     fita: com clip-text num ancestral, o Chromium muda o caminho de pintura
     e o overflow:hidden de um elemento intermediário deixa de valer para os
     descendentes. A varredura mora nas folhas, na classe .g. */
  color:var(--grey-900);
}
.hero h1 b{display:block;font-weight:700}
.hero h1 .linha2{display:block}

/* A varredura de gradiente, aplicada folha a folha — obrigatório, porque
   clip-text num ancestral quebra o recorte da janela da fita. Para as
   folhas não reiniciarem a varredura cada uma, o JS dá a todas a MESMA
   escala (--g-larg, a largura da manchete) e desloca a origem de cada uma
   pelo próprio recuo (--g-x). O resultado é uma varredura só, atravessando
   trechos que tecnicamente são elementos separados. */
/* ---- a folga do descendente ----
   Medido na manchete a 54px: a fonte pede 68px de altura de conteúdo (56 de
   ascendente + 12 de descendente) e a entrelinha dá 62 — meia-entrelinha
   NEGATIVA de 3px de cada lado. O descendente do "g" cai 3px FORA da caixa,
   e com background-clip:text não existe fundo lá para pintá-lo: o "g" saia
   decepado. Vale para todo mundo que recorta fundo em texto com entrelinha
   apertada, não só para a manchete.

   A folga cresce SÓ a caixa de fundo: em elemento em linha o recuo vertical
   não mexe no layout, e em bloco a margem negativa devolve exatamente o que
   o recuo tomou. Nada se move. */
/* REMEDIDA em 18/09/2026, com a troca para Manrope. Os .09em eram da
   Plus Jakarta Sans. A Manrope tem caixa de fonte de 1,367em — a 60px sao
   82px de caixa contra 64,8 de entrelinha, entao sobram 17,2 no total e
   8,6 de cada lado, ou 0,143em. No heroi, a 54px, sao 0,111em. Os .09
   antigos cobriam nenhum dos dois e o "g" voltou a sair decepado.
   REAFERIDA no mesmo dia: 0,15em ainda nao bastava nas manchetes de
   entrelinha apertada. O pedido de cada caso e (1,367 - entrelinha)/2 em
   `em`, e o mais apertado da pagina e a manchete de recursos, com
   entrelinha 1,02 -> 0,1735em. 0,18em cobre a pagina inteira. */
/* PESO DAS MANCHETES DE SECAO: 500, em todas. A pagina tinha duas familias de
   manchete convivendo — 500 nas que vieram do Figma (agentes, seguranca) e 600
   nas da casa (ROI, Contact 8) —, e a diferenca lia como descuido, nao como
   hierarquia. 500 e o peso do arquivo de origem e o que o Bruno aprovou no
   cabecalho dos agentes. UNICA EXCECAO: o titulo do Levir AI, que fica em 72px
   e 600 porque mora em fundo escuro, onde o tipo pesa menos aos olhos.
   O h1 do heroi nao entra: display e outro papel da escala, nao manchete. */
.g,.hist h2,.fluxo h2,.prova-titulo{padding-block:.18em;margin-block:-.18em}
/* A manchete dos agentes precisa do mesmo par, mas com (0,2,0) pelo motivo
   explicado acima; e a margem vertical se soma a do vao, entao vai junto. */
.agcab .agcab-titulo{padding-block:.18em;margin-bottom:-.18em}
/* As manchetes das secoes IMPORTADAS tambem recortam fundo em texto, com a
   propria folha delas, e nunca tiveram folga: medida, a de recursos pede
   14,66px por lado e tem zero. O corte e anterior a troca de fonte — a
   secao ja era Manrope — mas aparece pelo mesmo motivo. Mesma cura. */
.importada h1,.importada h2,.importada h3{padding-block:.18em;margin-block:-.18em}
/* Dentro da fita, não — e não é desistência: lá a folga já está na ALTURA
   de cada palavra (ver .fita > span), que é onde ela precisa estar para o
   passo da rolagem continuar batendo com a caixa. Recuo aqui, com
   box-sizing:border-box, só comeria a altura de volta. */
.fita .g{padding-block:0;margin-block:0}

.g{
  background-size:var(--g-larg,100%) 100%;
  background-position:var(--g-x,0) 0;
  background-repeat:no-repeat;
  background-image:var(--grad-hero);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .g{background-image:none;color:var(--grad-hero-solid);-webkit-text-fill-color:currentColor}
}
@media print{
  .g{background-image:none;color:var(--grad-hero-solid);-webkit-text-fill-color:currentColor}
}

/* ---- a fita de palavras ----
   Padrão clássico de rotador vertical: uma janela de uma linha (mais a folga
   do descendente), e dentro dela uma fita com as doze palavras empilhadas
   mais a cópia da primeira — treze filhos, passo de 1/13, e a cópia é o que
   fecha o laço sem salto.

   NÃO tem animação própria: o passo vem da régua de produtos — uma palavra
   por produto, na mesma ordem — e as duas viram no mesmo instante. São
   transições, não keyframes: a altura e a largura andam com a mesma curva. */
.rot{
  display:inline-block;vertical-align:bottom;overflow:hidden;
  /* `contain:paint` alem do overflow. Nao e redundancia: as folhas .g pintam
     por background-clip:text e a fita anda por transform, e essa combinacao
     ja tirou o recorte do lugar duas vezes neste arquivo (ver o comentario
     do .hero h1). O overflow diz onde a caixa termina; a contencao garante
     que nenhum descendente pinte fora dela, em qualquer caminho de pintura. */
  contain:paint;
  /* A janela é uma linha MAIS a folga do descendente — o "p" de "planilhas"
     cai abaixo da caixa de linha, e uma janela de exatamente uma linha o
     decepava. A folga entra por baixo, onde o descendente vai.

     A margem negativa é o que impede isso de mexer no layout: com
     vertical-align:bottom quem se alinha à base da linha é a caixa de
     MARGEM. Tirando a folga dela, a caixa de borda passa a pender a folga
     abaixo da linha — exatamente onde o descendente precisa de espaço — e
     a linha do h1 continua medindo o mesmo. */
  height:calc(var(--linha, calc(var(--fs-display) * var(--lh-display))) + var(--folga, 0px));
  margin-bottom:calc(-1 * var(--folga, 0px));
  width:var(--w1,auto);
  transition:width var(--rola) var(--rola-curva);
}
.fita{
  display:block;
  transition:transform var(--rola) var(--rola-curva);
}
/* O salto invisível da cópia de volta ao topo. */
.rot.sem-rolo,.rot.sem-rolo .fita{transition:none}
/* Caixa maior que a linha: o texto assenta no ALTO da caixa (a caixa de
   linha é a primeira coisa dentro do bloco) e a folga sobra embaixo. O
   descendente cai nela em vez de invadir a caixa da palavra seguinte — e,
   de quebra, o clip-text volta a ter fundo onde pintar, sem precisar do
   recuo que as outras folhas .g usam. */
.fita > span{
  display:block;
  height:calc(var(--linha, calc(var(--fs-display) * var(--lh-display))) + var(--folga, 0px));
  line-height:var(--linha, calc(var(--fs-display) * var(--lh-display)));
}

/* Porcentagem, e não pixel: o passo é sempre 1/13 da fita, seja qual for a
   entrelinha do momento. Com a caixa de cada palavra em pixel inteiro
   (linha + folga), cada parada cai em cima da grade. */
@media (prefers-reduced-motion:reduce){
  .rot,.fita{transition:none}
}

.hero-sub{margin:var(--gap-element) auto 0;max-width:730px;font-size:var(--fs-body);line-height:1.6;color:var(--grey-600)}
.hero-cta{margin-top:clamp(26px,3vw,36px)}

/* ---- logos: agora depois do palco, fechando o topo ---- */
/* A sobrancelha "JÁ CONFIAM NA LEVERPRO" saiu em 18/09. O recuo de topo que
   era dela passou para a esteira, senão a fila colava no palco. */
.logos{
  list-style:none;margin:0;padding:0;
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  /* Antes o vão era clamp(26,5vw,74), calibrado para seis palavras curtas.
     As sete marcas ocupam 7×120 = 840px na altura máxima; com o vão antigo
     a fila estouraria a folha e quebraria em duas antes da hora. */
  column-gap:clamp(22px,3.4vw,48px);row-gap:clamp(14px,1.6vw,22px);
}
/* A arte vem do marquee do site atual, que é branco puro sobre vídeo escuro.
   Aqui ela está reentintada em --grey-600 com pico de alfa em 75% — 3,81:1
   sobre a folha. A tela de 400×100 de origem já carrega o equilíbrio óptico
   entre as marcas, então todas correm na mesma altura e ninguém é recortado. */
.logos img{display:block;height:clamp(22px,2.2vw,30px);width:auto}

/* ---- a esteira (Social Proof 9, React Bits Pro) ----
   Do bloco vem a mecânica: a lista duplicada correndo em laço, a pausa no
   hover e o esmaecimento nas duas pontas. Ficou UMA fileira, e não as duas
   opostas do original — com sete marcas, a segunda seria a mesma lista
   andando para o outro lado.

   A TROCA QUE IMPORTA está no esmaecimento. O original pinta dois retângulos
   com gradiente da cor de fundo por cima das pontas (`from-white to-transparent`,
   um terço da largura cada). Isso só funciona onde o fundo é uma cor chapada
   conhecida — e aqui não é: a faixa mora dentro do herói, com a rampa
   morrendo por cima dela e a fumaça passando por baixo do conteúdo. Dois
   retângulos brancos ali apareceriam como duas barras. `mask-image` resolve
   sem supor cor nenhuma: recorta a opacidade da própria esteira, e o que
   estiver atrás continua aparecendo.

   (A proibição de máscara do DESIGN.md é para peça com backdrop-filter, onde
   ela faz o vidro piscar. Aqui não há filtro nenhum.) */
.logos-esteira{
  margin-top:clamp(40px,4.6vw,64px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
/* `will-change` porque a pista e transformada em TODO quadro pelo laco de
   rAF. Sem ele o navegador repinta a fila a cada passo em vez de mover uma
   camada ja pronta — e a esteira vive dentro de um `mask-image`, que por si
   so ja obriga a uma superficie a parte. */
.logos-pista{display:flex;align-items:center;column-gap:clamp(22px,3.4vw,48px);will-change:transform}
@media (prefers-reduced-motion:reduce){.logos-pista{will-change:auto}}
/* Em modo esteira a fila não quebra: ela corre. O `wrap` da versão parada
   continua valendo enquanto o script não monta — é o que segura a fila sem
   JS. */
.logos-esteira .logos{flex-wrap:nowrap;justify-content:flex-start;margin-top:0;flex:none}
.logos-esteira[data-andando="true"] .logos{width:max-content}
.logos-esteira .logos li{flex:none}
/* AS MARCAS FICAM PRETAS, SEM VÉU (22/09/2026).
   Havia aqui um `opacity:.55` de repouso, com a marca acendendo no hover. Saiu
   a pedido: as marcas de cliente são prova, e prova não se apaga.

   O véu do CSS era só metade do cinza. Medido pixel a pixel, os dez PNGs
   chegavam com a tinta em RGB 89,89,89 e o alfa travado em 145 ou 192 — nunca
   255. Somando as três camadas, a marca aparecia com ~26% de preto. Os
   arquivos foram reescritos por `ferramentas/enegrece-logos.mjs`: tinta a zero
   e alfa normalizado. Por isso aqui não sobrou nenhuma regra de opacidade — se
   um dia a faixa voltar a parecer cinza, o lugar de olhar é o arquivo, e o
   script mede com `--ver`. */
@media (prefers-reduced-motion:reduce){
  .logos-esteira .logos img{transition:none}
}

/* ---- a deriva das malhas, desligada ----
   `meshdrift` anima `background-position` de um degrade de cinco radiais com
   `background-size:180% 180%`. Animar posicao de fundo NAO vai para o
   compositor: cada quadro repinta a area inteira do elemento.

   MEDIDO nesta pagina: dez cartoes de agente com a classe, cada um de
   1440x579 — 8,3 MILHOES de pixels de degrade redesenhados a cada quadro,
   com dois ou tres deles a vista ao mesmo tempo por causa do empilhamento.
   Era, de longe, a coisa mais cara da pagina, e e o mesmo motivo pelo qual a
   deriva ja tinha saido da moldura do quadro dos cases.

   O QUE SE PERDE e um vaivem de 16s que a maioria nao registra; o degrade
   continua inteiro, parado. Para devolver, apague este bloco. */
.importada .mesh{animation:none}

/* ============================================================================
   O RODAPE   (.fo)   —   20/09/2026
   ----------------------------------------------------------------------------
   Substituiu o `.foot`, que era um bloco de tres colunas curtas. A FORMA vem
   do rodape do Kraft: fundo escuro, colunas de links, barra de base e a marca
   em marca-d'agua sangrando no pe. O CONTEUDO vem dos rodapes do Drivetrain e
   do Pigment, consolidado.

   PRIMEIRA COLUNA MAIS LARGA, e nao igual as outras: ela leva marca, um
   paragrafo e o contato, e em largura de coluna de lista o paragrafo viraria
   uma tira de seis linhas.

   A COLUNA DE CASOS DE USO TEM 33 ITENS. Isso e proposital e e o modelo do
   Pigment: rodape de produto complexo e tambem indice, e indice se le
   correndo o olho. Por isso ela quebra em duas sub-colunas acima de 1100px —
   uma tira de 33 linhas seria mais alta que a tela.

   A MARCA-D'AGUA e `overflow:hidden` no rodape mais um tamanho em `vw`: ela
   cresce com a folha, sangra nos dois lados e e cortada embaixo, que e o
   efeito da referencia. Nao e imagem; e a propria fonte da casa.
   ============================================================================ */
.fo{
  position:relative;overflow:hidden;
  background-color:#05070E;
  background-image:
    radial-gradient(120% 70% at 50% 118%, rgba(55,116,239,.42), rgba(55,116,239,0) 62%),
    radial-gradient(90% 60% at 82% 108%, rgba(128,81,225,.3), rgba(128,81,225,0) 66%);
  color:#FFFFFF;
}
.fo-in{
  position:relative;z-index:2;
  max-width:var(--sheet);margin:0 auto;
  padding:clamp(56px,6vw,96px) var(--gutter) clamp(28px,3vw,42px);
}

/* ---- a grade principal ---- */
.fo-grade{
  display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);
  gap:clamp(36px,4.4vw,72px);
}
.fo-logo{display:block;width:fit-content}
/* A MESMA ALTURA DO TOPO DA LANDING. Os 26px de antes eram medida de
   assinatura de rodape antigo; num rodape que ocupa a tela inteira, a
   marca precisa ter o peso da marca. */
.fo-logo img{display:block;height:clamp(34px,3.1vw,46px);width:auto}
.fo-desc{
  margin:clamp(18px,2vw,26px) 0 0;
  font-size:var(--fs-micro);line-height:1.6;
  color:rgba(255,255,255,.62);
}
.fo-contato{
  display:flex;align-items:center;flex-wrap:wrap;gap:16px;
  margin:clamp(20px,2.2vw,28px) 0 0;
}
.fo-contato > a{
  display:inline-flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.82);text-decoration:none;
  font-size:var(--fs-micro);
  transition:color .18s ease;
}
.fo-contato > a:hover{color:#FFFFFF}
.fo-contato svg{width:17px;height:17px;flex:none}
.fo-redes{display:inline-flex;gap:8px}
.fo-redes a{
  display:grid;place-items:center;
  width:34px;aspect-ratio:1;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);
  transition:background-color .18s ease,color .18s ease;
}
.fo-redes a:hover{background:rgba(255,255,255,.16);color:#FFFFFF}
.fo-redes svg{width:16px;height:16px}

/* ---- as colunas de links ---- */
.fo-cols{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,2.6vw,40px);
}
.fo-col-titulo{
  margin:0 0 clamp(14px,1.4vw,20px);
  font-family:var(--font-body);
  font-size:var(--fs-conta);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.44);
}
.fo-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.fo-col a{
  color:rgba(255,255,255,.76);text-decoration:none;
  font-size:var(--fs-micro);line-height:1.4;
  transition:color .16s ease;
}
.fo-col a:hover{color:#FFFFFF}
/* AS QUATRO COLUNAS SAO IGUAIS e o vao entre elas e largo. A versao anterior
   dava o dobro a coluna de casos, que tinha 33 itens e mesmo assim quebrava
   rotulo em duas linhas — a lista encolheu para 11 e o problema virou o
   oposto: sobrava folga em tres colunas e faltava nas outras.

   `white-space:nowrap` e a garantia: se um rotulo novo nao couber numa linha,
   ele estoura a coluna em vez de quebrar em silencio, e o erro aparece aqui em
   vez de aparecer publicado. */
@media(min-width:1100px){
  .fo-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,3.4vw,58px)}
  .fo-col a{white-space:nowrap}
}

/* ---- a faixa de selos ---- */
.fo-selos-faixa{
  margin-top:clamp(40px,4.6vw,68px);
  padding-top:clamp(24px,2.6vw,36px);
  border-top:1px solid rgba(255,255,255,.12);
}
.fo-selos{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;flex-wrap:wrap;
  /* O vao encolheu junto com o rotulo que saiu: oito itens numa linha so
     precisam de menos ar entre eles do que quatro em duas linhas. */
  gap:clamp(16px,2vw,30px);
}
/* A ISO FECHA A FILA, a direita dos premios e na mesma linha. O empurrao para
   a direita NAO e `margin-left:auto` no item: medido, a margem automatica
   fazia o navegador quebrar a linha mesmo com 99px de sobra. Quem separa os
   dois grupos e um vao elastico proprio, que encolhe a zero quando falta
   espaco e deixa a fila quebrar normalmente. */
.fo-vao{flex:1 1 0;min-width:0;list-style:none}
/* SEM PLACA. Houve uma volta com um retangulo branco atras de cada peca,
   porque o selo do ranking sumia no escuro: o PNG e transparente e a tinta
   das letras vinha PRETA, que e a versao para papel. A placa resolvia e
   estragava — vira botao, e o rodape ganha seis retangulos que ninguem pediu.

   A CORRECAO FOI NA ARTE, e nao no fundo. O arquivo do ranking passou por um
   remapeamento: todo pixel sem croma (a tinta preta das letras e do anel de
   texto) virou BRANCO, e todo pixel com croma (o circulo azul do 100 Open
   Startups) ficou onde estava. E a mesma peca, na versao para fundo escuro,
   que e como ela aparece na referencia. As outras cinco ja vinham assim.

   AS PECAS SAO DE FAMILIAS DIFERENTES e por isso nao tem a mesma altura: o
   selo de 2025 e um brasao alto, o da Exame e quadrado, o do Fintech e uma
   faixa larga e baixa. Altura igual para todos deixaria o Fintech gigante e
   a Exame minuscula. Cada um tem a altura em que LE, e o que os iguala e a
   mesma opacidade de repouso e o mesmo realce no ponteiro. */
/* UMA ALTURA SO (21/09). As pecas vinham em 48, 34 e 26px, cada uma pela
   medida em que "lia" — e o resultado era uma fileira de degraus. Com o
   rotulo "100 Open Startups" fora, cabe tudo numa linha, e numa linha a
   altura desigual vira defeito e nao hierarquia. 38px para as sete. */
.fo-premio img{display:block;height:38px;width:auto;opacity:.86;transition:opacity .2s ease}
.fo-premio:hover img{opacity:1}
/* O ANO AO LADO do selo, e nao embaixo: e assim que a peca aparece na
   referencia, e e o que deixa a fila com uma altura so. */
.fo-premio--ano{display:flex;align-items:center;gap:7px}
.fo-premio--ano span{
  font-size:var(--fs-conta);letter-spacing:.06em;
  color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;
}

/* O vao entre os quatro anos e menor do que o da fila: eles sao UM grupo. */
.fo-selos .fo-premio--ano + .fo-premio--ano{margin-left:calc(clamp(20px,2.6vw,40px) * -.45)}
.fo-selo{display:flex;align-items:center;gap:11px}
.fo-selo-ic{
  display:grid;place-items:center;flex:none;
  width:34px;aspect-ratio:1;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);
}
.fo-selo-ic svg{width:18px;height:18px}
.fo-selo-txt{display:grid;gap:2px}
.fo-selo-txt strong{font-size:var(--fs-micro);font-weight:600;color:rgba(255,255,255,.9)}
.fo-selo-txt span{font-size:var(--fs-conta);color:rgba(255,255,255,.5)}

/* ---- a barra de base ---- */
.fo-base{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
  margin-top:clamp(28px,3vw,44px);
  padding-top:clamp(20px,2.2vw,30px);
  border-top:1px solid rgba(255,255,255,.12);
}
.fo-copy{margin:0;font-size:var(--fs-conta);color:rgba(255,255,255,.46)}
.fo-legal{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:clamp(14px,1.8vw,26px);
}
.fo-legal a{
  color:rgba(255,255,255,.58);text-decoration:none;font-size:var(--fs-conta);
  transition:color .16s ease;
}
.fo-legal a:hover{color:#FFFFFF}

/* ---- a marca-d'agua ---- */
/* A MARCA D'AGUA COMECA NA BARRA LEGAL (21/09) e nao mais abaixo dela. O
   recuo negativo de cima e em `em` e nao em pixel: ele tem de crescer junto
   com a palavra, que mede 26vw. Em pixel, a palavra subia numa tela e descia
   em outra. */
.fo-agua{
  position:relative;z-index:1;
  /* -.754em veio de conta, nao de tentativa: medida a metrica real da fonte
     no canvas, a base das letras estava 121px abaixo do alvo, e 121px sobre
     os 266px do corpo dao .454em a somar aos .3em que ja havia. O recuo de
     baixo (.08em) e o ar que sobra sob a palavra: sem ele o `overflow` do
     rodape corta a base do R por tres pixels, porque a entrelinha de .74 e
     menor que a altura natural do tipo e a tinta passa da caixa. */
  margin:-.754em 0 .08em;
  font-family:var(--font-title);
  font-size:26vw;line-height:.74;font-weight:800;
  letter-spacing:-.045em;text-align:center;
  color:rgba(255,255,255,.055);
  user-select:none;pointer-events:none;
  /* Sangra nos dois lados; embaixo ela agora cabe inteira. O -.18em de antes
     cortava a base das letras no `overflow` do rodape, e isso fazia sentido
     quando ela nascia colada no fim da pagina. Subida ate a barra legal, ela
     fecha dentro do rodape e a palavra se le por completo. */
  white-space:nowrap;
}

@media(max-width:900px){
  .fo-grade{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,44px)}
  .fo-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .fo-cols{grid-template-columns:minmax(0,1fr)}
  .fo-agua{font-size:34vw}
}
@media (prefers-reduced-motion:reduce){
  .fo-col a,.fo-legal a,.fo-redes a,.fo-contato > a{transition:none}
}

/* ---- animacao so a vista ----
   A classe entra e sai pelo IntersectionObserver do script (ver a nota la).
   `!important` porque ela precisa vencer regra de componente importado, que
   e onde estao quase todos esses lacos — e o par `.x, .x *` porque a
   animacao mora nos descendentes, nao no bloco. */
.fora-de-cena,.fora-de-cena *{animation-play-state:paused!important}

/* O CABECALHO E A EXCECAO, e precisa ser.
   `header.nav` mora DENTRO de `#lp-hero`, mas quando ganha `.preso` ele vira
   `position:fixed` e continua na tela depois que o heroi saiu — e o heroi, ai,
   ja e `.fora-de-cena`. A regra de cima entao pausava animacao de um elemento
   que a pessoa esta vendo.

   O que isso quebrava: o painel do mega-menu abre com `lph-mm-entra`, 180ms de
   `opacity:0 -> 1`, e `animation-fill-mode` e `none`. Pausado no tempo zero,
   ele fica travado no quadro-chave inicial: `opacity:0`. Com a pagina rolada,
   clicar em "Plataforma", "Solucoes" ou "Recursos" marcava `aria-expanded=true`
   e abria o painel de verdade — 686x602, dentro da tela, respondendo ao
   `elementFromPoint` — so que invisivel. No topo da pagina funcionava, porque
   ali o heroi ainda esta em cena.

   O heroi continua pausado, que era o ponto da otimizacao: o que sai da pausa
   e so o cabecalho, que nao tem laco caro nenhum. Especificidade (0,2,0)
   contra (0,1,0) da regra de cima — os dois `!important` empatam e a mais
   especifica vence. */
.fora-de-cena .nav,.fora-de-cena .nav *{animation-play-state:running!important}

/* ---- o console ----
   A casca é o BorderGlow do React Bits (reactbits.dev), integrado como a
   biblioteca manda: o CSS do componente está VERBATIM logo abaixo, sob as
   classes originais, e a lógica do componente (props → custom properties,
   ponteiro, varredura) é uma função BorderGlow(el, props) no script da
   página, porte 1:1 do JSX. Os props usados são os do exemplo oficial —
   edgeSensitivity 46, glowRadius 80, glowIntensity 2, coneSpread 21,
   animated — com fundo, cores da malha (o fio único, --aro-*) e cor do
   brilho (azul-pulso em HSL) da casa. Por ser componente de terceiro mantido
   como veio, ele escapa a duas regras da casa: esmaece para `transparent`
   nos radiais e usa a sombra cinza da variante clara. Registrado no DESIGN.md.

   O que é nosso aqui: só a geometria de página (largura, margem, alinhamento)
   e o recuo do conteúdo, que no exemplo da biblioteca vai no filho. */
.console{margin:clamp(38px,4.4vw,62px) auto 0;max-width:768px;text-align:left}
.console-conteudo{padding:20px 20px 14px}
/* Antes do JS aplicar os props: fundo branco e borda da variante clara, para
   não piscar o cartão escuro do padrão do componente por um quadro. */
.console{--card-bg:#FFFFFF;border-color:rgb(24 24 27 / 12%)}

/* ==== BorderGlow.css — React Bits, verbatim ==== */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 28px;
  --glow-padding: 40px;
  --cone-spread: 25;

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg, #120F17);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

.border-glow-card--light {
  border-color: rgb(24 24 27 / 12%);
  box-shadow:
    rgb(24 24 27 / 4%) 0 1px 2px,
    rgb(24 24 27 / 5%) 0 8px 24px;
}

.border-glow-card--light::after,
.border-glow-card--light > .edge-light {
  mix-blend-mode: normal;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #120F17) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* colored mesh-gradient background fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;

  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
    inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
    0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
  z-index: 1;
}
/* ==== fim de BorderGlow.css ==== */
@media (prefers-reduced-motion:reduce){
  .border-glow-card::before,.border-glow-card::after,.border-glow-card > .edge-light{transition:none}
}

.console-line{
  font-size:var(--fs-body);line-height:1.5;color:var(--grey-600);
  min-height:3em;
}
.console-sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.console-bar{display:flex;align-items:center;gap:12px;margin-top:12px}
.console-add{
  width:26px;height:26px;display:grid;place-items:center;flex:none;
  font-size:17px;line-height:1;color:var(--grey-500);
}
.console-model{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--azul-950);color:var(--white);
  border-radius:8px;padding:7px 12px;font-size:var(--fs-conta);font-weight:500;
}
.console-tools{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--grey-500)}
.console-send{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:var(--azul-950);color:var(--white);
}
@media(max-width:560px){
  .console-line{min-height:5.2em}
  .console-model span{display:none}
}

/* ---- a régua de produtos ---- */
.rail{
  display:flex;justify-content:center;flex-wrap:wrap;
  margin-top:clamp(34px,4vw,54px);
}
/* Largura calibrada: 12 pastilhas + 9 vaos + 4 recuos cabem nos 1192px
   uteis da folha, entao os quatro grupos ficam numa linha so ate 1240px. */
.rail-group{padding-inline:clamp(14px,1.7vw,24px);border-right:1px solid var(--grey-200)}
.rail-group:last-child{border-right:0}
@media(max-width:1100px){
  .rail-group{border-right:0;padding-block:12px;flex:1 1 320px}
}
.rail-label{
  font-size:var(--fs-conta);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey-500);margin-bottom:14px;
}
.rail-icons{display:flex;justify-content:center;gap:clamp(2px,.6vw,8px)}
/* ESCOPADO EM .rail-icons DE PROPOSITO, e nao por gosto de especificidade.
   A seccao importada dos agentes tambem tem .pill: a pastilha horizontal de
   status que corre dentro da animacao. Sem escopo, estas regras — as unicas
   que declaram flex-direction e width, que a pastilha nao traz em style= —
   venciam, e a pastilha saia como uma coluna de 76px com o icone em 38px e
   dessaturado. O ESCOPO CONTINUA NECESSARIO mesmo agora que as pastilhas da
   regua nao tem mais icone: a colisao de nome de classe com a secao importada
   e o motivo, e ela nao mudou.

   SEM ICONE desde 18/09/2026. Sai o `flex-direction:column`, que existia para
   empilhar simbolo e rotulo, e sai a largura fixa de 76px, que era a medida do
   simbolo — com rotulo de ate 37 caracteres ("Apresentacoes, Documentos e
   Planilhas") ela truncaria. A pastilha passa a medir o proprio texto. */
.rail-icons .pill{
  appearance:none;background:transparent;border:0;cursor:pointer;
  display:flex;align-items:center;
  padding:10px 14px;border-radius:10px;
  font-family:var(--font-body);font-size:var(--fs-conta);line-height:1.3;
  color:var(--grey-600);
  transition:color .18s ease,background-color .18s ease;
}
.rail-icons .pill:hover{background:var(--grey-100)}
.rail-icons .pill.is--on{color:var(--grey-900);font-weight:600}
@media (prefers-reduced-motion:reduce){.rail-icons .pill{transition:none}}

/* ---- o palco ---- */
/* O `hidden` do markup e quem desliga o palco. A regra e explicita porque
   `.palco` pode ganhar um `display` um dia, e display em regra de classe
   vence o `[hidden]` do navegador — o palco voltaria sozinho, sem ninguem
   pedir. */
.palco[hidden]{display:none}
.palco{
  margin:clamp(38px,4.4vw,62px) auto 0;max-width:1120px;
  border:1px solid var(--grey-200);border-radius:14px;overflow:hidden;
  background:var(--white);
}
.palco:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.palco-shot{display:block;width:100%;height:auto}
.palco-vazio{
  aspect-ratio:16/9;display:grid;place-content:center;gap:10px;
  padding:32px var(--gutter);text-align:center;
  background-image:radial-gradient(900px 400px at 50% 0%,var(--w-azul),var(--w-azul-0) 70%);
}
.palco-nome{font-family:var(--font-title);font-weight:600;font-size:var(--fs-title);color:var(--grey-900)}
.palco-nota{font-size:var(--fs-micro);color:var(--grey-500);max-width:46ch;margin-inline:auto}
.palco-nota code{font-size:var(--fs-conta)}

/* ---- 0.1 o herói de duas colunas (alternativo) ----
   Tudo aqui é escopado em `.hero--duo` e NENHUMA regra do bloco do topo foi
   tocada: as do herói centrado continuam inteiras acima. Duas classes vencem
   as regras de uma só, então a ordem dentro do arquivo não é o que decide —
   a região fica logo depois do palco por leitura, não por cascata.

   ATENÇÃO: só a CSS é reversível por classe. O MARKUP do herói foi
   reestruturado no mesmo passo (grade de duas colunas, régua sem os cinco
   `.rail-group`, palco sem `hidden`), então tirar a classe da <section> deixa
   estas regras dormindo mas NÃO devolve o herói centrado — para isso é o
   `src/index.html` da branch anterior que vale.

   A MEDIDA QUE MANDA é a coluna da esquerda: ~560px na folha de 1240. É ela
   que obriga o display a cair, o console a encolher e a régua a virar
   pastilha horizontal. Nenhum destes números é gosto; todos saem de "cabe em
   meia folha". */

/* Camada 3 — componente. Prefixados pela seção, como manda o PARALELO.md, e
   lendo só a camada 2: `--rule-1` é o fio da casa e `--interactive` é o azul
   de coisa clicável. Nenhum primitivo nomeado aqui. */
:root{
  --duo-col-vao:clamp(32px,4vw,68px);
  --duo-tela-borda:var(--rule-1);
  --duo-pill-on-borda:var(--interactive);
  /* A lavagem da seção, não uma cor nova: em `.tint--*` a pastilha ativa
     acompanha o hue do bloco sozinha. No herói, que não tem tint, isto é o
     azul de sempre. */
  --duo-pill-on-fundo:var(--w-1);
}

.hero--duo .hero-duo{
  display:grid;
  /* minmax(0,…) nos dois lados: sem isso o mínimo automático de item de grade
     é o conteúdo, e a manchete — que tem palavra longa e não quebra no meio —
     empurra a coluna da esquerda para além da fração e estoura a folha. */
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:var(--duo-col-vao);
  align-items:center;
  /* O bloco do topo centraliza tudo por `.hero-in`. Aqui o alinhamento é à
     esquerda, mas só dentro da grade: a esteira de logos continua sob as
     regras dela, centrada, atravessando a folha inteira. */
  text-align:left;
}

/* ---- a coluna que diz ---- */
.hero--duo .hero-diz{
  /* 46px de teto contra os 72 do herói centrado. Em 3,2vw os 46 chegam perto
     de 1440, que é onde a folha para de crescer. O token é o MESMO que a
     manchete e a fita já leem, então redefini-lo aqui basta: o JS que publica
     a entrelinha em pixel inteiro remede sozinho a partir do computado. */
  --fs-display:clamp(28px,3.2vw,46px);
}
.hero--duo .hero-diz h1{
  /* O limite de 1060px era a medida de duas linhas na folha inteira. Em meia
     folha quem limita é a coluna. */
  max-width:none;margin-inline:0;
}
.hero--duo .hero-sub{
  margin-inline:0;max-width:52ch;
  font-size:17px;
  margin-top:clamp(14px,1.6vw,20px);
}

/* ---- o console, versão baixa ----
   Mesmo componente, mesma casca do BorderGlow: o que encolhe é só a geometria
   de página, que já era a parte nossa da regra original. */
.hero--duo .console{
  margin:clamp(22px,2.4vw,32px) 0 0;
  max-width:none;
}
.hero--duo .console-conteudo{padding:14px 14px 10px}
.hero--duo .console-line{
  font-size:14.5px;line-height:1.5;
  /* Duas linhas de piso. O texto entra letra a letra e sai do mesmo jeito, e
     sem piso a caixa encolhia para uma linha entre um pedido e o outro — a
     régua inteira subia e descia a cada troca. Os pedidos mais longos da
     lista dão duas linhas nesta coluna; os poucos que dão três crescem, e aí
     o salto é de uma linha só, no meio da digitação, não a cada ciclo. */
  min-height:3em;
}
.hero--duo .console-bar{margin-top:8px}

/* ---- a régua, uma fileira sem categoria ----
   Doze pastilhas horizontais que quebram em linha nova sozinhas. A pastilha
   vertical de 76px do herói centrado não cabe aqui: doze delas medem 912px e
   a coluna tem ~560. */
.hero--duo .rail{
  margin-top:clamp(20px,2.4vw,30px);
  justify-content:flex-start;
}
.hero--duo .rail-icons{
  flex-wrap:wrap;justify-content:flex-start;gap:8px;
}
.hero--duo .rail-icons .pill{
  /* recuo simetrico: os 10px da esquerda eram a folga do icone */
  padding:7px 16px;
  border:1px solid var(--grey-200);border-radius:999px;
  background:var(--white);
  font-size:13px;line-height:1.2;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.hero--duo .rail-icons .pill:hover{background:var(--grey-100)}
/* A ativa ganha o azul da casa na borda e uma lavagem do mesmo hue no fundo —
   o mesmo par que o botão primário usa, em intensidade de pastilha. */
.hero--duo .rail-icons .pill.is--on{
  border-color:var(--duo-pill-on-borda);
  background:var(--duo-pill-on-fundo);
  color:var(--text-1);
}

/* ---- a coluna que mostra ---- */
.hero--duo .hero-tela{min-width:0}
.hero--duo .palco{
  margin:0;max-width:none;
  border-color:var(--duo-tela-borda);
  box-shadow:var(--sombra-peca);
}
/* O palco vazio deixou de ser cartão de recado e virou a tela.
   ENQUANTO NÃO HÁ CAPTURA POR PRODUTO em assets/shots/, o fundo é a tela real
   de assets/tela-dre.png — a mesma que a seção do fluxo usa — e o nome do
   produto ativo vem na etiqueta. Não é placeholder desenhado à mão: é uma
   interface de verdade, que é a regra da casa para tela de produto.

   Quando o PNG do produto entrar, o script cria um `.palco-shot` antes deste
   div e esconde este — nada aqui precisa mudar. */
.hero--duo .palco-vazio{
  aspect-ratio:16/10;
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:18px;
  background-image:url(assets/tela-dre.png);
  background-size:cover;background-position:top left;background-repeat:no-repeat;
  text-align:left;
}
/* A etiqueta flutuante: peça de vidro sobre a tela, como a do bloco de
   referência. Fundo sólido e não translúcido — atrás dela passa interface
   com texto, e vidro sobre texto não lê. */
.hero--duo .palco-nome{
  font-size:14px;font-weight:600;
  padding:9px 14px;border-radius:10px;
  background:var(--white);
  box-shadow:0 2px 14px rgb(16 24 40 / 14%);
  max-width:100%;
}

/* ---- empilhado ----
   O corte é em 1000px e não no 1100 da régua antiga: o que quebra aqui é a
   grade de duas colunas, e ela aguenta mais que os cinco grupos de rótulo que
   existiam antes. Empilhado, a tela vai para baixo do texto e a coluna volta
   a ter a folha inteira — mas o tipo NÃO volta ao tamanho do herói centrado,
   porque a referência desta variante é a manchete curta. */
@media(max-width:1000px){
  .hero--duo .hero-duo{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px)}
  .hero--duo .hero-sub{max-width:62ch}
  .hero--duo .palco-vazio{aspect-ratio:16/9}
}
@media(max-width:560px){
  .hero--duo .rail-icons .pill{font-size:12.5px;padding:6px 12px 6px 9px}
  .hero--duo .rail-icons .pill svg{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){
  .hero--duo .rail-icons .pill{transition:none}
}

/* ============================================================================
   O RITMO VERTICAL DA PAGINA   (20/09/2026)
   ----------------------------------------------------------------------------
   Um vao so entre setores, e todos iguais. A medida de referencia e a que ja
   havia entre a secao de recursos e "Tres anos de ciclo": 221px em 1440. Era a
   unica que o Bruno aprovou sem ressalva, e as outras eram versoes dela com
   erro de ate 20px — perto demais para parecer intencional, longe demais para
   parecer igual.

   COMO O VAO E FORMADO: ele e a SOMA dos dois lados. A secao de cima poe
   metade no recuo de baixo, a de baixo poe metade no recuo de topo. Por isso
   cada bloco abaixo recebe o MESMO `calc(var(--vao-setor)/2)` nos dois lados:
   com todos iguais, qualquer emenda da o vao inteiro, e mudar o ritmo da
   pagina passa a ser mudar um numero.

   POR QUE `!important` em quase tudo: os recuos moram em `style=` dentro das
   secoes importadas, e estilo inline vence folha. E o mesmo motivo do resto
   dos ajustes de secao importada neste arquivo.

   A ALTURA FIXA DA SECAO DOS AGENTES tambem cai aqui. Ela vinha do Figma com
   `height:7620px` no `style=`, e a secao de dentro (`flex-grow:1`) esticava
   para preencher — entao encurtar a sobra da pilha nao encurtava nada, so
   trocava pilha por vazio. Com altura automatica a secao passa a medir o que
   desenha. */
:root{
  /* REVISADO em 20/09: 9,7vw da 140px em 1440, contra os 221 da primeira
     passada. A referencia pedida era o vao entre o CTA da secao de recursos e
     "Tres anos de ciclo" — e, medido, ele dava os MESMOS 212px de todos os
     outros: a normalizacao ja tinha igualado tudo, e o que sobrou grande foi
     o proprio numero. Entao o que muda agora e a medida, nao a distribuicao:
     todos continuam iguais entre si, e todos ficam um terco menores. */
  --vao-setor:clamp(88px,9.7vw,150px);
}

/* (o recuo de baixo do quadro dos cases mora na regra da propria secao,
   mais abaixo: uma regra de mesma especificidade la vence esta.) */

.agents-section{
  padding-top:calc(var(--vao-setor) / 2)!important;
  padding-bottom:calc(var(--vao-setor) / 2)!important;
}
#sec-agentes > div{height:auto!important}

#sec-recursos > section{
  padding-top:calc(var(--vao-setor) / 2)!important;
  padding-bottom:calc(var(--vao-setor) / 2)!important;
}
/* (o recuo de .prova-in mora na regra da secao da prova, mais abaixo.) */
#sec-depoimentos > section{
  padding-top:calc(var(--vao-setor) / 2)!important;
  padding-bottom:calc(var(--vao-setor) / 2)!important;
}
/* O SETOR DOS AGENTES tambem abre menos (21/09): da regua de cartoes ate a
   manchete "Forca de trabalho ilimitada" eram 59px so de recuo interno da
   secao importada, alem do que o quadro dos cases ja deixava embaixo. */
#sec-agentes .agents-section{padding-top:calc(var(--vao-setor) / 3)!important}
#sec-seguranca-casa > section{
  /* METADE DA METADE (21/09): o vao ate a manchete da seguranca era 70px e
     passou a 35. Acima dela vem o carrossel de depoimentos, que ja fecha com
     os proprios pontos de paginacao. */
  padding-top:calc(var(--vao-setor) / 4)!important;
  padding-bottom:calc(var(--vao-setor) / 2)!important;
  /* A altura fixa de 1400px vinha do Figma e agora sobraria faixa. */
  height:auto!important;
}

/* ---- 0.2 o quadro dos cases ----
   A forma vem do bloco de agentes do monday: manchete centrada, regua de
   pilulas e, embaixo, um quadro com moldura clara por fora e tela branca por
   dentro. Ver o comentario do markup, em src/index.html.

   O QUE E NOSSO AQUI e so a geometria de pagina e os tokens: cor, raio, fio e
   sombra saem todos da camada 2, sem um primitivo nomeado. A regua reusa o
   par do botao primario em intensidade de pastilha, que e o mesmo gesto que a
   regua do heroi ja usava — aba ativa com lavagem azul e texto azul-950.

   A MEDIDA QUE MANDA e a do quadro: 70% da JANELA. E a unica peca da pagina
   que mede pela viewport em vez da folha de 1240px, e e de proposito — ela
   precisa passar da medida do texto para o quadro ler como a peca maior da
   secao. O teto de 1560px existe para que em tela de 2560px ele nao vire uma
   faixa sem foco. Abaixo de 900px a conta cai: 70% de um telefone sobra
   margem e falta quadro, entao ele volta a ser largura de folha. */

/* Camada 3 — componente, prefixado pela secao, lendo so a camada 2. As tres
   cores da rampa sao a excecao e estao comentadas na regra `.cases`. */
:root{
  --cases-moldura:var(--grey-100);
  --cases-aba-on-fundo:var(--azul-100);
  --cases-aba-on-tinta:var(--azul-950);
}

/* ---- o fundo, que e o do heroi descendo ----
   ESTA SECAO NAO USA `.entry`. A lavagem da casa comeca e termina na folha
   branca, e aqui o que se pediu foi o oposto: que o fundo do heroi continue
   para baixo, suavizando ate quase branco, SEM emenda.

   COMO A EMENDA SOME. Tres coisas tem de bater na linha onde as duas secoes
   se encostam:

   1. O TOM. O heroi termina em #DFE5F4 — e a ultima parada da rampa dele, em
      `#lp-hero::before`. A rampa daqui comeca no MESMO #DFE5F4, em 0%. Dois
      valores iguais na mesma linha nao produzem borda.

   2. AS DUAS BOLHAS DO PE. O heroi tem uma em 30% 88% e outra em 88% 92%, e
      as duas ainda estao vivas quando a caixa dele acaba: cortadas ali, elas
      deixariam meia bolha. As duas de baixo continuam aqui, com o centro
      ACIMA do topo desta caixa (-11% e -7%) — e onde ele cairia se as duas
      secoes fossem uma so — e com a mesma cor e a mesma opacidade de origem.
      Os raios estao em porcentagem desta caixa, entao a continuidade e exata
      na altura de hoje e aproximada se o conteudo crescer muito. Sendo bolha
      desfocada e de baixa opacidade, a diferenca nao vira linha.

   3. A TEXTURA. Essa NAO continua — ela se apaga no pe do heroi. O porque
      esta na regiao 4 do hero.css: malha esticada em `cover` mudaria de
      escala na emenda.

   ONDE ELA TERMINA e o que vem embaixo, e o que vem embaixo e BRANCO PURO:
   a secao dos agentes traz um fundo proprio no arquivo de origem, mas o
   `.agentes-fora .importada--agentes{background:transparent !important}` do
   style.css o derruba, e quem fica pintando ali e a folha da pagina. Medido,
   nao suposto — a primeira versao desta rampa fechava em #F3F4F6 e deixava um
   degrau claro exatamente na emenda de baixo. A rampa fecha em #FFFFFF, e as
   duas emendas da secao somem pelo mesmo motivo: tom igual dos dois lados. */
/* ---- a malha de linhas, uma camada sobre as DUAS secoes ----
   Ela nao mora nem no heroi nem aqui: mora em `.topo`, a caixa que embrulha os
   dois. E o unico jeito de as linhas serem um desenho so.

   O QUE HAVIA ANTES e por que nao servia: cada secao pintava a propria copia da
   malha, esticada em `cover` sobre a propria caixa. Duas caixas de alturas
   diferentes dao duas escalas diferentes, entao as linhas chegavam na emenda
   com tamanhos e posicoes que nao se encontravam. Nao era continuidade, era
   coincidencia de densidade.

   O ARQUIVO TAMBEM MUDOU. `assets/textura-malha.svg` e a malha do pacote com a
   mesma malha continuada para baixo: os 46 nos e as 130 linhas originais estao
   intactos no topo, e abaixo deles ha 62 nos novos na mesma densidade, ligados
   aos tres vizinhos mais proximos — inclusive aos de cima. Ver o comentario
   dentro do proprio arquivo.

   TRES CAMADAS, nesta ordem: o fundo de cada secao em 0, a malha em 1, o
   conteudo das duas em 2. O `#lp-hero>*{z-index:2}` esta no hero.css. */
.topo{position:relative}
.topo::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url(assets/textura-malha.svg) center top/cover no-repeat;
  opacity:.9;
  /* O "morrendo": cheia ate 60% da caixa das duas — que cai depois do quadro
     dos cases — e apagada aos 88%, antes do fim da secao. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 88%);
          mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 88%);
}
.cases-diz,.cases-fora{position:relative;z-index:2}

.cases{
  position:relative;
  color:var(--text-1);
  background-color:#FFFFFF;
  background-image:
    radial-gradient(40% 42% at 30% -11%, rgba(150,178,255,.35), rgba(150,178,255,0) 70%),
    radial-gradient(50% 51% at 88%  -7%, rgba(120,150,255,.32), rgba(120,150,255,0) 70%),
    linear-gradient(180deg, #DFE5F4 0%, #E9EDF7 28%, #F6F7FB 66%, #FFFFFF 100%);
  background-repeat:no-repeat,no-repeat,no-repeat;
}

/* O recuo de baixo do bloco de texto e menor que o `--pad-entry` que o
   `.entry-in` traz: entre a regua e o quadro o vao e curto, senao a regua
   parece pertencer a manchete e nao ao quadro que ela comanda. */
/* 30% A MENOS EM CIMA (21/09): da fila de marcas ate a chamada eram 122px,
   agora sao 85. A abertura cheia do `.entry-in` serve para secao que comeca
   depois de um respiro; esta comeca logo abaixo da esteira, que ja e uma
   faixa de descanso. */
.cases-diz{padding-top:calc(var(--pad-entry) * .62);padding-bottom:clamp(26px,3vw,42px)}
/* METADE DO VAO ABAIXO DO QUADRO (21/09). Da regua de cartoes ate a manchete
   "Forca de trabalho ilimitada" eram 99px: 72 deste recuo mais 27 que o setor
   de agentes traz por dentro. Um terco do recuo de abertura deixa o total em
   50, que e a metade pedida. O ritmo do resto da pagina nao muda — o que muda
   e SO esta emenda, porque aqui a regua de cartoes ja e um fecho visual e a
   secao nao precisa de outro. */
.cases{padding-bottom:calc(var(--pad-entry) * .14)}

.cases-titulo{
  font-size:var(--fs-headline);line-height:var(--lh-headline);
  font-weight:500;letter-spacing:var(--ls-headline);
  color:var(--grad-hero-solid);
  /* 18ch era a medida da chamada antiga, de duas linhas curtas. A de agora
     tem uma linha de 27 caracteres, e em 18ch ela quebrava em duas — a
     manchete virava tres linhas com a primeira quase vazia. 24ch cabe a
     frase inteira e continua sendo medida de manchete, nao de paragrafo. */
  max-width:24ch;margin-inline:auto;
  /* A folga do descendente, pela mesma razao das outras manchetes: a caixa da
     Manrope e maior que a entrelinha e o "g" sai decepado sem isto. */
  padding-block:.18em;margin-block:-.18em;
}
/* O REALCE, como em todas as outras manchetes de secao: a varredura roxo →
   azul → ciano recortada no texto, idêntica à `.agcab-realce` dos agentes.
   Aqui ela pega a segunda linha inteira, que e a parte que diferencia — o
   quadro mostra a MESMA plataforma em operacoes diferentes. */
.cases-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)){
  .cases-realce{background-image:none;color:var(--aro-azul);-webkit-text-fill-color:currentColor}
}
@media print{
  .cases-realce{background-image:none;color:var(--grey-900);-webkit-text-fill-color:currentColor}
}

/* ---- a regua ---- */
.cases-regua{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
  width:max-content;max-width:100%;
  margin:clamp(26px,3.2vw,44px) auto 0;
  padding:6px;
  border-radius:var(--r-pill);
  background:var(--folha);
  /* Duas sombras: o fio de 1px que assenta a pilula na folha, e a difusa que
     a levanta. Uma so nao faz as duas coisas. */
  box-shadow:0 1px 2px rgb(16 24 40 / 6%), 0 10px 30px -14px rgb(16 24 40 / 20%);
}
.cases-aba{
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  padding:11px 22px;border-radius:var(--r-pill);
  background:transparent;color:var(--text-2);
  font-family:var(--font-body);font-size:var(--fs-ui);font-weight:500;line-height:1.2;
  transition:background-color .18s ease,color .18s ease;
}
.cases-aba:hover{background:var(--grey-100);color:var(--text-1)}
.cases-aba[aria-selected="true"]{
  background:var(--cases-aba-on-fundo);
  color:var(--cases-aba-on-tinta);
  font-weight:600;
}
.cases-aba:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cases-aba{transition:none}}

/* ---- o quadro ---- */
.cases-fora{width:70vw;max-width:1560px;margin-inline:auto}
/* A caixa que as setas medem. E o QUADRO, e nao o `.cases-fora`: se fosse o de
   fora, o `top:50%` das setas contaria a regua de cartoes junto e elas
   desceriam. */
.cases-quadro{position:relative}

/* ---- as setas ----
   Uma de cada lado, penduradas POR DENTRO da borda do quadro: por fora elas
   comeriam a medida de 70% que a secao inteira existe para respeitar, e em
   tela de 1280 nem caberiam.

   NASCEM DESLIGADAS. Enquanto nao ha item para percorrer, botao que responde
   ao clique sem mudar nada e pior que botao apagado: o desligado diz que
   ainda nao ha para onde ir. O script liga cada uma assim que houver item na
   categoria — e ele ja conta os itens, so nao ha nenhum ainda. */
.cases-seta{
  position:absolute;top:50%;translate:0 -50%;z-index:2;
  display:grid;place-items:center;
  width:clamp(40px,3.2vw,50px);aspect-ratio:1;
  border:1px solid var(--rule-1);border-radius:var(--r-pill);
  background:var(--folha);color:var(--text-2);
  box-shadow:0 1px 2px rgb(16 24 40 / 6%), 0 10px 26px -14px rgb(16 24 40 / 26%);
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
/* FORA DO QUADRO, a pedido (20/09). `right:100%` encosta a borda direita do
   botao na borda esquerda do quadro; o vao vem por cima. Cabe porque o quadro
   mede 70% da janela: sobram 15% de cada lado, contra os ~50px que o par
   precisa. */
.cases-seta--ant{right:calc(100% + clamp(12px,1.6vw,30px))}
.cases-seta--prox{left:calc(100% + clamp(12px,1.6vw,30px))}
.cases-seta:hover:not(:disabled){background:var(--grey-100);color:var(--text-1);border-color:var(--grey-500)}
.cases-seta:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.cases-seta:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.cases-seta svg{width:20px;height:20px;display:block}
@media (prefers-reduced-motion:reduce){.cases-seta{transition:none}}
/* ---- a moldura ----
   O DEGRADE E O MESMO DOS CARTOES DE AGENTE do diagrama do heroi: quatro
   radiais de canto sobre uma cor base, mais o clarao central que os une. Os
   valores sao copiados do objeto `AG` do hero.js, sem retoque, para as duas
   pecas lerem como a mesma familia.

   QUEM ESCOLHE A PALETA E A TELA EM CENA. Cada figura carrega a sua em
   `data-mesh` e o script escreve no `style` da moldura ao trocar. Hoje todas
   as telas de uma categoria compartilham a mesma paleta — mudar uma so e
   editar o atributo daquela figura, e mais nada.

   O `background-size` de 180% e a deriva sao do bloco `.mesh` do pacote: sem
   eles os radiais ficam parados e a moldura le como adesivo. */
.cases-moldura{
  padding:clamp(10px,1vw,16px);
  border-radius:clamp(18px,1.6vw,28px);
  background-color:rgba(255,255,255,.62);
  /* 180% para os radiais sairem das bordas, como nos cartoes de agente. */
  background-size:180% 180%;
  background-position:40% 50%;
  /* A TROCA DE PALETA e uma transicao; a malha em si NAO se mexe.
     Havia aqui uma deriva de `background-position` em laco de 19s, copiada do
     `.mesh` do pacote. No cartao de agente ela custa pouco: o cartao mede
     300x190. Aqui a peca mede ~1010x600 e um degrade de cinco radiais
     REPINTA a peca inteira a cada quadro, ao lado de um SVG animado que ja e
     a coisa mais cara da pagina. Era a maior regressao de desempenho da
     secao. A paleta continua trocando a cada tela; o que saiu foi o
     movimento perpetuo. */
  transition:background-color .45s ease}
.cases-tela{
  border-radius:clamp(12px,1.1vw,20px);
  background:var(--folha);
  border:1px solid var(--rule-1);
  box-shadow:var(--sombra-peca);
  /* TAMANHO UNICO, e nao o da tela da vez (20/09). As dezesseis telas tem
     1920 de largura e altura entre 955 e 1137 — proporcoes de 1,69 a 2,01 —,
     e o quadro pulava ate 90px de altura a cada troca. A proporcao daqui e a
     mediana das dezesseis, entao o quadro fica parado e quem se ajusta e a
     imagem, por `contain`: nenhuma e cortada, e a que nao bate exatamente
     deixa uma faixa branca de no maximo 4% num dos dois eixos. */
  aspect-ratio:1920 / 1040;
  display:grid;
  /* UMA linha, que ocupa a altura toda. Sem isto a linha mede o conteudo:
     com a capa na frente ela encolhia para a altura do botao e a capa
     ficava numa faixa no topo do quadro, em vez de cobri-lo. */
  grid-template-rows:minmax(0,1fr);
  overflow:hidden;
  position:relative;
}
.cases-tela:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.cases-vazio{
  grid-area:1/1;place-self:center;
  font-family:var(--font-title);font-weight:600;font-size:var(--fs-title);
  color:var(--grey-500);
}

/* ---- a tela da vez ----
   As dezesseis vivem no HTML e so uma perde o `hidden`. O peso nao esta aqui:
   o `src` dela e posto e tirado pelo script, entao so o arquivo em cena e
   baixado, e a seguinte fica so nos metadados. Ver a nota do bloco no
   src/index.html. */
.cases-item{margin:0;display:block;grid-area:1/1;min-width:0}
.cases-item[hidden]{display:none}
/* `cover`, e nao `contain` (20/09). As tres saidas possiveis num quadro de
   tamanho fixo com telas de proporcoes diferentes sao: deformar, deixar faixa
   branca, ou cortar. Deformar esta fora — e interface de produto, um pixel
   esticado vira defeito. Faixa branca foi a primeira tentativa e e o que se
   pediu para tirar. Sobra cortar, e e o que `cover` faz: a tela cobre o quadro
   inteiro e o excedente sai por fora.

   QUANTO SE PERDE: a proporcao do quadro e a mediana das dezesseis, entao o
   corte e pequeno e divide-se entre as duas pontas. A mais larga perde 4,5% de
   cada lado; a mais alta perde 9% de altura.

   `center top` decide de ONDE sai: a largura corta simetrica, mas a altura
   corta so embaixo. E onde ha menos informacao — o topo de uma tela de produto
   leva o cabecalho, a navegacao e o titulo da visao. */
.cases-item video{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  background:var(--folha);
}

/* ---- o estado de espera e o play ----
   AS TELAS NAO COMECAM SOZINHAS (20/09). Uma animacao de meio mega rodando
   sem ninguem ter pedido e a definicao de ruido — e sao dezesseis.

   COMO A PAUSA E FEITA: o `src` da imagem so e posto quando se pede play. Nao
   ha como pausar um SVG dentro de <img> por CSS ou por script: ele tem
   documento proprio, e nenhuma regra desta pagina alcanca la dentro. Sem
   `src` nao ha o que tocar, e ao atribui-lo a animacao comeca do quadro zero
   — que e exatamente o que se quer de um play.

   O QUE SE VE ENQUANTO ESPERA: o degrade da categoria na moldura, que ja esta
   la, o nome da tela e o botao. E uma capa, nao um buraco.

   QUALQUER OUTRO CLIQUE TAMBEM DA PLAY: escolher um cartao, trocar de
   categoria ou andar pela seta sao pedidos explicitos de ver aquela tela;
   exigir um segundo clique no play depois disso seria pedagio. */
.cases-capa{
  grid-area:1/1;place-self:stretch;position:relative;
  /* O POSTER da tela da vez, posto pelo script. Mesmo enquadramento do video
     (`cover` e topo), para o play nao mostrar um corte e o video outro. */
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  /* `height` explicito porque `align-self:stretch` NAO estica <button>: o
     navegador trata o botao como tendo tamanho intrinseco e ele parava na
     altura do proprio conteudo, virando uma faixa no topo do quadro. */
  width:100%;height:100%;
  display:grid;place-content:center;justify-items:center;gap:14px;
  background-color:var(--folha);
  cursor:pointer;
  border:0;appearance:none;-webkit-appearance:none;
  font:inherit;color:inherit;
  padding:24px;
}
.cases-capa[hidden]{display:none}
/* O VEU SAIU EM 21/09. Ele era branco a 62% sobre o poster, para o nome e o
   botao nao competirem com o texto miudo da tela de produto. Lido na tela
   pronta, porem, ele nao passava como recurso de leitura: passava como
   imagem fora de foco, e a primeira coisa que a pagina mostra do produto nao
   pode parecer defeito de arquivo.

   O QUE RESOLVE A LEITURA no lugar dele e local, e nao geral: o nome e a
   dica ganham a propria placa escura, e o botao ja tinha sombra. O poster
   fica como foi desenhado. */
.cases-capa > *{position:relative;z-index:1}
/* VIDRO, e nao o azul chapado do botao da casa. A capa fica por cima de uma
   TELA DE PRODUTO: pastilha opaca ali tapa o que ela veio mostrar. Em vidro,
   a tela continua legivel por tras e o play ainda le, porque o que o separa
   nao e a cor, e o desfoque mais o fio branco na borda.

   O TOM E ESCURO de proposito. Vidro claro com seta branca precisaria que o
   que esta atras fosse escuro, e as dezesseis telas sao claras. */
.cases-play{
  display:grid;place-items:center;
  width:clamp(56px,5vw,76px);aspect-ratio:1;
  border-radius:var(--r-pill);
  background:rgba(12,18,32,.4);color:#FFFFFF;
  border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
          backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 10px 30px -12px rgb(16 24 40 / 55%);
  transition:transform .2s cubic-bezier(.32,0,.24,1),box-shadow .2s ease,background-color .2s ease;
}
.cases-capa:hover .cases-play{background:rgba(12,18,32,.52)}
.cases-capa:hover .cases-play{transform:scale(1.06);box-shadow:0 14px 34px -12px rgb(16 24 40 / 55%)}
.cases-capa:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-4px}
.cases-play svg{width:42%;height:42%;display:block;translate:6% 0}
/* AS DUAS PLACAS SAO O MESMO VIDRO DO PLAY, para a capa ter uma linguagem
   so. O escuro vai apenas onde ha texto; o resto do quadro fica como o
   desenho e. */
.cases-capa-nome{
  font-family:var(--font-title);font-weight:600;font-size:var(--fs-title);
  color:#FFFFFF;text-align:center;
  padding:8px 20px;border-radius:var(--r-pill);
  background:rgba(12,18,32,.4);
  border:1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
          backdrop-filter:blur(14px) saturate(160%);
}
.cases-capa-dica{
  font-size:var(--fs-micro);color:rgba(255,255,255,.92);text-align:center;
  padding:6px 16px;border-radius:var(--r-pill);
  background:rgba(12,18,32,.32);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
          backdrop-filter:blur(12px) saturate(150%);
}
@media (prefers-reduced-motion:reduce){.cases-play{transition:none}}

/* ---- a regua de cartoes, abaixo do quadro ----
   Um cartao por tela da categoria, com o nome a vista. Substituiu os
   tracinhos em 20/09: tracinho diz quantas faltam, cartao diz o que sao — e
   deixa escolher, que era o pedido.

   O CARTAO DA VEZ E O RELOGIO. A fatia que enche na trilha dele e uma animacao
   de `scaleX` com a duracao do arquivo, e o fim dela e o que chama a proxima
   tela. Nao ha cronometro em paralelo, entao cartao e video nao tem como se
   desencontrar; e, sendo animacao CSS, ela para junto com a secao quando o
   `fora-de-cena` entra, e o avanco para junto. */
/* ---- a linha de tempo, dentro da tela ----
   Encostada no pe do quadro, por cima do video, como em qualquer tocador. Ela
   nasceu do lado de fora, embaixo da moldura, e de la ficava disputando
   atencao com a regua de cartoes que vem logo abaixo. Dentro, ela e do video
   e some quando ninguem esta olhando para ele.

   APARECE COM O PONTEIRO EM CIMA, e tambem com o foco dentro: quem chega na
   barra pelo teclado precisa ver onde o foco esta. Some em `opacity` e
   `translate`, nunca em `display` — elemento que some de verdade tira o foco
   do teclado junto e o Tab volta para o comeco da pagina.

   O DEGRADE ATRAS dela existe porque o pe de uma tela de produto e claro e
   cheio de numero: barra branca sobre tabela branca nao se ve. */
.cases-linha{
  position:absolute;inset:auto 0 0;z-index:3;
  display:flex;align-items:center;gap:12px;
  padding:26px clamp(12px,1.4vw,20px) clamp(10px,1.1vw,14px);
  background:linear-gradient(180deg, rgba(10,14,24,0) 0%, rgba(10,14,24,.42) 46%, rgba(10,14,24,.66) 100%);
  opacity:0;translate:0 8px;pointer-events:none;
  transition:opacity .2s ease, translate .2s cubic-bezier(.32,0,.24,1);
}
.cases-linha[hidden]{display:none}
/* SO COM O PONTEIRO EM CIMA, e nao com o foco dentro (21/09). Era
   `:focus-within`, e isso deixava a barra acesa para sempre: quem aperta o
   play deixa o foco no botao, e o foco nao sai enquanto nao se clicar em
   outro lugar da pagina. `:has(:focus-visible)` so acende quando o foco veio
   pelo TECLADO, que e o unico caso em que a barra precisa ficar a vista sem
   o ponteiro — senao o Tab levaria o foco para um controle invisivel. */
.cases-tela:hover .cases-linha,
.cases-tela:has(:focus-visible) .cases-linha{opacity:1;translate:0;pointer-events:auto}
.cases-toca{
  flex:none;display:grid;place-items:center;
  width:34px;height:34px;padding:0;
  border:0;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(255,255,255,.92);color:#101828;
  transition:background-color .18s ease,transform .18s ease;
}
.cases-toca:hover{background:#FFFFFF;transform:scale(1.06)}
.cases-toca:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.cases-toca svg{width:16px;height:16px;display:block}
.cases-toca[data-estado="tocando"] .cases-ic-toca{display:none}
.cases-toca[data-estado="parado"] .cases-ic-pausa{display:none}
.cases-toca[data-estado="parado"] .cases-ic-toca{translate:6% 0}

/* A ALTURA DO ALVO e maior do que a da barra: 3px de desenho dentro de 16px
   de area clicavel. Barra de tocador com 3px de alvo so acerta quem tem mao
   firme — e no telefone, ninguem. */
.cases-trilho{
  flex:1 1 auto;position:relative;
  height:16px;display:flex;align-items:center;
  cursor:pointer;touch-action:none;
}
.cases-trilho::before{
  content:'';position:absolute;inset-inline:0;height:3px;border-radius:999px;
  background:rgba(255,255,255,.28);
}
.cases-trilho-fill{
  position:absolute;inset-inline:0;height:3px;border-radius:999px;
  background:#FFFFFF;
  transform:scaleX(0);transform-origin:0 50%;
}
/* O pino segue a ponta da barra pela mesma fracao, e so aparece quando a
   linha aparece — ponto branco parado sobre o video seria sujeira. */
.cases-trilho-pino{
  position:absolute;left:0;width:100%;height:1px;pointer-events:none;
}
.cases-trilho:hover .cases-trilho-fill,
.cases-trilho:focus-visible .cases-trilho-fill{height:5px}
.cases-trilho:hover::before,
.cases-trilho:focus-visible::before{height:5px}
.cases-trilho:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px;border-radius:999px}
.cases-relogio{
  flex:none;font-size:var(--fs-conta);color:rgba(255,255,255,.92);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  text-shadow:0 1px 2px rgb(0 0 0 / 35%);
}

.cases-cards{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;
  margin-top:clamp(18px,2vw,30px);
}
.cases-card{
  appearance:none;-webkit-appearance:none;
  display:grid;gap:9px;align-content:start;
  padding:11px 16px 12px;
  border:1px solid var(--rule-1);border-radius:12px;
  background:rgba(255,255,255,.66);
  cursor:pointer;text-align:left;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.cases-card:hover{background:var(--folha);border-color:var(--grey-500)}
.cases-card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.cases-card.is--on{
  background:var(--folha);
  border-color:var(--interactive);
  box-shadow:0 1px 2px rgb(16 24 40 / 6%), 0 10px 26px -18px rgb(16 24 40 / 30%);
  cursor:default;
}
.cases-card-nome{
  font-family:var(--font-body);font-size:var(--fs-micro);font-weight:500;
  color:var(--text-2);white-space:nowrap;
}
.cases-card.is--on .cases-card-nome{color:var(--text-1);font-weight:600}

.cases-card-trilha{
  display:block;position:relative;overflow:hidden;
  height:3px;border-radius:var(--r-pill);
  background:var(--grey-200);
}
.cases-card.is--on .cases-card-trilha{background:var(--grey-100)}
/* A BARRA DO CARTAO. Era uma animacao CSS de `scaleX` com a duracao do
   arquivo escrita a mao no `--dur`; virou escrita direta do script, no mesmo
   quadro em que ele le o `currentTime` do <video>. Um relogio a menos para
   se desencontrar do desenho. */
.cases-card-fill{
  position:absolute;inset:0;border-radius:inherit;
  background:var(--interactive);
  transform-origin:0 50%;
  transform:scaleX(0);
}
/* Sem animacao nao ha `animationend`, entao nao ha avanco automatico — quem
   navega sao as setas e os cartoes. E o que a preferencia pede. */
@media (prefers-reduced-motion:reduce){
  .cases-card{transition:none}
  .cases-card-fill{animation:none}
}

@media(max-width:900px){
  .cases-fora{width:auto;padding-inline:var(--gutter)}
  /* Em telefone nao ha 15% de folga de cada lado: o quadro ocupa a largura
     util inteira. As setas voltam para DENTRO da borda, que e o unico lugar
     que sobra, e encolhem para 34px. */
  .cases-seta{width:34px}
  .cases-seta svg{width:17px;height:17px}
  .cases-seta--ant{right:auto;left:2px}
  .cases-seta--prox{left:auto;right:2px}
  .cases-tela{min-height:clamp(160px,44vw,280px)}
  /* Em telefone os cartoes deixam o nome quebrar e dividem a linha entre si,
     em vez de cada um pedir a largura do proprio texto. */
  .cases-cards{gap:8px}
  .cases-card{flex:1 1 140px;padding:9px 12px 10px}
  .cases-card-nome{white-space:normal;font-size:var(--fs-conta)}
  .cases-aba{padding:9px 16px;font-size:var(--fs-micro)}
}

/* ============================================================================
   A ORIGEM — CenterFlow
   ----------------------------------------------------------------------------
   Center Flow do React Bits Pro (cópia licenciada da conta do Bruno), portado
   de React para JS puro porque este projeto não tem React, shadcn nem
   next-themes — o caminho do registro (`npx shadcn add`) não existe aqui.

   O CSS do componente está VERBATIM abaixo e o comportamento é o do original,
   sem desvio: os caminhos saem dos nós e chegam ao centro, os pulsos nascem em
   tempos sorteados por caminho, e o centro acende quando um pulso chega. Os
   props são os do exemplo oficial.

   A ÚNICA troca são as cores. A página é só clara, então os pares
   *Color/*ColorLight colapsam no valor claro, e o valor claro vem dos nossos
   tokens: lineColorLight #e0e0e0 → --grey-200, pulseColorLight e
   glowColorLight #e724eb → --aro-azul, o fio único.

   O que é nosso aqui é só a altura do palco: o componente é 100%×100% e quem
   o contém tem de lhe dar tamanho.
   ============================================================================ */
/* Sem caixa: a ilustração assenta direto na folha. O componente é 100%×100%
   e quem o contém tem de lhe dar tamanho — aqui ele toma a largura inteira do
   lançamento e uma altura generosa, porque o raio dos nós é percentual: caixa
   maior, diâmetro maior, sem tocar em nenhum prop. */
#origem-flow{
  margin-top:var(--gap-block);
  /* Subiu de clamp(440,46vw,680) quando as etiquetas entraram. Com nome em
     cima e valor embaixo, cada no passou a ocupar ~160px de pilha vertical,
     e o anel no tamanho antigo nao dava esse vao entre vizinhos do mesmo
     lado. Isto muda a PROPORCAO do desenho — ele fica mais alto e menos
     achatado — e foi o preco de caber o que a secao pede. */
  height:clamp(560px,58vw,820px);
}

/* As manchas desta seção correm na HORIZONTAL, pelo meio, e não pelos cantos
   como nas outras: elas ficam atrás do diagrama, que é o que o vidro dos nós
   tem para filtrar.

   SÃO DA FAMÍLIA DOS BLOOMS, não das lavagens. As --w-* têm base quase branca
   (#E4F1FA, #E5ECFA, #F4EEFC) a 30-36% de alfa: existem para sumir atrás de
   texto corrido, e sobre branco não aparecem. Aqui não há texto no meio da
   seção — há vidro, que precisa de cor para mostrar. Então são os blooms da
   malha, na força dos dois radiais de meia altura da .fluxo, que existem
   exatamente para o mesmo trabalho.

   A pilha é declarada INTEIRA, e não só a --wash, por duas razões:

     1. SEM GRÃO. O branco desta seção é branco. O grão em multiply .18 puxa
        a folha para ~#F9F9F9, e numa seção alta e majoritariamente vazia como
        esta isso lê como cinza — que é exatamente o que a seção não pode ser.
     2. AS CONTAGENS TÊM DE BATER. `.entry` declara três valores de
        background-repeat e de background-blend-mode, dimensionados para
        grão + duas manchas. Quem trocar as camadas aqui troca as três listas
        juntas, ou a última dá a volta e herda `multiply` da primeira. */
#origem{
  /* Na força da malha do herói: os mesmos tokens --h-*, os mesmos tamanhos e
     as mesmas paradas. Só as âncoras mudam, para a faixa correr na horizontal
     em vez de descer dos cantos.

     DUAS manchas, uma em cada ponta. Havia duas no miolo (38% e 66%) que
     juntas liam como uma só massa no centro; saíram, e o meio da seção é
     branco limpo — que é onde fica a origem, e ela não disputa com mancha
     nenhuma. À direita o ciano deu lugar ao roxo. */
  background-image:
    radial-gradient(880px 440px at  8% 52%, var(--h-ciano), var(--h-ciano-0) 66%),
    radial-gradient(880px 440px at 92% 48%, var(--h-roxo),  var(--h-roxo-0)  66%);
  background-repeat:no-repeat,no-repeat;
  background-blend-mode:normal,normal;
}

/* ==== center-flow.css — React Bits Pro, verbatim ==== */
.center-flow-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.center-flow-svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.center-flow-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-flow-node-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
}

.center-flow-center {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 300ms;
}

.center-flow-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-flow-icon {
  width: 100%;
  height: 100%;
}
/* ==== fim de center-flow.css ==== */

/* O MATERIAL dos nós é nosso; a geometria (tamanho, raio, posição) continua
   vindo dos props. O componente escrevia branco chapado, borda de 1px e uma
   sombra cinza direto no elemento; aqui é o vidro da casa — --vidro-forte com
   o desfoque saturado, a aresta inset no lugar da borda (não entra no
   box-sizing, não deixa costura no raio) e a sombra azulada da página.

   O translateZ(0) vem junto com o translate do componente, não no lugar dele:
   toda peça de vidro da página é promovida a camada própria, senão pisca
   quando o que está atrás repinta — e aqui atrás há dez pulsos correndo. */
.center-flow-node{
  background:var(--vidro-forte);
  -webkit-backdrop-filter:var(--vidro-desfoque);backdrop-filter:var(--vidro-desfoque);
  box-shadow:var(--vidro-aresta),var(--sombra-peca);
  transform:translate(-50%,-50%) translateZ(0);
  backface-visibility:hidden;
  will-change:backdrop-filter;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .center-flow-node{background:rgba(255,255,255,.95)}
}
/* A aresta da origem. Vai num ::after porque o boxShadow do centro e
   reescrito pelo componente a cada quadro (o brilho), e a aresta seria
   varrida junto; o pseudo-elemento fica fora do alcance dele. O raio vem
   por `inherit`, ja que o componente escreve borderRadius inline. */
.center-flow-center::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:var(--vidro-aresta),var(--sombra-peca);pointer-events:none;
}
/* As caixas de valor, penduradas em cada no e na origem. Mesmo material das
   pecas de vidro: nao ha um segundo vocabulario para uma peca que vive
   dentro do mesmo desenho.

   tabular-nums e obrigatorio, nao enfeite: sem ele cada algarismo tem
   largura propria e a caixa TREME durante a contagem. */
.cf-valor{
  position:absolute;top:calc(100% + 8px);left:50%;
  padding:7px 15px;border-radius:12px;white-space:nowrap;
  font-family:var(--font-body);font-weight:600;font-size:17px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--grey-900);
  background:var(--vidro-forte);
  -webkit-backdrop-filter:var(--vidro-desfoque);backdrop-filter:var(--vidro-desfoque);
  box-shadow:var(--vidro-aresta),var(--sombra-peca);
  /* O translate do centramento entra no MESMO transform da escala, senao um
     apaga o outro. A escala e o unico valor que muda entre os dois estados. */
  transform:translateX(-50%) scale(1);
  transition:background-color .3s var(--ease),color .3s var(--ease),
             transform .34s var(--ease);
}
/* A da origem e maior, como o icone dela: o desenho inteiro diz que ali e o
   comeco, e a caixa nao pode dizer o contrario. */
.cf-valor--centro{top:calc(100% + 12px);padding:9px 18px;border-radius:14px;font-size:22px}

/* O ESTADO ATUALIZADO: o preenchimento vira o azul-esverdeado do credito,
   que a pagina ja usa para mudanca boa, e a caixa da um passo a frente. O
   vidro sai — sobre cor chapada o desfoque nao tem o que amostrar — e o
   texto vai a branco, que da 5,3:1 sobre o --credito. */
.cf-valor.atualizado{
  background:var(--credito);color:#FFFFFF;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:var(--sombra-peca);
  transform:translateX(-50%) scale(1.06);
}

/* O campo em edicao: so o cursor piscando. A moldura quem faz e o
   BorderGlow, montado na caixa pelo script. */
.cf-caret{
  display:none;width:2px;height:1em;margin-left:2px;vertical-align:-.13em;
  background:var(--grey-900);
}
.cf-valor.editando .cf-caret{display:inline-block;animation:cf-pisca 0.7067s steps(1) infinite}
@keyframes cf-pisca{50%{opacity:0}}

/* O BorderGlow chega com fundo, borda, sombra e display proprios, pensados
   para um cartao. Aqui ele e so a moldura de luz: o resto continua sendo a
   pilula de vidro. Estas linhas vem DEPOIS das dele no arquivo, entao vencem
   sem precisar de !important. */
.cf-valor.border-glow-card{
  display:block;border:0;background:var(--vidro-forte);
  box-shadow:var(--vidro-aresta),var(--sombra-peca);
}
.cf-valor .border-glow-inner{display:block;overflow:visible}

/* O nome de cada peca, acima do no. Pilula azul-noite chapada: ela nao e
   vidro de proposito — o valor embaixo e que e a peca viva, e duas pilulas
   do mesmo material competiriam. Aqui a etiqueta identifica e cala.

   Texto branco sobre --azul-950 da 14,9:1. */
.cf-nome{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  padding:3px 9px;border-radius:8px;white-space:nowrap;
  font-family:var(--font-body);font-weight:600;font-size:11px;line-height:1.25;
  letter-spacing:.005em;color:#FFFFFF;background:var(--azul-950);
  box-shadow:var(--sombra-peca);
}
.cf-nome--centro{bottom:calc(100% + 10px);padding:4px 12px;font-size:13px;border-radius:9px}

/* Abaixo de 1100 o anel nao tem altura para etiqueta em cima E valor
   embaixo em cada no: a etiqueta de um encosta no valor do vizinho do mesmo
   lado — 6px em 1024, 15px em 900. Os valores sozinhos cabem (medido, zero
   colisao ate 768), entao sai so a etiqueta. */
@media(max-width:1099px){.cf-nome{display:none}}

/* O cursor da cena. O transform de fora carrega a POSICAO, com uma transicao
   longa que faz o percurso; o <svg> de dentro fica com a escala do clique,
   que e curta. Separados porque sao dois tempos diferentes na mesma peca. */
.cf-cursor{
  position:absolute;top:0;left:0;z-index:5;pointer-events:none;opacity:0;
  transition:opacity .34s var(--ease),transform .92s var(--ease);
  filter:drop-shadow(0 3px 8px rgba(17,19,34,.22));
}
.cf-cursor.on{opacity:1}
/* A origem da escala do clique acompanha a ponta da seta, que dobrou
   junto com ela: 4/3 viraram 8/6. */
.cf-cursor svg{display:block;transition:transform .12s var(--ease);transform-origin:8px 6px}
.cf-cursor.clica svg{transform:scale(.82)}

@media (prefers-reduced-motion:reduce){
  .cf-valor{transition:none}
  .cf-cursor{display:none}
}

/* O .center-flow-container do componente traz `overflow:hidden`. As caixas
   penduram por FORA do no, entao a de baixo passava do container e era
   cortada — 21px em 1440, 43px em 768. Caber por dentro exigiria ~832px de
   altura contra os 662 de hoje, o que mudaria a escala do desenho inteiro
   so para acomodar uma pilula.

   Entao o recorte sai AQUI, no nosso seletor, e a secao passa a segurar o
   que escapa na horizontal — `clip` e nao `hidden`, o mesmo remedio que a
   .hero e a .fluxo ja usam para nao virar contexto de rolagem. */
#origem-flow{overflow:visible}
/* As caixas de baixo penduram para fora do container (~43px). Com o
   recuo da secao reduzido, esse balanco passou a cruzar o rodape dela.
   O espaco e reservado AQUI, onde a causa esta, e nao devolvendo o
   recuo — que separaria o diagrama do texto de novo. So onde as caixas
   existem: abaixo de 760px elas nao sao desenhadas. */
/* As etiquetas penduram por cima do no como as caixas penduram por baixo:
   os dois lados precisam de espaco reservado fora do container. */
@media(min-width:760px){#origem-flow{margin-top:44px;margin-bottom:52px}}
#origem{
  overflow-x:clip;
  /* Menos respiro que as outras entradas: aqui o diagrama ja e uma area
     grande de branco, e o recuo cheio somava vazio com vazio. Redefinir o
     token basta — quem le e o .entry-in — e as outras secoes nao sentem. */
  --pad-entry:clamp(42px,5.2vw,78px);
}

/* Abaixo disto o anel nao tem mais folga entre os nos para pendurar pilula
   nenhuma: em 375 sete das onze caixas passavam da borda. O diagrama fica
   sem os valores e continua contando a historia pelo pulso, que e o que
   cabe numa coluna de telefone. O roteiro tambem nao roda — ver o
   matchMedia no script, que e a mesma medida. */
@media(max-width:759px){
  /* O seletor composto acompanha o `.cf-valor.border-glow-card` la de
     cima: com uma classe so, esta regra perdia para ele e a caixa da
     origem continuava aparecendo no telefone. */
  .cf-valor,.cf-valor.border-glow-card,.cf-nome,.cf-cursor{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cf-valor.editando .cf-caret{animation:none}
}
.cf-ic{width:56px;height:56px;display:block}   /* 40px + 40% */
/* O ícone da origem: 100 dentro dos 150 do centro. O componente põe o dele em
   50% da caixa; aqui é 66%, para ficar na mesma proporção dos nós (56 em 80)
   e a origem continuar sendo a maior coisa do desenho. */
.cf-ic--centro{width:100px;height:100px}

/* ---- 1.1 campos de formulário ---- */
label{display:block;font-size:var(--fs-micro);font-weight:500;color:var(--text-2);margin-bottom:7px}
input,select{
  width:100%;font-family:var(--font-body);font-size:var(--fs-body);color:var(--text-1);
  background:transparent;border:0;border-bottom:1px solid var(--input-rule);border-radius:0;
  padding:9px 0;font-variant-numeric:tabular-nums;transition:border-color .15s ease;
}
input:hover,select:hover{border-bottom-color:var(--text-3)}
input:focus,select:focus{outline:0;border-bottom-color:var(--input-rule-focus)}
input:focus-visible,select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}

/* ---- 2.1 a integração ----
   Duas colunas soltas na folha: a malha de marcas à esquerda, a consulta à
   direita. Sem painel de vidro em volta — vinte tiles JÁ são vinte caixas, e
   uma caixa maior em torno delas empilha moldura sobre moldura. Aqui o que
   separa as duas colunas é o vão, não uma borda.

   A busca mora só na direita: a malha é ilustração e não filtra, porque a
   pergunta do bloco ("o meu está aí?") é respondida pela frase de resultado,
   não por tiles sumindo da vista. */
.erp-cols{
  display:grid;grid-template-columns:minmax(360px,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center;text-align:left;
  max-width:1000px;margin:var(--gap-block) auto 0;
}

/* Grade fixa de 5x4: vinte tiles, dezenove marcas e o contador fechando. Fixa
   e não auto-fill de propósito — com contagem fechada, deixar o navegador
   escolher a coluna só arrisca a última fila quebrar em número feio. */
.erp-malha{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(8px,1vw,12px);list-style:none;margin:0;padding:0;
}
/* O tile arredondado é a silhueta recorrente da página, mas aqui ele NÃO é
   vidro: sobre a folha, sem painel por baixo, o vidro não teria o que filtrar
   além do bloom — e ficaria um retângulo cinza. Folha chapada e fio de 1px. */
.erp-tile{
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:1;padding:8px;
  border-radius:12px;background:var(--folha);border:1px solid var(--regua-vidro);
  box-shadow:0 1px 2px rgba(34,98,227,.05);
}
/* O andaime. Sem arquivo de marca o nome fica; com arquivo, a marca entra e o
   nome sai. Um estado por vez, então o leitor de tela lê um nome só. */
/* Teto de 24 de ALTURA, com até 36 de largura, e `contain` mantendo a
   proporção de origem. O teto que importa é o da altura: é ele que iguala o
   peso das marcas na fila. Limitar também a largura em 24 punha as deitadas
   de joelhos — Siagri é 3:1 e desenhava 24x12, um fiapo ao lado de um Omie
   quadrado cheio. Com 36 de folga lateral, a deitada cresce para o lado até
   igualar a massa da quadrada, e nenhuma passa de 24 de altura. */
.erp-tile img{display:none;width:36px;height:24px;object-fit:contain}
.erp-tile.tem-marca img{display:block}
.erp-tile.tem-marca .erp-tile-nm{display:none}
.erp-tile-nm{
  font-size:var(--fs-micro);line-height:1.2;font-weight:500;color:var(--text-2);
  overflow-wrap:anywhere;
}
/* O contador fecha a grade sem fingir ser mais uma marca — o fio pontilhado
   diz que a lista continua fora do quadro. Mas ele carrega o número da
   manchete, então não pode ser o tile mais apagado da grade: ganha a mesma
   folha das vizinhas, o traço em cheio e a tinta forte. 17:1 sobre a folha. */
.erp-tile--mais{
  border-style:dashed;border-color:var(--rule-1);box-shadow:none;
  font-size:var(--fs-ui);font-weight:600;color:var(--text-1);
  font-variant-numeric:tabular-nums;
}

/* A pergunta virou o título da coluna: sem o painel, a direita precisa abrir
   com alguma coisa, e um rótulo de 13px não abre nada. Continua sendo <label>
   de verdade, preso ao campo — só a voz mudou. */
.erp-pergunta{
  display:block;margin-bottom:var(--gap-element);
  font-family:var(--font-title);font-weight:600;
  font-size:var(--fs-title);line-height:var(--lh-title);color:var(--text-1);
}
.erp-campo{display:flex;gap:var(--gap-element);align-items:flex-end;flex-wrap:wrap}
.erp-campo > input{flex:1 1 200px;width:auto}
.erp-result{margin-top:var(--gap-element);font-size:var(--fs-ui);min-height:26px}
.erp-hit{color:var(--credito);font-weight:500}
.erp-miss{color:var(--text-2)}

.erp-checks{
  list-style:none;margin:var(--gap-group) 0 0;padding:var(--gap-element) 0 0;
  border-top:1px solid var(--regua-vidro);display:grid;gap:12px;
}
.erp-checks li{
  display:grid;grid-template-columns:17px 1fr;gap:10px;align-items:start;
  font-size:var(--fs-micro);line-height:1.5;color:var(--text-2);
}
.erp-checks svg{margin-top:1px;color:var(--credito);flex:none}

/* Empilhado, a consulta vem antes da ilustração: quem rolou até aqui quer
   digitar o nome do próprio ERP, não contar marcas. */
@media(max-width:900px){
  .erp-cols{grid-template-columns:1fr;gap:var(--gap-block);max-width:620px}
  .erp-lado{order:-1}
}
/* No telefone a grade vira 4x5. A forma pedida é a do desktop; aqui cinco
   colunas dão tile de 59px, e nesse tamanho o nome do andaime parte no meio
   da palavra ("Dyna/mics"). Vinte divide por quatro sem sobrar, então a
   última fila continua fechando com o contador. */
@media(max-width:560px){
  .erp-malha{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---- 3.1 a seguranca ----
   A seção que responde à objeção, e por isso ela é a mais sóbria da página:
   sem animação, sem peça que acorda, sem fio viajando. Quem chega aqui está
   com o pé atrás e quer ler, não assistir.

   Quatro células de controle em cima, os selos embaixo, separados pela mesma
   régua de vidro que a lista de provas da integração usa. */
/* ---- a caixa escura ----
   EXCEÇÃO REGISTRADA ao mundo da página. O DESIGN.md diz, na descrição da
   Vitrine Difusa: "não existe faixa chapada, não existe cartão colorido".
   Esta é a primeira. Foi pedida pelo Bruno em 17/09/2026 e é deliberada: a
   seção que derruba objeção é a única que não demonstra nada, e o contraste
   de fundo é o que a separa do resto em vez de uma peça animada.

   O azul é o --azul-950, o mesmo do botão. Não é um azul novo: é a tinta
   mais firme que a página já tem, agora em área cheia em vez de em rótulo. */
.seg-caixa{
  position:relative;overflow:hidden;
  max-width:1120px;margin-inline:auto;text-align:left;
  background:var(--azul-950);border-radius:16px;
  padding:clamp(30px,4vw,56px);
  --mouse-x:50%; --mouse-y:50%;
}
/* -------- SpotlightCard (React Bits) --------
   CSS da biblioteca, com duas trocas obrigatórias pela régua daqui: a ponta
   do gradiente sai em #8051E1 a alfa zero e não em `transparent`, porque a
   interpolação passa pelo preto e suja o roxo; e a casca (fundo, borda, raio,
   recuo) fica sendo a da caixa, que já existia — do componente vem o efeito,
   não a aparência. */
.seg-caixa::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  /* RAIO EXPLÍCITO, que o componente não tem. Sem tamanho, `circle` cai em
     farthest-corner: no cartão pequeno da biblioteca isso dá um foco: nesta
     caixa de 1120x477 dá um raio de ~600px, e a luz se espalha tão fina que
     não se lê. Com raio fechado ela volta a ser holofote. */
  background:radial-gradient(circle clamp(240px,32vw,460px) at var(--mouse-x) var(--mouse-y),
    rgba(128,81,225,.50), rgba(128,81,225,0) 80%);
  opacity:0;transition:opacity .5s ease;
}
.seg-caixa:hover::before,
.seg-caixa:focus-within::before{opacity:.6}
/* O holofote é absoluto e pintaria por cima do conteúdo, que está no fluxo. */
.seg-caixa > *{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){
  .seg-caixa::before{transition:none}
  .seg-caixa:hover::before,.seg-caixa:focus-within::before{opacity:0}
}
/* Dentro da caixa a varredura não serve: o gradiente vai do grafite ao roxo
   e no escuro ele some. Branco chapado, e a regra da varredura continua
   valendo em todas as outras manchetes da página. */
#seguranca .hist h2{
  font-size:clamp(26px,calc(6vw - 3px),60px);
  letter-spacing:var(--ls-headline);
  max-width:none;white-space:nowrap;
  text-align:left;margin-inline:0;
  background-image:var(--grad-caixa);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  #seguranca .hist h2{background-image:none;color:var(--white);-webkit-text-fill-color:currentColor}
}
@media print{
  #seguranca .hist h2{background-image:none;color:var(--grey-900);-webkit-text-fill-color:currentColor}
}
#seguranca .seg h3{color:var(--white)}
#seguranca .seg p,
#seguranca .selo-nm{color:var(--azul-100)}
#seguranca .seg-ic,
#seguranca .selo-ic{color:var(--aro-ciano)}
@media(max-width:640px){
  #seguranca .hist h2{white-space:normal;font-size:clamp(26px,5.6vw,34px);max-width:17ch}
}

/* Sem caixa branca: o conteúdo assenta na folha. O painel de vidro existe
   para peça de demonstração; aqui o que há é texto e selo, e emoldurá-los
   só acrescentava uma borda para o olho pular. */
/* O vão abaixo da manchete acompanha o tamanho dela. No degrau de 40px o
   bloco padrão bastava; com a manchete em 60px, 40 davam 0,58x o corpo da
   letra e a seção lia comprimida logo onde ela precisa respirar — é a única
   sem subtítulo e sem painel, então o vazio é o que separa as duas partes. */
/* Encurtado depois que a caixa escura entrou. Solto na folha, a manchete
   precisava do vão para se separar do resto da página; dentro da caixa quem
   faz essa separação é o recuo dela, e o vão interno passou a competir com
   ele — ficava maior que o próprio recuo e a manchete descolava do conteúdo
   que ela apresenta. Agora fica logo abaixo do recuo da caixa. */
.seg-corpo{margin-top:clamp(32px,3.5vw,48px);text-align:left}
.segs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap-block) clamp(24px,3vw,44px);
}
.seg-ic{
  display:block;width:20px;height:20px;color:var(--azul-600);
  margin-bottom:var(--gap-element);
}
.seg h3{
  font-family:var(--font-title);font-weight:600;
  font-size:var(--fs-title);line-height:var(--lh-title);color:var(--text-1);
  margin-bottom:var(--gap-text);
}
.seg p{font-size:var(--fs-micro);line-height:1.6;color:var(--text-2);max-width:42ch}

/* Os selos não são cartão: emoldurar um selo dentro da caixa é moldura sobre
   moldura, e o desenho do selo já é a própria moldura.

   Fila corrida à esquerda, com um fio vertical entre um e outro. O fio faz o
   trabalho que a régua horizontal fazia — dizer onde um selo acaba e o outro
   começa — sem ter que atravessar a caixa inteira para isso. */
.selos{
  list-style:none;margin:clamp(40px,4vw,56px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
}
.selo{
  display:flex;align-items:center;gap:10px;text-align:left;
  padding:2px clamp(12px,1.5vw,22px);
}
.selo:first-child{padding-left:0}
.selo + .selo{border-left:1px solid rgba(255,255,255,.16)}
/* Cerca de trinta por cento menores: o desenho de 32 para 22px (-31%) e o
   nome de 20 para 15 (-25%). Os 14px exatos não existem na rampa — ela vai de
   20 a 15 a 13 — e inventar um degrau por causa de um selo é drift. O 15 é o
   degrau de UI, que já é Inter 600: aos 15 o nome deixa de ser título e volta
   para a Inter de qualquer forma, pela regra dos papéis. */
.selo-ic{display:block;width:22px;height:22px;flex:none}
.selo-nm{
  font-family:var(--font-body);font-weight:600;
  font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--text-1);
}

/* Empilhados a partir do mesmo ponto em que as três colunas empilham. O corte
   é onde a fila deixa de caber inteira: quebrando de linha, o selo que abre a
   linha nova leva o próprio fio junto, e sobra um risco vertical na margem
   separando nada. Medido em 620px, era exatamente o que acontecia com o
   "SSO / SAML". Acima de 860 a fila cabe com folga (precisa de ~580 de 749). */
@media(max-width:860px){
  .selos{flex-direction:column;align-items:flex-start;gap:var(--gap-element)}
  .selo{padding:0}
  .selo + .selo{border-left:0}
}
@media(max-width:860px){
  /* Empilhadas e sem moldura, as células precisam do degrau de bloco entre
     si: com 24 elas encostavam e liam como um parágrafo só. */
  .segs{grid-template-columns:1fr;gap:var(--gap-block)}
}

/* ---- 2.2 a propagação ----
   Era o campo commitado, azul em força total. Agora é um painel de vidro como
   os outros: a origem em cima, as quatro superfícies como pastilhas com o véu
   índigo do balão do chat, e o pulso com as MESMAS cores do cartão de saída
   do Levir (#E8F0FF / #2970FF) — é o mesmo gesto: um dado chegou. */
.prop-origem{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-group);flex-wrap:wrap;padding-bottom:var(--gap-group);border-bottom:1px solid var(--regua-vidro)}
.prop-origem .lbl{font-size:var(--fs-micro);color:var(--text-3)}
.prop-origem .t-numeric{color:var(--grey-900);line-height:1.15;margin-top:4px}
.prop-surfaces{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:var(--gap-group)}
@media(max-width:820px){.prop-surfaces{grid-template-columns:repeat(2,1fr)}}
.surface{
  padding:18px 18px 20px;border-radius:12px;
  background:var(--blanket-cor-light);border:1px solid transparent;
  transition:background-color .2s ease,border-color .2s ease;
}
.surface.pulse{background:#E8F0FF;border-color:#2970FF}
.surface-ic{width:36px;height:36px;display:block}
.surface-nm{margin-top:12px;font-size:var(--fs-micro);color:var(--text-3)}
.surface-val{margin-top:4px;font-weight:600;font-size:var(--fs-numeric-sm);color:var(--grey-900)}
.estorno{display:block;margin-top:3px;font-size:var(--fs-micro);font-weight:400;color:var(--text-3);text-decoration:line-through}
@media (prefers-reduced-motion:reduce){.surface{transition:none}}

/* ---- 3.2 o ecossistema ----
   Um painel só com a grade dentro — doze pastilhas de vidro seriam doze
   backdrop-filters, e a página já carrega nove. As células se separam por
   véu, como as linhas da 1.1. */
.prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:940px){.prods{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.prods{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prod{display:flex;align-items:center;gap:14px;padding:18px 16px;border-bottom:1px solid var(--regua-vidro)}
.prod:nth-last-child(-n+4){border-bottom:0}
@media(max-width:940px){.prod:nth-last-child(-n+4){border-bottom:1px solid var(--regua-vidro)}.prod:nth-last-child(-n+3){border-bottom:0}}
@media(max-width:620px){.prod:nth-last-child(-n+3){border-bottom:1px solid var(--regua-vidro)}.prod:nth-last-child(-n+2){border-bottom:0}}
.prod svg{width:40px;height:40px;flex:none}
.prod .nm{font-family:var(--font-title);font-weight:600;font-size:var(--fs-micro);line-height:1.25;color:var(--grey-900)}
.prod .ds{font-size:var(--fs-conta);color:var(--text-3);margin-top:2px}

/* ---- 3.3 as dúvidas ----
   O bloco FAQ 7 do React Bits Pro, trazido para a folha. Do original vem a
   ESTRUTURA — trilho de 260px, painel ao lado, marca que desliza entre as
   categorias, uma resposta aberta por vez, o + que gira 45° e vira × dentro
   de um disco — e dele vem também a curva [0.22,1,0.36,1], que é o que dá o
   andamento do componente. A aparência é toda daqui: vidro no lugar do
   `bg-white ring-neutral-200`, azul-noite no lugar do `neutral-900`, e os
   raios da rampa da página (16 no painel, 12 na pastilha) no lugar do
   `rounded-3xl`/`rounded-xl` do Tailwind.

   DUAS COISAS DO BLOCO NÃO VIERAM, e as duas por causa da Regra da Geometria
   Parada: o `whileInView` que faz a seção subir 16px quando entra na tela, e
   o stagger de 0.06s que cascateia as linhas. Nesta página nada entra em
   cena — a peça ocupa o lugar desde o primeiro quadro e só troca de estado.
   O que sobrou de movimento responde a clique: a marca deslizando, o painel
   trocando e a resposta abrindo. */
/* A curva do bloco, `[0.22, 1, 0.36, 1]` no motion. Fica ESCOPADA na seção e
   não na camada de tokens: ela é o andamento de um componente importado, não
   uma decisão da página — a página tem a dela em `--ease`, e quem não é o FAQ
   continua lendo aquela. */
#faq{--faq-curva:cubic-bezier(.22,1,.36,1)}

.faq-in{max-width:var(--sheet);margin-inline:auto;text-align:center}

/* Manchete e subtítulo CENTRADOS, a pedido, em 18/09.
   O que havia aqui antes era alinhamento à esquerda, com esta justificativa:
   o trilho e o painel formam duas colunas travadas à esquerda, e manchete
   centralizada sobre elas deixa dois eixos competindo. A troca assume esse
   custo — o cabeçalho passa a ter eixo próprio, diferente do conteúdo abaixo.
   Fica registrado para não parecer descuido. A varredura de gradiente
   continua a mesma das outras seções. */
#faq .hist h2{
  text-align:center;margin-inline:auto;max-width:24ch;
  /* A ÚNICA manchete da página sem `text-wrap:balance`, que h1,h2,h3 herdam
     da base. Medido nesta frase, aos 60px: a frase inteira pede 1253px e a
     coluna dá menos, então ela quebra em duas de qualquer jeito. O balance
     iguala as duas metades e corta em "antes", jogando o "da" para abrir a
     segunda linha — preposição órfã no começo de linha, que é justamente o
     que o balance existe para evitar em outros lugares. A quebra gulosa
     leva "antes da" (770px) na primeira e fecha com "primeira reunião". */
  text-wrap:wrap;
}
#faq .hist .sub{margin-inline:auto;max-width:62ch}

/* 260px de trilho: a medida do original, e ela cabe o rótulo mais longo
   ("ERP e integrações") em uma linha com o contador do lado. O vão de 48
   entre as colunas é o `lg:gap-12`. */
/* O conteúdo volta a alinhar à esquerda: quem centrou foi só o cabeçalho. */
.faq-grade{
  text-align:left;
  display:grid;grid-template-columns:260px minmax(0,1fr);
  gap:clamp(32px,4vw,48px);
  margin-top:clamp(40px,5vw,56px);
}

/* O trilho acompanha a rolagem, porque o painel é mais alto que ele e sem
   isto as categorias saem de vista justo enquanto se lê a resposta. Para em
   116px, que é o mesmo degrau do `scroll-margin-top` das seções — o valor
   que desconta o cabeçalho flutuante. */
.faq-trilho{
  position:sticky;top:116px;align-self:start;
  display:flex;flex-direction:column;gap:6px;
}
.faq-cat{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap-element);
  width:100%;padding:12px 16px;border:0;background:none;cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-ui);line-height:var(--lh-ui);
  font-weight:500;color:var(--text-3);text-align:left;
  border-radius:12px;
  transition:color .2s ease;
}
.faq-cat:hover{color:var(--text-1)}
.faq-cat[aria-selected="true"]{color:var(--text-1)}
.faq-cat-n{font-size:var(--fs-conta);color:var(--text-3)}

/* A marca que desliza. No original é o `layoutId` do motion: um elemento só,
   que o framework reposiciona quando o ativo muda. Aqui é o mesmo elemento
   só, posicionado pelo script com translate e medida — sem biblioteca, e com
   a transição na própria transformação.

   Ela é irmã dos botões e não filha, e fica ATRÁS deles (z-index 0 contra 1):
   dentro do botão ela precisaria de um segundo nó para o texto escapar do
   fundo, que é exatamente o que o original faz com o `<span class="relative
   z-10">`. Como irmã, o texto não precisa de nada. */
.faq-marca{
  position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  border-radius:12px;
  background:var(--vidro-forte);
  -webkit-backdrop-filter:var(--vidro-desfoque);backdrop-filter:var(--vidro-desfoque);
  box-shadow:var(--brilho-interno),0 1px 2px rgba(34,98,227,.06);
  transform:translate(0,0);
  transition:transform .4s var(--faq-curva),width .4s var(--faq-curva),height .4s var(--faq-curva);
  opacity:0;
}
/* Sem JS não há quem a posicione, e uma pastilha de vidro parada no canto do
   trilho é sujeira. Ela só aparece depois que o script a coloca no lugar —
   e o primeiro posicionamento é sem transição, senão ela entra deslizando do
   canto superior, que é justamente o que a Geometria Parada proíbe. */
.faq-trilho.pronto .faq-marca{opacity:1}
.faq-marca.sem-curva{transition:none}

/* O palco tem piso de altura para a troca de categoria não encolher a página
   sob o dedo de quem clicou. O original reserva 430px para três perguntas por
   categoria; aqui são duas, e o número veio de medir: com a primeira resposta
   aberta os três painéis dão 424 (plataforma), 397 (ERP) e 370 (modelos) na
   coluna cheia, então o piso é o maior deles. Ele só vale onde a coluna é
   larga — quanto mais estreita, mais a resposta quebra e mais alto o painel
   fica, e o piso deixa de valer sozinho. Abaixo de 1080 as colunas empilham
   e ele sai de cena, senão sobraria como vazio no fim da seção. */
.faq-palco{min-height:424px}
.painel--faq{margin:0;padding:0;overflow:hidden}
/* Só o painel da categoria ativa ocupa o palco. Os outros saem do fluxo pelo
   atributo hidden, que o script gerencia. */
.painel--faq[hidden]{display:none}
/* A troca de painel é o `AnimatePresence` do original reduzido ao que se vê:
   o novo painel chega em 300ms subindo 10px. O que sai não se despede, porque
   os dois estariam no mesmo lugar do palco ao mesmo tempo. */
@media(prefers-reduced-motion:no-preference){
  .painel--faq.entra{animation:faq-entra .3s var(--faq-curva) both}
}
@keyframes faq-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.faq-cab{
  padding:20px clamp(22px,3vw,32px);
  border-bottom:1px solid var(--regua-vidro);
}
.faq-cab h3{
  font-family:var(--font-title);font-weight:600;
  font-size:var(--fs-title);line-height:var(--lh-title);color:var(--text-1);
}
.faq-cab p{margin-top:4px;font-size:var(--fs-ui);line-height:1.45;color:var(--text-2)}

.faq-item + .faq-item{border-top:1px solid var(--regua-vidro)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;padding:20px clamp(22px,3vw,32px);
  border:0;background:none;cursor:pointer;text-align:left;
}
/* Inter 600 no corpo de 16, e não Jakarta: pela regra dos papéis a Jakarta
   carrega o degrau de título, que aqui é o nome da categoria no cabeçalho do
   painel. A pergunta é a linha de uma lista dentro dele — mesmo peso visual
   do `font-medium text-base` do original, mesma família do resto do texto. */
.faq-q-tx{
  flex:1;font-family:var(--font-body);font-weight:600;
  font-size:var(--fs-body);line-height:1.4;color:var(--text-1);
  transition:color .2s ease;
}
.faq-q:hover .faq-q-tx{color:var(--interactive)}

/* O disco de 32 com o + dentro, do original. Fechado é o véu cinza; aberto é
   o azul-noite do botão de conversão — a tinta mais firme que a página tem,
   que é como o original usa o `neutral-900`. O giro de 45° é o mesmo desenho
   servindo aos dois estados. */
.faq-sinal{
  flex:none;display:grid;place-items:center;
  width:32px;height:32px;border-radius:var(--r-pill);
  background:var(--rule-2);color:var(--text-3);
  transition:transform .35s var(--faq-curva),background-color .2s ease,color .2s ease;
}
.faq-sinal svg{width:16px;height:16px}
.faq-q[aria-expanded="true"] .faq-sinal{
  transform:rotate(45deg);
  background:var(--btn-primary-bg);color:var(--btn-primary-fg);
}

/* A abertura por grade: a linha vai de 0fr a 1fr e o navegador interpola a
   altura sozinho, sem script medindo nada e sem `max-height` chutado alto
   demais (que faz a resposta curta abrir com atraso). O filho precisa do
   overflow escondido, senão o texto vaza durante o trajeto. */
.faq-r{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--faq-curva);
}
.faq-r-in{overflow:hidden}
.faq-q[aria-expanded="true"] + .faq-r{grid-template-rows:1fr}
.faq-r p{
  padding:0 clamp(22px,3vw,32px) 24px;
  max-width:68ch;
  font-size:var(--fs-body);line-height:1.7;color:var(--text-2);
  opacity:0;transition:opacity .3s var(--faq-curva);
}
.faq-q[aria-expanded="true"] + .faq-r p{opacity:1}

@media(prefers-reduced-motion:reduce){
  .faq-marca,.faq-sinal,.faq-r,.faq-r p,.faq-q-tx{transition:none}
}

/* Empilha onde o trilho de 260 + o painel deixam de caber sem espremer a
   resposta: abaixo de 1080 o painel cairia para menos de 700px e a linha de
   texto ficaria mais curta que a do resto da página. Empilhado, o trilho
   vira uma fila que rola na horizontal — é o comportamento do original no
   `lg:` breakpoint, e é o único lugar em que a marca desliza para o lado em
   vez de para baixo. */
@media(max-width:1080px){
  .faq-grade{grid-template-columns:1fr;gap:var(--gap-group)}
  /* RELATIVE, e não static: a marca é absoluta e mede a posição do botão com
     offsetLeft/offsetTop, que são relativos ao offsetParent. Com o trilho
     estático o offsetParent virava um ancestral qualquer lá em cima e a
     marca ia parar a 12916px do topo — invisível, fora da seção. O sticky do
     layout largo já posicionava o trilho por acidente; aqui ele precisa ser
     posicionado de propósito. */
  .faq-trilho{
    position:relative;flex-direction:row;
    overflow-x:auto;padding-bottom:4px;
    scrollbar-width:none;
  }
  .faq-trilho::-webkit-scrollbar{display:none}
  .faq-cat{width:auto;flex:none}
  .faq-palco{min-height:0}
}
@media(max-width:560px){
  .faq-q{gap:var(--gap-element);padding-inline:18px}
  .faq-cab,.faq-r p{padding-inline:18px}
}

/* ---- 4.1 o encerramento ----
   Os selos de confiança viram uma linha em Conta, a única voz de rótulo da
   página, separados por ponto. Eram verdes; na vitrine cor é luz de fundo ou
   fio de acento, não rótulo. (PRODUCT.md: não verificados — não publicar em
   domínio real sem confirmar.) */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;margin-top:var(--gap-group)}
.trust span{font-size:var(--fs-conta);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-500)}
.trust span + span::before{content:"·";margin:0 12px;color:var(--grey-200)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-group)}
@media(max-width:560px){.fields{grid-template-columns:1fr}}
.field-full{grid-column:1/-1}
.err{display:block;font-size:var(--fs-micro);color:var(--debito);margin-top:6px}
input[aria-invalid="true"],select[aria-invalid="true"]{border-bottom-color:var(--vermelho-500)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-fine{font-size:var(--fs-micro);color:var(--text-3);margin-top:var(--gap-element)}
.success{display:none;border-top:1px solid var(--regua-vidro);padding-top:var(--gap-group)}
.success.on{display:block}
.success h3{font-family:var(--font-title);font-weight:600;font-size:var(--fs-title);color:var(--credito)}
.success p{margin-top:10px;color:var(--text-2);font-size:var(--fs-ui)}
.devnote{margin-top:var(--gap-group);font-size:var(--fs-micro);color:var(--text-3);border:1px dashed var(--grey-200);padding:14px;border-radius:8px}
.devnote code{font-size:var(--fs-conta);word-break:break-all}

/* ============================================================================
   O FLUXO — continuação do topo
   ----------------------------------------------------------------------------
   Duas peças numa linha, ligadas por um fio: o chat do Levir e a tela do
   produto. O fio é desenhado em JS a partir das caixas reais, então acompanha
   qualquer largura. Nada entra em cena: tudo ocupa o lugar desde o primeiro
   quadro e só muda de estado, para a composição nunca pular.

   A tela do produto é ILUSTRAÇÃO: aria-hidden, e o texto dela é minúsculo de
   propósito, porque é textura. A leitura de verdade está no chat, em tamanho
   normal, e a descrição para leitor de tela está em #fluxo-desc.
   ============================================================================ */
.fluxo{
  position:relative;
  /* O halo do arco sai 64px para fora da tela, e na direita isso passa do
     recuo da página. `clip` e não `hidden`: hidden faria o outro eixo virar
     `auto` e criaria um contexto de rolagem — clip só recorta. */
  overflow-x:clip;
  padding:clamp(40px,5vw,76px) 0 clamp(96px,11vw,188px);
  /* O grão mora AQUI, e não na ::after: esta regra pode ter cor de fundo
     opaca, e a pseudo não — lá ela cobriria estas três lavagens. É também
     onde ele serve para o que foi feito: a faixa do meio, atrás dos cartões
     de vidro. No pé, a massa de cor da ::after passa por cima dele. */
  background-color:var(--folha);
  background-image:
    var(--grao),
    radial-gradient(1200px 560px at 50% -10%, var(--w-azul),   var(--w-azul-0) 62%),
    radial-gradient(1000px 520px at 100% 60%, var(--w-roxo),   var(--w-roxo-0) 60%),
    radial-gradient(900px 480px at 0% 90%,    var(--w-ciano),  var(--w-ciano-0) 62%);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-blend-mode:multiply,normal,normal,normal;
}
.fluxo-in{position:relative;z-index:1;max-width:1478px;margin:0 auto;padding-inline:var(--gutter);text-align:center}

/* ---- o campo colorido do pé ----
   Quatro blooms da rampa 200 subindo da borda de baixo (turquesa saiu em
   16/09), mais dois de meia altura atrás dos cartões. O grão não mora aqui
   — ver .fluxo. Fica atrás de tudo (z 0 contra z 1 do conteúdo) e não encosta em texto:
   a seção termina nos cartões, e daqui para baixo só há respiro. É a
   superfície que faz o vidro fosco ler como vidro. */
.fluxo::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    /* Primeira camada = a de cima. Um esmaecimento da PRÓPRIA cor da página
       cobrindo o topo da seção: a faixa entra a partir da folha em vez de
       começar num degrau. Cobre também o grão, que sozinho já marcava a
       emenda entre as seções. */
    linear-gradient(180deg, var(--folha) 0%, #FFFFFF00 20%),
    /* O pé: a massa de cor, quatro blooms saindo da borda de baixo. */
    radial-gradient(820px 420px at  6% 102%, var(--c-roxo),     var(--c-roxo-0) 66%),
    radial-gradient(920px 460px at 34% 108%, var(--c-ciano),    var(--c-ciano-0) 64%),
    radial-gradient(780px 400px at 62% 100%, var(--c-magenta),  var(--c-magenta-0) 66%),
    radial-gradient(960px 480px at 96% 110%, var(--c-indigo),   var(--c-indigo-0) 64%),
    /* Os dois de meia altura ficam atrás dos cartões: é a cor que o vidro
       fosco desfoca. Sem eles o vidro não tem o que mostrar. Nessa força o
       #5D6B98 dos horários e dos passos dá 4,6:1 através do vidro. */
    radial-gradient(700px 360px at 16%  62%, #8CCDEB8C, #8CCDEB00 70%),
    radial-gradient(660px 340px at 74%  56%, #D9C4F57A, #D9C4F500 72%);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}
.fluxo h2{
  font-family:var(--font-title);font-weight:700;
  /* Linha única. Remedido após a troca de fonte: a frase pede 16,0× o corpo
     em Plus Jakarta Sans 700, contra 17,1× em Poppins. Sendo mais estreita,
     calc(6vw - 3px) cabe na largura útil em qualquer tela, e o teto sobe de
     56 para 60 para a manchete ocupar a mesma largura óptica de antes.
     Abaixo de 640 a linha única ficaria pequena demais — aí vale quebrar. */
  font-size:clamp(26px,calc(6vw - 3px),60px);
  line-height:var(--lh-headline);letter-spacing:var(--ls-headline);
  white-space:nowrap;max-width:none;margin-inline:auto;
  background-image:var(--grad-hero);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .fluxo h2{background-image:none;color:var(--grad-hero-solid);-webkit-text-fill-color:currentColor}
}
@media print{.fluxo h2{background-image:none;color:var(--grad-hero-solid);-webkit-text-fill-color:currentColor}}
@media(max-width:640px){
  .fluxo h2{white-space:normal;font-size:clamp(26px,5.6vw,34px);max-width:17ch}
}
.fluxo-sub{margin:var(--gap-element) auto 0;max-width:64ch;font-size:var(--fs-body);line-height:1.6;color:var(--grey-600)}

.palco-fluxo{
  position:relative;margin-top:clamp(36px,4.4vw,64px);text-align:left;
  /* O vão é o único trecho do fio que fica à vista: as pontas entram 20px por
     dentro de cada peça (DENTRO, no JS, que explica o número). O vão é largo
     de propósito para o ponto que viaja ter pista. */
  display:grid;grid-template-columns:minmax(320px,540px) minmax(0,1fr);
  gap:clamp(40px,10vw,180px);align-items:center;

  /* Menos 30% no conjunto. Por TRANSFORM, e nao remedindo as pecas: o chat
     e um porte 1:1 do Figma (Frame 1134, 540x548) com 87 valores fixos, e
     reescrever os 87 a 70% perderia a proveniencia e erraria em algum. A
     escala pega tudo junto, na mesma proporcao, sem refluxo.

     O fio sobrevive porque o JS le tudo de getBoundingClientRect, o viewBox
     inclusive: coordenadas e caixa ficam no mesmo espaco escalado.

     A transform nao encolhe a CAIXA de layout, so o desenho. Os 30% de
     sobra embaixo saem por margem negativa sobre --h-palco, que o mede()
     publica a cada carga e redimensionamento com o offsetHeight — altura de
     layout, imune a escala, entao nao ha realimentacao. */
  --escala-palco:.7;
  transform:scale(var(--escala-palco));
  transform-origin:top center;
  margin-bottom:calc((var(--escala-palco) - 1) * var(--h-palco, 0px));
}
@media(max-width:1080px){
  /* Empilhado, as pecas ja encolhem para caber na coluna. Escalar de novo
     so deixaria o texto do chat em 9,8px — a reducao e para a montagem
     lado a lado, onde ela esta no tamanho de projeto. */
  .palco-fluxo{
    grid-template-columns:minmax(0,1fr);justify-items:center;gap:56px;
    --escala-palco:1;transform:none;margin-bottom:0;
  }
  .chat{width:min(100%,540px)}
  .app{width:100%}
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .chat{background:rgba(255,255,255,.95)}
}

/* ---- o fio ----
   Camada de baixo (z 2) contra z 3 dos cartões: as pontas entram por dentro
   dos dois e só o trecho do vão fica à vista. */
.fios{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.fio{
  stroke:var(--azul-500);stroke-width:2;stroke-linecap:round;
  transition:stroke-dashoffset .9s var(--ease);
}
@media (prefers-reduced-motion:reduce){.fio{transition:none}}

/* ---- o que viaja pelo fio ----
   As duas peças correm pelo mesmo `offset-path` que o JS monta a partir do
   `d` do fio, então seguem a curva exata em qualquer largura. Ficam na
   camada do fio (z 2), abaixo dos cartões, e por isso desaparecem ao entrar
   em cada um — como se penetrassem a superfície. */
.viaja{
  position:absolute;left:0;top:0;z-index:2;pointer-events:none;
  offset-distance:0%;offset-rotate:auto;opacity:0;
}
/* Um ponto, não uma barra: qualquer coisa comprida numa pista de ~200px
   enche o vão e parece parada em vez de atravessar. 12px resolve o problema
   por construcão — pequeno o bastante para a pista ser muitas vezes o seu
   tamanho, que é o que faz o movimento ser legível. */
.ponto{
  width:12px;height:12px;border-radius:var(--r-pill);
  background:var(--azul-900);
}
/* A ida e a volta são a mesma peça, 1,4s cada. As rampas de opacidade
   ocupam um quarto do percurso de cada lado: a entrada e a saída ficam
   lentas o bastante para se ver o ponto nascer e morrer no fio. */
.ponto.corre{animation:viaja-ida 0.9333s cubic-bezier(.45,0,.4,1) forwards}
.ponto.volta{animation:viaja-volta 0.9333s cubic-bezier(.45,0,.4,1) forwards}
@keyframes viaja-ida{
  0%{offset-distance:0%;opacity:0}
  26%{opacity:1}
  74%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
@keyframes viaja-volta{
  0%{offset-distance:100%;opacity:0}
  26%{opacity:1}
  74%{opacity:1}
  100%{offset-distance:0%;opacity:0}
}
@supports not (offset-path: path("M0 0L1 1")){
  /* sem offset-path a peça não tem caminho para seguir: fica fora da cena */
  .viaja{display:none}
}
@media (prefers-reduced-motion:reduce){.viaja{display:none}}

/* ---- o aro de gradiente que gira em volta da tela ----
   A máscara recorta só o anel de 3px; o quadrado de gradiente cônico gira
   por baixo dela. Girar um `transform` em vez de animar o ângulo do cônico
   é o que faz isto funcionar sem depender de @property.

   Desde 17/09 o arco NÃO tem animação CSS própria. O ângulo e a presença
   chegam em --aro-angulo e --aro-prox, escritos quadro a quadro pelo roteiro
   com as mesmas curvas do BorderGlow. Duas variedades, uma fonte: o anel e o
   halo (.aro-luz) leem as duas, então giram e acendem juntos por
   construção, sem duas animações para sincronizar. */
/* O invólucro existe só para o aro poder ficar FORA do cartão: .app recorta
   com overflow:hidden, então nada dentro dele consegue ultrapassar a borda. */
/* z-index explícito: é ele que põe o invólucro — e portanto a interface e o
   aro — acima do fio (z 2). Nasceu de um bug do salto de escala, que criava
   contexto de empilhamento e prendia o z-index:3 do .app dentro do
   invólucro; o salto saiu, mas a ordenação continua sendo necessária. */
.tela{position:relative;z-index:3;width:100%}
.aro{
  /* Por fora do cartão: 5px de folga, e o raio acompanha — 12 do cartão mais
     os 5 de afastamento. */
  position:absolute;inset:-5px;z-index:6;pointer-events:none;
  border-radius:17px;overflow:hidden;padding:3px;
  opacity:calc(var(--aro-prox, 0) / 100);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
          mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.aro i{
  position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(var(--aro-angulo, 0deg));
  /* Um arco, não um anel inteiro: ~145° de cor e o resto transparente, com
     as duas pontas esmaecendo na própria cor (o mesmo hex a alfa zero) em vez
     de em `transparent` puro — senão a interpolação passa pelo preto e suja a
     ponta. Três cores: ciano, azul da marca e roxo. */
  background:conic-gradient(
    var(--aro-ciano-0)   0deg,
    var(--aro-ciano)    30deg,
    var(--aro-azul)     72deg,
    var(--aro-roxo)    112deg,
    var(--aro-roxo-0)  145deg,
    var(--aro-ciano-0) 360deg);
}

/* ---- o halo do arco ----
   O princípio que o BorderGlow trouxe, e que a primeira tentativa errou: luz
   não é borda. A camada fica FORA da peça — inset negativo, o filho
   recuado de volta — e carrega a pilha de sombras do componente: sete
   internas e seis externas, raios 1/3/6/15/25/50 e opacidades em queda
   geométrica. É a queda que faz ler como luz; uma sombra só, por maior que
   seja, lê como contorno.

   A janela do cônico abre exatamente onde o gradiente do anel tem cor (30°
   a 145° no referencial do próprio anel, com as bordas esmaecendo), então o
   halo VIAJA com o arco em vez de acender a moldura inteira.

   Fica em z 1, abaixo do .app (z 3): a metade de dentro some atrás do
   cartão opaco e só o vazamento aparece — que é o arranjo do componente,
   onde a luz também nasce por baixo da superfície.

   Uma adição defensiva ao componente: o -webkit-mask-image. Sem ele, um
   WebKit antigo mostraria o halo inteiro, sem recorte nenhum. */
.aro-luz{
  position:absolute;inset:calc(-1 * var(--aro-halo));
  z-index:1;pointer-events:none;
  -webkit-mask-image:conic-gradient(from calc(var(--aro-angulo, 0deg) + 30deg) at center,
    transparent 0%, #000 8%, #000 24%, transparent 32%);
          mask-image:conic-gradient(from calc(var(--aro-angulo, 0deg) + 30deg) at center,
    transparent 0%, #000 8%, #000 24%, transparent 32%);
  opacity:calc(var(--aro-prox, 0) / 100);
}
.aro-luz::before{
  content:"";position:absolute;inset:calc(var(--aro-halo) - 5px);
  border-radius:17px;
  box-shadow:
    inset 0 0 0 1px var(--luz-aro),
    inset 0 0 1px 0 var(--luz-aro-60),
    inset 0 0 3px 0 var(--luz-aro-50),
    inset 0 0 6px 0 var(--luz-aro-40),
    inset 0 0 15px 0 var(--luz-aro-30),
    inset 0 0 25px 2px var(--luz-aro-20),
    inset 0 0 50px 2px var(--luz-aro-10),
    0 0 1px 0 var(--luz-aro-60),
    0 0 3px 0 var(--luz-aro-50),
    0 0 6px 0 var(--luz-aro-40),
    0 0 15px 0 var(--luz-aro-30),
    0 0 25px 2px var(--luz-aro-20),
    0 0 50px 2px var(--luz-aro-10);
}
@media (prefers-reduced-motion:reduce){
  .aro,.aro-luz{display:none}
}


/* ---- estado pendente ----
   Opacidade ZERO, não um fantasma. A caixa continua ocupando o lugar, então
   a composição não pula — mas nada aparece antes de acontecer. Deixar a
   resposta em 14% atrás dos pontinhos de digitação mostrava a saída antes de
   o Levir ter chegado nela. */
.pend{opacity:0;transition:opacity .55s var(--ease)}
.pend.on{opacity:1}
@media (prefers-reduced-motion:reduce){.pend{transition:none}}

/* ---- o chat ----
   1:1 com o componente do Figma (Frame 1134, 540×548). Cada medida abaixo
   saiu do getBBox() dos nós do arquivo, não de estimativa no olho:
     cartão 540 · raio 12 · cabeçalho 44 · corpo com recuo 17
     coluna do trilho 32 · vala 12 · coluna de conteúdo 462
     avatar 32 · fio vertical 2, começa 12 abaixo do avatar e passa 12 do fim
     passos de 20 em 20 · cartão de saída 434×53, raio 12

   Uma troca deliberada: onde o Figma usa #7D89B0 em texto pequeno, uso
   #556289. O Figma usa #7D89B0, que dá 3,3:1 sobre branco — reprova. Passei
   para #5D6B98 e, depois que o cartão virou vidro sobre o campo colorido, a
   medição mostrou 4,43:1: ainda abaixo do piso. #556289 dá 5,1:1 através do
   vidro sobre o pior ponto do campo. Geometria idêntica, contraste de pé. */
.chat{
  position:relative;z-index:3;width:100%;max-width:540px;
  border-radius:12px;overflow:hidden;
  font-size:14px;line-height:16px;

  /* O cartão é só a moldura: sem fundo e sem filtro. O vidro está nas DUAS
     lamelas de dentro, cabeçalho e corpo, cada uma com o seu backdrop-filter.
     Foi o caminho oposto ao primeiro: com o filtro no cartão, o cabeçalho
     amostrava o vidro já resolvido do pai — um branco chapado — e lia como
     barra cinza. Como irmãos, os dois enxergam a página atrás do cartão e o
     cabeçalho fica visivelmente mais translúcido que o corpo. */
  background:transparent;
  box-shadow:var(--sombra-peca);
}
/* o anel de luz, acima das duas lamelas */
.chat::after,.app::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;box-shadow:var(--brilho-interno);
  transition:box-shadow .5s var(--ease);
}
.app.is--on::before{box-shadow:var(--brilho-interno-on)}
@media (prefers-reduced-motion:reduce){.chat::after,.app::before{transition:none}}
.chat-bar,.chat-corpo{
  -webkit-backdrop-filter:var(--vidro-desfoque);
  backdrop-filter:var(--vidro-desfoque);
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:backdrop-filter;
}
.chat-corpo{background:var(--vidro-forte)}
.chat-bar{
  display:flex;align-items:center;gap:9px;height:45px;padding:0 13px 0 16px;
  background:var(--vidro-lamela);border-bottom:1px solid rgba(17,19,34,.05);
}
.chat-logo{display:block;width:13px;height:16px;flex:none}
.chat-nome{font-size:14px;font-weight:500;line-height:20px;color:#556289}
.chat-x{margin-left:auto;display:grid;place-items:center;color:#556289}

.chat-corpo{padding:16px 16px 28px;position:relative}

.msg{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding-bottom:24px}
.msg--fim{padding-bottom:0}

.trilho{position:relative}
.fio-v{position:absolute;left:15px;top:44px;bottom:-12px;width:2px;border-radius:1px}
/* Blanket em vez de cor chapada: o fio do bloco do usuário é um véu sobre
   o vidro, então acompanha o que estiver atrás. O do Levir continua em
   cor sólida, porque ele marca o bloco ativo. */
.fio-v--quieto{background:var(--blanket-light-02)}
.fio-v--azul{background:#2970FF}

.av{
  position:relative;width:32px;height:32px;border-radius:var(--r-pill);overflow:hidden;
  display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--white);
}
.av--bp{background:#155EEF}
.av--lv{background:var(--white)}
.av--lv img{display:block;width:32px;height:32px}

/* A coluna de conteúdo sobe 4px em relação ao avatar: é assim no Figma, e
   faz o topo da caixa alta do nome encostar na borda de cima do avatar. */
.msg-corpo{margin-top:-4px}
.msg-cab{display:flex;align-items:flex-start;gap:12px;height:20px}
.msg-quem{font-size:14px;font-weight:500;line-height:20px;color:#404968}
.btn-mini{
  margin-left:auto;flex:none;width:20px;height:20px;border-radius:4px;background:#F9F9FB;
  display:grid;place-items:center;color:#556289;
}
.msg-hr{display:flex;align-items:center;gap:6px;height:16px;font-size:12px;color:#556289}
.msg-hr svg{flex:none}

.bolha{
  margin-top:14px;background:var(--blanket-cor-light);border-radius:12px;padding:9px 16px;
  color:#404968;
}
/* O indicador de digitação divide a célula com a resposta: some sem deixar
   buraco, e a geometria do cartão não depende de qual dos dois está visível. */
.fala{margin-top:9px;display:grid}
.fala > *{grid-area:1/1}
.resposta{color:#404968}
/* O texto que a datilografia ainda não alcançou. Invisível, mas presente:
   é ele que segura a geometria do cartão parada do primeiro quadro ao
   último. Fora do fluxo (display:none) o balão voltaria a crescer. */
.por-vir{visibility:hidden}
.resposta b{color:#155EEF;font-weight:600}

.pensa{align-self:start;margin-top:5px;display:flex;gap:4px;height:6px;opacity:0;transition:opacity .25s ease}
.pensa.on{opacity:1}
.pensa i{width:5px;height:5px;border-radius:var(--r-pill);background:#556289;animation:pensa 0.7333s infinite}
.pensa i:nth-child(2){animation-delay:.18s}
.pensa i:nth-child(3){animation-delay:.36s}
@keyframes pensa{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pensa,.pensa i{animation:none;transition:none}}

/* Passo de 20px vindo do Figma, mais 3 de respiro pedidos depois: a lista
   ficou com 23 de cadencia e o cartao cresceu os 18px correspondentes. */
.passos{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.passos li{
  display:flex;align-items:center;gap:0;height:20px;
  font-size:12px;color:#556289;
  opacity:0;transition:opacity .4s var(--ease);
}
.passos li.on{opacity:1}
.passos li svg{width:16px;height:16px;flex:none;filter:grayscale(1);transition:filter .4s ease}
.passos li.on svg{filter:none}
@media (prefers-reduced-motion:reduce){.passos li,.passos li svg{transition:none}}

.saida-lin{display:flex;align-items:flex-start;gap:8px;margin-top:13px}
.saida{
  position:relative;
  flex:1;min-width:0;display:flex;align-items:center;gap:13px;
  min-height:53px;padding:7px 18px;background:#F5F8FF;border:1px solid transparent;border-radius:12px;
}
.saida-ic{width:16px;height:16px;flex:none}
.saida > span{display:block;min-width:0}
.saida b{display:block;font-size:14px;font-weight:600;line-height:20px;color:#30374F}
.saida span span{font-size:12px;line-height:16px;color:#556289}
/* Duas batidas, contadas — não `infinite` cortado pelo reinicio do laço.
   Assim o número de pulsos não depende de quando o ciclo recomeça, e o
   cartão assenta sozinho no estado final antes do corte. */
.saida-lin.pulsa .saida{animation:pulsa 1.2667s var(--ease) 2}
@keyframes pulsa{
  0%,100%{background:#F5F8FF;border-color:transparent}
  50%    {background:#E8F0FF;border-color:#2970FF}
}
/* A LUZ do pulso, pela receita do BorderGlow: a pilha de sombras é estática
   num pseudo-elemento e o que anima é a OPACIDADE. É o que permite uma
   queda de seis raios sem animar seis cores — animar cor de sombra é caro e
   não interpola bem.

   Os raios são menores que os do componente (1/2/5/10/18/30 contra
   1/3/6/15/25/50): .chat recorta com overflow:hidden e a saída tem 16px de
   folga lateral, então com o raio cheio o halo morreria num corte duro em
   vez de esmaecer. A cor é o #2970FF do próprio cartão, em HSL.

   O fundo e o fio continuam pulsando junto: a luz é a adição, não a
   substituição. E o inset de -1px alinha o pseudo com a caixa de BORDA, que
   é onde o fio do pulso vive. */
.saida::after{
  content:"";position:absolute;inset:-1px;border-radius:12px;
  pointer-events:none;opacity:0;
  box-shadow:
    inset 0 0 0 1px hsl(220deg 100% 58% / 55%),
    inset 0 0 8px 0 hsl(220deg 100% 58% / 20%),
    0 0 1px 0 hsl(220deg 100% 58% / 45%),
    0 0 2px 0 hsl(220deg 100% 58% / 38%),
    0 0 5px 0 hsl(220deg 100% 58% / 30%),
    0 0 10px 0 hsl(220deg 100% 58% / 22%),
    0 0 18px 0 hsl(220deg 100% 58% / 14%),
    0 0 30px 2px hsl(220deg 100% 58% / 8%);
}
.saida-lin.pulsa .saida::after{animation:pulsa-luz 1.2667s var(--ease) 2}
@keyframes pulsa-luz{0%,100%{opacity:0}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .saida-lin.pulsa .saida,.saida-lin.pulsa .saida::after{animation:none}
}

/* ---- a tela do produto ----
   Uma moldura e uma imagem. O fantasma é do próprio div: enquanto a captura
   não existe, ou antes de a animação acordar a tela, o que se vê é a moldura
   carregando. Nenhuma tela recriada à mão — a de verdade entra por
   src/assets/tela-dre.png. */
.app{
  position:relative;z-index:3;width:100%;aspect-ratio:1440/960;
  background:var(--white);border-radius:12px;overflow:hidden;
  box-shadow:var(--sombra-peca);
}
.app-img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:top left;
  transition:filter .55s var(--ease);
}
/* O fantasma deixou de ser chapa cinza: é a própria interface desfocada,
   dessaturada e puxada para o azul, com a varredura de gradiente por cima.
   Lê como a tela chegando de longe, e não como placeholder genérico. O
   despertar é puxada de FOCO e só isso — sem escala.

   Havia um scale(1.03) aqui para cobrir a borda lavada que o blur() deixa
   ao amostrar fora da própria caixa. Saiu: era uma animação de escala
   disfarçada de correção, e a moldura é clara o bastante para a borda
   passar como vinheta em vez de defeito. */
.app.is--ghost .app-img{
  /* Metade do desfoque de antes: a 16px a interface virava mancha e perdia
     a leitura de "isto é uma tela de verdade chegando". A 8px ainda não dá
     para ler nada, que é o ponto, mas a forma continua lá. */
  filter:blur(8px) grayscale(1) contrast(.92) brightness(1.03);
}
@media (prefers-reduced-motion:reduce){.app-img{transition:none}}

.app.is--ghost{background:var(--grey-100)}
.app.is--ghost::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* Duas camadas: a varredura por cima, o véu azul embaixo. O véu devolve a
     cor que o grayscale tirou da imagem — azul da casa a 12%. */
  background-image:
    linear-gradient(100deg,#FFFFFF00 30%,#FFFFFFA6 50%,#FFFFFF00 70%),
    linear-gradient(0deg,var(--fantasma-veu),var(--fantasma-veu));
  background-size:220% 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
  animation:varre 1.0667s linear infinite;
}
/* Duas camadas exigem duas posições: um valor só valeria para as duas e
   arrastaria o véu junto com a varredura. */
@keyframes varre{
  from{background-position:120% 0,0 0}
  to  {background-position:-120% 0,0 0}
}
@media (prefers-reduced-motion:reduce){
  .app.is--ghost::after{
    animation:none;
    background-image:linear-gradient(0deg,var(--fantasma-veu),var(--fantasma-veu));
  }
}

/* ---- rodapé ----
   Mesma receita das seções, com um bloom só. A linha de cima ficou, porque
   rodapé sem borda lê como fim de página cortado — mas em véu, não em cinza. */
/* ---- rodapé ----------------------------------------------------------------
   A estrutura veio de um rodapé de agência (marca d'água gigante + colunas de
   link + linha legal). O que NÃO veio foi o mundo dele: lá a peça é uma faixa
   preta chapada de 1000px, e aqui isso seria defeito duas vezes — contra a
   Regra da Folha Branca e contra "Don't usar faixa de cor chapada como fundo
   de seção". Então a faixa virou folha branca com bloom, que é como esta
   página já resolvia o rodapé; só ganhou altura e um segundo bloom.

   Também não veio a faixa de CTA do original. A seção imediatamente acima
   (#agendar) JÁ é o formulário de conversão — repetir um CTA logo abaixo
   empilharia dois pedidos. O caminho para agendar ficou como link na coluna
   Recursos.                                                                  */
/* ---- o rodapé escuro ----
   Tinta própria do rodapé, na camada de componente e prefixada, como manda o
   PARALELO.md — as camadas 1 e 2 são do site inteiro e não cabem numa branch.

   O gradiente nunca fica mais claro que o botão. O botão é --azul-950
   (#0D2756, via --btn-primary-bg) e esse é o degrau MAIS CLARO daqui: ele abre
   no topo e desce para o grafite (#111322), que é o quase-preto de viés azul
   da própria paleta. A primeira versão abria em azul-900 (#1A3E83), um degrau
   ACIMA do botão — o rodapé ficava mais claro que a coisa mais firme da
   página, que é o contrário do que um rodapé faz.

   O grão saiu. Ele entra por `multiply`, que sobre a folha branca custa 5% de
   luz e funciona; sobre o azul-950 ele só escurece o que já é escuro e vira
   sujeira sem textura. A Regra do Grão pede base opaca — aqui a base é opaca,
   mas a mistura não tem o que fazer. */
.foot{
  /* grey_950 (#0E101B) da coleção oficial, um degrau abaixo do grafite. Ainda
     não existe como token na camada 1; fica aqui, prefixado, porque o
     PARALELO.md diz que camada 1 é de todo mundo e não cabe numa branch de
     seção. Quando alguém promover, esta linha sai. */
  --foot-fundo:#0E101B;
  --foot-tinta:var(--azul-100);
  --foot-tinta-fraca:rgb(209 224 254 / 62%);
  --foot-fio:rgb(255 255 255 / 14%);

  border-top:0;
  padding-block:clamp(48px,5.5vw,84px) var(--gap-block);
  background-color:var(--foot-fundo);
  background-image:linear-gradient(168deg,
    var(--azul-950) 0%, var(--grey-900) 46%, var(--foot-fundo) 100%);
  color:var(--foot-tinta);
}
.foot-in{
  max-width:var(--sheet);margin:0 auto;padding-inline:var(--gutter);
  display:flex;flex-direction:column;gap:clamp(32px,3.6vw,52px);
}

/* marca + colunas */
.foot-topo{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--gap-block);flex-wrap:wrap;
}
.foot-marca{display:flex;flex-direction:column;gap:var(--gap-element);max-width:34ch}
/* OS SELOS. Caixa de ALTURA fixa e largura livre, e nao o contrario: as tres
   pecas tem proporcoes diferentes (selo quadrado, marca 2,1:1, e a terceira
   ainda por vir) e alinhar pela largura faria a quadrada virar um bloco e a
   larga um risco. Altura igual e o que da peso igual a marcas diferentes. */
/* CONFLITO RESOLVIDO: a fila e o alinhamento a direita sao da branch do
   rodape; a ALTURA de 38px e do Bruno, que pediu ~60% dos 64 originais.
   Cada lado mudou uma coisa diferente e as duas cabem juntas. */
.foot-selos{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;column-gap:clamp(22px,3vw,44px);row-gap:20px}
.foot-selos li{display:flex;align-items:center;height:38px}
.foot-selos img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
/* O espaco ainda vago: ocupa o MESMO lugar que a imagem vai ocupar, para a
   composicao nao pular quando o arquivo chegar. */
.foot-selo-vago{width:38px;border:1px dashed var(--foot-fio);border-radius:8px;
  align-items:center;justify-content:center;text-align:center}
.foot-selo-vago span{font-size:9px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--foot-tinta-fraca);line-height:1.2}

.foot-cols{display:flex;gap:clamp(32px,5vw,96px);flex-wrap:wrap}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--gap-text)}
.foot-col li{font-size:var(--fs-micro);line-height:1.5}

/* A mesma sobrancelha de .rail-label / .logos-titulo: 12px, 500, .2em,
   maiúsculas, grey-500 (5,6:1 sobre a folha). A página já tem uma voz de
   rótulo e o DESIGN.md proíbe inventar a segunda. */
.foot-col-titulo{
  margin:0 0 var(--gap-element);
  font-family:var(--font-body);
  font-size:var(--fs-conta);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--foot-tinta-fraca);
}

/* (a marca d'agua "LeverPro" saiu em 18/09/2026, a pedido; era o unico uso
   da Regra da Varredura no rodape) */

.foot-legal{
  display:flex;justify-content:space-between;gap:var(--gap-group);flex-wrap:wrap;
  padding-top:var(--gap-group);border-top:1px solid var(--foot-fio);
  font-size:var(--fs-micro);color:var(--foot-tinta-fraca);
}

.foot a{color:var(--foot-tinta);text-decoration:none;transition:color .15s ease}
.foot a:hover{color:var(--white)}

/* ---- os selos no rodapé ----
   Fila à direita, abaixo das colunas. Antes eles ficavam empilhados na coluna
   da marca; aqui viram uma linha, e o alinhamento por ALTURA que já existia
   passa a valer na horizontal — é ele que dá peso igual a um selo quadrado,
   a uma marca 2,1:1 e ao espaço ainda vago. */
.foot-social{display:flex;justify-content:flex-end}
@media (prefers-reduced-motion:reduce){.foot a{transition:none}}

@media(max-width:767px){
  .foot-topo{gap:var(--gap-group)}
  .foot-cols{gap:var(--gap-block) clamp(32px,12vw,64px)}
}

/* ============================================================================
   PROVA EM NUMEROS  (.prova)
   ----------------------------------------------------------------------------
   No molde da secao de metricas do ClickUp: manchete e botao dividindo a
   primeira linha, e embaixo uma regua de quatro colunas com rotulo, numero
   grande e descricao no pe, separadas por fio vertical.

   O QUE VEIO DA REFERENCIA
     a divisao manchete-a-esquerda / botao-a-direita
     as quatro colunas com fio entre elas
     rotulo miudo em cima, numero grande, descricao ancorada no PE da coluna
     (e o alinhamento do pe que faz a regua ler como regua, e nao como quatro
     cartoes soltos: as descricoes tem alturas diferentes)

   O QUE VIROU LINGUAGEM DA CASA, e por que
     - os rotulos da referencia sao roxos; aqui sao a sobrancelha da casa
       (12px, 500, .2em, maiusculas, grey-500), a mesma de .rail-label e
       .logos-titulo. A Regra do Fio Unico reserva o acento para o arco e a
       moldura do console, e a pagina ja tem UMA voz de rotulo.
     - a manchete da referencia e bicolor, preto virando cinza. Aqui e a
       --grad-hero, que ja entrega essa passagem por conta propria e e o que a
       Regra da Varredura manda usar em manchete. O <b> continua marcando o
       trecho que carrega o numero, mas por PESO, nao por cor.
     - o botao da referencia e uma pilula preta; aqui e o botao da casa, que a
       Regra do Botao Firme define como azul-noite chapado, sem gradiente, sem
       sombra e sem borda.
     - os numeros levam tabular-nums, pela Regra do Numeral: sao numeros em
       posicao de comparacao, um ao lado do outro.
   ============================================================================ */
/* A COSTURA COM A SECAO DE CIMA.
   A seguranca ficou em branco chapado quando os blooms dela sairam, a pedido.
   Esta aqui tem lavagem, e a lavagem chega com forca na PROPRIA ARESTA de
   cima: medido ponto a ponto na largura, o topo compunha de #F6F9FD a #FBFCFE
   contra o #FFFFFF de cima — um degrau de 5 a 11 niveis de RGB ao longo de uma
   linha reta, que e onde o olho pega.

   A cura e a Regra da Folha Branca: todo esmaecimento que costura duas secoes
   resolve em #FFFFFF. Entra uma camada de branco POR CIMA da lavagem, opaca na
   aresta e morrendo em 200px. A secao comeca exatamente na cor da vizinha e a
   luz aparece depois, ja longe da junta. */
.prova{
  background-color:var(--folha);
  /* Lavagem PROPRIA, e nao a --wash da casa, por dois motivos.

     1. A COSTURA. A --wash ancora os dois blooms no alto (centros em -16% e
        8%), entao eles chegam com forca na aresta de cima. Medido ponto a
        ponto: o topo compunha de #F6F9FD a #FBFCFE contra o #FFFFFF da
        seguranca, que ficou branca chapada quando os blooms dela sairam — um
        degrau de 5 a 11 niveis de RGB ao longo de uma linha reta, que e onde
        o olho pega. Aqui os centros vao para o MEIO da altura e os raios sao
        escolhidos para a luz morrer antes das duas arestas: a secao comeca e
        termina em #FFFFFF exato, e a luz vive no miolo.

        A primeira tentativa foi por cima, uma camada de branco morrendo em
        200px. Fechou a costura e apagou a secao inteira: com 698px de altura
        e blooms no alto, os 200px de branco cobriam toda a luz que havia.
        Trocar a ancora resolve as duas coisas de uma vez.

     2. A TINT PASSA A VALER. `--wash` e declarada no :root, e var() dentro de
        custom property resolve NA DECLARACAO, nao no uso: a --wash ja chega
        aos descendentes com --w-1 e --w-2 substituidos pelos do :root. Quem
        escreve o gradiente na propria regra, como aqui, le os hues da secao.
        Esta secao e .tint--eco, entao agora ela e de fato indigo e roxo. */
  background-image:
    radial-gradient(900px 530px at  8% 50%, var(--w-1), var(--w-1-0) 66%),
    radial-gradient(760px 500px at 96% 46%, var(--w-2), var(--w-2-0) 62%);
  background-repeat:no-repeat,no-repeat;
  color:var(--text-1);
}
/* EMBAIXO, DUAS RODADAS DE CORTE (21/09): eram 100px de abertura, viraram 70
   e agora 42. Em cima o recuo continua inteiro — a assimetria e proposital:
   a secao abre com ar e fecha rente. */
.prova-in{max-width:var(--sheet);margin:0 auto;padding:var(--pad-entry) var(--gutter) calc(var(--pad-entry) * .42)}

/* ---- a primeira linha ---- */
/* O botao saiu daqui para debaixo da regua, entao a primeira linha nao divide
   mais espaco com ninguem: vira um bloco so. */
.prova-topo{padding-bottom:var(--gap-block)}
.prova-diz{max-width:62ch}
.prova-titulo{
  margin:0;
  font-family:var(--font-title);font-weight:500;
  font-size:var(--fs-headline);line-height:var(--lh-headline);
  letter-spacing:var(--ls-headline);
  background-image:var(--grad-hero);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* a folga do descendente entra pela regra compartilhada, mais acima */
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .prova-titulo{background-image:none;color:var(--grad-hero-solid);-webkit-text-fill-color:currentColor}
}
@media print{
  .prova-titulo{background-image:none;color:var(--grad-hero-solid);-webkit-text-fill-color:currentColor}
}
.prova-titulo b{font-weight:700}
/* Depois da regua e alinhado a esquerda: acompanha a manchete e o comeco das
   colunas, que e a margem que a secao inteira usa. */
.prova-cta{margin:var(--gap-block) 0 0;display:flex;justify-content:flex-start}

/* ---- a regua de quatro ----
   O fio vertical e `border-left` na coluna, menos na primeira: assim ele
   aparece ENTRE as colunas e nao nas pontas, e some sozinho quando a grade
   quebra para duas colunas no tablet. */
.prova-regua{
  margin:0;padding:var(--gap-block) 0 0;
  border-top:1px solid var(--regua-vidro);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.prova-col{
  display:flex;flex-direction:column;
  min-height:220px;
  padding:0 var(--gap-group);
}
.prova-col + .prova-col{border-left:1px solid var(--regua-vidro)}
.prova-col:first-child{padding-left:0}
.prova-col:last-child{padding-right:0}
/* a sobrancelha da casa, sem invencao */
.prova-regua dt{
  margin:0 0 var(--gap-element);
  font-size:var(--fs-conta);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-500);
}
.prova-num{
  margin:0;
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(34px,3.6vw,48px);line-height:1.05;letter-spacing:-.03em;
  color:var(--text-1);
  font-variant-numeric:tabular-nums;
}
/* `margin-top:auto` e o que ancora a descricao no PE da coluna, que e o que
   alinha as quatro entre si mesmo com alturas de texto diferentes. */
.prova-desc{
  margin:auto 0 0;
  font-size:var(--fs-micro);line-height:1.6;color:var(--text-2);
}


@media(max-width:900px){
  .prova-regua{grid-template-columns:1fr 1fr;row-gap:var(--gap-block)}
  .prova-col{min-height:0;padding:0 var(--gap-group)}
  .prova-col:nth-child(odd){padding-left:0;border-left:0}
  .prova-col:nth-child(even){padding-right:0}
}
@media(max-width:560px){
  .prova-regua{grid-template-columns:1fr}
  .prova-col{padding:0;border-left:0}
  .prova-col + .prova-col{border-left:0;border-top:1px solid var(--regua-vidro);padding-top:var(--gap-group)}
}

/* ============================================================================
   TITULO DA SECAO DE DEPOIMENTOS
   ----------------------------------------------------------------------------
   A secao veio de um projeto Tailwind e trazia a manchete em `text-4xl
   font-medium tracking-tight` — 36px na pilha de fontes do sistema
   (`ui-sans-serif`), que nem Manrope era. Entra na medida da casa como as
   outras. O id da a especificidade (1,1,0) e passa na frente das utilitarias
   de (0,1,0) sem !important. O elemento tambem deixou de ser <p>: e a
   manchete da secao, e a pagina pulava de h1 para h3 aqui.
   ============================================================================ */
/* O RETRATO VERTICAL do cartao, no lugar das iniciais. A moldura e a do bloco
   importado — `h-60 w-40` com `rounded-full`, ou seja 160x240 recortados em
   pilula —, e o arquivo e 168x256. Sao razoes quase iguais (0,656 contra
   0,667), entao o `cover` corta 4px no total: nao ha risco de decepar cabeca,
   e `center` basta. Sem as medidas no HTML o cartao pularia enquanto a foto
   carrega; com elas, o lugar ja esta reservado.

   `#sec-depoimentos` na frente porque a secao veio de um projeto Tailwind e
   suas utilitarias sao (0,1,0); o id da (1,1,0) e passa sem !important. */
#sec-depoimentos .dep-retrato{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
#sec-depoimentos .dep-titulo{
  margin:0;
  font-family:var(--font-title);font-weight:500;
  font-size:var(--fs-headline);line-height:var(--lh-headline);
  letter-spacing:var(--ls-headline);
  color:var(--text-1);
}

/* ============================================================================
   CABECALHO DA SECAO DE AGENTES  (.agcab)
   ----------------------------------------------------------------------------
   No molde do bloco de agentes do monday: sobrancelha de marca, manchete em
   duas linhas com a PRIMEIRA em gradiente e a segunda solida, subtitulo
   centrado e uma dupla de acoes — botao cheio mais link de texto com seta.
   Substituiu o par manchete-a-esquerda / paragrafo-a-direita do Figma.

   FIDELIDADE A REFERENCIA, a pedido: forma, cor e silhueta sao as dela; so a
   familia e os tamanhos de texto viram os da casa. Isso custa duas excecoes
   declaradas, e as duas estao marcadas abaixo, onde acontecem.

   A COR DO REALCE nao saiu do print a olho. A referencia vai de roxo a ciano,
   que e exatamente o arco do FIO UNICO da casa: --aro-roxo, --aro-azul,
   --aro-ciano. Usar o fio da casa da o mesmo desenho sem introduzir dois roxos
   e dois cianos na pagina.
   ============================================================================ */
/* Vao por elemento, e nao um `gap` unico. Na referencia o ritmo nao e parelho:
   a sobrancelha respira mais da manchete do que a manchete do subtitulo, e a
   dupla de acoes se afasta de novo. Tres degraus da regua da casa no lugar de
   um valor repetido quatro vezes. */
.agcab{
  display:flex;flex-direction:column;align-items:center;
  padding:0 16px;text-align:center;
}
/* Os seletores levam `.agcab` na frente, e nao e zelo: a secao importada traz
   `.importada :is(h1,h2,h3){font-family:inherit;font-weight:inherit;
   letter-spacing:inherit;margin:revert}`, que tem (0,1,1) e vencia as minhas
   regras de (0,1,0). Medido antes de consertar: peso 400 em vez de 500,
   entreletra `normal` em vez de -.03em, e margem de 49,8px em cima e embaixo —
   a do navegador, devolvida pelo `margin:revert`, que era de onde vinham os
   vaos errados. Com `.agcab` na frente sao (0,2,0) e passam. */
/* O vao JUNTO com a folga do descendente, numa declaracao so. Separadas, a
   regra de vao (que vem depois) zerava a margem negativa que cancela o recuo,
   e os 10,8px de cada lado voltavam a empurrar o layout. Aqui o topo desconta
   a folga do vao pedido e a base a devolve: o texto fica a 40px da sobrancelha
   e a 24 do subtitulo, que e o pedido, com o fundo do gradiente inteiro. */
/* O recuo de topo era o vao ate a sobrancelha de marca, que saiu em 20/09.
   Sem ela a manchete e o primeiro elemento do bloco, e quem manda na
   distancia ate a secao de cima passa a ser o recuo da secao — como em
   todas as outras. Sobra so a compensacao da folga do descendente. */
.agcab .agcab-titulo{margin:-.18em 0}
.agcab .agcab-sub{margin:var(--gap-group) 0 0}
.agcab .agcab-cta{margin:var(--gap-block) 0 0}
/* a sobrancelha: marca mais o nome do bloco, na voz de rotulo da casa */
/* `.agcab` na frente porque `.importada p{margin:revert}` e (0,1,1) e devolvia
   a margem do navegador: 16px em cima e embaixo, que somavam aos vaos. */
.agcab .agcab-marca{
  display:flex;align-items:center;gap:14px;margin:0;
}
/* O lockup novo (marca + LEVERPRO + 10X) e 5,65:1, contra 3,3:1 do PNG que
   saiu. A 26px de altura ele daria 147px de largura e dominaria a sobrancelha,
   entao desce para 20px — 113px, perto dos 86 que o anterior ocupava. */
.agcab-marca img{height:20px;width:auto;display:block}
.agcab-marca span{
  font-size:var(--fs-conta);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-500);
}
/* A PASTILHA DE PROGRAMA, a pedido, no lugar em que a referencia a poe: na
   sobrancelha, ao lado do rotulo do bloco. Contorno, nao cheia — e rotulo de
   estado, nao acao, e a Regra do Botao Firme reserva a silhueta cheia para
   acao. Tambem nao herda o `letter-spacing:.2em` nem a caixa alta do rotulo
   vizinho: "Early Access" e nome proprio de programa, nao rotulo de secao.
   `.agcab` na frente porque `.importada span` nao reseta nada hoje, mas o
   resto do bloco ja aprendeu a licao das regras (0,1,1) duas vezes. */
.agcab .agcab-selo{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:999px;
  background:var(--folha);
  box-shadow:inset 0 0 0 1px var(--grey-200);
  font-size:var(--fs-conta);font-weight:600;letter-spacing:normal;
  /* --azul-600, nao o --aro-azul do fio: em 12px o texto e pequeno pela WCAG e
     precisa de 4,5:1. O --aro-azul sobre a folha branca mede 4,28. O 600 da
     5,35 e passa, no mesmo azul da marca. */
  text-transform:none;color:var(--azul-600);
}
/* EXCECAO 1 a Regra da Varredura, que reserva a --grad-hero para manchete e diz
   que o gradiente de texto e UM SO. Aqui a manchete usa o fio unico, porque o
   efeito da referencia e a passagem roxo->ciano e a --grad-hero (grafite,
   azul-noite, roxo) nao a entrega. Fica escopado em .agcab e em nenhum outro
   lugar. Fallback solido nos dois caminhos que a regra exige. */
.agcab-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)){
  .agcab-realce{background-image:none;color:var(--aro-azul);-webkit-text-fill-color:currentColor}
}
@media print{
  .agcab-realce{background-image:none;color:var(--grey-900);-webkit-text-fill-color:currentColor}
}
.agcab .agcab-titulo{
  max-width:22ch;
  /* 500, que e o peso que a manchete tinha no arquivo de origem e o que a
     referencia usa. O 600 da minha primeira versao endurecia a linha. */
  font-family:var(--font-title);font-weight:500;
  font-size:var(--fs-headline);line-height:var(--lh-headline);
  letter-spacing:var(--ls-headline);
  color:var(--text-1);
}
.agcab-sub{
  max-width:56ch;
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-2);
}
.agcab-cta{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:var(--gap-group);
}
/* O BOTAO E O DA CASA, a pedido: azul-noite chapado no raio de bloco, a unica
   silhueta que a Regra do Botao Firme define. Cheguei a por a pilula roxa da
   referencia aqui; foi desfeita. Dos dois desvios que a fidelidade custava,
   sobra so o do gradiente do realce.

   Mas ele precisa reafirmar a COR DO TEXTO, e por um motivo separado: uma regra
   trabalhando contra ela mesma aqui. `.importada a{color:inherit}` existe para
   a folha da casa nao vazar nos links das secoes do Figma, e tem
   especificidade (0,1,1) — vence a `.btn--primary{color:...}`, que e (0,1,0).
   Resultado medido antes de consertar: texto em #14213D, a cor herdada da
   secao, sobre o azul-noite do botao. 1,1:1. O rotulo sumia por completo.

   `.agcab .btn--primary` da (0,2,0) e resolve sem !important. Segunda vez que
   esta regra morde um componente da casa posto dentro de secao importada; a
   primeira foi no Contact 8. */
.agcab .btn--primary,
.agcab .btn--primary:hover{color:var(--btn-primary-fg)}

/* ============================================================================
   CALCULADORA DE ROI  (.calc)
   ----------------------------------------------------------------------------
   Companheira da secao de prova: la ficam os numeros de um cenario, aqui a
   conta que os produziu, aberta. E o que transforma "384%" de alegacao em
   afirmacao verificavel — por isso as premissas fixas estao na propria secao,
   num <details>, e nao num rodape de nota.

   Tres colunas no desktop: o que a secao diz, os campos, e o resultado. O
   resultado e sticky para nao sumir enquanto se mexe nos campos de baixo.
   ============================================================================ */
/* ---- O PAINEL ----
   A calculadora deixou de ser secao e virou gaveta da secao de prova. A
   abertura anima por `grid-template-rows` de 0fr para 1fr, que e o jeito de
   animar ate a altura do conteudo sem saber a altura de antemao: `max-height`
   com numero chutado ou corta o conteudo, ou deixa folga morta no fim da
   transicao.

   `hidden` sai na abertura e volta no FIM do fechamento (ver o JS). Sem isso
   os campos continuariam alcancaveis por Tab com a gaveta recolhida. O
   `overflow:hidden` mora no filho, porque e ele que precisa ser cortado
   enquanto a linha da grade cresce.

   Isto NAO briga com a Regra da Geometria Parada: ela proibe peca que entra
   em cena sozinha e manda trocar de ESTADO. Uma gaveta e troca de estado,
   disparada por quem le. */
/* ALTURA EM PIXEL, POSTA PELO JS — e nao o truque de grid-template-rows de
   0fr para 1fr, que e o que o FAQ desta pagina usa.

   Tentei o truque primeiro, por consistencia com o FAQ. Nao funciona AQUI, e
   nao e artefato de medicao: com a classe aplicada, e tambem com
   `grid-template-rows:1fr` escrito direto no `style=`, o valor computado volta
   `0px` — lido em chamada separada, para nao pegar layout velho. Com e sem o
   `min-height:0` no filho, mesmo resultado. O `1fr` simplesmente nao resolve
   para a altura do conteudo neste caso, e nao vale queimar mais tempo
   descobrindo por que quando existe um caminho que nao depende disso.

   Aqui a altura vai em pixel, medida do conteudo pelo JS, e vira `auto` no
   fim da abertura — assim o painel continua certo se o conteudo mudar de
   tamanho depois. O `overflow:hidden` sobe para o painel, que agora e quem
   tem altura; o corpo volta a ser so a grade de duas colunas. */
.calc-painel{
  overflow:hidden;height:0;
  transition:height .34s cubic-bezier(.2,.8,.2,1);
}
.calc-painel[hidden]{display:none}
/* A GAVETA ENCOLHEU, e o que a fazia longa era a coluna do formulario: os dois
   grupos de cinco campos empilhados davam 732px sozinhos, contra 483 do painel
   de resultado. Medidos os dois, a cura obvia era horizontal e nao vertical.

   Agora o corpo e 2fr para o formulario e 1fr para o resultado, e DENTRO do
   formulario os dois grupos ficam lado a lado. Dez campos em cinco linhas em
   vez de dez: a altura do formulario cai pela metade sem nenhum campo
   encolher — a caixa de cada um continua em 44px, que e o piso de alvo de
   toque e nao se negocia por estetica. */
@media(min-width:1000px){
  .calc-painel-corpo{display:grid;grid-template-columns:2fr 1fr;
    column-gap:var(--gap-block);align-items:start}
  .calc-painel-corpo > .calc-titulo{grid-column:1/-1}
}
/* a seta do botao gira quando a gaveta abre */
.btn-icn--gira{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
[aria-expanded="true"] .btn-icn--gira{transform:rotate(180deg)}
.btn:hover .btn-icn--gira{transform:none}
[aria-expanded="true"]:hover .btn-icn--gira{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){
  .calc-painel,.btn-icn--gira{transition:none}
}
/* O paragrafo que explicava a conta virou titulo da gaveta: o que ele dizia
   (“troque as premissas e ela recalcula”) o proprio painel demonstra assim que
   abre. Fica no --fs-title, que e o degrau de titulo interno da casa — abaixo
   da manchete da secao e acima do corpo. Sem varredura: a Regra da Varredura
   reserva o gradiente para Display e Headline, e isto e nenhum dos dois. */
.calc-titulo{
  margin:var(--gap-block) 0;
  font-family:var(--font-title);font-weight:600;
  font-size:var(--fs-title);line-height:var(--lh-title);
  letter-spacing:-.01em;color:var(--text-1);
}

/* ---- os campos ---- */
.calc-form{display:flex;flex-direction:column;gap:var(--gap-block);margin:0}
/* Os dois grupos de cinco campos lado a lado. Precisa vir DEPOIS da regra
   acima e nao junto do resto do media query la em cima: as duas tem a mesma
   especificidade (0,1,0), entao quem ganha e a ultima do arquivo — e a
   primeira versao disto ficava antes, perdia calada, e o formulario continuava
   empilhado. */
/* 700px, e nao os 1000 do corpo, de proposito: sao dois pontos de quebra
   independentes. Entre 700 e 1000 o corpo ainda empilha formulario e
   resultado, mas o formulario ja tem largura de sobra para os dois grupos
   lado a lado — medido a 810px, sem eles a gaveta ia a 1206px, pior que os
   837 que motivaram este encurtamento. Abaixo de 700 empilha tudo, que em
   celular e o certo. */
@media(min-width:700px){
  .calc-form{display:grid;grid-template-columns:1fr 1fr;
    gap:var(--gap-group) var(--gap-block);align-content:start}
}
.calc-grupo{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--gap-element)}
/* a sobrancelha da casa, de novo — uma voz de rotulo so na pagina inteira */
.calc-legenda{
  padding:0;margin-bottom:var(--gap-text);
  font-size:var(--fs-conta);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-500);
}
.calc-campo{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--gap-group)}
.calc-rot{font-size:var(--fs-micro);line-height:1.4;color:var(--text-2)}
/* A caixa e que desenha o campo; o <input> fica sem moldura dentro dela. Assim
   o prefixo "R$" e o sufixo "%" moram DENTRO da mesma borda, em vez de virarem
   dois elementos soltos ao lado. */
.calc-caixa{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 12px;min-height:44px;
  background:var(--white);
  border:1px solid var(--rule-1,rgba(17,19,34,.12));
  border-radius:var(--r-field);
  transition:border-color .15s ease;
}
.calc-caixa:focus-within{border-color:var(--azul-500)}
.calc-fix{font-size:var(--fs-micro);color:var(--grey-500);flex:none}
.calc-caixa input{
  /* 12ch e nao 9: "300000000" tem 9 digitos e o 9ch cortava o ultimo. A
     largura e fixa de proposito, para os cinco campos de cada grupo
     alinharem a direita entre si. */
  width:12ch;border:0;background:transparent;padding:0;
  font-family:var(--font-body);font-size:var(--fs-ui);font-weight:600;
  color:var(--text-1);text-align:right;
  font-variant-numeric:tabular-nums;
}
.calc-caixa input:focus{outline:none}

/* ---- o resultado ---- */
/* Com o formulario em duas colunas, quem passaria a mandar na altura seria
   este painel. Os cinco numeros desceram de clamp(28,3vw,40) para
   clamp(22,2.2vw,28) e o vao e o recuo desceram um degrau cada na regua da
   casa. Continua sendo o maior texto da gaveta. */
.calc-saida{
  position:sticky;top:132px;
  display:flex;flex-direction:column;gap:var(--gap-element);
  padding:var(--gap-group);
  background:var(--vidro-forte);
  border-radius:12px;
  box-shadow:var(--sombra-peca);
  -webkit-backdrop-filter:var(--vidro-desfoque);backdrop-filter:var(--vidro-desfoque);
}
.calc-res{display:flex;flex-direction:column;gap:var(--gap-text)}
.calc-res-rot{
  font-size:var(--fs-conta);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-500);
}
.calc-res-num{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(22px,2.2vw,28px);line-height:1.1;letter-spacing:-.02em;
  color:var(--text-1);
  font-variant-numeric:tabular-nums;
}
.calc-erro{margin:0;font-size:var(--fs-micro);color:var(--debito)}

/* As cinco saidas ganharam um involucro para poderem sumir juntas quando o
   cartao de porte entra. Ele repete a coluna e o vao que elas tinham como
   filhas diretas de .calc-saida, senao o painel colapsa num bloco so. */
#calc-saidas{display:flex;flex-direction:column;gap:var(--gap-element)}
/* `display` DE AUTOR VENCE O ATRIBUTO `hidden`. O `hidden` so esconde porque a
   folha do navegador diz `[hidden]{display:none}`, e qualquer regra de autor
   com `display` — as duas acima — tem mais especificidade que ela. Sem estas
   duas linhas os cinco numeros e o cartao apareciam JUNTOS, com os numeros
   congelados no ultimo calculo que deu positivo. Pego no print, nao no teste:
   o teste lia o atributo `hidden`, que estava certo o tempo todo. */
#calc-saidas[hidden],
.calc-porte[hidden]{display:none}

/* O CARTAO DE PORTE. Recomendacao, nao erro: nada de vermelho, nada de
   --debito. A moldura e a mesma linguagem do painel, um degrau acima em
   presenca, porque ele substitui cinco numeros e precisa sustentar o vazio. */
.calc-porte{display:flex;flex-direction:column;gap:var(--gap-element);align-items:flex-start}
.calc-porte-titulo{
  margin:0;
  font-family:var(--font-title);font-weight:500;
  font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:-.02em;
  color:var(--text-1);
}
.calc-porte-corpo{margin:0;font-size:var(--fs-micro);line-height:1.6;color:var(--text-2)}

/* ---- as premissas ---- */
.calc-premissas{
  grid-column:1/-1;
  border-top:1px solid var(--regua-vidro);padding-top:var(--gap-group);
}
.calc-premissas summary{
  cursor:pointer;
  font-size:var(--fs-micro);font-weight:600;color:var(--text-1);
}
.calc-premissas summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.calc-premissas-corpo{padding-top:var(--gap-group);max-width:86ch}
.calc-premissas-corpo p{margin:0 0 var(--gap-group);font-size:var(--fs-micro);line-height:1.6;color:var(--text-2)}
.calc-lista{margin:0 0 var(--gap-group)}
.calc-lista > div{
  display:grid;grid-template-columns:minmax(0,15ch) 1fr;gap:var(--gap-group);
  padding:var(--gap-text) 0;border-top:1px solid var(--regua-vidro);
}
.calc-lista dt{font-size:var(--fs-micro);font-weight:600;color:var(--text-1)}
.calc-lista dd{margin:0;font-size:var(--fs-micro);line-height:1.6;color:var(--text-2)}
@media(max-width:560px){
  .calc-campo{grid-template-columns:1fr}
  .calc-lista > div{grid-template-columns:1fr;gap:var(--gap-text)}
  .calc-saida{position:static}
}

/* ============================================================================
   O FECHO   —   o ultimo bloco antes do rodape
   ----------------------------------------------------------------------------
   Substituiu o porte do `@reactbits-pro/contact-8`, que era duas colunas
   claras com o iframe do GHL na direita. O que fica no lugar e um cartao
   escuro sobre faixa escura, na forma do bloco de referencia: manchete,
   duas linhas, uma linha de e-mail com o botao encostado e a letra miuda
   embaixo.

   A EMENDA COM O RODAPE e a razao de ser desta faixa. `.fecho` e `.fo` tem o
   MESMO `background-color` (#05070E) e se tocam sem recuo entre elas: das
   duas tags sai uma faixa escura so, e o rodape deixa de ser um bloco preto
   pregado no fim de uma pagina branca. Por isso `padding-bottom:0` aqui —
   sobra ali viraria uma linha entre dois pretos quase iguais.

   A ENTRADA NO ESCURO E UM CORTE, e nao um degrade (21/09). A primeira
   versao descia da folha clara ate o preto ao longo de 92px, para a troca de
   luz nao virar uma linha reta de 1440px de largura. Lido na pagina pronta,
   o degrade nao passou como passagem: passou como sujeira entre duas secoes.
   Agora a emenda e seca — a secao de seguranca acaba, o escuro comeca, e a
   propria reta e a separacao.

   A LUZ e a mesma familia do rodape (azul e roxo ancorados fora do quadro),
   virada para cima em vez de para baixo: as duas faixas sao uma so, entao as
   luzes tem que se responder. Nenhuma parada e cor chapada — todas morrem em
   alfa zero do mesmo tom.
   ============================================================================ */
.fecho{
  position:relative;
  /* RECUO EMBAIXO TAMBEM, desde 21/09. Antes era zero: a ideia era que o
     escuro atravessasse a emenda sem sobra. So que com zero o CARTAO encosta
     na borda da secao, e o cartao nao e chapado — ele tem o proprio degrade,
     que no canto de baixo a direita chega a #161B33. Medido, a ultima linha
     da secao saia em (36,39,57) e a primeira do rodape em (5,7,14): um salto
     de 49 niveis, que e a linha horizontal que se via. O escuro continua
     atravessando a emenda; o que mudou e que agora quem encosta nela e o
     fundo da secao, e nao o cartao. */
  padding:calc(var(--vao-setor) / 2) var(--gutter);
  background-color:#05070E;
  /* SEM LUZ NENHUMA NO PE DESTA FAIXA, e e por isso que a emenda com o rodape
     sumiu. Havia aqui um bloom azul ancorado em 50%/128%, ou seja, com o
     centro ABAIXO da secao: ele acendia o pe do bloco e era cortado a seco na
     borda de baixo, porque o rodape comeca com o preto chapado dele. Duas
     luzes diferentes encostando uma na outra desenham uma linha horizontal de
     1440px de largura, que e exatamente o que se via nos dois cantos de
     baixo.

     A luz que ficou e a de cima, a roxa, ancorada em 14%/-8% — centro ACIMA
     da secao, longe da emenda. No pe, `.fecho` e `.fo` sao os dois o mesmo
     #05070E chapado, entao nao ha passagem: ha uma cor so. */
  background-image:
    radial-gradient(80% 55% at 14% -8%, rgba(128,81,225,.26), rgba(128,81,225,0) 66%);
  background-repeat:no-repeat;
  color:#FFFFFF;
}
.fecho-in{max-width:var(--sheet);margin:0 auto;width:100%}

/* O CARTAO VOLTOU (21/09), depois que o formulario saiu daqui para a pagina de
   contato. Ele tinha saido porque, com o iframe do GHL na direita, viravam duas
   molduras concentricas em volta do mesmo formulario — a escura e a branca.
   Sem o iframe o motivo evapora, e o degrade quase imperceptivel de preto para
   azul-noite, da esquerda para a direita, volta a ser o que da profundidade ao
   bloco sem sombra e sem ilustracao. */
.fecho-cartao{
  position:relative;overflow:hidden;
  border-radius:clamp(18px,1.6vw,28px);
  border:1px solid rgba(255,255,255,.08);
  background-color:#0B0E17;
  background-image:
    linear-gradient(104deg, #0B0E17 0%, #0D1120 52%, #161B33 100%),
    radial-gradient(70% 120% at 96% 30%, rgba(63,102,214,.34), rgba(63,102,214,0) 70%);
  padding:clamp(30px,3.6vw,60px);
  display:grid;grid-template-columns:1fr;gap:clamp(30px,3.4vw,52px);
}
@media(min-width:960px){
  /* A referencia deixa a metade direita vazia. Aqui ela recebe o que a secao
     ja dizia — a lista da conversa e a prova de seguranca —, entao a coluna
     do texto fica um pouco mais larga e a da direita acompanha. */
  /* A direita voltou a ser a lista da conversa e a prova, entao a coluna do
     texto volta a ser a maior das duas. */
  .fecho-cartao{grid-template-columns:minmax(0,1.08fr) minmax(0,.82fr);gap:clamp(40px,4.6vw,88px)}
}

/* ---- a coluna do texto ---- */
.fecho-titulo{
  margin: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;
  padding-block:.18em;margin-block:-.18em;
}
.fecho-sub{
  margin:clamp(16px,1.6vw,22px) 0 0;max-width:52ch;
  font-size:var(--fs-ui);line-height:1.6;color:rgba(255,255,255,.66);
}

/* O BOTAO. Era <button> de envio ate o formulario sair daqui; agora e um <a>
   para a pagina de contato, entao perdeu `border`, `cursor` e o estado
   [disabled], que so um botao tem, e ganhou o que um link precisa para se
   comportar como botao: caixa em linha, centragem e sublinhado fora. */
.fecho-cta{margin:clamp(22px,2.4vw,32px) 0 0}
.fecho-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 26px;
  border-radius:var(--r-pill);text-decoration:none;
  background:#FFFFFF;color:#0B0E17;
  font-family:var(--font-body);font-size:var(--fs-ui);font-weight:600;
  transition:background-color .18s ease,transform .18s ease;
}
.fecho-btn:hover{background:#E4ECFF}
.fecho-btn:active{transform:translateY(1px)}
.fecho-btn:focus-visible{outline:2px solid #7FB6FF;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fecho-btn{transition:none}}

.fecho-mini{
  margin:clamp(16px,1.8vw,24px) 0 0;
  font-size:var(--fs-conta);line-height:1.6;color:rgba(255,255,255,.44);
}
.fecho-mini a{color:rgba(255,255,255,.62);text-decoration:underline;text-underline-offset:3px}
.fecho-mini a:hover{color:#FFFFFF}

/* ---- a coluna da direita ---- */
.fecho-lado{display:flex;flex-direction:column;gap:clamp(24px,2.6vw,38px);align-self:center}

/* UMA CAIXA SO. O painel tinha recuo e sombra proprios e, somado ao cartao que
   o formulario do GHL ja desenha, davam duas molduras concentricas com uma
   faixa de branco morto entre elas.

   O RECUO E A SOMBRA SAEM; O BRANCO FICA, e o branco nao e enfeite: o cartao
   do GHL tem fundo TRANSPARENTE e rotulos em azul-noite. Sem uma superficie
   clara atras, os rotulos caem sobre o #05070E da secao — medido ao tirar o
   painel: "Nome", "Telefone", "Cargo" e o aceite ficaram ilegiveis. O iframe e
   de outra origem e nenhum CSS daqui entra nele, entao a superficie tem que
   vir de fora.

   Com recuo zero o branco termina onde o cartao do GHL comeca: o que se ve e
   uma caixa, com o canto arredondado desta e a borda fina daquele. */
.fecho-embed{
  background:var(--folha);
  border-radius:clamp(12px,1vw,16px);
  overflow:hidden;
}
/* Piso de 420px, NAO os 1543 do data-height: aquele numero e o teto de um
   formulario progressivo, e travar nele deixaria centenas de pixels de branco
   embaixo do formulario. O piso existe so para a coluna nao colapsar antes do
   primeiro postMessage do form_embed.js, que e quem mede de verdade. */
.fecho-iframe{display:block;width:100%;min-height:420px;border:0;border-radius:5px}
.fecho-grupo{display:flex;flex-direction:column;gap:var(--gap-element)}
/* a mesma voz de rotulo do resto da pagina, so que virada para o escuro */
.fecho-rot{
  margin:0;
  font-size:var(--fs-conta);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.42);
}
.fecho-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--gap-element)}
.fecho-lista li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:var(--fs-ui);line-height:1.5;color:rgba(255,255,255,.82);
}
.fecho-tick{flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:2px;color:#7FB6FF}
.fecho-tick svg{width:18px;height:18px}
.fecho-trust{
  display:flex;flex-wrap:wrap;gap:8px;margin:0;
}
.fecho-trust span{
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  font-size:var(--fs-conta);color:rgba(255,255,255,.7);
}

/* ---- barra fixa no celular ---- */
.mobile-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--folha);border-top:1px solid var(--grey-200);padding:10px var(--gutter);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
@media(max-width:940px){.mobile-cta{display:block}body{padding-bottom:76px}}

/* ============================================================================
   O ENCAIXE DAS SECOES IMPORTADAS
   ----------------------------------------------------------------------------
   O DESENHO delas nao esta aqui — esta em secoes-importadas.css, verbatim.
   Aqui so mora o que faz uma tela de largura fixa caber numa pagina fluida.

   Elas sao exports de Figma: <section style="width:1440px">. Numa pagina
   responsiva isso daria rolagem horizontal em tudo abaixo de 1440.

   E ESCALA, NAO RECORTE. Recortar esconderia parte do desenho; a escala
   entrega a composicao inteira, so menor — que e a mesma coisa que abrir o
   arquivo com menos zoom. Nenhum pixel do desenho muda de lugar em relacao
   aos outros.

   A transform nao encolhe a caixa de layout, so o desenho, entao sobra altura
   embaixo e sobra largura ao lado. A altura sai por margem negativa sobre
   --h-imp; a largura, pelo `clip` da caixa de fora — e clip, e nao hidden,
   para nao virar contexto de rolagem. Os dois valores o JS publica.
   ============================================================================ */
/* FIDELIDADE: o projeto tem regras de TIPO (h1/h2/h3, p, a) e heranca perde
   para regra direta — a manchete das secoes importadas estava saindo em Plus
   Jakarta com a entrelinha da casa, e nao na Manrope do arquivo de origem.
   Eu tinha prometido que nada do desenho delas mudaria; isto desfaz o vazamento.

   Sao desfeitas so as propriedades que essas regras impoem. `margin:revert`
   devolve a margem do navegador, que e a que valia na pagina solta: os
   arquivos de origem nao tem reset de margem. */
.importada :is(h1,h2,h3){
  font-family:inherit;font-weight:inherit;letter-spacing:inherit;
  text-wrap:inherit;margin:revert;
}
.importada p{margin:revert}
.importada a{color:inherit}

.importada-fora{overflow-x:clip}
/* A ORIGEM DA ESCALA E `top left`, E ISSO NAO E DETALHE.
   Era `top center`, e abaixo de 1440 a pagina inteira saia deslocada para a
   direita — medido a 1201px de janela: a caixa escalada ia de x=120 a x=1321
   em vez de 0 a 1201, e o que passava de 1201 era cortado.

   A causa e uma regra do CSS que eu tinha suposto ao contrario: `margin-inline:
   auto` NAO centraliza uma caixa mais larga que o continente. Quando nao cabe,
   as margens `auto` resolvem para ZERO e a caixa transborda so para a direita.
   Entao a caixa de 1440 comecava em x=0, nao em -119,5 como eu imaginava, e
   o `center` do transform-origin caia em x=720 — o meio dos 1440, nao o meio
   da janela. Escalar em torno de 720 deixa a esquerda em 120.

   Com `top left` o ponto fixo e a propria borda esquerda, que ja esta em 0, e
   a caixa escalada ocupa exatamente 0..disponivel — porque a escala e
   disponivel/1440 por construcao. Acima de 1440 a escala e 1 e a origem nao
   faz diferenca: ali as margens `auto` cabem e centralizam de verdade.

   Por que isto passou batido tanto tempo: o meu teste de transbordo era
   `scrollWidth > clientWidth`, e ele da FALSO aqui. A caixa de fora tem
   overflow hidden/clip, entao nao nasce barra de rolagem nenhuma — o conteudo
   so fica torto e cortado, calado. E eu media quase sempre em painel de 1640
   ou 1902, onde a escala e 1 e o defeito nao existe. */
/* ZOOM, e nao transform:scale. A diferenca e a unica que importa aqui:
   `transform` e pintura — a caixa continua ocupando 1440x7620 no layout e so
   o desenho encolhe, entao `position:sticky` calcula na geometria grande e o
   cartao gruda fora da tela. Por isso o encaixe DESLIGAVA o sticky abaixo de
   1440, e a pilha de cartoes so empilhava em tela larga. `zoom` escala o
   LAYOUT: a caixa passa a medir o que se ve, e o sticky volta a bater.

   O que sai junto, porque deixou de ser necessario:
   - a margem negativa que descontava a altura nao usada (o layout ja encolhe);
   - o --h-imp publicado pelo script, que existia para alimentar essa margem;
   - a altura que o script escrevia na caixa de fora.

   O top do sticky (24px, no CSS do pacote) passa a valer em pixels zoomados,
   entao encosta um pouco mais alto quanto menor a janela. E o comportamento
   certo: tudo naquela secao encolhe junto. */
.importada{
  width:1440px;margin-inline:auto;
  zoom:var(--esc,1);
}
/* O sticky e a sobra do fim da pilha deixam de depender da classe
   `sem-escala`: com zoom eles funcionam em qualquer largura. As regras
   originais, escopadas nela, continuam no CSS importado e nao atrapalham.

   SO ACIMA DE 991px — e nao porque abaixo disso nao haja pilha: ha, logo
   adiante em "A PILHA TAMBEM NO CELULAR". E que la o cartao tem altura
   automatica e maior que a tela, e o `top` deixa de poder ser a constante de
   24px que basta aqui. Sao as duas metades da mesma politica, separadas no
   unico ponto em que elas divergem. */
@media (min-width:992px){
  .importada .stack-card{position:sticky;top:24px}
  /* 160px, e nao 644 (20/09/2026). A sobra e o quanto o ultimo cartao fica
     preso no topo DEPOIS de ja ter sido lido: 644 eram quase uma tela de
     rolagem com a imagem parada, e foi exatamente a queixa. 160 basta para
     ele nao sumir no mesmo instante em que chega; o recuo de baixo da
     secao, metade do vao entre setores, e o que impede a secao seguinte
     de encostar no cartao. */
  /* ZERO, em 20/09 — era 644, depois 160. A sobra e o quanto o ultimo cartao
     fica preso no topo depois de ja ter sido lido, e enquanto ela rola o que
     se ve ABAIXO do cartao e branco. Somada ao vao entre setores dava 324px
     de branco depois do Spread AI; sem ela sao 164, que e a metade pedida e e
     o mesmo vao de todas as outras emendas da pagina.

     O elemento fica, com altura zero: apaga-lo mudaria a conta do `flex` da
     pilha, e voltar atras e trocar um numero.

     Os DOIS seletores, e o segundo com um a mais: o CSS importado traz
     `.sem-escala .stack-tail{height:644px}` e e injetado DEPOIS deste
     arquivo, entao empate de especificidade ele ganha. `.importada` e
     `.sem-escala` estao no mesmo elemento, e junta-los da o desempate sem
     precisar de `!important`. */
  .importada .stack-tail,
  .importada.sem-escala .stack-tail{display:block;height:0;flex:none;pointer-events:none}
}
/* E O ESPELHO DO `transform:none` DO PACOTE. No ramo mobile a secao dos
   agentes nao e mais uma prancheta encolhida: ela se reorganiza em coluna e
   ocupa 100% da largura. O pacote cancela a transform ali; como a escala
   agora e `zoom`, quem precisa ser cancelado e o zoom — senao a secao inteira
   sai reduzida a 26% num aparelho de 375px. */
@media (max-width:991px){
  #sec-agentes{zoom:1}
}

/* ===== A PILHA TAMBEM NO CELULAR ==========================================
   O ramo mobile do CSS importado desmonta o empilhamento: o cartao volta a
   `position:relative` e a sobra do fim some, e a secao vira uma coluna que
   so rola. Era uma decisao de quando a secao inteira era uma prancheta
   escalada por `transform` — sticky nao funcionava ali de jeito nenhum.
   Com `zoom` no lugar da transform isso deixou de ser verdade, e a pilha e
   o efeito da secao: sem ela o celular ve dez cartoes soltos.

   O QUE NAO VOLTA: o layout. O cartao segue coluna unica, na ordem
   titulo -> animacao -> texto, com altura automatica. Volta so o gruda.

   O `top` e a unica coisa diferente do desktop, e e obrigatorio que seja:
   la o cartao tem 620px fixos e cabe; aqui vai de 717 a 932, contra 667 a
   844 de tela. `min()` escolhe sozinho entre os dois casos — cartao que
   cabe prende a 24px do topo, igual ao desktop; cartao que nao cabe recebe
   um `top` negativo e so prende depois de ter aparecido inteiro, com a base
   a 24px do fim da tela. A altura de cada cartao chega em `--alt-carta`,
   publicada pelo bloco "a pilha de cartoes no celular" do index.html,
   porque o CSS nao tem como perguntar a altura de um elemento.

   `svh`, nao `vh`: e a altura da tela COM a barra de endereco visivel, que
   nao muda quando ela se esconde. Com `vh` o ponto de prender mudaria no
   meio da rolagem. A reserva de 620px e a altura do cartao no desktop —
   so vale no quadro entre a pintura e a primeira medida. */
@media (max-width:991px){
  .importada .stack-card{
    position:sticky;
    top:min(24px, 100svh - var(--alt-carta,620px) - 24px);
  }
  .importada .stack-tail{
    display:block;height:var(--sobra-pilha,644px);flex:none;pointer-events:none;
  }
}

/* ============================================================================
   SEGURANÇA IMPORTADA, REVESTIDA COM A LINGUAGEM DA CASA  (.segcasa)
   ----------------------------------------------------------------------------
   Duplicata de #sec-seguranca2 em #sec-seguranca-casa. PROPORÇÕES, ILUSTRAÇÕES
   E ANIMAÇÕES INTACTAS — 349 elementos animados, os mesmos da original. Aqui
   só troca de pele: cor, tipografia e superfície.

   Por que tudo com !important: as superfícies do arquivo de origem estão em
   `style=` (374 elementos), e estilo inline vence qualquer folha. A alternativa
   seria reescrever o markup da duplicata, o que a tornaria indiffável da
   original — e é justamente a comparação entre as duas que interessa. Fica
   tudo neste bloco, escopado em .segcasa: nada disto alcança as outras duas
   seções importadas.

   O que NÃO foi tocado: geometria, grade, tamanhos, os SVGs e o movimento.
   ============================================================================ */

/* A REGRA DA FOLHA BRANCA e A DA LUZ DIFUSA: o bege chapado #F1F0EC sai. Em
   lugar de uma cor, dois blooms ancorados fora do quadro e o grão por
   multiply — que exige o background-color opaco na mesma regra. */
.segcasa > section{
  background-color:var(--folha) !important;
  background-image:
    radial-gradient(880px 440px at 12% 18%, var(--h-ciano), var(--h-ciano-0) 66%),
    radial-gradient(820px 410px at 88% 78%, var(--h-roxo),  var(--h-roxo-0)  66%),
    var(--grao) !important;
  background-repeat:no-repeat,no-repeat,repeat !important;
  background-blend-mode:normal,normal,multiply !important;
}

/* A REGRA DO VIDRO COM BASE: os cartões claros deixam de ser branco chapado.
   Vidro a 75% com o desfoque saturado, aresta inset no lugar de borda e a
   sombra em três alturas; cada um promovido a camada própria. */
/* VIDRO SEM DESFOQUE, e de proposito. Estes cartoes contem SVG que anima sem
   parar: com backdrop-filter, cada quadro da animacao invalida o fundo e
   forca novo desfoque da area inteira do cartao — e eram tres cartoes. O
   `will-change` ainda mantinha as tres camadas vivas o tempo todo.

   O que sobra e o vidro que importa aqui: o branco translucido a 75%, a
   aresta inset e a sombra em tres alturas. Sobre um bloom palido o desfoque
   contribuia pouco de qualquer forma — mesma conclusao dos nos da Origem.

   A promocao a camada (translateZ) fica: sem backdrop ela e barata e ajuda a
   animacao. */
.segcasa [style*="background: #FFFFFF"],
.segcasa [style*="background:#FFFFFF"],
.segcasa [style*="background-color: #FFFFFF"]{
  background:var(--vidro-forte) !important;
  /* A borda de 1px em traco cinza do arquivo de origem sai: a moldura do vidro
     da casa e a luz de dentro, nao uma borda. */
  border-color:transparent !important;
  box-shadow:var(--sombra-peca) !important;
  -webkit-backdrop-filter:var(--vidro-desfoque);backdrop-filter:var(--vidro-desfoque);
  transform:translateZ(0);backface-visibility:hidden;will-change:backdrop-filter;
  position:relative;
}
/* O ANEL DE LUZ, igual ao do chat: --brilho-interno numa camada por cima, e
   nao --vidro-aresta no box-shadow da peca. Sao coisas diferentes — a aresta e
   um fio ESCURO a 9% com realce branco em cima; o brilho interno e branco a
   55% com 32px de luz entrando para dentro. O chat usa o segundo, e era so
   isso que faltava para o vidro daqui ser o mesmo vidro. */
.segcasa [style*="background: #FFFFFF"]::after,
.segcasa [style*="background:#FFFFFF"]::after,
.segcasa [style*="background-color: #FFFFFF"]::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;box-shadow:var(--brilho-interno);
}

/* Os paineis brancos DENTRO dos cartoes tambem viram vidro. Em SVG nao existe
   backdrop-filter, entao vidro ali e o que da para ser: branco translucido
   com o fio da aresta no lugar do traco cinza. */
.segcasa svg rect[fill="#FFFFFF"]{fill:rgba(255,255,255,.72)}
.segcasa svg rect[stroke="#E4E2DC"]{stroke:rgba(17,19,34,.09)}

/* O FUNDO CORRE A LARGURA INTEIRA, o conteudo nao.

   A secao importada tem 1440px fixos e e centrada; com o fundo nela, sobravam
   duas faixas brancas nos lados em telas maiores que isso. O fundo mudou de
   dono: vai para a caixa de fora, que e um bloco de largura total, e a secao
   fica transparente. O desenho continua nos seus 1440 e centrado.

   O bloom vem da familia --h-*, a forte. Vidro sobre branco e branco: sem cor
   atras, a translucidez nao tem o que mostrar — foi a licao dos nos da Origem
   e vale igual aqui. Agora que a caixa e a viewport inteira, as ancoras em
   porcentagem passam a se referir a ela, e as manchas abrem junto com a tela
   em vez de ficarem presas aos 1440. */
.segcasa-fora{
  /* `overflow:hidden` e nao `clip`, e a diferenca importa: clip nao cria
     contexto de formatacao, entao a margem negativa que compensa a escala nao
     encolhia esta caixa. Com o fundo aqui, ela vazava 414px por cima da secao
     seguinte em 1024. `hidden` fecha o contexto e a altura passa a ser a do
     conteudo ja escalado. */
  overflow:hidden;
  /* SEM BLOOM, a pedido: a secao fica na folha chapada. Isto contraria a
     Regra da Luz Difusa, que diz que uma secao pode ter varios blooms mas nao
     pode ter UMA COR — excecao consciente, nao descuido. Os dois blooms que
     sairam eram um ciano a 12%/18% e um indigo a 88%/78%.
     (Cheguei a por #000000 aqui por ler errado o pedido: o preto era para os
     dois blocos escuros, nao para a folha. Desfeito.) */
  background-color:var(--folha);
}
/* Transparentes os DOIS: a <section> e o wrapper. O wrapper carrega
   `background:#F1F0EC` da classe .importada--seguranca2 — o fundo que desceu
   do <body> do arquivo de origem na importacao — e, tendo 1440px, ele pintava
   bege por cima do fundo de largura total. Zerar so a secao deixava o bege
   uma camada acima. */
.segcasa,
.segcasa > section{background:transparent !important}

/* Os dois cartões escuros CONTINUAM escuros — as ilustrações de dentro foram
   desenhadas para fundo quase preto e sobre claro não se sustentam. O que muda
   é QUAL escuro: do quase-preto #0A0B0F para o azul-noite da casa, que é o
   mesmo da seção de segurança vizinha e do botão. */
/* VIDRO ESCURO nos dois cartoes que precisam de fundo escuro. Ate agora eram
   azul-noite chapado; agora sao a mesma peca de vidro dos claros, so que na
   ponta escura da rampa: o azul-950 a 78% deixa o bloom da secao atravessar,
   com o mesmo --vidro-desfoque.

   O caminho foi 78 (lavado), 90 (bloom demais), 95 e enfim opaco. As
   ilustracoes de dentro foram desenhadas para fundo fechado, e cada ponto de
   transparencia saia do contraste delas.

   E o escuro foi de --azul-950 (#0D2756) para #111A2E e dai para PRETO, a
   pedido. Os dois blocos sao agora #000000 chapado. As ilustracoes de dentro
   foram desenhadas para fundo quase preto (#0A0B0F no arquivo de origem),
   entao o preto e o mais proximo do que elas esperam — este e o unico dos
   tres escuros que nao precisa que nada la dentro se ajuste.

   O anel nao pode ser o --brilho-interno: ele e branco a 55%, calibrado para
   vidro claro, e sobre escuro vira um risco. Aqui a mesma ideia em outra
   intensidade — fio branco a 22%, realce a 28% em cima e 40px de luz a 6%
   entrando. */
.segcasa [style*="background-color: #0A0B0F"],
.segcasa [style*="background-color:#0A0B0F"]{
  background-color:#000000 !important;
  /* Opaco a pedido. Com o fundo fechado o backdrop-filter sai junto: desfocar
     o que esta atras de cor opaca e custo sem efeito nenhum. Fica o anel de
     luz e a sombra, que sao o que dava leitura de peca. */
  transform:translateZ(0);backface-visibility:hidden;
  box-shadow:var(--sombra-peca) !important;
}
.segcasa [style*="background-color: #0A0B0F"]::after,
.segcasa [style*="background-color:#0A0B0F"]::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 40px rgba(255,255,255,.06);
}

/* A REGRA DAS FORMAS: 24px não está no vocabulário. Cartão é 12, console é
   16 — estas caixas são do porte do console. */
.segcasa [style*="border-radius: 24px"]{border-radius:16px !important}

/* O ESMAECIMENTO DO MOCK. O `saFade` leva o topo do cartao ate o fundo dele, e
   foi desenhado para morrer em quase-preto (#0A0B0F). Com o cartao em
   azul-noite, ele virava uma mancha preta sobre azul — e era ela que cortava
   o selo ISO no meio. `stop-color` e propriedade CSS, entao a parada muda sem
   tocar no markup. */
/* AS REGRAS DE REPINTURA SAIRAM em 20/09/2026. A secao foi trocada pelo
   arquivo `leverpro-secao-seguranca-v2.html`, que e o MESMO desenho ja na
   cor certa — roxo no lugar do azul. Cinco regras existiam so para virar
   de azul o que vinha do Figma; mantidas, elas desfariam exatamente o que
   o arquivo novo traz. O que ficou aqui e o que nao e cor: o vidro das
   pecas claras, a profundidade da peca preta, os ajustes de grade e a
   tipografia da casa. */
.segcasa #saFade-casa stop{stop-color:#000000}

/* Os painteis DENTRO dos cartoes escuros. No desenho original eles eram uma
   familia de quase-pretos empilhados (#0F131C o painel, #111A2E as linhas,
   #10151F o ladrilho); sobre azul-noite viravam buracos pretos. Descem para a
   rampa azul da casa, mantendo a MESMA ordem de claridade entre eles.

   O seletor entra pelo cartao escuro de proposito: #111A2E tambem e cor de
   TEXTO nesta secao (22 ocorrencias), e trocar em bloco pintaria o texto dos
   cartoes claros. Assim so pega `rect` de dentro do escuro. */




/* O nucleo do selo ISO, pelo mesmo motivo: era quase-preto no meio de um anel
   que agora assenta em azul. */


/* O SELO QUE BAMBOLEIA. Defeito do arquivo de origem, nao da duplicata: o
   <g class="spslow"> traz um <circle r="54" fill="none" stroke="none"> que
   existe so para centrar a caixa em 64,64 — mas circulo sem pintura nao entra
   no fill-box, entao a origem caia em 61,77x63,58 e o anel derivava a cada
   volta. Trocando a caixa de referencia para a viewBox, 64,64 e o centro de
   verdade. A original fica como esta, para a comparacao continuar honesta. */
.segcasa g.spslow{transform-box:view-box;transform-origin:64px 64px}

/* O SINO FORA DO PAINEL. Outro defeito do arquivo de origem: o <g class="bell">
   carrega transform="translate(36 22)" como ATRIBUTO SVG, e a animacao `bell`
   anima `transform` em CSS. Transform de CSS substitui o atributo inteiro,
   entao o translate evapora e o sino desenha na origem do SVG — 18px a
   esquerda e 7px acima do painel.

   A propriedade `translate` resolve porque ela COMPOE com `transform` em vez
   de substitui-lo: a animacao segue balancando o sino, e o deslocamento fica
   de pe. */
/* NAO usar `translate` de CSS aqui. A primeira versao fazia isso e falhava
   em zoom 100%: o cartao esta promovido a camada propria (translateZ(0) +
   will-change:backdrop-filter, que vieram com o vidro), e a camada ja
   rasterizada nao repintava — so o zoom, que forca repintura, "consertava".
   O deslocamento voltou a ser atributo SVG, num <g> externo que a animacao
   nao alcanca. Geometria em vez de composicao: nao depende de repintura. */

/* A PILULA "Seguindo". A casca tem 62px e o texto comeca em 24 (os 24 sao do
   tique), com 41 de largura: termina 3px FORA. As outras pilulas estao
   apertadas mas dentro; so esta transborda. Oito pixels a mais na casca
   devolvem folga sem encostar na borda do painel, que termina em 340. */
.segcasa svg rect[x="262"][width="62"]{width:70px}
/* (a pastilha "Dispositivo confiavel" passou a ter a largura certa no
   proprio markup, junto com o acerto de tamanho e posicao do par) */

/* PRETO QUE NAO E PRETO. As pastilhas solidas do desenho (a "Holding" do
   cartao +300 e a gemea no cartao escuro) vem em #111A2E, que le como preto
   ao lado do azul da casa. Viram azul-noite.

   O seletor pega `rect` de proposito: #111A2E aparece 15 vezes no arquivo,
   mas 13 delas sao <text>. Trocar em bloco pintaria o texto tambem. */


/* O CARTAO +300 ESTAVA DESCENTRADO NA VERTICAL: 27px de tinta no topo contra
   59px embaixo. O SVG comeca em top:0 e o texto tem padding-block 28/0 — o
   vao de baixo era so o que sobrava do desenho das bolinhas.

   Os dois descem 16px juntos, e a conta fecha em 43/43. O SVG passa a
   terminar 16px alem da caixa, mas ele acaba de desenhar em 397 de 440, entao
   nada visivel e cortado pelo overflow do cartao.

   As outras quatro celulas NAO entram nisto: em `a` e `c` a arte sangra ate a
   borda de proposito, e normalizar recuo nelas seria recortar desenho. */
.segcasa [style*="grid-area: d"] > svg{top:16px !important}
.segcasa [style*="grid-area: d"] > div{padding-top:44px !important}

/* O GLOBO DO SELO fora do centro: o anel e os aneis externos estao em
   cy="64", mas o globo (circulo, elipse e meridianos) foi desenhado em
   cy="61" — 3px acima. Com o selo parado ninguem via; com ele girando, a
   assimetria salta. Desce os 3px que faltam. */
.segcasa svg g[stroke-opacity="0.2"]{translate:0 3px}

/* O titulo em tres linhas, a pedido: firme, normal, italico. O italico exige
   a face de verdade — sem ela o navegador inclina a romana e sai falso
   italico, que e outra letra. Por isso o eixo ital entrou no <link>. */
/* Os pesos sao declarados nas tres linhas de proposito. A manchete de origem
   pedia 500 inline, e a Jakarta da casa e carregada em 400/600/700 — peso 500
   nao existe no conjunto, entao o navegador sintetizava. Cada linha passa a
   pedir uma face que existe: 700 na firme, 400 nas outras duas. */
.segcasa h2 .sgl{display:block;font-weight:400}
.segcasa h2 .sgl--forte{
  font-weight:700;
  /* A FOLGA DO DESCENDENTE. Recortar fundo em texto so pinta dentro da caixa
     do elemento, e a caixa da Manrope e maior que a entrelinha: o "g" de
     "Seguranca" caia fora dela e saia decepado. E a mesma cura das outras
     manchetes da pagina — recuo que cresce so a caixa de fundo, e margem
     negativa que devolve o que o recuo tomou, entao nada se move.
     A regra geral (`.importada h2`) pega o H2; quem recorta aqui e o SPAN. */
  padding-block:.18em;margin-block:-.18em;
  /* A MESMA VARREDURA das outras manchetes de secao (20/09). Antes esta era a
     unica frase de impacto da pagina em preto chapado. */
  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)){
  .segcasa h2 .sgl--forte{background-image:none;color:var(--aro-azul);-webkit-text-fill-color:currentColor}
}
@media print{
  .segcasa h2 .sgl--forte{background-image:none;color:var(--grey-900);-webkit-text-fill-color:currentColor}
}
/* Sem italico: a Manrope nao tem a face, e o navegador inclinaria a
   romana — letra falsa. As tres linhas se separam por peso. */
.segcasa h2 .sgl--ital{font-weight:400}

/* A REGRA DOS PAPÉIS: Manrope sai. Jakarta em manchete e título, Inter em
   todo o resto. A REGRA DO NUMERAL entra junto: tabular em toda a seção. */
/* O !important aqui nao e teimosia: o CSS das importadas e injetado DEPOIS
   do style.css, entao .importada--seguranca2 e .segcasa tem a mesma
   especificidade e a ordem decidia contra mim. */
.segcasa{font-family:var(--font-body) !important;font-variant-numeric:tabular-nums}
.segcasa :is(h1,h2,h3){font-family:var(--font-title) !important}
/* E o que vive DENTRO da manchete tambem. `span` esta na lista que forca
   Inter logo abaixo, e as tres linhas do titulo sao <span>: sem isto elas
   sairiam em Inter, e o italico viria sintetizado por falta da face. */
.segcasa :is(h1,h2,h3) *{font-family:var(--font-title) !important}
/* A troca alcanca so o texto de DOM. Os <text> dos SVGs estao posicionados a
   mao, em coordenada absoluta: mudar a fonte muda a largura do rotulo e
   desalinha o desenho.

   A primeira versao disto chapava `svg text` em Manrope e quebrou tres
   rotulos — o desenho usa Manrope E JetBrains Mono, e eu tinha apagado o
   mono de "SEGURANCA DA INFORMACAO", "grupo economico" e "CORE". Agora a
   base volta no elemento <svg>, e quem declara a propria fonte mantem a
   sua. */
/* Os `:not()` de manchete nao sao decoracao: com !important dos dois lados,
   quem decide e a especificidade, e esta regra (0,1,3) vencia a da manchete
   (0,1,1). Excluindo aqui, o <span> do titulo deixa de ser alcancado e a
   Jakarta volta — com ela, o italico de verdade em vez do sintetizado. */
.segcasa :is(p,span,a,li,b,strong,em,small,button,label,div):not(svg):not(svg *):not(h1 *):not(h2 *):not(h3 *){
  font-family:var(--font-body) !important;
}
/* A fonte da casa alcanca tambem o desenho, a pedido. Antes o <svg>
   recuperava a Manrope de origem para nao desalinhar os rotulos; agora a
   troca e assumida, e o desalinhamento vira trabalho de ajuste. */
.segcasa svg{font-family:var(--font-body)}
.segcasa svg text,.segcasa svg tspan{font-family:var(--font-body) !important}

/* ============================================================================
   RECURSOS DO LEVIR AI — fundo de largura total, luz embaixo e CTA de fecho
   ----------------------------------------------------------------------------
   A secao importada tem 1440px fixos e e centrada, entao o #05070C dela deixava
   faixa branca dos lados em telas maiores. O fundo MUDA DE DONO: vai para a
   caixa de fora, que e um bloco de largura total, e a <section> fica
   transparente. O conteudo continua nos seus 1440 e nada se move.

   `overflow:hidden` e nao `overflow-x:clip`: clip NAO cria contexto de
   formatacao, entao a margem negativa que compensa a escala nao encolheria a
   caixa e o fundo vazaria por cima da secao seguinte. Foi exatamente o bug que
   apareceu na seguranca quando ela ganhou fundo. Aqui e seguro porque nao ha
   nenhum `position:sticky` dentro desta secao — conferido, zero.
   ============================================================================ */
.recursos-fora{
  overflow:hidden;
  background-color:#05070C;
  /* A LUZ DE BAIXO. Duas camadas: um nucleo curto e claro colado na aresta, e
     um halo largo e baixo que o dissolve. A elipse esta ancorada em 50% 100%,
     ou seja, o centro cai FORA do quadro, na propria aresta — e por isso a luz
     nasce cortada embaixo em vez de parecer uma bola flutuando.

     As cores sao as que a secao ja usa no bloom de cima (roxo #8B5CFF, azul
     #3D7BFF, um fio de laranja): e a mesma fonte de luz, vista do outro lado,
     e nao um segundo sistema de cor. */
  background-image:
    radial-gradient(620px 300px at 50% 100%, rgba(186,156,255,.42), transparent 74%),
    radial-gradient(1500px 780px at 50% 100%, rgba(139,92,255,.40) 0%,
                    rgba(61,123,255,.20) 42%, rgba(255,122,69,.06) 62%, transparent 82%);
  background-repeat:no-repeat,no-repeat;
}
/* O escuro esta declarado em DOIS lugares, e limpar so um deixa o outro
   pintando por cima da luz: o `style=` inline da <section> E a regra
   `.importada--recursos{background:#05070C}` do CSS importado, que cai no
   DIV de fora dela. Os dois precisam ficar transparentes para o fundo da
   caixa de largura total aparecer — senao a luz so se ve nas sobras dos
   lados, que foi o que aconteceu. */
#sec-recursos,
#sec-recursos > section{background:transparent !important}
/* E a secao para de ter altura fixa: os 2040px do arquivo de origem ja
   estouravam 16px com o conteudo que havia, e agora ainda entra o CTA.
   `auto` deixa o conteudo mandar. */
#sec-recursos > section{height:auto !important}

/* O titulo de cada cartao em negrito. Ele e um rotulo em caixa alta com
   entreletra aberta: nesse regime o 700 le como enfase, nao como peso. */
.rec-tit{font-weight:700 !important}

/* ---- o CTA de fecho --------------------------------------------------------
   Pilula branca sobre o escuro — a inversao do botao da casa, que e azul-950
   sobre claro. O papel e o mesmo e o contraste, tambem: o que muda e de que
   lado esta o fundo. So o botao, sem segunda saida: a secao tem uma acao.

   Os seletores levam #sec-recursos na frente porque `.importada a{color:inherit}`
   existe para nao deixar a casa vazar nas secoes importadas, e aqui a cor do
   link e nossa de proposito. */
.rec-cta{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:36px;
  margin-top:96px;
}
/* A frase de fecho. Fica em 56px contra os 84 da manchete da secao: e um
   segundo tempo, nao um segundo comeco. Branco chapado e nao o gradiente da
   casa, porque aqui embaixo o fundo ja e a luz — texto com gradiente sobre
   fundo com gradiente e uma briga que nenhum dos dois ganha.
   A quebra e um <br> e nao `balance`: o balanceamento deixava o artigo "a"
   pendurado no fim da primeira linha. Um <br> fixo e seguro AQUI porque esta
   secao nao reflui — ela escala inteira, entao as duas linhas sao as mesmas
   em qualquer largura. A largura maxima fica como rede, nao como mecanismo. */
#sec-recursos .rec-cta-tit{
  margin:0;max-width:24ch;
  font-family:var(--font-title);font-weight:700;font-size:56px;
  line-height:1.08;letter-spacing:-.03em;text-align:center;
  color:#FFFFFF;
}
#sec-recursos .rec-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 34px;
  font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1.2;
  color:#0B1020;background:#FFFFFF;
  border-radius:var(--r-pill);text-decoration:none;
  /* o halo curto e o que assenta a pilula dentro da luz, em vez de a deixar
     recortada sobre ela */
  box-shadow:0 1px 2px rgba(5,7,12,.28), 0 18px 46px -18px rgba(175,140,255,.55);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#sec-recursos .rec-cta-btn:hover{
  background:#F2F4FF;
  transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(5,7,12,.28), 0 22px 54px -18px rgba(175,140,255,.7);
}
@media (prefers-reduced-motion:reduce){
  #sec-recursos .rec-cta-btn,#sec-recursos .rec-cta-btn:hover{transition:none;transform:none}
}

/* A MANCHETE DA SECAO DO LEVIR AI.
   72px, a mesma medida do heroi, para as duas maiores da pagina baterem. A
   folga do descendente nao precisa de conta nova: ela e declarada em `em` e
   acompanha sozinha.

   E a varredura passa a ser a --grad-caixa, que e a versao da casa para fundo
   escuro: mesmo angulo de 102graus e as mesmas tres paradas da --grad-hero,
   subidas de degrau ate clarearem sobre o escuro. Sai o branco->cinza a
   180graus que veio do Figma, que era um degrade proprio da secao e nao a voz
   da casa.

   Tudo com !important porque a secao inteira vem em `style=` inline, e os
   dois fallbacks solidos porque a Regra da Varredura pede os dois: no
   @supports o branco, que e a ponta clara do gradiente sobre escuro; na
   impressao o grey-900, porque o papel e branco e o branco sumiria. */
#sec-recursos h2{
  font-size:72px !important;
  background-image:var(--grad-caixa) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  #sec-recursos h2{background-image:none !important;color:var(--white) !important;
    -webkit-text-fill-color:currentColor !important}
}
@media print{
  #sec-recursos h2{background-image:none !important;color:var(--grey-900) !important;
    -webkit-text-fill-color:currentColor !important}
}

/* O SUBTITULO DOS CARTOES DO LEVIR AI, em Inter.
   Excecao declarada ao "Manrope em tudo" de 18/09, a pedido. Sao os seis
   cartoes de #sec-recursos: o titulo de cada um segue em Manrope e so a
   linha que o explica muda de familia. A classe foi posta no markup de
   proposito — a secao inteira vem em style= inline, sem uma classe
   sequer, e o unico jeito de separar estes <p> do subtitulo da secao
   seria casar a largura maxima no atributo style, que quebra ao primeiro
   reexport do Figma. `!important` porque o inline ganha da folha. */
.rec-sub{font-family:'Inter','Segoe UI',system-ui,sans-serif !important}

/* SEM VARREDURA, a pedido (18/09/2026). Esta manchete tinha a --grad-hero e
   agora e solida no --grad-hero-solid, que e o mesmo grey-900 que ja servia
   de fallback dela em @supports e em impressao — entao a cor nao e nova, e a
   que o navegador sem clip-text ja mostrava.

   Com o clip fora, os dois blocos de fallback saem junto: nao ha mais o que
   substituir. O que FICA e a folga do descendente, e nao por esquecimento:
   sem clip ela nao pinta mais nada, mas continua sendo o que impede o "g" de
   "Seguranca" de invadir a linha de baixo com a entrelinha de 1,06. A margem
   negativa devolve exatamente o que o recuo tomou, entao nada se move.

   E NAO declaro cor aqui. Escrevi `color:var(--grad-hero-solid)` primeiro e
   medi: nao pegava. O h2 traz `color:#111A2E` no proprio `style=`, e inline
   vence folha — a declaracao era peso morto dizendo uma cor que a pagina nao
   mostrava. Deixo a do arquivo valer, e ela e a melhor das duas: #111A2E ja e
   a cor do "+300 grupos economicos" ao lado e a dos dois blocos escuros desta
   mesma secao. Da 17,34:1 sobre a folha. */
.segcasa h2{
  padding-block:.18em;margin-block:-.18em;
}

/* A REGRA DO BOTÃO FIRME: azul-noite chapado, sem gradiente, sem sombra,
   sem borda, no raio de bloco. */
.segcasa a[style*="rgba(255,255,255,0.04)"]{
  background:var(--btn-primary-bg) !important;
  border-color:transparent !important;
  border-radius:var(--r-pill) !important;   /* pilula, como os outros */
  box-shadow:none !important;
}

/* ============================================================================
   A SECAO DOS AGENTES DE PONTA A PONTA
   ----------------------------------------------------------------------------
   Mesmo movimento feito na seguranca: o fundo muda de dono. A secao tem 1440px
   fixos e e centrada, entao com o fundo nela sobravam faixas nos lados. Vai
   para a caixa de fora, que e bloco de largura total, e as duas de dentro
   ficam transparentes.

   A COR E BRANCO PURO desde 18/09, a pedido. Era o #F3F4F6 da <section>, que
   veio no pacote importado; agora a secao dos agentes assenta na mesma folha
   do resto da pagina, e o degrau de cinza entre ela e as secoes de cima
   deixou de existir. O token e o --folha, o mesmo que a pagina inteira usa.

   O #F3F4F6 continua escrito inline nas duas <section> do
   secoes-importadas.html, mas nao pinta nada: a regra logo abaixo as deixa
   transparentes com !important. Se alguem tirar aquele override, o cinza
   volta por baixo — e ali que ele mora.

   Aqui NAO se usa overflow:hidden na caixa de fora, ao contrario da seguranca:
   hidden fecha contexto de formatacao e o position:sticky da pilha de cartoes
   deixaria de grudar. A altura da caixa passa a vir do JS, ja escalada.
   ============================================================================ */
.agentes-fora{background-color:var(--folha)}
/* O `> section` daqui NAO casava: entre o .importada--agentes e a <section>
   existe um div sem classe, e o filho direto e ele. O cinza inline das duas
   <section> seguia pintando por cima da caixa de fora, e a faixa branca so
   aparecia nos 17px que sobram de cada lado dos 1440 fixos. Trocado por
   descendente + a classe da propria secao, que e o que existe no markup
   importado. */
.agentes-fora .importada--agentes,
.agentes-fora .importada--agentes > div,
.agentes-fora .agents-section{background:transparent !important}

/* ---- o respiro das cartas de conteúdo à direita ----
   As dez cartas alternam o lado: cinco com a coluna de texto à esquerda e a
   animação à direita, cinco ao contrário. Todas vêm do pacote com a coluna a
   56px da borda da carta, o que deixa 46px entre ela e a animação.

   Nas cinco DE CONTEÚDO À DIREITA esses 46px ficam apertados: a animação é
   uma tela de produto cheia de detalhe, e o título encosta nela. Empurrar a
   coluna para a borda abre esse vão sem mexer na animação nem na largura do
   texto — o vão passa de 46 para 70px, e a margem externa cai de 56 para 32.

   O seletor pega o inline: a coluna posicionada por `right` é, por
   construção do pacote, exatamente a que tem conteúdo à direita. Não há
   classe que as separe, e a alternativa seria editar cinco blocos no
   secoes-importadas.html, que é o arquivo em disputa com a outra sessão. */
.agentes-fora .card-col[style*="right:"]{right:var(--col-respiro,32px) !important}
/* O `> div` acima nao e capricho: dentro do wrapper existe um div SEM CLASSE
   de 1440x7620 com `background:#F5F7FB` inline, e era ele que pintava o
   cinza que se via na tela. Nao da para alcancar por classe — nao tem uma —
   e mexer no inline significa editar o secoes-importadas.html, que e o
   arquivo que a outra sessao esta mexendo. Por isso vai por filho direto.

   Os tres seletores juntos cobrem as tres camadas que carregam cinza no
   pacote importado: o wrapper (#F5F7FB no CSS), este div (#F5F7FB inline) e
   as <section> (#F3F4F6 inline). */

/* ---- o realce da manchete do Levir AI ----
   A secao e escura, entao ela nao pode usar a --grad-hero, que vai de cinza
   quase preto a roxo: sobre #07090F o texto sumiria. Este e o MESMO gesto no
   outro sentido, com os tres aros claros — e o par escuro da --grad-hero, o
   mesmo que a chamada dos cases usa. */
.levir-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)){
  .levir-realce{background-image:none;color:var(--aro-azul);-webkit-text-fill-color:currentColor}
}

/* ============================================================================
   CONSENTIMENTO DE COOKIES  (.ck-*)
   ----------------------------------------------------------------------------
   Mora na folha da casa e nao no lp.css porque o banner tem que aparecer nas
   TRINTA E TRES paginas: home, arquivo, entrar e as trinta do gerador. Todas
   embutem ou carregam esta folha; o lp.css so chega nas do gerador.

   O PRIMEIRO E O ULTIMO ELEMENTO DA PAGINA. z-index acima do cabecalho fixo e
   da barra de CTA do celular: um aviso que o proprio site cobre nao e aviso.
   ============================================================================ */
.ck{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  padding:var(--gutter);
  background:var(--folha);
  box-shadow:0 -1px 0 var(--grey-200), 0 -18px 48px rgba(17,19,34,.10);
  animation:ck-sobe .26s var(--ease) both;
}
.ck-in{
  max-width:var(--sheet);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-element) var(--gap-group);
}
.ck-txt{
  flex:1 1 320px;margin:0;
  font-size:var(--fs-micro);line-height:1.6;color:var(--text-2);
}
.ck-txt a{color:var(--interactive);text-decoration:underline;text-underline-offset:3px}
.ck-acoes{display:flex;flex-wrap:wrap;gap:10px}
/* Os tres botoes tem a MESMA caixa. A diferenca entre aceitar e recusar e so
   de preenchimento, e de proposito: botao de recusa menor, mais claro ou
   escondido atras de um link e o padrao escuro que a LGPD chama de vicio de
   consentimento. */
.ck-b{
  min-height:42px;padding:0 18px;
  border-radius:var(--r-pill);border:1px solid var(--grey-200);
  background:var(--folha);color:var(--text-1);
  font-family:var(--font-body);font-size:var(--fs-micro);font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:background-color .16s ease,border-color .16s ease;
}
.ck-b:hover{background:var(--grey-100)}
.ck-b:focus-visible{outline:2px solid var(--interactive);outline-offset:2px}
.ck-b--cheio{background:var(--azul-950);border-color:var(--azul-950);color:#FFFFFF}
.ck-b--cheio:hover{background:var(--azul-900);border-color:var(--azul-900)}

/* ---- o painel ---- */
.ck-fundo{
  position:fixed;inset:0;z-index:210;
  display:grid;place-items:center;padding:var(--gutter);
  background:rgba(10,12,22,.52);
  animation:ck-aparece .2s ease both;
}
.ck-painel{
  width:min(560px,100%);max-height:86vh;overflow:auto;
  padding:clamp(22px,2.6vw,34px);
  border-radius:16px;background:var(--folha);
  box-shadow:0 30px 80px rgba(10,12,22,.34);
}
.ck-titulo{
  margin:0;
  font-family:var(--font-title);font-weight:500;
  font-size:var(--fs-title);line-height:1.25;letter-spacing:-.02em;color:var(--text-1);
}
.ck-sub{margin:var(--gap-text) 0 0;font-size:var(--fs-micro);line-height:1.6;color:var(--text-2)}
.ck-lista{margin:var(--gap-group) 0 0;display:flex;flex-direction:column}
.ck-item{padding:var(--gap-element) 0;border-top:1px solid var(--grey-200)}
.ck-item-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-element);cursor:pointer}
.ck-item:first-child .ck-item-cab{cursor:default}
.ck-item-nome{font-size:var(--fs-ui);font-weight:600;color:var(--text-1)}
.ck-item-txt{margin:6px 0 0;font-size:var(--fs-micro);line-height:1.55;color:var(--text-2)}
.ck-sempre{
  font-size:var(--fs-conta);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);white-space:nowrap;
}
/* A caixa de marcar e a nativa, so ampliada e recolorida. Um interruptor
   desenhado a mao custaria o papel de `checkbox` no leitor de tela, o estado
   lido em voz alta e a navegacao por teclado — tudo isso de graca aqui. */
.ck-cx{width:20px;height:20px;flex:none;accent-color:var(--azul-950);cursor:pointer}
.ck-pe{
  margin-top:var(--gap-group);padding-top:var(--gap-element);
  border-top:1px solid var(--grey-200);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;
}

@keyframes ck-sobe{from{transform:translateY(100%)}to{transform:none}}
@keyframes ck-aparece{from{opacity:0}to{opacity:1}}
/* Movimento reduzido desliga a entrada. O aviso continua aparecendo — o que
   sai e a animacao, nao a informacao. */
.ck--parado{animation:none}
@media (prefers-reduced-motion:reduce){.ck,.ck-fundo{animation:none}}

@media(max-width:700px){
  .ck-acoes{width:100%}
  .ck-b{flex:1 1 100%}
  .ck-pe .ck-b{flex:1 1 100%}
}


/* ===== FIM DO ARQUIVO: O RAMO MOBILE DAS SECOES IMPORTADAS ===============
   ESTE BLOCO VIVE NO FIM DE PROPOSITO. A primeira versao dele ficou junto do
   `#sec-agentes{zoom:1}`, na linha 4455, que e onde o assunto pertence — e nao
   pegou. Mais abaixo, na linha 4977, a casa ja escreve

       #sec-recursos h2{font-size:72px !important}

   mesma especificidade e mesmo `!important`. Empate de especificidade se
   decide por ORDEM, e a de baixo ganhava. Subir a especificidade resolveria o
   h2 e deixaria a proxima colisao para o dia seguinte; ficar por ultimo
   resolve a classe inteira do problema. *//* ===== AS OUTRAS DUAS SECOES IMPORTADAS TAMBEM (22/09/2026) ===============
   `#sec-agentes` ganhou `zoom:1` acima porque o CSS do pacote tem um ramo
   mobile para ele. `#sec-recursos` e `#sec-seguranca-casa` NAO tem — conferido
   arquivo por arquivo em `secoes-importadas.css`: as unicas media queries de
   largura la dentro falam de `#sec-agentes`, `.card-col` e `.card-anim`.

   Sem ramo mobile, o zoom era a unica coisa segurando as duas dentro da tela,
   e num aparelho de 375px ele vale 375/1440 = 0,26. Medido: o corpo de texto
   chegava a 4,2px, os titulos de cartao a 3,9px e a legenda da ISO a 3,6px.
   Nao e "pequeno", e ilegivel.

   POR QUE NAO BASTA SUAVIZAR O ZOOM: a prancheta tem 1440px de largura fixa.
   Qualquer zoom acima de `largura/1440` estoura a tela na horizontal. Ler o
   texto exige reorganizar, nao encolher menos.

   O QUE ESTE BLOCO FAZ, e so no celular:
     · devolve `zoom:1` e larguras fluidas as duas seccoes;
     · solta a altura — o markup importado fixa 2040px e 1400px, medidas de
       uma prancheta que aqui deixou de existir;
     · transforma todo grid de varias colunas em coluna unica;
     · deixa a manchete de 84px fluida.

   `!important` em quase tudo porque o markup importado traz as medidas em
   `style=` inline, e inline so perde para `!important`.

   NADA AQUI VAZA PARA O DESKTOP: o bloco inteiro vive dentro da media query,
   e os dois ids so existem nas seccoes importadas. */
@media (max-width:991px){
  #sec-recursos,
  #sec-seguranca-casa{zoom:1;width:100%}

  #sec-recursos > section,
  #sec-seguranca-casa > section{
    width:100%!important;height:auto!important;
    padding:72px 20px!important;
  }

  /* Uma coluna. `grid-template-areas:none` junto, porque a seccao de seguranca
     posiciona por area ('a b c c' / 'a d d e') e area sobrevive a troca de
     colunas — sem isto os cartoes voltariam para o desenho de quatro colunas. */
  #sec-recursos [style*="grid-template-columns"],
  #sec-seguranca-casa [style*="grid-template-columns"]{
    width:100%!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
    grid-template-areas:none!important;
  }

  /* `grid-template-areas:none` sozinho nao bastava. Os cinco cartoes da
     seccao de seguranca trazem `grid-area:a` ... `grid-area:e` no `style=`, e
     nome de area SOBREVIVE a remocao do desenho: sem area declarada os itens
     se auto-colocavam em colunas IMPLICITAS, e a grade voltava com tres
     colunas de 0px, 0px e 303px. Zerar a area junto e o que fecha a conta. */
  #sec-seguranca-casa [style*="grid-area"]{grid-area:auto!important}

  /* OS CARTOES DE SEGURANCA NAO SE ESTICAM, ENCOLHEM — e de proposito.
     O conteudo deles e posicionado em ABSOLUTO dentro de caixas de medida
     fixa (416, 360, 160 e 360 de largura por 440 de altura). Solta a altura,
     eles colapsavam para 0, 85, 154, 211 e 122px, porque quase nada ali esta
     no fluxo.

     Entao aqui a politica e outra: o cartao mantem o tamanho em que foi
     desenhado e e reduzido INTEIRO, um a um. E a mesma ideia do `.card-anim`
     do pacote, so que por cartao em vez de na prancheta de 1440 — a diferenca
     entre reduzir a 0,78 e reduzir a 0,26.

     416px e a largura do maior deles; os outros tres sao menores e sobram
     folga, que a coluna centraliza.

     CADA CARTAO TEM A SUA MEDIDA, e a primeira versao disto errou feio: eu
     forcei os cinco a 416x440. So um deles tem essa medida. O desenho e
     'a b c c' / 'a d d e', entao dois ocupam DUAS colunas e um ocupa DUAS
     LINHAS. Medido no desktop, um por um:

        a  416 x 896    coluna 1, as duas linhas   <- eu esmagava para 440
        b  360 x 440
        c  536 x 440    colunas 3 e 4
        d  536 x 440    colunas 2 e 3
        e  360 x 440

     Esmagado para 440, o cartao `a` vazava 48px: e o selo da ISO entrando por
     cima do mockup do navegador, que foi exatamente a queixa. O `d` vazava 13.

     O zoom de cada um e a razao entre 335px uteis e a largura natural dele —
     .80, .93, .62, .62 e .93 —, e nao um numero so para todos. */
  #sec-seguranca-casa [style*="grid-area: a"]{width:416px!important;height:896px!important;zoom:.80}
  #sec-seguranca-casa [style*="grid-area: b"]{width:360px!important;height:440px!important;zoom:.93}
  #sec-seguranca-casa [style*="grid-area: c"]{width:536px!important;height:440px!important;zoom:.62}
  #sec-seguranca-casa [style*="grid-area: d"]{width:536px!important;height:440px!important;zoom:.62}
  #sec-seguranca-casa [style*="grid-area: e"]{width:360px!important;height:440px!important;zoom:.93}
  #sec-seguranca-casa [style*="grid-area"]{margin-inline:auto}

  /* ===== A REGUA DE CATEGORIAS ROLA, NAO QUEBRA ==========================
     Ela e uma barra de pilulas — uma peca so, de cantos arredondados. No
     celular o `flex-wrap:wrap` herdado do desktop a desmontava em CINCO
     linhas de 34px, 196px de altura: deixava de ser barra e virava lista, e
     e por isso que ela aparecia "quebrada" mesmo sem transbordar.

     Uma fileira que rola na horizontal preserva a peca e e o gesto que se
     espera de uma regua de abas no telefone. A barra de rolagem some: ela
     atravessaria o canto arredondado. */
  .cases-regua{
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .cases-regua::-webkit-scrollbar{display:none}
  /* `.cases-aba`, e nao `.pill`: a primeira versao desta linha usou `.pill`,
     que e o nome da peca no script do menu do heroi e nao existe na regua de
     cases. A regra nao alvejava nada. Sem ela as abas encolhem no `nowrap` e
     o texto quebra dentro da pilula. */
  .cases-regua .cases-aba{flex:0 0 auto}

  /* ===== O CARTAO `d` DA SEGURANCA: A COLUNA DE TEXTO ERA UM CANUDO ======
     Ele e o "+300 grupos economicos". Medido: a coluna de texto tinha 174px
     renderizados com 28px de recuo de cada lado — sobravam 118px para a
     frase, que quebrava a cada duas palavras, e o corpo saia a 8,7px.

     A largura de 280px naturais existe porque no desktop o diagrama fica a
     DIREITA do texto. Em 335px nao ha "direita": o texto toma a largura
     inteira e o diagrama, que e um <svg> absoluto atras, fica de fundo.

     O QUE PRENDIA ERA UM `max-width:280px` INLINE, e nao a largura: por isso a
     primeira tentativa, so com `width:100%`, nao mudou nada. Inline so perde
     para `!important`.

     E a largura sozinha nao basta. Com zoom .62 o corpo sai a 8,7px por mais
     larga que seja a coluna, entao a fonte sobe na proporcao inversa — 14px
     naturais viram 21, que a .62 rendem os ~13px que se le. */
  #sec-seguranca-casa [style*="grid-area: d"] > div[style*="position: relative"]{
    width:100%!important;max-width:none!important;
  }
  #sec-seguranca-casa [style*="grid-area: d"] > div[style*="position: relative"] p{
    font-size:21px!important;line-height:1.45!important;
  }
  #sec-seguranca-casa [style*="grid-template-columns"]{justify-items:center}

  /* As linhas tambem: o markup fixa `440px 440px`, altura de uma prancheta. */
  #sec-recursos [style*="grid-template-rows"],
  #sec-seguranca-casa [style*="grid-template-rows"]{grid-template-rows:auto!important}

  /* Rede de seguranca SO EM #sec-recursos, cujos cartoes sao fluidos.
     Em #sec-seguranca-casa ela virou o problema: cada cartao la agora tem
     largura natural declarada e e reduzido por zoom, entao limitar os filhos
     a 100% os estreitava, o texto reflua em mais linhas e o conteudo crescia
     PARA BAIXO — 31px de vazamento no cartao `c` e 10 no `d`. Com o cartao
     dimensionado e escalado, a rede deixou de ser rede. */
  #sec-recursos *{max-width:100%}

  /* 84px numa tela de 375 sao tres palavras por linha. */
  #sec-recursos h2{font-size:clamp(30px,8.5vw,56px)!important}
}

/* ===== O `.card-anim` ENCOLHIA MAIS DO QUE PRECISAVA ======================
   As ilustracoes dos cartoes de agente tem 740px naturais, e o CSS do pacote
   as reduz por faixas: .80, .66, .53, .40, .32 e .25. Medido num aparelho de
   375px: a caixa que as recebe tem 343px uteis, entao caberia zoom .464 — e o
   pacote aplicava .32. Quase metade da legibilidade jogada fora.

   E o que se via no balao "Vinculando os graficos": 9px de altura de texto.
   Ele e um <span> num pai com `right:-44px`, feito para transbordar a borda do
   cartao de proposito; o problema nunca foi o transbordo, foi a escala.

   As faixas abaixo sao `caixa util / 740`, com folga. A caixa util e a largura
   da janela menos os 32px de recuo da seccao:

     430px -> 398 uteis -> .538   usamos .52
     392px -> 360      -> .486    usamos .47
     376px -> 344      -> .464    usamos .45
     361px -> 329      -> .444    usamos .43
     330px -> 298      -> .402    usamos .38

   `!important` porque as regras do pacote sao injetadas DEPOIS desta folha. */
@media (max-width:430px){ #sec-agentes .card-anim{zoom:.52!important} }
@media (max-width:392px){ #sec-agentes .card-anim{zoom:.47!important} }
@media (max-width:376px){ #sec-agentes .card-anim{zoom:.45!important} }
@media (max-width:361px){ #sec-agentes .card-anim{zoom:.43!important} }
@media (max-width:330px){ #sec-agentes .card-anim{zoom:.38!important} }