/* ══════════════════════════════════════════════════════════════════════════
   BONONI · BASE
   Tipografia, secoes, botoes, pilulas de topico, cards, grid de prancha,
   microdetalhes e movimento. Consome SO tokens de bononi-tokens.css.
   Nada aqui conhece um hex. Tudo aqui funciona em qualquer data-sec.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── hidden REALMENTE esconde ────────────────────────────────────────
   05/08/2026. O atributo hidden do HTML vale display:none, mas essa regra
   vem da folha do NAVEGADOR, e qualquer display do autor a derruba. Na home,
   .bcon__empty tinha display:flex e .bcon__clear display:grid, entao os dois
   apareciam sempre: o "Nada encontrado" ficava visivel com a grade cheia.
   O bononi-blog.css ja remendava isso classe por classe (.blq__count[hidden],
   .blq__x[hidden]). Uma regra global resolve as de hoje e as de amanha.     */
[hidden]{display:none!important}

/* ── TIPOGRAFIA ─────────────────────────────────────────────────────── */
body{
  font-family:var(--f-sans);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01' 1,'cv11' 1,'tnum' 0;
}
/* Italico banido globalmente (regra de marca). <em> vira gancho de destaque. */
em,i,cite,dfn,var,address{font-style:normal}

h1,h2,h3,h4,.h1,.h2,.h3{
  font-family:var(--f-disp);
  font-weight:600;
  line-height:var(--lh-head);
  color:var(--s-ink,var(--ink));
  text-wrap:balance;
}
.h1,h1{font-size:var(--t-h1);letter-spacing:var(--ls-h1);line-height:var(--lh-tight)}
/* 11/08/2026 · O h2 tambem entrelinha APERTADA, como o h1 ja tinha.
   Ele ficou com `--lh-head` (1,14) enquanto o h1 usava `--lh-tight` (1,06), e
   1,14 nao e uma escolha errada em si: e a entrelinha certa para um h3 de 20px.
   Num h2 que chega a 47px ela abre 53,8px de linha, e o que se ve e um titulo de
   tres linhas soltas uma da outra. Regra tipografica de sempre: quanto maior o
   corpo, menor a entrelinha relativa. `--lh-head` segue valendo para h3 e h4,
   que sao pequenos e precisam dela. */
.h2,h2{font-size:var(--t-h2);letter-spacing:var(--ls-h2);line-height:var(--lh-tight)}
.h3,h3{font-size:var(--t-h3);letter-spacing:-.018em}

