/* ============================================================
   Site da marca pessoal, @kado.mkt.
   Serve as três rotas: /, /site e /operacao.

   Nenhuma cor solta neste arquivo. Tudo sai de tokens.css, que é
   cópia de identidade/tokens.css. Cor escrita à mão aqui significa
   página e peça do feed divergindo sem ninguém perceber. Quando
   precisa de transparência, usa color-mix sobre o token, nunca um
   hexadecimal novo.

   MOVIMENTO, e por que ele é assim.
   O levantamento de 30/07/2026 em Cliente Kado/Momento Aluguel de
   Carros/referencias/ extraiu o CSS de produção de oito sites de
   referência e mediu uma coisa que decide este arquivo: o que separa
   o site que parece caro do que parece template não é o efeito, é a
   duração e a curva. A Avantgarde concentra em .5s, .7s e 1s e repete
   a mesma cubic-bezier 78 vezes. O template de Webflow fica todo em
   .2s e .3s e não tem curva própria em lugar nenhum.

   Daí as duas regras:
     - interface é rápida (--t-rapido, --t-medio), narrativa é longa
       (--t-longo, --t-cena). Nunca misturar os dois registros.
     - existe uma curva assinatura e ela é usada em tudo que é
       narrativa. Arranca rápido e planeia longo.

   Nenhuma biblioteca de animação entra aqui. Nenhuma das oito
   referências usa GSAP, Lenis, Locomotive ou Framer Motion, e tudo
   que este site faz cabe em CSS mais um JavaScript pequeno.
   ============================================================ */

@import url("tokens.css");

/* ---------- Reset ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body, h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}

ul[class], ol[class] { list-style: none; padding: 0; }

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

a { color: inherit; }

/* ============================================================
   1. Tokens da página
   ============================================================ */

:root {

  /* ---------- Escala tipográfica, fluida ----------
     De 360px a 1440px. O passo de display é grande de propósito:
     o herói é o argumento inteiro, não uma faixa decorativa. */
  /* O teto é 4.5rem e não mais. A revelação do herói é linha por linha,
     com overflow escondido, e isso só funciona enquanto cada linha cabe
     numa linha de verdade: passando disso o texto reflui, a quebra nova
     nasce dentro da janela e aparece cortada. Encurtar a frase é mais
     barato que aumentar a fonte. */
  --t-display: clamp(2.35rem, 1.15rem + 3.9vw, 4.5rem);
  --t-titulo:  clamp(1.95rem, 1.2rem + 3.2vw, 3.25rem);
  --t-sub:     clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem);
  --t-lead:    clamp(1.06rem, 0.99rem + 0.36vw, 1.3rem);
  --t-corpo:   1rem;
  --t-peq:     0.92rem;
  --t-micro:   0.79rem;

  /* ---------- Ritmo vertical ----------
     O tokens.css traz --margem 84px, que é margem de peça 1080 e não
     serve para página. Aqui o ritmo é próprio. */
  --pad-secao: clamp(72px, 9vw, 148px);
  --pad-lado:  clamp(20px, 5vw, 56px);
  --largura:   1180px;
  --largura-texto: 62ch;

  /* ---------- Movimento ----------
     Interface: o que responde ao dedo. Narrativa: o que conta algo. */
  --t-rapido: 120ms;
  --t-medio:  240ms;
  --t-longo:  620ms;
  --t-cena:   980ms;

  /* A curva assinatura. Sai da família que o levantamento achou nas
     duas referências em Next.js, cubic-bezier(.16,1,.3,1) na Attra e
     cubic-bezier(.22,1,.36,1) na WBC Trade. Arranque forte e chegada
     longa, que é o oposto do ease padrão do navegador. */
  --curva: cubic-bezier(.16, 1, .3, 1);
  --curva-ui: cubic-bezier(.4, 0, .2, 1);

  /* ---------- Elevação ----------
     Sombra colorida, não preta. Sobre fundo azul-noite, sombra preta
     não aparece e o cartão fica chapado. */
  --sombra-1: 0 1px 2px color-mix(in oklab, var(--sup-0) 70%, transparent),
              0 8px 24px -12px color-mix(in oklab, var(--sup-0) 90%, transparent);
  --sombra-2: 0 24px 64px -28px color-mix(in oklab, var(--marca-900) 90%, transparent),
              0 2px 0 color-mix(in oklab, var(--tinta-1) 5%, transparent) inset;

  --borda: 1px solid var(--sup-linha);
}

