/* ==========================================================================
   weby.app — "Luz brutalista-suave com tipografia cinética"
   Direção de arte: papel quente, blocos sólidos saturados, tipografia
   monumental que vaza da grade, sombras deslocadas sólidas, traços grossos.
   Zero dependência externa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0a. LETRA PRÓPRIA — auto-hospedada, licença aberta, zero rede

   A dobra é a assinatura do estúdio; alugar a letra do sistema operacional
   do visitante fazia dela três peças diferentes (Segoe UI no Windows, SF Pro
   no macOS, Roboto no Android; Palatino / Iowan / Noto Serif na serifada).
   Agora as faces viajam com o site, em ../fonts/, e são as mesmas em
   qualquer máquina — inclusive sem internet, porque o src é relativo e
   resolve por file://.

   Arquivos (subconjunto latino, só os cortes usados; licença SIL OFL-1.1,
   texto integral ao lado de cada arquivo):
     archivo-latin-wdth-normal.woff2        88,0 KB  Archivo Variable (wght 100-900 + wdth 62-125)
     archivo-latin-wght-italic.woff2        38,2 KB  Archivo Variable Itálico (wght 100-900)
     playfair-display-latin-400-italic.woff2 21,4 KB Playfair Display Itálico 400
     jetbrains-mono-latin-700-normal.woff2  21,4 KB  JetBrains Mono 700
   Total de fontes: 169,0 KB (+ 13,3 KB dos três OFL.txt).

   Origem verificada: @fontsource-variable/archivo 5.3.0, @fontsource/
   playfair-display 5.3.0 e @fontsource/jetbrains-mono 5.3.0 (npm, todas
   OFL-1.1); os .woff2 são os arquivos publicados, copiados sem reprocessar.

   Papéis, na direção de arte já aprovada:
     · Archivo   — grotesco de haste pesada e eixo condensável: manchetes
                   (wdth 90%, §4) e texto corrido (wdth 100%).
     · Playfair  — serifada de contraste alto com ITÁLICO DESENHADO (não
                   inclinado por software): a assinatura ("enquanto", "e
                   não", "zero", "só", "depende").
     · JetBrains — mono dos rótulos e sobrancelhas.

   Calibragem (canvas.measureText a 100px, Chromium): as três famílias
   entram com o mesmo avanço e a mesma caixa de linha da face contra a qual
   a peça foi composta, para que a composição aprovada não se mexa:
     Archivo 900 caixa-alta a wdth 90% = 1698,11 px  · Segoe UI Black 1692,53 px (+0,33%)
     Archivo 400 texto a wdth 100%     = 3655,45 px  · Segoe UI 3674,32 px (-0,51%)
     Playfair itálico com size-adjust 93,3% = Palatino Linotype itálico
     JetBrains 700 com size-adjust 97,66%   = Cascadia Mono 700
   As alturas de caixa vêm por ascent/descent-override, idênticas às da §0b.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Weby Grotesk";
  src: url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  ascent-override: 108%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Weby Grotesk";
  src: url('../fonts/archivo-latin-wght-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
  ascent-override: 108%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Weby Serif";
  src: url('../fonts/playfair-display-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  size-adjust: 93.3%;
  ascent-override: 105%;
  descent-override: 30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Weby Mono";
  src: url('../fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 97.66%;
  ascent-override: 93%;
  descent-override: 23%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   0b. Rede de segurança: normalização métrica das faces locais
   Se o woff2 da §0a não carregar (arquivo movido, transferência parcial), a
   pilha cai para as faces que JÁ existem na máquina. Redistribuir Segoe UI
   ou SF Pro violaria licença, então cada família local ganha um apelido
   próprio via @font-face + local(), com size-adjust calibrado para
   reproduzir a largura de avanço da face de referência, e ascent/
   descent-override para igualar a caixa de linha — sem isso, com Arial,
   Liberation, Verdana ou DejaVu no lugar dela a mesma linha de 144px ficava
   até 12,7% mais larga, o h1 quebrava em uma linha a mais e os dois CTAs
   saíam da dobra.

   Medido com canvas.measureText a 100px (Chromium 1440x900), amostra
   "SITES QUE VENDEM ENQUANTO VOCÊ DORME." em 900 e um parágrafo do herói em
   400. Referência = Segoe UI como o Windows a renderiza hoje (2303,564 px
   em 900 / 5974,365 px em 400; ascent 108%, descent 25%, gap 0):

     face                | 900      | size-adjust | 400      | size-adjust
     Arial Bold/Regular  | 2326,221 | 99,03%      | 6024,023 | 99,18%
     Liberation Sans     | 2326,221 | 99,03%      | 6024,023 | 99,18%   (métrica idêntica à Arial)
     Helvetica           | = Arial (métrica compatível por projeto; no Windows o DirectWrite já substitui)
     Verdana             | 2596,191 | 88,73%      | 6854,834 | 87,16%
     DejaVu Sans         | 2589,209 | 88,97%      | 6826,270 | 87,52%

   Segoe UI e SF Pro NÃO entram na normalização: entram logo depois da letra
   própria e são renderizadas como sempre foram, para que a queda seja suave.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Weby Helvetica";
  src: local("Helvetica"), local("Helvetica Neue"), local("Nimbus Sans");
  font-weight: 1 550;
  font-style: normal;
  size-adjust: 99.18%;
  ascent-override: 108%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Weby Helvetica";
  src: local("Helvetica Bold"), local("Helvetica Neue Bold"), local("Nimbus Sans Bold");
  font-weight: 551 1000;
  font-style: normal;
  size-adjust: 99.03%;
  ascent-override: 108%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Weby Arial";
  src: local("Arial");
  font-weight: 1 550;
  font-style: normal;
  size-adjust: 99.18%;
  ascent-override: 108%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Weby Arial";
  src: local("Arial Bold");
  font-weight: 551 1000;
  font-style: normal;
  size-adjust: 99.03%;
  ascent-override: 108%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Weby Liberation";
  src: local("Liberation Sans");
  font-weight: 1 550;
  font-style: normal;
  size-adjust: 99.18%;
  ascent-override: 108%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Weby Liberation";
  src: local("Liberation Sans Bold");
  font-weight: 551 1000;
  font-style: normal;
  size-adjust: 99.03%;
  ascent-override: 108%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Weby DejaVu";
  src: local("DejaVu Sans");
  font-weight: 1 550;
  font-style: normal;
  size-adjust: 87.52%;
  ascent-override: 108%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Weby DejaVu";
  src: local("DejaVu Sans Bold");
  font-weight: 551 1000;
  font-style: normal;
  size-adjust: 88.97%;
  ascent-override: 108%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Weby Verdana";
  src: local("Verdana");
  font-weight: 1 550;
  font-style: normal;
  size-adjust: 87.16%;
  ascent-override: 108%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Weby Verdana";
  src: local("Verdana Bold");
  font-weight: 551 1000;
  font-style: normal;
  size-adjust: 88.73%;
  ascent-override: 108%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --paper:    #F4EFE6;
  --paper-2:  #EDE6D9;
  --paper-3:  #E2D9C8;
  --ink:      #141210;
  --ink-soft: #2B2620;
  --muted:    #5B5348;

  /* PAPEL DO PAINEL DE DETALHE — no claro é o mesmo papel da página: pôster
     preto sobre creme, 16,3:1, e é daí que vem o efeito de abertura de
     revista. No escuro o papel da página (#0F0D0B) e o fundo do pôster
     (#141210) eram praticamente a mesma tinta (1,07:1): o pôster deixava de
     ser objeto e virava um buraco separado por fios de 1px. Por isso o
     painel escuro tem superfície PRÓPRIA, mais alta que a página, e o
     pôster ganha moldura sólida em cima e embaixo. */
  --sheet-paper:   #F4EFE6;
  --sheet-paper-2: #EDE6D9;
  --poster-frame:  transparent;

  --red:   #FF4A1C;
  --lime:  #D8F14B;
  --blue:  #2B32E8;
  --plum:  #6E2BE8;

  /* --red vive de bloco de cor (fundo). Como TEXTO ou ícone pequeno sobre
     papel ele dá 2,93:1, então existe um segundo token, mais escuro, usado
     só onde o laranja vira tinta. Os blocos continuam com --red. */
  --red-ink: #BC3409;

  --on-red:  #141210;
  --on-lime: #141210;
  --on-blue: #FFFDF7;

  /* Superfície invertida SEMPRE ESCURA (menu em tela cheia, etiqueta sobre a
     miniatura de case — que é arte de paleta clara fixa). Não acompanha o
     tema porque o que está por baixo dela também não acompanha. */
  --inv-paper:   #141210;
  --inv-paper-2: #201B16;
  --inv-ink:     #F4EFE6;
  --inv-muted:   rgba(244, 239, 230, .72);
  --inv-line-soft: rgba(244, 239, 230, .22);

  /* LAJE — as duas batidas fortes do scroll (#processo e o rodapé), mais o
     plano em destaque, o cartão 04 de serviços e a coluna "weby.app" do
     comparativo. No tema claro é laje PRETA sobre papel creme (16,3:1).
     No tema escuro a lógica inverte: vira laje CREME sobre fundo escuro,
     devolvendo o mesmo salto de figura/fundo em vez de sumir a 1,07:1. */
  --slab-paper:     #141210;
  --slab-paper-2:   #201B16;
  --slab-ink:       #F4EFE6;
  --slab-muted:     rgba(244, 239, 230, .72);
  --slab-line-soft: rgba(244, 239, 230, .22);
  --slab-acc:       var(--lime);   /* destaque legível sobre a laje */
  --slab-focus:     var(--lime);
  --slab-red-ink:   var(--red);
  --slab-danger:    #FF9E86;
  --slab-badge-bg:  var(--lime);
  --slab-badge-fg:  var(--on-lime);
  --slab-btn-bd:    var(--lime);
  --slab-tint:      rgba(216, 241, 75, .12);

  /* chaves de tema resolvidas por token (e não por seletor [data-theme]),
     para que o fallback sem JS de prefers-color-scheme precise redeclarar
     apenas esta lista — §1c */
  --grain-blend: multiply;
  --grain-op: .5;
  --mq-b-bg: var(--ink);
  --mq-b-fg: var(--paper);
  --blob-lime-bg: var(--lime);
  --blob-lime-bd: 0 solid transparent;
  /* lime das faixas grandes (bloco de CTA): no claro é o lime da marca */
  --lime-block: var(--lime);
  /* tinta secundária DENTRO do bloco azul (§18). Sobre o azul do tema claro
     (#2B32E8) o creme a 90% mede 5,9:1 e a hierarquia tinta/tinta-fraca é
     visível; sobre o azul mais claro do tema escuro (#4A50FF) o mesmo 90%
     desabava para 4,2:1 medido em pixel. Por isso é token, e no escuro vale
     creme cheio. */
  --blue-muted: rgba(255, 253, 247, .9);
  --i-sun: block;
  --i-moon: none;

  /* vermelho de erro: também é token, para reagir ao tema como o resto */
  --danger: #C21807;
  --danger-bg: rgba(194, 24, 7, .07);

  --line: var(--ink);
  --line-soft: rgba(20, 18, 16, .16);
  --line-w: 2px;
  --shadow-c: #141210;
  --hair: rgba(20, 18, 16, .07);
  --focus: #2B32E8;
  --sel-bg: #141210;
  --sel-fg: #F4EFE6;
  /* sombra sólida medida SEMPRE contra a página, nunca contra a cor do
     cartão: um cartão azul com sombra creme sobre papel creme não tem
     sombra nenhuma */
  --page-shadow: #141210;

  --radius: 0px;
  --radius-lg: 0px;

  /* A letra PRÓPRIA (§0a) vem primeiro em todas as pilhas: é ela que
     desenha a peça, igual no Windows, no macOS e no Android. Atrás dela
     ficam as faces do sistema (§0b) como rede — Segoe UI e SF Pro direto,
     depois os apelidos normalizados, depois a cauda crua. */
  --font-display: "Weby Grotesk", "Segoe UI", "SF Pro Display", -apple-system,
                  BlinkMacSystemFont, "Weby Helvetica", "Weby Arial",
                  "Weby Liberation", "Weby DejaVu", "Weby Verdana",
                  "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-text: "Weby Grotesk", "Segoe UI", -apple-system, BlinkMacSystemFont,
               "Weby Helvetica", "Weby Arial", "Weby Liberation", "Weby DejaVu",
               "Weby Verdana", "Helvetica Neue", Helvetica, Arial,
               "Liberation Sans", sans-serif;
  --font-serif: "Weby Serif", "Iowan Old Style", "Palatino Linotype", Palatino,
                "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-mono: "Weby Mono", "Cascadia Mono", "Cascadia Code", ui-monospace,
               "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --pad-x: clamp(20px, 4.4vw, 60px);
  --sec-y: clamp(76px, 9vw, 148px);
  --maxw: 1380px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.62, .05, .3, 1);
}

/* Um único bloco descreve o tema escuro. Ele é aplicado por atributo (com JS)
   e repetido literalmente em §1c para quem chega sem JS — por isso tudo que
   muda entre temas mora aqui dentro, como token, e não em seletores soltos. */
[data-theme="dark"] {
  color-scheme: dark;

  --paper:    #0F0D0B;
  --paper-2:  #1E1A15;
  --paper-3:  #2A241C;
  --ink:      #F6F1E7;
  --ink-soft: #DCD4C6;
  --muted:    #A79E90;

  /* superficie propria do painel de detalhe (ver §1): pouco mais alta que
     o papel da pagina, o bastante para o poster preto voltar a ser objeto
     sobre ela sem derrubar o laranja dos rotulos abaixo de 4,5:1 */
  --sheet-paper:   #2E2720;
  --sheet-paper-2: #241F19;
  --poster-frame:  var(--ink);

  --red:   #FF5B2E;
  --lime:  #D8F14B;
  --blue:  #4A50FF;

  /* no escuro o laranja claro já dá 6,2:1 sobre o papel: a tinta é a própria cor */
  --red-ink: var(--red);

  --inv-paper:   #141210;
  --inv-paper-2: #201B16;
  --inv-ink:     #F6F1E7;
  --inv-muted:   rgba(246, 241, 231, .74);
  --inv-line-soft: rgba(246, 241, 231, .24);

  /* Laje invertida: papel de OSSO sobre o fundo escuro.
     O creme #F4EFE6 (L=0,89) somava 2.902px de faixa full-bleed clara no
     tema escuro — 15% da página. Aqui o papel da laje desce para L=0,72:
     a inversão continua sendo a mesma batida de figura/fundo, sem o clarão.
     O acento acompanha a queda para não perder os 4,5:1 sobre o osso. */
  --slab-paper:     #E5DCCB;
  --slab-paper-2:   #DBD1BD;
  --slab-ink:       #141210;
  /* tinta fraca sobre a laje de OSSO. Era #554E43 (5,94:1 declarado), mas o
     grão do tema escuro é `screen` e clareia a tinta mais do que o papel: o
     rótulo "PRAZO TOTAL, DO BRIEFING AO AR" media 4,38:1 em pixel, abaixo do
     piso. Mesmo tom, um degrau mais fundo — 7,8:1 declarado, 5,7:1 medido. */
  --slab-muted:     #453E34;
  --slab-line-soft: rgba(20, 18, 16, .2);
  /* acento e tinta-vermelha da laje de osso. #A62D07 declarava 5,19:1, mas o
     grão `screen` do tema escuro clareia mais a tinta que o papel e o rótulo
     "PRAZO TOTAL, DO BRIEFING AO AR" media 4,51:1 em pixel. Mesmo vermelho,
     um degrau mais fundo: 6,47:1 declarado. */
  --slab-acc:       #8C2506;
  --slab-focus:     #2B32E8;
  --slab-red-ink:   #8C2506;
  --slab-danger:    #A81104;
  --slab-badge-bg:  #141210;
  --slab-badge-fg:  #E5DCCB;
  --slab-btn-bd:    #141210;
  --slab-tint:      rgba(43, 50, 232, .1);

  --danger: #FF7A5E;
  --danger-bg: rgba(255, 122, 94, .1);

  --line: #F6F1E7;
  --line-soft: rgba(246, 241, 231, .18);
  --shadow-c: #F6F1E7;
  --hair: rgba(246, 241, 231, .1);
  --focus: #D8F14B;
  --sel-bg: #D8F14B;
  --sel-fg: #141210;
  --page-shadow: #F6F1E7;

  --grain-blend: screen;
  --grain-op: .3;
  --mq-b-bg: var(--blue);
  --mq-b-fg: var(--on-blue);
  /* Disco do herói: LIME PLENO DA MARCA, o mesmo #D8F14B do círculo dentro
     do mockup 300px abaixo e das faixas cinéticas. O oliva #677808 existia
     só porque o "enquanto" creme atravessava o disco e o lime cheio ficaria
     abaixo do piso de 3:1; agora o disco não cruza texto nenhum em nenhuma
     largura (§8, .blob--lime), então a restrição caiu junto. */
  --blob-lime-bg: var(--lime);
  --blob-lime-bd: 0 solid transparent;
  /* bloco lime do CTA final: o lime pleno full-bleed é clarão demais no
     escuro (L=0,78 em 780px de faixa). Mesmo matiz, claridade 50%: o gesto
     continua, o clarão não. Tinta preta sobre ele dá 10,7:1. */
  --lime-block: #B9CE2E;
  /* creme CHEIO: o azul do escuro é 30% mais claro que o do tema claro e a
     transparência de 10% custava o piso de 4,5:1 (§18) */
  --blue-muted: #FFFDF7;
  --i-sun: none;
  --i-moon: block;
}

