/* latin-ext */
@font-face {font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 87% 112%;
  font-display: swap;
  src: url(fontes/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 87% 112%;
  font-display: swap;
  src: url(fontes/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* latin-ext */
@font-face {font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* latin-ext */
@font-face {font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fontes/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fontes/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* latin-ext */
@font-face {font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ══════════════════════════════════════════════════════════════════════════
   Ricardo Werlang · site
   Marca W, superfície clara como base, Ink Navy como palco de ato.

   FONTE DOS TOKENS: ../ricardo-werlang-marca/03-ricardo-werlang/tokens/ —
   somente leitura.

   ⚠ O ACENTO NÃO ATRAVESSA SUPERFÍCIE. #E8552C sobre Papel = 3,31:1 e #B03A18
   sobre Ink Navy = 2,98:1 — os dois reprovam AA. Nunca escreva o hex no
   componente; use var(--accent), que .inv troca sozinho.

   O QUE MUDOU NESTA REVISÃO (e por quê):
   · A profundidade deixou de ser só fio + troca de superfície. Entraram três
     materiais novos, todos derivados da paleta e todos com teto: superfície
     elevada (--superf), sombra suave (--sombra-1/2) e véu tonal. Nenhum
     inventa cor: são o navy e o papel em outra altura.
   · Raio deixou de ser zero absoluto e virou uma REGRA DE CLASSE: 8–10px em
     objeto (controle, painel, superfície elevada, contêiner de ícone), zero em
     estrutura (seção, imagem, fio, retrato, tipografia). O objeto arredonda; a
     página não.
   · O movimento deixou de ser um só. Virou um sistema com cinco gestos
     nomeados — sobe, linhas, barra, sep, cadeia — e nenhum deles é fade puro.
     Tudo mora em máscara ou em transform: o texto nunca depende de script.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── primitivas ─────────────────────────────────────────────────────── */
  --papel:#F4F4F2; --branco:#FFFFFF; --papel-quente:#FAF9F6; --papel-fundo:#EAEAE6;
  --papel-frio:#E7E9EC;
  --tinta:#333A4C; --slate:#5A6172;
  --g200:#D6DAE4;   /* corpo claro sobre navy, um degrau acima do g300 */
  --regua:#DCDCD6; --g300:#C3C8D4; --gmut:#8D9098;
  --rw-ink:#0E152B; --rw-elev:#141D33; --rw-alto:#1B2540; --rw-fundo:#0A0F20;
  --rw-rule:#232C43;
  --rw-signal:#E8552C; --rw-signal-d:#B03A18;

  /* ── papéis · a superfície clara é a base da página ─────────────────── */
  --bg:var(--papel); --bg-elev:var(--branco); --bg-fundo:var(--papel-fundo);
  --fg:var(--rw-ink); --fg-body:var(--tinta); --fg-muted:var(--slate);
  --accent:var(--rw-signal-d); --on-accent:var(--papel);
  --rule:var(--regua); --rule-strong:var(--rw-ink);

  /* profundidade · derivada da paleta, nunca uma cor nova.
     --superf é a superfície que AVANÇA em relação a --bg.
     --borda é o contorno de objeto: o fio de 1px, com alfa. */
  --superf:var(--papel-quente);
  --borda:rgba(14,21,43,.10);
  --borda-forte:rgba(14,21,43,.18);
  --tint:rgba(176,58,24,.06);
  --sombra-1:0 1px 2px rgba(14,21,43,.04), 0 4px 14px -4px rgba(14,21,43,.08);
  --sombra-2:0 2px 4px rgba(14,21,43,.04), 0 18px 40px -14px rgba(14,21,43,.16);
  --malha:rgba(14,21,43,.055);
  --brilho:transparent;

  /* ── forma ──────────────────────────────────────────────────────────── */
  /* Raio de OBJETO. Estrutura continua em zero — ver o cabeçalho do arquivo. */
  /* três degraus, e não mais: superfície (10), controle (8), fio (3). O que
     não é objeto continua reto. */
  --r:10px; --r-s:8px; --r-fio:3px;

  /* ── tipo ───────────────────────────────────────────────────────────── */
  --display:"Archivo","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --corpo:"Archivo","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --serifa:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  /* ── medida ─────────────────────────────────────────────────────────── */
  --max:1240px;
  --estreito:720px;
  --gut:clamp(20px,4.4vw,44px);
  /* a borda esquerda do conteúdo, em qualquer largura. É a espinha: todo
     elemento que precisa alinhar com o texto — inclusive os que moram fora do
     .miolo, como as emendas entre atos — mede por aqui. */
  --borda-esq:max(var(--gut), calc((100% - var(--max)) / 2));

  /* ── ritmo vertical ─────────────────────────────────────────────────── */
  /* três degraus de faixa, não um. A página alterna grande → médio →
     compacto → grande, e é isso que faz o scroll ter batida em vez de
     cadência. */
  --sp:clamp(64px,7.8vw,120px);
  --sp-med:clamp(52px,6.2vw,96px);
  --sp-min:clamp(40px,4.6vw,68px);
  --bloco-1:clamp(12px,1.6vw,16px);
  --bloco-2:clamp(28px,3.6vw,44px);
  --bloco-3:clamp(36px,4.6vw,56px);
  --toque:44px;

  --barra-h:64px;
  --parada:calc(var(--barra-h) + 24px);

  /* ── escala tipográfica ─────────────────────────────────────────────── */
  /* H1 chega a 76px, H2 a 52px, H3 a 32px, corpo 17, nota 14. Os degraus
     estão separados o bastante para que o olho leia hierarquia sem medir. */
  --d1:clamp(2.60rem,1.42rem + 4.90vw,4.75rem);
  --d2:clamp(1.95rem,1.28rem + 2.90vw,3.25rem);
  --d3:clamp(1.42rem,1.16rem + 1.15vw,2.00rem);
  --d-mid:clamp(1.30rem,1.08rem + 0.95vw,1.75rem);
  --lead:clamp(1.15rem,1.05rem + 0.46vw,1.375rem);
  --nota:0.875rem;
  --rot:0.75rem;

  /* ── movimento ──────────────────────────────────────────────────────── */
  /* uma curva de chegada (desaceleração longa, sem elástico) e uma de estado.
     Duração curta em feedback, longa só na entrada autoral. */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --t-1:150ms; --t-2:280ms; --t-3:620ms;
}

/* a superfície OPOSTA da mesma marca — o acento troca junto, sozinho */
.inv{
  --bg:var(--rw-ink); --bg-elev:var(--rw-elev); --bg-fundo:var(--rw-fundo);
  --fg:var(--papel); --fg-body:var(--g300); --fg-muted:var(--gmut);
  --accent:var(--rw-signal); --on-accent:var(--rw-ink);
  --rule:var(--rw-rule); --rule-strong:var(--papel);
  --superf:var(--rw-alto);
  --borda:rgba(255,255,255,.09);
  --borda-forte:rgba(255,255,255,.16);
  --tint:rgba(232,85,44,.09);
  --sombra-1:0 1px 2px rgba(0,0,0,.20), 0 6px 18px -6px rgba(0,0,0,.40);
  --sombra-2:0 2px 6px rgba(0,0,0,.24), 0 24px 56px -18px rgba(0,0,0,.60);
  --malha:rgba(255,255,255,.045);
  --brilho:rgba(232,85,44,.16);
  background:var(--bg); color:var(--fg-body); color-scheme:dark;
}

/* ── BASE ────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
/* scroll-behavior:smooth NÃO entra aqui, e o motivo é medido: com ele, o pulo de
   âncora na CARGA da página é engolido — o navegador tenta rolar antes de as
   fontes carregarem, a animação atropela o reflow, e quem abre /#frentes cai no
   topo. */
html{scroll-behavior:auto}
[id]{scroll-margin-top:var(--parada)}
body{
  margin:0;background:var(--bg);color:var(--fg-body);
  font-family:var(--corpo);font-size:17px;line-height:1.62;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--on-accent)}

/* as superfícies que eu não desenhei ainda são a página: cursor, barra de
   rolagem e numeral tabular saem do padrão do navegador se ninguém pintar */
/* a página abre em navy e fecha em navy, então a área de sobra-rolagem
   também é navy: sem isto, o elástico do iOS e do macOS abre uma faixa de
   papel debaixo do rodapé escuro. É superfície que eu não desenhei mas que o
   leitor vê. */
html{background:var(--rw-fundo)}
html{scrollbar-color:var(--rw-rule) var(--rw-fundo);scrollbar-width:thin;accent-color:var(--rw-signal-d)}
:where(h1,h2,h3,.n,.legal,time,.conta){font-variant-numeric:tabular-nums}

/* texto só para leitor de tela. Existe porque o aria-label nos contatos do
   rodapé REPROVAVA no WCAG 2.5.3 (Label in Name): o nome acessível precisa
   conter o texto visível, e o visível sai sem espaço entre os dois spans. Aviso
   oculto resolve sem inventar um nome que diverge do que está na tela. */
.vis-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.pular{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular:focus{
  position:fixed;left:var(--gut);top:10px;width:auto;height:auto;clip-path:none;z-index:60;
  background:var(--rw-ink);color:var(--papel);padding:12px 18px;border-radius:var(--r-s);
  font-weight:600;box-shadow:0 8px 28px -8px rgba(0,0,0,.6);
}

.nowrap{white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── ÍCONES ──────────────────────────────────────────────────────────────── */
/* um módulo, um peso de traço. O ícone herda a cor de onde está. */
.ico{width:1.15em;height:1.15em;flex:none;display:block}
.ico-wa{width:1.15em;height:1.15em}

/* ── LAYOUT ──────────────────────────────────────────────────────────────── */
.faixa{padding:var(--sp) var(--gut);background:var(--bg);color:var(--fg-body);position:relative}
/* O ritmo NÃO é o mesmo em toda emenda, e é isso que dá batida ao scroll:
   grande na virada de ato, médio quando o assunto continua, curto quando as
   duas seções são o mesmo argumento em dois tempos. Duas faixas da mesma
   superfície nunca empilham dois respiros inteiros. */
.faixa-compacta{padding-top:var(--sp-min)}
.abre-medio{padding-top:var(--sp-med)}
.fecha-curto{padding-bottom:var(--sp-min)}
.fecha-medio{padding-bottom:var(--sp-med)}
.miolo{max-width:var(--max);margin:0 auto}

/* A ESPINHA. A coluna de leitura estreita mora DENTRO da grade larga e alinha
   pela mesma borda esquerda — as duas medidas diferem em largura, não em
   posição. Sem isto, a borda esquerda pula descendo a página. */
.miolo.estreito>*{max-width:var(--estreito)}

/* ── EMENDAS ENTRE ATOS ──────────────────────────────────────────────────── */
/* A página era um empilhamento de blocos colados: papel, papel, navy, papel.
   O corte era sempre reto e sempre igual. Agora a passagem tem dois tempos —
   um degrau tonal que prepara a troca, e um fio de acento que ATRAVESSA a
   costura, entrando numa superfície e saindo na outra. É o único elemento da
   página que pertence a duas seções ao mesmo tempo. */
/* Duas camadas de gradiente no PRÓPRIO fundo da seção, não em pseudo-elemento:
   uma seção pode ser ao mesmo tempo a chegada de um ato escuro e a partida do
   próximo, e nesse caso ela precisa dos dois degraus. Pseudo-elemento só dá
   um. O ::after fica livre para o fio que atravessa a costura. */
.emenda-claro{
  background-image:linear-gradient(180deg,
    var(--papel-fundo) 0%, rgba(234,234,230,0) clamp(90px,11vw,160px));
}
.para-escuro{
  background-image:linear-gradient(180deg,
    rgba(234,234,230,0) calc(100% - clamp(80px,10vw,150px)), var(--papel-fundo) 100%);
}
.emenda-claro.para-escuro{
  background-image:
    linear-gradient(180deg, var(--papel-fundo) 0%, rgba(234,234,230,0) clamp(90px,11vw,160px)),
    linear-gradient(180deg, rgba(234,234,230,0) calc(100% - clamp(80px,10vw,150px)), var(--papel-fundo) 100%);
}
/* O FIO QUE ATRAVESSA. Um segmento de 104px de acento, ancorado na espinha
   (a mesma borda esquerda de todo o conteúdo), plantado 44px ACIMA do topo da
   seção clara — ou seja, metade dele vive dentro da seção escura anterior e
   metade dentro desta. É o único elemento da página que pertence a duas
   superfícies ao mesmo tempo, e é o que faz a virada de ato ler como uma
   passagem em vez de um corte. */
/* a passagem inversa: o mesmo fio, saindo do papel e entrando no navy. Ele
   mora na seção CLARA e desce para fora dela, e não na escura, por duas
   razões medidas: o ::before da superfície escura já carrega o ruído, e o
   hero e o CTA recortam o que passa da borda (overflow:hidden) — um fio
   ancorado lá seria cortado exatamente na metade que importa.
   O acento troca de valor na fronteira, então o segmento é pintado em dois
   pedaços: Signal Fundo na metade clara, Signal na escura. */
.para-escuro::before{
  content:"";position:absolute;left:var(--borda-esq);bottom:-60px;
  width:2px;height:120px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(176,58,24,0) 0%, var(--rw-signal-d) 30%, var(--rw-signal-d) 50%,
    var(--rw-signal) 50%, var(--rw-signal) 74%, rgba(232,85,44,0) 100%);
}
.emenda-claro::after{
  content:"";position:absolute;left:var(--borda-esq);top:-56px;
  width:2px;height:120px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(232,85,44,0) 0%, var(--rw-signal) 22%, var(--rw-signal) 37%,
    var(--rw-signal-d) 37%, var(--rw-signal-d) 62%, rgba(176,58,24,0) 100%);
}

/* ── TEXTURA ─────────────────────────────────────────────────────────────── */
/* ruído de 160px em 3,5% de alfa. Existe por um motivo medido: o navy é quase
   preto e chapado, e num painel grande ele mostra banding do gradiente. O
   ruído quebra a banda. Não é enfeite — é correção de superfície. */
.inv{position:relative}
.inv::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.085'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.inv>*{position:relative;z-index:1}

/* ── TIPOGRAFIA ──────────────────────────────────────────────────────────── */
.display{
  font-family:var(--display);font-weight:700;
  font-variation-settings:"wdth" 108;
  letter-spacing:-.024em;line-height:1.05;color:var(--fg);
  margin:0;text-wrap:balance;
}
h1.display{font-size:var(--d1);max-width:16ch;letter-spacing:-.03em;line-height:1.02}
h2.display{font-size:var(--d2);max-width:22ch;letter-spacing:-.026em;line-height:1.06}
/* o h3 desce de largura 108 para 104 e afrouxa o tracking: dois títulos com a
   mesma face e a mesma cor precisam de outra diferença além do tamanho. */
h3.display{font-size:var(--d3);max-width:26ch;font-variation-settings:"wdth" 104;
  letter-spacing:-.018em;line-height:1.12}
.d-mid{font-size:var(--d-mid);line-height:1.32;max-width:28ch;font-variation-settings:"wdth" 104;
  letter-spacing:-.016em}
.lead{font-size:var(--lead);line-height:1.5;max-width:52ch;color:var(--fg-body);margin:0}
p{max-width:68ch;margin:0 0 .9em}
p:last-child{margin-bottom:0}
.nota{font-size:var(--nota);line-height:1.55;color:var(--fg-muted);max-width:56ch}
/* o link para a fonte do dado. Fio embaixo em vez de sublinhado do navegador,
   e ele fica na cor do texto: é procedência, não chamada para ação. */
.fonte{display:inline-block;margin-top:.5em;color:var(--fg-body);
  text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px}
.fonte:hover{color:var(--fg)}
.rot{
  font-family:var(--mono);font-size:var(--rot);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:.7em;margin:0 0 var(--bloco-1);
}
/* a rubrica ganhou um traço de acento à esquerda. Ela é a abertura de um ato,
   e um ato começa com uma marca, não só com texto pequeno colorido. */
.rot::before{content:"";width:clamp(18px,2.4vw,28px);height:1px;background:var(--accent);flex:none}
.k{
  font-family:var(--mono);font-size:var(--rot);font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-muted);display:block;margin-bottom:var(--bloco-1);
}
.cit{
  font-family:var(--serifa);font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,1.05rem + 0.9vw,1.75rem);line-height:1.38;
  max-width:46ch;color:var(--fg);margin:0;
  padding-left:clamp(16px,2.4vw,28px);border-left:2px solid var(--accent);
}
strong,b{color:var(--fg);font-weight:700}
.cab{margin-bottom:var(--bloco-3)}
.cab .lead{margin-top:var(--bloco-1)}
/* mais ar ACIMA de um título do que abaixo dele: é assim que o olho sabe que o
   texto pertence ao título e não ao parágrafo anterior. */
.cab h2+p,.cab h2+.lead{margin-top:var(--bloco-2)}

/* o remate: a linha que tira o risco de um clique. Anda junto do botão. */

/* ── BOTÃO ───────────────────────────────────────────────────────────────── */
/* Raio de objeto: 8px. O controle é a única coisa que a mão toca, e é onde o
   sistema admite curva. A seção, a imagem e o fio continuam retos. */
.btn{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:48px;padding:.8em 1.5em;border-radius:var(--r-s);
  font-family:var(--corpo);font-size:1.0625rem;font-weight:600;line-height:1;
  letter-spacing:-.01em;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;overflow:hidden;
  transition:color var(--t-2) var(--ease-io),border-color var(--t-2) var(--ease-io),
             transform var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease);
}
/* o preenchimento do hover não troca de cor: ele SOBE por trás do rótulo. É a
   mesma ideia do fio que se desenha, aplicada a um controle. */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translateY(101%);transition:transform var(--t-2) var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn .ico{transition:transform var(--t-2) var(--ease)}
.btn:hover .ico{transform:translateX(2px) scale(1.04)}

.btn-1{background:var(--accent);color:var(--on-accent);border-color:var(--accent);
  box-shadow:0 1px 2px rgba(14,21,43,.10)}
.btn-1::before{background:var(--fg)}
.btn-1:hover{color:var(--bg);border-color:var(--fg);transform:translateY(-2px);box-shadow:var(--sombra-2)}
.btn-2{background:transparent;color:var(--fg);border-color:var(--borda-forte)}
.btn-2::before{background:var(--fg)}
.btn-2:hover{color:var(--bg);border-color:var(--fg);transform:translateY(-2px)}
.btn-grande{min-height:60px;padding:1.05em 2.1em}

/* terciário: dentro de um bloco que já tem hierarquia, o botão vira um fio */
.btn-3{
  padding:0;min-height:var(--toque);align-items:center;border-radius:0;
  border-width:0 0 1.5px 0;border-color:var(--borda-forte);
  color:var(--fg);gap:.5em;margin-top:var(--bloco-2);overflow:visible;
  font-size:1.0625rem;align-self:start;
}
.btn-3::before{display:none}
.btn-3::after{content:"";width:1.05em;height:1.05em;flex:none;
  background:currentColor;transition:transform var(--t-2) var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15'/%3E%3Cpath d='m13.5 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15'/%3E%3Cpath d='m13.5 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-3:hover{color:var(--accent);border-color:var(--accent);transform:none;box-shadow:none}
.btn-3:hover::after{transform:translateX(5px)}

.fila{display:flex;flex-wrap:wrap;gap:var(--bloco-1);margin-top:var(--bloco-2);align-items:center}
@media (max-width:519px){.fila{display:grid}.fila .btn{width:100%}}

/* ── NAV ─────────────────────────────────────────────────────────────────── */
/* Dois estados. Parada, ela é transparente e faz parte do hero: a marca tem
   presença e nada compete com a manchete. Solta, ela descola das bordas e vira
   um objeto — superfície navy translúcida, borda de 1px, sombra, altura menor.
   A barra é sempre navy, nos dois atos: ela é a assinatura, e assinatura não
   troca de cor a cada seção. */
/* A INVERSÃO, e ela tem um motivo de leitura, não de gosto: o repouso desta
   barra é a superfície ELEVADA, e a transparência é que é o estado especial —
   ela só acontece no topo, sobre o hero, onde o navy da barra e o navy do hero
   são a mesma cor. Escrito ao contrário (transparente por padrão, sólida ao
   rolar) a barra dependia do script para existir: sem ele, ela ficava
   transparente sobre TODAS as seções, e a marca em Papel branco sobre a
   superfície de papel virava texto invisível. O estado que precisa de
   JavaScript tem de ser o dispensável. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:8px var(--gut);
  transition:padding var(--t-3) var(--ease);
  --accent:var(--rw-signal);
}
.nav-caixa{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--bloco-1);
  padding:12px clamp(14px,1.6vw,22px);border-radius:var(--r);
  color:var(--papel);
  background:rgba(14,21,43,.88);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 2px rgba(0,0,0,.24), 0 18px 44px -18px rgba(0,0,0,.66);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  transition:padding var(--t-3) var(--ease),background-color var(--t-3) var(--ease-io),
             border-color var(--t-3) var(--ease-io),box-shadow var(--t-3) var(--ease),
             backdrop-filter var(--t-3) var(--ease-io);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-caixa{background:rgba(14,21,43,.96)}
}
/* no topo ela se dissolve no hero e ganha altura */
.nav.no-topo{padding-top:12px;padding-bottom:12px}
.nav.no-topo .nav-caixa{
  padding:2px 0;background:transparent;border-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

.nav .marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--papel);
  min-height:var(--toque);padding-right:8px}
.nav .marca svg{height:21px;width:auto;transform-origin:left center;
  transition:transform var(--t-3) var(--ease)}
.nav.no-topo .marca svg{transform:scale(1.14)}
.nav .marca span{font-family:var(--display);font-weight:700;letter-spacing:-.022em;
  font-size:1.0625rem;font-variation-settings:"wdth" 104}
.nav .marca circle{transition:transform var(--t-2) var(--ease);transform-origin:133.83px 61.5px}
.nav .marca:hover circle{transform:scale(1.22)}

.navlinks{display:none;gap:clamp(20px,2.4vw,34px);align-items:center}
.navlinks a{
  position:relative;font-size:1.0625rem;text-decoration:none;color:rgba(244,244,242,.62);
  padding:8px 0;transition:color var(--t-2) var(--ease-io);
}
/* o sublinhado não aparece: ele é varrido da esquerda para a direita, na
   direção da leitura. Mesmo gesto do fio que se desenha. */
.navlinks a span{display:block;position:relative}
.navlinks a span::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:var(--rw-signal);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-2) var(--ease);
}
.navlinks a:hover{color:var(--papel)}
.navlinks a:hover span::after{transform:scaleX(1)}
.navlinks a.agora{color:var(--papel)}
.navlinks a.agora span::after{transform:scaleX(1)}
@media (min-width:920px){.navlinks{display:flex}}

