/* Gerado por construir_blog.py. Metade de cima: cópia literal do estilo do
   home-v7.html, para tokens, cabeçalho, rodapé e botões nunca divergirem.
   Metade de baixo: o que só existe no blog. Não editar este arquivo. */

/* Fallback com MÉTRICA CASADA. A home não carrega o estilo-blog.css: ela roda
   só com este <style> inline, e os três @font-face viviam apenas no
   lp.css.base. Sem eles o navegador desenha com system-ui e Georgia crus
   enquanto a fonte do Google não chega, o H1 do hero fecha em 3 linhas em vez
   de 4, e o hero inteiro salta quando a fonte entra: era a causa do CLS de
   0,23. Blog e post já passavam justamente porque herdam o lp.css.base.
   Fator = largura da fonte REAL / largura do FALLBACK, medido com canvas:
   Archivo/Arial 98,44% · Literata/Georgia 105,50% · Martian Mono/Courier 116,65%.
   O fator da Literata saiu da MEDIANA de 76 blocos de texto reais do site (mín
   103,33% · mediana 105,66% · máx 106,93%), não de uma frase de amostra: a razão
   varia com a mistura de glifos, e 104,40% deixava o fallback estreito demais,
   ganhando uma linha por parágrafo quando a fonte real chegava.
   Sem ascent/descent override: aqui a altura da linha é sempre declarada, então
   quem manda é o line-height. */
@font-face{font-family:"Archivo eco";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  size-adjust:98.44%;font-weight:100 900}
@font-face{font-family:"Literata eco";src:local("Georgia"),local("Times New Roman"),local("Liberation Serif");
  size-adjust:105.50%;font-weight:300 700}
@font-face{font-family:"Martian eco";src:local("Courier New"),local("Menlo"),local("Liberation Mono");
  size-adjust:116.65%;font-weight:300 700}
:root{
  --amarelo:#FFA900; --lilas:#7300FF; --grafite:#2C2C2C; --claro:#F2F3F4;

  /* dark integral — sem inversão para branco */
  --bg:      oklch(0.178 0.011 285);
  --bg-2:    oklch(0.223 0.014 285);
  --bg-3:    oklch(0.268 0.017 285);
  --linha:   oklch(0.318 0.019 285);
  --linha-2: oklch(0.392 0.022 285);

  --tx:   oklch(0.968 0.004 85);
  --tx-2: oklch(0.800 0.009 285);
  --tx-3: oklch(0.672 0.013 285);

  --amarelo-tx:  oklch(0.828 0.155 78);
  --lilas-tx:    oklch(0.742 0.185 300);

  --sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;
  --display:'Archivo','Archivo eco',system-ui,sans-serif; --body:'Literata','Literata eco',Georgia,serif; --mono:'Martian Mono','Martian eco',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--tx-2);font-family:var(--body);font-optical-sizing:auto;
  /* serifa clara sobre escuro pede corpo maior e entrelinha maior */
  font-size:clamp(15.5px,0.4vw + 14.5px,17.5px);line-height:1.74;
  font-variant-numeric:tabular-nums;overflow-x:hidden}
::selection{background:var(--amarelo);color:var(--grafite)}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,4vw,52px)}
.mono{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:500}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-0.022em;
  font-stretch:112%;color:var(--tx)}
a{color:inherit}
.ico{width:26px;height:26px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico-xl{width:44px;height:44px;stroke-width:1.25}

.sec{padding-block:clamp(84px,10vw,164px)}
.sec-head{margin-bottom:clamp(40px,5vw,68px)}
.sec-num{font-family:var(--mono);font-size:0.68rem;font-weight:600;letter-spacing:0.1em;color:var(--amarelo);
  display:block;margin-bottom:18px}
/* ch é a largura do glifo ZERO e MUDA quando a fonte web substitui o fallback:
   o size-adjust casa a largura média do texto, não o avanço do zero. Toda medida
   de coluna aqui está em `em`, que depende só do font-size. O fator veio MEDIDO
   por elemento (max-width usada em px / font-size), porque font-stretch entra na
   conta: 0.7201 no H1 do hero (118%), 0.6784 no display em 104%, ~0.579 na
   serifa do corpo. A mesma correção já estava no lp.css.base e nunca tinha
   chegado a este arquivo, que o estilo do blog copia inteiro. */
.sec-title{font-size:clamp(1.95rem,3.6vw,3.1rem);line-height:1.06;max-width:14.92em}
.lede{margin-top:20px;font-size:clamp(1.02rem,0.6vw + 0.95rem,1.2rem);color:var(--tx-2);max-width:33.66em}

/* ─── AURORA POR SEÇÃO ─────────────────────────────────────────────────────
   Uma aurora por seção, ancorada no corte entre elas, alternando cor e lado.
   A alternância não é métrica: o lado faz dir · esq · esq · dir · esq, uma delas
   (03) nasce no meio da seção em vez do corte, e cada uma muda de raio e força.
   Serve para dizer "mudou de assunto", não para virar padrão que o olho antecipa.

   Camada estática de radial-gradient puro: filter:blur em elemento grande custa
   repintura por quadro e travava a rolagem (medido na v6).

   --sob é o quanto a caixa sangra para fora da seção, para cima e para baixo.
   Regra: a rampa do gradiente morre em ~78% do raio, então --sob tem que ser
   MAIOR que 0.78 × raio vertical. Se a rampa alcançar a borda da caixa, o corte
   dela vira um risco reto atravessando a tela. */
.mercado,#vao,.sist,#entregas,#paraquem{position:relative}
.mercado::before,#vao::before,.sist::before,#entregas::before,#paraquem::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;width:100vw;margin-left:-50vw;
  top:calc(-1 * var(--sob));height:calc(100% + 2 * var(--sob))}

/* 01 cenário · lilás à direita, nascendo logo abaixo do corte com o hero.
   Esta é a única que não pode atravessar o corte: o hero é uma faixa OPACA
   (foto + isolation), então a aurora seria cortada nele e o corte apareceria
   como um risco reto na tela. O núcleo desce 300px, mais que o alcance da
   rampa (0.78 × 26vw), para chegar no corte já em alfa zero. */
.mercado::before{--sob:24vw;
  background:radial-gradient(64vw 26vw at 94% calc(24vw + 300px),
    color-mix(in oklab,var(--lilas) 32%,transparent) 0%,
    color-mix(in oklab,var(--lilas) 13%,transparent) 40%, transparent 78%)}

/* 02 o vão · âmbar à esquerda, atravessando o corte; âmbar é claro e pede mais alfa que o lilás */
#vao::before{--sob:29vw;
  background:radial-gradient(64vw 34vw at 7% calc(29vw + 44px),
    color-mix(in oklab,var(--amarelo) 30%,transparent) 0%,
    color-mix(in oklab,var(--amarelo) 12%,transparent) 40%, transparent 78%)}

/* 03 sistemas · lilás no mesmo lado da anterior, mas no meio da seção: quebra a métrica */
.sist::before{--sob:27vw;
  background:radial-gradient(56vw 32vw at 4% 36%,
    color-mix(in oklab,var(--lilas) 30%,transparent) 0%,
    color-mix(in oklab,var(--lilas) 12%,transparent) 40%, transparent 78%)}

/* 04 entregas · âmbar à direita, no corte */
#entregas::before{--sob:32vw;
  background:radial-gradient(70vw 38vw at 95% calc(32vw + 40px),
    color-mix(in oklab,var(--amarelo) 28%,transparent) 0%,
    color-mix(in oklab,var(--amarelo) 11%,transparent) 40%, transparent 78%)}

/* 05 não atendemos todo mundo · lilás discreta; o fecho amarelo cobre o que sobra embaixo */
#paraquem::before{--sob:27vw;
  background:radial-gradient(58vw 32vw at 5% calc(27vw + 56px),
    color-mix(in oklab,var(--lilas) 24%,transparent) 0%,
    color-mix(in oklab,var(--lilas) 10%,transparent) 40%, transparent 78%)}

/* no celular o raio em vw encolhe junto com a tela e a aurora vira bolha:
   alarga em vw, alivia a força e aumenta --sob na mesma proporção */
