/* A ACTA — a landing institucional dentro do Terminal.
   Especificação: docs/design/a-acta-landing.md
   Depende de css/site.css (tokens, ilha, modal) e de css/vidro.css (a lâmina,
   o cabeçalho e o selo). Daqui não sai valor de cor bruto — só token — com as
   duas exceções documentadas abaixo (o verde do WhatsApp e o vidro do hero),
   que são marca de terceiro e camada de imagem.

   A página veio de actapartners.com.br, onde era navy sólido com dourado
   #FFBD4A e Montserrat. Nada disso atravessa: o dourado dá 12,4:1 sobre
   #00030b e 1,34:1 sobre o papel #E9E7E0. Ou a superfície abaixo vira a ilha
   invariante e o dourado fica, ou a peça sai para o papel e o âmbar passa a
   ser --ambar-tinta (texto) ou --ambar-sup (superfície). Sem exceção. */

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

  /* Listas de benefício. O site de origem marcava o disponível com #FFBD4A e
     glow e o indisponível com #ff3b3b e neon; aqui os dois são tokens da casa. */
  --ac-marca-sim: var(--ambar-sup);
  --ac-marca-nao: var(--coral);
  --ac-indisponivel: color-mix(in srgb, var(--tinta) 68%, transparent);

  /* Velocidade do marquee, em px/s. A DURAÇÃO é derivada da largura do trilho
     (js/acta.js), nunca copiada: o site de origem fixava 42s para um trilho de
     largura desconhecida, o que dava 218 px/s no desktop e 145 no celular —
     velocidades diferentes para a mesma peça. */
  --ac-mq-vel: 215;
  --ac-fita-dur: 42s;      /* piso, para quando não houver medida */
  --ac-print-h: 480px;
  --ac-fita-gap: 20px;

  /* Luz do hero. Vive DENTRO da ilha, então é medida contra #000011. */
  --ac-hero-luz-a: oklch(.66 .17 55 / .22);
  --ac-hero-luz-b: oklch(.56 .15 250 / .16);
}

[data-tema="noite"] {
  --ac-zap-aro: transparent;   /* no escuro o próprio verde já se destaca (8,5:1) */
  --ac-indisponivel: color-mix(in srgb, var(--tinta) 64%, transparent);
}

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

.ac-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. */
.ac-pagina section[id], .ac-pagina [id] { scroll-margin-top: calc(var(--topo) + 14px); }

.ac-secao { padding: clamp(58px, 6.5vw, 104px) 0; }
.ac-secao + .ac-secao { border-top: 1px solid var(--linha); }
.ac-secao__interno { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

.ac-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .22em;
  color: var(--ambar-tinta);
  margin: 0;
}
.ac-rotulo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--tinta-3);
  margin: 26px 0 0;
}
.ac-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;
  max-width: 24ch;
  margin: 16px 0 0;
}
/* O h2 de "A mesa" é uma frase longa de propósito — é o posicionamento da
   marca, e cortá-lo em manchete perderia a construção. Ele ganha medida de
   parágrafo, não de título. */
.ac-secao#a-mesa .ac-titulo { max-width: 30ch; font-size: clamp(23px, 2.4vw, 35px); }
.ac-titulo--curto { max-width: 20ch; }
.ac-titulo strong { font-weight: 500; }
.ac-apoio {
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--tinta-2);
  max-width: 62ch;
  margin: 16px 0 0;
}
.ac-apoio strong { color: var(--tinta); font-weight: 600; }

/* ── Botões ─────────────────────────────────────────────────────────────────
   A régua do portal: translateY(-2px) em .2s. O site de origem subia 6px em
   .3s — um cartão que sobe o triplo numa página onde tudo sobe 2 não parece
   mais importante, parece de outro site. */