/* --------------------------------------------------------------------------
   1b. Superfícies invertidas
   Um único lugar decide quem é papel e quem é tinta dentro de cada bloco.
   Todo descendente continua lendo var(--ink)/var(--paper) e por isso reage
   ao tema sem remendo por seletor.
   -------------------------------------------------------------------------- */
/* O menu em tela cheia entrou nesta lista (e saiu da lista SEMPRE ESCURA
   logo abaixo): ele cobre a página inteira, então tem de inverter junto com
   ela. Era o único bloco do site que desenhava rgb(20,18,16) nos dois temas
   — no claro isso é a inversão que se quer; no escuro era o mesmo tom do
   fundo, e o "abrir o menu" deixava de ser um gesto. Agora é laje preta
   sobre papel creme no tema claro e laje de osso no tema escuro, a mesma
   lógica do rodapé e do bloco de processo. */
.block-dark,
.plan--hot,
.foot,
.menu,
.cmp__c--us,
.svc--slab,
.post--slab {
  --paper:     var(--slab-paper);
  --paper-2:   var(--slab-paper-2);
  --paper-3:   var(--slab-paper-2);
  --ink:       var(--slab-ink);
  --muted:     var(--slab-muted);
  --line:      var(--slab-ink);
  --line-soft: var(--slab-line-soft);
  --shadow-c:  var(--slab-ink);
  --red-ink:   var(--slab-red-ink);
  --danger:    var(--slab-danger);
  --focus:     var(--slab-focus);
  background: var(--paper);
  color: var(--ink);
}

/* SEMPRE ESCURAS de propósito: as etiquetas ficam sobre a miniatura do
   case/artigo, que é arte de paleta fixa e clara nos dois temas. */
.work__cat,
.post__cat {
  --paper:     var(--inv-paper);
  --paper-2:   var(--inv-paper-2);
  --paper-3:   var(--inv-paper-2);
  --ink:       var(--inv-ink);
  --muted:     var(--inv-muted);
  --line:      var(--inv-ink);
  --line-soft: var(--inv-line-soft);
  --shadow-c:  var(--inv-ink);
  --red-ink:   var(--red);
  --danger:    #FF9E86;
  --focus:     var(--lime);
  background: var(--paper);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   1c. Sem JavaScript: respeita o tema escuro do sistema
   O bootstrap do <head> só escreve data-theme quando há JS. Sem JS o
   atributo fica em "light", então o tema do sistema precisa entrar por
   media query. A lista abaixo é a cópia literal do bloco [data-theme="dark"].
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  html:not(.is-js) {
    color-scheme: dark;

    --paper:    #0F0D0B;
    --paper-2:  #1E1A15;
    --paper-3:  #2A241C;
    --ink:      #F6F1E7;
    --ink-soft: #DCD4C6;
    --muted:    #A79E90;

    --sheet-paper:   #2E2720;
    --sheet-paper-2: #241F19;
    --poster-frame:  var(--ink);

    --red:   #FF5B2E;
    --lime:  #D8F14B;
    --blue:  #4A50FF;
    --red-ink: var(--red);

    --inv-paper:   #141210;
    --inv-paper-2: #201B16;
    --inv-ink:     #F6F1E7;
    --inv-muted:   rgba(246, 241, 231, .74);
    --inv-line-soft: rgba(246, 241, 231, .24);

    --slab-paper:     #E5DCCB;
    --slab-paper-2:   #DBD1BD;
    --slab-ink:       #141210;
    /* tinta fraca sobre a laje de OSSO. Era #554E43 (5,94:1 declarado), mas o
     grão do tema escuro é `screen` e clareia a tinta mais do que o papel: o
     rótulo "PRAZO TOTAL, DO BRIEFING AO AR" media 4,38:1 em pixel, abaixo do
     piso. Mesmo tom, um degrau mais fundo — 7,8:1 declarado, 5,7:1 medido. */
  --slab-muted:     #453E34;
    --slab-line-soft: rgba(20, 18, 16, .2);
    --slab-acc:       #8C2506;
    --slab-focus:     #2B32E8;
    --slab-red-ink:   #8C2506;
    --slab-danger:    #A81104;
    --slab-badge-bg:  #141210;
    --slab-badge-fg:  #E5DCCB;
    --slab-btn-bd:    #141210;
    --slab-tint:      rgba(43, 50, 232, .1);

    --danger: #FF7A5E;
    --danger-bg: rgba(255, 122, 94, .1);

    --line: #F6F1E7;
    --line-soft: rgba(246, 241, 231, .18);
    --shadow-c: #F6F1E7;
    --hair: rgba(246, 241, 231, .1);
    --focus: #D8F14B;
    --sel-bg: #D8F14B;
    --sel-fg: #141210;
    --page-shadow: #F6F1E7;

    --grain-blend: screen;
    --grain-op: .3;
    --mq-b-bg: var(--blue);
    --mq-b-fg: var(--on-blue);
    --blob-lime-bg: var(--lime);
    --blob-lime-bd: 0 solid transparent;
    --lime-block: #B9CE2E;
    --blue-muted: #FFFDF7;
    --i-sun: none;
    --i-moon: block;
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  /* a rolagem suave é feita no JS (âncoras), para não afetar
     rolagens programáticas nem a captura de tela */
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ink) var(--paper-2);
}

/* Trava de rolagem do menu.
   body{overflow:hidden} não funciona aqui: como o <html> tem overflow-x:clip
   (≠ visible), o overflow do body deixa de ser propagado ao viewport e o
   fundo continua rolando. Então o bloqueio é aplicado no próprio <html> E o
   body vira fixed com o scrollY guardado em --lock-y (restaurado no JS). */
html.is-locked {
  overflow: hidden;
  overscroll-behavior: none;
}
html.is-locked body {
  position: fixed;
  top: calc(var(--lock-y, 0px) * -1);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: clamp(1rem, .95rem + .22vw, 1.125rem);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}

img, svg { display: block; max-width: 100%; }
svg { height: auto; }

h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--sel-bg); color: var(--sel-fg); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   3. Utilitários de layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { position: relative; padding-block: var(--sec-y); overflow: clip; }

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 22px;
  font: 700 .78rem/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  border: var(--line-w) solid var(--line);
  transition: top .25s var(--ease);
}
.skip:focus { top: 12px; }

/* Âncoras: o cabeçalho é fixo (sticky), então todo destino de link interno
   precisa da própria folga — senão o skip link entrega o começo do conteúdo
   40px DEBAIXO da barra. O caminho com JS compensa na conta da rolagem; esta
   linha resolve a classe inteira também sem JS, incluindo o retorno pelo
   histórico e o :target dos painéis. */
main[id],
section[id],
article[id],
dialog[id],
h2[id],
h3[id],
#top { scroll-margin-top: calc(clamp(64px, 6.4vw, 78px) + 14px); }

/* WCAG 2.2 — 2.4.11 Foco não obscurecido.
   A regra acima só cobre âncoras. Quem anda de Tab também é levado pelo
   navegador até o elemento, e a rolagem sequencial respeita scroll-margin:
   sem esta folga o Tab parava em campos 100% cobertos pela barra fixa (o
   caso do formulário e da 1ª pergunta do FAQ) e a pessoa digitava às
   cegas. A folga vale para TUDO que recebe foco. */
a[href],
area[href],
button,
input,
select,
textarea,
summary,
details,
[tabindex],
[contenteditable] {
  scroll-margin-top: calc(clamp(64px, 6.4vw, 78px) + 24px);
  scroll-margin-bottom: 26px;
}
/* Rádios e caixas de marcação são caixas de 1x1 escondidas sob o rótulo
   desenhado: a folga precisa caber o rótulo inteiro, senão o foco visível
   (que é o rótulo) nasce debaixo da barra mesmo com o input livre. */
.radios input,
.check input {
  scroll-margin-top: calc(clamp(64px, 6.4vw, 78px) + 78px);
  scroll-margin-bottom: 78px;
}

/* Glifos que NÃO existem nos subsets vendorizados (→ U+2192, ✳ U+2733,
   − U+2212) viravam tofu ou fonte do sistema em máquina sem Segoe/Cascadia:
   agora são desenho inline, com o mesmo peso ótico do texto ao redor.
   Provado com CSS.getPlatformFontsForNode: 0 glifo de fonte do sistema. */
.g-arw, .g-ast {
  display: inline-block;
  width: .78em;
  height: .78em;
  vertical-align: -.08em;
  color: currentColor;
  flex: 0 0 auto;
}
.g-ast { width: .74em; height: .74em; vertical-align: -.1em; }

.sr-only {
  position: absolute !important;
  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;
}

/* Paleta aplicada dentro dos SVG desenhados à mão */
.f-paper  { fill: var(--paper); }
.f-paper2 { fill: var(--paper-2); }
.f-paper3 { fill: var(--paper-3); }
.f-ink    { fill: var(--ink); }
.f-red    { fill: var(--red); }
.f-lime   { fill: var(--lime); }
.f-blue   { fill: var(--blue); }
.s-paper  { stroke: var(--paper); }
.s-ink    { stroke: var(--ink); }
.s-red    { stroke: var(--red); }
.s-lime   { stroke: var(--lime); }

/* forma escura desenhada POR CIMA de um disco lime: precisa da tinta que
   funciona sobre lime nos dois temas, não da tinta do tema */
.f-ink-x { fill: var(--on-lime); }

/* As miniaturas dos cases, dos artigos e a ilustração do estúdio são obras
   fechadas: não invertem com o tema (senão formas escuras sobre lime/vermelho
   perdem contraste, e a mesma cabeça de personagem seria preta numa faixa e
   creme na outra, 200px abaixo, na mesma tela). */
.work__media svg,
.post__media svg,
.sheet__poster svg,
.stack-fig svg,
.studio-view {
  --paper: #F4EFE6;
  --paper-2: #EDE6D9;
  --paper-3: #E2D9C8;
  --ink: #141210;
  --red: #FF4A1C;
  --lime: #D8F14B;
  --blue: #2B32E8;
  --red-ink: #BC3409;
  /* LARANJA QUE SOBREVIVE AO AZUL. O #FF4A1C da marca mede 2,29:1 sobre o
     #2B32E8 do cartaz — abaixo dos 3:1 que a WCAG 1.4.11 exige de objeto
     gráfico necessário para entender o conteúdo (a 4ª faixa do pôster de
     preços é uma das quatro barras da régua: sem ela a leitura "acima de
     R$ 80 mil" não existe). Mesma família, claridade levantada até 3,55:1
     sobre o azul, e 8,6:1 sobre a tinta. É o irmão de --red-ink, que existe
     pelo motivo simétrico: o vermelho da marca também não serve de tinta
     sobre papel. As outras três barras já passavam (papel 6,73; lime 6,09). */
  --red-on-blue: #FF9550;
}
.f-redink { fill: var(--red-ink); }
.f-red-onblue { fill: var(--red-on-blue); }

/* Tipografia dentro dos pôsteres de case: os cases são o portfólio de um
   estúdio, então o pôster é a miniatura de um site de verdade — título com
   letra, navegação, preço, formulário — e não barra cinza fazendo as vezes
   de texto. Paleta fixa acima, contraste conferido peça a peça. */
.work__media svg text,
.post__media svg text,
.stack-fig svg text,
.sheet__poster svg text { font-family: var(--font-display); font-weight: 700; letter-spacing: -.008em; }
.work__media svg text.tw,
.post__media svg text.tw,
.stack-fig svg text.tw,
.sheet__poster svg text.tw { font-weight: 900; letter-spacing: -.028em; }
.work__media svg text.tm,
.post__media svg text.tm,
.stack-fig svg text.tm,
.sheet__poster svg text.tm { font-family: var(--font-mono); font-weight: 700; letter-spacing: .07em; }

/* Tipografia dentro dos wordmarks de clientes */
.logo svg text {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.6px;
  fill: currentColor;
}

/* Grão de papel */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: var(--grain-op);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. Tipografia
   -------------------------------------------------------------------------- */
/* CAIXA-ALTA MONUMENTAL — o eixo de largura da Archivo (wdth) entra aqui, a
   90%: é o que devolve, letra por letra, o avanço com que a peça foi
   composta (1698,11 px contra 1692,53 px da face de referência, +0,33% na
   linha inteira do herói) e o que dá à manchete o corte condensado de
   cartaz. Só nas quatro classes monumentais em caixa-alta: no texto e nos
   botões a largura natural (100%) já bate com a referência (-0,51%). */
.d1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 90%;
  font-size: clamp(3.1rem, 10.2vw, 9rem);
  line-height: .84;
  letter-spacing: -.05em;
  text-transform: uppercase;
  margin: 0;
}
.d2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 90%;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  line-height: .88;
  letter-spacing: -.042em;
  text-transform: uppercase;
}
.d3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
  line-height: .98;
  letter-spacing: -.03em;
}
.h-card {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.18rem, 1.5vw, 1.45rem);
  line-height: 1.06;
  letter-spacing: -.025em;
}
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: -.02em;
}
.mono {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.lede {
  font-size: clamp(1.06rem, 1.02rem + .42vw, 1.35rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
  letter-spacing: -.014em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .705rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow b {
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  padding: 4px 7px 3px;
  letter-spacing: .1em;
}
.u-red { color: var(--red-ink); }
.u-blue { color: var(--blue); }

/* Cabeçalho de seção */
.sec-head { position: relative; z-index: 2; }
.sec-head .eyebrow { margin-bottom: clamp(18px, 2vw, 26px); }
/* A legenda numerada divide a faixa do alto da seção com a palavra-fantasma.
   A placa é da cor do próprio fundo da seção (--sec-bg cai em --paper, que os
   blocos vermelho/lime/azul já redefinem para a cor do bloco): invisível como
   cor, e é ela que garante que nenhum traço do contorno cruze a linha de mono
   — medido por diff de pixels contra a faixa de glifos, 0 cruzamento em
   390/768/1440/1920 × 2 temas. */
.sec-head .eyebrow,
.doc-hero > .wrap > .eyebrow,
.eyebrow--knock { background: var(--sec-bg, var(--paper)); padding-right: .8em; }
/* a legenda do CTA é centrada: placa simétrica para não sair do eixo */
.cta-final .eyebrow--knock { padding-inline: .8em; }
.sec-head .d2 { margin-bottom: 22px; }
.sec-head .lede { max-width: 52ch; }
.sec-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
}
@media (max-width: 860px) { .sec-head--split { grid-template-columns: minmax(0, 1fr); } }

/* Palavra fantasma que vaza da margem */
.bleed-word {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 90%;
  text-transform: uppercase;
  font-size: clamp(7rem, 21vw, 20rem);
  line-height: .74;
  letter-spacing: -.055em;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--line-soft);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Botões e chips
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--line-w) solid var(--line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: -.01em;
  line-height: 1;
  text-align: center;
  box-shadow: 5px 5px 0 var(--shadow-c);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--shadow-c); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow-c); }