.nav-fala{
  display:inline-flex;align-items:center;gap:.5em;min-height:var(--toque);
  padding:9px 16px;border-radius:var(--r-s);text-decoration:none;color:var(--papel);
  font-weight:600;font-size:1.0625rem;white-space:nowrap;letter-spacing:-.01em;
  border:1px solid rgba(232,85,44,.55);background:rgba(232,85,44,.12);
  transition:background-color var(--t-2) var(--ease-io),border-color var(--t-2) var(--ease-io),
             transform var(--t-2) var(--ease);
}
.nav-fala .ico-wa{color:var(--rw-signal);transition:color var(--t-2) var(--ease-io)}
.nav-fala:hover{background:var(--rw-signal);border-color:var(--rw-signal);color:var(--rw-ink);transform:translateY(-1px)}
.nav-fala:hover .ico-wa{color:var(--rw-ink)}
@media (max-width:419px){
  .nav-fala span{display:none}
  .nav-fala{min-width:var(--toque);justify-content:center;padding:9px 12px}
  .nav-fala .ico-wa{width:1.4em;height:1.4em}
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
/* A fotografia não está "atrás de um overlay". Ela é uma das cinco camadas de
   uma composição: foto, malha técnica, véu direcional, vinheta e rede de nós.
   Cada camada tem um trabalho: a malha dá escala, o véu dá contraste, a
   vinheta fecha a borda e a rede diz "sistema" sem escrever a palavra. */
.hero{
  position:relative;overflow:hidden;
  padding-top:clamp(132px,17vw,208px);
  padding-bottom:clamp(56px,7vw,92px);
  background:var(--rw-ink);
}
.hero-fundo{position:absolute;inset:0;z-index:0}
.hero .foto{position:absolute;inset:-8% 0 -8%;display:none}
.hero .foto img{
  width:100%;height:100%;object-fit:cover;object-position:82% 26%;opacity:1;
  filter:saturate(.72) contrast(1.06);
}
@media (min-width:1080px){.hero .foto{display:block}}

/* malha técnica: uma grade de 64px em 4,5% de alfa, cortada por máscara
   radial para que ela exista no canto e desapareça sob o texto. */
.hero-malha{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,var(--malha) 1px,transparent 1px),
    linear-gradient(to bottom,var(--malha) 1px,transparent 1px);
  background-size:clamp(48px,5vw,72px) clamp(48px,5vw,72px);
  -webkit-mask-image:radial-gradient(120% 100% at 78% 34%,#000 0%,rgba(0,0,0,.35) 46%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 78% 34%,#000 0%,rgba(0,0,0,.35) 46%,transparent 78%);
}
/* véu + vinheta numa camada só, para não empilhar dois elementos pintados */
.hero-veu{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,15,32,.72) 0%,rgba(14,21,43,0) 32%),
    linear-gradient(180deg,rgba(14,21,43,0) 46%,rgba(10,15,32,.86) 100%);
}
@media (min-width:1080px){
  .hero-veu{
    background:
      linear-gradient(96deg,#0E152B 0%,#0E152B 38%,rgba(14,21,43,.88) 58%,rgba(14,21,43,.34) 84%,rgba(14,21,43,.52) 100%),
      linear-gradient(180deg,rgba(10,15,32,.60) 0%,rgba(14,21,43,0) 26%),
      linear-gradient(180deg,rgba(14,21,43,0) 48%,rgba(10,15,32,.82) 100%),
      radial-gradient(85% 70% at 50% 46%,rgba(14,21,43,0) 42%,rgba(5,8,15,.46) 100%);
  }
}
/* a rede: sete nós e seis arestas, no canto superior direito, em 1px. Ela é
   pequena, fica longe da manchete e some no celular. Não é partícula e não se
   move sozinha: é um diagrama parado. */
.hero-rede{
  position:absolute;right:-4%;top:2%;width:min(46vw,520px);height:min(46vw,520px);
  display:none;overflow:visible;
}
.hero-rede .rede-fio path{fill:none;stroke:rgba(232,85,44,.34);stroke-width:1;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.hero-rede .rede-no circle{fill:rgba(232,85,44,.55)}
.hero-rede .rede-no circle:nth-child(2),.hero-rede .rede-no circle:nth-child(5){
  fill:none;stroke:var(--rw-signal);stroke-width:1.2;vector-effect:non-scaling-stroke}
@media (min-width:900px){.hero-rede{display:block}}

.hero-miolo{position:relative;z-index:2}
/* O enquadramento do leitor. É a SEGUNDA manchete, não um lead: fica no degrau
   --d-mid (que já existe), na cor do texto e não na do corpo. Ganha medida além
   dos 28ch da .d-mid porque a frase é longa de propósito — ela é a condição
   inteira, e quebrada em cinco linhas curtas viraria estrofe. */
/* ── DESTAQUE DA MANCHETE (experimento de 02/09) ─────────────────────────── */
/* Fundo Signal com texto Ink Navy. Contraste MEDIDO: 4,97:1 — passa AA em
   texto grande (pede 3:1) e passa até para texto normal (4,5:1). É o mesmo par
   que o design system já registra, só que invertido.

   🚨 Ele contraria a Regra dos 10%, que diz "nunca fundo de bloco grande" para
   o acento. Está isolado numa classe única (.destaque) e numa regra única de
   propósito: tirar é apagar este bloco e a palavra na classe do h1.

   O grifo acompanha CADA LINHA em vez de virar uma laje: o JS já quebra a
   manchete em .ln > span, então o fundo abraça o texto e respeita o desenho da
   quebra. Sem JS, o h1 vira inline e o box-decoration-break faz o mesmo
   trabalho — o destaque não depende do script, igual ao resto da página. */
/* DUAS LINHAS, e a quebra cai onde a frase quebra: "Não falo sobre IA." /
   "Eu construo com IA." — 18 e 19 caracteres, quase iguais, então o balance
   parte no ponto sozinho. A medida sobe de 16ch (padrão do h1) para 19ch, que
   é o mínimo em que a segunda frase cabe inteira numa linha.
   ⚠️ 19ch NÃO bastou, e o erro foi meu: eu calculei a largura ignorando duas
   coisas que somam. O display roda em `wdth 108` — 8% mais largo que o normal —
   e o grifo acrescenta padding horizontal em CADA linha. Juntas, elas empurravam
   "Eu construo com IA." para fora da medida, e ela caía para a terceira linha.
   A medida foi para 26ch e o padding encolheu; quem faz a quebra cair no ponto
   final é o `balance`, que prefere 18/19 caracteres a 21/16.
   ⚠️ O tamanho também precisou descer no celular: em 4,75rem a segunda frase não
   cabe numa tela de 390px de jeito nenhum. */
h1.destaque{max-width:none}
/* Acima de 768 a manchete usa o tamanho normal do h1: a frase mais longa cabe
   com folga. Abaixo, ela precisa encolher, senão "Eu construo com IA." não cabe
   na coluna e vira duas linhas — três no total, que é o defeito que se está
   corrigindo. Medido em 360, 390 e 767. */
@media (max-width:767px){
  h1.destaque{font-size:clamp(1.55rem,0.74rem + 4.20vw,2.90rem)}
}
/* o grifo mora no span interno, não no h1: o h1 continua bloco (o gesto de
   revelação precisa de transform, que não se aplica a inline) e o span é inline,
   então o box-decoration-break dá uma caixa por LINHA em vez de uma laje só. */
.destaque>span{
  background:var(--accent);color:var(--rw-ink);
  padding:.04em .11em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

.hero-frame{max-width:34ch;margin-top:var(--bloco-2)}
.hero-lead{max-width:46ch;margin-top:var(--bloco-1);color:var(--g200)}
.hero .fila{margin-top:var(--bloco-3)}

/* paralaxe: amplitude pequena, só na fotografia, e só onde o navegador sabe
   fazer isso sem um listener de scroll. Sem suporte, a composição fica parada
   e nada se perde — ela nunca dependeu do movimento. */
@supports (animation-timeline:scroll()){
  @media (min-width:1080px) and (prefers-reduced-motion:no-preference){
    .hero .foto{
      animation:parallax linear both;
      animation-timeline:scroll(root);
      animation-range:0 90vh;
    }
    @keyframes parallax{to{transform:translate3d(0,7%,0) scale(1.04)}}
  }
}

/* ── FAIXA DE PROVA ──────────────────────────────────────────────────────── */
/* Ela é o rodapé da promessa, não uma seção. Fica na mesma massa escura do
   hero, sem respiro acima, e os números são separados por fio vertical em vez
   de virarem três cartões. */
.faixa-prova{
  background:var(--rw-ink);
  padding-top:0;padding-bottom:clamp(52px,6vw,80px);
}
.prova{display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--rule);padding-top:clamp(28px,3.4vw,44px)}
.prova-i{padding:var(--bloco-2) 0}
.prova-i+.prova-i{border-top:1px solid var(--rule)}
@media (min-width:700px){
  .prova{grid-template-columns:repeat(2,1fr);column-gap:clamp(24px,4vw,64px)}
  .prova-i{padding:0}
  .prova-i+.prova-i{border-top:0;border-left:1px solid var(--rule);
    padding-left:clamp(24px,4vw,64px)}
}
.prova .n{
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 108;
  font-size:clamp(2.6rem,1.6rem + 3.6vw,4rem);line-height:.98;letter-spacing:-.034em;
  color:var(--fg);font-variant-numeric:tabular-nums;display:block;
}
.prova .mais{color:var(--accent)}
.prova .k{
  color:var(--fg-muted);margin:14px 0 0;text-wrap:balance;
}

/* ── BARRA DE MARCAS ──────────────────────────────────────────── */
/* Prova social sem número, e ela substitui o "Dezenas" que saiu. Continua na
   mesma massa escura, separada por fio como todo o resto — nunca uma grade de
   cartõezinhos com logo dentro de caixa. É uma linha de nomes que quebra.
   O tamanho é o degrau de corpo, herdado: um nome de marca não é manchete.

   O padrão é OCULTO, e quem revela é a presença de um <li>. Escrito assim de
   propósito: se o :has() não existir no navegador, a barra simplesmente não
   aparece — em vez de aparecer uma rubrica "Quem confia" apontando para nada.
   E nada disso depende do app.js, igual ao resto da página. */
/* ⚠️ Ela deixou de morar na faixa escura de prova e passou a ter faixa clara
   própria (.faixa-marcas), então não carrega mais o fio nem o respiro de topo
   que a prendiam ali. */
.marcas{display:none}
.marcas:has(.marcas-lista li){display:block}
.faixa-marcas{padding-top:clamp(34px,4vw,52px)}
.marcas .k{margin-bottom:14px}
/* A JANELA recorta a pista; a PISTA é a lista duplicada andando. O laço é
   contínuo porque o deslocamento para em -50%, que é exatamente o começo da
   segunda cópia — a costura cai num ponto onde a imagem é idêntica.
   Nada aqui depende do app.js. */
.marcas-janela{
  overflow:hidden;
  /* o esmaecido nas pontas existe para o nome não aparecer cortado no meio de
     uma letra. É máscara de recorte na borda do contêiner, não opacidade em
     papel de texto — a Regra do Alfa continua de pé no miolo da faixa. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marcas-pista{
  display:flex;width:max-content;
  animation:desfila 64s linear infinite;
  will-change:transform;
}
/* pausa no hover e no foco de teclado: nome em movimento é nome que não se lê,
   e alguém navegando por Tab precisa parar a esteira para alcançar o conteúdo. */
.marcas:hover .marcas-pista,
.marcas-pista:focus-within{animation-play-state:paused}
@keyframes desfila{to{transform:translate3d(-50%,0,0)}}

.marcas-lista{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:baseline;flex:0 0 auto;
  column-gap:clamp(30px,3.8vw,58px);min-height:60px;
  padding-right:clamp(30px,3.8vw,58px);
}
/* sem movimento: a esteira vira o que ela seria sem animação nenhuma — uma
   linha de nomes que quebra —, e a cópia duplicada sai de cena para não
   repetir a lista para quem está lendo parado. */
@media (prefers-reduced-motion:reduce){
  .marcas-janela{-webkit-mask-image:none;mask-image:none}
  .marcas-pista{animation:none;width:auto}
  .marcas-lista{flex-wrap:wrap;row-gap:12px;padding-right:0}
  .marcas-lista[aria-hidden="true"]{display:none}
}
.marcas-lista li{
  font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 104;
  letter-spacing:-.006em;line-height:1.2;color:var(--fg-body);white-space:nowrap;
  display:flex;align-items:center;
}
/* ⚠️ ALTURA FIXA SERIA ERRADO AQUI, e a primeira versão desta regra estava.
   Marcas de proporção diferente não pesam igual à mesma altura: a 6:1 vira uma
   faixa comprida e a quadrada some do lado dela. O equilíbrio é por ÁREA, e ele
   já vem embutido no width/height de cada arquivo — o CSS só respeita.
   Sem filtro de cor: logo alterado é logo usado errado. */
.marcas-lista img{display:block;max-width:100%;height:auto}

/* ── PAINEL · a superfície que avança ────────────────────────────────────── */
/* O único contêiner fechado do sistema, e ele tem regra: só existe quando o
   conteúdo é de OUTRA natureza que o texto em volta — um dado desenhado, um
   diagrama, uma frente de trabalho. Nunca para agrupar parágrafo. */
.painel{
  background:var(--superf);border:1px solid var(--borda);border-radius:var(--r);
  padding:clamp(22px,2.8vw,34px);box-shadow:var(--sombra-1);
}

/* ── O DADO DESENHADO ────────────────────────────────────────────────────── */
.cab-grade{display:grid;gap:var(--bloco-3)}
@media (min-width:960px){
  .cab-grade{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    column-gap:clamp(44px,5vw,84px);align-items:start}
  .cab-arg>h2{max-width:100%}
}
.cab-arg .rot{margin-bottom:var(--bloco-2)}
.cab-arg h2+p{margin-top:var(--bloco-2)}
.dado .k{color:var(--accent)}
.barras{list-style:none;margin:var(--bloco-2) 0;padding:0;display:grid;gap:var(--bloco-2)}
.b-topo{display:flex;align-items:baseline;gap:.7em;margin-bottom:12px}
.b-val{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 108;
  font-size:clamp(1.9rem,1.4rem + 1.8vw,2.6rem);line-height:1;letter-spacing:-.03em;
  color:var(--fg);flex:none}
.b-rot{font-size:var(--nota);line-height:1.35;color:var(--fg-muted);text-wrap:balance}
.b-trilho{display:block;height:6px;background:var(--papel-frio);border-radius:var(--r-fio);overflow:hidden}
.b-fill{display:block;height:100%;width:100%;border-radius:var(--r-fio);
  background:var(--accent);transform-origin:left center;transform:scaleX(var(--pct-n));
  transition:transform 1.1s var(--ease);transition-delay:var(--atraso,0ms)}
.dado .nota{margin-top:var(--bloco-2);padding-top:var(--bloco-1);border-top:1px solid var(--borda)}

/* ── O DIAGRAMA DA SEPARAÇÃO ─────────────────────────────────────────────── */
/* A frase "o que a IA assume não é o seu julgamento, é a operação em volta
   dele" é a propriedade intelectual da oferta inteira. Ela estava só escrita.
   Aqui ela é desenhada: dois lados, um eixo entre eles, e uma única seta de
   travessia — a exceção que volta para a pessoa. */
.faixa-sep{background:var(--rw-elev)}
.separacao{display:grid;gap:var(--bloco-2);margin-top:var(--bloco-1)}
.sep-lado{display:grid;align-content:start;gap:var(--bloco-1)}
.sep-lado .k{margin:0}
.sep-jul .k{color:var(--accent)}
.sep-nos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sep-nos li{
  padding:13px 16px;border:1px solid var(--borda);border-radius:var(--r-s);
  background:var(--superf);
  font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 104;
  font-size:1.0625rem;letter-spacing:-.014em;color:var(--fg);line-height:1.32;
  transition:border-color var(--t-2) var(--ease-io),background-color var(--t-2) var(--ease-io);
}
/* o lado do julgamento é o lado com dono: fio de acento à esquerda, 2px, e é a
   única coisa da página com peso de borda colorida. */
.sep-jul .sep-nos li{border-left:1px solid var(--accent);background:var(--tint);
  font-size:var(--lead);font-variation-settings:"wdth" 106}
.sep-ope .sep-nos li{color:var(--fg-body)}
.sep-volta{display:flex;align-items:flex-start;gap:.6em;margin-top:var(--bloco-1);color:var(--accent)}
.sep-volta .ico{transform:rotate(180deg);margin-top:.15em}
/* o eixo. Vertical no desktop, horizontal no celular — a separação existe nos
   dois, só que num deles ela é lado a lado e no outro é antes e depois. */
.sep-eixo{position:relative;display:grid;place-items:center}
.eixo-fio{display:block;background:linear-gradient(180deg,
  rgba(232,85,44,0) 0%,var(--rw-signal) 18%,var(--rw-signal) 82%,rgba(232,85,44,0) 100%)}
.sep-eixo{min-height:32px}
.eixo-fio{width:100%;height:1px;background:linear-gradient(90deg,
  rgba(232,85,44,0) 0%,var(--rw-signal) 18%,var(--rw-signal) 82%,rgba(232,85,44,0) 100%)}

@media (min-width:860px){
  .separacao{
    grid-template-columns:minmax(0,.92fr) clamp(48px,5.5vw,84px) minmax(0,1.22fr);
    column-gap:0;align-items:start;
  }
  .sep-eixo{align-self:stretch;min-height:0}
  .eixo-fio{width:1px;height:100%;background:linear-gradient(180deg,
    rgba(232,85,44,0) 0%,var(--rw-signal) 14%,var(--rw-signal) 86%,rgba(232,85,44,0) 100%)}
  .sep-jul{text-align:right}
  .sep-jul .k{justify-self:end}
  /* o fio de acento troca de lado: encostado no eixo, ele lê como "este lado
     é o dono"; na borda de fora, lê como marcador solto. */
  .sep-jul .sep-nos li{border-left:1px solid var(--borda);border-right:1px solid var(--accent)}
  .sep-ope .verbos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1120px){
  .sep-ope .verbos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* dois por linha mesmo no celular: são sete palavras curtas, e em coluna
   única elas somavam ~780px de rolagem para dizer uma lista. */
.verbos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:359px){.verbos{grid-template-columns:1fr}}

/* ── BLOCO ANTES / DEPOIS ────────────────────────────────────────────────── */
.par{display:grid;gap:var(--bloco-2)}
@media (min-width:768px){
  .par{grid-template-columns:1fr 1fr;gap:clamp(32px,4.6vw,72px);align-items:start}
  .par>div+div{padding-left:clamp(32px,4.6vw,72px);border-left:1px solid var(--rule)}
}
/* "Depois" é o estado que a página vende: ele ganha a marca de acento que o
   "Antes" não tem. A hierarquia entre os dois deixou de ser só a ordem. */
.par>div+div .k{color:var(--accent)}
.par>div+div h3{color:var(--fg)}
/* o segundo eixo (a receita) é outro .par, e a emenda entre os dois é um fio
   com o mesmo respiro de bloco — não um respiro de seção, porque é o mesmo
   argumento em dois tempos. */
.par+.par{margin-top:var(--bloco-3);padding-top:var(--bloco-3);border-top:1px solid var(--rule)}

/* ── A TESE SOZINHA (faixa-ganho) ───────────────────────────────────────── */
/* A seção perdeu os três benefícios em grade e ficou com dois tempos: a frase
   e o nome que o mercado deu a ela. Sem a lista, o degrau --d2 fazia a seção
   inteira parecer legenda — então ela ganha tamanho próprio, do mesmo jeito
   que .faixa-cta já tinha o dela. É a segunda e última exceção de escala do
   arquivo, e fica ABAIXO do CTA de propósito: o clímax continua sendo o
   pedido, não a tese. */
/* ⚠️ A BANDA DEIXOU DE SER NAVY E PASSOU A SER SIGNAL (02/09, pedido do
   Ricardo). Ela não usa mais .inv: navy e laranja são superfícies diferentes, e
   .inv significa "a superfície oposta da marca", que é o navy. Esta é uma
   terceira, e por isso declara os próprios tokens.

   Contraste MEDIDO: Ink Navy sobre Signal dá 4,97:1 — passa AA em qualquer
   tamanho de texto (pede 4,5:1). Papel sobre Signal daria só 3,24:1, que
   reprova em texto normal; por isso a tinta aqui é o navy, nunca o papel.

   🚨 Sobre a banda existe UMA tinta só. Não há nível "muted": num fundo de
   acento, inventar um segundo tom de tinta é inventar cor fora do sistema. A
   hierarquia sai de tamanho e peso, que é como ela deveria sair. O alfa aparece
   só no fio — borda pode ter alfa, papel de texto não. */
.faixa-ganho{
  --bg:var(--rw-signal);
  --fg:var(--rw-ink); --fg-body:var(--rw-ink); --fg-muted:var(--rw-ink);
  --accent:var(--rw-ink); --rule:rgba(14,21,43,.26);
  background:var(--bg);color:var(--fg-body);
}
.faixa-ganho h2.display{font-size:clamp(2.25rem,1.35rem + 3.50vw,3.6rem);
  max-width:18ch;letter-spacing:-.028em;line-height:1.04;margin:0}

/* A composição: tese à esquerda, o nome do modelo à direita, separados por fio
   e nunca por caixa. A grade é assimétrica de propósito (1.35 : 1) — duas
   colunas iguais fariam a tese e a nota parecerem do mesmo peso, e não são. */
.ganho{display:grid;gap:var(--bloco-3)}
@media (min-width:900px){
  .ganho{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    column-gap:clamp(40px,5.4vw,88px);align-items:start}
  .ganho-nome{padding-left:clamp(40px,5.4vw,88px);
    border-left:1px solid var(--rule)}
}
/* no estreito o fio vira horizontal: a separação continua existindo, só troca
   de eixo — mesma regra do diagrama da separação. */
@media (max-width:899px){
  .ganho-nome{padding-top:var(--bloco-2);border-top:1px solid var(--rule)}
}
.ganho-termo{margin:0;color:var(--fg);max-width:16ch}
.ganho-nome .nota{margin-top:var(--bloco-1);max-width:40ch}

/* ── AS FRENTES ──────────────────────────────────────────────────────────── */
/* Cada frente tem a forma do que ela entrega: o programa é uma sequência de
   MOVIMENTOS (linear, escura, um puxando o outro — reaproveita o componente
   .cadeia) e o treinamento é uma TURMA (matriz de gente, clara, onde uma parte
   passa a operar). A diferença é de composição, não de rótulo.
   A terceira não tem forma própria de propósito — ver .frente-3. */
.frentes{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.6vw,32px)}
.frente{
  border-radius:var(--r);padding:clamp(24px,3.4vw,48px);
  display:grid;gap:var(--bloco-3);align-items:stretch;
  border:1px solid var(--borda);
  transition:transform var(--t-3) var(--ease),box-shadow var(--t-3) var(--ease),
             border-color var(--t-3) var(--ease-io);
}
@media (min-width:900px){
  .frente{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    column-gap:clamp(36px,4.4vw,72px)}
}
.frente-arg{display:grid;align-content:start;justify-items:start}
.frente-arg>*{max-width:54ch}
.frente-1{background:var(--rw-elev);box-shadow:var(--sombra-2)}
.frente-1:hover{border-color:rgba(232,85,44,.34)}
.frente-2{background:var(--superf);box-shadow:var(--sombra-1)}
.frente-2:hover{border-color:var(--borda-forte);box-shadow:var(--sombra-2)}
.frente:hover{transform:translateY(-3px)}

/* A TERCEIRA · ela existe e se contrata, e o detalhe mora numa página própria.
   Sem diagrama, a grade de duas colunas deixaria metade do cartão vazia — então
   ela é de UMA coluna, sem fundo, sem sombra e sem o salto do hover.
   É o cartão que NÃO disputa o clique com os outros dois, e isso é desenho:
   um CTA fraco com o mesmo peso visual de dois fortes enfraquece os três. */
@media (min-width:900px){
  .frente-3{grid-template-columns:minmax(0,1fr)}
}
.frente-3{background:transparent;box-shadow:none;
  padding-top:clamp(20px,2.6vw,32px);padding-bottom:clamp(20px,2.6vw,32px)}
.frente-3 .frente-arg>*{max-width:64ch}
.frente-3:hover{transform:none;box-shadow:none;border-color:var(--borda-forte)}
.nota-frente{margin-top:var(--bloco-2);padding-top:var(--bloco-1);
  border-top:1px solid var(--rule);max-width:52ch}

/* a forma do treinamento */
.forma{list-style:none;margin:var(--bloco-2) 0 0;padding:0;display:grid;gap:0;max-width:46ch;width:100%}
.forma li{
  padding:11px 0 11px 1.7em;border-top:1px solid var(--rule);
  font-size:var(--nota);color:var(--fg-body);position:relative;
}
.forma li:last-child{border-bottom:1px solid var(--rule)}
.forma li::before{
  content:"";position:absolute;left:0;top:1.2em;
  width:.8em;height:1px;background:var(--accent);
}

/* A CADEIA · nós sobre um trilho. O trilho se desenha da esquerda para a
   direita quando entra, e os nós acendem atrás dele. */
/* coluna em flex para que a nota de fecho encoste no pé do painel: em grade
   ela parava na metade e deixava 180px de superfície morta embaixo. */
.cadeia,.turma{display:flex;flex-direction:column;padding-top:var(--bloco-1)}
.cadeia .k,.turma .k{color:var(--accent);margin-bottom:var(--bloco-1)}
.cadeia-nos{list-style:none;margin:0;padding:0;position:relative;
  display:grid;gap:18px}
.cadeia-nos::before{
  content:"";position:absolute;left:23px;top:14px;bottom:14px;width:1px;
  background:var(--rule);transform-origin:top center;
  transition:transform .9s var(--ease);
}
.cadeia-nos li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;
  position:relative}
.no-ico{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:var(--r-s);
  border:1px solid var(--borda);background:var(--bg);color:var(--fg-muted);
  transition:color var(--t-2) var(--ease-io),border-color var(--t-2) var(--ease-io),
             background-color var(--t-2) var(--ease-io);
}
.no-ico .ico{width:21px;height:21px}
.no-rot{font-family:var(--mono);font-size:var(--rot);letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-body);line-height:1.4}
/* o último elo é o argumento inteiro da frente: ele é o que quase ninguém
   entrega, então é o único aceso. */
