/* A ACTA V2 — a segunda landing institucional (story 002.2). Desde a story
   008.4 é o Início do portal: servida em `/`, em `/a-acta` e em `/a-acta-v2`,
   com os 38 pedidos do sócio aplicados (a escolha do dono, "V2 com os
   pedidos"). Saíram o sumário, a fita, a tese e o kicker do hero; o título do
   hero passou à IBM Plex Mono. Na story 009.1 (pedidos do dono de 01/10)
   saíram as luzes do hero e o banho de luz do Terminal, e a fita voltou,
   como carrossel conduzido pelo leitor.
   Especificação: docs/design/a-acta-v2.md
   Depende de css/site.css (tokens, ilha, modal, cabeçalho) e de css/vidro.css
   (a lâmina e o selo). Daqui não sai valor de cor bruto — só token — com duas
   exceções documentadas: o verde do WhatsApp (marca de terceiro) e o corpo do
   celular (objeto, não superfície). A terceira, as luzes do hero, saiu com
   elas (009.1, D1).

   Esta folha NÃO importa css/acta.css. Tudo que reaproveita da original entra
   copiado com o prefixo trocado (.ac- → .av-), de propósito: acta.css escreve
   em :root, estiliza `section[id]` e faz reset em `*`; importá-la acoplaria a
   V2 a um arquivo congelado, e qualquer afinação futura na original repintaria
   uma tela que ninguém abriu. A duplicação tem data de validade — quando o
   dono escolher, a página perdedora é apagada.

   O que aqui é NOVO no portal inteiro: revelação no scroll, contadores, a
   linha do anel, moldura de celular. O portal não tinha nada disso por
   decisão registrada (docs/design/a-acta-landing.md §4.1); a V2 abre a
   exceção a pedido do dono, só nesta página. O fundo fluido e o halo do anel
   também eram desta lista, e saíram na 009.1: "essas bolas laranjas e azuis
   [...] não são da identidade visual da acta" (pedido 1 do dono, D1). */

:root {
  /* Verde do WhatsApp: marca de terceiro, não muda com o tema. O glifo por
     cima é ESCURO (9,92:1). O disco sozinho dá 1,75:1 sobre papel, abaixo do
     piso de 3,0 para objeto gráfico; quem resolve é o aro. */
  --av-zap: #25D366;
  --av-zap-tinta: #0B0B0C;
  --av-zap-aro: var(--linha-forte);

  --av-marca-sim: var(--ambar-sup);

  /* A cúbica da casa: entra rápido, assenta devagar. */
  --av-cubica: cubic-bezier(.2, .8, .2, 1);

  /* O anel em volta do celular saiu inteiro na story 009.1: primeiro o halo,
     com as luzes do hero (D1); depois a linha, por decisão do dono em 01/10
     (D8): o arco azulado era o último azul que sobrava no hero. */

  /* A fita dos grupos (story 009.1): a altura de cada print e o vão entre
     eles. A largura vem da proporção de cada arquivo (os width/height do
     <img>), então os 22 dividem a mesma linha de base sem corte. */
  --av-print-h: 480px;
  --av-fita-gap: 20px;

  /* O celular: largura em função da tela; a altura vem da PROPORÇÃO DO PRINT
     (ver .av-celular__tela). */
  --av-cel-l: clamp(200px, 22vw, 320px);

  /* O caderno (story 002.3): a coluna de leitura do miolo, mais estreita que a
     concha. 960 é a menor largura em que a grade de números, os três passos
     e o cartão de plano em duas colunas continuam legíveis — e substitui as
     duas larguras soltas em px que a V2 carregava (720 dos prints, 900 dos
     planos). Token só desta página: a casa mede leitura em ch, não num
     segundo shell. */
  --av-caderno: 960px;
}

[data-tema="noite"] {
  --av-zap-aro: transparent;   /* no escuro o próprio verde já se destaca (8,5:1) */
}

/* ── Página ─────────────────────────────────────────────────────────────── */

.av-pagina {
  font-family: Archivo, Helvetica, sans-serif;
  background: var(--fundo);
  color: var(--tinta);
  scroll-behavior: smooth;
}

/* Sem isto, `scroll-behavior: smooth` entrega o leitor com o título da seção
   escondido atrás dos 74px do cabeçalho grudado. (A barra do sumário, que
   grudava logo abaixo dele, saiu na story 008.4: pedido 8 do sócio.) */
.av-pagina section[id], .av-pagina [id] { scroll-margin-top: calc(var(--topo) + 14px); }

/* Um capítulo ocupa espaço: o padding subiu (era 58/6.5vw/104) porque a troca
   de setor se lê no respiro tanto quanto na chapa. */
.av-secao { padding: clamp(72px, 8vw, 128px) 0; }
/* Uma régua de 1px, "como um jornal separa seções" — é a primeira das
   transições entre blocos; a outra é a linha que cresce ao lado do eyebrow.
   (A terceira era o banho de luz fixo do bloco Terminal, que saiu na story
   009.1, D2.) Entre chapas diferentes ela é quase invisível; entre iguais
   (números → 01, Terminal → planos) é o que separa. */
.av-secao + .av-secao { border-top: 1px solid var(--linha); }
/* O miolo lê no CADERNO, não na concha: min() devolve 92vw no celular, onde
   nada muda. O rodapé é a exceção — capa e contracapa usam a concha inteira. */
.av-secao__interno {
  max-width: min(var(--shell), calc(var(--av-caderno) + 2 * var(--gutter)));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.av-rodape .av-secao__interno { max-width: var(--shell); }
/* As chapas. Cada capítulo numa superfície diferente da vizinha — papel,
   papel-2, a ilha — só com tokens da casa: chapa é --fundo-2 inteiro, nunca
   um meio-tom inventado. A fita dos grupos (009.1) é papel-2, entre os grupos
   e o Terminal, que são papel. A faixa dos números é o lide, curta de
   propósito. */
.av-secao--faixa { padding: clamp(28px, 3vw, 44px) 0; }
.av-secao--papel2 { background: var(--fundo-2); }
/* Cartão sobre a chapa: papel pousado em papel-2, sem véu, sem blend. O hover
   normal pinta --fundo-2, que sumiria na chapa. */
.av-secao--papel2 .av-passo,
.av-secao--papel2 .av-duvida { background: var(--fundo); }
.av-secao--papel2 .av-passo:hover { background: var(--fundo); border-color: var(--linha-forte); }
/* No tema noite, site.css dá contorno de 1px à ilha com especificidade 0,2,0
   — e vencia o `border-inline: 0` (0,1,0) do herói e do rodapé: um fio
   vertical nas bordas da janela. Mesma especificidade, aqui, para os dois.
   (A segunda ilha, a tese, saiu na story 008.4: pedido 23 do sócio.) */
[data-tema="noite"] .av-hero,
[data-tema="noite"] .av-rodape { border-inline: 0; }

/* O cabeçalho de cada seção — o fólio, o eyebrow, a linha, o colofão, o
   título, o apoio — é UM bloco de revelação: aparece junto, não em três tempos.
   A linha de fólio ocupa a coluna inteira do caderno: o número em tinta, o
   eyebrow em âmbar, a régua até a ponta direita e, nela, a marca pequena. É
   a borda direita desenhada que faltava em toda seção. */
.av-topo { margin: 0; }
.av-topo__linha { display: flex; align-items: center; gap: 16px; }
/* O número do capítulo: tinta e peso 500, de propósito diferente do número de
   item (.av-passo__n, .av-grupo__n, .av-duvida__n — âmbar, 400): o "02" do
   capítulo não pode ser lido como o "02 Escrever". */
.av-folio {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--tinta);
  flex: none;
}
.av-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .22em;
  color: var(--ambar-tinta);
  margin: 0;
  white-space: nowrap;
}
/* A linha que cresce: 1px, da esquerda, no ritmo de actaLine (site.css), que
   já está carregada. Sem JavaScript não há .av-visivel e ela fica estática,
   inteira — que é o estado certo para quem não vê movimento. */
