/* ═══════════════════════════════════════════════════════════
   CALIBRE — os padrões medidos na Hyros /info-education.

   Medição lado a lado (viewport 1391px):
     container    Hyros 820px   ·  nosso era 1000px
     headline     74px peso 800 ·  nosso 66px peso 400
     h2 de seção  34-42px p.800 ·  nosso 42-44px peso 400
     corpo        16-17px ~56ch ·  nosso 15-17px ~62-64ch
     cards        199-406px larg·  nossos .md tinham 1000px
     altura total 27.185px      ·  nosso 7.596px

   O que faz a página deles funcionar não é densidade visual (a deles é
   10.8 por 1.000 caracteres, a nossa já era 22.9). É PESO tipográfico,
   MEDIDA curta e CARDS pequenos em ritmo rápido.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. peso: o ajuste de maior efeito ── */
.hero-c h1,.seg-hero h1,.seg-h2,.pb-h,.pnl h2{font-weight:600}
.md h3{font-weight:650}

/* ── 2. medida: 56ch como a Hyros, não 64 ── */
.pb-txt,.seg-sub,.pq-fecho{max-width:56ch}

/* ── 3. container mais estreito ── */
/* 940px: entre os 820 da Hyros e os 1000 de antes. Abaixo disso os
   mockups de 340px não cabem lado a lado no passo. */
.pnl .pnl-in,.seg-in{max-width:940px}

/* ── 4. cards menores e em ritmo: os passos viram 2 colunas ── */
.md-lista{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.md{flex-direction:column;align-items:flex-start;gap:14px;padding:22px}
/* o mockup não estica: com align-self:stretch e o fecho em margin-top:auto,
   o card mais curto abria um buraco DENTRO do mockup. Agora a sobra fica
   embaixo do card, onde não se lê como falha. */
.md-mk{flex:0 0 auto;align-self:stretch;width:100%}
.md-mk .md-mk-fecho{margin-top:0}
.md-n{align-self:flex-start}
.md h3{font-size:1.0625rem;line-height:1.3}
.md p{font-size:.875rem;line-height:1.55;max-width:none}

/* ── 5. mascote: 260×312px dominava a dobra ── */
.pb-fig .msc,.msc--gg{--px:7px}

@media (max-width:900px){ .md-lista{grid-template-columns:1fr} }

/* a dobra do Claude veio da home, onde o container é 1160px. Nos segmentos ele
   é 940 — sem isto o box fica 220px mais largo que todas as outras seções. */
.bon-box{max-width:940px}

/* ══ mini-visual dentro do card de motor ══
   Da dobra do processo para baixo a página virava lista de texto: "Cinco
   motores" tinha 597 caracteres e ZERO elementos visuais. A Hyros põe um
   visual em cada key feature; estes mini-mockups fazem o mesmo em escala de
   card, sem custo de imagem. */
.mot-grade article{display:flex;flex-direction:column}
.mot-v{margin-top:12px;display:flex;gap:4px;flex-wrap:wrap;align-items:flex-end;
  padding-top:11px;border-top:1px solid var(--s-borda)}
.mot-v i{font-style:normal;font-family:var(--font-mono);font-size:.5625rem;
  letter-spacing:.02em;color:var(--s-tinta-3);background:var(--s-superf-3);
  border-radius:5px;padding:4px 6px;white-space:nowrap}
.mot-v i.on{background:rgba(255,107,53,.14);color:#B8420F}

/* 02 — bolhas de conversa */
.mot-v--ate{flex-direction:column;align-items:flex-start;gap:5px}
.mot-v--ate .bal{border-radius:9px 9px 9px 3px}
.mot-v--ate .bal--r{align-self:flex-end;border-radius:9px 9px 3px 9px;
  background:rgba(16,163,74,.13);color:#0F7A38}

/* 03 — colunas do pipeline, altura crescente */
.mot-v--fun{align-items:flex-end;gap:6px}
.mot-v--fun i{display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;padding:0;font-size:.5rem}
.mot-v--fun u{display:block;width:18px;height:calc(var(--h) * .34);min-height:6px;
  border-radius:3px;text-decoration:none;
  background:linear-gradient(180deg,var(--nucleo-amarelo),var(--nucleo-laranja))}

/* 04 e 05 — valor por linha */
.mot-v--ltv,.mot-v--int{flex-direction:column;align-items:stretch;gap:4px}
.mot-v--ltv i,.mot-v--int i{display:flex;justify-content:space-between;gap:10px}
.mot-v--ltv b,.mot-v--int b{font-weight:600;color:var(--s-tinta)}

/* ══ HERO ENXUTA ══
   Medido: hero de 589px, h1 de 66px, selo de garantia com 312×57px e 19px de
   fonte. O King Kong resolve a hero em headline + uma linha + CTA e desce
   direto para a carta; a Hyros também não gasta altura ali. O peso da página
   está na história logo abaixo, não no topo. */
.seg-hero .hero-c{padding-top:96px;padding-bottom:36px}
.seg-hero h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem);line-height:1.05}
.hero-gar{font-size:.9375rem;padding:9px 18px}
.hero-prova{font-size:.875rem}

/* ══ CARTA · o movimento do Sabri Suby ══
   Frase curta, uma por parágrafo. O ritmo é o argumento: cada quebra é uma
   batida. Parágrafo longo aqui mata o efeito. */
.carta{background:var(--s-superf);border-top:1px solid var(--s-borda)}
.carta-in{max-width:620px;margin:0 auto;padding:var(--sp-16) var(--sp-6)}
.carta-data{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--s-tinta-3);margin-bottom:22px;display:block}
.carta p{font-size:1.0625rem;line-height:1.62;color:var(--s-tinta-2);margin:0 0 18px}
.carta p.q{font-size:1.1875rem;line-height:1.5;color:var(--s-tinta);font-weight:500}
.carta b{color:var(--s-tinta);font-weight:600}
/* a escada: frases soltas que aceleram o ritmo */
.carta-esc{margin:0 0 18px;padding:0;list-style:none}
.carta-esc li{font-size:1.0625rem;line-height:1.5;color:var(--s-tinta-2);
  padding:3px 0 3px 18px;position:relative}
