/* =============================================================================
   RF-C3 — "Como a contagem foi feita", a página pública da contagem da ROTA FORTE.

   Vem DEPOIS das folhas da página nova (`app.css`, a do 48º, a casca, a da chave e
   `pagina-vendas-rf.css`), com as mesmas classes `rf-` e os mesmos tokens (`--rf-*`).

   ⭐ Por que esta folha existe: o `<body>` desta página ⛔ leva a classe `pv48`. Com ela, o
   `analytics.js` liga o hiper-rastreador da página de VENDAS (P48-71): `page_ready`,
   `page_heartbeat`, `page_exit`… marcados como a peça 48 (ou 100) e SEM o caminho, que o servidor
   descarta fora da raiz — as leituras desta página se misturariam com as da venda. Sem `pv48`, a
   medição é a genérica do portal (rolagem e cliques), e cada evento leva `page_path=/contagem/`.
   Aqui ficam só as regras da folha do 48º que a página nova recebe por `body.pv48` e que esta
   página também usa (base, tipografia dos títulos, foco, links), escritas para `body.rf-pagina-contagem`
   com os mesmos valores. ⛔ Cor fora da paleta da RF-F6, ⛔ recurso de outro domínio.
   ⚠ O nome da classe do `<body>` é `rf-pagina-contagem`, ⛔ `rf-contagem`: esse é o componente
   dos quatro números da S4 (`.rf-contagem li` vira cartão), e no `<body>` vestiria cada assunto.
   ========================================================================== */

/* ── A base que a página nova recebe de `body.pv48` (pagina-vendas-48-uau.css) ─────────── */
body.rf-pagina-contagem {
  display: block; min-height: 0; margin: 0;
  /* RF-V2: ⛔ o grão de papel da 48 (S67): a D6 v2 é branco liso. */
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html:has(body.rf-pagina-contagem) { scroll-padding-top: 16px; }
body.rf-pagina-contagem [hidden] { display: none !important; }
:where(body.rf-pagina-contagem) h1, :where(body.rf-pagina-contagem) h2, :where(body.rf-pagina-contagem) h3,
:where(body.rf-pagina-contagem) p, :where(body.rf-pagina-contagem) ol, :where(body.rf-pagina-contagem) ul,
:where(body.rf-pagina-contagem) figure { margin: 0; }
body.rf-pagina-contagem main ol, body.rf-pagina-contagem main ul { padding: 0; list-style: none; }
body.rf-pagina-contagem main a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
body.rf-pagina-contagem main a:hover { text-underline-offset: .28em; text-decoration-thickness: 2px; }
body.rf-pagina-contagem img, body.rf-pagina-contagem svg { display: block; max-width: 100%; }
:where(body.rf-pagina-contagem button) { font: inherit; color: inherit; }
:where(body.rf-pagina-contagem strong), :where(body.rf-pagina-contagem b) { font-weight: 600; }
body.rf-pagina-contagem :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
body.rf-pagina-contagem .pv-pular { background: var(--rf-grafite); color: var(--rf-papel); }
body.rf-pagina-contagem main h2[id] { scroll-margin-top: clamp(1.5rem, 4vw, 2.5rem); }
body.rf-pagina-contagem aside[role="note"] { color: var(--soft); }

/* Os títulos em Literata, como os da página nova (D6 v2): o h1 800 e os h2 700, num passo de
   escala claro (S39): 36/32 px no celular, 56/44 px no computador. */
body.rf-pagina-contagem .pv-h1,
body.rf-pagina-contagem .pv-h2 {
  font-family: var(--rf-titulo); font-weight: 800; color: var(--ink); text-wrap: balance;
}
body.rf-pagina-contagem .pv-h1 { max-width: none; font-size: 2.25rem; line-height: 1.08; letter-spacing: -.012em; }
body.rf-pagina-contagem .pv-h2 { font-weight: 700; letter-spacing: -.01em; }
@media (min-width: 1000px) { body.rf-pagina-contagem .pv-h1 { font-size: 3.5rem; line-height: 1.04; } }

/* ── O topo: a assinatura e "Voltar para a página" ───────────────────────────────────── */
.rf-pagina-contagem .rf-menu a { white-space: nowrap; }
/* No celular a assinatura-casa e o link ⛔ cabem numa linha a 390 px: o link quebra em duas,
   alinhado à direita, sem empurrar a página para o lado. */
@media (max-width: 760px) {
  body.rf-p1.rf-pagina-contagem .rf-menu a { white-space: normal; max-width: 7.5em; padding: 0; text-align: right; line-height: 1.25; }
}
/* RF-V2 · a abertura é o campo cobre da D6 v2 (o topo das telas de venda, §4): o título e o
   subtítulo em branco (5,52:1). O resto da contagem continua documento, grafite sobre branco;
   o destaque gráfico é a conta à vista da seção 3, a mesma fileira da Costura da página
   (`.rf-contagem`, em `pagina-vendas-rf.css`), com os mesmos números. ⛔ Dado novo. */
.rf-pagina-contagem .rf-abre {
  --rf-anel: var(--rf-foco-no-cobre); --focus: var(--rf-foco-no-cobre);
  padding: 32px 0 36px; background: var(--rf-cobre); color: var(--rf-branco);
}
@media (min-width: 1000px) { .rf-pagina-contagem .rf-abre { padding: 64px 0 72px; } }
body.rf-pagina-contagem .rf-abre .pv-h1 { color: var(--rf-branco); }
.rf-pagina-contagem .rf-abre .rf-sub { margin-bottom: 0; color: var(--rf-branco); }
.rf-pagina-contagem .rf-abre .rf-wrap > * { max-width: 44rem; }
.rf-pagina-contagem .rf-abre + .rf-sec { border-top: 0; }

/* As seções sem subtítulo: o primeiro parágrafo respira do título como o subtítulo da página nova. */
.rf-pagina-contagem .rf-sec .pv-h2 + p, .rf-pagina-contagem .rf-sec .pv-h2 + .rf-contagem { margin-top: 16px; }

/* ── §5 · as matérias, fechadas, com o resumo tocável com folga (48 px no mínimo) ────── */
.rf-pagina-contagem .rf-materia summary { gap: 12px; }
.rf-pagina-contagem .rf-materia__n { margin-left: auto; font-weight: 400; font-size: 1rem; color: var(--rf-texto2); white-space: nowrap; }
.rf-pagina-contagem .rf-materia__lista { padding: 4px 0 18px; columns: 2 17rem; column-gap: 28px; }
.rf-pagina-contagem .rf-materia__lista li { break-inside: avoid; padding: 6px 0; border-top: 1px solid var(--rf-pedra); font-size: 1rem; line-height: 1.45; }
@media (min-width: 1000px) { .rf-pagina-contagem .rf-sec .rf-wrap > .rf-materia { max-width: none; } }

/* ── O fim: "Voltar para a página" ───────────────────────────────────────────────────── */
.rf-pagina-contagem .rf-voltar { padding: 8px 0 48px; }

/* D6-05 (gate D6 v2): com a letra a 200 %, o nome da matéria e "44 assuntos" ⛔ cabem lado a lado
   a 390 px: a contagem desce para a linha de baixo. O limite é em `em` (a letra da PESSOA):
   19,9375em = 319 px com a letra de 16 px, e por isso no tamanho normal (320 px para cima) a linha
   é a mesma de antes; com a letra a 32 px ele vale até 638 px. */
@media (max-width: 19.9375em) { .rf-pagina-contagem .rf-materia summary { flex-wrap: wrap; } }