/* A seta é 18px (19px nos --lg) e a linha de texto tem 15,2px: sem a margem
   negativa o ícone é quem define a altura da caixa e o botão COM seta ficava
   56px contra 53,2px do botão sem seta, na mesma linha de preços. A margem
   tira o ícone da conta da altura sem reduzir o desenho. */
.btn .arw { transition: transform .3s var(--ease); margin-block: -2px; }
.btn:hover .arw { transform: translateX(4px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); }
.btn--red { --btn-bg: var(--red); --btn-fg: var(--on-red); }
.btn--lime { --btn-bg: var(--lime); --btn-fg: var(--on-lime); }
.btn--paper { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--lg { padding: 21px 34px; font-size: 1.06rem; }
.btn--block { width: 100%; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 6px;
  border: 1.5px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
}

.tag-sticker {
  display: inline-block;
  background: var(--lime);
  color: var(--on-lime);
  border: var(--line-w) solid var(--on-lime);
  padding: 8px 14px 7px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  box-shadow: 4px 4px 0 var(--on-lime);
}

/* --------------------------------------------------------------------------
   6. Cursor customizado
   -------------------------------------------------------------------------- */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  /* display:contents — um wrapper posicionado criaria contexto de
     empilhamento e anularia o mix-blend-mode dos filhos.
     O creme #F4EFE6 do anel/ponto é constante de propósito: com
     mix-blend-mode:difference ele é o operando da inversão, não uma cor
     de tema — trocar por var(--paper) apagaria o cursor no tema escuro. */
  .is-js .cursor { display: contents; }
  .is-js .cursor__ring {
    position: fixed;
    z-index: 200;
    pointer-events: none;
    left: 0; top: 0;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border: 2px solid #F4EFE6;
    border-radius: 50%;
    mix-blend-mode: difference;
    display: grid;
    place-items: center;
    transition: width .3s var(--ease), height .3s var(--ease),
                margin .3s var(--ease), border-radius .3s var(--ease),
                background-color .3s var(--ease), opacity .25s linear;
  }
  .is-js .cursor__dot {
    position: fixed;
    z-index: 201;
    pointer-events: none;
    left: 0; top: 0;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: #F4EFE6;
    border-radius: 50%;
    mix-blend-mode: difference;
    transition: opacity .2s linear, transform .3s var(--ease);
  }
  .is-js .cursor__label {
    font-family: var(--font-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-lime);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .2s linear, transform .3s var(--ease);
    white-space: nowrap;
  }
  .is-js .cursor.is-link .cursor__ring {
    width: 68px; height: 68px; margin: -34px 0 0 -34px;
    background: #F4EFE6;
  }
  .is-js .cursor.is-link .cursor__dot { opacity: 0; }
  .is-js .cursor.is-label .cursor__ring {
    width: 104px; height: 104px; margin: -52px 0 0 -52px;
    background: var(--lime);
    border-color: var(--on-lime);
    mix-blend-mode: normal;
  }
  .is-js .cursor.is-label .cursor__label { opacity: 1; transform: scale(1); }
  .is-js .cursor.is-label .cursor__dot { opacity: 0; }
  .is-js .cursor.is-text .cursor__ring {
    width: 3px; height: 30px; margin: -15px 0 0 -1.5px;
    border-radius: 0;
    background: #F4EFE6;
    border-color: transparent;
  }
  .is-js .cursor.is-text .cursor__dot { opacity: 0; }
  .is-js .cursor.is-hidden .cursor__ring,
  .is-js .cursor.is-hidden .cursor__dot { opacity: 0; }

  .is-js.has-cursor,
  .is-js.has-cursor * { cursor: none !important; }
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--paper);
  border-bottom: var(--line-w) solid var(--line);
  transition: background-color .45s var(--ease), box-shadow .3s var(--ease);
}
.hdr.is-stuck { box-shadow: 0 6px 0 var(--hair); }
/* Com a trava de rolagem ativa o body vira position:fixed deslocado de
   -scrollY (§2). O sticky do cabeçalho passa a ser medido a partir DESSE
   body: com a página rolada, a barra ia parar a milhares de pixels acima
   da tela e, atrás do fundo translúcido do painel, aparecia o conteúdo que
   estava debaixo dela. Aqui a barra é devolvida ao topo da viewport pelo
   mesmo --lock-y que deslocou o body — sem sair do fluxo, logo sem empurrar
   o conteúdo. */
html.is-locked .hdr { transform: translateY(var(--lock-y, 0px)); }
.hdr__in {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
  height: clamp(64px, 6.4vw, 78px);
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand svg { width: clamp(112px, 11vw, 148px); color: var(--ink); }
.brand .dot-acc { color: var(--red); }
.brand:hover svg { transform: none; }

.nav { display: flex; align-items: center; gap: clamp(4px, 1.2vw, 18px); margin-left: auto; }
.nav a {
  position: relative;
  padding: 8px 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .93rem;
  letter-spacing: -.012em;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--red-ink);
  transition: right .32s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after { right: 0; }

.hdr__act { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: var(--line-w) solid var(--line);
  background: transparent;
  color: var(--ink);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover { background: var(--ink); color: var(--paper); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-btn .i-sun { display: var(--i-sun); }
.theme-btn .i-moon { display: var(--i-moon); }

.burger { display: none; }
.burger span {
  display: block;
  width: 20px; height: 2.5px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s linear;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.progress {
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--red);
  z-index: 2;
}

@media (max-width: 1080px) {
  .nav, .hdr__act .btn { display: none; }
  .burger { display: grid; margin-left: auto; }
}

/* Menu mobile em tela cheia */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
  overflow-y: auto;
}
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .35s var(--ease); }
.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: clamp(64px, 6.4vw, 78px);
  border-bottom: var(--line-w) solid var(--line-soft);
}
.menu__top .brand svg { color: var(--ink); }
.menu__ctl { display: flex; align-items: center; gap: 10px; }
.menu .icon-btn { border-color: var(--ink); color: var(--ink); }
.menu .icon-btn:hover { background: var(--ink); color: var(--paper); }
.menu__body { padding-block: clamp(26px, 5vw, 50px) 30px; flex: 1; }
.menu__list li { border-bottom: 1.5px solid var(--line-soft); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 90%;
  font-size: clamp(2rem, 10vw, 3rem);
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  transform: translateY(24px);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .4s linear, color .2s linear;
}
/* o acento do hover vem da laje (lime sobre a laje preta do tema claro,
   terracota sobre a laje de osso do escuro): lime sobre osso seria 1,07:1 */
.menu__list a:hover { color: var(--slab-acc); }
.menu__list a i {
  font: 700 .68rem/1 var(--font-mono);
  font-style: normal;
  letter-spacing: .1em;
  color: var(--red-ink);
}
.menu.is-open .menu__list a { transform: translateY(0); opacity: 1; }
/* UM fio só entre a lista e o pé. Havia dois — o de baixo de "CONTATO" e o
   de cima do rodapé do menu — com 26px de vazio no meio, que lia como um
   nono item de lista sem rótulo. O fio que fecha a lista fica; o do rodapé
   saiu, e o respiro passa a ser só espaço. */
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  margin-top: clamp(26px, 5vw, 44px);
}
.menu__foot .mono { color: var(--muted); }
.menu__foot .btn { --btn-bg: var(--lime); --btn-fg: var(--on-lime); --shadow-c: var(--ink); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
/* O RECORTE MORA AQUI, e não no .hero.
   .hero é .wrap (máx. 1380px): com overflow:clip nele, a tesoura ficava na
   borda do container, não na da tela. Medido: a 1440 sobravam 30px de papel
   à direita do corte; a 1600 restava uma lasca de ~17px de lime com 110px de
   vazio depois; a 1920 o disco desaparecia inteiro e o canto superior
   direito do herói ficava morto. Esta camada é full-bleed, então o corte
   acontece SEMPRE na borda da tela e o disco sangra igual em qualquer
   largura (126,7px visíveis de 1412px para cima). overflow:clip (e não
   hidden) não cria caixa de rolagem, então não muda posicionamento nem
   propaga overflow horizontal. */
.hero-clip { overflow: clip; }
.hero {
  position: relative;
  padding-block: clamp(26px, 3.2vw, 46px) clamp(26px, 3.4vw, 48px);
  /* GEOMETRIA DO ANEL, em tokens: o anel (§blob--ring) e o rótulo "ROLE"
     (§hero__scroll) dividem a mesma sarjeta esquerda, então a posição de um
     é escrita em função do outro — e não em `clamp()` independentes que só
     por acaso não se cruzam. Ver a conta em .hero__scroll. */
  --ring-d: min(26vw, 260px);   /* diâmetro (constante 260px de 1000px p/ cima) */
  --ring-drop: 48px;            /* quanto o anel desce abaixo da base do herói */
  --ring-py: 10px;              /* curso travado do paralaxe, ±                */
}
.hero__top {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding-bottom: clamp(16px, 1.9vw, 24px);
}
.avail { display: inline-flex; align-items: center; gap: 9px; }
.pulse {
  position: relative;
  width: 9px; height: 9px;
  background: var(--red-ink);
  border-radius: 50%;
  flex: 0 0 auto;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--red-ink);
  border-radius: 50%;
  animation: ping 2.2s var(--ease) infinite;
}
@keyframes ping {
  0% { transform: scale(.6); opacity: 1; }
  75%, 100% { transform: scale(1.5); opacity: 0; }
}

/* Afordância de rolagem na borda do herói: rótulo em pé, na sarjeta à
   esquerda da grade. Só aparece onde existe sarjeta de sobra (>=1200px),
   e o texto continua acima de 4,5:1 sobre o papel.

   ALTURA — o `clamp(150px, 13vw, 220px)` antigo era independente do anel, e
   de 1200 a ~1880px o arco cruzava os glifos de ROLE nos dois temas (medido:
   12 a 23 pixels de tinta sobre o traço, distância mínima 0). Agora a base do
   rótulo é escrita a partir da geometria do anel:

       base(ROLE) = --ring-d − --ring-drop + --ring-py + 26px

   os três primeiros termos são o ápice do anel na sua posição MAIS ALTA
   (topo = d − drop, subindo até --ring-py pelo paralaxe travado), e 26px é a
   folga. Como o ápice não depende da altura da janela nem da largura acima de
   1000px (min(26vw,260px) satura em 260), a folga é constante: o ponto do
   arco mais próximo da caixa do rótulo fica a 26px dela na pior largura
   (1201px) e a 42px em 2521px. Por isso a antiga exceção de janela baixa
   (max-height:820px) para este rótulo caiu: ela o empurrava para dentro do
   anel de novo. */
.hero__scroll {
  position: absolute;
  left: 2px;
  bottom: calc(var(--ring-d) - var(--ring-drop) + var(--ring-py) + 26px);
  z-index: 3;
  display: none;
  align-items: center;
  gap: 12px;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.hero__scroll svg { transform: rotate(90deg); animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge {
  0%, 100% { transform: rotate(90deg) translateX(0); }
  50% { transform: rotate(90deg) translateX(7px); }
}
@media (min-width: 1200px) { .hero__scroll { display: flex; } }

/* palco do título: caixa de referência do disco lime (§blob) */
.hero__stage { position: relative; }
.hero__title { position: relative; z-index: 3; }
.hero__title .ln-2 { padding-left: clamp(0px, 6vw, 130px); }
.hero__title .ln-3 { padding-left: clamp(0px, 3vw, 60px); margin-top: -.05em; }

.hl-block {
  display: inline-block;
  background: var(--red);
  color: var(--on-red);
  line-height: .8;
  padding: .11em .12em .13em;
  margin-left: -.04em;
  transform: rotate(-1.6deg);
  box-shadow: 8px 8px 0 var(--ink);
  border: var(--line-w) solid var(--ink);
}
.hl-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  font-size: .92em;
  text-transform: lowercase;
  letter-spacing: -.03em;
  padding-right: .08em;
}
.hl-out {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--ink);
  padding-right: .04em;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  margin-top: clamp(22px, 2.4vw, 32px);
  position: relative;
  z-index: 3;
}
.hero__sub { max-width: 55ch; font-size: clamp(1.02rem, .98rem + .42vw, 1.24rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 2.2vw, 28px); }

/* Notebook real: 1366x768 e 1280x720 têm 130px a menos de dobra que 1440x900
   e os dois CTAs nasciam FORA dela (top=755 num viewport de 768). Aqui a
   dobra inteira encolhe — respiros, folgas e, abaixo de 760px de altura,
   também o corpo do título — até os dois botões caberem inteiros. Não
   depende de fonte: são medidas de layout. */
@media (min-width: 1025px) and (max-height: 820px) {
  .hero { padding-block: 16px 20px; }
  .hero__top { padding-bottom: 12px; }
  .hero__grid { margin-top: 16px; }
  .hero__cta { margin-top: 16px; }
  .hero__sub { font-size: 1.02rem; }
}
@media (min-width: 1025px) and (max-height: 760px) {
  .hero .d1 { font-size: clamp(3.1rem, 8.9vw, 7.6rem); }
  .hero__sub { font-size: .99rem; line-height: 1.45; }
}

.hero__panel { position: relative; }