.no-vivo .no-ico{color:var(--accent);border-color:var(--accent);background:var(--tint)}
.no-vivo .no-rot{color:var(--fg)}
.cadeia>.nota{margin-top:auto;padding-top:var(--bloco-2);border-top:1px solid var(--rule)}

/* ── OS TRÊS MOVIMENTOS (.cadeia-mov) ────────────────────────────────────── */
/* Reaproveita a máquina da cadeia — trilho, nós, revelação escalonada — e troca
   o que a cadeia dizia mal quando o conteúdo é MÉTODO e não peça de sistema:
   o número entra no lugar do ícone (ícone de verbo abstrato não significa
   nada), o verbo sobe de mono 12px para display (ele é o nome do movimento,
   não uma legenda) e ganha uma linha dizendo o que produz. */
.cadeia-mov .cadeia-nos{gap:0}
.cadeia-mov .cadeia-nos li{
  grid-template-columns:auto minmax(0,1fr);align-items:start;
  column-gap:16px;row-gap:3px;padding:var(--bloco-1) 0;
}
.cadeia-mov .cadeia-nos li+li{border-top:1px solid var(--rule)}
.cadeia-mov .no-ico{
  font-family:var(--mono);font-size:var(--rot);letter-spacing:.05em;
  color:var(--accent);border-color:var(--borda-forte);
  grid-row:1/span 2;
}
.cadeia-mov .no-rot{
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 104;
  font-size:var(--d3);text-transform:none;letter-spacing:-.02em;
  line-height:1.08;color:var(--fg);padding-top:.34em;
}
.mov-o{font-size:var(--nota);line-height:1.5;color:var(--fg-muted);grid-column:2}
/* o terceiro é o argumento inteiro da frente: ele é o único aceso, e o acento
   entra como FIO e como número — nunca como fundo de bloco. */