/* ============================================================
   2. Base
   ============================================================ */

body {
  min-height: 100svh;
  background: var(--sup-0);
  color: var(--tinta-2);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Luz de fundo, fixa, para o azul-noite não ler como retângulo preto.
   Fica no body e não em cada seção, senão a luz pisca na rolagem. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(64% 46% at 50% -6%,
      color-mix(in oklab, var(--marca-500) 20%, transparent), transparent 72%),
    radial-gradient(42% 34% at 88% 12%,
      color-mix(in oklab, var(--enfase-500) 8%, transparent), transparent 70%);
}

::selection {
  background: color-mix(in oklab, var(--marca-500) 40%, transparent);
  color: var(--tinta-1);
}

:focus-visible {
  outline: 2px solid var(--marca-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   3. Estrutura
   ============================================================ */

.env {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--pad-lado);
}

.secao {
  position: relative;
  padding-block: var(--pad-secao);
}

.secao--linha { border-top: var(--borda); }
.secao--colada { padding-top: 0; }

.pular {
  position: absolute;
  left: -9999px;
}
.pular:focus {
  left: var(--pad-lado);
  top: 12px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--marca-500);
  color: var(--sup-0);
  border-radius: 8px;
  font-weight: 600;
}

/* ============================================================
   4. Barra de progresso de leitura
   ============================================================ */

.progresso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 50;
  background: transparent;
  pointer-events: none;
}
.progresso i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--marca-500), var(--enfase-500));
}

/* ============================================================
   5. Cabeçalho
   ============================================================ */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background var(--t-medio) var(--curva-ui),
              border-color var(--t-medio) var(--curva-ui),
              backdrop-filter var(--t-medio) var(--curva-ui);
  border-bottom: 1px solid transparent;
}
/* Segunda fase: só ganha fundo depois que a página rola. No topo ele
   flutua sobre o herói, que é onde o herói precisa de tela inteira. */
.topo[data-preso="sim"] {
  background: color-mix(in oklab, var(--sup-0) 82%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--sup-linha);
}

.topo__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--tinta-1);
  text-decoration: none;
}
.marca svg { width: 20px; height: 20px; }

.topo__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  font-size: var(--t-peq);
}
.topo__nav a {
  color: var(--tinta-2);
  text-decoration: none;
  transition: color var(--t-rapido) var(--curva-ui);
}
.topo__nav a:hover { color: var(--tinta-1); }
.topo__nav a[aria-current="page"] { color: var(--tinta-1); font-weight: 600; }

/* Marca a seção quando a página é filha dela, como /operacao/crm dentro de
   Operação. Não usa aria-current="page", que é só para a página exata. */
.topo__nav a[data-secao] { color: var(--tinta-1); }
.topo__nav a[data-secao]::after {
  content: ""; display: block; height: 2px; margin-top: 3px;
  background: var(--marca-500); border-radius: 2px;
}

.topo__cta {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--sup-linha);
  background: var(--sup-1);
  color: var(--tinta-1) !important;
  font-weight: 600;
}
.topo__cta:hover { border-color: var(--marca-500); }

/* ------------------------------------------------------------
   MENU DO CELULAR
   Feito com <details>, sem JavaScript: abre no clique e no teclado,
   e continua funcionando se o JS falhar, que é a mesma regra do
   resto do site. A troca acontece em 860px, que é onde os cinco
   itens deixam de caber com folga.
   ------------------------------------------------------------ */
.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--sup-linha); background: var(--sup-1);
  color: var(--tinta-1); font-size: var(--t-peq); font-weight: 600;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }
.menu > summary:focus-visible { outline: 2px solid var(--marca-500); outline-offset: 2px; }
.menu[open] > summary { border-color: var(--marca-500); }

.menu__painel {
  position: absolute; right: 0; top: calc(100% + 12px);
  width: min(84vw, 300px);
  background: var(--sup-1);
  border: 1px solid var(--sup-linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
  padding: 10px;
  display: grid; gap: 2px;
}
.menu__painel a {
  display: block; padding: 10px 12px; border-radius: 10px;
  color: var(--tinta-2); text-decoration: none; font-size: var(--t-peq);
}
.menu__painel a:hover { background: var(--sup-2); color: var(--tinta-1); }
.menu__painel a[aria-current="page"] { color: var(--tinta-1); font-weight: 600; }
.menu__titulo {
  margin: 10px 12px 4px; font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-3);
}

.menu { display: none; }
@media (max-width: 860px) {
  .topo__nav { display: none; }
  .menu { display: block; }
}

/* ============================================================
   6. Tipografia
   ============================================================ */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--marca-400);
  margin-bottom: 20px;
}
/* O marcador do pilar diagnóstico, desenhado em CSS. É a assinatura
   da marca e não é logotipo de terceiro. */
.kicker::before {
  content: "";
  width: 0;
  height: 0;
  border-inline: 5px solid transparent;
  border-bottom: 9px solid currentColor;
}

.display,
.titulo,
.sub {
  font-family: var(--fonte-titulo);
  color: var(--tinta-1);
  letter-spacing: -0.028em;
  line-height: 1.02;
  text-wrap: balance;
}
.display { font-size: var(--t-display); font-weight: 800; }
.titulo  { font-size: var(--t-titulo);  font-weight: 700; line-height: 1.08; }
.sub     { font-size: var(--t-sub);     font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; }

/* A ênfase vermelha é pontual, por decisão de 02/08/2026: entra na
   palavra que carrega o argumento, nunca em fundo grande. */
.display em, .titulo em, .sub em {
  font-style: normal;
  color: var(--enfase-400);
}

.lead {
  font-size: var(--t-lead);
  color: var(--tinta-2);
  max-width: var(--largura-texto);
  line-height: 1.55;
  text-wrap: pretty;
}

.texto { max-width: var(--largura-texto); text-wrap: pretty; }
.texto + .texto { margin-top: 1em; }

.forte { color: var(--tinta-1); font-weight: 600; }

/* Rodapé de fonte. Toda vez que a página afirma número, ele aparece. */
.fonte {
  font-size: var(--t-micro);
  color: var(--tinta-3);
  letter-spacing: 0.01em;
}

.cabeca-secao { margin-bottom: clamp(38px, 5vw, 64px); }

/* ============================================================
   7. Botões
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--fonte-corpo);
  font-size: var(--t-peq);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: translate var(--t-rapido) var(--curva-ui),
              background var(--t-rapido) var(--curva-ui),
              border-color var(--t-rapido) var(--curva-ui),
              box-shadow var(--t-medio) var(--curva-ui);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { translate: 0 1px; }

/* Texto escuro sobre o azul. Medido no bio-link em 04/08/2026:
   --tinta-1 sobre --marca-500 dá 3,45 e reprova; --sup-0 sobre o mesmo
   azul dá 5,14 e passa. */
.btn--primario {
  background: var(--marca-500);
  color: var(--sup-0);
  box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--marca-500) 70%, transparent);
}
.btn--primario:hover {
  background: var(--marca-400);
  box-shadow: 0 16px 40px -14px color-mix(in oklab, var(--marca-500) 85%, transparent);
}

.btn--fantasma {
  background: color-mix(in oklab, var(--sup-1) 80%, transparent);
  border-color: var(--sup-linha);
  color: var(--tinta-1);
}
.btn--fantasma:hover {
  border-color: color-mix(in oklab, var(--marca-400) 55%, var(--sup-linha));
  background: var(--sup-1);
}

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* Link com seta que anda no hover. Movimento de interface, rápido. */
.seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--marca-400);
  font-weight: 600;
  font-size: var(--t-peq);
  text-decoration: none;
}
.seta svg {
  width: 15px; height: 15px;
  transition: transform var(--t-medio) var(--curva);
}
.seta:hover svg { transform: translateX(5px); }