.av-divisa {
  flex: 1;
  height: 1px;
  background: var(--linha-forte);
  transform-origin: left center;
}
.av-revela.av-visivel .av-divisa { animation: actaLine .9s var(--av-cubica) both; }

/* ── A marca ────────────────────────────────────────────────────────────────
   O globo do icon.png como MÁSCARA sobre currentColor: uma classe, e a marca
   recebe a tinta da superfície onde está — navy sobre papel, papel dentro da
   ilha — sem imagem recolorida, sem filtro, sem blend. Só --tinta e as versões
   apagadas; nunca âmbar (o ícone só tem branco e preto). Nunca gira nem pisca.

   O asset public/img/marca/acta-globo.png é derivado de public/icon.png com o
   ImageMagick da casa; a luminância vira alfa e o fundo #0B0B0C vira zero:
     convert public/icon.png -trim +repage -colorspace gray -level 6%,100%
       -alpha off \( +clone \) -compose CopyOpacity -composite
       -fill white -colorize 100 -resize 512x512 -background none
       -gravity center -extent 512x512 -strip public/img/marca/acta-globo.png
   O nome é definitivo: server.js serve .png com max-age de 30 dias. */
.av-marca {
  display: inline-block;
  width: 1em;
  aspect-ratio: 1;
  flex: none;
  vertical-align: -.15em;
  background: currentColor;
  -webkit-mask-image: url(/img/marca/acta-globo.png);
          mask-image: url(/img/marca/acta-globo.png);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
/* Sem máscara (nenhum navegador atual), um quadrado sólido seria pior que
   nada: a marca é decorativa em todos os pontos e some. A condição testa os
   dois prefixos — só a forma sem prefixo seria verdadeira em Chrome antigo. */
@supports not ((mask-image: url(x)) or (-webkit-mask-image: url(x))) {
  .av-marca { display: none; }
}
/* O colofão na ponta da régua: aparece quando a linha chega lá (.7s depois do
   início de actaLine), por TRANSIÇÃO de opacidade, nunca por animação — e o
   motivo é medido: neste Chromium, um elemento com máscara que tenha qualquer
   animação CSS própria (terminada, com fill backwards, até uma de visibility)
   simplesmente não é pintado; com transição, pinta. O estado escondido só
   existe sob html[data-revela] e antes de .av-visivel — a mesma regra da
   revelação —, então sem JavaScript ele fica visível de saída. */
.av-marca--colofao { width: 18px; color: var(--tinta-3); transition: opacity .5s ease .7s; }
html[data-revela] .av-revela:not(.av-visivel) .av-marca--colofao { opacity: 0; }
.av-titulo {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.9vw, 42px);
  line-height: 1.16;
  letter-spacing: -.015em;
  text-wrap: pretty;
  /* Sem teto de largura (story 008.4, D5): o sócio pediu duas vezes o título
     "corrido para a direita, alinhando com o tamanho do espaço do site"
     (pedidos 11 e 29), e a 008.1 soltou os cinco da original pelo mesmo
     motivo. Aqui eram 24ch e 20ch (`--curto`, que saiu). */
  max-width: none;
  margin: 22px 0 0;
}
.av-titulo strong { font-weight: 500; }
.av-apoio {
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--tinta-2);
  max-width: 62ch;
  margin: 16px 0 0;
}
.av-apoio strong { color: var(--tinta); font-weight: 600; }
.av-apoio a { color: var(--tinta); border-bottom: 1px solid var(--linha-forte); transition: border-color .18s ease; }
.av-apoio a:hover { border-bottom-color: var(--ambar-sup); }
.av-apoio a:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 2px; }

/* ── Botões ─────────────────────────────────────────────────────────────────
   A régua do portal: translateY(-2px) em .2s. */
.av-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  text-align: center;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .2s var(--av-cubica);
}
.av-btn:hover { transform: translateY(-2px); }
.av-btn:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 2px; }
.av-btn--solido { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.av-btn--fantasma { color: var(--tinta); }
.av-btn--fantasma:hover { border-color: var(--tinta); background: var(--fundo-2); }
.av-btn--ouro { background: var(--ambar-sup); color: #000011; border-color: var(--ambar-sup); }

/* ── A revelação no scroll ───────────────────────────────────────────────────
   O estado escondido só existe sob `html[data-revela]`, que o <head> só põe
   quando há IntersectionObserver e que o inline do fim do body derruba se o
   script não chegou a ligar o observador. Assim conteúdo nunca fica preso.

   É ANIMAÇÃO, não transição, e com fill-mode `backwards` e não `both`: com
   `forwards` o último keyframe (transform: none) ficaria aplicado para sempre
   e venceria o translateY(-2px) do hover de cada cartão — a régua do portal
   morreria em toda peça revelada. Com `backwards`, o "de onde vem" vale
   durante o atraso escalonado e, acabada a animação, o elemento volta a
   obedecer as suas regras normais. */
@keyframes avSobe {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}
html[data-revela] .av-revela:not(.av-visivel) { opacity: 0; }
.av-revela.av-visivel { animation: avSobe .6s var(--av-cubica) var(--av-atraso, 0s) backwards; }
/* Escalonamento por CSS, sem `style` inline no HTML. Teto de .35s: ninguém
   espera um cartão aparecer. */
.av-escalonado > .av-revela:nth-child(2) { --av-atraso: .07s; }
.av-escalonado > .av-revela:nth-child(3) { --av-atraso: .14s; }
.av-escalonado > .av-revela:nth-child(4) { --av-atraso: .21s; }
.av-escalonado > .av-revela:nth-child(5) { --av-atraso: .28s; }
.av-escalonado > .av-revela:nth-child(n+6) { --av-atraso: .35s; }

/* ── Hero ───────────────────────────────────────────────────────────────────
   Ilha invariante (.ilha-navy reescreve os tokens de tinta para dentro do
   bloco). Duas colunas: o texto à esquerda, o palco à direita. Sem fotografia
   e, desde a story 009.1, sem luzes: o fundo é o navy liso da ilha, com a
   linha do anel e a marca-d'água, que são da identidade (D3). As três gotas
   de gradiente (âmbar, azul e verde) que andavam por trás saíram a pedido do
   dono, que não as reconhece como da ACTA (D1). */
.av-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--fundo);
  /* `color` é herdado como valor COMPUTADO: o <body> já resolveu var(--tinta)
     antes de a ilha reescrever o token. A ilha precisa repintar a si mesma. */
  color: var(--tinta);
  border-inline: 0;
}

/* A marca-d'água da capa: o globo em papel a 5%, sob a coluna do texto — não
   atrás dos cartões (o contraste medido deles não muda) e não concêntrica ao
   anel (o anel continua a única órbita do palco). Estática: não entra em
   data-parado nem conta em getAnimations. Era irmã do fluido (as três gotas
   de luz, que saíram na story 009.1, D1); sozinha, fica sob o miolo e é a
   única camada do fundo do herói. */
.av-hero__marca-dagua {
  position: absolute;
  z-index: -1;
  left: -6%;
  bottom: -18%;
  width: min(56vmin, 520px);
  color: var(--tinta);
  opacity: .05;
  pointer-events: none;
}