@media(max-width:820px){
  .mercado::before{--sob:44vw;
    background:radial-gradient(130vw 46vw at 92% calc(44vw + 190px),
      color-mix(in oklab,var(--lilas) 26%,transparent) 0%,
      color-mix(in oklab,var(--lilas) 11%,transparent) 40%, transparent 78%)}
  #vao::before{--sob:46vw;
    background:radial-gradient(132vw 56vw at 10% calc(46vw + 26px),
      color-mix(in oklab,var(--amarelo) 24%,transparent) 0%,
      color-mix(in oklab,var(--amarelo) 10%,transparent) 40%, transparent 78%)}
  .sist::before{--sob:44vw;
    background:radial-gradient(118vw 52vw at 6% 32%,
      color-mix(in oklab,var(--lilas) 21%,transparent) 0%,
      color-mix(in oklab,var(--lilas) 9%,transparent) 40%, transparent 78%)}
  #entregas::before{--sob:48vw;
    background:radial-gradient(138vw 58vw at 92% calc(48vw + 20px),
      color-mix(in oklab,var(--amarelo) 22%,transparent) 0%,
      color-mix(in oklab,var(--amarelo) 9%,transparent) 40%, transparent 78%)}
  #paraquem::before{--sob:44vw;
    background:radial-gradient(122vw 52vw at 8% calc(44vw + 24px),
      color-mix(in oklab,var(--lilas) 18%,transparent) 0%,
      color-mix(in oklab,var(--lilas) 8%,transparent) 40%, transparent 78%)}
}

/* ─── revelação no scroll ─── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ─── topo ─── */
header.top{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,backdrop-filter .35s}
header.top.solid{background:color-mix(in oklab,var(--bg) 86%,transparent);backdrop-filter:blur(9px);border-color:var(--linha)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);padding-block:13px}
.brand{display:block;text-decoration:none}
/* logo oficial COMPLETO no topo, com o descritivo: decisão do Herasmo em 31/08 —
   completo e miúdo é preferível a legível e sem o descritivo */
.brand img{height:58px;width:auto}
nav.main{display:flex;gap:var(--sp-6)}
nav.main a{font-family:var(--display);font-size:0.86rem;font-weight:500;font-stretch:100%;text-decoration:none;
  color:var(--tx-2);padding-block:5px;border-bottom:2px solid transparent;transition:.2s}
nav.main a:hover,nav.main a.ativo{color:var(--amarelo);border-color:var(--amarelo)}
@media(max-width:1000px){nav.main{display:none}}
@media(max-width:900px){.abas{justify-content:flex-start}.aba{flex:0 0 auto}}

/* rótulo de botão não quebra linha, nem no fallback: em 390 px o "Ver o
   cenário" quebrava em duas linhas antes de a fonte chegar e voltava a uma
   depois, o que sozinho valia 0,11 de CLS. A linha da flex ainda quebra, os
   botões é que não. */
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-stretch:100%;
  font-size:0.9rem;padding:13px 22px;text-decoration:none;border:1.5px solid var(--amarelo);
  background:var(--amarelo);color:var(--grafite);transition:.2s}
.btn:hover{background:transparent;color:var(--amarelo)}
.btn.linha{background:transparent;color:var(--tx);border-color:var(--linha-2)}
.btn.linha:hover{background:var(--tx);border-color:var(--tx);color:var(--bg)}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(4px)}


/* ─── widget de WhatsApp com mini-funil ─── */
.zapbt{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:11px;
  background:var(--amarelo);color:var(--grafite);border:0;cursor:pointer;padding:14px 20px;
  font-family:var(--display);font-weight:700;font-stretch:100%;font-size:.9rem;
  box-shadow:0 14px 36px -12px oklch(0.20 0.05 70/.7);transition:transform .22s,box-shadow .22s}
.zapbt:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px oklch(0.20 0.05 70/.8)}
.zapbt svg{width:22px;height:22px;fill:currentColor;stroke:none}
.zapbt.oculto{opacity:0;pointer-events:none;transform:translateY(12px)}
@media(max-width:520px){.zapbt{right:14px;bottom:14px;padding:13px 17px;font-size:.85rem}}
/* o botão de topo mora acima do widget de WhatsApp, que já ocupa o canto */
.aotopo{position:fixed;right:22px;bottom:88px;z-index:70;appearance:none;cursor:pointer;
  width:46px;height:46px;display:grid;place-items:center;color:var(--tx);
  background:color-mix(in oklab,var(--bg-2) 92%,transparent);border:1px solid var(--linha-2);
  backdrop-filter:blur(8px);transition:opacity .22s,transform .22s,border-color .22s}
.aotopo:hover{border-color:var(--amarelo);color:var(--amarelo)}
.aotopo svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.aotopo[hidden]{display:none}
@media(max-width:520px){.aotopo{right:14px;bottom:76px}}

.zapcx{position:fixed;right:22px;bottom:22px;z-index:71;width:min(370px,calc(100vw - 28px));
  background:var(--bg-2);border:1px solid var(--linha-2);
  box-shadow:0 30px 70px -24px oklch(0.10 0.02 285/.85);
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
  transition:opacity .26s cubic-bezier(.16,1,.3,1),transform .26s cubic-bezier(.16,1,.3,1)}
.zapcx.aberta{opacity:1;transform:none;pointer-events:auto}
@media(max-width:520px){.zapcx{right:14px;bottom:14px}}
.zc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;
  background:var(--amarelo);color:var(--grafite)}
.zc-top b{font-family:var(--display);font-stretch:100%;font-weight:700;font-size:.95rem;display:block}
.zc-top span{font-size:.78rem;display:block;margin-top:2px;color:oklch(0.36 0.05 70)}
.zc-fechar{appearance:none;background:none;border:0;cursor:pointer;color:var(--grafite);font-size:1.35rem;
  line-height:1;padding:2px 4px}
.zc-corpo{padding:20px 18px}
.zc-passo[hidden]{display:none}
.zc-p{font-family:var(--display);font-stretch:100%;font-weight:700;font-size:1rem;color:var(--tx);margin-bottom:14px}
.zc-ops{display:grid;gap:8px}
.zc-op{appearance:none;text-align:left;background:var(--bg);border:1px solid var(--linha);color:var(--tx-2);
  cursor:pointer;padding:12px 14px;font-family:var(--body);font-size:.92rem;transition:.18s}
.zc-op:hover{border-color:var(--amarelo);color:var(--tx)}
.zc-campo{margin-bottom:12px}
.zc-campo label{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-3);display:block;margin-bottom:6px}
.zc-campo input{width:100%;background:var(--bg);border:1px solid var(--linha);color:var(--tx);
  font-family:var(--body);font-size:.94rem;padding:11px 13px}
.zc-campo input:focus{outline:none;border-color:var(--amarelo)}
.zc-voltar{appearance:none;background:none;border:0;color:var(--tx-3);cursor:pointer;font-family:var(--mono);
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:0;margin-bottom:14px}
.zc-voltar:hover{color:var(--amarelo)}
.zc-barra{height:2px;background:var(--linha);margin-bottom:18px}
.zc-barra i{display:block;height:100%;background:var(--amarelo);width:33%;transition:width .3s}

/* CTA de fim de seção */
/* sem fio acima: o respiro separa, não o traço */
.cta-sec{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
  margin-top:clamp(52px,6.5vw,86px)}
.cta-sec p{font-family:var(--display);font-stretch:104%;font-weight:700;font-size:clamp(1.02rem,1.5vw,1.3rem);
  color:var(--tx);max-width:none;flex:1;min-width:min(100%,17.64em);line-height:1.3;text-wrap:pretty}

/* ─── indicador flutuante de seção ─── */
.trilha{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:50;
  display:grid;gap:15px;opacity:0;transition:opacity .4s}
.trilha.on{opacity:1}
.trilha a{display:flex;align-items:center;gap:11px;text-decoration:none;justify-content:flex-end}
.trilha i{font-style:normal;width:36px;height:2px;background:var(--linha-2);display:block;
  transform:scaleX(.58);transform-origin:right center;
  transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .25s}
.trilha a.ativo i{transform:scaleX(1);background:var(--amarelo)}
.trilha span{font-family:var(--mono);font-size:0.55rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--tx-3);opacity:0;transform:translateX(6px);transition:.25s;white-space:nowrap}
.trilha a:hover span,.trilha a.ativo span{opacity:1;transform:none}
.trilha a.ativo span{color:var(--amarelo)}
@media(max-width:1420px){.trilha{display:none}}

/* ─── HERO ─── */
.hero{position:relative;min-height:clamp(620px,90vh,900px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;background:var(--bg)}
.hero-bg{position:absolute;inset:-14% 0 -14% 0;z-index:-2;transform:translateZ(0);backface-visibility:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 52%}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,
      color-mix(in oklab,var(--bg) 94%,transparent) 0%,
      color-mix(in oklab,var(--bg) 78%,transparent) 40%,
      color-mix(in oklab,var(--bg) 26%,transparent) 74%,
      color-mix(in oklab,var(--bg) 40%,transparent) 100%),
    linear-gradient(178deg,
      color-mix(in oklab,var(--bg) 84%,transparent) 0%,
      color-mix(in oklab,var(--bg) 30%,transparent) 30%,
      color-mix(in oklab,var(--bg) 74%,transparent) 62%,
      color-mix(in oklab,var(--bg) 96%,transparent) 88%, var(--bg) 100%)}