/* Cartão-navegador desenhado em CSS/SVG */
.browser {
  position: relative;
  border: var(--line-w) solid var(--line);
  background: var(--paper-2);
  box-shadow: 10px 10px 0 var(--shadow-c);
  transform: rotate(1.4deg) translate3d(0, var(--py, 0px), 0);
  overflow: hidden;
}
.browser--alt { transform: rotate(-1.2deg) translate3d(0, var(--py, 0px), 0); }
.browser__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: var(--line-w) solid var(--line);
  background: var(--paper-3);
}
.browser__dots { display: flex; gap: 5px; }
.browser__dots i { width: 9px; height: 9px; border: 1.5px solid var(--ink); border-radius: 50%; display: block; }
.browser__dots i:nth-child(1) { background: var(--red); }
.browser__dots i:nth-child(2) { background: var(--lime); }
.browser__url {
  flex: 1;
  min-width: 0;
  font: 700 clamp(.5rem, 2.1vw, .62rem)/1 var(--font-mono);
  letter-spacing: .1em;
  padding: 6px 9px;
  border: 1.5px solid var(--line-soft);
  background: var(--paper);
  color: var(--muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser__view { display: block; width: 100%; height: auto; background: var(--paper); }

.badge-score {
  position: absolute;
  left: -14px;
  bottom: -26px;
  z-index: 4;
  background: var(--lime);
  color: var(--on-lime);
  border: var(--line-w) solid var(--on-lime);
  box-shadow: 6px 6px 0 var(--on-lime);
  padding: 12px 15px 11px;
  transform: rotate(-4deg);
}
.badge-score b {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.05rem;
  line-height: .9;
  letter-spacing: -.04em;
}
.badge-score span {
  font: 700 .58rem/1.25 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}

.blob {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, var(--py, 0px), 0);
}
/* DISCO LIME — o maior campo de cor da dobra, em lime pleno da marca nos
   DOIS temas, e CÍRCULO em todas as larguras: era ele que mudava de
   natureza (0,38:1 em 320px, círculo em 390px, pastilha 6,6:1 de 480 a
   1280px) e no desktop parava 3px antes da borda sem tocar em nada.
   Agora tem tarefa: sangra pela borda direita da tela em QUALQUER largura,
   como já fazia no celular, e encosta no fim de "enquanto" — fecha a linha
   em vez de flutuar.
     · diâmetro: 1,18em (a mesma medida em que o título é composto)
     · direita:  --gutter + 0,3em fora da tela → sempre cortado pela borda
     · topo:     0,32em — a faixa livre começa em 0,22em
   O contraste continua resolvido por geometria: o lime pleno não encosta em
   caixa de texto nenhuma. Distância mínima medida entre o círculo e a tinta
   mais próxima ("enquanto", creme no tema escuro): 12,5px a 640px de
   largura, 14,6px a 768px, 28,6px a 1440px — em 16 larguras de 320 a 1920.
   Abaixo de 421px o título quebra em quatro linhas e o disco volta ao
   tamanho de lá (2,55em), medido contra "você dorme.". */
.blob--lime {
  font-size: clamp(3.1rem, 10.2vw, 9rem);
  /* distância da borda direita do palco até a borda direita da TELA:
     metade da sobra do container + o respiro lateral. É o que permite
     sangrar em qualquer largura, inclusive acima de 1380px, onde um
     deslocamento em vw pararia dentro da margem. */
  --gutter: calc(max(0px, (100vw - var(--maxw)) / 2) + var(--pad-x));
  --bleed: .3em;
  left: auto;
  right: calc(var(--gutter) * -1 - var(--bleed));
  width: 1.18em;
  height: auto;
  top: .32em;
  aspect-ratio: 1;
  background: var(--blob-lime-bg);
  border: var(--blob-lime-bd);
  transform: none;
}
/* ANEL — o traço passa POR TRÁS da faixa de confiança e reaparece embaixo;
   nunca mais atravessa a linha de promessa. O `bottom: 6vw` antigo amarrava o
   anel à ALTURA do herói, que cresce mais depressa que o texto: de 1001 a
   1119px o ápice do círculo subia para cima de "RESPOSTA EM ATÉ 24 H ÚTEIS ·
   … SEM COMPROMISSO" (interseção medida de 136x13 a 124x5,5 px, nos dois
   temas) e riscava o "E" de EM e o "I" de COMPROMISSO. Agora o deslocamento é
   um valor fixo abaixo da base do herói: o ápice fica sempre na faixa livre
   entre a promessa e a tabela, com folga medida de 23px (1001px) a 166px
   (1280px) e ápice 57 a 91px acima da tabela em TODA a faixa de 1001 a 2560.
   O paralaxe continua, com curso travado em ±10px: solto, ele derivava 45px
   para cima entre o topo da página e a saída da promessa do campo de visão
   (medido a 1024px) e reabria o mesmo cruzamento durante a rolagem. */
.blob--ring {
  width: var(--ring-d);
  aspect-ratio: 1;
  border: var(--line-w) solid var(--line);
  left: -8vw;
  bottom: calc(var(--ring-drop) * -1);
  background: none;
  transform: translate3d(0, clamp(calc(var(--ring-py) * -1), var(--py, 0px), var(--ring-py)), 0);
}
@media (max-width: 1000px) { .blob--ring { display: none; } }
@media (max-width: 420px) {
  /* Abaixo de 431px a linha 2 do título quebra em duas ("vendem" /
     "enquanto") e libera a faixa vertical à direita: o disco cresce para
     2,55em — o mesmo círculo de sempre nesta faixa — e continua sangrando.
     O corte fica em 420 e não em 430 para sobrar folga mesmo com a face de
     emergência mais larga. */
  .blob--lime {
    top: .32em;
    /* de 320 a 420px a coluna livre à direita cresce junto com a tela: o
       disco acompanha, de 1,35em (320px) a 2,55em (o mesmo círculo de sempre
       a partir de ~395px, exatamente onde a rampa antiga já saturava).
       Era 1,5em e "quase encostava": a 320px o "e" de QUE terminava em x=260
       e a borda esquerda do disco caía em x=259,2 — 0,8px de sobreposição,
       18 pixels de glifo a 1,11:1 contra o lime, só no tema escuro (no claro
       a tinta é preta sobre o lime e o contraste sobra). Agora a folga
       horizontal medida é de 6,0px a 320px e cresce daí para cima. */
    width: clamp(1.35em, calc((100vw - 320px) * .8 + 1.35em), 2.55em);
    --bleed: .27em;
  }
}

.trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--line-w) solid var(--line);
  border-bottom: var(--line-w) solid var(--line);
  margin-top: clamp(34px, 3.6vw, 52px);
  position: relative;
  z-index: 3;
  background: var(--paper);
}
.trust__i { padding: clamp(16px, 2vw, 24px) clamp(12px, 1.6vw, 22px); }
.trust__i + .trust__i { border-left: 1.5px solid var(--line-soft); }
.trust__i b {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.trust__i span { display: block; margin-top: 6px; color: var(--muted); font-size: .84rem; line-height: 1.35; }

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__panel { max-width: 480px; margin-top: 14px; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__i:nth-child(3), .trust__i:nth-child(4) { border-top: 1.5px solid var(--line-soft); }
  .trust__i:nth-child(3) { border-left: 0; }
}
@media (max-width: 560px) {
  .hero__title .ln-2, .hero__title .ln-3 { padding-left: 0; }
  .hl-block { box-shadow: 5px 5px 0 var(--ink); }
  /* em tela estreita a barra de endereço quebra em duas linhas em vez de
     cortar o fim do texto ("... são paulo") fora da tela */
  .browser__url { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
}

/* --------------------------------------------------------------------------
   9. Marquee cinético
   -------------------------------------------------------------------------- */
.mq-zone { position: relative; overflow: clip; padding-block: clamp(26px, 4vw, 52px); }
.mq {
  position: relative;
  width: 112%;
  margin-left: -6%;
  border-block: var(--line-w) solid var(--line);
  overflow: hidden;
  padding-block: clamp(9px, 1.1vw, 15px);
}
.mq--a { background: var(--lime); color: var(--on-lime); transform: rotate(-1.8deg); z-index: 2; }
.mq--b { background: var(--mq-b-bg); color: var(--mq-b-fg); transform: rotate(1.35deg); margin-top: 20px; z-index: 1; }
.mq__track { display: flex; width: max-content; will-change: transform; }
.mq__row { display: flex; align-items: center; flex: 0 0 auto; }
.mq__row span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.2vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-transform: uppercase;
  padding-inline: clamp(14px, 1.6vw, 24px);
  white-space: nowrap;
}
.mq__row svg { flex: 0 0 auto; width: clamp(15px, 1.8vw, 24px); height: auto; }

/* --------------------------------------------------------------------------
   10. Prova social / logos
   -------------------------------------------------------------------------- */
.proof { padding-block: clamp(44px, 5vw, 72px); }
.proof__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 26px;
  padding-bottom: 26px;
}
.stars { display: inline-flex; gap: 3px; align-items: center; }
.stars svg { width: 15px; height: 15px; color: var(--red-ink); }
.logos {
  border-block: var(--line-w) solid var(--line);
  overflow: hidden;
  padding-block: clamp(20px, 2.4vw, 30px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos .mq__row { gap: clamp(30px, 3.4vw, 52px); padding-right: clamp(30px, 3.4vw, 52px); }
.logos .logo { color: var(--ink); opacity: .74; transition: opacity .3s var(--ease), color .3s var(--ease); flex: 0 0 auto; }
.logos .logo svg { height: clamp(21px, 2.3vw, 30px); width: auto; }
.logos .logo:hover { opacity: 1; color: var(--red-ink); }

/* --------------------------------------------------------------------------
   11. Serviços
   -------------------------------------------------------------------------- */
/* Grade assimétrica: seis frentes, quatro tamanhos. A cor é estado de
   REPOUSO — quatro cartões são bloco de cor cheio e dois trazem a placa
   saturada do ícone. Nada aqui depende de :hover ou de :focus-within, que
   em dispositivo de toque nunca acontecem. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
  margin-top: clamp(38px, 4vw, 62px);
  position: relative;
  z-index: 2;
}
.svc--a { grid-column: span 7; }
.svc--b { grid-column: span 5; }
.svc--c, .svc--d, .svc--e { grid-column: span 4; }
.svc--f { grid-column: span 12; }

.svc {
  --shadow-c: var(--page-shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 32px);
  border: var(--line-w) solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--shadow-c);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* o transform final mora na regra de reveal (§25), que tem especificidade
   maior: o hover entrega as variáveis, não o transform */
.svc:hover { --tx: -4px; --ty: -4px; transform: translate(-4px, -4px); box-shadow: 11px 11px 0 var(--shadow-c); }
.svc--a { box-shadow: 9px 9px 0 var(--shadow-c); }
.svc--a:hover { box-shadow: 14px 14px 0 var(--shadow-c); }

/* blocos de cor em repouso */
.svc--red,
.post--red {
  --paper: var(--red); --paper-2: var(--red);
  --ink: var(--on-red); --muted: rgba(20, 18, 16, .9);
  --line: var(--on-red); --line-soft: rgba(20, 18, 16, .32);
  --focus: var(--on-red); --red-ink: var(--on-red);
}
.svc--lime {
  --paper: var(--lime); --paper-2: var(--lime);
  --ink: var(--on-lime); --muted: rgba(20, 18, 16, .82);
  --line: var(--on-lime); --line-soft: rgba(20, 18, 16, .3);
  --focus: var(--on-lime); --red-ink: var(--on-lime);
}
.svc--blue {
  --paper: var(--blue); --paper-2: var(--blue);
  --ink: var(--on-blue); --muted: rgba(255, 253, 247, .94);
  --line: var(--on-blue); --line-soft: rgba(255, 253, 247, .34);
  --focus: var(--lime); --red-ink: var(--on-blue);
}

.svc__n {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
}
.svc__n b { font-weight: 700; background: var(--ink); color: var(--paper); padding: 4px 7px 3px; letter-spacing: .1em; }
.svc__plate {
  display: grid;
  place-items: center;
  width: clamp(54px, 4.6vw, 66px);
  aspect-ratio: 1;
  margin-top: clamp(22px, 2.6vw, 34px);
  margin-bottom: clamp(16px, 1.8vw, 24px);
  border: var(--line-w) solid currentColor;
}
.svc__plate svg { width: 58%; height: 58%; }
.svc--plate-lime .svc__plate { background: var(--lime); color: var(--on-lime); border-color: var(--on-lime); }
.svc--plate-red .svc__plate { background: var(--red); color: var(--on-red); border-color: var(--on-red); }
.svc__ttl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.18rem, 1.5vw, 1.45rem);
  line-height: 1.04;
  letter-spacing: -.028em;
  margin-bottom: 10px;
}
.svc--a .svc__ttl { font-size: clamp(1.6rem, 2.5vw, 2.3rem); letter-spacing: -.04em; }
.svc--a .svc__txt { font-size: clamp(1rem, 1.1vw, 1.1rem); max-width: 40ch; }
.svc__txt { color: var(--muted); font-size: .95rem; line-height: 1.55; margin-bottom: 18px; }
/* O bloco de marcadores é ancorado pela BASE do cartão.
   Como os cartões de uma linha têm a mesma altura mas corpos de tamanhos
   diferentes, a sobra caía entre o último marcador e o CTA — 94,8px no
   cartão 02 contra 0 no 01, e o bloco do 04 subia 23,6px acima do 03 e do
   05. Com margin-top:auto aqui (e não no CTA), a lista e o CTA descem
   juntos: as bases coincidem em toda a linha e a folga sai do corpo. */
/* O elástico do cartão 02 (§index, .svc--b): base 0 e crescimento 1, então
   ele consome a sobra da coluna ANTES do `margin-top:auto` da lista (a
   distribuição de flex-grow acontece antes da de margens automáticas) e
   colapsa para altura 0 quando não há sobra. `min-height:0` é o que permite o
   colapso dentro de um contêiner flex; `overflow:hidden` garante que o
   desenho nunca vaze para cima do parágrafo em alturas mínimas. */
.svc__fig {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  padding-block: 10px;
  box-sizing: border-box;
}
.svc__fig svg { display: block; width: 100%; height: 100%; color: var(--ink); }
/* Abaixo de 1101px o cartão 02 ocupa a linha inteira sozinho: não existe mais
   a sobra que o desenho preenchia, e mantê-lo só produziria uma tira de 25 a
   40px de altura — desenho ilegível fingindo de elemento. Some. */
@media (max-width: 1100px) { .svc__fig { display: none; } }

/* CARTÃO 01 — SEGUNDA COLUNA. O cartão maior da grade (7 de 12) mantinha o
   parágrafo em 40ch, que é a medida em que se lê, e deixava o resto vazio:
   350px de texto em 726px a 1440, ~300px de laranja morto em L do lado do
   cartão 02, que já tinha ganhado desenho pelo mesmo motivo. A partir de
   1101px o 01 vira duas colunas — leitura à esquerda, prancha à direita — e
   a coluna de leitura não muda de medida. A prancha atravessa da placa ao
   CTA e tem paleta FIXA (o cartão é laranja nos dois temas). */
@media (min-width: 1101px) {
  .svc--a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(160px, 41%, 296px);
    grid-template-rows: auto auto auto auto 1fr auto;
    column-gap: clamp(20px, 2.4vw, 34px);
  }
  .svc--a > .svc__n     { grid-area: 1 / 1 / 2 / 3; }
  .svc--a > .svc__plate { grid-area: 2 / 1 / 3 / 2; }
  .svc--a > .svc__ttl   { grid-area: 3 / 1 / 4 / 2; }
  .svc--a > .svc__txt   { grid-area: 4 / 1 / 5 / 2; }
  .svc--a > .svc__list  { grid-area: 5 / 1 / 6 / 2; align-self: end; }
  .svc--a > .svc__go    { grid-area: 6 / 1 / 7 / 2; }
  .svc--a > .svc__fig--a { grid-area: 2 / 2 / 7 / 3; padding-block: 0; }
}
.svc__fig--a { --a-ink: #141210; --a-paper: #F4EFE6; --a-acc: #D8F14B; }
.svc__fig--a .a-ink   { fill: var(--a-ink); }
.svc__fig--a .a-paper { fill: var(--a-paper); }
.svc__fig--a .a-acc   { fill: var(--a-acc); }
/* traço de espessura constante: com preserveAspectRatio="none" o desenho
   preenche a coluna em qualquer proporção, e é isto que impede o fio de
   engordar num eixo e afinar no outro. (vector-effect não é herdada, então
   mora aqui, no próprio elemento traçado, e não no <g>.) */
.svc__fig--a .a-s-ink { stroke: var(--a-ink); vector-effect: non-scaling-stroke; }
.svc__list { display: grid; gap: 6px; font-size: .84rem; margin-top: auto; }
.svc__list li { position: relative; padding-left: 16px; color: var(--muted); }
.svc__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: 7px; height: 2px;
  background: currentColor;
}
.svc__list--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }

/* o "→" deixou de ser enfeite: é link de verdade, com destino, nome
   acessível próprio e parada de tabulação */
.svc__go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding-top: clamp(18px, 2vw, 26px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .93rem;
  letter-spacing: -.015em;
}
.svc__arw {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border: var(--line-w) solid currentColor;
  transition: transform .3s var(--ease);
}
.svc__go:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.svc__go:hover .svc__arw { transform: translateX(4px); }