.cadeia-mov .no-vivo .no-ico{background:var(--tint);border-color:var(--accent)}
.cadeia-mov .no-vivo{border-top-color:var(--accent)}

/* ⚠️ ele NÃO vira linha horizontal em largura nenhuma, ao contrário da cadeia:
   método se lê de cima para baixo, e três verbos com uma linha de explicação
   cada não cabem em três colunas dentro da coluna estreita do cartão. Isto
   desfaz, para esta variante, o que as duas media queries abaixo fazem. */
@media (min-width:600px){
  .cadeia-mov .cadeia-nos{grid-auto-flow:row;grid-auto-columns:auto}
  .cadeia-mov .cadeia-nos::before{
    left:23px;right:auto;top:14px;bottom:14px;width:1px;height:auto;
    transform-origin:top center;
  }
  .anima .cadeia-mov .cadeia-nos::before{transform:scaleY(0)}
  .anima .vis .cadeia-mov .cadeia-nos::before{transform:none}
  .cadeia-mov .cadeia-nos li{
    grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;
    column-gap:16px;row-gap:3px;
  }
  .cadeia-mov .no-rot{font-size:var(--d3);letter-spacing:-.02em}
}

@media (min-width:600px) and (max-width:899px){
  .cadeia-nos{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
  .cadeia-nos::before{left:0;right:0;top:23px;bottom:auto;width:auto;height:1px;
    transform-origin:left center}
  .anima .cadeia-nos::before{transform:scaleX(0)}
  .cadeia-nos li{grid-template-columns:1fr;justify-items:center;text-align:center;gap:11px}
  .no-rot{font-size:.6875rem;letter-spacing:.06em}
}
@media (min-width:1140px){
  .cadeia-nos{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
  .cadeia-nos::before{left:0;right:0;top:23px;bottom:auto;width:auto;height:1px;
    transform-origin:left center}
  .anima .cadeia-nos::before{transform:scaleX(0)}
  .cadeia-nos li{grid-template-columns:1fr;justify-items:center;text-align:center;gap:11px}
  .cadeia-nos .no-rot{font-size:.6875rem;letter-spacing:.05em;text-wrap:balance}
}

/* A TURMA · matriz de pontos. A faixa acesa cresce da esquerda quando o bloco
   entra: é "a parte da sala que sai operando", em movimento de largura, não em
   número inventado. */
.turma-grade{position:relative;height:79px;overflow:hidden;flex:none}
.turma-grade::before,.turma-grade::after{
  content:"";position:absolute;left:0;top:0;bottom:0;
  background-image:radial-gradient(circle,currentColor 2.1px,transparent 2.4px);
  background-size:17px 17px;background-position:4px 6px;
}
.turma-grade::before{right:0;color:var(--regua)}
.turma-grade::after{right:0;color:var(--accent);
  clip-path:inset(0 62% 0 0);transition:clip-path 1.15s var(--ease)}
.turma-fases{list-style:none;margin:var(--bloco-2) 0 0;padding:0;display:grid;gap:10px}
.turma-fases li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:13px;
  font-family:var(--mono);font-size:var(--rot);letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-body)}