/* <em> = gancho de degrade na cor da marca, jamais italico */
h1 em,h2 em,h3 em,.h1 em,.h2 em,.h3 em{
  background:linear-gradient(96deg,var(--s-accent,var(--navy-600)),color-mix(in srgb,var(--s-accent,var(--navy-600)) 55%,var(--c1)));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
[data-sec="ink"] h1 em,[data-sec="deep"] h1 em,[data-sec="brand"] h1 em,
[data-sec="ink"] h2 em,[data-sec="deep"] h2 em,[data-sec="brand"] h2 em{
  background:linear-gradient(96deg,#fff,var(--navy-100) 70%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

.lead{font-size:var(--t-lead);line-height:1.5;color:var(--s-ink-2,var(--ink-2));max-width:62ch;letter-spacing:-.012em}
.muted{color:var(--s-ink-3,var(--ink-3))}
.tx-sm{font-size:var(--t-sm)}

/* Eyebrow: rotulo tecnico com ponto pulsante */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:var(--t-eyebrow);font-weight:500;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--s-ink-3,var(--ink-3));
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--s-accent,var(--navy-600));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--s-accent,var(--navy-600)) 18%,transparent);
  animation:bnPulse 2.8s var(--e-io) infinite;
}
@keyframes bnPulse{0%,100%{opacity:.45;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}

/* Numero de indice tecnico (01, 02, 03...) */
.idx{
  font-family:var(--f-mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:var(--ls-mono);color:var(--s-ink-3,var(--ink-3));
  font-variant-numeric:tabular-nums;
}

/* ══ A MIRA DE REGISTRO ═══════════════════════════════════════════════════════
   12/08/2026 · Cursor proprio, e ele NAO vale no site inteiro, por escolha:
   cursor customizado sobre texto tira o I-beam e sobre botao tira a mao, e ai
   atrapalha em vez de encantar. Ele entra nas cinco superficies onde o site esta
   literalmente desenhando, e ali ele diz "voce esta na prancha":

     .bhero        o video e a abertura (menos a coluna de texto, ver abaixo)
     .bfed__scene  a pilha do modelo federado, que e `aria-hidden`, desenho puro
     .bwipe__stage o palco da costura entre modelo e obra
     .besc__faixa  a faixa com a frente de luz
     .bmac__plot   o grafico de MacLeamy

   O DESENHO e uma marca de registro, o mesmo vocabulario dos `regmark` que ja
   existem nos cantos das secoes: cruz com falha no meio (a falha e o que deixa o
   ponto exato visivel), quadrado hairline em volta, e um ponto em `--c1` no
   centro, que e a cor de projeto.

   Traco BRANCO com halo escuro, e nao o contrario: as superficies aqui vao de
   navy quase preto (hero, palco) a papel claro (MacLeamy), e branco com contorno
   escuro e a unica combinacao que sobrevive nas duas, que e o mesmo motivo de o
   cursor nativo do sistema ser preto e branco.

   `crosshair` no fim NAO e enfeite: e o que aparece se o SVG falhar por CSP ou
   por navegador antigo. Sem ele a falha voltaria para a flecha comum e o efeito
   sumiria sem aviso.

   `hover:hover and pointer:fine` porque no dedo nao existe cursor, e carregar o
   SVG ali seria byte gasto sem nada na tela.                                   */
:root{
  --mira:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2226%22 height=%2226%22 viewBox=%220 0 26 26%22%3E%3Cg fill=%22none%22 stroke=%22%230B121A%22 stroke-width=%223.4%22 stroke-opacity=%22.42%22 stroke-linecap=%22square%22%3E%3Cpath d=%22M13 1.5v7.2M13 17.3v7.2M1.5 13h7.2M17.3 13h7.2%22/%3E%3Crect x=%227%22 y=%227%22 width=%2212%22 height=%2212%22/%3E%3C/g%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.25%22 stroke-linecap=%22square%22%3E%3Cpath d=%22M13 1.5v7.2M13 17.3v7.2M1.5 13h7.2M17.3 13h7.2%22/%3E%3Crect x=%227%22 y=%227%22 width=%2212%22 height=%2212%22/%3E%3C/g%3E%3Ccircle cx=%2213%22 cy=%2213%22 r=%221.15%22 fill=%22%233B7FC9%22/%3E%3C/svg%3E") 13 13, crosshair;
}
@media(hover:hover) and (pointer:fine){
  :is(.bhero,.bfed__scene,.bwipe__stage,.besc__faixa,.bmac__plot){cursor:var(--mira)}
  /* A coluna de texto da hero volta ao normal: e onde se LE e se seleciona, e
     mira sobre paragrafo e mira no lugar errado. */
  .bhero__in{cursor:auto}
  /* E o que e clicavel volta a ter mao, em qualquer uma das superficies. */
  :is(.bhero,.bfed__scene,.bwipe__stage,.besc__faixa,.bmac__plot)
    :is(a,button,summary,label,input,select,textarea,[role="button"]){cursor:pointer}
}

/* ── LAYOUT ─────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-n{width:100%;max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:var(--sec-y);overflow:clip}

/* ══ POR QUE NAO TEM `content-visibility:auto` AQUI ═══════════════════════════
   12/08/2026 · Eu coloquei, e tirei no mesmo dia. Fica registrado para nao
   voltar sem medir.

   O argumento era bom: 11 das 13 secoes da home estao fora da tela no
   carregamento, 10.224px de uma pagina de 12.633px, e `content-visibility:auto`
   manda o navegador pular layout e pintura de tudo isso.

   O que ele NAO diz: o trabalho pulado nao desaparece, ele muda de hora. Cada
   secao e layoutada e pintada no quadro em que ela fica "relevante", ou seja
   durante a rolagem. Numa pagina que se percorre inteira sao 12 picos de
   trabalho espalhados pelo caminho, e pico durante rolagem e exatamente o
   engasgo que se estava tentando eliminar. Trocar custo constante e previsivel
   por 12 picos e o oposto de melhorar a sensacao.

   E, honestamente: eu nao consegui medir ganho nenhum aqui (o painel do
   navegador nao entrega quadros, ver o topo de bononi-scroll.js), entao era uma
   otimizacao no escuro. A que ficou, a de `will-change` logo abaixo, tem
   mecanismo provado e numero: 73 camadas compostas permanentes viraram 0.

   Se algum dia voltar, o pre-requisito e um profile de verdade mostrando os
   picos ANTES e DEPOIS, e um `contain-intrinsic-size` por secao com a altura
   real dela, nao um 720px generico para todas.                               */
/* 11/08/2026 · `container-type:inline-size` para o bloco de cabecalho poder
   reagir a LARGURA DELE, e nao a da janela. Ver a regra de tamanho abaixo. */
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(30px,4.4vw,58px);
  container-type:inline-size}

/* ── O VAO DEPOIS DO CABECALHO DEPENDE DE QUEM VEM DEPOIS ─────────────────
   11/08/2026 · Eram 58px sempre (medido em 1430px de janela), e 58px e a medida
   certa para separar o cabecalho de OUTRO OBJETO: uma grade de cartoes, um
   carrossel, uma figura. Antes de um PARAGRAFO ela e demais, porque ali o texto
   nao e outro objeto, e a continuacao da mesma frase que o titulo comecou.

   Na home sao quatro casos de titulo seguido de paragrafo (sobre, solucao,
   duvidas e a nota do escopo) contra seis de titulo seguido de bloco. O `:has`
   separa os dois sem precisar de classe nova em nenhum HTML: quem decide e a
   estrutura, e ela ja esta escrita.

   30px, e nao um numero solto: os paragrafos do texto se separam entre si por
   ~24px, e o cabecalho se separa por dentro (eyebrow para titulo) por 14px. Em
   30px o titulo fica mais perto do proprio texto do que da secao seguinte, que
   e a hierarquia correta.                                                   */
.sec-head:has(+ p){margin-bottom:clamp(20px,2.2vw,30px)}
/* 22ch para 26ch, e 34 para 38 no wide. 22ch e uma boa medida para PARAGRAFO;
   num titulo de 47px ela cabe umas quatro palavras por linha, e por isso titulos
   de sete palavras viravam tres linhas mesmo com 1152px de container disponivel
   (medido: o titulo dos formatos de contratacao usava 47% da largura que tinha).
   Com 26ch a linha continua confortavel e vira duas em vez de tres. */
.sec-head .h2{max-width:26ch}
.sec-head--wide .h2{max-width:38ch}

/* ── O TITULO EM COLUNA ESTREITA ──────────────────────────────────────────
   Este e o outro motivo de o titulo parecer arejado, e o mais dificil de ver:
   `--t-h2` cresce com a JANELA, nao com a caixa onde o titulo esta. Num
   cabecalho que vive numa coluna de 435px (o das duvidas na home, o da secao de
   solucao) a janela de 1270px pedia 47px de corpo, e 47px em 435px dao nove
   caracteres por linha. Nenhuma entrelinha salva um titulo com nove caracteres
   por linha: ele vai virar tres ou quatro linhas curtas.

   Com container query o corpo passa a responder a coluna: abaixo de 700px de
   caixa, o h2 desce um degrau e volta a caber em duas linhas. Serve para
   qualquer cabecalho estreito, inclusive os que ainda nao existem.

   O 700 saiu de MEDIR as caixas, e nao de escolher um numero redondo. Na home
   elas se distribuem em 435px (duvidas), 571 (solucao), 588 (sobre) e 1152 (as
   outras sete). Ou seja: tres estreitas, sete largas, e um vao de 564px entre os
   dois grupos. Qualquer limite entre 600 e 1100 separa os dois; 700 fica no meio
   desse vao e nao encosta em nenhuma das duas pontas.                        */
@container (max-width:700px){
  .sec-head .h2{font-size:clamp(1.55rem,1.1rem + 3.4cqi,2.35rem)}
}

/* Grid de prancha: o substrato tecnico da marca. Vive em ::before para nao
   competir com o conteudo e nunca interceptar clique. */
.sec--grid::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--s-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--s-grid) 1px,transparent 1px);
  background-size:var(--grid-step) var(--grid-step);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
}
.sec > .wrap,.sec > .wrap-n{position:relative;z-index:1}