/* ============================================================
   8. Herói
   ============================================================ */

.heroi {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(540px, 82svh, 860px);
  /* A base é curta de propósito: com o padding cheio da seção seguinte,
     sobravam quase 300px de vazio entre o herói e o primeiro argumento. */
  padding-block: clamp(80px, 12vh, 130px) clamp(36px, 4vw, 72px);
  overflow: hidden;
}

.heroi__conteudo {
  position: relative;
  z-index: 2;
  max-width: 1000px;
}

.heroi .lead { margin-top: 28px; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.42rem); }

/* ---------- A malha em perspectiva ----------
   O único elemento decorativo do site e o que faz o herói ser forte
   sem depender de foto, que é o que não existe. É uma grade em
   perspectiva 3D real, com fuga para o horizonte, e a leitura é de
   medição, que é o que a marca vende.

   Feita em gradiente repetido e transform 3D, sem imagem e sem canvas.
   A máscara apaga as bordas para a grade não terminar em linha reta. */
.malha {
  position: absolute;
  inset: auto 50% 0 50%;
  z-index: 0;
  width: 240vw;
  height: 38%;
  translate: -50% 0;
  pointer-events: none;
  perspective: 460px;
  perspective-origin: 50% 0%;
  /* Fraca de propósito. A grade é o chão da cena, não o assunto: em
     0,6 ela competia com o título e o texto ficava sobre linha. */
  opacity: 0.55;
}
.malha__chao {
  position: absolute;
  inset: 0;
  transform: rotateX(74deg);
  transform-origin: 50% 0%;
  background-image:
    linear-gradient(to right,
      color-mix(in oklab, var(--marca-400) 34%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--marca-400) 34%, transparent) 1px, transparent 1px);
  background-size: 62px 62px;
  animation: correr 7s linear infinite;
  mask-image:
    linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent 92%),
    radial-gradient(58% 100% at 50% 0%, #000 30%, transparent 78%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent 92%),
    radial-gradient(58% 100% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-composite: source-in;
}
@keyframes correr {
  to { background-position: 0 62px; }
}

/* Linha do horizonte. Sem ela a grade termina em nada e o efeito
   parece defeito de renderização. */
.malha::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--marca-400) 60%, transparent) 30%,
    color-mix(in oklab, var(--marca-400) 60%, transparent) 70%,
    transparent);
}

/* ---------- Revelação do título, linha por linha ----------
   Cada linha vive numa janela com overflow escondido e sobe de baixo.
   É o efeito que mais custa credibilidade quando é feito rápido: aqui
   ele roda em --t-cena com a curva assinatura. */
.linha {
  display: block;
  overflow: hidden;
  padding-block: 0.06em;
  margin-block: -0.06em;
}
.linha > span {
  display: block;
  will-change: transform;
}
.js .heroi .linha > span {
  translate: 0 112%;
  transition: translate var(--t-cena) var(--curva);
  transition-delay: calc(var(--i, 0) * 105ms + 90ms);
}
.js .heroi.entrou .linha > span { translate: none; }

.js .heroi .atrasa {
  opacity: 0;
  translate: 0 18px;
  transition: opacity var(--t-longo) var(--curva-ui),
              translate var(--t-longo) var(--curva);
  transition-delay: calc(var(--i, 0) * 105ms + 340ms);
}
.js .heroi.entrou .atrasa { opacity: 1; translate: none; }

/* ============================================================
   9. Cartões
   ============================================================ */

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

/* auto-fit foi descartado de propósito. Com minmax de 320px a grade de dois
   virava três colunas em 1440 e o quarto cartão ficava órfão embaixo, que é
   o defeito mais visível que esta página teve. Contagem declarada mais dois
   pontos de quebra é previsível; auto-fit não é. */