.av-hero__interno {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(64px, 7vw, 112px) var(--gutter) clamp(56px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  /* Sem `actaUp` no contêiner, de propósito: a original entra o herói inteiro
     de opacity 0, e um elemento que nasce invisível não é candidato a LCP —
     medido: o LCP da página passava a ser o rótulo do botão do WhatsApp, o
     único texto fora do herói. O título tem a sua revelação e o celular a sua
     entrada; o contêiner fica parado para o print contar como LCP. */
}
/* O título em IBM Plex Mono 500 (pedido 5 do sócio; as @font-face `f18`/`f19`
   de fonts.css, da story 008.1). Na V2 ele é a ÚNICA regra com essa família.
   Sem kicker acima (pedido 4), sem margem de topo.

   Três linhas (story 008.4, D2), e não as duas da original: a coluna do texto
   aqui mede ~560px a 1440, e a linha mais longa, "Inteligência de mercado"
   (23 caracteres a 0,58 em com o tracking), mede 13,34 em: 534px a 40px.
   2,8vw põe a mesma linha em ~383px na coluna de ~400 a 1024, e o piso de
   26px (o da original) cabe nos ~352 de 901. Até 900 o texto tem a largura
   inteira; abaixo de ~390 a linha quebra, e o `balance` do span divide por
   igual. O substituto é a JetBrains Mono, com o mesmo avanço de 0,600 em. */
.av-hero__titulo {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
  max-width: none;
}
/* A revelação do título, por clip-path (composto, percentual — se a métrica da
   fonte trocar no meio, a janela reescala junto). Cada linha é um bloco que
   pode quebrar: a coluna do hero é mais estreita que na original, e nowrap
   aqui mostraria uma frase permanentemente cortada. */
@keyframes avRevela {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.av-hero__linha { display: block; }
.av-hero__linha > span {
  display: inline-block;
  text-wrap: balance;
  animation: avRevela var(--av-d) var(--av-cubica) both;
}
/* Três linhas, três tempos, 3,0s no total — o mesmo teto da original. O
   cursor mora DENTRO do último span: fora dele, um span inline-block que
   ocupa a linha inteira empurra o cursor para uma linha própria. */
.av-hero__linha:nth-child(1) > span { --av-d: 1.2s; animation-delay: .30s; }
.av-hero__linha:nth-child(2) > span { --av-d: .9s;  animation-delay: 1.4s; }
.av-hero__linha:nth-child(3) > span { --av-d: .9s;  animation-delay: 2.2s; }
@keyframes avCursor { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
.av-hero__cursor {
  display: inline-block;
  width: 3px;
  height: .78em;
  margin-left: 8px;
  vertical-align: -.04em;
  background: var(--ambar-tinta);
  animation: avCursor .9s steps(1) infinite;
  animation-delay: 3.02s;
  opacity: 0;
}
.av-hero__apoio {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--tinta-2);
  max-width: 52ch;
  margin: 22px 0 0;
}
.av-hero__apoio strong { color: var(--tinta); font-weight: 600; }
.av-hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ── O palco: anel, celular, cartões ────────────────────────────────────── */

.av-palco {
  position: relative;
  perspective: 1200px;
  display: grid;
  grid-template-columns: var(--av-cel-l) minmax(180px, 1fr);
  align-items: center;
  gap: 0 clamp(14px, 2vw, 28px);
  min-height: 480px;
}

/* O celular. Moldura em CSS puro; a TELA é um print real de uma mensagem de
   WhatsApp (public/img/acta/print-insight-NN.webp) — nunca uma interface
   inventada, porque não existe app e a página não pode sugerir um.

   Dois nós animados, porque `transform` não aceita a entrada e a flutuação no
   mesmo elemento: .av-celular faz a entrada em profundidade (uma vez, no
   carregamento) e .av-celular__corpo flutua. O REPOUSO É PLANO: um rotateY em
   repouso reamostraria o texto do print para sempre, e o print é a prova de
   honestidade da página — precisa ser legível.

   A entrada parte de opacity .6, não 0: o Chromium ignora elementos em
   opacity 0 ao eleger o LCP, e este print é o LCP da página. */
@keyframes avEntraCelular {
  from { opacity: .6; transform: translate3d(0, 44px, 0) rotateY(-16deg) rotateX(5deg) scale(.94); }
  to   { opacity: 1;  transform: none; }
}
@keyframes avFlutua { from { transform: translate3d(0, -6px, 0); } to { transform: translate3d(0, 6px, 0); } }
@keyframes avSombra { from { transform: scale(1.04); opacity: .55; } to { transform: scale(.94); opacity: .38; } }
.av-celular {
  position: relative;
  z-index: 1;
  width: var(--av-cel-l);
  margin: 0;
  animation: avEntraCelular .9s var(--av-cubica) .15s both;
  backface-visibility: hidden;
}
.av-celular__corpo {
  position: relative;
  padding: calc(var(--av-cel-l) * .03);                 /* aro ~10px em 320 */
  border-radius: calc(var(--av-cel-l) * .14);           /* ~44px em 320 */
  /* O corpo do aparelho é OBJETO, não superfície de tema — invariante, como
     o verde do WhatsApp. */
  background: #0E0E10;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),           /* a aresta que pega luz */
    inset 0 0 0 3px #1A1A1E,                            /* a espessura do aro */
    0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 1px rgba(0, 0, 17, .6),
    0 44px 80px -30px rgba(0, 0, 17, .75);              /* o vão até a ilha */
  animation: avFlutua 6s ease-in-out infinite alternate;
}
/* A tela assume a PROPORÇÃO DO PRINT (544×983), não a de um aparelho
   inventado: uma tela 9:19,5 com object-fit: cover cortaria os 17% de baixo —
   exatamente onde estão a última frase e o horário, que é o carimbo de
   mensagem real. Nada é cortado. */
.av-celular__tela {
  position: relative;
  overflow: hidden;
  aspect-ratio: 544 / 983;
  border-radius: calc(var(--av-cel-l) * .11);
  background: #0B0B0C;
}
.av-celular__tela img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A ilha dinâmica é moldura, não interface: pequena, para não cobrir o
   cabeçalho do gráfico que fica no topo dos prints. */
.av-celular__ilha {
  position: absolute;
  z-index: 2;
  top: calc(var(--av-cel-l) * .055);
  left: 50%;
  width: 24%;
  height: calc(var(--av-cel-l) * .026);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}
/* Reflexo: alfa branco em diagonal, sem blend — sobre tela escura o resultado
   é o mesmo, e blend força um contexto de composição. */
.av-celular__reflexo {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .035) 22%,
    transparent 40%, transparent 72%, rgba(255, 255, 255, .045) 100%);
}
.av-celular__sombra {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -7%;
  height: 12%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 17, .6), transparent 70%);
  animation: avSombra 6s ease-in-out infinite alternate;
}
.av-celular__legenda {
  margin: 16px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.av-celular__legenda img { filter: invert(1); opacity: .8; }   /* SVG de rede, em tinta escura, dentro da ilha */

/* Os três cartões: sólidos-translúcidos, NÃO .fx-lamina. Os tokens do vidro
   são por tema e a ilha é invariante — no claro, a lâmina aqui seria branco a
   44% sobre navy, outra peça. E `backdrop-filter` sobre fundo que se move é
   custo por quadro (eram as gotas, até a 009.1; ainda é a linha do anel, que
   gira por trás): o filtro seria reavaliado para três cartões, para sempre.

   82% da ilha + o branco a 6% que a ilha chama de --fundo-2: quase opaco,
   deixa o anel passar como sombra azul, nunca como linha por cima do texto.
   Contraste conferido por PIXEL no navegador, não por getComputedStyle. */
.av-flutuantes {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.av-flutuante {
  background:
    linear-gradient(var(--fundo-2), var(--fundo-2)),
    color-mix(in srgb, var(--fundo) 82%, transparent);
  border: 1px solid var(--linha);
  border-radius: var(--fx-raio-vidro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -32px rgba(0, 0, 0, .9);
  padding: 16px 18px 17px;
  animation: avFlutuaCartao var(--dur, 6s) ease-in-out var(--fase, 0s) infinite alternate;
}
/* Cada cartão flutua com duração e fase próprias — nunca sobem juntos. O
   deslocamento horizontal --dx fica em zero (story 002.3): puxados por cima
   do celular, dois dos três cartões criavam uma terceira borda esquerda dentro
   do palco; no eixo, os três têm a mesma borda, a um vão do celular. */
@keyframes avFlutuaCartao {
  from { transform: translate3d(var(--dx, 0), -4px, 0); }
  to   { transform: translate3d(var(--dx, 0), 4px, 0); }
}
.av-flutuante:nth-child(1) { --dur: 5.5s; --fase: -1s; --dx: 0; }
.av-flutuante:nth-child(2) { --dur: 6.5s; --fase: -3s; --dx: 0; }
.av-flutuante:nth-child(3) { --dur: 7s;   --fase: -5s; --dx: 0; }
.av-flutuante__kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ambar-tinta);
  margin: 0;
}
.av-flutuante h3 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  margin: 8px 0 0;
}
.av-flutuante p:last-child { font-size: 13px; line-height: 1.55; color: var(--tinta-2); margin: 6px 0 0; }