.hero-in{width:100%;padding-block:clamp(52px,7vw,96px)}
.kicker{display:flex;flex-wrap:wrap;gap:11px;align-items:center;color:var(--tx-2);margin-bottom:var(--sp-6)}
.kicker i{font-style:normal;width:5px;height:5px;background:var(--amarelo);display:inline-block}
/* Reserva de caixa em LINHAS. O size-adjust casa a largura média da família,
   mas este H1 roda em font-stretch:118% e a Arial não tem eixo de largura: o
   fallback fecha em 3 linhas e o Archivo esticado em 4, e o hero inteiro sobe
   quando a fonte chega. Nenhum size-adjust resolve isso. 4,16em = 4 linhas a
   line-height 1,04, e é o valor MEDIDO com a fonte carregada em 360 a 1440 px,
   então o estado final não muda de altura: só o intermediário deixa de ser
   menor. Mesma correção do .lp-hero h1. */
.hero h1{font-size:clamp(2.2rem,5.7vw,4.4rem);max-width:12.24em;font-stretch:118%;
  text-wrap:pretty;min-height:4.16em}
/* abaixo de 400 px os dois botões do hero quebram em duas linhas com a fonte
   real e cabem em uma com o fallback: 7,42em contra 3,3em, medido */
.hero-cta{min-height:3.3em}
@media(max-width:400px){.hero-cta{min-height:7.42em}}
.hero h1 em{font-style:normal;color:var(--amarelo)}
.hero-sub{margin-top:var(--sp-6);font-size:clamp(1.06rem,0.7vw + 0.96rem,1.3rem);color:var(--tx-2);
  max-width:32.53em;line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.hero-note{margin-top:16px;color:var(--tx-3);font-size:0.86rem}

/* ─── 01 cenário ─── */
.mercado{position:relative}

/* cabeçalho em duas colunas: ocupa o miolo inteiro em vez de morrer na metade */
.sec-head.duplo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.sec-head.duplo .lede{margin-top:0}
.head-fonte{margin-top:18px;color:var(--tx-3);font-size:.56rem;line-height:1.9}
@media(max-width:880px){.sec-head.duplo{grid-template-columns:1fr;gap:var(--sp-6);align-items:start}}

.dado-hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,68px);
  align-items:center;padding-block:clamp(32px,4vw,56px);border-top:1px solid var(--linha)}
.dado-hero > *{display:flex;flex-direction:column;justify-content:center}
.dado-num{text-align:center;white-space:nowrap}
@media(max-width:880px){.dado-hero{grid-template-columns:1fr;gap:var(--sp-6)}}
/* display:block ANULA o flex-column herdado de `.dado-hero > *`: em flex, o texto "39" e o
   <sup> viram dois itens e empilham. Nenhum white-space:nowrap resolve item de flex. */
.dado-num{display:block;font-family:var(--display);font-stretch:120%;font-weight:700;font-size:clamp(4.4rem,13vw,9.6rem);
  line-height:.82;letter-spacing:-.045em;color:var(--amarelo)}
.dado-num sup{font-size:.32em;vertical-align:super;margin-left:1px;letter-spacing:-.01em}
.dado-txt h3{font-size:clamp(1.15rem,1.7vw,1.52rem);font-stretch:104%;margin-bottom:14px;text-wrap:pretty}
.dado-txt p{max-width:28.99em}
.fonte{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--tx-3);text-transform:uppercase;
  margin-top:18px;display:block}
.barra{display:grid;gap:9px;margin-top:22px;max-width:430px}
.barra-l{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);white-space:nowrap}
.barra-l span:first-child{overflow:hidden;text-overflow:ellipsis}
.barra-t{height:9px;background:var(--bg-3);position:relative;overflow:hidden}
.barra-t span{position:absolute;inset:0 auto 0 0;background:var(--amarelo);width:0;transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.barra-t.lil span{background:var(--lilas-tx)}
.ind{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));border-left:1px solid var(--linha);
  border-top:1px solid var(--linha);margin-top:0}
.ind > div{padding:clamp(22px,2.4vw,30px);border-right:1px solid var(--linha);border-bottom:1px solid var(--linha);
  display:flex;flex-direction:column}
.viz{height:78px;margin-bottom:18px;display:flex;flex-direction:column;justify-content:flex-start}
.pontos{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;max-width:250px}
.pontos i{aspect-ratio:1;background:var(--bg-3);display:block}
.pontos i.on{background:var(--amarelo)}
.pontos i.lil{background:var(--lilas-tx)}
.ind-n{font-family:var(--display);font-stretch:118%;font-weight:700;font-size:clamp(2.5rem,4vw,3.4rem);
  line-height:.9;letter-spacing:-.04em;color:var(--tx);margin-bottom:14px}
.ind-n small{font-size:.36em;color:var(--tx-3);margin-left:4px;font-weight:500}
.ind p{font-size:.95rem;line-height:1.6;flex:1}
.ind .fonte{margin-top:18px}

/* ─── 02 ruptura ─── */
.ruptura{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}
.rp-lado{padding:clamp(24px,3vw,40px) 0;padding-right:clamp(24px,3.4vw,52px)}
.rp-lado.dir{padding-right:0;padding-left:clamp(24px,3.4vw,52px)}
.rp-tag{color:var(--amarelo);display:block;margin-bottom:24px}
.rp-lista{list-style:none;counter-reset:rp}
.rp-lista li{counter-increment:rp;font-size:clamp(1rem,1.1vw,1.1rem);padding:18px 0 18px 46px;
  border-bottom:1px solid var(--linha);position:relative;line-height:1.5}
.rp-lista li:first-child{border-top:1px solid var(--linha)}
.rp-lista li b{color:var(--tx);font-weight:700;font-family:var(--display);font-stretch:100%}
.rp-lista li::before{content:counter(rp,decimal-leading-zero);position:absolute;left:0;top:20px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--tx-3)}
.rp-med{margin-top:22px;color:var(--tx-3);font-size:.62rem}
.rp-vao{width:clamp(46px,6vw,88px);position:relative;
  background:repeating-linear-gradient(180deg,var(--lilas-tx) 0 9px,transparent 9px 19px);
  background-size:2px 100%;background-position:center;background-repeat:no-repeat}
.rp-vao-txt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.34em;color:var(--lilas-tx);
  background:var(--bg);padding:14px 6px;white-space:nowrap;font-weight:600}
@media(max-width:820px){
  .ruptura{grid-template-columns:1fr}.rp-lado,.rp-lado.dir{padding-inline:0}
  .rp-vao{width:auto;height:74px;background:repeating-linear-gradient(90deg,var(--lilas-tx) 0 9px,transparent 9px 19px);
    background-size:100% 2px;background-position:center;background-repeat:no-repeat}
  .rp-vao-txt{transform:translate(-50%,-50%)}
}
.sutura{display:flex;gap:clamp(20px,4vw,56px);align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:clamp(38px,5vw,64px);padding:clamp(26px,3vw,40px);background:var(--bg-2);border:1px solid var(--linha)}
.sutura h3{font-size:clamp(1.15rem,1.8vw,1.52rem);font-stretch:104%;margin-bottom:12px}
.sutura p{max-width:35.95em}

/* ─── 03 sistemas ─── */
.sist{position:relative}
.sislist{display:grid;border-top:1px solid var(--linha)}
.si{display:grid;grid-template-columns:auto auto 1fr auto;gap:clamp(18px,3vw,44px);align-items:start;
  padding:clamp(26px,3.2vw,44px) clamp(16px,2vw,28px);margin-inline:clamp(-16px,-2vw,-28px);
  border-bottom:1px solid var(--linha);transition:background .25s}
.si:hover{background:color-mix(in oklab,var(--bg-2) 74%,transparent)}
.si-n{font-family:var(--display);font-stretch:118%;font-weight:700;font-size:clamp(1.9rem,3.2vw,2.8rem);
  line-height:.85;letter-spacing:-.04em;color:var(--linha-2);min-width:1.6em;transition:color .25s}
.si:hover .si-n{color:var(--amarelo)}
.si-ico{color:var(--amarelo);padding-top:4px}
.si-c h3{font-size:clamp(1.18rem,1.85vw,1.56rem);font-stretch:104%;margin-bottom:12px}
.si-c p{max-width:33.60em;font-size:1rem;line-height:1.62}
.si-m{display:grid;gap:9px;align-content:start;text-align:right;padding-top:6px}
.si-m .mono{color:var(--tx-3);font-size:.58rem;white-space:nowrap}
@media(max-width:940px){
  .si{grid-template-columns:auto 1fr;gap:14px 20px}
  .si-ico{grid-row:1;grid-column:2;padding-top:0}
  .si-c{grid-column:1/-1}
  .si-m{grid-column:1/-1;text-align:left;display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:10px}
}