.turma-fases .no-ico{width:40px;height:40px}
.turma-fases .no-ico .ico{width:19px;height:19px}
.turma>.nota{margin-top:auto;padding-top:var(--bloco-2);border-top:1px solid var(--rule)}

/* ── O MÉTODO · linha que se preenche com a rolagem ──────────────────────── */
/* O scroll continua nativo: nada é sequestrado. O que a rolagem move é uma
   barra de progresso DENTRO da seção, e cada etapa acende ao ser alcançada.
   A informação nova é "onde eu estou no caminho" — que é exatamente o que a
   seção fala. */
.faixa-metodo{background:var(--rw-ink)}
.metodo{position:relative;padding-top:6px}
.metodo-trilho{
  position:absolute;left:calc(1.35rem - 1px);top:0;bottom:0;width:2px;
  background:var(--rule);overflow:hidden;
}
.metodo-fill{display:block;width:100%;height:var(--p,0%);
  background:linear-gradient(180deg,rgba(232,85,44,.45),var(--rw-signal));
}
.passos{list-style:none;counter-reset:p;margin:0;padding:0;position:relative;z-index:1}
.passos>li{
  counter-increment:p;display:grid;grid-template-columns:2.7rem 1fr;
  gap:8px 20px;padding:clamp(24px,3vw,40px) 0;
}
.passos>li+li{border-top:1px solid var(--rule)}
/* o contador É o nó do trilho: fundo opaco na cor da seção, então ele fura a
   linha em vez de flutuar ao lado dela. */