/* Fora da tela, ou com a aba escondida, o palco pausa (js/acta-v2.js, bloco
   3). `animation-play-state` e não `display`: ao voltar, tudo retoma de onde
   parou, sem salto. (As gotas e o anel saíram desta lista com eles, na story
   009.1.) */
.av-hero[data-parado] .av-celular__corpo,
.av-hero[data-parado] .av-celular__sombra,
.av-hero[data-parado] .av-flutuante { animation-play-state: paused; }

/* ── A faixa de números ─────────────────────────────────────────────────────
   Três fatos, sem adjetivo (eram quatro; o "22 recortes" saiu com a fita na
   story 008.4, D6). O valor final já está no HTML; o JavaScript só
   faz o trajeto de 0 até ele. `tabular-nums` e `min-width: 2ch`: enquanto
   conta de "0" a "22", a legenda não pode andar. */
.av-numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  list-style: none;
  margin: 0;
  padding: 0;
}
.av-numero-caixa {
  background: var(--fundo);
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.av-numero {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 3.6vw, 54px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--tinta);
  display: inline-block;
  min-width: 2ch;
}
.av-numero-caixa small {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tinta-2);
}

/* ── Quem é a ACTA: os três "não" ───────────────────────────────────────────
   Nesta página o "não" é a marca de seriedade — ganha o mesmo tratamento que
   a tese: régua âmbar à esquerda e serifa. */
.av-nao {
  list-style: none;
  margin: clamp(30px, 3.5vw, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 66ch;
}
.av-nao li {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.45;
  padding-left: clamp(18px, 2.2vw, 28px);
  border-left: 2px solid var(--ambar-sup);
}
.av-nao strong { font-weight: 500; }

/* ── Como a mesa trabalha: três passos ────────────────────────────────────── */

.av-passos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  list-style: none;
  margin: clamp(40px, 4vw, 56px) 0 0;
  padding: 0;
  counter-reset: passo;
}
.av-passo {
  border: 1px solid var(--linha);
  border-radius: var(--fx-raio);
  padding: 24px 22px 26px;
  transition: border-color .2s ease, background .2s ease, transform .2s var(--av-cubica);
}
.av-passo:hover { transform: translateY(-2px); border-color: var(--linha-forte); background: var(--fundo-2); }
.av-passo__n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ambar-tinta);
}
.av-passo h3 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  margin: 12px 0 0;
}
.av-passo p { font-size: 14.5px; line-height: 1.62; color: var(--tinta-2); margin: 10px 0 0; }
.av-passo strong { color: var(--tinta); font-weight: 600; }
/* ── Os sete grupos: um índice ─────────────────────────────────────────────
   Duas colunas, uma linha por grupo. Denso como um sumário — é para vencer
   "vou ser soterrado de mensagem" mostrando que o material é separado por
   tipo. Grade sem gap com hairline: a linha é o próprio fundo. */
.av-grupos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  list-style: none;
  margin: clamp(40px, 4vw, 56px) 0 0;
  padding: 0;
}
.av-grupo {
  background: var(--fundo);
  padding: 20px 22px 22px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 12px;
  align-items: baseline;
  /* As linhas internas ficam no topo: numa linha da grade em que o vizinho é
     mais alto, a sobra não pode se dividir entre o título e o texto (com os
     textos do sócio, de tamanhos diferentes, o 04 abria um vão). */
  align-content: start;
  transition: background .2s ease;
}
.av-grupo:hover { background: var(--fundo-2); }
.av-grupo__n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ambar-tinta);
  grid-row: span 2;
}
.av-grupo h3 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  margin: 0;
}
.av-grupo p { font-size: 14px; line-height: 1.55; color: var(--tinta-2); margin: 0; }
/* O 07 (Global Insights, pedido 22 do sócio) ocupa as duas colunas: sete
   itens em duas colunas deixariam uma célula vazia, e o fundo da grade, que é
   a cor da linha, apareceria como uma placa (story 008.4, D4). O texto fica
   a 62ch, a medida de leitura da casa. Até 900 a grade tem uma coluna e a
   regra não muda nada. */
.av-grupo--largo { grid-column: 1 / -1; }
.av-grupo--largo p { max-width: 62ch; }

/* ── A fita dos grupos ──────────────────────────────────────────────────────
   Volta na story 009.1 (pedido 3 do dono, D5 a D7), logo depois dos grupos:
   o leitor acabou de ler o que cada um faz e vê como é por dentro. A fita da
   V2 até a 008.4 era um letreiro que andava sozinho, com um botão PAUSAR; o
   sócio pediu para tirar os dois (pedido 13 da 008.4). Esta não anda: é um
   trilho de rolagem com scroll-snap, conduzido pelo leitor (dedo, trackpad,
   setas do teclado com o trilho em foco, ou os botões ‹ › do bloco 4 do
   js/acta-v2.js). Sem movimento automático, nada a pausar (WCAG 2.2.2), nada
   de clone, nada de duração derivada, nenhuma camada animada.

   O título e a legenda nascem no eixo do caderno, como os dossiês do
   Terminal; só o trilho sangra até a borda da janela. O primeiro print fica
   alinhado ao título (o padding e o scroll-padding do trilho são a margem do
   caderno, a mesma conta de .av-secao__interno), e o print cortado na borda
   direita é o que diz "tem mais", sem máscara nem seta pintada por cima. */
.av-fita { margin-top: clamp(30px, 3.5vw, 48px); }
.av-fita__topo {
  max-width: min(var(--shell), calc(var(--av-caderno) + 2 * var(--gutter)));
  margin: 0 auto 16px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.av-fita__titulo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0;
  min-width: 0;
  /* A 390 a linha quebra; `balance` divide por igual em vez de deixar
     «DE 2026» sozinho embaixo (gate do @qa, NIT-2). */
  text-wrap: balance;
}
/* Os botões nascem com `hidden` no HTML e o script os mostra quando os liga:
   sem JavaScript, ninguém vê um botão que não faz nada, e o trilho continua
   rolando com o dedo e o teclado. A regra de `[hidden]` precisa ser escrita:
   o `display: flex` abaixo venceria a da folha do navegador. */