/* ─── 04 entregas ─── */
/* seletor de família: uma linha de abas, um painel — não sanfona */
.abas{display:flex;gap:0;justify-content:space-between;border-bottom:1px solid var(--linha);overflow-x:auto;scrollbar-width:none;margin-bottom:clamp(26px,3vw,40px)}
.aba{flex:1 1 0;justify-content:center}
.abas::-webkit-scrollbar{display:none}
.aba{appearance:none;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:11px;
  padding:16px clamp(14px,1.7vw,20px);font-family:var(--display);font-weight:600;font-stretch:100%;
  font-size:clamp(.88rem,1vw,.97rem);color:var(--tx-3);white-space:nowrap;position:relative;transition:color .22s}
.aba .ico{width:20px;height:20px}
.aba::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;transition:background .22s}
.aba:hover{color:var(--tx-2)}
.aba.ativa{color:var(--amarelo)}
.aba.ativa::after{background:var(--amarelo)}
.painel[hidden]{display:none}
.painel{animation:entra .42s cubic-bezier(.16,1,.3,1)}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.painel{animation:none}}
.painel-d{color:var(--tx-3);font-size:1rem;max-width:none;margin-bottom:22px;text-wrap:pretty}
.itens{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  border-top:1px solid var(--linha);border-left:1px solid var(--linha)}
.it{background:var(--bg);padding:clamp(18px,2vw,24px);transition:background .22s;
  border-right:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.it:hover{background:var(--bg-2)}
.it h4{font-size:1.02rem;font-stretch:100%;margin-bottom:8px}
.it p{font-size:.9rem;color:var(--tx-2);line-height:1.55}
.it .tag{font-family:var(--mono);font-size:.55rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--amarelo);display:block;margin-top:12px}
.it .tag.rec{color:var(--lilas-tx)}

/* ─── 05 para quem ─── */
.fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px)}
.fg{padding:clamp(26px,3vw,40px);border:1px solid var(--linha)}
.fg.sim{background:color-mix(in oklab,var(--amarelo) 7%,var(--bg));border-color:color-mix(in oklab,var(--amarelo) 30%,var(--bg))}
.fg-top{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--linha)}
.fg-top .mono{font-size:.68rem;letter-spacing:.16em}
.fg.sim .fg-top{color:var(--amarelo);border-bottom-color:color-mix(in oklab,var(--amarelo) 26%,var(--bg))}
.fg.nao .fg-top{color:var(--lilas-tx)}
.fg ul{list-style:none;display:grid;gap:15px}
.fg-sub{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:16px}
.fg-sub.segunda{margin-top:26px;padding-top:22px;border-top:1px solid color-mix(in oklab,var(--amarelo) 22%,transparent)}
.fg-seg li b{display:block;margin-bottom:2px}
.fg li{font-size:.99rem;padding-left:26px;position:relative;line-height:1.55}
.fg li::before{position:absolute;left:0;top:1px;font-family:var(--mono);font-size:.8rem;font-weight:700}
.fg.sim li::before{content:'+';color:var(--amarelo)}
.fg.nao li::before{content:'×';color:var(--lilas-tx)}
.fg li b{color:var(--tx);font-family:var(--display);font-weight:700;font-stretch:100%}
@media(max-width:760px){.fitgrid{grid-template-columns:1fr}}

/* ─── redes sociais ─── */
/* No fecho amarelo o hover não pode ser âmbar: some no próprio fundo. Aqui a
   caixa de 1px é que responde, no mesmo idioma dos outros blocos da página. */
.redes{margin-top:clamp(26px,3.4vw,38px);display:flex;flex-wrap:wrap;gap:12px}
.redes a{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;text-decoration:none;
  border:1px solid var(--grafite);color:var(--grafite);font-size:.88rem;transition:background .2s}
.redes a:hover{background:color-mix(in oklab,var(--grafite) 12%,transparent)}
.redes .rd{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.redes-pe{list-style:none;display:flex;gap:14px;margin-top:20px}
.redes-pe a{display:inline-flex;padding:9px;border:1px solid var(--linha);color:var(--tx-2);
  transition:color .16s,border-color .16s}
.redes-pe a:hover{color:var(--amarelo);border-color:var(--amarelo)}
.redes-pe .rd{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ─── fecho + formulário ─── */
.fecho{background:var(--amarelo);color:var(--grafite);border-top:1px solid var(--amarelo)}
.fecho h2,.fecho h3{color:var(--grafite)}
.fecho p{color:oklch(0.34 0.055 70)}
.fecho-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:center}
/* centrado, não `start`: sem os funis a coluna de texto é bem mais baixa que o
   formulário, e alinhada pelo topo deixa um vazio embaixo que lê como erro */
@media(max-width:900px){.fecho-grid{grid-template-columns:1fr}}
.fecho h2{font-size:clamp(1.9rem,4.2vw,3.1rem);max-width:10.85em;text-wrap:pretty}
.fecho > .wrap > .fecho-grid > div > p{margin-top:20px;max-width:27.81em;font-size:1.06rem}
/* grade preparada para crescer de 3 para as 6+ portas dos macro-segmentos */
.funis{margin-top:clamp(28px,4vw,42px);display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  border-top:1px solid var(--grafite);border-left:1px solid var(--grafite)}
.fn{padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-decoration:none;
  border-right:1px solid var(--grafite);border-bottom:1px solid var(--grafite);transition:background .2s}
.fn:hover{background:color-mix(in oklab,var(--grafite) 12%,transparent)}
.fn b{font-family:var(--display);font-stretch:100%;font-weight:700;font-size:.95rem;color:var(--grafite);display:block}
.fn span{font-size:.81rem;color:oklch(0.40 0.05 70);display:block;margin-top:3px}
.fn .arw{color:var(--grafite);font-size:1.1rem;transition:transform .2s}
.fn:hover .arw{transform:translateX(4px)}
.funis-nota{margin-top:14px;font-size:.8rem;color:oklch(0.40 0.05 70)}

form.rapido{background:var(--bg);border:1px solid var(--bg);padding:clamp(24px,3vw,34px);
  box-shadow:0 24px 60px -28px oklch(0.20 0.05 70 / .55)}
form.rapido h3{color:var(--tx)}
form.rapido > p{color:var(--tx-3)}
form.rapido h3{font-size:1.22rem;font-stretch:102%;margin-bottom:8px}
form.rapido > p{font-size:.9rem;color:var(--tx-3);margin-bottom:24px}
.campo{margin-bottom:16px}
.campo label{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-3);display:block;margin-bottom:7px}
.campo input,.campo select{width:100%;background:var(--bg-2);border:1px solid var(--linha);color:var(--tx);
  font-family:var(--body);font-size:.97rem;padding:12px 14px;transition:border-color .2s}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--amarelo)}
.campo input::placeholder{color:var(--tx-3)}
form.rapido .btn{width:100%;justify-content:center;margin-top:8px}
form.rapido .btn:hover{background:transparent;color:var(--amarelo);border-color:var(--amarelo)}
.zap{margin-top:16px;text-align:center;font-size:.85rem;color:var(--tx-3)}
.zap a{color:var(--amarelo);text-decoration:none;border-bottom:1px solid transparent}
.zap a:hover{border-color:var(--amarelo)}

footer{border-top:1px solid var(--linha);padding-block:var(--sp-16) var(--sp-8)}
/* folga no fim da página para o botão flutuante do WhatsApp, que é fixed no
   canto: sem ela ele cobre a política de privacidade em 1440 px (medido) */
footer{padding-bottom:calc(var(--sp-8) + 72px)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--sp-8)}
footer .brand{margin-bottom:22px}
footer .brand img{height:76px}
footer h4{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:var(--tx-3);font-weight:500;
  margin-bottom:16px;text-transform:uppercase}
footer ul{list-style:none;display:grid;gap:11px}
/* sublinhado no hover fica só no menu do topo; no rodapé o link só muda de cor */
footer a{font-size:.89rem;text-decoration:none;transition:color .16s}
footer a:hover{color:var(--amarelo)}
/* o logo é imagem, então "mudar de cor" é uma segunda cópia âmbar por cima */
footer .brand{position:relative;display:inline-block}
footer .brand::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .18s;
  background:url(img/logo-amarelo.svg) no-repeat left center/contain;pointer-events:none}
footer .brand:hover::after{opacity:1}
footer p{font-size:.88rem;max-width:19.10em}
.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:var(--sp-16);
  padding-top:var(--sp-4);border-top:1px solid var(--linha);color:var(--tx-3)}
.foot-bar .mono,.foot-bar .mono a{font-size:.58rem;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr}}


/* ═══════ daqui para baixo: só do blog ═══════ */
/* Componentes que só existem no blog. O resto (tokens, cabeçalho, rodapé,
   botões, tipografia base) vem da cópia do home-v7 acima deste ponto. */

/* o cabeçalho do site é fixo: o miolo precisa começar abaixo dele */
main{padding-top:clamp(84px,9vw,104px)}

/* ─── aurora da cabeça de página ───────────────────────────────────────────
   Mesma regra do home: --sob tem que ser MAIOR que 0.78 × raio vertical,
   senão o corte da caixa vira um risco reto atravessando a tela. */