@media (max-width: 980px) { .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .grade--2, .grade--3 { grid-template-columns: minmax(0, 1fr); }
}

.cartao {
  position: relative;
  padding: clamp(24px, 3vw, 34px);
  border: var(--borda);
  border-radius: var(--raio);
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--sup-1) 92%, transparent),
      color-mix(in oklab, var(--sup-0) 88%, transparent));
  box-shadow: var(--sombra-1);
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Cartão 3D ----------
   O tilt é transform 3D de verdade, com perspectiva no pai. O JS só
   escreve --rx, --ry e a posição do cursor em custom properties, e
   toda a renderização é CSS. Sem JS o cartão fica reto e continua
   perfeitamente utilizável, que é o ponto.

   O brilho que segue o cursor é o que vende o efeito: sem ele o tilt
   sozinho lê como cartão torto. */
.tilt {
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, 0, 0);
  transition: transform var(--t-longo) var(--curva),
              border-color var(--t-medio) var(--curva-ui),
              box-shadow var(--t-longo) var(--curva);
}
.tilt[data-ativo="sim"] {
  transition-duration: var(--t-rapido), var(--t-rapido), var(--t-medio);
  border-color: color-mix(in oklab, var(--marca-400) 40%, var(--sup-linha));
  box-shadow: var(--sombra-2);
}
.tilt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-medio) var(--curva-ui);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklab, var(--marca-500) 22%, transparent),
    transparent 72%);
}
.tilt[data-ativo="sim"]::before { opacity: 1; }

/* Os filhos sobem no eixo Z, senão o cartão inteiro gira como uma
   figurinha chapada e o efeito não lê como profundidade. */
.tilt > * { transform: translateZ(26px); }

/* ---------- Porta: os dois caminhos do hub ---------- */

.porta {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: clamp(28px, 3vw, 40px);
  text-decoration: none;
  color: inherit;
}
.porta__marcador {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 22px;
  border-radius: 12px;
  background: var(--marca-900);
  border: 1px solid color-mix(in oklab, var(--marca-500) 32%, transparent);
  color: var(--marca-400);
}
.porta__marcador svg { width: 21px; height: 21px; }
.porta__quem {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 12px;
}
.porta .sub { margin-bottom: 12px; }
.porta__texto { font-size: var(--t-peq); flex: 1; }
.porta .seta { margin-top: 24px; }

/* ---------- Achado: o defeito medido ---------- */

.achado { display: flex; flex-direction: column; gap: 14px; }
.achado__selo {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--sup-2) 70%, transparent);
  border: var(--borda);
  color: var(--tinta-2);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
}
/* O vermelho é a ênfase da marca e entra pontual, por decisão de
   02/08/2026. Quatro selos vermelhos lado a lado gastam a ênfase e a
   página perde o lugar onde ela significa alguma coisa. */
.achado__selo--alerta {
  background: var(--enfase-900);
  border-color: color-mix(in oklab, var(--enfase-500) 34%, transparent);
  color: var(--enfase-400);
}
.achado__o-que { color: var(--tinta-1); font-weight: 600; font-size: 1.04rem; line-height: 1.4; }
.achado__custo { font-size: var(--t-peq); }

/* ---------- Passo numerado ---------- */

.passo { display: flex; flex-direction: column; gap: 12px; }
.passo__n {
  font-family: var(--fonte-titulo);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in oklab, var(--marca-400) 42%, transparent);
}
.passo__t { color: var(--tinta-1); font-weight: 600; font-size: 1.06rem; }
.passo__d { font-size: var(--t-peq); }

/* ---------- Frente de trabalho, lista ---------- */

.frente {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 20px;
  align-items: start;
  padding-block: clamp(26px, 3vw, 34px);
  border-top: var(--borda);
}
.frente:last-child { border-bottom: var(--borda); }
.frente__n {
  font-family: var(--fonte-titulo);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--tinta-3);
  padding-top: 6px;
}
.frente__corpo { display: grid; gap: 10px; }
.frente__itens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.frente__itens li {
  padding: 5px 12px;
  border-radius: 999px;
  border: var(--borda);
  background: color-mix(in oklab, var(--sup-1) 70%, transparent);
  font-size: var(--t-micro);
  color: var(--tinta-2);
}