.carta-esc li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:2px;
  border-radius:2px;background:var(--nucleo-laranja)}
.carta-fecho{margin-top:26px;padding:20px 22px;border-radius:14px;
  background:var(--s-superf-3);border:1px solid var(--s-borda)}
.carta-fecho p{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--s-tinta)}
@media (max-width:700px){ .carta-in{padding:var(--sp-12) var(--sp-5)} }

/* ══ BÔNUS DO CLAUDE: respiro ══
   O CSS veio da home, que usa --sp-9 no padding do box. Essa variável não existe
   na escala dos segmentos (vai de --sp-8 para --sp-10), então a declaração de
   padding caía INTEIRA e o conteúdo encostava na borda: 2px à esquerda, 2px
   embaixo, 7px no topo. Mesmo buraco de escala que já tinha derrubado o padding
   do .sb-palco na home. */
:root{--sp-9:36px}

/* a coluna de texto ficou estreita nos 940px e os chips quebravam em 4 linhas */
.bon-box{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--sp-6)}
.bon-acoes{gap:7px}
.bon-a{font-size:.75rem;padding:6px 12px}

/* ══ "POR QUE" E "COMO SEI": minimalismo da Hyros ══
   Medido lá: os três itens são texto puro em coluna de 207px — sem card, sem
   fundo, sem borda. O título carrega a seção (40px/800) e os itens ficam em
   18px/500. Nosso tratamento em card competia com as dobras que importam. */
.pq-tres article,.sei-tres article{background:none;border:none;box-shadow:none;padding:0}
.pq-tres,.sei-tres{gap:var(--sp-8)}
.pq-tres b,.sei-tres b{font-size:1.0625rem;font-weight:600}
.pq-i{width:34px;height:34px;margin-bottom:12px}
.pq-d{font-size:.9375rem;line-height:1.6}

/* ══ GARANTIA: a seção mais discreta da página ══
   Na Hyros o título da garantia é 30px — MENOR que "Why HYROS" (40) e que
   "Power Features" (46). Ela não grita; a promessa já está no hero e no CTA. */
.pnl--fogo .seg-h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,1.875rem)}

/* ══ KEY FEATURES: bento assimétrico ══
   O padrão da Hyros: card largo (940px) + dois médios (458px) + card largo.
   radius 24px, padding 36-40px, fundo branco, SEM borda. É a seção de maior
   destaque tipográfico da página deles (título 46px). */