/* cartão 06: deitado, ocupa a largura toda e fecha a seção */
.svc--f { flex-direction: row; gap: clamp(22px, 3vw, 52px); align-items: stretch; }
.svc--f .svc__side {
  flex: 0 0 clamp(200px, 26%, 320px);
  display: flex;
  flex-direction: column;
  border-right: 1.5px solid var(--line-soft);
  padding-right: clamp(18px, 2vw, 32px);
}
.svc--f .svc__main { flex: 1; display: flex; flex-direction: column; }
.svc--f .svc__plate { margin-top: clamp(16px, 1.8vw, 22px); margin-bottom: clamp(14px, 1.6vw, 20px); }
.svc--f .svc__ttl { margin-bottom: 0; font-size: clamp(1.3rem, 1.9vw, 1.75rem); }
.svc--f .svc__txt { max-width: 62ch; }

@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc--a, .svc--b, .svc--e, .svc--f { grid-column: span 6; }
  .svc--c, .svc--d { grid-column: span 3; }
}
@media (max-width: 820px) {
  .svc--f { flex-direction: column; gap: 0; }
  .svc--f .svc__side { flex: 0 0 auto; border-right: 0; padding-right: 0; }
  .svc--f .svc__ttl { margin-bottom: 10px; }
}
@media (max-width: 700px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc--a, .svc--b, .svc--c, .svc--d, .svc--e, .svc--f { grid-column: span 1; }
  .svc__list--row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   12. Bloco escuro (Processo)
   -------------------------------------------------------------------------- */
/* fundo, tinta, linha e sombra da laje vêm dos tokens de §1b; o destaque é
   --slab-acc, que é lime quando a laje é preta e vermelho-tinta quando a
   laje é creme (tema escuro) — nunca lime sobre creme a 1,3:1 */
.block-dark .eyebrow b { background: var(--slab-badge-bg); color: var(--slab-badge-fg); }
.block-dark .bleed-word { -webkit-text-stroke-color: var(--line-soft); }

.steps { margin-top: clamp(34px, 4vw, 58px); position: relative; z-index: 2; }
.step {
  display: grid;
  grid-template-columns: clamp(64px, 8vw, 132px) minmax(0, .72fr) minmax(0, 1.5fr) auto;
  gap: clamp(14px, 2vw, 30px);
  align-items: start;
  padding-block: clamp(20px, 2.4vw, 32px);
  border-top: 1.5px solid var(--line-soft);
  transition: padding-left .4s var(--ease);
}
.step:last-child { border-bottom: 1.5px solid var(--line-soft); }
.step:hover { padding-left: clamp(6px, 1.2vw, 18px); }
.step__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--ink);
  transition: color .35s var(--ease), -webkit-text-stroke-color .35s var(--ease);
}
.step:hover .step__n { color: var(--slab-acc); -webkit-text-stroke-color: var(--slab-acc); }
.step__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -.03em; line-height: 1.05; }
.step__d { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.step__meta { font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--slab-acc); white-space: nowrap; padding-top: 4px; }

/* Prazo total por tipo de projeto: é aqui que as faixas das seis etapas
   fecham a conta. Os três números são os mesmos do FAQ e do resumo de
   insights — a página não pode dizer duas coisas sobre o próprio prazo. */
.proc-sum {
  position: relative;
  z-index: 2;
  margin-top: clamp(30px, 3.4vw, 46px);
  padding: clamp(20px, 2.4vw, 32px);
  border: var(--line-w) solid var(--line);
  background: var(--paper-2);
}
.proc-sum__lb {
  font: 700 .66rem/1 var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--slab-acc);
  margin-bottom: clamp(16px, 1.8vw, 22px);
}
.proc-sum__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); }
.proc-sum__i { border-top: var(--line-w) solid var(--line); padding-top: 14px; }
.proc-sum__i b {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: .9;
  letter-spacing: -.05em;
}
.proc-sum__i span { display: block; margin-top: 5px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 1.3vw, 1.18rem); letter-spacing: -.02em; }
.proc-sum__i i { display: block; margin-top: 10px; font-style: normal; font-size: .86rem; line-height: 1.35; color: var(--muted); }
.proc-sum__note {
  margin-top: clamp(18px, 2vw, 26px);
  padding-top: 14px;
  border-top: 1.5px solid var(--line-soft);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
  max-width: 96ch;
}
.proc-sum__note em { font-family: var(--font-serif); font-style: italic; color: var(--ink); }
@media (max-width: 760px) { .proc-sum__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .step { grid-template-columns: clamp(52px, 14vw, 90px) minmax(0, 1fr); grid-template-areas: "n t" "n d" ". m"; }
  .step__n { grid-area: n; }
  .step__t { grid-area: t; }
  .step__d { grid-area: d; margin-top: 8px; }
  .step__meta { grid-area: m; margin-top: 10px; }
}

/* --------------------------------------------------------------------------
   13. Portfólio
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(26px, 3vw, 40px); }
.filter {
  padding: 10px 16px 9px;
  border: var(--line-w) solid var(--line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.filter:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--shadow-c); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.works {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 40px);
  margin-top: clamp(28px, 3vw, 44px);
}
.work {
  position: relative;
  display: block;
  border: var(--line-w) solid var(--line);
  background: var(--paper);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), opacity .35s linear;
}
.work:hover { --tx: -5px; --ty: -5px; transform: translate(-5px, -5px); box-shadow: 12px 12px 0 var(--shadow-c); }
.work.is-out { display: none; }
.work__media { position: relative; overflow: hidden; border-bottom: var(--line-w) solid var(--line); background: var(--paper-2); }
.work__media svg { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.work:hover .work__media svg { transform: scale(1.035); }
/* A etiqueta fica sobre a miniatura, que é arte de paleta fixa clara: por
   isso usa superfície invertida (§1b) nos dois temas. Fica à DIREITA porque
   o canto superior esquerdo do pôster é onde mora a marca do cliente. */
.work__cat {
  position: absolute;
  right: 0; top: 0;
  padding: 8px 12px 7px;
  font: 700 .62rem/1 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  z-index: 2;
}
.work__body { padding: clamp(18px, 2vw, 26px); display: grid; gap: 12px; }
.work__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.work__yr { font: 700 .66rem/1 var(--font-mono); letter-spacing: .12em; color: var(--muted); }
.work__res {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-top: 1.5px solid var(--line-soft);
  padding-top: 12px;
}
.work__res b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--red-ink);
}
.work__res span { font-size: .84rem; color: var(--muted); line-height: 1.3; }
.work__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.work__tags i {
  font: 700 .6rem/1 var(--font-mono);
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1.5px solid var(--line-soft);
  padding: 5px 8px 4px;
  color: var(--muted);
}
.work__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: -.015em;
  color: var(--ink);
}
.work__go svg { transition: transform .3s var(--ease); }
.work:hover .work__go svg { transform: translateX(4px); }
@media (max-width: 760px) { .works { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   13b. Painel de detalhe (case e resumo de artigo)
   <dialog> aberto por showModal(): foco preso e ESC vêm do navegador; o
   retorno de foco ao cartão de origem é feito no JS. Sem JS o <dialog>
   continua alcançável — o link é uma âncora de verdade e :target abre o
   painel no fluxo da página.
   -------------------------------------------------------------------------- */
.sheet {
  /* Altura do painel e altura das duas barras presas: escritas aqui uma vez
     só porque a CAPA (título + pôster) precisa saber quanto sobra para
     caber inteira no primeiro quadro — é o que garante que o pôster nunca
     apareça cortado e que o título nunca nasça debaixo do rodapé. */
  --sheet-h: min(92vh, 1000px);
  --sheet-hd: calc(clamp(12px, 1.5vw, 18px) * 2 + 44px + var(--line-w));
  --sheet-ft: calc(clamp(14px, 1.6vw, 18px) * 2 + 53px + var(--line-w));
  --sheet-fade: clamp(14px, 1.6vw, 20px);
  width: min(940px, calc(100vw - 32px));
  max-width: none;
  max-height: var(--sheet-h);
  padding: 0;
  border: var(--line-w) solid var(--line);
  /* o painel tem papel PRÓPRIO (§1, --sheet-paper): no claro é o mesmo da
     página; no escuro é uma superfície mais alta, para o pôster não sumir
     dentro dele. Como a troca é feita nos tokens, a barra presa, o rodapé
     preso e a legenda acompanham sem regra nova. */
  --paper:   var(--sheet-paper);
  --paper-2: var(--sheet-paper-2);
  --paper-3: var(--sheet-paper-2);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--shadow-c);
  overflow: auto;
  overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(20, 18, 16, .72); }
[data-theme="dark"] .sheet::backdrop { background: rgba(6, 5, 5, .82); }
.sheet__in { --sheet-pad: clamp(22px, 3vw, 44px); padding: var(--sheet-pad); }
/* Barra de cabeçalho presa ao topo do painel: o "X" subia junto com o
   conteúdo e ficava cortado ao meio pela borda superior. Aqui ele fica
   sempre no mesmo lugar, com o rótulo do case ao lado — mesma lógica da
   barra de ação presa ao pé. */
.sheet__hd {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: calc(var(--sheet-pad) * -1) calc(var(--sheet-pad) * -1) 0;
  padding: clamp(12px, 1.5vw, 18px) var(--sheet-pad);
  border-bottom: var(--line-w) solid var(--line);
  background: var(--paper);
}
.sheet__hd .eyebrow { flex: 1; min-width: 0; }
.sheet__x { flex: 0 0 auto; }

/* CAPA DO PAINEL — nome do case (ou manchete do artigo) e, embaixo, o
   pôster inteiro. A ordem é a de uma abertura de revista: chapéu na barra
   presa, manchete, imagem, legenda, linha fina.
   Duas coisas vêm daqui:
   · o título nasce no TOPO do painel, a meia altura de distância do degradê
     do rodapé preso — antes ele vinha depois do pôster e nascia dentro do
     fade, que o apagava (22px a 1440x900, 77px a 1280x720);
   · a capa tem altura fixa igual ao primeiro quadro visível, e o pôster é o
     item elástico dela: o desenho encolhe até caber INTEIRO, em vez de ser
     recortado. Antes o SVG usava "slice" e o painel mostrava menos que a
     miniatura da grade (120 das 440 unidades do desenho sumiam: a linha de
     base do gráfico, JAN/ABR/JUL e duas das três linhas de "EM CAMPO"). */
.sheet__cover {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  height: calc(var(--sheet-h) - var(--line-w) * 2 - var(--sheet-hd) - var(--sheet-ft) - var(--sheet-fade));
  padding-top: clamp(10px, 1.3vw, 18px);
  margin-bottom: clamp(22px, 2.6vw, 32px);
}
/* OLHO-DE-SEÇÃO DENTRO DO PAINEL — o mesmo par número-em-bloco + assunto que
   abre cada seção da página ("04 PORTFÓLIO", "10 INSIGHTS"), agora abrindo
   também a ficha: o painel deixa de ser uma janela solta e passa a ser a
   página de dentro da mesma revista. O número é o da seção de onde a ficha
   veio, não um índice novo. A barra presa lá em cima ficou com o rótulo
   curto (CASE + nome), que é o que serve de guia quando o conteúdo rola. */
.sheet__eye { flex: 0 0 auto; margin-bottom: calc(clamp(12px, 1.4vw, 18px) * -.35); }

/* MANCHETE DA FICHA — era 37,44px/800, tamanho de legenda, numa página cujos
   títulos de seção são 72px/900. Sobe para 56px/900 no mesmo grotesco
   condensado das manchetes (wdth 90%), com entrelinha fechada de abertura de
   revista. A medida caiu de 26ch para 21ch justamente para a manchete
   quebrar em duas ou três linhas e virar bloco — e o pôster continua sendo
   o item elástico da capa, então ele acomoda a diferença sem ser cortado
   (conferido nas 180 combinações: 10 painéis x 2 temas x 9 telas). */
.sheet__t {
  max-width: 21ch;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 90%;
  /* a medida manda, não a janela: o painel tem min(940px, 100vw - 32px), e a
     manchete é 6,2% dessa largura (56px no painel cheio). Com 3,9vw ela caía
     para 39,9px a 1024x768, onde o painel continua com 940px de largura. */
  font-size: clamp(1.85rem, calc(min(940px, 100vw - 32px) * .062), 3.5rem);
  line-height: .94;
  letter-spacing: -.045em;
  text-transform: none;
  margin: 0;
}

/* Abertura da ficha: o mesmo pôster que fez a pessoa clicar, agora em
   escala de leitura, como PRANCHA — um retângulo de cor do tamanho exato do
   desenho, centrado na medida do painel, com a legenda embaixo.

   Era uma faixa full-bleed de 936px com o desenho boiando no meio dela: a
   capa tem altura fixa (o primeiro quadro), o desenho é o item elástico, e
   quando a altura aperta o `meet` encolhe a arte e centraliza — sobrava cor
   chapada dos dois lados. Medido nos 10 painéis a 1440x900: 400px mortos
   (43% da banda) nos 4 de artigo e 246px (26%) nos 6 de case; a 1280x720
   chegava a 638px (68%). Nos de artigo a banda é azul saturado, então o
   vazio gritava.

   Agora a cor e a moldura moram no PRÓPRIO svg, e a largura dele sai da
   altura que a capa deixou (`aspect-ratio` + `width:auto` + `align-self`
   fora do stretch da coluna). Resultado: banda = arte, zero pixel morto, em
   qualquer altura de janela. Onde a altura sobra, `max-width:100%` manda e a
   prancha volta a sangrar de ponta a ponta como antes. Nada mudou na arte
   nem no corte: o desenho continua inteiro (nunca `slice`) e o título
   continua nascendo acima do degradê do rodapé preso. */
.sheet__poster {
  position: relative;
  margin: 0 calc(var(--sheet-pad) * -1);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.sheet__poster svg {
  display: block;
  /* a altura vem do flex; a largura vem da altura, na proporção da arte. */
  flex: 1 1 auto;
  min-height: 128px;
  align-self: center;
  width: auto;
  max-width: 100%;
  aspect-ratio: 640 / 440;
  background: var(--poster-bg, var(--paper-2));
  /* moldura sólida da prancha: no tema escuro é o traço creme que a fecha
     como objeto sobre o papel do painel; no claro ela é transparente e a
     própria cor do pôster faz a aresta contra o creme (6,7:1).
     Ela é SOMBRA e não borda de propósito: borda entraria na caixa e roubaria
     da proporção (2px de letterbox de volta) ou, com content-box, somaria
     fora do `max-width:100%` e devolveria 4px de rolagem horizontal no
     celular. Sombra não entra no cálculo de rolagem nem na proporção. */
  box-shadow: 0 0 0 var(--line-w) var(--poster-frame);
}
.sheet__poster figcaption {
  flex: 0 0 auto;
  margin-top: clamp(10px, 1.2vw, 14px);
  padding: 12px var(--sheet-pad) 0;
  border-top: var(--line-w) solid var(--line);
  font: 700 .64rem/1.5 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
}
.sheet__lede { margin-top: 14px; color: var(--muted); font-size: clamp(1rem, 1.05vw, 1.12rem); line-height: 1.5; max-width: 62ch; }
.sheet__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 38px);
  margin-top: clamp(24px, 3vw, 38px);
}
.sheet__in > .sheet__blk { margin-top: clamp(22px, 2.6vw, 34px); }
.sheet__blk h3 {
  font: 700 .66rem/1 var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--red-ink);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1.5px solid var(--line-soft);
}
.sheet__blk p { color: var(--muted); font-size: .95rem; line-height: 1.6; }
.sheet__blk p + p { margin-top: 10px; }
.sheet__blk strong { color: var(--ink); font-weight: 700; }
.sheet__blk code { font: 700 .86em var(--font-mono); }
.sheet__ul { display: grid; gap: 9px; font-size: .93rem; line-height: 1.5; color: var(--muted); }
.sheet__ul li { position: relative; padding-left: 18px; }
.sheet__ul li::before { content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 2px; background: var(--red-ink); }
.sheet__res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.sheet__res > div { border-left: var(--line-w) solid var(--line); padding-left: 14px; }
.sheet__res b {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: .96;
  letter-spacing: -.04em;
}
.sheet__res span { display: block; margin-top: 8px; font-size: .82rem; line-height: 1.35; color: var(--muted); }
.sheet__stack { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet__stack i {
  font: 700 .64rem/1 var(--font-mono);
  font-style: normal;
  letter-spacing: .11em;
  text-transform: uppercase;
  border: 1.5px solid var(--line-soft);
  padding: 8px 11px 7px;
  color: var(--muted);
}
/* Barra de ação fixa no pé do painel.
   Em 1440x900 a moldura fecha em y=846 e cortava o CTA primário ao meio, sem
   nenhuma afordância de rolagem: o primeiro quadro parecia quebrado. Aqui a
   barra é sticky no rodapé do próprio painel (sangrando até as bordas, por
   isso as margens negativas do padding do .sheet__in), com um degradê acima
   dizendo que há conteúdo passando por baixo. O CTA nunca fica cortado. */
.sheet__ft {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: clamp(24px, 3vw, 38px) calc(var(--sheet-pad) * -1) calc(var(--sheet-pad) * -1);
  padding: clamp(14px, 1.6vw, 18px) var(--sheet-pad);
  border-top: var(--line-w) solid var(--line);
  background: var(--paper);
}
/* O degradê diz que há conteúdo passando por baixo da barra. Ele encolheu
   de 24-40px para 14-20px e, sobretudo, não tem mais texto de título
   nascendo dentro dele: a capa acima reserva exatamente esta faixa. */
.sheet__ft::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: var(--sheet-fade);
  background: linear-gradient(to top, var(--paper), rgba(0, 0, 0, 0));
  pointer-events: none;
}
@media (max-width: 760px) {
  .sheet__cols { grid-template-columns: minmax(0, 1fr); }
  .sheet__res { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sheet { width: 100%; max-height: 100%; height: 100%; box-shadow: none; border: 0; }
  /* no celular o painel ocupa a tela inteira e o pôster já cabia inteiro na
     proporção original: a capa volta a ter altura de conteúdo */
  .sheet__cover { height: auto; }
  /* com a capa em altura de conteúdo a altura do svg deixa de ser definida,
     então a largura volta a mandar — e ela já preenche a medida inteira */
  .sheet__poster svg { width: 100%; align-self: stretch; }
}
/* na ficha estática (sem JS / sem <dialog>) não há painel para rolar: as
   barras presas voltam a ser cabeçalho e rodapé comuns, sem degradê */
html:not(.is-js) .sheet__hd,
html.no-dialog .sheet__hd { position: static; }
html:not(.is-js) .sheet__ft,
html.no-dialog .sheet__ft { position: static; }
html:not(.is-js) .sheet__ft::before,
html.no-dialog .sheet__ft::before { display: none; }
/* sem painel modal não há primeiro quadro para reservar: a capa volta a
   ter altura de conteúdo e o pôster fica na proporção cheia */
html:not(.is-js) .sheet__cover,
html.no-dialog .sheet__cover { height: auto; }
html:not(.is-js) .sheet__poster svg,
html.no-dialog .sheet__poster svg { width: 100%; align-self: stretch; }

/* sem JS (ou sem suporte a <dialog>): o painel vira uma ficha aberta no
   fluxo da página, revelada pela própria âncora */
html:not(.is-js) .sheet:target,
html.no-dialog .sheet:target {
  display: block;
  position: static;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: clamp(22px, 3vw, 40px) 0 0;
  box-shadow: 8px 8px 0 var(--shadow-c);
  border: var(--line-w) solid var(--line);
}
/* sem JS não há o que fechar: a ficha está no fluxo da página */
html:not(.is-js) .sheet__x,
html:not(.is-js) .sheet__ft [data-sheet-close],
html.no-dialog .sheet__x,
html.no-dialog .sheet__ft [data-sheet-close] { display: none; }

/* --------------------------------------------------------------------------
   14. Números (bloco vermelho)
   -------------------------------------------------------------------------- */
/* dentro do bloco vermelho o papel é o próprio vermelho e a tinta é
   --on-red: todo descendente que lê var(--ink)/var(--paper)/var(--muted)
   acerta sozinho, nos dois temas. --muted a .88 é o mínimo que mantém
   4,5:1 sobre o laranja (a .74 dava 3,97:1). */
/* A tinta fraca aqui é CHEIA, e não uma transparência de 88%: sobre o laranja
   o creme não existe, então a única direção possível é o preto, e os 12% de
   laranja que a transparência deixava passar custavam contraste onde não
   sobrava. Medido em pixel (com o grão da página composto, que é como a
   página realmente aparece): o lede da seção media 4,08:1 e as legendas em
   mono 4,12:1 — abaixo do piso; com tinta cheia sobem para 4,8:1 e 4,9:1. A
   hierarquia continua existindo, feita por corpo e por face (número em 5,2rem
   de display, lede em 1,35rem, legenda em mono de 0,62rem). */
.block-red {
  --paper:   var(--red);
  --paper-2: var(--red);
  --ink:     var(--on-red);
  --muted:   var(--on-red);
  --line:      var(--on-red);
  --line-soft: rgba(20, 18, 16, .3);
  --shadow-c:  var(--on-red);
  --focus:     var(--on-red);
  --red-ink:   var(--on-red);
  background: var(--paper);
  color: var(--ink);
}
.block-red .eyebrow b { background: var(--ink); color: var(--red); }
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(32px, 4vw, 54px);
  /* fio em cima E embaixo, como na faixa de confiança do herói (§8, .trust):
     é o mesmo dispositivo — tabela de números fechada entre dois traços. Sem
     o de baixo a banda se dissolvia no vazio do pé da seção. */
  border-top: var(--line-w) solid var(--line);
  border-bottom: var(--line-w) solid var(--line);
  position: relative;
  z-index: 2;
}
.stat { padding: clamp(22px, 2.6vw, 34px) clamp(14px, 1.6vw, 24px); }
.stat + .stat { border-left: 1.5px solid var(--line-soft); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.9rem, 6vw, 5.2rem);
  line-height: .84;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 12px; font-size: .92rem; line-height: 1.35; max-width: 22ch; }