.cabeca{position:relative}
.cabeca::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;width:100vw;margin-left:-50vw;
  --sob:28vw;top:calc(-1 * var(--sob));height:calc(100% + 2 * var(--sob));
  background:radial-gradient(64vw 34vw at 88% calc(28vw + 40px),
    color-mix(in oklab,var(--lilas) 28%,transparent) 0%,
    color-mix(in oklab,var(--lilas) 11%,transparent) 40%, transparent 78%)}
.post .post-topo{position:relative}
.post .post-topo::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;width:100vw;margin-left:-50vw;
  --sob:26vw;top:calc(-1 * var(--sob));height:calc(100% + 2 * var(--sob));
  background:radial-gradient(60vw 32vw at 8% calc(26vw + 60px),
    color-mix(in oklab,var(--amarelo) 16%,transparent) 0%,
    color-mix(in oklab,var(--amarelo) 7%,transparent) 40%, transparent 78%)}
@media(max-width:820px){
  .cabeca::before{--sob:46vw;
    background:radial-gradient(128vw 56vw at 88% calc(46vw + 20px),
      color-mix(in oklab,var(--lilas) 22%,transparent) 0%,
      color-mix(in oklab,var(--lilas) 9%,transparent) 40%, transparent 80%)}
  .post .post-topo::before{--sob:44vw;
    background:radial-gradient(122vw 52vw at 10% calc(44vw + 24px),
      color-mix(in oklab,var(--amarelo) 13%,transparent) 0%,
      color-mix(in oklab,var(--amarelo) 6%,transparent) 40%, transparent 80%)}
}

/* ─── trilha de navegação ─── */
.trilha-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--tx-3);
  margin-bottom:var(--sp-6);font-size:.58rem}
.trilha-nav a{text-decoration:none;transition:color .16s}
.trilha-nav a:hover{color:var(--amarelo)}
.trilha-nav i{font-style:normal;color:var(--linha-2)}
.trilha-nav span{color:var(--tx-2)}

/* ─── etiqueta de categoria e de tag ─── */
.chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:500;text-decoration:none;
  color:var(--tx-3);border:1px solid var(--linha);padding:6px 11px;transition:.18s}
.chip:hover{color:var(--amarelo);border-color:color-mix(in oklab,var(--amarelo) 46%,transparent)}

/* ─── cabeça de página ─── */
.cabeca{padding-block:clamp(48px,6vw,88px) clamp(30px,4vw,48px)}
.cabeca h1{font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:1.04;margin-top:6px}
.cabeca .conta{display:block;margin-top:20px;color:var(--tx-3);font-size:.58rem}
.filtros{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(26px,3vw,38px)}

/* ─── listagem ─── */
.listagem{padding-bottom:clamp(64px,8vw,120px)}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  gap:clamp(22px,2.6vw,36px)}
.card{display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--linha);
  transition:border-color .22s,transform .22s}
.card:hover{border-color:color-mix(in oklab,var(--amarelo) 42%,transparent);transform:translateY(-3px)}
.card-img{display:block;aspect-ratio:1200/630;overflow:hidden;background:var(--bg-3)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.card:hover .card-img img{transform:scale(1.035)}
.card-txt{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:12px;flex:1}
.card-txt h3{font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.22;font-stretch:104%}
.card-txt h3 a{text-decoration:none}
.card-txt h3 a:hover{color:var(--amarelo)}
.card-txt p{font-size:.92rem;line-height:1.6;color:var(--tx-2);flex:1}
.card-meta{color:var(--tx-3);font-size:.56rem}
.card .chip{align-self:flex-start}

/* o mais recente ocupa a largura inteira, em duas colunas */
.card.grande{flex-direction:row;margin-bottom:clamp(22px,2.6vw,36px)}
.card.grande .card-img{flex:0 0 52%;aspect-ratio:auto}
.card.grande .card-txt{padding:clamp(26px,3.4vw,52px);justify-content:center;gap:16px}
.card.grande h3{font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.1;font-stretch:106%}
.card.grande p{font-size:1.02rem;flex:0}
@media(max-width:820px){.card.grande{flex-direction:column}.card.grande .card-img{flex:none;aspect-ratio:1200/630}}

/* ─── artigo ─── */
.post-topo{padding-block:clamp(40px,5vw,72px) clamp(24px,3vw,36px)}
.post-topo h1{font-size:clamp(2.1rem,4.6vw,3.8rem);line-height:1.04;margin-top:14px}
.post-lede{margin-top:20px;font-size:clamp(1.1rem,.7vw + 1rem,1.4rem);color:var(--tx-2)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.4vw,34px);
  margin-top:clamp(26px,3vw,38px);padding-top:22px;border-top:1px solid var(--linha)}
.post-meta .mono{color:var(--tx-3);font-size:.58rem}
.autor{display:grid;gap:3px;text-decoration:none}
.autor-n{font-family:var(--display);font-weight:700;font-stretch:104%;font-size:.98rem;color:var(--tx)}
.autor:hover .autor-n{color:var(--amarelo)}
.autor .mono{font-size:.54rem}
.post-capa{margin-block:clamp(26px,3vw,44px)}
.post-capa img{width:100%;height:auto;border:1px solid var(--linha)}

/* ─── corpo do artigo ─── */
/* Sem barra lateral, o texto ocupa TODO o miolo. A régua de 45-75 caracteres
   vale para texto corrido de coluna única em página que TEM coluna ao lado;
   aplicá-la aqui só deixa meio miolo vazio. Se um dia entrar sumário fixo na
   lateral, aí sim a medida da coluna encolhe junto. */
.prosa{padding-bottom:clamp(30px,4vw,52px)}
.prosa p{margin-bottom:1.3em;font-size:clamp(1.06rem,.45vw + .98rem,1.24rem);line-height:1.8}
.prosa h2{font-size:clamp(1.55rem,2.6vw,2.3rem);line-height:1.12;font-stretch:106%;
  margin-top:clamp(46px,5vw,78px);margin-bottom:.6em}
.prosa h3{font-size:clamp(1.16rem,1.7vw,1.46rem);font-stretch:104%;
  margin-top:clamp(32px,3.4vw,48px);margin-bottom:.5em}
.prosa ul,.prosa ol{margin:0 0 1.35em 1.15em;display:grid;gap:.6em}
.prosa li{padding-left:.35em;line-height:1.7}
.prosa li::marker{color:var(--amarelo)}
.prosa strong{color:var(--tx);font-weight:600}
.prosa em{font-style:italic}
.prosa a{color:var(--amarelo);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--amarelo) 40%,transparent);transition:border-color .16s}
.prosa a:hover{border-color:var(--amarelo)}
.prosa code{font-family:var(--mono);font-size:.82em;background:var(--bg-2);
  border:1px solid var(--linha);padding:2px 6px;color:var(--tx)}
.prosa hr{border:0;border-top:1px solid var(--linha);margin-block:clamp(38px,4.4vw,62px)}
.prosa blockquote{border-left:2px solid var(--amarelo);padding-left:clamp(18px,2vw,28px);
  margin-bottom:1.35em;color:var(--tx);font-size:1.1em}
.prosa img{height:auto;border:1px solid var(--linha);margin-bottom:1.35em}
.prosa table{width:100%;border-collapse:collapse;margin-bottom:1.35em;font-size:.94rem}
.prosa th,.prosa td{border:1px solid var(--linha);padding:10px 14px;text-align:left}
.prosa th{font-family:var(--display);font-weight:700;color:var(--tx);background:var(--bg-2)}


/* ─── pé do artigo ─── */
.post-pe{padding-bottom:clamp(50px,6vw,84px);display:grid;gap:clamp(28px,3.4vw,46px)}
.tags{display:flex;flex-wrap:wrap;gap:9px;padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--linha)}
.bio{background:var(--bg-2);border:1px solid var(--linha);padding:clamp(24px,3vw,40px);display:grid;gap:14px}
.bio h2{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);font-weight:500}
.bio p{font-size:1rem}
.bio .btn{justify-self:start;margin-top:6px}
.cta-post{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);
  flex-wrap:wrap;background:var(--bg-2);border:1px solid var(--linha);padding:clamp(24px,3vw,38px)}
.cta-post p{font-family:var(--display);font-stretch:104%;font-weight:700;color:var(--tx);
  font-size:clamp(1.02rem,1.5vw,1.3rem);line-height:1.3;flex:1;min-width:min(100%,16.28em)}

/* ─── relacionados ─── */
.relacionados{padding-block:clamp(50px,6vw,88px);border-top:1px solid var(--linha)}
.relacionados h2{font-size:clamp(1.3rem,2vw,1.7rem);font-stretch:104%;margin-bottom:clamp(26px,3vw,38px)}

/* ─── resposta direta no topo ──────────────────────────────────────────────
   É o trecho que ChatGPT, Perplexity e AI Overviews extraem. Fica antes de
   qualquer contexto porque o peso de citação está nas primeiras ~150 palavras. */