.ac-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 cubic-bezier(.2, .8, .2, 1);
}
.ac-btn:hover { transform: translateY(-2px); }
.ac-btn:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 2px; }
.ac-btn--solido { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.ac-btn--fantasma { color: var(--tinta); }
.ac-btn--fantasma:hover { border-color: var(--tinta); background: var(--fundo-2); }
.ac-btn--ouro { background: var(--ambar-sup); color: #000011; border-color: var(--ambar-sup); }

/* ── Hero ───────────────────────────────────────────────────────────────────
   Ilha invariante (.ilha-navy reescreve os tokens de tinta para dentro do
   bloco, em site.css:1528). É a única superfície onde o dourado da marca
   mantém o contraste que tinha na origem. */
.ac-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--fundo);
  /* `color` é herdado como valor COMPUTADO: o <body> já resolveu var(--tinta)
     para a tinta escura antes de a ilha reescrever o token, e quem só herda
     ficaria preto sobre preto. A ilha precisa repintar a si mesma. */
  color: var(--tinta);
  border-inline: 0;
}
/* A fotografia fica ESTÁTICA. O site de origem animava a foto inteira
   (heroDrift, scale 1.06→1.18 por 18s): uma camada composta do tamanho do hero
   arrastando uma textura raster. Aqui quem respira é a luz, que é gradiente —
   compõe sem repintar e sem decodificar imagem. */
.ac-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(97deg,
      var(--fundo) 0%, var(--fundo) 30%,
      color-mix(in srgb, var(--fundo) 82%, transparent) 55%,
      color-mix(in srgb, var(--fundo) 40%, transparent) 100%),
    url('/img/acta/hero-fundo.webp') right center / cover no-repeat;
}
@keyframes acDeriva {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
  to   { transform: translate3d( 2.2%, 1.2%, 0) scale(1.12); }
}
/* 26s e não os 18s da origem: sem a textura da foto por baixo, 18s vira um
   brilho que "anda" visivelmente; 26s fica abaixo do limiar e lê como
   respiração. Custo: uma camada composta, zero repaint. */
.ac-hero__luz {
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 44% at 14%  6%, var(--ac-hero-luz-a), transparent 62%),
    radial-gradient(42% 38% at 74% 82%, var(--ac-hero-luz-b), transparent 64%);
  animation: acDeriva 26s ease-in-out infinite alternate;
}
.ac-hero__interno {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(72px, 8vw, 132px) var(--gutter) clamp(64px, 7vw, 116px);
  animation: actaUp .5s ease both;
}
.ac-hero__kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .22em;
  color: var(--ambar-tinta);
  margin: 0;
}
/* Sem ponto pulsante ao lado: actaPulse significa "ao vivo" no portal
   (o selo do pipeline, o kicker da home) e nada nesta página é ao vivo. */

.ac-hero__titulo {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 4.1vw, 68px);
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 22px 0 0;
  max-width: 17ch;
}

/* A revelação do título. O site de origem animava `width` de um inline-block
   dentro de requestAnimationFrame: isso força layout e paint do texto a cada
   quadro e obriga o script a esperar document.fonts.ready para medir a largura
   final em pixels — se a métrica trocasse no meio, a janela ficava errada e a
   linha saltava. clip-path é composto e é percentual: se a métrica mudar, a
   janela reescala junto e não há salto. E como o repouso é o keyframe FINAL,
   ele obedece o reset de movimento reduzido sem regra extra.
   Total 3,0s contra os 5,2s da origem — 5,2s é mais tempo do que a mediana até
   a primeira rolagem. */