.kf-grade{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.kf{grid-column:span 2;background:#FFF;border-radius:24px;padding:34px;
  box-shadow:0 12px 34px rgba(10,10,11,.06);display:flex;flex-direction:column;gap:16px}
.kf--meia{grid-column:span 1;padding:28px}
.kf-t{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);font-weight:600;
  font-size:1.375rem;line-height:1.2;letter-spacing:-.02em;color:var(--s-tinta);margin:0}
.kf--meia .kf-t{font-size:1.125rem}
.kf-d{font-size:.9375rem;line-height:1.6;color:var(--s-tinta-3);margin:0;max-width:62ch}
.kf-vis{margin-top:auto}
@media (max-width:820px){ .kf-grade{grid-template-columns:1fr} .kf,.kf--meia{grid-column:span 1} }

/* ══ 1 · o topo rola junto com a página ══
   A barra flutuante do canto inferior esquerdo já assume a navegação quando o
   header sai de vista — dois elementos fixos disputando a mesma função é ruído. */
.header{position:absolute}

/* ══ 3 · passos um por vez, como na Hyros ══
   O grid 2×2 comprimia o mockup em 462px. Full width dá 340px só para o
   mockup e ainda sobra medida de leitura confortável no texto. */
.md-lista{display:flex;flex-direction:column;gap:18px}
.md{flex-direction:row;align-items:center;gap:30px;padding:28px 30px}
.md > div{flex:1;min-width:0}
.md-mk{flex:0 0 348px;align-self:center;width:auto}
.md h3{font-size:1.25rem}
.md p{font-size:.9375rem;max-width:52ch}
@media (max-width:860px){ .md{flex-direction:column;align-items:flex-start} .md-mk{flex:1 1 auto;width:100%} }

/* ══ 6 · headline fora do box ══
   Na Hyros o "Why HYROS?" fica solto sobre o fundo da seção; o conteúdo é que
   ganha superfície. Aqui o painel colorido continua, mas o título sai dele. */
.pnl--areia .seg-h2--centro,.pnl--branco .seg-h2--centro{margin-bottom:30px}

/* ══ 7 · garantia no formato Q&A da Hyros ══
   Lá é pergunta em 30px + resposta curta, sem card e sem ícone — a seção mais
   discreta da página. A classe certa aqui é .gar-grade, não .pq-tres. */
.pnl--fogo .gar-grade{gap:var(--sp-8);margin-top:26px}
.pnl--fogo .gar-grade article{background:none;border:none;box-shadow:none;padding:0}
.pnl--fogo .gar-grade b{font-size:1rem;font-weight:600}
.pnl--fogo .gar-grade span{font-size:.9375rem;line-height:1.6}
/* o mascote de bengala ocupava 30px de margem + a figura inteira acima do
   título; na Hyros a garantia não tem ilustração nenhuma */
.pnl--fogo .msc-fig{margin-bottom:18px}
.pnl--fogo .msc{--px:5px}

/* ══ 4 · CTA no formato Hyros ══
   Medido no print deles: fundo claro de marca, headline em DUAS linhas com a
   segunda em cor, botão sólido destacado e três links discretos embaixo.
   Centralizado, não em linha — a versão anterior espalhava na horizontal. */
.ctb{background:var(--s-superf-3);border-top:1px solid var(--s-borda);
  border-bottom:1px solid var(--s-borda)}
.ctb-in{max-width:720px;margin:0 auto;padding:var(--sp-16) var(--sp-6);text-align:center}
.ctb-t{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);font-weight:600;
  font-size:clamp(1.75rem,1.2rem + 2vw,2.625rem);line-height:1.1;letter-spacing:-.03em;
  color:var(--s-tinta);margin:0}
.ctb-t em{font-style:normal;display:block;color:var(--nucleo-laranja)}
.ctb-btn{display:inline-flex;align-items:center;justify-content:center;
  margin-top:28px;padding:15px 38px;border-radius:999px;
  background:var(--nucleo-rosa,#FF3D7F);color:#FFF;font-weight:600;font-size:1rem;
  text-decoration:none;box-shadow:0 10px 30px rgba(255,61,127,.28);
  transition:transform var(--d-base),box-shadow var(--d-base)}
.ctb-btn:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(255,61,127,.34)}
.ctb-links{margin:20px 0 0;font-size:.875rem;color:var(--s-tinta-3)}
.ctb-links a{color:var(--s-tinta-3);text-decoration:underline;text-underline-offset:3px}
.ctb-links a:hover{color:var(--s-tinta)}