.av-fita__botoes { display: flex; gap: 8px; flex: none; }
.av-fita__botoes[hidden] { display: none; }
/* 44×44 em toda largura (o alvo de toque da casa), só com tokens: o mesmo
   botão funciona no papel e na noite sem regra por tema. Na ponta, o botão
   fica desligado (`disabled`) e apagado; quem estava com o foco nele é
   levado ao outro pelo script, para o foco não cair no <body>. */
.av-fita__botao {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  line-height: 1;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.av-fita__botao:hover:not(:disabled) { border-color: var(--tinta); }
.av-fita__botao:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 2px; }
.av-fita__botao:disabled { color: var(--tinta-3); background: transparent; border-color: var(--linha); cursor: default; }
/* O trilho. A margem é a do caderno: (largura − coluna do caderno) / 2 +
   gutter, a mesma conta de .av-secao__interno, com o 100% do trilho no lugar
   da largura da seção (no padding, o 100% é a largura do bloco que o contém;
   no scroll-padding, a da janela de rolagem; aqui as duas são a mesma). Até
   560 o --shell é 100% e a margem vira o gutter.

   `mandatory`: todo gesto termina com um print alinhado ao título. O
   scroll-padding é só o do começo, porque o alinhamento é `start`: com ele
   dos dois lados, a janela de encaixe encolhe duas margens, e um print mais
   largo que ela vira "área grande", em que o Chromium deixa a rolagem parar
   em qualquer ponto (medido a 320: o ‹ voltava a 12px, e não a 0, e o fim
   nunca chegava). O `overscroll-behavior` impede que o fim do trilho vire o
   "voltar" do navegador no trackpad. A barra fina fica à vista: é a outra pista de que
   a fileira continua, e não depende de JavaScript. O padding de cima é a
   folga do translateY(-2px) do hover, que o overflow cortaria. */
.av-fita__trilho {
  --av-fita-margem: calc((100% - min(var(--shell), var(--av-caderno) + 2 * var(--gutter))) / 2 + var(--gutter));
  position: relative;
  display: flex;
  gap: var(--av-fita-gap);
  margin: 0;
  padding: 4px var(--av-fita-margem) 14px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--av-fita-margem);
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}
/* O trilho recebe foco (tabindex="0") para as setas do teclado rolarem; o
   contorno vai para dentro, porque o trilho encosta nas bordas da janela. */
.av-fita__trilho:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: -2px; }
/* Sem `content-visibility: auto` — medido na original: não adiou byte nenhum
   e piorou o pior quadro da rolagem de 48ms para 104ms. */
.av-fita__item { flex: none; scroll-snap-align: start; }
/* A altura é a mesma para os 22; a largura sai da proporção de cada arquivo.
   O fundo é o papel (a seção é papel-2): é o que se vê no instante antes de a
   imagem preguiçosa chegar. Hover: a régua do portal, só transição. */
.av-fita__item img {
  display: block;
  height: var(--av-print-h);
  width: auto;
  border-radius: var(--fx-raio);
  border: 1px solid var(--linha);
  background: var(--fundo);
  transition: transform .2s var(--av-cubica), border-color .2s ease;
}
.av-fita__item:hover img { transform: translateY(-2px); border-color: var(--linha-forte); }
.av-fita__legenda {
  max-width: min(var(--shell), calc(var(--av-caderno) + 2 * var(--gutter)));
  margin: 18px auto 0;
  padding: 0 var(--gutter);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--tinta-3);
}

/* ── Terminal ACTA ──────────────────────────────────────────────────────────
   A única seção de vidro da página: é o material das próprias telas que ela
   apresenta. Até a story 009.1 havia um banho de luz por trás, preso à janela
   (`fixed`): as mesmas manchas âmbar, azul e verde do fluido do herói (os
   --fx-luz-* do vidro.css). Saiu com ele, só nesta página (D2): o vidro.css
   não muda, porque serve o /fluxo e o resto do portal. O fundo aqui fica
   liso, e as lâminas ficam com o material delas (cor, contorno, brilho).
   É .av-secao também: padding e régua vêm de lá, dos dois lados. */
.av-terminal {
  background-color: var(--fundo);
  background-image: none;
}
/* Os dossiês: o topo do capítulo fica no caderno e a mostra vai à concha —
   o precedente é a fita (topo no eixo, trilho sangrando; saiu na 008.4 e
   voltou na 009.1).
   Os prints reais do dono pedem largura: a 80% o rótulo de contexto de
   10,5px caía a 8,4px. Cada dossiê abre com o print largo e fecha com a
   lâmina ao lado do print menor. */
.av-terminal__dossies {
  max-width: var(--shell);
  margin: clamp(40px, 4vw, 56px) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(48px, 5vw, 72px);
}
.av-dossie { display: grid; gap: 22px; }
.av-dossie__par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(500px, 100%);
  gap: 22px;
  align-items: stretch;
}
.av-dossie__par--fluxo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.av-dossie__pilha { display: grid; gap: 22px; align-content: start; }
/* Nunca acima de 1:1: ampliar uma captura de 1× borra exatamente o texto que
   o WebP sem perda existe para preservar. */
.av-dossie--feed > .av-terminal__print { max-width: 1220px; }
.av-dossie--fluxo > .av-terminal__print { max-width: 1194px; }
/* A assinatura da casa sobre o dossiê do Fluxo — a receita de fluxo.css
   (.fx-assinatura) copiada com o prefixo trocado, como a fita veio da
   original: é a MESMA assinatura que os três prints carregam por dentro. Sem
   o anel de 1px de lá — não há mais disco preto a contornar. Só no Fluxo: o
   feed nunca teve assinatura, e inventar uma seria inventar produto. */
.av-assinatura {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
  user-select: none;
}
.av-assinatura .av-marca { width: 42px; color: var(--tinta); }
.av-assinatura__marca {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--tinta);
}
.av-assinatura__aba { color: var(--ambar-tinta); }
.av-term-cartao { padding: 26px 26px 28px; display: flex; flex-direction: column; }
.av-term-cartao__kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .22em;
  color: var(--ambar-tinta);
  margin: 0;
}
.av-term-cartao__titulo {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 14px 0 0;
}
.av-term-cartao__texto { font-size: 14.5px; line-height: 1.65; color: var(--tinta-2); margin: 14px 0 0; }
/* A moldura das telas: o preto de CADA print, medido no arquivo, para não
   sobrar fio de outra cor no canto arredondado nem no instante antes de a
   imagem preguiçosa carregar. #000 é o preto chapado do /fluxo; #0B0B0C o do
   tema noite (as linhas do feed); #121212 a ilha escura da home (a caixa
   ÚLTIMAS DA MESA). Valores brutos, documentados: são a cor do objeto.
   Hover: a régua do portal, só transição — nunca scale, que reamostraria o
   texto do print.

   O preto vai na IMAGEM, e o figure fica na cor da legenda: o recorte do
   overflow acontece no raio interno (17px) e o fundo do figure pinta até o
   raio externo (18px) — um anel de 1px que, preto sob a legenda de papel,
   aparecia como um risco escuro nos cantos de baixo. Com o preto só atrás da
   imagem, o que sobra nos cantos de cima é papel sobre papel. */