@keyframes acRevela {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.ac-hero__linha { display: block; white-space: nowrap; }
.ac-hero__linha > span {
  display: inline-block;
  animation: acRevela var(--ac-d) cubic-bezier(.2, .8, .2, 1) both;
}
.ac-hero__linha:nth-child(1) > span { --ac-d: 1.45s; animation-delay: .30s; }
.ac-hero__linha:nth-child(2) > span { --ac-d: 1.15s; animation-delay: 1.87s; }

@keyframes acCursor { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
/* Mesmo período da origem (.9s steps(1)) — é o ritmo que o dono reconhece. O
   que sai é o box-shadow de neon dourado, que repintava a cada 450ms. */
.ac-hero__cursor {
  display: inline-block;
  width: 3px;
  height: .78em;
  margin-left: 8px;
  vertical-align: -.04em;
  background: var(--ambar-tinta);
  animation: acCursor .9s steps(1) infinite;
  animation-delay: 3.02s;
  opacity: 0;
}
.ac-hero__apoio {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--tinta-2);
  max-width: 56ch;
  margin: 24px 0 0;
}
.ac-hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ── Sumário ────────────────────────────────────────────────────────────── */

.ac-sumario {
  border-bottom: 1px solid var(--linha);
  background: var(--fundo);
  display: flex;
  gap: 28px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.ac-sumario::-webkit-scrollbar { display: none; }
.ac-sumario a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
  padding: 14px 0;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.ac-sumario a:hover { color: var(--tinta); border-bottom-color: var(--ambar-sup); }
.ac-sumario a:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: -2px; }

/* ── A fita de prints ───────────────────────────────────────────────────────
   translate3d e não translateX: promove a camada pela transformação em si, sem
   `will-change: transform` — que a origem usava e que, sendo permanente,
   mantém a camada viva mesmo com a animação pausada. */
@keyframes acFita {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.ac-fita { margin-top: clamp(38px, 4vw, 62px); }
.ac-fita__topo {
  max-width: var(--shell);
  margin: 0 auto 16px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ac-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;
}
/* Alvo de 44px: pausa por :hover é exclusiva de mouse e :focus-within só cobre
   teclado. Quem está no celular não tem nem um nem outro. */
.ac-fita__pausa {
  min-height: 44px;
  padding: 0 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-2);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.ac-fita__pausa:hover { color: var(--tinta); border-color: var(--tinta-3); }
.ac-fita__pausa:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 2px; }

.ac-fita__janela {
  overflow: hidden;
  /* A máscara evita o corte seco nas duas pontas — a fita entra e sai da
     página em vez de bater numa parede. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ac-fita__trilho {
  display: flex;
  gap: var(--ac-fita-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: acFita var(--ac-fita-dur) linear infinite;
}
.ac-fita:hover .ac-fita__trilho,
.ac-fita:focus-within .ac-fita__trilho,
.ac-fita[data-pausada="true"] .ac-fita__trilho { animation-play-state: paused; }

/* Sem `content-visibility: auto` aqui, e foi medido: ele não adiou byte nenhum
   (o `loading=lazy` dos 22 prints já não adia, porque o trilho inteiro está no
   layout a poucos pixels do viewport, e o limiar do Chromium é vertical) e
   PIOROU a pintura — pior quadro da rolagem de 48,5ms para 104ms, porque
   entrar e sair do estado pulado força relayout dos itens. Mediana igual nos
   dois. O que protege o primeiro paint aqui é a PRIORIDADE das imagens da
   fita, não a contenção: ver fetchpriority="low" em a-acta.html. */
.ac-fita__item { flex: none; }
.ac-fita__item img {
  display: block;
  height: var(--ac-print-h);
  width: auto;
  border-radius: var(--fx-raio);
  border: 1px solid var(--linha);
  background: var(--fundo-2);
}
.ac-fita__legenda {
  max-width: var(--shell);
  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);
}

/* ── Os seis grupos ─────────────────────────────────────────────────────────
   Grade estática, não fita. Cada cartão tem ~35 palavras e cruzava a janela de
   1320px em 4,4s a 215px/s: exigia 477 palavras por minuto, contra as 200–250
   de um leitor real em português. Texto que passa rápido demais não é
   movimento, é ruído. */
.ac-grupos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
.ac-grupo {
  background: var(--fundo);
  padding: 26px 24px 28px;
  transition: background .2s ease;
}
.ac-grupo:hover { background: var(--fundo-2); }
.ac-grupo__n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ambar-tinta);
}
.ac-grupo h3 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: 23px;
  line-height: 1.2;
  margin: 10px 0 0;
}
.ac-grupo p { font-size: 14.5px; line-height: 1.6; color: var(--tinta-2); margin: 10px 0 0; }

/* ── A tese ─────────────────────────────────────────────────────────────────
   O "NUNCA" em caixa alta da origem vira Newsreader itálico 300 — as únicas
   maiúsculas do portal são versaletes mono e a .fd-manchete, e o itálico 300
   está carregado em fonts.css sem nenhum uso. É a sua vocação. */