.stat i {
  display: block;
  margin-top: 8px;
  font: 700 .62rem/1.3 var(--font-mono);
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1.5px solid var(--line-soft); }
  .stat:nth-child(3) { border-left: 0; }
}
@media (max-width: 430px) { .stats { grid-template-columns: minmax(0, 1fr); } .stat + .stat { border-left: 0; border-top: 1.5px solid var(--line-soft); } }

/* --------------------------------------------------------------------------
   15. Stack
   -------------------------------------------------------------------------- */
/* A seção de tecnologia era a única sem nenhum dispositivo do sistema: doze
   caixas de fio de cabelo e nada mais. Agora ela tem prancha desenhada com
   bloco de cor e sombra sólida deslocada (o mesmo objeto dos cases), escala
   assimétrica entre a prancha e a lista, ícone em quadrado com fio grosso —
   e a palavra-fantasma que todas as outras seções têm. A informação é a
   mesma: as doze ferramentas continuam lá, com a descrição de cada uma. */
/* Os dois pés se encontram por construção, não por número mágico: as duas
   metades esticam até a altura da mais alta (align-items:stretch) e cada uma
   distribui a sobra por dentro — a prancha no campo lime em volta do desenho,
   a tabela nas seis linhas de ferramenta. A prancha terminava ~90px acima da
   tabela sem nada explicando a diferença. */
.stack-lay {
  display: grid;
  /* a lombada numerada come ~90px da metade direita: a divisão passou de
     .92/1.08 para .84/1.16 para que o NOME da ferramenta continue numa linha
     só ("JavaScript & TypeScript" é o mais largo, 190px a .98rem) */
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(22px, 2.6vw, 40px);
  align-items: stretch;
  margin-top: clamp(32px, 3.6vw, 52px);
  position: relative;
  z-index: 2;
}
.stack-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: var(--line-w) solid var(--line);
  box-shadow: 8px 8px 0 var(--shadow-c);
  /* mesma paleta travada dos pôsteres de case: a prancha é obra fechada e não
     inverte com o tema (o lime é o do desenho, não o do tema) */
  background: #D8F14B;
}
.stack-fig svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 576;
  border-bottom: var(--line-w) solid var(--line);
}
@media (min-width: 981px) {
  /* com as duas colunas lado a lado, o SVG vira o elástico da prancha: perde a
     proporção travada, ocupa a sobra e mantém o desenho centrado e intacto
     (preserveAspectRatio meet). O campo que sobra é do mesmo lime do fundo da
     figura — a moldura do cartaz cresce, o desenho não distorce. */
  .stack-fig svg { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
}
.stack-fig figcaption {
  padding: 11px clamp(12px, 1.2vw, 18px) 10px;
  font: 700 .62rem/1.45 var(--font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
}
.stack-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-top: var(--line-w) solid var(--line);
  border-left: var(--line-w) solid var(--line);
  position: relative;
  z-index: 2;
  background: var(--paper);
}
/* uma família = lombada numerada (2 linhas de altura) + 4 ferramentas em duas
   colunas. `grid-template-rows: 1fr 1fr` faz as duas linhas dividirem a altura
   da família em partes iguais, e `flex: 1 1 auto` faz as três famílias
   dividirem a sobra da coluna — é assim que o pé da tabela encontra o pé da
   prancha sem número mágico. */
.stack-fam {
  display: grid;
  grid-template-columns: clamp(66px, 5.2vw, 92px) repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  flex: 1 1 auto;
}
.stack-fam__k {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(12px, 1.2vw, 16px) 8px;
  background: var(--ink);
  color: var(--paper);
  border-right: var(--line-w) solid var(--line);
  border-bottom: var(--line-w) solid var(--line);
}
.stack-fam__k b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 1.7vw, 1.7rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.stack-fam__k span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.tech {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: clamp(14px, 1.5vw, 20px);
  border-right: var(--line-w) solid var(--line);
  border-bottom: var(--line-w) solid var(--line);
  transition: background-color .25s var(--ease);
}
.tech:hover { background: var(--paper-2); }
/* ícone dentro de quadrado de fio grosso, como nos cartões de serviço */
.tech svg {
  width: 40px;
  height: 40px;
  padding: 8px;
  box-sizing: border-box;
  border: 2px solid var(--line);
  flex: 0 0 auto;
  color: var(--ink);
}
.tech b { display: block; font-family: var(--font-display); font-weight: 800; font-size: .98rem; line-height: 1.14; letter-spacing: -.02em; }
.tech span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.4; margin-top: 3px; }

/* FRONTEIRA ENTRE AS FAMÍLIAS — no desktop ela não existia: as seis linhas
   usavam o mesmo `border-bottom: 2px` e a lombada desenhava a divisória em
   var(--line) SOBRE var(--ink), a mesma cor, invisível. Quem olhava via seis
   linhas iguais e três números soltos, e não três famílias (no celular a
   lombada já deita e vira barra "01 FRENTE", que corta sozinha).
   O corte agora é uma faixa de 7px na última linha de cada família, e ela
   INVERTE ao cruzar a lombada: fio de tinta cheia sobre o papel das células,
   fatia de papel cheio sobre a tinta da lombada. Dos dois lados o salto é o
   mesmo (2px → 7px, 3,5×) e o traço nunca desaparece contra o próprio fundo.
   Abaixo de 561px a lombada já deita e vira barra de tinta cheia sobre as
   duas colunas — lá a fronteira é a própria barra, e este corte extra só
   abriria uma fresta debaixo de duas das três barras. Por isso ele começa
   onde a lombada é vertical. */
@media (min-width: 561px) {
  .stack-fam:not(:last-child) .tech:nth-last-child(-n+2) { border-bottom-width: 7px; }
  .stack-fam:not(:last-child) .stack-fam__k { border-bottom: 7px solid var(--paper); }
}

@media (max-width: 980px) {
  .stack-lay { grid-template-columns: minmax(0, 1fr); }
  .stack-fig { max-width: 560px; }
  /* em coluna única não há sobra para dividir: as linhas voltam a ser do
     tamanho do conteúdo */
  .stack-fam { grid-template-rows: auto auto; }
}
@media (max-width: 560px) {
  /* Abaixo de 560px a lombada vertical comeria 72px dos ~350px da linha: ela
     deita e vira faixa de tinta cheia sobre as duas colunas — mesmo bloco,
     mesma numeração, na horizontal. */
  .stack-fam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack-fam__k {
    grid-column: 1 / -1;
    grid-row: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 9px 14px 8px;
    border-right: 0;
  }
  .stack-fam__k span { writing-mode: horizontal-tb; }
  /* em telas estreitas a coluna tem ~170px: o ícone sobe para cima do texto
     em vez de comer a largura da linha (e a lista não vira uma tira de
     1.300px de altura) */
  .tech { flex-direction: column; gap: 10px; }
  .tech svg { width: 34px; height: 34px; padding: 6px; }
}

/* --------------------------------------------------------------------------
   16. Diferenciais + comparativo
   -------------------------------------------------------------------------- */
.diffs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(32px, 3.6vw, 52px);
  /* conteudo sempre ACIMA da palavra-fantasma (que e position:absolute com
     z-index 0: sem isto o contorno seria pintado por cima dos cartoes) */
  position: relative;
  z-index: 2;
}
.diff {
  border: var(--line-w) solid var(--line);
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--shadow-c);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.diff:hover { --tx: -3px; --ty: -3px; transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--shadow-c); }
.diff__k {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--red-ink);
  display: block;
  margin-bottom: 12px;
}
/* Duas linhas reservadas para o título: o do cartão 01 ocupa duas (45,75px)
   e os dos cartões 02 e 03 uma só (22,88px) — sem a reserva, os três
   parágrafos saíam 23px fora de registro na mesma linha da grade. */
.diff .h-card { min-height: 2.12em; }
.diff p { color: var(--muted); font-size: .93rem; line-height: 1.55; margin-top: 8px; }
@media (max-width: 860px) { .diffs { grid-template-columns: minmax(0, 1fr); } .diff .h-card { min-height: 0; } }

.cmp {
  margin-top: clamp(40px, 4.4vw, 66px);
  border: var(--line-w) solid var(--line);
  background: var(--paper);
  position: relative;
  z-index: 2;
}
/* align-items: stretch (padrão) é o que mantém a coluna preta inteira: com
   "center" cada célula tinha só a altura do próprio conteúdo e a linha em
   que a nota quebra em duas (o "Suporte com prazo de resposta") abria duas
   fatias creme de ~10px cortando a coluna weby.app. As células continuam
   com o conteúdo centrado na vertical — agora por dentro. */
.cmp__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.cmp__row + .cmp__row > .cmp__c { border-top: 1.5px solid var(--line-soft); }
.cmp__row--head { background: var(--paper-2); border-bottom: var(--line-w) solid var(--line); }
.cmp__c {
  padding: clamp(13px, 1.5vw, 19px) clamp(12px, 1.4vw, 20px);
  font-size: .92rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cmp__c + .cmp__c {
  border-left: 1.5px solid var(--line-soft);
  text-align: center;
  align-items: center;
  gap: 8px;
}
/* Dot semântico de três estados: cheio / meio / vazio.
   A leitura da coluna vira uma varredura de uma coisa só, em vez de
   misturar ✓, ✗ e prosa. O estado também é texto para leitor de tela. */
.dot {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  border: 2.5px solid currentColor;
  border-radius: 50%;
  display: block;
}
.dot--full { background: currentColor; }
.dot--half { background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); }
.dot--none { background: transparent; }
.cmp__v { font-size: .84rem; line-height: 1.25; }
.cmp__key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
  position: relative;
  z-index: 2;
  font: 700 .64rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cmp__key span { display: inline-flex; align-items: center; gap: 8px; }