/* ══ 8 · MOTORES COM O MOCKUP REAL DA HOME ══
   Os mini-visuais que eu tinha feito eram desenho novo. Estes são as cinco
   cenas de `.mtr-cena` da home, as mesmas que rodam no scroll fixo — só que
   aqui cada uma vive num card full width, no formato Power Features da Hyros.
   O CSS interno das cenas vem do _mockup.css. */
.kfm-lista{display:flex;flex-direction:column;gap:18px;margin-top:34px}
.kfm{background:#FFF;border-radius:24px;padding:32px;
  box-shadow:0 12px 34px rgba(10,10,11,.06);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:32px;align-items:center}
.kfm-n{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
  color:var(--nucleo-laranja);display:block;margin-bottom:10px}
.kfm-t{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);font-weight:600;
  font-size:1.375rem;line-height:1.2;letter-spacing:-.02em;color:var(--s-tinta);margin:0 0 12px}
.kfm-d{font-size:.9375rem;line-height:1.62;color:var(--s-tinta-3);margin:0;max-width:46ch}
/* a janela onde a cena roda: sem o palco escuro do scroll fixo da home */
.kfm-janela{position:relative;border-radius:16px;overflow:hidden;
  background:var(--s-superf-3);border:1px solid var(--s-borda);
  aspect-ratio:16/11}
/* o que veio da home é o .mtr-mock (a extração pegou o conteúdo da cena, não a
   cena). Na home ele é absoluto e sangra para fora do palco com right:-4%;
   aqui precisa ser um bloco normal dentro da janela. */
.kfm-janela .mtr-mock{position:relative;inset:auto;right:auto;left:auto;top:auto;
  bottom:auto;width:100%;height:100%;opacity:1;transform:none;
  border-radius:0;box-shadow:none;display:flex;flex-direction:column}
.kfm-janela .mk-corpo{flex:1;min-height:0;overflow:hidden;padding:14px 16px}
/* os motores alternam o lado do mockup, para a lista não virar padrão morto */
.kfm:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.kfm:nth-child(even) .kfm-txt{order:2}
.kfm:nth-child(even) .kfm-vis{order:1}
@media (max-width:860px){
  .kfm{grid-template-columns:1fr;gap:22px;padding:24px}
  .kfm:nth-child(even) .kfm-txt{order:1} .kfm:nth-child(even) .kfm-vis{order:2}
}

/* ══ 5 · faixa de logos abaixo de "Operações que já rodam" ══
   Na home a faixa é uma <section> com overflow próprio. Aqui ela virou um div
   dentro da seção que já existia — sem o overflow, o marquee de 86 logos
   empurra a página inteira na horizontal. */
.prova--seg{position:relative;overflow:hidden;margin-top:22px;
  width:100vw;left:50%;transform:translateX(-50%)}
.prova--seg .prova-inner{max-width:none;padding:0}
.prova--seg .pv-rate{justify-content:center;margin-bottom:18px}

/* ══ 1 · hero com mais ar ══ */
.seg-hero .hero-c{padding-top:132px;padding-bottom:64px}
.seg-hero h1{margin-bottom:6px}
.hero-gar{margin-top:26px}
.hero-prova{margin-top:22px}
.seg-hero .seg-acoes{margin-top:30px}

/* ══ 3 · a faixa de logos não cabe num box arredondado ══
   A seção é um .pnl com radius 32px e borda; a faixa sangra 100vw para o
   marquee correr de ponta a ponta. As duas coisas juntas desenham uma linha
   cortada atravessando o box. A seção perde o painel e vira faixa limpa,
   como é na home. */
.pnl--branco:has(.prova--seg){background:none;border:none;border-radius:0;
  box-shadow:none;padding-left:0;padding-right:0}
.pnl--branco:has(.prova--seg) .pnl-in{max-width:none;padding-left:0;padding-right:0}