.ac-tese {
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding-left: clamp(18px, 2.4vw, 30px);
  border-left: 2px solid var(--ambar-sup);
  max-width: 66ch;
}
.ac-tese p {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.52;
  margin: 0;
}
.ac-tese p + p { margin-top: 18px; }
.ac-tese em { font-style: italic; font-weight: 300; }
.ac-tese strong { font-weight: 500; }

/* ── As seis entregas ───────────────────────────────────────────────────── */

.ac-entregas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  list-style: none;
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding: 0;
}
.ac-cartao {
  border: 1px solid var(--linha);
  border-radius: var(--fx-raio);
  padding: 24px 22px 26px;
  transition: border-color .2s ease, background .2s ease,
              transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ac-cartao:hover { transform: translateY(-2px); border-color: var(--linha-forte); background: var(--fundo-2); }
.ac-cartao__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  color: var(--ambar-tinta);
}
/* Os ícones são SVG inline, herdando currentColor. É o que a página própria
   compra em relação à SPA: o dc.js usa createElement no namespace HTML, então
   <svg> inline dentro do #app entra na árvore e não desenha nada. */
.ac-icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ac-cartao h3 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.22;
  margin: 18px 0 0;
}
.ac-cartao p { font-size: 14.5px; line-height: 1.62; color: var(--tinta-2); margin: 10px 0 0; }
.ac-cartao strong { color: var(--tinta); font-weight: 600; }

/* ── Terminal ACTA ──────────────────────────────────────────────────────────
   A única seção de vidro da página: é o material das próprias telas que ela
   apresenta. O banho de luz é obrigatório — sem ele o backdrop-filter da
   lâmina não tem o que refratar e o cartão vira retângulo pintado. `fixed`
   prende a luz à janela, então a seção desliza por baixo dela. */
.ac-terminal {
  padding: clamp(58px, 6.5vw, 104px) 0;
  border-top: 1px solid var(--linha);
  background-color: var(--fundo);
  background-image:
    radial-gradient(52% 44% at  8% -6%, var(--fx-luz-a), transparent 62%),
    radial-gradient(46% 36% at 94% 22%, var(--fx-luz-b), transparent 62%),
    radial-gradient(50% 40% at 40% 96%, var(--fx-luz-c), transparent 64%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.ac-terminal__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 40px;
}
.ac-term-cartao { padding: 26px 26px 28px; display: flex; flex-direction: column; }
.ac-term-cartao__kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .22em;
  color: var(--ambar-tinta);
  margin: 0;
}
.ac-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;
}
.ac-term-cartao__texto { font-size: 14.5px; line-height: 1.65; color: var(--tinta-2); margin: 14px 0 0; }
/* min-height reserva o espaço do dado ao vivo: quando o número entra, a
   página não salta. */
.ac-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);
}
.ac-term-cartao__dado b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 500; }
.ac-term-cartao__dado b.pos { color: var(--fx-positivo-tinta); }
.ac-term-cartao__dado b.neg { color: var(--fx-negativo-tinta); }
.ac-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);
}
.ac-chip {
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  padding: 4px 8px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--tinta-2);
}
.ac-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;
}
.ac-term-cartao__link span { display: inline-block; transition: transform .22s ease; }
.ac-term-cartao__link:hover { border-bottom-color: var(--ambar-sup); }
.ac-term-cartao__link:hover span { transform: translateX(3px); }
.ac-term-cartao__link:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 3px; }

/* ── Dúvidas ────────────────────────────────────────────────────────────────
   Cartões, não <details>: cada resposta tem ~28 palavras. Esconder custaria um
   clique e economizaria 60px. Registrado para não ser "corrigido" depois. */
.ac-duvidas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
.ac-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;
}
.ac-duvida__n { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; color: var(--ambar-tinta); }
.ac-duvida h3 { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.2; margin: 10px 0 0; }
.ac-duvida p { font-size: 14.5px; line-height: 1.65; color: var(--tinta-2); margin: 10px 0 0; }

/* ── Planos ─────────────────────────────────────────────────────────────── */

.ac-planos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 44px;
  align-items: start;
}
.ac-plano {
  display: flex;
  flex-direction: column;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--fx-raio);
  padding: 22px 20px 24px;
  transition: border-color .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ac-plano:hover { transform: translateY(-2px); border-color: var(--linha-forte); }