.av-terminal__print {
  margin: 0;
  border-radius: var(--fx-raio-vidro);
  overflow: hidden;
  border: 1px solid var(--fx-vidro-contorno);
  background: var(--fundo);
  box-shadow: 0 30px 60px -32px rgba(0, 0, 17, .6);
  transition: transform .2s var(--av-cubica);
}
.av-terminal__print:hover { transform: translateY(-2px); }
.av-terminal__print--noite { --av-print-fundo: #0B0B0C; }
.av-terminal__print--ilha  { --av-print-fundo: #121212; }
.av-terminal__print img { display: block; width: 100%; height: auto; background: var(--av-print-fundo, #000); }
.av-terminal__print figcaption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--tinta-3);
  padding: 12px 14px;
  border-top: 1px solid var(--fx-vidro-contorno);
  background: var(--fundo);
}
/* A linha de honestidade: régua âmbar, serifa, como a tese. É a frase que
   mais vende nesta lâmina — porque é a que nenhum concorrente escreve. */
.av-term-cartao__honesto {
  font-family: Newsreader, Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  margin: 16px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--ambar-sup);
}
/* min-height reserva o espaço do dado ao vivo: quando o número entra, a
   página não salta. */
.av-term-cartao__dado {
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-2);
  margin: 18px 0 0;
  min-height: 3.1em;
  padding-top: 16px;
  border-top: 1px solid var(--fx-vidro-linha);
}
.av-term-cartao__dado b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 500; }
.av-term-cartao__dado b.pos { color: var(--fx-positivo-tinta); }
.av-term-cartao__dado b.neg { color: var(--fx-negativo-tinta); }
.av-term-cartao__pe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 16px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--tinta-3);
}
.av-chip {
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  padding: 4px 8px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--tinta-2);
}
.av-term-cartao__link {
  margin-top: auto;
  padding-top: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta);
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color .18s ease;
}
.av-term-cartao__link span { display: inline-block; transition: transform .22s ease; }
.av-term-cartao__link:hover { border-bottom-color: var(--ambar-sup); }
.av-term-cartao__link:hover span { transform: translateX(3px); }
.av-term-cartao__link:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 3px; }
/* A linha de acesso, abaixo da grade: agora verdadeira (épico 003). */
.av-terminal__acesso {
  margin: 26px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--tinta-3);
  max-width: 78ch;
}

/* ── Planos ─────────────────────────────────────────────────────────────────
   Um cartão (story 008.4: sai o segundo plano, pedido 34 do sócio) e UMA
   alternância acima dele. O cartão carrega os dois blocos de preço (PIX e
   parcelado), com os dois links da Hotmart literais — o que a alternância
   faz é escolher qual está à vista, por CSS puro:
   `:has()` lê o radio marcado. Sem `:has()` (navegador antigo), a alternância
   some e os dois blocos aparecem, empilhados — a página continua comprável,
   que é o contrato desde a original. */
.av-forma {
  border: 0;
  margin: 40px 0 0;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--fundo-2);
  border-radius: 999px;
}
.av-forma legend {
  /* Fica no acessível, sai do visual: o segmentado já diz o que é. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.av-forma input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.av-forma label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.av-forma label:hover { color: var(--tinta); }
.av-forma input:checked + label { background: var(--tinta); color: var(--fundo); }
.av-forma input:focus-visible + label { outline: 2px solid var(--ambar-sup); outline-offset: 2px; }
.av-planos-caixa:has(#avFormaPix:checked)  .av-preco--parcelado { display: none; }
.av-planos-caixa:has(#avFormaParc:checked) .av-preco--pix { display: none; }
@supports not selector(:has(a)) {
  .av-forma { display: none; }
}

.av-planos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-top: 24px;
  align-items: start;
}
.av-plano {
  display: flex;
  flex-direction: column;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--fx-raio);
  padding: 26px 24px 26px;
  transition: border-color .2s ease, transform .2s var(--av-cubica);
}
.av-plano:hover { transform: translateY(-2px); border-color: var(--linha-forte); }
.av-plano__nome { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 28px; margin: 0; }
/* "É para você se…": o plano se apresenta pela necessidade, não por selo
   "Recomendado". */
.av-plano__para { font-size: 14.5px; line-height: 1.6; color: var(--tinta-2); margin: 8px 0 0; }
.av-plano__para strong { color: var(--tinta); font-weight: 600; }

.av-preco { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--linha); }
.av-preco + .av-preco { margin-top: 14px; }
.av-preco__formato { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin: 0; }
.av-plano__preco { margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
/* O número grande é o que se paga DE FATO: no PIX, o valor anual; no
   parcelado, a parcela. "Equivale a X por mês" só existe com "pago de uma vez"
   ao lado — sem isso é meia-verdade. */
.av-plano__valor {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -.01em;
}
.av-plano__preco small { font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
.av-plano__resumo {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--linha);
  display: grid;
  gap: 8px;
}
.av-plano__resumo div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.av-plano__resumo dt { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); min-width: 0; }
.av-plano__resumo dd { margin: 0; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; white-space: nowrap; }
.av-preco .av-btn { width: 100%; margin-top: 18px; }
.av-plano__garantia {
  margin: 10px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
  text-align: center;
}

/* Os benefícios (story 009.1, D4): a frase de abertura do dono e os dez
   itens, juntos num bloco. No celular o bloco vem depois do preço, com uma
   régua por cima, que é onde o cartão passa de "quanto" a "o quê"; acima de
   900 ele é a coluna da direita inteira (ver o bloco de 901, adiante). */
.av-plano__beneficios { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--linha); }
/* A abertura em tinta cheia e peso 500: é ela que apresenta a lista, que vem
   em --tinta-2. O mesmo corpo de .av-plano__para, para não virar título. */
.av-plano__abertura { margin: 0; font-size: 14.5px; line-height: 1.55; font-weight: 500; color: var(--tinta); }
.av-plano__itens { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.av-plano__itens li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-2);
}
/* O check do incluído (story 009.1: o dono mandou a lista com ✅). É traço de
   2px desenhado em CSS, não emoji, e continua objeto gráfico: piso de 3,0
   (WCAG 1.4.11), e --ambar-sup dá 3,08:1 sobre o cartão. Nenhum item riscado
   nesta página: o que o plano não tem simplesmente não aparece nele. */
.av-plano__itens li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .3em;
  width: 5px;
  height: 9px;
  border: solid var(--av-marca-sim);
  border-width: 0 2px 2px 0;
  background: none;
  transform: rotate(45deg);
}
.av-plano__falar {
  margin-top: 22px;
  min-height: 40px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
  border-bottom: 1px solid transparent;
  align-self: center;
  transition: color .18s ease, border-color .18s ease;
}
.av-plano__falar:hover { color: var(--tinta); border-bottom-color: var(--linha-forte); }
.av-plano__falar:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 2px; }
/* Um cartão sozinho no caderno de 960 deixaria meia seção vazia (D16): acima
   de 900 ele vira duas colunas, o preço à esquerda e os benefícios à direita
   (a abertura e os dez itens da 009.1, num bloco só), do topo ao pé. A ordem
   do DOM não muda: é a do celular, onde a lista vem depois do preço.
   `grid-row: 1 / span 8` cobre as linhas da coluna da esquerda (nome, para
   quem, os dois preços, a garantia, o botão), com folga; linhas implícitas
   sem conteúdo medem zero. A régua de cima do celular vira a régua da
   esquerda. */