/* ============================================================
   10. Faixa de números
   ============================================================ */

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.numero__v {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.05rem, 1.5rem + 1.9vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--tinta-1);
  font-variant-numeric: tabular-nums;
}
.numero__t {
  margin-top: 6px;
  font-family: var(--fonte-titulo);
  font-size: var(--t-sub);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta-1);
}
.numero__r { margin-top: 12px; font-size: var(--t-peq); }

/* ============================================================
   11. Chamada final
   ============================================================ */

.chamada {
  position: relative;
  padding: clamp(38px, 6vw, 76px);
  border: var(--borda);
  border-radius: clamp(18px, 2vw, 26px);
  background:
    radial-gradient(80% 130% at 50% 0%,
      color-mix(in oklab, var(--marca-700) 55%, transparent), transparent 68%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--sup-1) 90%, transparent),
      color-mix(in oklab, var(--sup-0) 90%, transparent));
  overflow: hidden;
}
.chamada .lead { margin-inline: auto; }
.chamada--centro { text-align: center; }
.chamada--centro .btns { justify-content: center; }

/* ============================================================
   12. Rodapé
   ============================================================ */

.rodape {
  border-top: var(--borda);
  padding-block: clamp(44px, 6vw, 72px) 40px;
  font-size: var(--t-peq);
}
.rodape__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 34px;
  margin-bottom: 40px;
}
.rodape h3 {
  font-family: var(--fonte-corpo);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 14px;
}
.rodape ul { display: grid; gap: 9px; list-style: none; padding: 0; margin: 0; }
.rodape a { color: var(--tinta-2); text-decoration: none; }
.rodape a:hover { color: var(--tinta-1); }
.rodape__fim {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  padding-top: 26px;
  border-top: var(--borda);
  color: var(--tinta-3);
  font-size: var(--t-micro);
}

/* ============================================================
   13. Revelação ao rolar
   ============================================================
   A guarda é a classe .js, posta pelo próprio script na primeira
   linha. Sem ela nada é escondido. A memória do repositório é clara
   sobre isso: CSS que esconde por padrão mais JavaScript que revela
   apaga a página inteira quando o script não executa, e foi assim que
   16 seções da New Fast sumiram sem erro nenhum no console. */

/* A revelação usa `translate`, e não `transform`, e isso não é estilo: é
   correção de um defeito medido em 14/08/2026. O estado revelado precisa
   zerar o deslocamento, e escrever `transform: none` aqui apagava o tilt
   3D do cartão, porque `.js .rv.entrou` tem especificidade maior que
   `.tilt` e as duas regras disputavam a mesma propriedade. O sintoma era
   silencioso: as custom properties do tilt continuavam sendo escritas
   pelo JavaScript, o brilho do cursor acendia, e só o giro não acontecia.

   `translate` é propriedade independente e compõe com `transform` em vez
   de sobrescrever. A ordem de composição do CSS é translate, rotate,
   scale e só então transform, então as duas convivem sem se ver. */
.js .rv {
  opacity: 0;
  translate: 0 26px;
  transition: opacity var(--t-longo) var(--curva-ui),
              translate var(--t-longo) var(--curva);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.js .rv.entrou { opacity: 1; translate: none; }

/* ============================================================
   14. Acessibilidade e impressão
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .js .rv,
  .js .heroi .linha > span,
  .js .heroi .atrasa { opacity: 1; translate: none; }
  .malha__chao { animation: none; }
  .tilt { transform: none; }
}

/* ============================================================
   ARTIGO
   Texto longo do blog. Entrou em 06/09/2026, com o primeiro
   artigo: o site nunca tinha precisado de prosa corrida.
   Tudo herda o que já existe, e o que se acrescenta aqui é só o
   ritmo vertical, a lista e o destaque de número.
   ============================================================ */

.artigo { max-width: var(--largura-texto); }

.artigo h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  line-height: 1.18;
  color: var(--tinta-1);
  margin: 2.4em 0 .7em;
  text-wrap: balance;
}