.resposta{background:var(--bg-2);border:1px solid var(--linha);border-left:3px solid var(--amarelo);
  padding:clamp(22px,2.6vw,34px);margin-bottom:clamp(38px,4vw,58px);display:grid;gap:12px}
.resposta h2{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amarelo);font-weight:500;margin:0}
.resposta p{margin:0;font-size:clamp(1.1rem,.5vw + 1rem,1.3rem);line-height:1.66;color:var(--tx)}
.resposta .mono{color:var(--tx-3);font-size:.56rem}

/* ─── perguntas frequentes ─── */
.faq{margin-top:clamp(48px,5.5vw,80px);padding-top:clamp(34px,3.6vw,48px);border-top:1px solid var(--linha)}
.faq > h2{margin-top:0}
.faq .qa{padding-block:clamp(20px,2.2vw,28px);border-bottom:1px solid var(--linha)}
.faq .qa:last-child{border-bottom:0;padding-bottom:0}
.faq .qa h3{margin-top:0;margin-bottom:.45em;font-size:clamp(1.08rem,1.5vw,1.32rem)}
.faq .qa p{margin-bottom:0}

/* ═══════ flutuantes: WhatsApp e voltar ao topo ═══════
   Empilhados no canto, com o WhatsApp por baixo e o topo por cima. O botão de
   topo só existe depois que a página rolou: antes disso ele não tem função e
   só ocupa polegar. */
.flutua{position:fixed;right:22px;bottom:22px;z-index:70;display:grid;gap:11px;justify-items:end}
@media(max-width:520px){.flutua{right:14px;bottom:14px}}
.zapf{display:flex;align-items:center;gap:11px;text-decoration:none;
  background:var(--amarelo);color:var(--grafite);padding:14px 20px;
  font-family:var(--display);font-weight:700;font-stretch:100%;font-size:.9rem;
  box-shadow:0 14px 36px -12px oklch(0.20 0.05 70/.7);transition:transform .22s,box-shadow .22s}
.zapf:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px oklch(0.20 0.05 70/.8)}
.zapf svg{width:22px;height:22px;fill:currentColor;stroke:none;flex:none}
@media(max-width:520px){.zapf{padding:13px 17px;font-size:.85rem}}
.aotopo{appearance:none;cursor:pointer;width:46px;height:46px;display:grid;place-items:center;
  background:color-mix(in oklab,var(--bg-2) 92%,transparent);color:var(--tx);
  border:1px solid var(--linha-2);backdrop-filter:blur(8px);
  transition:opacity .22s,transform .22s,border-color .22s,background .22s}
.aotopo:hover{border-color:var(--amarelo);color:var(--amarelo)}
.aotopo svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.aotopo[hidden]{display:none}
.flutua.esconde .zapf,.flutua.esconde .aotopo{opacity:0;pointer-events:none;transform:translateY(12px)}
@media(prefers-reduced-motion:reduce){.zapf,.aotopo{transition:none}}

/* ═══════ fallback com métrica casada ═══════
   O deslocamento de layout que reprovava a LP em 390 px vinha da troca de
   fonte: o texto reflui quando a fonte web chega, aos ~330 ms, e empurra tudo
   abaixo. A correção não é esconder texto nem font-display:optional (que
   custaria a fonte da marca no primeiro acesso): é dar ao fallback a MESMA
   largura da fonte final.

   size-adjust = largura da fonte real / largura do fallback. Medido no próprio
   site, com canvas, no mesmo peso em que cada uma é usada:
   Archivo/Arial 98,44% · Literata/Georgia 105,50% · Martian Mono/Courier 116,65%.
   O fator da Literata saiu da MEDIANA de 76 blocos de texto reais do site (mín
   103,33% · mediana 105,66% · máx 106,93%), não de uma frase de amostra: a razão
   varia com a mistura de glifos, e 104,40% deixava o fallback estreito demais,
   ganhando uma linha por parágrafo quando a fonte real chegava.
   Sem ascent/descent override: seria número chutado, e a altura da linha aqui é
   sempre declarada, então quem manda é o line-height. */
@font-face{font-family:"Archivo eco";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  size-adjust:98.44%;font-weight:100 900}
@font-face{font-family:"Literata eco";src:local("Georgia"),local("Times New Roman"),local("Liberation Serif");
  size-adjust:105.50%;font-weight:300 700}
@font-face{font-family:"Martian eco";src:local("Courier New"),local("Menlo"),local("Liberation Mono");
  size-adjust:116.65%;font-weight:300 700}
:root{
  --display:'Archivo','Archivo eco',system-ui,sans-serif;
  --body:'Literata','Literata eco',Georgia,serif;
  --mono:'Martian Mono','Martian eco',ui-monospace,monospace;
}
/* altura de linha declarada em tudo que usa a mono: sem isso a caixa da linha
   depende da métrica da fonte, e o fallback muda de altura ao ser trocado */
.mono,.sec-num,.trilha-nav,.card-meta,.sinais .fonte,.criterio h3,
.lp-form label,.resposta h2,.bio h2{line-height:1.5}


/* ═══════════════ LP DE VENDA ═══════════════
   Página de conversão, não de conteúdo. Três regras mandam no layout:
   1. bloco escaneável no lugar de parágrafo: card, coluna, lista com ícone;
   2. CTA entre os blocos, não só no topo e no fim;
   3. attention ratio baixo: sem menu de navegação e com rodapé mínimo, porque
      cada link a mais é porta de saída antes da conversão. */

body.lp main{padding-top:0}
.lp-top{position:sticky;top:0;background:color-mix(in oklab,var(--bg) 88%,transparent);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--linha)}
.lp-top .top-in{padding-block:11px}
.lp-top .brand img{height:50px;width:auto}
@media(max-width:560px){.lp-top .btn{font-size:.78rem;padding:11px 14px}}

/* ─── hero: uma tela, foto de fundo, um CTA ─── */
.lp-hero{position:relative;min-height:clamp(520px,78vh,760px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;background:var(--bg)}
.lp-hero .hero-img{position:absolute;inset:0;z-index:-2}
.lp-hero .hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.lp-hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,
      color-mix(in oklab,var(--bg) 95%,transparent) 0%,
      color-mix(in oklab,var(--bg) 82%,transparent) 44%,
      color-mix(in oklab,var(--bg) 34%,transparent) 78%,
      color-mix(in oklab,var(--bg) 48%,transparent) 100%),
    linear-gradient(178deg,
      color-mix(in oklab,var(--bg) 82%,transparent) 0%,
      color-mix(in oklab,var(--bg) 26%,transparent) 34%,
      color-mix(in oklab,var(--bg) 78%,transparent) 70%, var(--bg) 100%)}
.hero-in{width:100%;padding-block:clamp(44px,6vw,80px)}
.olho{display:inline-block;color:var(--amarelo);font-size:.6rem;letter-spacing:.2em;
  padding-bottom:14px;border-bottom:1px solid color-mix(in oklab,var(--amarelo) 40%,transparent)}

/* ═══════ nada de max-width em ch ═══════
   `ch` é a largura do glifo zero: ele MUDA quando a fonte web substitui o
   fallback, o título reflui e o CLS volta (0,205 medido em 820 px). O
   size-adjust casa a largura média do texto, não o avanço do zero. `em` depende
   só do font-size, então atravessa a troca sem mexer na quebra de linha. */
/* text-wrap:balance reequilibra TODAS as linhas, então a contagem de linhas
   muda quando a fonte troca e o hero pula (0,23 de CLS em 820 px). `pretty` só
   evita a órfã da última linha, sem rebalancear o bloco inteiro. */
.lp-hero h1{margin-top:22px;font-size:clamp(2.05rem,4.7vw,3.8rem);line-height:1.03;
  max-width:12.5em;text-wrap:pretty}
/* ═══════ o sub NUNCA quebra antes do título ═══════
   Reincidência da mesma régua: o título usa a linha inteira e o texto de apoio,
   com cap próprio, quebrava antes dele. Como o título é bem maior em px, um cap
   em `em` no corpo sempre resulta numa caixa MENOR. A regra é simples: o texto
   de apoio acompanha a largura do bloco, e quem limita é o miolo. */
.lp-hero .sub{margin-top:20px;font-size:clamp(1.06rem,.6vw + 1rem,1.32rem);color:var(--tx-2);
  line-height:1.6}
/* ═══════ caixa reservada no hero ═══════
   Antes de a folha do Google chegar, o navegador ainda não conhece a família
   e monta o título com uma métrica; depois remonta. O texto muda de 3 para 4
   linhas e o hero inteiro sobe, o que deu 0,23 de CLS em 820 px. Reservar a
   altura em linhas faz os dois estados ocuparem a mesma caixa: o texto troca,
   o layout não anda. Em `em`, que não depende do glifo. */