@media (min-width: 901px) {
  .av-plano {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: clamp(28px, 4vw, 48px);
    align-items: start;
    padding: 30px 32px;
  }
  .av-plano > * { grid-column: 1; }
  .av-plano > .av-plano__beneficios {
    grid-column: 2;
    grid-row: 1 / span 8;
    margin: 0;
    padding: 0 0 0 clamp(28px, 4vw, 48px);
    border-top: 0;
    border-left: 1px solid var(--linha);
    align-self: stretch;
  }
  .av-plano__falar { justify-self: center; }
}

.av-garantia {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-top: clamp(30px, 3.5vw, 44px);
  padding: 24px 26px;
  border: 1px solid var(--linha);
  border-radius: var(--fx-raio);
}
.av-garantia__selo {
  flex: none;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1px solid var(--ambar-sup);
  color: var(--ambar-tinta);
  margin: 0;
  line-height: 1;
}
.av-garantia__selo span { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 600; }
.av-garantia__selo small { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; margin-top: 3px; }
.av-garantia strong { font-size: 15.5px; }
.av-garantia > div p { font-size: 14px; line-height: 1.65; color: var(--tinta-2); margin: 8px 0 0; }

/* ── Dúvidas ────────────────────────────────────────────────────────────────
   Cartões, não <details>: cada resposta tem ~30 palavras. Esconder custaria um
   clique e economizaria 60px. */
.av-duvidas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  list-style: none;
  margin: clamp(40px, 4vw, 56px) 0 0;
  padding: 0;
}
.av-duvida {
  border: 1px solid var(--linha);
  border-left-width: 2px;
  border-left-color: var(--linha-forte);
  border-radius: var(--fx-raio);
  padding: 24px 24px 26px;
}
.av-duvida__n { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; color: var(--ambar-tinta); }
.av-duvida h3 { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.2; margin: 10px 0 0; }
.av-duvida p { font-size: 14.5px; line-height: 1.65; color: var(--tinta-2); margin: 10px 0 0; }
.av-duvida strong { color: var(--tinta); font-weight: 600; }

/* ── Chamada final ───────────────────────────────────────────────────────── */

.av-chamada { text-align: center; }
.av-chamada .av-titulo { margin-inline: auto; }
.av-chamada__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
/* A marca no fecho: a única seção centrada por decisão, e o selo que fecha. */
.av-chamada__marca { display: block; width: 40px; color: var(--tinta); margin: 0 auto 18px; }

/* ── Rodapé ─────────────────────────────────────────────────────────────── */

.av-rodape {
  background: var(--fundo);
  color: var(--tinta);          /* mesmo motivo do hero: cor herdada é computada */
  padding: clamp(48px, 5vw, 76px) 0 0;
  border-inline: 0;
  border-bottom: 0;
}
.av-rodape__grade { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.av-rodape__marca { display: flex; align-items: center; gap: 12px; }
/* A marca em papel sobre a ilha — não mais o <img> do ícone, que pintava um
   disco #0B0B0C sobre o navy e precisava de um anel para disfarçar. */
.av-rodape__marca .av-marca { width: 42px; color: var(--tinta); }
.av-rodape__nome { font-weight: 700; letter-spacing: .16em; font-size: 15px; margin: 0; }
.av-rodape__sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .26em; color: var(--tinta-3); margin: 4px 0 0; }
.av-rodape__rotulo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--tinta-3);
  margin: 0 0 14px;
}
.av-rodape__legal p { font-size: 13px; line-height: 1.7; color: var(--tinta-3); max-width: 62ch; margin: 0 0 12px; }
.av-rodape__legal a { border-bottom: 1px solid currentColor; }
.av-rodape__contato { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.av-rodape__contato a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  font-size: 14px;
  color: var(--tinta-2);
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.av-rodape__contato a:hover { color: var(--tinta); border-bottom-color: currentColor; }
.av-rodape__contato a:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 3px; }
.av-rodape__contato a img[src$=".svg"] { filter: invert(1); opacity: .8; }
.av-rodape__contato a .av-marca { width: 18px; }   /* segue a cor do link */
.av-rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 20px;
  padding-bottom: 26px;
  border-top: 1px solid var(--linha);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--tinta-3);
}

/* ── Botão flutuante do WhatsApp ────────────────────────────────────────── */

@keyframes avHalo {
  from { transform: scale(1);   opacity: .5; }
  to   { transform: scale(1.85); opacity: 0; }
}
.av-zap {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 80;                 /* abaixo do 90 do .md-fundo */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 17, .5);
  transition: transform .2s var(--av-cubica), border-color .2s ease;
}
.av-zap:hover { transform: translateY(-2px); border-color: var(--tinta-3); }
.av-zap:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 3px; }
.av-zap__disco {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--av-zap);
  box-shadow: 0 0 0 1px var(--av-zap-aro);
}
/* `3` em vez de `infinite`: um botão que pisca para sempre é um alarme sem
   incêndio. O halo se apresenta e cala. */
.av-zap__disco::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--av-zap);
  animation: avHalo 2.2s var(--av-cubica) 3;
  animation-delay: 1.4s;
  z-index: -1;
}
.av-zap__glifo { width: 24px; height: 24px; fill: var(--av-zap-tinta); }
.av-zap__rotulo { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); }
body.av-travado .av-zap { display: none; }
body.av-travado { overflow: hidden; scrollbar-gutter: stable; }

/* ── Modal do PIX ───────────────────────────────────────────────────────── */

.av-modal__caixa { width: min(520px, 100%); position: relative; max-height: calc(100dvh - var(--gutter) * 2); overflow-y: auto; }
.av-modal__fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  color: var(--tinta-3);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .18s ease;
}
.av-modal__fechar:hover { color: var(--tinta); }
.av-modal__fechar:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: -2px; }
.av-modal__precos {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
  padding: 14px 16px;
  background: var(--fundo-2);
  border-radius: var(--fx-raio);
}
.av-modal__precos div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.av-modal__precos dt { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.av-modal__precos dd { margin: 0; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; }
.av-modal__form { margin-top: 22px; display: grid; gap: 14px; }
.av-modal__campo { margin: 0; display: grid; gap: 6px; }
.av-modal__campo label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.av-modal__campo input {
  min-height: 46px;
  padding: 0 12px;
  font: inherit;
  font-size: 15px;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  transition: border-color .2s ease;
}
.av-modal__campo input:focus { outline: 2px solid var(--ambar-sup); outline-offset: 2px; border-color: var(--tinta-3); }
.av-modal__erro { margin: 0; font-size: 13px; color: var(--coral); min-height: 1.2em; }
.av-modal__erro:empty { min-height: 0; }
.av-modal__nota { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--tinta-3); }

/* ── Responsivo ─────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .av-rodape__grade { grid-template-columns: 1fr 1fr; }
  .av-rodape__marca { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* Era 980 até a story 006.5 (régua de pontos, spec layout-celular §3.2). */
  /* Texto em cima, palco embaixo. O celular cresce um pouco: sozinho na
     linha, 22vw ficaria pequeno demais. */
  :root { --av-cel-l: clamp(220px, 30vw, 300px); }
  .av-hero__interno { grid-template-columns: 1fr; }
  .av-palco { min-height: 0; margin-top: 12px; }
  .av-passos { grid-template-columns: 1fr; }
  /* Lâmina em cima, telas embaixo, uma por linha — cada uma no seu tamanho. */
  .av-dossie__par, .av-dossie__par--fluxo, .av-dossie__pilha { grid-template-columns: 1fr; }
  .av-duvidas { grid-template-columns: 1fr; }
  .av-rodape__grade { grid-template-columns: 1fr; }
  .av-grupos { grid-template-columns: 1fr; }
  /* A fita (009.1) baixa um degrau: no tablet, 420px de print ainda mostram
     dois ou três de uma vez, e o vão aperta junto. */
  :root { --av-print-h: 420px; --av-fita-gap: 16px; }
}