/* Marcas de registro nos cantos: microdetalhe tirado da propria logo */
.regmark{position:absolute;width:15px;height:15px;pointer-events:none;opacity:.5;z-index:1}
.regmark::before,.regmark::after{content:"";position:absolute;background:var(--s-line)}
.regmark::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.regmark::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
.regmark--tl{top:22px;left:22px}
.regmark--tr{top:22px;right:22px}
.regmark--bl{bottom:22px;left:22px}
.regmark--br{bottom:22px;right:22px}
@media(max-width:760px){.regmark{display:none}}

/* Filete de secao: linha de cota que separa duas superficies */
.hair{height:1px;background:linear-gradient(90deg,transparent,var(--s-line),transparent);border:0}

/* ── PILULAS DE TOPICO (o que o Joao pediu: cor para destacar informacao) ──
   Uso: <span class="pill pill--c1">Escopo</span>
   Fundo tintado + filete + ink escuro da propria cor. Sempre COM texto:
   e o rotulo que cobre o WARN de contraste do ambar. */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px 5px 10px;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  background:color-mix(in srgb,var(--pc,var(--navy-600)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--pc,var(--navy-600)) 34%,transparent);
  color:var(--pci,var(--navy-600));
}
.pill::before{
  content:"";width:6px;height:6px;border-radius:2px;
  background:var(--pc,var(--navy-600));flex:none;
}
.pill--c1{--pc:var(--c1);--pci:var(--c1-ink)}
.pill--c2{--pc:var(--c2);--pci:var(--c2-ink)}
.pill--c3{--pc:var(--c3);--pci:var(--c3-ink)}
.pill--c4{--pc:var(--c4);--pci:var(--c4-ink)}
.pill--c5{--pc:var(--c5);--pci:var(--c5-ink)}
.pill--navy{--pc:var(--navy-600);--pci:var(--navy-600)}
/* Em fundo escuro o ink escuro nao serve: usa o proprio step, que ja tem 3:1+ */
[data-sec="ink"] .pill,[data-sec="deep"] .pill,[data-sec="brand"] .pill{
  color:color-mix(in srgb,var(--pc,var(--navy-100)) 72%,#fff);
  background:color-mix(in srgb,var(--pc,var(--navy-100)) 20%,transparent);
  border-color:color-mix(in srgb,var(--pc,var(--navy-100)) 42%,transparent);
}
[data-sec="ink"] .pill--c4,[data-sec="deep"] .pill--c4,[data-sec="brand"] .pill--c4{--pc:var(--c4-dark)}

/* ── BOTOES ─────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--navy-600);--btn-ink:var(--paper);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 27px;border-radius:var(--r-pill);border:1px solid transparent;
  font-family:var(--f-sans);font-size:var(--t-sm);font-weight:600;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;
  background:var(--btn-bg);color:var(--btn-ink);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-mid) var(--e-out),
             background var(--d-mid) var(--e-out),border-color var(--d-mid) var(--e-out);
  box-shadow:0 1px 2px rgba(11,18,26,.14),0 10px 24px -12px color-mix(in srgb,var(--btn-bg) 60%,transparent),
             inset 0 1px 0 rgba(255,255,255,.14);
}
/* shine sweep: brilho diagonal no hover */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.26) 48%,transparent 62%);
  transform:translateX(-115%) skewX(-14deg);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{transform:translateX(115%) skewX(-14deg);transition:transform .74s var(--e-out)}