/* Deslocamento estático, não scale: scale reamostra o texto do cartão. */
.ac-plano--destaque { border-color: var(--ambar-sup); transform: translateY(-10px); }
.ac-plano--destaque:hover { transform: translateY(-12px); }

.ac-plano__fitas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; min-height: 22px; }
.ac-fita-selo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--ambar-sup);
  color: #000011;
}
.ac-fita-selo--fraca { background: transparent; border: 1px solid var(--linha-forte); color: var(--tinta-3); }
/* A fita "Recomendado" é ilha: âmbar claro sobre quase-preto, 12,1:1 nos dois
   temas — a única peça da página com cor invariante além do WhatsApp. */
.ac-fita-selo--recomendado { background: var(--inverso-fundo); color: oklch(.83 .13 72); }

.ac-plano__formato { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin: 0; }
.ac-plano__nome { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 25px; margin: 8px 0 0; }
.ac-plano__preco { margin: 18px 0 0; display: flex; flex-direction: column; gap: 4px; }
.ac-plano__valor {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -.01em;
}
.ac-plano__preco small { font-size: 12px; color: var(--tinta-3); }

.ac-plano__resumo {
  margin: 18px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  display: grid;
  gap: 8px;
}
.ac-plano__resumo div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ac-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; }
/* O valor nunca quebra: com quatro cartões numa fileira a coluna fica estreita
   e "R$ 54,92/mês" partia entre a moeda e o número. Quem cede é o rótulo. */
.ac-plano__resumo dd { margin: 0; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; white-space: nowrap; }

.ac-plano__itens { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.ac-plano__itens li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta-2);
}
/* Bolinha de 8px é objeto gráfico: piso de 3,0 (WCAG 1.4.11), e --ambar-sup dá
   3,08:1 sobre o cartão. Passa por 0,08 — de propósito. Usar --ambar-tinta
   aqui apagaria a lista inteira. */
.ac-plano__itens li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .48em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ac-marca-sim);
}
.ac-plano__itens li.ac-plano__item--nao { color: var(--ac-indisponivel); }
/* O seletor precisa ser composto. `.ac-plano__item--nao::before` sozinho tem
   especificidade (0,1,1) e PERDE para `.ac-plano__itens li::before`, que tem
   (0,1,2) — e aí o benefício ausente ganhava a mesma bolinha âmbar do
   presente. Não é detalhe de estilo: os dois cartões PRO passavam a prometer
   mentorias e encontros ao vivo que o plano não inclui. */
.ac-plano__itens li.ac-plano__item--nao::before {
  content: "×";
  background: none;
  width: auto;
  height: auto;
  top: 0;
  left: 1px;
  color: var(--ac-marca-nao);
  font-size: 14px;
  line-height: 1.45;
}

.ac-plano__acoes { margin-top: 22px; display: grid; gap: 10px; }
.ac-plano__acoes .ac-btn { width: 100%; }
.ac-plano__falar {
  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;
  justify-self: center;
  transition: color .18s ease, border-color .18s ease;
}
.ac-plano__falar:hover { color: var(--tinta); border-bottom-color: var(--linha-forte); }
.ac-plano__falar:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 2px; }

.ac-garantia {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-top: clamp(38px, 4vw, 58px);
  padding: 24px 26px;
  border: 1px solid var(--linha);
  border-radius: var(--fx-raio);
  max-width: 76ch;
}
.ac-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;
}
.ac-garantia__selo span { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 600; }
.ac-garantia__selo small { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; margin-top: 3px; }
.ac-garantia strong { font-size: 15.5px; }
.ac-garantia > div p { font-size: 14px; line-height: 1.65; color: var(--tinta-2); margin: 8px 0 0; }

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