.cmp__key .dot { width: 14px; height: 14px; border-width: 2px; }
.cmp__row--head .cmp__c {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* coluna "weby.app": superfície invertida (§1b), só o posicionamento aqui */
.cmp__c--us { position: relative; }
.cmp__row--head .cmp__c--us { background: var(--red); color: var(--on-red); }
.cmp__c svg { width: 20px; height: 20px; margin-inline: auto; }
.cmp__lbl { font-weight: 600; }
.cmp__note { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; font-weight: 400; }
@media (max-width: 760px) {
  .cmp__row { grid-template-columns: minmax(0, 1fr); }
  .cmp__row--head { display: none; }
  .cmp__c + .cmp__c { border-left: 0; border-top: 1.5px solid var(--line-soft); text-align: left; flex-direction: row; justify-content: flex-start; gap: 12px; align-items: center; }
  .cmp__c[data-l] .cmp__v { margin-left: auto; text-align: right; }
  .cmp__c[data-l]::before {
    content: attr(data-l);
    font: 700 .62rem/1 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .8;
  }
  .cmp__c svg { margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   17. Preços
   -------------------------------------------------------------------------- */
.toggle-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.toggle {
  position: relative;
  display: inline-flex;
  border: var(--line-w) solid var(--line);
  background: var(--paper);
  padding: 3px;
  gap: 3px;
}
.toggle button {
  position: relative;
  z-index: 1;
  padding: 10px 18px 9px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s var(--ease);
}
.toggle button[aria-pressed="true"] { color: var(--paper); }
/* A pílula é medida a partir do botão marcado (--pill-w/--pill-x escritos
   pelo JS a partir do offsetWidth/offsetLeft dele), não de um 50% da caixa:
   os dois rótulos têm larguras diferentes e "50% + translateX(100%)" pintava
   1px fora da moldura no estado anual. Sem JS, o padrão cobre o primeiro
   botão — que é o único estado alcançável sem JS. */
.toggle__pill {
  position: absolute;
  top: 3px; bottom: 3px; left: 0;
  width: var(--pill-w, calc(50% - 4.5px));
  transform: translateX(var(--pill-x, 3px));
  background: var(--ink);
  transition: transform .38s var(--ease), width .38s var(--ease);
  z-index: 0;
}

/* align-items: stretch (padrão) é o que alinha os rodapés dos cartões: com
   "start" cada cartão tinha a própria altura e os dois CTAs não-destacados
   caíam 29px fora de registro. Com altura igual + margin-top:auto no botão,
   os três CTAs assentam na mesma linha (o do meio deslocado só pelos
   -14px deliberados do plano em destaque). */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(34px, 3.6vw, 52px);
}
.plan {
  position: relative;
  border: var(--line-w) solid var(--line);
  background: var(--paper);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 6px 6px 0 var(--shadow-c);
}
/* fundo e tinta vêm dos tokens invertidos (§1b); aqui só a sombra vermelha */
.plan--hot {
  --shadow-c: var(--red);
  --ty: -14px;
  box-shadow: 10px 10px 0 var(--red);
  transform: translateY(-14px);
}
.plan__flag {
  position: absolute;
  right: 18px; top: -18px;
  background: var(--red);
  color: var(--on-red);
  border: var(--line-w) solid var(--on-red);
  padding: 7px 12px 6px;
  font: 700 .62rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.plan__name { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; letter-spacing: -.03em; text-transform: uppercase; }
.plan__for { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.plan__price { display: flex; align-items: flex-end; gap: 6px; padding-top: 4px; }
.plan__price .cur { font-family: var(--font-mono); font-size: .82rem; font-weight: 700; padding-bottom: .55em; }
.plan__price .val {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  line-height: .86;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.plan__price .per { font-size: .82rem; color: var(--muted); padding-bottom: .5em; }
.plan__bill { font: 700 .64rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-height: 2.4em; }
.plan__list { display: grid; gap: 9px; font-size: .9rem; border-top: 1.5px solid var(--line-soft); padding-top: 16px; }
.plan__list li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; }
.plan__list svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: .28em; color: var(--red-ink); }
.plan--hot .plan__list svg { color: var(--slab-acc); }
.plan .btn { margin-top: auto; }
.plan--hot .btn { --btn-bg: var(--lime); --btn-fg: var(--on-lime); border-color: var(--slab-btn-bd); --shadow-c: var(--red); }
/* a exceção da taxa de implantação fica no próprio cartão que a cobra, e
   não só escondida numa resposta do FAQ */
.plan__warn { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; line-height: 1.4; color: var(--muted); border-top: 1.5px solid var(--line-soft); padding-top: 12px; }
.plan__warn svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: .18em; color: var(--red-ink); }
.plans-note { margin-top: clamp(22px, 2.4vw, 30px); font-size: .88rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 980px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .plan--hot { transform: none; }
}

/* --------------------------------------------------------------------------
   18. Depoimentos (bloco azul)
   -------------------------------------------------------------------------- */
/* mesma disciplina do bloco vermelho: papel = azul, tinta = --on-blue.
   A tinta fraca é o token --blue-muted (§1/§1a): creme a 90% sobre o azul do
   tema claro (5,9:1 medido em pixel) e creme cheio sobre o azul mais claro do
   tema escuro, onde os mesmos 90% mediam 4,2:1 — abaixo do piso. */
.block-blue {
  --paper:   var(--blue);
  --paper-2: var(--blue);
  --ink:     var(--on-blue);
  --muted:   var(--blue-muted);
  --line:      var(--on-blue);
  --line-soft: rgba(255, 253, 247, .3);
  --shadow-c:  var(--on-blue);
  --focus:     var(--lime);
  background: var(--paper);
  color: var(--ink);
}
.block-blue .eyebrow b { background: var(--lime); color: var(--on-lime); }
.tsts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(34px, 3.6vw, 52px);
  position: relative;
  z-index: 2;
}
/* o depoimento é um cartão de papel claro fixo dentro do bloco azul:
   congela o par papel/tinta para não herdar o azul do pai */
.tst {
  --paper:   #F4EFE6;
  --paper-2: #EDE6D9;
  --ink:     #141210;
  --muted:   #5B5348;
  --line:      #141210;
  --line-soft: rgba(20, 18, 16, .18);
  --red-ink:   #BC3409;
  --focus:     #2B32E8;
  background: var(--paper);
  color: var(--ink);
  border: var(--line-w) solid var(--line);
  box-shadow: 7px 7px 0 rgba(20, 18, 16, .9);
  padding: clamp(20px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .35s var(--ease);
}
.tst:nth-child(2) { --rot: -1deg; }
.tst:nth-child(3) { --rot: .8deg; }
.tst:hover { --rot: 0deg; --ty: -6px; transform: translateY(-6px); }
.tst__q { font-size: clamp(1rem, 1.06vw, 1.1rem); line-height: 1.48; letter-spacing: -.012em; }
/* a marcação inclui a pontuação da frase (senão sobra o "semana ." com o
   espaço do padding aparecendo antes do ponto) e o padding é clonado em
   cada linha da quebra */
.tst__q b { font-weight: 700; background: var(--lime); padding: .04em .22em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tst__who { display: flex; align-items: center; gap: 12px; margin-top: auto; border-top: 1.5px solid var(--line-soft); padding-top: 14px; }
.tst__who svg { width: 44px; height: 44px; flex: 0 0 auto; border: 1.5px solid var(--line); }
.tst__who b { display: block; font-family: var(--font-display); font-weight: 800; font-size: .95rem; letter-spacing: -.02em; }
.tst__who span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.3; }
.tst .stars svg { color: var(--red-ink); }
@media (max-width: 900px) { .tsts { grid-template-columns: minmax(0, 1fr); } .tst { transform: none !important; } }

/* --------------------------------------------------------------------------
   19. Insights
   A faixa usa a mesma gramática do resto da página: pôster desenhado (o
   mesmo que abre o painel do artigo), cor em repouso — uma laje invertida e
   um bloco vermelho — e escala assimétrica entre o destaque e os demais.
   Nada de miniatura de 56px em linha de lista.
   -------------------------------------------------------------------------- */
.posts {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 2.2vw, 34px);
  margin-top: clamp(30px, 3.4vw, 48px);
  position: relative;
  z-index: 2;
}
.posts__col { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 34px); min-width: 0; }
.posts__col--a { flex: 1 1 58%; }
.posts__col--b { flex: 1 1 42%; }
.post {
  --shadow-c: var(--page-shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--line-w) solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--shadow-c);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post:hover { --tx: -5px; --ty: -5px; transform: translate(-5px, -5px); box-shadow: 12px 12px 0 var(--shadow-c); }
.post--lead { box-shadow: 9px 9px 0 var(--shadow-c); }
.post--lead:hover { box-shadow: 14px 14px 0 var(--shadow-c); }
.post--row { flex-direction: row; align-items: stretch; }

.post__media {
  position: relative;
  overflow: hidden;
  border-bottom: var(--line-w) solid var(--line);
  background: var(--paper-2);
  flex: 0 0 auto;
}
.post__media svg { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.post:hover .post__media svg { transform: scale(1.035); }
.post--row .post__media { flex: 0 0 46%; border-bottom: 0; border-right: var(--line-w) solid var(--line); }

/* etiqueta sobre o pôster: arte de paleta clara fixa, por isso superfície
   invertida nos dois temas (§1b), igual à etiqueta dos cases */
.post__cat {
  position: absolute;
  right: 0; top: 0;
  padding: 8px 12px 7px;
  font: 700 .62rem/1 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  z-index: 2;
}
.post__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: clamp(18px, 2vw, 28px); }
.post__t {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.5vw, 1.42rem);
  letter-spacing: -.03em;
  line-height: 1.07;
}
.post--lead .post__t { font-size: clamp(1.5rem, 2.6vw, 2.25rem); letter-spacing: -.042em; line-height: 1; }
.post__x { color: var(--muted); font-size: .92rem; line-height: 1.5; }
.post--lead .post__x { font-size: clamp(1rem, 1.1vw, 1.08rem); max-width: 48ch; }
.post__m {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1.5px solid var(--line-soft);
}
.post__m i {
  font: 700 .64rem/1.4 var(--font-mono);
  font-style: normal;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
/* rótulo honesto: o clique abre o resumo do artigo, e é isso que ele diz */
.post__m .post__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: none;
}
.post__go svg { transition: transform .3s var(--ease); }
.post:hover .post__go svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .posts { flex-direction: column; }
  .posts__col { width: 100%; flex: 1 1 auto; }
  .post--row { flex-direction: column; }
  .post--row .post__media { flex: 0 0 auto; border-right: 0; border-bottom: var(--line-w) solid var(--line); }
}

/* --------------------------------------------------------------------------
   20. Time / sobre
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
}
.about__txt p + p { margin-top: 16px; }
.about__txt p { color: var(--muted); }
.about__txt strong { color: var(--ink); font-weight: 700; }
.about__sig { margin-top: 26px; display: flex; align-items: center; gap: 14px; }
.about__sig svg { width: 130px; color: var(--ink); }
/* a coluna da direita terminava 375px antes da coluna de texto e deixava um
   vazio morto: a legenda e a ficha do estúdio passaram para cá */
.about__side { display: flex; flex-direction: column; }
/* folga suficiente para a inclinação de -1,2deg da moldura, que baixa o
   canto inferior esquerdo ~7px */
.about__cap { margin-top: 20px; font-size: .82rem; line-height: 1.45; color: var(--muted); font-style: italic; }
.about__facts { border-top: var(--line-w) solid var(--line); margin-top: 26px; }
/* flex-wrap: em 320px "Março de 2017 · São Paulo/SP" empurrava a coluna
   inteira para 331px e o texto saía recortado da tela */
.about__facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1.5px solid var(--line-soft); font-size: .9rem; }
.about__facts dt { color: var(--muted); font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding-top: 3px; }
.about__facts dd { font-weight: 600; text-align: right; }

.team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: clamp(34px, 4vw, 56px); border-left: var(--line-w) solid var(--line); border-top: var(--line-w) solid var(--line); }
.mate { border-right: var(--line-w) solid var(--line); border-bottom: var(--line-w) solid var(--line); padding: 0 0 clamp(14px, 1.6vw, 20px); background: var(--paper); }
.mate__ph { border-bottom: var(--line-w) solid var(--line); overflow: hidden; }
.mate__ph svg { width: 100%; height: auto; display: block; transition: transform .5s var(--ease); }
.mate:hover .mate__ph svg { transform: scale(1.05) rotate(-1.5deg); }
.mate__b { padding: 14px clamp(12px, 1.4vw, 18px) 0; }
.mate b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: -.025em; }
.mate span { display: block; font: 700 .62rem/1.4 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--red-ink); margin-top: 5px; }
.mate p { font-size: .8rem; color: var(--muted); line-height: 1.45; margin-top: 8px; }
@media (max-width: 1000px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   21. FAQ
   -------------------------------------------------------------------------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 60px); align-items: start; position: relative; z-index: 2; }
/* <details>/<summary> nativos: sem JS o acordeão continua abrindo, o
   conteúdo fechado não fica exposto na árvore de acessibilidade e o estado
   expandido é anunciado pelo próprio navegador — nada de aria-expanded
   desencontrado nem de role="region" inflando os marcos da página. */
.faq { border-top: var(--line-w) solid var(--line); }
.faq__i { border-bottom: 1.5px solid var(--line-soft); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(16px, 1.9vw, 24px) 0;
  text-align: left;
  cursor: pointer;
  list-style: none;
  transition: color .2s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__qt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  letter-spacing: -.025em;
  line-height: 1.2;
}
.faq__q:hover { color: var(--red-ink); }
.faq__q:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.faq__ic { position: relative; flex: 0 0 auto; width: 26px; height: 26px; border: var(--line-w) solid currentColor; }
.faq__ic::before, .faq__ic::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transition: transform .35s var(--ease);
}
.faq__ic::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq__ic::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.faq__i[open] .faq__ic::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__i[open] > .faq__q { color: var(--red-ink); }
/* a altura animada só existe com JS: sem JS o <details> abre e fecha
   sozinho, com o conteúdo em altura natural */
.is-js .faq__a { overflow: hidden; transition: height .42s var(--ease); }
.faq__a > div { padding-bottom: clamp(18px, 2vw, 26px); padding-right: 44px; color: var(--muted); font-size: .96rem; line-height: 1.6; }
.faq__a p + p { margin-top: 12px; }
.faq-aside { border: var(--line-w) solid var(--line); padding: clamp(22px, 2.4vw, 32px); background: var(--paper-2); box-shadow: 7px 7px 0 var(--shadow-c); }
.faq-aside p { color: var(--muted); font-size: .93rem; margin: 12px 0 20px; }
@media (max-width: 940px) { .faq-wrap { grid-template-columns: minmax(0, 1fr); } .faq__a > div { padding-right: 0; } }

/* --------------------------------------------------------------------------
   22. CTA final (bloco lime)
   -------------------------------------------------------------------------- */
/* o campo lime desta seção usa --lime-block: lime da marca no claro, lime
   rebaixado (mesmo matiz, claridade 50%) no escuro — §1 */