.btn:active{transform:translateY(0) scale(.985)}
.btn i{font-size:1.03em}

.btn--primary{--btn-bg:var(--navy-600)}
/* Em superficie escura o botao navy some no fundo navy. Nessas secoes o CTA
   primario inverte para papel com tinta navy: e o par de maior contraste da
   paleta e continua sobrio, sem precisar de cor de fora da marca. */
[data-sec="ink"] .btn--primary,
[data-sec="deep"] .btn--primary,
[data-sec="brand"] .btn--primary,
.bh .btn--primary{
  --btn-bg:var(--paper); --btn-ink:var(--navy-700);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 28px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6);
}
[data-sec="ink"] .btn--primary:hover,
[data-sec="deep"] .btn--primary:hover,
[data-sec="brand"] .btn--primary:hover,
.bh .btn--primary:hover{--btn-bg:#fff}
.btn--wa{--btn-bg:var(--wa-d);background:linear-gradient(135deg,var(--wa),var(--wa-d))}
.btn--ghost{
  --btn-bg:transparent;--btn-ink:var(--s-ink,var(--ink));
  border-color:var(--s-line,rgba(41,66,93,.3));box-shadow:none;
}
.btn--ghost:hover{background:color-mix(in srgb,var(--s-ink,var(--ink)) 6%,transparent);box-shadow:none}
.btn--light{--btn-bg:var(--paper);--btn-ink:var(--navy-600)}
.btn--lg{padding:18px 34px;font-size:var(--t-body)}
.btn--block{width:100%}

/* Link com seta que anda */
.arrow-link{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-weight:600;font-size:var(--t-sm);color:var(--s-accent,var(--navy-600));
}
.arrow-link i{transition:transform var(--d-mid) var(--e-out)}
.arrow-link:hover i{transform:translateX(5px)}
.arrow-link::after{
  content:"";position:absolute;
}

/* ── CARDS ──────────────────────────────────────────────────────────── */
/* ══ A LUZ QUE SEGUE A MAO ════════════════════════════════════════════════
   12/08/2026 · `--lume` precisa de `@property` porque custom property sem tipo
   registrado nao interpola: sem isto o brilho ligaria e desligaria seco, e o que
   se quer e ele nascer e morrer junto com o hover. Registrado como
   `<percentage>`, ele entra na transicao do `.card` como qualquer outra
   propriedade.
   `inherits:false` de proposito: cartao dentro de cartao nao herda o brilho do
   pai, senao a luz apareceria em dois lugares com um ponteiro so. */
@property --lume{syntax:'<percentage>';inherits:false;initial-value:0%}

.card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  /* O padding vira VARIAVEL para que qualquer filho que precise sangrar ate a
     borda possa usar a medida exata em margem negativa, em vez de repetir o
     clamp ou chutar um valor. Foi o que a faixa ultrawide de .bprob__cap pediu:
     com um numero aproximado sobrava moldura de um lado. */
  --pad-card:clamp(20px,2.4vw,30px);
  padding:var(--pad-card);border-radius:var(--r-lg);
  /* A luz do ponteiro pinta no FUNDO do cartao, antes de todo o conteudo. Um
     pseudo-elemento posicionado pintaria acima do texto (ordem de pintura:
     descendente posicionado vem depois do conteudo em fluxo) e comeria
     contraste. `--mx`/`--my` sao escritos por bononi-scroll.js; sem ele o centro
     fica no meio e `--lume` fica em 0%, ou seja, invisivel.

     COR E IMAGEM EM LONGHANDS SEPARADAS, e isso nao e estilo, e rede de
     seguranca: `var(--lume)` sem `@property` (Firefox ESR 115, Safari ate 16.3)
     nao tem valor, o `color-mix` fica invalido e, se as duas estivessem no
     shorthand `background`, a declaracao inteira cairia levando a cor da
     superficie junto, ou seja cartao transparente. Separadas, o pior caso e a
     luz nao existir. O `var(--lume,0%)` fecha o mesmo furo por dentro. */
  background-color:var(--s-card,var(--paper));
  background-image:
    radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
      color-mix(in srgb,var(--ca,var(--s-accent,var(--c1))) var(--lume,0%),transparent),
      transparent 64%);
  border:1px solid var(--s-line-soft,rgba(41,66,93,.08));
  box-shadow:var(--sh-1);
  transition:transform var(--d-mid) var(--e-out),box-shadow var(--d-mid) var(--e-out),
             border-color var(--d-mid) var(--e-out),--lume var(--d-mid) var(--e-out);
  overflow:hidden;
}
/* A luz so existe onde ha ponteiro de verdade. No dedo o hover fica preso depois
   do toque, e um cartao aceso sem motivo e pior que cartao nenhum aceso. */