.passos>li::before{
  content:counter(p,decimal-leading-zero);
  grid-row:1/span 2;align-self:start;
  width:2.7rem;height:2.7rem;display:grid;place-items:center;border-radius:var(--r-s);
  /* --tint é translúcido: sem um fundo opaco por baixo, o trilho da esquerda
     atravessa o nó. A camada extra em rw-ink opacifica o nó no fundo escuro
     da seção sem mudar a cor percebida. */
  background-image:linear-gradient(var(--tint),var(--tint));
  background-color:var(--rw-ink);
  border:1px solid var(--accent);
  font-family:var(--mono);font-size:var(--rot);letter-spacing:.06em;
  color:var(--accent);font-variant-numeric:tabular-nums;
  transition:color var(--t-3) var(--ease-io),border-color var(--t-3) var(--ease-io),
             background-color var(--t-3) var(--ease-io);
}
.passos h3{margin:0;color:var(--fg);transition:color var(--t-3) var(--ease-io)}
.passos p{grid-column:2;margin:0;max-width:56ch}
@media (min-width:1000px){
  .passos>li{grid-template-columns:2.7rem minmax(0,15rem) minmax(0,1fr);
    column-gap:clamp(28px,3.4vw,56px)}
  .passos>li::before{grid-row:1}
  .passos h3{grid-column:2;max-width:14ch}
  .passos p{grid-column:3;grid-row:1;max-width:48ch;padding-top:.5em}
}
/* só quando o script está de fato conduzindo (.anima) a etapa ainda não
   alcançada recua. Nunca antes disso. */