.artigo h3 {
  font-family: var(--fonte-corpo);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--tinta-1);
  margin: 1.8em 0 .5em;
}

.artigo p { margin-top: 1em; }
.artigo > *:first-child { margin-top: 0; }

.artigo ul { margin: 1em 0 0; padding-left: 1.1em; }
.artigo li { margin-bottom: .5em; }
.artigo li::marker { color: var(--marca-400); }

/* Número que o texto acabou de afirmar, destacado para ser recortado.
   O motor generativo recorta trecho curto com estatística, e é este
   bloco que existe para ser esse trecho. */
.dado {
  border-left: 3px solid var(--marca-500);
  background: color-mix(in srgb, var(--marca-900) 60%, transparent);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 18px 22px;
  margin: 1.6em 0;
}

.dado strong { color: var(--tinta-1); font-weight: 600; }

.artigo__meta {
  font-family: var(--fonte-corpo);
  font-size: var(--t-micro);
  color: var(--tinta-3);
  margin-bottom: 2.2em;
}

@media print {
  body::before, .malha, .progresso { display: none; }
  body { background: #fff; color: #000; }
  .topo { position: static; }
  .js .rv, .js .heroi .linha > span, .js .heroi .atrasa {
    opacity: 1 !important; translate: none !important;
  }
}

/* ============================================================
   PROVA E RETRATO
   Entrou em 07/09/2026. Até aqui o site tinha exatamente uma
   imagem, a og.png, que nem aparece na página: era tipografia e
   malha, e por isso lia frio. Nenhuma cor solta aqui, tudo de
   tokens.css, como o resto do arquivo.
   ============================================================ */

.prova {
  margin: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--sup-1);
  overflow: hidden;
}

.prova img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--borda);
}

.prova figcaption {
  padding: 20px 22px 22px;
}

.prova__quem {
  font-family: var(--fonte-titulo);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marca-400);
  margin: 0 0 8px;
}

.prova__o-que {
  font-family: var(--fonte-titulo);
  font-size: var(--t-sub);
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--tinta-1);
}

.prova figcaption p:last-child {
  margin: 0;
  color: var(--tinta-2);
  font-size: var(--t-peq);
  line-height: 1.6;
}

/* O retrato tem proporção declarada para o espaço não colapsar antes
   de a imagem chegar, que é o que faz a página pular durante a carga. */
.retrato {
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--borda);
  background: var(--sup-1);
}

.retrato img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.retrato--largo { aspect-ratio: 3 / 2; }
.retrato--alto  { aspect-ratio: 4 / 5; }
.retrato--largo img,
.retrato--alto img { height: 100%; }

/* Tira do Instagram. Quadrado fixo para as três peças ficarem alinhadas
   mesmo com alturas diferentes de origem. */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.posts a { display: block; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--borda); }
/* O height: auto nao e enfeite. Sem ele o atributo height="680" do <img> vale
   como altura, a caixa fica 343 por 680 e o object-fit: cover corta o texto da
   peca na horizontal. Medido em 07/09/2026. */
.posts img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 640px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .posts a:last-child { display: none; } }

/* Assinatura do herói: retrato pequeno mais nome. Entrou em 07/09/2026, quando
   passou a existir foto no acervo. A primeira dobra era só tipografia, e é a
   dobra que decide se a página parece pessoa ou parece agência sem nome. */
.assina { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.assina img {
  /* O arquivo já é quadrado e fechado no rosto, então não precisa de
     object-position: recortar no CSS a partir do retrato 4:5 deixava metade
     de céu no círculo. */
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--borda); flex: 0 0 auto;
}
.assina p { margin: 0; line-height: 1.4; }
.assina .assina__nome { font-family: var(--fonte-titulo); color: var(--tinta-1); font-size: var(--t-peq); }
.assina .assina__papel { color: var(--tinta-3); font-size: var(--t-micro); }