.lp-hero h1{min-height:calc(4.12 * 1em)}
.lp-cta{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;margin-top:clamp(26px,3vw,40px);
  min-height:6.4em}
@media(min-width:1100px){.lp-hero h1{min-height:calc(2.06 * 1em)}.lp-cta{min-height:3.2em}}
@media(max-width:560px){.lp-hero h1{min-height:calc(5.15 * 1em)}}
.btn.grande{padding:17px 26px;font-size:1rem}
.lp-cta .nota{color:var(--tx-2);font-size:.9rem}

/* ─── faixa de números ─── */
.sinais{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-left:1px solid var(--linha);position:relative;z-index:2;
  background:var(--bg-2);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.sinais div{border-right:1px solid var(--linha);padding:clamp(20px,2.2vw,28px)}
.sinais b{display:block;font-family:var(--display);font-stretch:112%;font-weight:700;color:var(--amarelo);
  font-size:clamp(1.9rem,2.8vw,2.5rem);line-height:1;letter-spacing:-.03em}
.sinais p{margin-top:12px;font-size:.93rem;line-height:1.5;color:var(--tx-2)}
.sinais .fonte{margin-top:12px}

/* ─── bloco padrão ─── */
.bloco{padding-block:clamp(42px,6vw,104px)}
.bloco > h2{font-size:clamp(1.65rem,3.1vw,2.7rem);line-height:1.08;max-width:14em;text-wrap:pretty}
.bloco > .sub{margin-top:14px;font-size:clamp(1rem,.4vw + .95rem,1.15rem);color:var(--tx-2)}

/* ─── cards com ícone ─── */
.cards{display:grid;gap:clamp(16px,1.8vw,22px);margin-top:clamp(28px,3.2vw,44px)}
/* quatro colunas fixas em vez de auto-fit: com auto-fit o 4º e o 8º card
   sobravam sozinhos na linha, o que lê como erro de layout, não como grade */
.cards.quatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards.tres{grid-template-columns:repeat(auto-fit,minmax(276px,1fr))}
@media(max-width:1080px){.cards.quatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cards.quatro{grid-template-columns:1fr}}
.cards article{background:var(--bg-2);border:1px solid var(--linha);padding:clamp(20px,2.2vw,28px);
  display:grid;gap:12px;align-content:start;transition:border-color .22s,transform .22s}
.cards article:hover{border-color:color-mix(in oklab,var(--amarelo) 46%,transparent);transform:translateY(-2px)}
.cards .ico{width:30px;height:30px;color:var(--amarelo)}
.cards h3{font-size:clamp(1.02rem,1.3vw,1.16rem);font-stretch:104%;margin:0;line-height:1.25}
.cards p{font-size:.95rem;line-height:1.58;margin:0;color:var(--tx-2)}

/* ─── antes x depois ─── */
.virada{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--linha);border-left:1px solid var(--linha)}
.virada > div{border-right:1px solid var(--linha);border-bottom:1px solid var(--linha);
  padding:clamp(15px,1.7vw,20px) clamp(16px,1.9vw,24px);display:grid;grid-template-columns:auto 1fr;
  gap:12px;align-items:start;font-size:.97rem;line-height:1.55}
.virada .cab{display:block;padding-block:14px;background:var(--bg-2)}
.virada .cab .mono{font-size:.56rem}
.virada .cab.antes .mono{color:var(--tx-3)}
.virada .cab.depois .mono{color:var(--amarelo)}
.virada .antes{color:var(--tx-3)}
.virada .depois{color:var(--tx)}
.virada .ico.min{width:17px;height:17px;margin-top:3px}
.virada .antes .ico{color:var(--lilas-tx)}
.virada .depois .ico{color:var(--amarelo)}
@media(max-width:700px){.virada{grid-template-columns:1fr}}

/* no celular a foto do hero ocupa a largura toda e o texto cai sobre a parte
   clara dela: o véu escurece mais, senão o olho âmbar reprova contraste */
@media(max-width:820px){
  .lp-hero::before{background:linear-gradient(178deg,
      color-mix(in oklab,var(--bg) 88%,transparent) 0%,
      color-mix(in oklab,var(--bg) 62%,transparent) 26%,
      color-mix(in oklab,var(--bg) 88%,transparent) 52%, var(--bg) 92%)}
}

/* ─── faixa de CTA entre blocos ─── */
.faixa-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,40px);margin-top:clamp(32px,3.6vw,52px);padding:clamp(22px,2.6vw,34px);
  border:1px solid color-mix(in oklab,var(--amarelo) 34%,transparent);
  background:color-mix(in oklab,var(--amarelo) 7%,var(--bg-2))}
.faixa-cta p{font-family:var(--display);font-stretch:104%;font-weight:700;color:var(--tx);
  font-size:clamp(1.02rem,1.5vw,1.3rem);line-height:1.3;flex:1;min-width:min(100%,12em);margin:0}

/* ─── prova ─── */
.prova{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,4vw,60px);align-items:stretch}
@media(max-width:900px){.prova{grid-template-columns:1fr}}
/* a coluna de texto usa a coluna inteira: cap estreito ao lado de uma figura
   deixa o vazio no meio do bloco, que lê como erro e não como respiro */
.prova p{margin-top:16px;font-size:1rem;line-height:1.7;color:var(--tx-2)}
.prova ol{list-style:none;margin:clamp(22px,2.4vw,32px) 0 0;display:grid;gap:0;
  border-top:1px solid var(--linha);counter-reset:pv}
.prova li{counter-increment:pv;border-bottom:1px solid var(--linha);padding:16px 0 16px 42px;
  position:relative;display:grid;gap:5px}
.prova li::before{content:counter(pv,decimal-leading-zero);position:absolute;left:0;top:16px;
  font-family:var(--mono);font-size:.62rem;color:var(--amarelo);letter-spacing:.08em}
.prova li b{font-family:var(--display);font-stretch:104%;font-size:.98rem;color:var(--tx)}
.prova li span{font-size:.95rem;line-height:1.55;color:var(--tx-2)}
/* nome com prefixo: `.fecho` sozinho colide com a seção amarela do home */
.prova .prova-fecho{margin-top:20px;color:var(--tx)}
.prova figure{margin:0}
.prova figure{display:flex}
.prova figure img{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  border:1px solid var(--linha);min-height:clamp(320px,42vw,560px)}

/* ─── funciona / não funciona ─── */
.criterio{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(18px,2.2vw,30px);margin-top:clamp(26px,3vw,42px)}
.criterio > div{border:1px solid var(--linha);padding:clamp(22px,2.6vw,32px);background:var(--bg-2)}
.criterio h3{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--linha)}
.criterio div.sim h3{color:var(--amarelo)}
.criterio div.nao h3{color:var(--lilas-tx)}
.criterio ul{list-style:none;display:grid;gap:14px;margin:0}
.criterio li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:.96rem;line-height:1.55}
.criterio .ico.min{width:17px;height:17px;margin-top:3px}
.criterio div.sim .ico{color:var(--amarelo)}
.criterio div.nao .ico{color:var(--lilas-tx)}

/* ─── passos ─── */
.passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px);margin-top:clamp(26px,3vw,42px)}
@media(max-width:1080px){.passos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.passos{grid-template-columns:1fr}}
.passos article{display:grid;gap:11px;align-content:start;padding-top:20px;
  border-top:2px solid color-mix(in oklab,var(--amarelo) 44%,transparent)}
.passos .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--amarelo);line-height:1.5}
.passos .ico{width:28px;height:28px;color:var(--tx-2)}
.passos h3{font-size:1.06rem;font-stretch:104%;margin:0}
.passos p{font-size:.95rem;line-height:1.6;margin:0;color:var(--tx-2)}

/* ─── FAQ ─── */
.bloco.faq{border-top:1px solid var(--linha)}
.bloco.faq .qa{padding-block:clamp(18px,2vw,26px);border-bottom:1px solid var(--linha)}
.bloco.faq .qa:last-of-type{border-bottom:0}
.bloco.faq .qa h3{font-size:clamp(1.04rem,1.4vw,1.22rem);font-stretch:104%;margin:0 0 .45em}
.bloco.faq .qa p{font-size:.98rem;line-height:1.65;color:var(--tx-2);margin:0;max-width:42.87em}
.bloco.faq > h2{margin-bottom:clamp(18px,2vw,28px)}

/* ─── formulário em 3 passos ─── */
.lp-form{background:var(--bg-2);border:1px solid var(--linha);padding:clamp(24px,3.4vw,50px);
  margin-top:clamp(24px,3vw,40px);display:grid;gap:clamp(16px,1.8vw,22px);max-width:720px}