.anima .metodo .passos>li:not(.ativo)::before{
  color:var(--fg-muted);border-color:var(--rule);background:var(--bg)}
.anima .metodo .passos>li:not(.ativo) h3{color:var(--fg-muted)}
@media (max-width:519px){
  .passos>li{grid-template-columns:2.3rem 1fr;gap:6px 14px}
  .passos>li::before{width:2.3rem;height:2.3rem}
  .metodo-trilho{left:calc(1.15rem - 1px)}
}

/* ── AUTORIDADE ──────────────────────────────────────────────────────────── */
.duas{display:grid;gap:var(--bloco-3)}
@media (min-width:768px){.duas{grid-template-columns:1.55fr 1fr;gap:clamp(36px,5vw,80px)}}
.duas-autor{align-items:start}
.autor-fig{margin:0}
/* o retrato continua reto: imagem é estrutura, e estrutura não arredonda. O
   que ele ganhou foi profundidade — sombra suave e o fio de acento no topo,
   que é o único fio pesado da página. */
.retrato-caixa{max-width:360px;box-shadow:var(--sombra-2);border-top:3px solid var(--accent);
  position:relative;overflow:hidden}
.retrato{width:100%;transition:transform 1.2s var(--ease)}
.retrato-caixa:hover .retrato{transform:scale(1.03)}
.autor-fig figcaption{
  display:grid;gap:8px;margin-top:var(--bloco-2);max-width:360px;
  font-family:var(--mono);font-size:var(--rot);letter-spacing:.03em;
  color:var(--fg-muted);
}
.autor-fig figcaption span{padding-top:9px;border-top:1px solid var(--rule)}

/* ── A RECUSA ────────────────────────────────────────────────────────────── */
/* O melhor momento da página estava na composição mais fraca dela. Agora o
   "não é para" tem palco próprio: é a única superfície escura dentro de um ato
   claro, e é isso que faz a recusa soar como decisão em vez de ressalva. */
.recusa{display:grid;gap:clamp(18px,2.4vw,28px)}
@media (min-width:820px){
  .recusa{grid-template-columns:1fr 1fr;gap:clamp(24px,3.2vw,40px);align-items:stretch}
}
.recusa>div{padding:clamp(24px,3vw,40px);border-radius:var(--r);display:grid;
  align-content:start;gap:var(--bloco-1)}
.recusa-sim{background:var(--superf);border:1px solid var(--borda);box-shadow:var(--sombra-1)}
.recusa-nao{background:var(--rw-ink);border:1px solid var(--rw-rule);box-shadow:var(--sombra-2);
  border-top:3px solid var(--rw-signal)}
.recusa .k{margin:0}
.recusa-nao .k{color:var(--accent)}
.recusa .d-mid{max-width:26ch}

/* ── A RECUSA DENTRO DE ATO ESCURO ───────────────────────────────────────── */
/* Ela nasceu como a única superfície ESCURA dentro de um ato claro — era esse o
   recurso: dizer não tem palco próprio. Integrada ao mecanismo, que é escuro,
   o recurso deixou de existir e foi substituído por PROFUNDIDADE, que é o
   material que o sistema já tem para hierarquia dentro do escuro:
   o "sim" sobe para a superfície elevada, o "não" desce para a mais funda. */
.inv .recusa-sim{background:var(--rw-elev);border-color:var(--rw-rule);box-shadow:none}
.inv .recusa-nao{background:var(--rw-fundo);border-color:var(--rw-rule);
  border-top:3px solid var(--rw-signal);box-shadow:var(--sombra-2)}

/* o bloco "para quem", emendado ao diagrama por fio e não por seção nova */
.sep-quem{margin-top:var(--bloco-3);padding-top:var(--bloco-3);
  border-top:1px solid var(--rule)}
.sep-quem>.rot{display:block;margin-bottom:var(--bloco-2)}

/* as duas famílias do que vira sistema. Em mono como os rótulos, mas em caixa
   baixa e sem o entreletra largo do .k: elas são subtítulo do rótulo, não outro
   rótulo — três marcas em caixa alta empilhadas viram ruído. */
.sep-fam{font-family:var(--mono);font-size:var(--rot);letter-spacing:.03em;
  color:var(--fg-muted);margin:var(--bloco-1) 0 9px}

/* ── CTA · o clímax ──────────────────────────────────────────────────────── */
/* Era só mais uma seção navy no fim de um trecho de seções navy. Agora é a
   superfície mais funda da página (Ink Fundo), com um brilho de acento muito
   discreto atrás da manchete e a malha voltando — o mesmo material do hero,
   fechando o arco onde ele abriu. */
.faixa-cta{
  background:var(--rw-fundo);overflow:hidden;
  padding-top:clamp(76px,9vw,140px);padding-bottom:clamp(64px,7.6vw,112px);
}
.cta-fundo{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta-brilho{position:absolute;left:-8%;top:-30%;width:min(74vw,860px);height:min(74vw,860px);
  background:radial-gradient(circle,var(--brilho) 0%,rgba(232,85,44,.05) 34%,rgba(232,85,44,0) 68%)}
.cta-malha{position:absolute;inset:0;
  background-image:
    linear-gradient(to right,var(--malha) 1px,transparent 1px),
    linear-gradient(to bottom,var(--malha) 1px,transparent 1px);
  background-size:clamp(48px,5vw,72px) clamp(48px,5vw,72px);
  -webkit-mask-image:radial-gradient(90% 90% at 20% 12%,#000 0%,transparent 72%);
  mask-image:radial-gradient(90% 90% at 20% 12%,#000 0%,transparent 72%);
}
.faixa-cta h2.display{font-size:clamp(2.35rem,1.35rem + 3.90vw,4rem);max-width:17ch;
  letter-spacing:-.03em;line-height:1.03}
.cta-par{display:grid;gap:var(--bloco-3)}
@media (min-width:900px){
  .cta-par{grid-template-columns:1.5fr 1fr;gap:clamp(44px,6vw,96px);align-items:start}
  .cta-mapa{padding-left:clamp(32px,4vw,60px);border-left:1px solid var(--rule)}
}
.cta-arg>.fila{margin-top:var(--bloco-3)}
.cta-mapa .k{margin-bottom:var(--bloco-2)}
.mapa{list-style:none;counter-reset:m;margin:0;padding:0;display:grid;gap:0}
.mapa li{
  counter-increment:m;padding:var(--bloco-1) 0;border-top:1px solid var(--rule);
  font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 104;
  color:var(--fg);letter-spacing:-.014em;
  display:grid;grid-template-columns:2.4rem 1fr;gap:2px 0;
}
.mapa li:last-child{border-bottom:1px solid var(--rule)}
.mapa li::before{
  content:counter(m,decimal-leading-zero);grid-row:1/span 2;
  font-family:var(--mono);font-size:var(--rot);font-weight:500;letter-spacing:.09em;
  color:var(--accent);padding-top:.35em;font-variant-numeric:tabular-nums;
}
.mapa li span{
  font-family:var(--corpo);font-weight:400;font-size:var(--nota);
  letter-spacing:0;color:var(--fg-muted);line-height:1.45;
}

/* ── RODAPÉ · a mesma massa escura do CTA ────────────────────────────────── */
.rodape{background:var(--rw-fundo);padding:0 var(--gut) clamp(32px,4.4vw,52px);position:relative}
.rodape>.miolo{border-top:1px solid var(--rule);padding-top:clamp(40px,5vw,68px)}
.rodape-grade{display:grid;gap:var(--bloco-3)}
@media (min-width:820px){
  .rodape-grade{grid-template-columns:1fr 1.05fr;gap:clamp(40px,5vw,80px);align-items:start}
}
.rodape .assina{height:clamp(36px,5vw,52px);width:auto;color:var(--fg);display:block}
.rodape-marca .nota{margin-top:var(--bloco-2);max-width:34ch}
.contatos{list-style:none;margin:0;padding:0;display:grid;gap:0}
.contatos li+li{border-top:1px solid var(--rule)}
.contatos a{
  display:grid;grid-template-columns:7.5rem 1fr;align-items:center;gap:12px;
  min-height:56px;padding:8px 0;text-decoration:none;color:var(--fg-body);
  transition:color var(--t-2) var(--ease-io);
}
.c-k{font-family:var(--mono);font-size:var(--rot);letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-muted);transition:color var(--t-2) var(--ease-io)}
.c-v{position:relative;justify-self:start}
.c-v::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-2) var(--ease)}
.contatos a:hover{color:var(--fg)}
.contatos a:hover .c-k{color:var(--accent)}
.contatos a:hover .c-v::after{transform:scaleX(1)}
@media (max-width:479px){
  .contatos a{grid-template-columns:1fr;gap:2px;padding:12px 0}
}
.legal{margin-top:var(--bloco-3);padding-top:var(--bloco-1);border-top:1px solid var(--rule);
  font-size:var(--nota);color:var(--fg-muted);max-width:none}