@media(hover:hover){ .card:hover{--lume:15%} }
/* filete de topo que acende no hover: microdetalhe */
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ca,var(--s-accent,var(--navy-600))),transparent);
  opacity:0;transition:opacity var(--d-mid) var(--e-out);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--s-shadow,var(--sh-2));
  border-color:color-mix(in srgb,var(--ca,var(--s-accent,var(--navy-600))) 34%,transparent)}
.card:hover::before{opacity:1}
.card--c1{--ca:var(--c1)} .card--c2{--ca:var(--c2)} .card--c3{--ca:var(--c3)}
.card--c4{--ca:var(--c4)} .card--c5{--ca:var(--c5)}
.card__ico{
  width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  font-size:19px;color:var(--ca,var(--s-accent,var(--navy-600)));
  background:color-mix(in srgb,var(--ca,var(--s-accent,var(--navy-600))) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--ca,var(--s-accent,var(--navy-600))) 24%,transparent);
}
.card__t{font-size:var(--t-h3);font-family:var(--f-disp);font-weight:600;letter-spacing:-.018em}
.card__d{color:var(--s-ink-2,var(--ink-2));font-size:var(--t-sm);line-height:1.62}

/* grids utilitarios */
.g{display:grid;gap:var(--gap)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1024px){.g-4,.g-5{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g-2,.g-3,.g-4,.g-5{grid-template-columns:1fr}}

/* ── MOVIMENTO: reveal (data-rv ja tem observer global no base.php) ──── */
[data-rv]{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--d-slow) var(--e-out) var(--rv-d,0ms),
             transform var(--d-slow) var(--e-out) var(--rv-d,0ms);
}
/* 12/08/2026 · SAIU o `will-change:opacity,transform` que estava na regra de
   cima, e essa e a correcao de rolagem mais barata do site. Medido na home:
   73 elementos com `data-rv`, logo 73 camadas compostas que o navegador criava
   no carregamento e mantinha na memoria para sempre, inclusive nas 11 secoes
   que ninguem estava vendo.
   `will-change` serve para AVISAR de uma mudanca que vem, e depois sair. Aqui
   ele nunca saia. E nao era necessario: navegador nenhum precisa do aviso para
   compor uma transicao de `opacity`/`transform`, ele promove quando a transicao
   comeca e libera quando ela termina, que e exatamente a janela util.
   Tentativa intermediaria que NAO resolve, para nao voltar a ela: por o
   will-change em `[data-rv]:not(.rv-in)`. No carregamento 69 dos 73 ainda nao
   revelaram, entao as camadas continuam la, so trocando de dono. */