.lp-form h2{font-size:clamp(1.4rem,2.3vw,2rem);margin:0}
.lp-form .sub{margin:0;font-size:.98rem;line-height:1.6;color:var(--tx-2)}
.barra{display:grid;grid-auto-flow:column;gap:6px;margin-top:4px}
.barra span{height:3px;background:var(--linha-2);transition:background .25s}
.barra span.on{background:var(--amarelo)}
.lp-form fieldset{border:0;padding:0;margin:0;display:grid;gap:clamp(15px,1.7vw,20px)}
/* display:grid vence o display:none que o navegador dá a [hidden]: sem esta
   linha os três passos aparecem todos, e o formulário deixa de ser em etapas */
.lp-form fieldset[hidden]{display:none}
.lp-form legend{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amarelo);font-weight:500;padding:0 0 14px;line-height:1.5;float:left;width:100%;
  border-bottom:1px solid var(--linha);margin-bottom:6px}
.lp-form .campo{display:grid;gap:8px}
.lp-form label{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);font-weight:500}
.lp-form input,.lp-form select{width:100%;background:var(--bg);border:1px solid var(--linha);
  color:var(--tx);font-family:var(--body);font-size:1rem;padding:14px 15px;border-radius:0}
.lp-form input::placeholder{color:var(--tx-3)}
.lp-form input:focus-visible,.lp-form select:focus-visible{outline:2px solid var(--amarelo);outline-offset:1px}
.lp-form [aria-invalid=true]{border-color:var(--lilas-tx)}
.lp-form .consent{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:.9rem;line-height:1.55;color:var(--tx-2)}
.lp-form .consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--amarelo)}
.lp-form .consent a{color:var(--amarelo)}
.lp-form .nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.lp-form .zap{font-size:.88rem;color:var(--tx-3);margin:0}
.lp-form .zap a{color:var(--amarelo)}

/* ─── rodapé mínimo ─── */
.lp-pe{border-top:1px solid var(--linha);padding-block:26px;margin-top:clamp(40px,5vw,72px)}
.lp-pe .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:var(--tx-3)}
.lp-pe .mono,.lp-pe a{font-size:.56rem}
.lp-pe a{text-decoration:none;transition:color .16s}
.lp-pe a:hover{color:var(--amarelo)}

/* aviso de saída: aparece quando o popup do WhatsApp é bloqueado, para o
   visitante não ficar com a impressão de que o envio não funcionou */
.lp-form .aviso{margin:0;padding:14px 16px;font-size:.94rem;line-height:1.55;
  border:1px solid color-mix(in oklab,var(--amarelo) 46%,transparent);
  background:color-mix(in oklab,var(--amarelo) 9%,var(--bg));color:var(--tx)}
.lp-form .aviso a{color:var(--amarelo)}

/* ═══════ alternância de superfície ═══════
   Página inteira no mesmo preto cansa e achata a hierarquia. Três níveis:
   fundo padrão, superfície alternada e a faixa lilás, que marca a virada. */
.bloco.alt{position:relative}
.bloco.alt::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;width:100vw;margin-left:-50vw;top:0;bottom:0;background:var(--bg-2);
  border-block:1px solid var(--linha)}

/* a seção da virada é a única em lilás: é onde a promessa acontece.
   A marca entra em marca d'água, grande e discreta, no canto direito. */
.faixa-lilas{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(168deg,
    color-mix(in oklab,var(--lilas) 26%,var(--bg)) 0%,
    color-mix(in oklab,var(--lilas) 13%,var(--bg)) 58%,
    color-mix(in oklab,var(--lilas) 20%,var(--bg)) 100%);
  border-block:1px solid color-mix(in oklab,var(--amarelo) 40%,transparent)}
.faixa-lilas::after{content:'';position:absolute;z-index:-1;pointer-events:none;
  right:clamp(-90px,-6vw,-30px);top:50%;transform:translateY(-50%);
  width:clamp(280px,34vw,520px);aspect-ratio:1/1;opacity:.07;
  background:url(/img/logo-marca.svg) no-repeat center/contain}
.faixa-lilas .virada{border-color:color-mix(in oklab,var(--tx) 22%,transparent)}
.faixa-lilas .virada > div{border-color:color-mix(in oklab,var(--tx) 22%,transparent)}
/* fundo opaco, não translúcido: sobre gradiente, o medidor de cadeia de estilo
   não consegue resolver a cor de trás e acusa 1,07 num texto que passa de fato.
   Opaco faz os dois medidores concordarem e tira o alarme falso permanente. */
.faixa-lilas .virada .cab{background:color-mix(in oklab,var(--bg) 74%,var(--lilas))}
.faixa-lilas .virada .antes{color:color-mix(in oklab,var(--tx) 72%,transparent)}
.faixa-lilas .virada .antes .ico{color:color-mix(in oklab,var(--tx) 62%,transparent)}
@media(max-width:820px){.faixa-lilas::after{right:-30%;opacity:.05}}

/* ═══════ FAQ em sanfona, centralizada ═══════
   O conteúdo continua no HTML dentro de <details>: indexa igual e o FAQPage
   não muda. Centralizar em vez de deixar meia página vazia à direita. */
.bloco.centro{max-width:860px;margin-inline:auto}
.bloco.centro > h2,.bloco.centro > .sub{text-align:center;max-width:none;margin-inline:auto}
.bloco.centro > .sub{max-width:none}
.bloco.faq details.qa{padding:0;border-bottom:1px solid var(--linha)}
.bloco.faq details.qa summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding-block:clamp(16px,1.9vw,22px)}
.bloco.faq details.qa summary::-webkit-details-marker{display:none}
.bloco.faq details.qa summary::after{content:'';width:13px;height:13px;flex:none;
  border-right:1.6px solid var(--amarelo);border-bottom:1.6px solid var(--amarelo);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .22s}
.bloco.faq details.qa[open] summary::after{transform:rotate(-135deg) translate(-4px,-4px)}
.bloco.faq details.qa summary h3{margin:0;font-size:clamp(1.02rem,1.35vw,1.18rem);
  font-stretch:104%;line-height:1.3}
.bloco.faq details.qa summary:hover h3{color:var(--amarelo)}
.bloco.faq details.qa > p{margin:0;padding-bottom:clamp(18px,2vw,24px);
  font-size:.98rem;line-height:1.7;color:var(--tx-2)}
.bloco.faq details.qa:last-of-type{border-bottom:0}

/* ═══════ formulário no amarelo ═══════
   Sair do preto no ponto de conversão: o bloco do formulário é a única
   superfície clara da página, e é para onde o olho vai. */
.bloco.centro .lp-form{max-width:none;background:var(--amarelo);border-color:var(--amarelo);
  color:var(--grafite)}
.lp-form.claro h2,.bloco.centro .lp-form h2{color:var(--grafite);text-align:center}
.bloco.centro .lp-form .sub{color:oklch(0.34 0.055 70);text-align:center}
.bloco.centro .lp-form legend{color:oklch(0.32 0.06 70);
  border-bottom-color:color-mix(in oklab,var(--grafite) 26%,transparent)}
.bloco.centro .lp-form label{color:oklch(0.36 0.055 70)}
.bloco.centro .lp-form .barra span{background:color-mix(in oklab,var(--grafite) 26%,transparent)}
.bloco.centro .lp-form .barra span.on{background:var(--grafite)}
.bloco.centro .lp-form input,.bloco.centro .lp-form select{
  background:oklch(0.99 0.012 90);border-color:color-mix(in oklab,var(--grafite) 30%,transparent);
  color:var(--grafite)}
.bloco.centro .lp-form input::placeholder{color:oklch(0.48 0.03 70)}
.bloco.centro .lp-form input:focus-visible,.bloco.centro .lp-form select:focus-visible{
  outline:2px solid var(--grafite);outline-offset:1px}
.bloco.centro .lp-form .consent{color:oklch(0.32 0.06 70)}
.bloco.centro .lp-form .consent input{accent-color:var(--grafite)}
.bloco.centro .lp-form .consent a{color:var(--grafite);text-decoration:underline}
.bloco.centro .lp-form .btn{background:var(--grafite);color:var(--amarelo);border-color:var(--grafite)}
.bloco.centro .lp-form .btn:hover{background:oklch(0.24 0 0)}
.bloco.centro .lp-form .btn.linha{background:transparent;color:var(--grafite)}
.bloco.centro .lp-form .zap{color:oklch(0.34 0.055 70);text-align:center}
.bloco.centro .lp-form .zap strong{color:var(--grafite)}
/* no amarelo o link fica da mesma cor do texto: o sublinhado é o que separa */
.bloco.centro .lp-form .zap a{color:var(--grafite);text-decoration:underline;text-underline-offset:3px}
.bloco.centro .lp-form .aviso{background:oklch(0.99 0.012 90);color:var(--grafite);
  border-color:color-mix(in oklab,var(--grafite) 34%,transparent)}
.bloco.centro .lp-form .aviso a{color:var(--grafite);text-decoration:underline}
.bloco.centro .lp-form [aria-invalid=true]{border-color:oklch(0.42 0.19 26);border-width:2px}