.block-lime {
  --paper:   var(--lime-block);
  --paper-2: var(--lime-block);
  --ink:     var(--on-lime);
  --muted:   rgba(20, 18, 16, .78);
  --line:      var(--on-lime);
  --line-soft: rgba(20, 18, 16, .28);
  --shadow-c:  var(--on-lime);
  --focus:     var(--on-lime);
  --red-ink:   var(--on-lime);
  background: var(--paper);
  color: var(--ink);
}
.cta-final { text-align: center; position: relative; z-index: 2; }
.cta-final .d1 { font-size: clamp(2.7rem, 8.6vw, 7.8rem); }
.cta-final .lede { margin: clamp(22px, 2.6vw, 32px) auto 0; color: var(--muted); }
.cta-final__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(28px, 3vw, 40px); }
.cta-final__mini { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; font: 700 .66rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------------------
   23. Contato / formulário
   -------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 66px); align-items: start; }
@media (max-width: 980px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.contact__info dl { margin-top: 28px; border-top: var(--line-w) solid var(--line); }
.contact__info dl > div { padding: 14px 0; border-bottom: 1.5px solid var(--line-soft); }
.contact__info dt { font: 700 .64rem/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.contact__info dd { margin-top: 7px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; }
.contact__info dd a:hover { color: var(--red-ink); }

.form {
  border: var(--line-w) solid var(--line);
  background: var(--paper-2);
  padding: clamp(22px, 2.6vw, 36px);
  box-shadow: 9px 9px 0 var(--shadow-c);
  position: relative;
}
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.f-col-2 { grid-column: span 2; }
@media (max-width: 640px) { .form__grid { grid-template-columns: minmax(0, 1fr); } .f-col-2 { grid-column: auto; } }

.field label, .fieldset legend {
  display: block;
  font: 700 .64rem/1 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--ink);
}
.field label .opt { color: var(--muted); letter-spacing: .08em; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 14px;
  background: var(--paper);
  border: var(--line-w) solid var(--line);
  color: var(--ink);
  font-size: .96rem;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
  appearance: none;
  border-radius: 0;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1.25em), calc(100% - 14px) calc(1.25em);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .75; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--red);
  border-color: var(--line);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.field .err {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font: 700 .66rem/1.3 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--danger);
}
.field.is-err input, .field.is-err select, .field.is-err textarea { border-color: var(--danger); background: var(--danger-bg); }
.field.is-err .err { display: flex; }
.field .err svg { width: 13px; height: 13px; flex: 0 0 auto; }

.fieldset { border: 0; padding: 0; margin: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; }
.radios label {
  position: relative;
  margin: 0;
  padding: 11px 14px 10px;
  border: var(--line-w) solid var(--line);
  cursor: pointer;
  background: var(--paper);
  transition: background-color .2s var(--ease), color .2s var(--ease);
  letter-spacing: .1em;
}
.radios input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radios input:checked + span { color: inherit; }
.radios label:has(input:checked) { background: var(--ink); color: var(--paper); }
.radios label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.field .check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  margin-bottom: 0;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: -.006em;
  text-transform: none;
}
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  border: var(--line-w) solid var(--line);
  background: var(--paper);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.check .box svg { width: 13px; height: 13px; opacity: 0; transform: scale(.5); transition: opacity .18s linear, transform .25s var(--ease); color: var(--paper); }
.check input:checked + .box { background: var(--ink); }
.check input:checked + .box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .box { outline: 3px solid var(--focus); outline-offset: 2px; }
.check span.t { font-size: .84rem; color: var(--muted); line-height: 1.45; }
.check span.t a { text-decoration: underline; text-underline-offset: 3px; }
.field.is-err .box { border-color: var(--danger); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-top: 24px; }
.form__ass { flex: 1; min-width: 200px; display: grid; gap: 7px; }
.form__note { font: 700 .64rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* micro-reasseguros: o que acontece com o dado, dito ao lado do botão */
.form__priv { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; line-height: 1.4; color: var(--muted); }
.form__priv svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: .18em; color: var(--red-ink); }
/* contador do campo longo: diz quanto falta antes de o erro aparecer */
.count { margin-top: 7px; font: 700 .64rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.count.is-ok { color: var(--ink); }
.field.is-err .count { display: none; }

/* ESTADO DE CARREGANDO DO BOTÃO
   Sem pointer-events:none. Ele tirava o botão da árvore de acerto e os
   cliques 2..5 atravessavam para o cartão atrás: o envio continuava barrado
   (guarda "sending" no submit), mas o foco caía no <body> e quem clicou
   ficava sem posição nenhuma no documento. Agora o botão continua sendo o
   alvo sob o cursor — quem barra o segundo envio é só a guarda. */
.btn.is-loading { opacity: .92; cursor: progress; }
/* RESERVA DE LARGURA E DE ALTURA
   "Enviando…" é 49,4px mais curto que "Enviar mensagem": o botão encolhia e
   subia 4,7px no meio do envio. O rótulo ocioso é desenhado em altura zero
   por baixo do rótulo corrente (data-idle), então a caixa nasce com a maior
   das duas larguras e não se mexe. A altura vem do ícone: a seta some e o
   giro entra, ambos com a mesma caixa de 18px e a mesma margem. */
/* Reserva de LARGURA (o ::before abaixo) e de ALTURA (o `height: 1em` com
   `line-height: 1`): a caixa do rótulo passa a medir exatamente o corpo da
   fonte, igual com "Enviar mensagem" e com "Enviando…". Sem a altura travada,
   a troca de rótulo mudava a caixa de linha em 0,46px e o botão encolhia
   0,81px de altura no instante do envio — pequeno, mas é um salto de layout
   no único momento em que o usuário está olhando para o botão. */
.btn-txt { display: inline-block; line-height: 1; height: 1em; }
.btn-txt::before {
  content: attr(data-idle);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.spin { width: 18px; height: 18px; margin-block: -2px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-alert {
  display: none;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 16px;
  border: var(--line-w) solid var(--danger);
  background: var(--danger-bg);
  margin-bottom: 20px;
  font-size: .9rem;
  line-height: 1.45;
}
.form-alert.is-on { display: flex; }
.form-alert svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--danger); margin-top: 2px; }

.form-ok { display: none; text-align: center; padding: clamp(20px, 3vw, 40px) 6px; }
.form-ok.is-on { display: block; animation: pop .5s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
.form-ok__ic {
  width: 66px; height: 66px;
  margin: 0 auto 20px;
  border: var(--line-w) solid var(--line);
  background: var(--lime);
  display: grid;
  place-items: center;
  transform: rotate(-4deg);
  box-shadow: 5px 5px 0 var(--shadow-c);
}
.form-ok__ic svg { width: 30px; height: 30px; color: var(--on-lime); }
.form-ok p { color: var(--muted); margin: 12px auto 22px; max-width: 44ch; }
.form.is-sent .form__body { display: none; }

/* --------------------------------------------------------------------------
   23b. Páginas de documento (privacidade e termos)
   -------------------------------------------------------------------------- */
.doc-hero { padding-block: clamp(46px, 5.5vw, 86px) clamp(28px, 3vw, 44px); position: relative; overflow: clip; }
/* mesmo motivo do .sec-head: o conteúdo fica acima da palavra-fantasma */
.doc-hero > .wrap { position: relative; z-index: 2; }
.doc-hero .d1 { font-size: clamp(2.5rem, 7.4vw, 6rem); max-width: 14ch; }
.doc-hero .lede { margin-top: clamp(20px, 2.4vw, 30px); }
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: clamp(22px, 2.6vw, 32px);
  padding-top: 18px;
  border-top: var(--line-w) solid var(--line);
  font: 700 .66rem/1.4 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-meta b { color: var(--ink); font-weight: 700; }

.doc-wrap {
  display: grid;
  grid-template-columns: minmax(0, .36fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(60px, 7vw, 110px);
}
.doc-nav { position: sticky; top: calc(clamp(64px, 6.4vw, 78px) + 20px); border-top: var(--line-w) solid var(--line); padding-top: 18px; }
.doc-nav h2 { font: 700 .66rem/1 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.doc-nav ol { counter-reset: d; display: grid; gap: 2px; }
.doc-nav a {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  font-size: .88rem;
  line-height: 1.35;
  color: var(--muted);
  transition: color .2s var(--ease), padding-left .25s var(--ease);
}
.doc-nav a::before {
  counter-increment: d;
  content: counter(d, decimal-leading-zero);
  font: 700 .64rem/1.6 var(--font-mono);
  color: var(--red-ink);
  flex: 0 0 auto;
}
.doc-nav a:hover { color: var(--ink); padding-left: 6px; }
/* seção em leitura: marcada com aria-current pelo JS (§índice) e desenhada
   com barra + tinta cheia, para não depender só de peso de fonte */
.doc-nav a[aria-current] {
  color: var(--ink);
  font-weight: 700;
  box-shadow: -8px 0 0 -6px var(--red-ink);
  padding-left: 6px;
}
.doc-nav a[aria-current]::before { color: var(--ink); }

.doc-body { max-width: 68ch; }
.doc-body section + section { margin-top: clamp(34px, 4vw, 54px); }
.doc-body h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.28rem, 2vw, 1.7rem);
  letter-spacing: -.03em;
  line-height: 1.1;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: var(--line-w) solid var(--line);
}
.doc-body h2 i {
  font: 700 .64rem/1 var(--font-mono);
  font-style: normal;
  letter-spacing: .12em;
  color: var(--red-ink);
  display: block;
  margin-bottom: 9px;
}
.doc-body h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; margin-top: 20px; margin-bottom: 6px; }
.doc-body p { color: var(--muted); font-size: .98rem; line-height: 1.62; }
.doc-body p + p { margin-top: 12px; }
.doc-body strong { color: var(--ink); font-weight: 700; }
/* :not(.btn) é obrigatório: sem isso o link-botão do fim do documento
   herdava tinta vermelha sobre bloco vermelho (1,72:1) */
.doc-body a:not(.btn) { color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }
.doc-body ul { display: grid; gap: 9px; margin-top: 12px; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.doc-body ul li { position: relative; padding-left: 18px; }
.doc-body ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; background: var(--red-ink); }
.doc-body dl { border-top: 1.5px solid var(--line-soft); margin-top: 14px; }
.doc-body dl > div { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: space-between; padding: 11px 0; border-bottom: 1.5px solid var(--line-soft); font-size: .9rem; }
.doc-body dt { font: 700 .64rem/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.doc-body dd { font-weight: 600; text-align: right; }
.doc-cta {
  margin-top: clamp(34px, 4vw, 54px);
  border: var(--line-w) solid var(--line);
  background: var(--paper-2);
  box-shadow: 7px 7px 0 var(--shadow-c);
  padding: clamp(22px, 2.4vw, 32px);
}
.doc-cta p { color: var(--muted); font-size: .93rem; margin: 10px 0 20px; }
@media (max-width: 900px) {
  .doc-wrap { grid-template-columns: minmax(0, 1fr); }
  .doc-nav { position: static; }
}

/* --------------------------------------------------------------------------
   24. Rodapé
   -------------------------------------------------------------------------- */
/* fundo e tinta vêm dos tokens invertidos (§1b) */
.foot {
  position: relative;
  overflow: clip;
  padding-top: clamp(50px, 6vw, 90px);
}
.foot__top { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, .62fr)); gap: clamp(24px, 3vw, 46px); padding-bottom: clamp(36px, 4vw, 60px); }
.foot__news { max-width: 40ch; }
.foot .brand svg { color: var(--ink); }
.foot__news p { color: var(--muted); font-size: .92rem; margin: 12px 0 18px; }
.news-form { display: flex; border: var(--line-w) solid var(--ink); }
.news-form input {
  flex: 1;
  min-width: 0;
  padding: 14px 14px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: .92rem;
}
.news-form input::placeholder { color: var(--muted); opacity: 1; }
/* o campo da newsletter tem indicador de foco visível como todas as outras
   paradas de teclado: anel por dentro da borda, com ou sem mouse */
.news-form input:focus {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
  background: var(--slab-tint);
}
.news-form input:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.news-form button {
  padding: 0 18px;
  background: var(--lime);
  color: var(--on-lime);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .88rem;
  border-left: var(--line-w) solid var(--ink);
  transition: background-color .2s var(--ease);
}
.news-form button:hover { background: var(--red); }
.news-msg { margin-top: 9px; font: 700 .64rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; min-height: 1.2em; }
.news-msg.ok { color: var(--slab-acc); }
.news-msg.no { color: var(--danger); }

.foot__col h3 { font: 700 .64rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.foot__col li + li { margin-top: 9px; }
.foot__col a { font-size: .94rem; position: relative; transition: color .2s var(--ease), padding-left .25s var(--ease); }
.foot__col a:hover { color: var(--slab-acc); padding-left: 8px; }

/* Sangria simétrica do wordmark gigante.
   O desenho antigo pedia width:118% + margin-left:-9%, mas o reset tem
   svg{max-width:100%}: a largura era cortada em 100% e só o deslocamento
   negativo sobrava — 23px comidos à esquerda contra 203px de folga à
   direita, o que lê como estouro e não como sangria. Aqui a largura é
   liberada (max-width:none) e o excesso é o MESMO dos dois lados. O
   símbolo #wm-xl tem viewBox colado à tinta, então a caixa do <svg> é a
   própria letra: margem simétrica = corte simétrico. */
.foot__mark { position: relative; border-top: var(--line-w) solid var(--line); padding-top: clamp(18px, 2vw, 26px); --wm-bleed: clamp(20px, 3.8vw, 56px); }
.foot__mark svg {
  width: calc(100% + (var(--pad-x) + var(--wm-bleed)) * 2);
  max-width: none;
  margin-left: calc((var(--pad-x) + var(--wm-bleed)) * -1);
  display: block;
  color: var(--ink);
  transform: translate3d(0, var(--py, 0px), 0);
}

.foot__bot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-top: 1.5px solid var(--line-soft);
  margin-top: clamp(18px, 2vw, 26px);
}
.foot__legal { font: 700 .64rem/1.7 var(--font-mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.foot__seals { display: flex; flex-wrap: wrap; gap: 8px; }
.seal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--line-soft);
  padding: 7px 11px 6px;
  font: 700 .6rem/1 var(--font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
.seal svg { width: 13px; height: 13px; color: var(--slab-acc); }
.socials { display: flex; gap: 8px; }
.socials a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line-soft);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover { background: var(--slab-acc); color: var(--slab-paper); transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; }
@media (max-width: 900px) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot__top { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   25. Reveals / movimento
   -------------------------------------------------------------------------- */
.is-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0) rotate(var(--rot-in, -1.2deg));
  transition: opacity .75s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.is-js [data-reveal].is-in {
  opacity: 1;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--rot, 0deg));
}
.is-js [data-reveal].is-instant,
.is-js [data-lines].is-instant .ln > span { transition: none !important; }

/* A máscara de linha precisa de folga em cima (acentos: Ê, Á, Ú)
   e embaixo (descendentes do itálico serifado), sem alterar o layout. */
.ln {
  display: block;
  overflow: hidden;
  padding-top: .22em;
  margin-top: -.22em;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.ln > span {
  display: block;
  transform: translateY(112%);
  transition: transform .95s var(--ease);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.is-js [data-lines].is-in .ln > span, html:not(.is-js) .ln > span { transform: translateY(0); }
html:not(.is-js) .ln > span { transform: none; }

[data-parallax] { will-change: transform; }

/* --------------------------------------------------------------------------
   26. Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .is-js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ln > span { transform: none !important; }
  .cursor { display: none !important; }
  html.is-js, html.is-js * { cursor: auto !important; }
  .pulse::after { display: none; }
  .browser, .hl-block, .tag-sticker, .badge-score, .mq--a, .mq--b, .tst { transform: none !important; }
}

/* --------------------------------------------------------------------------
   27. Impressão
   -------------------------------------------------------------------------- */
@media print {
  .hdr, .menu, .cursor, .grain, .mq-zone, .foot__mark { display: none !important; }
  body { background: #fff; color: #000; }
}