[data-rv].rv-in{opacity:1;transform:none}

/* ── QUANDO O CARTAO TAMBEM E REVEAL ─────────────────────────────────────────
   12/08/2026 · `[data-rv]` e `.card` tem a MESMA especificidade (0-1-0) e a regra
   de reveal vem depois no arquivo, entao nos cartoes que sao as duas coisas ela
   substituia a lista de transicoes do cartao inteira. Medido num cartao da secao
   de problemas: `transition-property` dava `opacity, transform`, e nao a lista do
   `.card`. Consequencia que ja existia antes desta luz: nesses cartoes a sombra e
   a borda do hover ligavam SECAS.
   Aqui vai a uniao das duas listas, com 0-2-0 para ganhar das duas.
   A duracao do `transform` fica em `--d-slow` porque quem manda nele e a entrada;
   o hover herda essa duracao, que e o que ja acontecia, e nao da para ter duas
   duracoes para a mesma propriedade. */
[data-rv].card{
  transition:opacity var(--d-slow) var(--e-out) var(--rv-d,0ms),
             transform var(--d-slow) var(--e-out) var(--rv-d,0ms),
             box-shadow var(--d-mid) var(--e-out),
             border-color var(--d-mid) var(--e-out),
             --lume var(--d-mid) var(--e-out);
}
[data-rv="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
[data-rv="clip"].rv-in{clip-path:inset(0 0 0 0);transition:clip-path 1s var(--e-out) var(--rv-d,0ms)}
[data-rv="scale"]{opacity:0;transform:scale(.965)}
[data-rv="scale"].rv-in{opacity:1;transform:none}
[data-rv="left"]{opacity:0;transform:translateX(-26px)}
[data-rv="left"].rv-in{opacity:1;transform:none}
[data-rv="right"]{opacity:0;transform:translateX(26px)}
[data-rv="right"].rv-in{opacity:1;transform:none}

/* SVG que se desenha (prancha viva) */
.draw path,.draw line,.draw circle,.draw rect,.draw polyline{
  stroke-dasharray:var(--dl,1200);stroke-dashoffset:var(--dl,1200);
}
.draw.rv-in path,.draw.rv-in line,.draw.rv-in circle,.draw.rv-in rect,.draw.rv-in polyline{
  animation:bnDraw 1.5s var(--e-io) forwards;
}
@keyframes bnDraw{to{stroke-dashoffset:0}}

/* ── FIGURAS / MIDIA ────────────────────────────────────────────────── */
.fig{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--navy-850)}
.fig img,.fig video{display:block;width:100%;height:100%;object-fit:cover}
.fig--16x9{aspect-ratio:16/9}
.fig--4x3{aspect-ratio:4/3}
.fig--1x1{aspect-ratio:1/1}
.fig--3x4{aspect-ratio:3/4}
/* scrim tecnico sobre midia, para o texto sempre ter contraste */
.fig--scrim::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,18,26,.82),rgba(11,18,26,.18) 52%,transparent);
}
.fig__cap{
  position:absolute;left:14px;bottom:12px;right:14px;z-index:2;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:var(--ls-mono);
  color:var(--navy-100);text-transform:uppercase;
}
/* etiqueta de placeholder: honesta enquanto nao ha midia real do cliente */
.fig--ph{
  display:grid;place-items:center;
  background:
    linear-gradient(135deg,rgba(255,255,255,.03) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.03) 75%,transparent 75%) 0 0/12px 12px,
    var(--navy-850);
  color:var(--navy-300);
}
.fig--ph i{font-size:28px;opacity:.5}