.ac-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;
}
.ac-rodape__grade { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.ac-rodape__marca { display: flex; align-items: center; gap: 12px; }
.ac-rodape__marca img { border-radius: 50%; display: block; box-shadow: 0 0 0 1px var(--linha); }
.ac-rodape__nome { font-weight: 700; letter-spacing: .16em; font-size: 15px; margin: 0; }
.ac-rodape__sub { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .26em; color: var(--tinta-3); margin: 4px 0 0; }
.ac-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;
}
/* O disclaimer é para ser lido se procurado, não para ser escondido. */
.ac-rodape__legal p { font-size: 13px; line-height: 1.7; color: var(--tinta-3); max-width: 62ch; margin: 0 0 12px; }
.ac-rodape__contato { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ac-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;
}
.ac-rodape__contato a:hover { color: var(--tinta); border-bottom-color: currentColor; }
.ac-rodape__contato a:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 3px; }
/* Os SVG de rede são monocromáticos e vêm em tinta escura: dentro da ilha eles
   precisam inverter. Vale só para eles — logo de terceiro (os tickers) nunca
   pode ser invertido. */
.ac-rodape__contato a img[src$=".svg"] { filter: invert(1); opacity: .8; }
[data-tema="noite"] .ac-rodape__contato a img[src$=".svg"] { filter: invert(1); }
.ac-rodape__contato a img[src$=".png"] { border-radius: 50%; }
.ac-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 acHalo {
  from { transform: scale(1);   opacity: .5; }
  to   { transform: scale(1.85); opacity: 0; }
}
.ac-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 cubic-bezier(.2, .8, .2, 1), border-color .2s ease;
}
.ac-zap:hover { transform: translateY(-2px); border-color: var(--tinta-3); }
.ac-zap:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: 3px; }
.ac-zap__disco {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ac-zap);
  box-shadow: 0 0 0 1px var(--ac-zap-aro);
}
/* 2,2s é o período do actaPulse da casa — o ritmo já existe, não é um novo. E
   `3` em vez de `infinite`: um botão que pisca para sempre num portal de
   leitura é um alarme sem incêndio. O halo se apresenta e cala. É
   transform+opacity, composto — a origem animava box-shadow, que repinta. */
.ac-zap__disco::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--ac-zap);
  animation: acHalo 2.2s cubic-bezier(.2, .8, .2, 1) 3;
  animation-delay: 1.4s;
  z-index: -1;
}
.ac-zap__glifo { width: 24px; height: 24px; fill: var(--ac-zap-tinta); }
.ac-zap__rotulo { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); }
/* Um botão verde por cima do véu do modal seria ruído. */
body.ac-travado .ac-zap { display: none; }

/* A trava de rolagem. O site de origem punha a classe .pix-modal-lock no
   <body> e nunca escreveu a regra: a página rolava atrás do véu enquanto o
   formulário estava aberto. `scrollbar-gutter` evita o salto lateral de 15px
   que travar o overflow costuma causar no desktop. */
body.ac-travado { overflow: hidden; scrollbar-gutter: stable; }

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

.ac-modal__caixa { width: min(520px, 100%); position: relative; max-height: calc(100dvh - var(--gutter) * 2); overflow-y: auto; }
.ac-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;
}
.ac-modal__fechar:hover { color: var(--tinta); }
.ac-modal__fechar:focus-visible { outline: 2px solid var(--ambar-sup); outline-offset: -2px; }
.ac-modal__precos {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
  padding: 14px 16px;
  background: var(--fundo-2);
  border-radius: var(--fx-raio);
}
.ac-modal__precos div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ac-modal__precos dt { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.ac-modal__precos dd { margin: 0; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; }
.ac-modal__form { margin-top: 22px; display: grid; gap: 14px; }
.ac-modal__campo { margin: 0; display: grid; gap: 6px; }
.ac-modal__campo label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.ac-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;
}
.ac-modal__campo input:focus { outline: 2px solid var(--ambar-sup); outline-offset: 2px; border-color: var(--tinta-3); }
.ac-modal__erro { margin: 0; font-size: 13px; color: var(--coral); min-height: 1.2em; }
.ac-modal__erro:empty { min-height: 0; }
.ac-modal__nota { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--tinta-3); }

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