/* ══ SISTEMA DE MOVIMENTO ═════════════════════════════════════════════════
   Cinco gestos, e nenhum deles é fade puro.

   · sobe    — máscara de recorte + 14px de translação. O bloco é revelado por
               baixo, não apagado por opacidade.
   · linhas  — a manchete entra linha a linha, cada uma saindo de trás de um
               overflow. É o gesto autoral da página, e por isso só roda em
               manchete.
   · barra   — largura. Usado onde a informação É uma quantidade.
   · sep     — o eixo do diagrama se desenha, os nós entram escalonados.
   · cadeia  — o trilho se desenha e os nós acendem atrás dele.

   Duas travas absolutas:
   1. O conteúdo é VISÍVEL por padrão. O estado de partida só é aplicado
      quando o JavaScript confirma que vai animar (classe .anima na raiz).
      Script quebrado, IntersectionObserver ausente, reduced-motion pedido:
      a página fica exatamente como ficaria sem nada disto.
   2. Só transform, opacity, clip-path e width entram. Nada que force layout. */

.anima [data-rev]{--rev-d:var(--atraso,0ms)}

/* sobe */
.anima [data-rev="sobe"]{
  opacity:0;transform:translate3d(0,14px,0);
  clip-path:inset(0 0 12% 0);
  transition:opacity .62s var(--ease) var(--rev-d),
             transform .72s var(--ease) var(--rev-d),
             clip-path .72s var(--ease) var(--rev-d);
  will-change:transform,opacity;
}
.anima [data-rev="sobe"].vis{opacity:1;transform:none;clip-path:inset(0 0 0 0);will-change:auto}

/* linhas · a manchete */
/* A âncora é o data-rev, não a tag. Prendendo estas regras a h2/h3 o h1 ficava
   de fora, as "linhas" voltavam a ser inline, o overflow:hidden não existia e
   o espaço aparado no fim de cada linha sumia na emenda entre elas — a
   manchete pintava "semcontratar". Quem recebe o gesto é quem o declara. */
[data-rev="linhas"] .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
[data-rev="linhas"] .ln>span{display:block}
.anima [data-rev="linhas"] .ln>span{
  transform:translate3d(0,105%,0);
  transition:transform .78s var(--ease);
  transition-delay:calc(var(--rev-d) + var(--i,0) * 70ms);
}
.anima [data-rev="linhas"].vis .ln>span{transform:none}

/* usada por um quadro quando as fontes assentam e as linhas são remedidas:
   sem isto a manchete já revelada animaria de novo, do zero. */
.sem-transicao,.sem-transicao *{transition:none!important;animation:none!important}

/* barra · a quantidade cresce da esquerda */
.anima [data-rev="barra"] .b-fill{transform:scaleX(0)}
.anima [data-rev="barra"].vis .b-fill{transform:scaleX(var(--pct-n))}

/* sep · o eixo e os nós */
.anima [data-rev="sep"] .eixo-fio{transform:scale3d(1,0,1);transform-origin:top center;
  transition:transform .9s var(--ease)}
.anima [data-rev="sep"].vis .eixo-fio{transform:none}
@media (max-width:859px){
  .anima [data-rev="sep"] .eixo-fio{transform:scale3d(0,1,1);transform-origin:left center}
}
.anima [data-rev="sep"] .sep-nos li{opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.anima [data-rev="sep"].vis .sep-nos li{opacity:1;transform:none;
  transition-delay:calc(180ms + var(--i,0) * 55ms)}
.anima [data-rev="sep"] .k,.anima [data-rev="sep"] .nota{opacity:0;transition:opacity .5s var(--ease)}
.anima [data-rev="sep"].vis .k,.anima [data-rev="sep"].vis .nota{opacity:1;transition-delay:120ms}

/* cadeia e turma · disparadas pelo .vis do painel que as contém */
.anima .cadeia-nos::before{transform:scaleY(0)}
.anima .vis .cadeia-nos::before{transform:none;transition-delay:150ms}
@media (min-width:600px) and (max-width:899px){
  .anima .vis .cadeia-nos::before{transform:none}
}
@media (min-width:1140px){
  .anima .vis .cadeia-nos::before{transform:none}
}
.anima .cadeia-nos li{opacity:0;transform:translate3d(0,8px,0);
  transition:opacity .45s var(--ease),transform .55s var(--ease)}
.anima .vis .cadeia-nos li{opacity:1;transform:none;
  transition-delay:calc(220ms + var(--i,0) * 70ms)}
.anima .turma-grade::after{clip-path:inset(0 100% 0 0)}
.anima .vis .turma-grade::after{clip-path:inset(0 62% 0 0);transition-delay:280ms}
.anima .turma-fases li{opacity:0;transform:translate3d(0,8px,0);
  transition:opacity .45s var(--ease),transform .55s var(--ease)}
.anima .vis .turma-fases li{opacity:1;transform:none;
  transition-delay:calc(320ms + var(--i,0) * 70ms)}

/* O FIO QUE SE DESENHA · o gesto original do sistema, preservado.
   Ele mora numa máscara pintada com a cor do fundo, que sai de cena por
   scaleX. O fio nunca deixa de existir: o que se move é o que o cobre. */
.anima .passos>li+li::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--bg);transform-origin:right center;transform:scaleX(1);
  pointer-events:none;
}
.anima .passos>li+li{position:relative}
.anima .passos>li+li.vis::after{
  transform:scaleX(0);
  transition:transform .68s var(--ease);
  transition-delay:var(--atraso,0ms);
}

/* ── MENOS MOVIMENTO ─────────────────────────────────────────────────────── */
/* Reduzir não é desligar: o que sai é o deslocamento espacial e a paralaxe.
   O que fica é a mudança de estado — hover, foco, a etapa ativa do método —
   porque ela carrega significado, não decoração. Os contadores param no
   número final, que é a informação; a contagem é que era o efeito. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anima [data-rev]{opacity:1!important;transform:none!important;clip-path:none!important}
  .anima [data-rev] :is(.ln>span,.sep-nos li,.cadeia-nos li,.turma-fases li,.eixo-fio){
    opacity:1!important;transform:none!important}
  /* Sob menos movimento o observador pode nem chegar a marcar .vis, então
     nenhum estado final pode depender dele. Tudo o que é informação — a faixa
     acesa da turma, a barra do dado, o trilho da cadeia, a etapa do método —
     é declarado direto. */
  .turma-grade::after{clip-path:inset(0 62% 0 0)!important;transition:none!important}
  .b-fill{transform:scaleX(var(--pct-n))!important;transition:none!important}
  .cadeia-nos::before{transform:none!important;transition:none!important}
  .anima .passos>li+li::after{display:none}
  .anima .metodo .passos>li:not(.ativo)::before{
    color:var(--accent);border-color:var(--accent);background:var(--tint)}
  .anima .metodo .passos>li:not(.ativo) h3{color:var(--fg)}
  .btn,.btn::before,.frente,.retrato,.nav,.nav-caixa{transition-duration:.01ms!important}
  .btn:hover,.frente:hover{transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ── IMPRESSÃO ───────────────────────────────────────────────────────────── */
@media print{
  .nav,.btn,.pular,.assina,.hero-fundo,.cta-fundo,.turma-grade,.sep-eixo{display:none}
  .inv,.inv::before{background:#fff!important;color:#000}
  .inv{--fg:#000;--fg-body:#222;--fg-muted:#555;--accent:#B03A18;--rule:#ccc;
    --superf:#fff;--bg:#fff;--bg-elev:#fff;--borda:#ccc;--tint:transparent}
  .faixa{padding:24px 0}
  .frente,.painel,.recusa>div{box-shadow:none;border:1px solid #ccc}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}