@media (max-width: 560px) {
  /* Os antigos cortes de 720 (planos, garantia, forma de pagamento) e 680
     (filtro da lâmina, gotas, marcas-d'água) vieram para cá na story 006.5
     (régua de pontos, spec layout-celular §3.2). As gotas saíram de vez na
     009.1, com o halo do anel, que aqui parava de respirar, e o banho de luz
     do Terminal, que aqui deixava de ser `fixed`. */
  .av-garantia { flex-direction: column; gap: 16px; }
  .av-forma { display: inline-grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 999px; }
  .av-forma label { justify-content: center; padding: 0 10px; }
  /* O filtro da lâmina sai no celular: um cartão ocupa a largura inteira e
     é onde a camada de composição pesa mais. Material inteiro preservado. */
  .av-term-cartao { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* A marca-d'água do herói some: uma camada raster a menos onde a GPU é mais
     fraca, e a 5% sobre 359px ela não diz nada. */
  .av-hero__marca-dagua { display: none; }
  /* A fita no celular: o print sobe em vez de descer (eram 300px na fita de
     antes). Com a largura toda para um print por vez, 400px de altura põem
     o post largo (780×1040) em 300px, com a ponta do próximo à vista, e o
     texto dele maior que o da fita de antes. O teto é a largura útil: o post
     largo nunca passa da coluna (× 4/3 é a proporção dele, 1040/780), senão
     ele fica maior que a janela de encaixe e o scroll-snap perde as pontas
     (ver .av-fita__trilho). A 390 vale 400px; a 320, 373px. */
  :root { --av-cel-l: min(56vw, 240px); --av-print-h: min(400px, calc((100vw - 2 * var(--gutter)) * 4 / 3)); --av-fita-gap: 12px; }
  .av-hero__acoes .av-btn { width: 100%; }
  /* O título continua em três linhas no celular: o tamanho acompanha a largura
     útil, para "Inteligência de mercado" (13,34 em com o tracking, 13,6 com
     folga) caber numa linha. 26px a 390 (o piso da original); ~20,6px a 320,
     onde a 26px a linha quebraria em "Inteligência" sozinha (story 008.4). */
  .av-hero__titulo { font-size: min(26px, calc((100vw - 2 * var(--gutter)) / 13.6)); }
  /* O palco vira uma coluna: celular centrado, cartões embaixo, um por linha,
     sem deslocamento lateral — aqui não há celular ao lado para encostar. */
  .av-palco { grid-template-columns: 1fr; justify-items: center; gap: 22px 0; }
  .av-flutuantes { width: 100%; }
  /* Três números em duas colunas deixariam uma célula vazia: uma por linha. */
  .av-numeros { grid-template-columns: 1fr; }
  .av-numero-caixa { padding: 20px 18px; }
  .av-zap { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 8px; }
  .av-zap__rotulo { display: none; }
  .av-secao { padding: 52px 0 56px; }
  .av-secao--faixa { padding: 28px 0; }
  .av-chamada__acoes .av-btn { width: 100%; }
  /* A linha de fólio quebra: número e eyebrow numa linha (o eyebrow mais
     longo, "ANTES, DURANTE E DEPOIS DO PREGÃO", somado ao "02" passa dos
     359px), a régua inteira na linha de baixo, sem colofão — a marca já está
     no cabeçalho, no herói e no rodapé; o capítulo continua numerado. */
  .av-topo__linha { flex-wrap: wrap; row-gap: 10px; }
  /* O eyebrow encolhe e quebra o texto ao lado do número, em vez de descer
     inteiro para a linha de baixo como item de flex. */
  .av-eyebrow { white-space: normal; overflow-wrap: anywhere; flex: 1 1 0; min-width: 0; }
  .av-divisa { flex-basis: 100%; order: 3; }
  .av-marca--colofao { display: none; }
  /* A assinatura encolhe como no /fluxo. */
  .av-assinatura .av-marca { width: 34px; }
  .av-assinatura__marca { font-size: 13px; letter-spacing: .14em; }
}

/* Links soltos abaixo de 24 em TODA largura (varredura final da 006.5): a
   «Política de privacidade» do rodapé (15px de altura). (O «recortes reais»
   do número 22 saiu com a fita, na 008.4.) Cresce por `::before`
   transparente, sem mover pixel: 24 sempre, 44 com o dedo até 560. */
.av-rodape__legal a { position: relative; }
.av-rodape__legal a::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  min-width: var(--av-alvo, 24px);
  min-height: var(--av-alvo, 24px);
  transform: translate(-50%, -50%);
}

/* ── Área de toque no celular (spec layout-celular §7.2, E2 da story 006.5) ─
   Com o dedo e até 560px, todo controle tem 44×44 de área. O desenho não muda:
   o link do cartão (39px de altura) e os de contato do rodapé (34, com 12 de
   vão) crescem por um `::before` transparente centrado, que não entra no
   fluxo; o toque no pseudo-elemento é do dono. O «Falar com a mesa antes»
   (40) sobe a altura mínima, como o `.ed-btn` da casa. Acima de 560 nenhum
   deles fica abaixo de 24, e nada muda. */
@media (max-width: 560px) and (pointer: coarse) {
  .av-term-cartao__link, .av-rodape__contato a { position: relative; }
  .av-rodape__legal { --av-alvo: 44px; }
  .av-term-cartao__link::before, .av-rodape__contato a::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    transform: translate(-50%, -50%);
  }
  .av-plano__falar { min-height: 44px; }
}

/* ── Movimento reduzido ────────────────────────────────────────────────────
   No FIM do arquivo, de propósito: estas regras precisam vencer as normais, e
   várias têm a mesma especificidade. E como `.01ms` aterrissa no ÚLTIMO
   keyframe, cada animação precisa dizer o que vira. A regra da casa: nada
   some — o esforço passa para a mão do leitor.

   · revelação → tudo visível de imediato
   · contadores → o valor final (o JS lê matchMedia e não anima)
   · a linha do anel → parada (as gotas e o halo saíram na 009.1)
   · celular → já nasce em repouso; corpo e sombra sem flutuação
   · cartões → parados, sem deslocamento
   · a linha que cresce → estática, inteira
   · o colofão na ponta dela → visível de saída (a última regra do bloco)
   · as chapas por seção e a marca-d'água → iguais: nada nelas se move
   · o título → inteiro, sem cursor
   · a fita (009.1) → nada a fazer: ela não anda sozinha. Os botões rolam
     sem suavizar (o JS lê matchMedia, e o `scroll-behavior` cai acima)
   (O sumário, que tinha regra própria aqui, saiu na 008.4. A fita de antes,
   o letreiro, também tinha, e saiu com ele.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html[data-revela] .av-revela { opacity: 1 !important; transform: none !important; animation: none !important; }
  .av-divisa { animation: none !important; transform: none !important; }
  .av-celular { animation: none !important; opacity: 1 !important; transform: none !important; }
  .av-celular__corpo, .av-celular__sombra { animation: none !important; transform: none !important; }
  .av-flutuante { animation: none !important; transform: none !important; }
  .av-hero__cursor { display: none !important; }
  .av-hero__linha > span { animation: none !important; clip-path: none !important; }
  .av-zap__disco::after { animation: none !important; }
  .av-marca--colofao { opacity: 1 !important; }
}