/* ── NUMEROS (prova) ────────────────────────────────────────────────── */
.stat{display:flex;flex-direction:column;gap:5px}
.stat__n{
  font-family:var(--f-disp);font-weight:600;
  font-size:clamp(2.1rem,1.4rem + 2.6vw,3.4rem);line-height:1;
  letter-spacing:-.035em;color:var(--s-ink,var(--ink));
  font-variant-numeric:tabular-nums;
}
.stat__n small{font-size:.44em;font-weight:600;letter-spacing:-.01em;margin-left:2px;color:var(--s-ink-3,var(--ink-3))}
.stat__l{font-size:var(--t-sm);color:var(--s-ink-2,var(--ink-2));line-height:1.42;max-width:20ch}
.stat__src{font-family:var(--f-mono);font-size:.68rem;letter-spacing:var(--ls-mono);color:var(--s-ink-3,var(--ink-3));text-transform:uppercase}

/* ── ACESSIBILIDADE ─────────────────────────────────────────────────── */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--c1);outline-offset:3px;border-radius:var(--r-xs);
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:12px;top:-60px;z-index:var(--z-modal);
  padding:12px 18px;border-radius:var(--r-sm);background:var(--navy-600);color:#fff;
  font-weight:600;text-decoration:none;transition:top var(--d-mid) var(--e-out);
}
.skip:focus{top:12px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important}
  .draw path,.draw line,.draw circle,.draw rect,.draw polyline{stroke-dashoffset:0!important}
}
/* Sem hover em touch: nada do site pode depender de hover */
@media(hover:none){
  .card:hover{transform:none}
  .btn:hover{transform:none}
}