/* ══ 4 · garantia: minimalismo real ══
   529px de altura com mascote grande para três frases. Na Hyros é uma pergunta
   e uma resposta curta, sem ilustração. */
.pnl--fogo .msc-fig{display:none}
.pnl--fogo .pnl-in{padding-top:var(--sp-12);padding-bottom:var(--sp-12)}
.pnl--fogo .seg-sub--centro{max-width:52ch;margin-inline:auto}

/* ══ logo animado na barra flutuante ══
   O mesmo raio→mascote do rodapé, em escala de ícone. A barra tinha um raio
   genérico em SVG que não era o logo da marca. */
.brr-logo{--px:1.4px;margin:0 auto}

/* ══ FAQ no formato Hyros ══
   Medido no print: título centralizado e grande, cards empilhados dentro de UM
   container com borda única, divisória de 1px entre itens, e o ícone +/× num
   quadradinho arredondado à direita. Nosso layout era de duas colunas com o
   título à esquerda — ocupa mais e dispersa a leitura. */
.faq{background:var(--s-superf);padding:var(--sp-16) var(--sp-6)}
.faq-inner{display:block;max-width:820px;margin:0 auto;padding:0}
.faq-lado{position:static;text-align:center;margin-bottom:34px}
.faq-h2{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);font-weight:600;
  font-size:clamp(2rem,1.4rem + 2.2vw,2.75rem);line-height:1.06;letter-spacing:-.03em;
  color:var(--s-tinta);margin:0}
.faq-h2 em{font-style:italic;color:var(--nucleo-laranja)}
.faq-lado-d{font-size:.9375rem;color:var(--s-tinta-3);margin:14px auto 0;max-width:46ch}
/* um container só, com divisória entre os itens */
.faq-lista{border:1px solid var(--s-borda);border-radius:18px;background:#FFF;overflow:hidden}
.faq-i{border-bottom:1px solid var(--s-borda)}
.faq-i:last-child{border-bottom:none}
.faq-b{display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;padding:22px 26px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--font-corpo);font-size:1.0625rem;font-weight:600;line-height:1.32;
  color:var(--s-tinta)}
.faq-b:hover{color:var(--nucleo-laranja)}
/* o ícone vive num quadradinho, como no print */
.faq-ic{width:30px;height:30px;flex-shrink:0;padding:7px;border-radius:9px;
  background:var(--s-superf-3);color:var(--nucleo-laranja);
  transition:transform var(--d-base) var(--ease-out),background var(--d-base)}
.faq-i[data-open="true"] .faq-ic{transform:rotate(45deg);background:rgba(255,107,53,.14)}
.faq-r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-out)}
.faq-i[data-open="true"] .faq-r{grid-template-rows:1fr}
.faq-r > div{overflow:hidden}
.faq-r p{font-size:.9375rem;line-height:1.68;color:var(--s-tinta-3);
  padding:0 26px 22px;margin:0}
.faq-r b{color:var(--s-tinta);font-weight:600}
@media (max-width:700px){ .faq-b{padding:18px 18px;font-size:1rem} .faq-r p{padding:0 18px 18px} }

/* ══ CTA final: headline + botão, nada mais ══
   Os selos de avaliadora saíram: eles já aparecem no rodapé, dois blocos
   abaixo. Repetir aqui divide a atenção da única ação que a dobra pede. */
.pnl--pessego#teste .pnl-in{padding-top:var(--sp-16);padding-bottom:var(--sp-16)}
.pnl--pessego#teste .btn{margin-top:30px}

/* ══ o descendente sumindo no .hero-l2 ══
   NÃO era overflow nem line-height do h1 — duas tentativas erradas antes de
   medir direito. O .hero-l2 pinta o texto com `background-clip:text` sobre um
   degradê, e `color:transparent`. O degradê só cobre a CAIXA do elemento:
   tudo que o glifo desenha fora dela fica sem pintura e some. Com
   line-height:1.02 os descendentes do g, do p e a serifa do f itálico caem
   fora — parecem cortados, mas na verdade não foram pintados.
   A caixa precisa ser maior que a linha: line-height folgado + padding. */
.hero-l2{line-height:1.16;padding-bottom:.14em;padding-inline:.06em}
.seg-hero h1{overflow:visible}
.seg-hero h1 em{padding-bottom:.14em;padding-inline:.06em}