@media (max-width: 1180px) {
  :root { --ac-print-h: 420px; }
  .ac-planos { grid-template-columns: repeat(2, 1fr); }
  .ac-rodape__grade { grid-template-columns: 1fr 1fr; }
  .ac-rodape__marca { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .ac-grupos, .ac-entregas { grid-template-columns: repeat(2, 1fr); }
  .ac-terminal__grade { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --ac-print-h: 360px; --ac-fita-gap: 16px; }
  .ac-duvidas { grid-template-columns: 1fr; }
  .ac-rodape__grade { grid-template-columns: 1fr; }
  /* A linha "Inteligência de mercado aplicada" em Newsreader a 34px mede
     ~470px: abaixo de 900px ela não cabe em nowrap, e uma revelação por
     recorte sobre um texto que estoura o contêiner mostra uma frase
     permanentemente cortada. Mais honesto desligar do que remendar. */
  .ac-hero__linha { white-space: normal; }
  .ac-hero__linha > span { animation: none; clip-path: none; }
  .ac-hero__cursor { display: none; }
}

@media (max-width: 720px) {
  .ac-grupos, .ac-entregas { grid-template-columns: 1fr; }
  .ac-planos { grid-template-columns: 1fr; }
  /* Sem vizinho contra o qual se destacar, o deslocamento vira só um buraco. */
  .ac-plano--destaque { transform: none; }
  .ac-plano--destaque:hover { transform: translateY(-2px); }
  /* No empilhamento os recomendados vêm primeiro: quem rola no celular não
     pode percorrer o cartão mais fraco antes. A ordem do DOM segue a do
     desktop, que é onde a tabulação importa mais. */
  .ac-plano:nth-child(2) { order: 1; }
  .ac-plano:nth-child(3) { order: 2; }
  .ac-plano:nth-child(1) { order: 3; }
  .ac-plano:nth-child(4) { order: 4; }
  .ac-garantia { flex-direction: column; gap: 16px; }
}

@media (max-width: 680px) {
  /* O filtro da lâmina sai no celular: um cartão ocupa a largura inteira,
     quase não sobra página ao lado para o olho comparar dentro e fora, e é
     onde a camada de composição pesa mais. Material inteiro preservado. */
  .ac-term-cartao { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ac-terminal { background-attachment: scroll; }
}

@media (max-width: 560px) {
  :root { --ac-print-h: 300px; --ac-fita-gap: 12px; }
  .ac-fita__janela {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .ac-hero__acoes .ac-btn { width: 100%; }
  .ac-zap { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 8px; }
  .ac-zap__rotulo { display: none; }
  .ac-secao { padding: 44px 0 48px; }
}

/* ── Movimento reduzido ────────────────────────────────────────────────────
   No FIM do arquivo, de propósito: estas regras precisam vencer as normais,
   e várias delas têm a mesma especificidade. No topo, `overflow: auto` da
   fita perdia para o `overflow: hidden` declarado 300 linhas abaixo — e a
   fita parava sem virar rolável, escondendo 19 dos 22 prints justamente de
   quem pediu menos movimento.
─
   O bloco de site.css:139-141 neutraliza só animation-duration e
   animation-iteration-count. As 26 transições do portal seguem correndo, seis
   delas movendo transform — que é justamente o que a preferência pede para não
   acontecer. Aqui o reset fica completo.

   E como `.01ms` aterrissa no ÚLTIMO keyframe, cada animação precisa dizer o
   que vira: um marquee cujo keyframe final é translate3d(-50%) CONGELA no meio
   do trilho, e 19 dos 22 prints ficariam permanentemente fora da tela para
   exatamente o leitor que pediu acessibilidade. Por isso a fita vira rolagem
   manual: o esforço passa para a mão do leitor, que é o contrato da
   preferência — mas o conteúdo continua alcançável. */
@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;
  }
  .ac-hero__luz, .ac-zap__disco::after { animation: none !important; }
  .ac-hero__cursor { display: none !important; }
  .ac-hero__linha > span { animation: none !important; clip-path: none !important; }
  .ac-fita__trilho { animation: none !important; transform: none !important; }
  /* `overflow: auto hidden` e não só overflow-x: a regra normal usa o
     atalho `overflow: hidden`, que escreve os dois eixos. */
  .ac-fita__janela { overflow: auto hidden; scroll-snap-type: x mandatory; }
  .ac-fita__item { scroll-snap-align: center; }
  .ac-fita__item--clone { display: none !important; }
  .ac-fita__pausa { display: none !important; }
}