/* ══ GARANTIA: o tratamento do CTA final da home ══
   O degradê estava chapado e o texto herdava cinza/preto do tema claro —
   ilegível sobre laranja. A home resolve com poeira de pixels + bolinhas e
   TODO o texto em branco. Mesma receita aqui. */
.pnl--fogo{position:relative;overflow:hidden}
.pnl--fogo::before,.pnl--fogo::after{content:"";position:absolute;inset:0;
  pointer-events:none;opacity:.5}
/* poeira: mesma linguagem do mascote, não bolinha redonda */
.pnl--fogo::before{
  background-image:radial-gradient(rgba(255,255,255,.85) 1px,transparent 0);
  background-size:7px 7px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 46%,transparent 52%,#000 100%);
  mask-image:radial-gradient(120% 80% at 50% 46%,transparent 52%,#000 100%)}
.pnl--fogo::after{background:
  radial-gradient(circle at 12% 22%,rgba(255,255,255,.55) 0 3px,transparent 3px),
  radial-gradient(circle at 88% 30%,rgba(255,255,255,.45) 0 4px,transparent 4px),
  radial-gradient(circle at 22% 78%,rgba(255,255,255,.40) 0 3px,transparent 3px),
  radial-gradient(circle at 78% 82%,rgba(255,255,255,.50) 0 3px,transparent 3px),
  radial-gradient(circle at 63% 12%,rgba(255,255,255,.40) 0 2px,transparent 2px)}
.pnl--fogo .pnl-in{position:relative;z-index:1}
/* texto todo em branco: cinza sobre laranja não dá leitura e preto fecha demais */
.pnl--fogo .seg-h2{color:#FFF;text-shadow:0 2px 18px rgba(140,40,10,.2)}
.pnl--fogo .seg-h2 em{color:rgba(255,255,255,.92)}
.pnl--fogo .seg-sub{color:rgba(255,255,255,.92)}
.pnl--fogo .seg-sub b{color:#FFF}
.pnl--fogo .gar-grade b{color:#FFF}
.pnl--fogo .gar-grade span{color:rgba(255,255,255,.88)}
/* cada garantia ganha uma superfície translúcida, para o texto não boiar */
.pnl--fogo .gar-grade article{background:rgba(88,18,8,.16);border-radius:14px;
  padding:20px 22px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* ══ MOCKUP DE COMUNIDADE ══
   Padrão de interface de fórum/comunidade — abas no topo, feed de posts com
   avatar, título e contadores. É o formato que a Skool popularizou e que o
   público de infoproduto reconhece de imediato. Nenhuma marca de terceiro
   aparece: é o layout, não o logo. */
.cmn{display:flex;flex-direction:column;height:100%}
.cmn-abas{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--s-borda);
  background:var(--s-superf-3)}
.cmn-aba{font-family:var(--font-corpo);font-size:.5625rem;letter-spacing:.04em;
  padding:9px 9px 8px;color:var(--s-tinta-3);border-bottom:2px solid transparent;
  white-space:nowrap}
.cmn-aba.on{color:var(--nucleo-laranja);border-bottom-color:var(--nucleo-laranja);font-weight:600}
.cmn-feed{flex:1;min-height:0;overflow:hidden;padding:10px;display:flex;
  flex-direction:column;gap:7px;background:#FFF}
.cmn-post{display:flex;gap:8px;padding:9px 10px;border:1px solid var(--s-borda);
  border-radius:10px;background:#FFF}
.cmn-av{width:22px;height:22px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:.5rem;font-weight:600;color:#FFF}
.cmn-corpo{flex:1;min-width:0}
.cmn-top{display:flex;align-items:baseline;gap:5px;margin-bottom:2px}
.cmn-nome{font-size:.625rem;font-weight:600;color:var(--s-tinta)}
.cmn-quando{font-family:var(--font-mono);font-size:.5rem;color:var(--s-tinta-3)}
.cmn-tag{margin-left:auto;font-family:var(--font-mono);font-size:.4375rem;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 5px;border-radius:4px;
  background:rgba(255,107,53,.12);color:#B8420F}
.cmn-txt{font-size:.625rem;line-height:1.35;color:var(--s-tinta-2)}
.cmn-rod{display:flex;gap:12px;margin-top:5px;font-family:var(--font-mono);
  font-size:.5rem;color:var(--s-tinta-3)}
/* a barra de baixo: o que a comunidade devolve para o CRM */
.cmn-crm{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;border-top:1px solid var(--s-borda);background:var(--s-superf-3);
  font-family:var(--font-mono);font-size:.5rem;letter-spacing:.04em;color:var(--s-tinta-3)}
.cmn-crm b{color:var(--nucleo-laranja);font-weight:600}

/* ══ barra flutuante menor ══
   Medido: 63px de altura, e o logo ocupava 34px numa caixa de 34px — zero de
   folga, daí a sensação de apertado. A da Hyros é bem mais discreta. */
.brr{padding:7px 10px 7px 8px;gap:10px;border-radius:14px}
.brr-mrc{width:26px;height:26px;border-radius:7px}
.brr-logo{--px:.95px}
.brr-txt{font-size:.8125rem}
.brr-cta{padding:8px 16px;font-size:.8125rem}

/* ══ CTA final mais contido ══
   434px de altura para uma headline e um botão. */
.pnl--pessego#teste .pnl-in{padding-top:var(--sp-12);padding-bottom:var(--sp-12)}
.pnl--pessego#teste .seg-h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem)}
.pnl--pessego#teste .btn{margin-top:24px}

/* ══ NÚCLEO — a peça que explica o sistema de uma vez ══
   Equivalente ao "Swarm Tracking" da Hyros: um box de marca com definição à
   esquerda e diagrama à direita. Lá o desenho é um enxame de pontos soltos
   (a metáfora deles é captura dispersa); aqui é o oposto — cinco motores
   ligados a UM núcleo, porque a nossa promessa é convergência, não coleta. */
.nuc{position:relative;overflow:hidden;border-radius:26px;margin-top:34px;
  background:linear-gradient(135deg,#14120F 0%,#231C16 55%,#2B1D14 100%);
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:30px;align-items:center;padding:38px 40px}
.nuc-t{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);font-weight:600;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2rem);line-height:1.1;letter-spacing:-.03em;
  color:#FFF;margin:0}
.nuc-t i{font-style:italic;font-weight:400;font-size:.55em;color:var(--nucleo-amarelo);
  margin-left:8px;letter-spacing:0}
.nuc-d{font-size:.9375rem;line-height:1.62;color:rgba(255,255,255,.74);margin:12px 0 0;max-width:44ch}
.nuc-d b{color:#FFF;font-weight:600}
.nuc-lista{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.nuc-rot{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.45);display:block;margin-bottom:10px}
.nuc-l{display:flex;align-items:baseline;gap:10px;padding:3px 0;font-size:.875rem;
  color:rgba(255,255,255,.8)}
.nuc-l b{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);
  font-weight:600;color:var(--nucleo-amarelo);white-space:nowrap;min-width:92px}

/* ── o diagrama ── */
.nuc-map{position:relative;aspect-ratio:1/.72;min-height:250px}
.nuc-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nuc-no{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:5px}
.nuc-no .msc{--px:1.7px}
.nuc-no span{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.04em;
  color:rgba(255,255,255,.62);white-space:nowrap}
/* o centro: onde tudo converge */
.nuc-centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2}
.nuc-centro .msc{--px:2.6px}
.nuc-centro b{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--nucleo-amarelo)}
.nuc-halo{position:absolute;left:50%;top:50%;width:150px;height:150px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,184,0,.20),transparent 68%);
  pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .nuc-fio{stroke-dasharray:4 6;animation:nuc-corre 3.2s linear infinite}
}
@keyframes nuc-corre{ to{stroke-dashoffset:-20} }
@media (max-width:860px){
  .nuc{grid-template-columns:1fr;padding:28px 24px}
  .nuc-map{min-height:230px}
}

/* ══ CTA final: caixa estreita ══
   O painel ocupava 1.180px enquanto todas as outras seções param em 940 — ele
   lia como largo demais porque era mesmo o bloco mais largo da página. Uma
   headline curta e um botão pedem medida curta, não a largura toda. */
.pnl--pessego#teste{max-width:760px;margin-left:auto;margin-right:auto}
.pnl--pessego#teste .pnl-in{max-width:560px}
.pnl--pessego#teste .seg-h2{max-width:18ch;margin-inline:auto}

/* ══ a frase do bônus não é legenda manuscrita ══
   O Caveat funciona quando o texto é um comentário lateral em voz baixa
   ("aqui não tem passo. roda sozinho."). Esta é uma afirmação de valor, e
   manuscrita ela perde peso e legibilidade. As outras duas legendas da página
   continuam no Caveat de propósito. */
/* mesma pauta do .bon-d, que é o parágrafo ao lado: 1rem / 400 / --s-tinta-2 */
.msc-leg--frase{font-family:var(--font-corpo);font-size:1rem;font-weight:400;
  line-height:1.62;color:var(--gray-body);max-width:28ch;letter-spacing:0}

/* ══ cabeçalho e fecho do mockup dos passos ══
   .md-mk-cab, .md-mk-t, .md-mk-selo e .md-mk-fecho existem no HTML de TODAS as
   páginas de nicho desde o começo e nunca tiveram regra nenhuma. Sem display de
   caixa os spans ficam inline e colam: lia-se "Domingo · pico do post24h" e
   "58atendidos no minuto". Aqui eles ganham a mesma pauta do resto do mockup. */
.md-mk-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--border);background:#FFF}
.md-mk-t{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;
  color:var(--gray-body);text-transform:uppercase;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-mk-selo{flex:0 0 auto;font-family:var(--font-mono);font-size:.625rem;font-weight:500;
  letter-spacing:.04em;color:#B4471F;background:rgba(255,107,53,.1);
  border:1px solid rgba(255,107,53,.22);border-radius:999px;padding:3px 9px}

/* o fecho é o número que fecha a leitura: grande à esquerda, legenda ao lado */
.md-mk-fecho{display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-top:1px solid var(--border);background:#FFF}
.md-mk-fecho b{font-family:var(--font-titulo,var(--font-display));font-size:1.75rem;
  font-weight:600;line-height:1;color:var(--preto);letter-spacing:-.01em}
.md-mk-fecho span{font-size:.75rem;line-height:1.35;color:var(--gray-body)}

/* ══ o topo das páginas de nicho não contrai ══
   O header da home encolhe numa pílula ao rolar, porque lá ele acompanha a
   página inteira. Aqui ele é fixo e não se move, então a contração vira
   movimento sem causa: o menu muda de tamanho sozinho enquanto o leitor está
   lendo outra coisa.

   As sete regras de `[data-scrolled]` do _topo.css são desligadas de uma vez
   pela raiz do seletor, em vez de apagadas: o atributo continua sendo escrito
   pelo script (a home compartilha esse arquivo), só deixa de ter efeito. */
body:not(.home) .header[data-scrolled="true"] .header-inner{
  max-width:1300px;margin-top:0;padding:var(--sp-4) var(--sp-6);gap:var(--sp-8);
  background:transparent;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
body:not(.home) .header[data-scrolled="true"] .btn-vidro{
  background:color-mix(in srgb,#fff 52%,transparent);
  border-color:color-mix(in srgb,var(--preto) 15%,transparent);
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(10,10,11,.04)}

/* ══ o nome do segmento no eyebrow ══
   O mesmo gradiente que o menu usa no hover de "Preços" e "Parceiros" (.rot
   do _topo.css): quatro paradas, do amarelo ao rosa passando pelo laranja.
   Um gradiente só para as cinco páginas, não a cor individual de cada
   segmento — cor por página fragmenta a identidade e faz cada segmento
   parecer um produto diferente.

   `padding-bottom` porque background-clip:text só pinta dentro da caixa do
   elemento, e os descendentes (o ç de "negócios", o p de "e-commerce") saem
   dela — mesma armadilha do .hero-l2. */
.eyebrow b{font-weight:600;
  background:linear-gradient(115deg,#FFB800 0%,#FF6B35 34%,#E63946 66%,#FF3D7F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.14em;padding-inline:.02em}

/* linha de mecanismo no hero, abaixo da garantia.
   Só a página de empresas tem: o ICP dela decide com a cabeça, e 21 palavras
   de hero não davam razão nenhuma para rolar. */
.hero-sub{max-width:46ch;margin:14px auto 0;font-size:1.0625rem;line-height:1.55;
  color:var(--gray-body);text-align:center}