/* =============================================================================
   RF-P1 — a página de vendas NOVA da ROTA FORTE (rota interna, dormente).
   RF-V2 — na D6 v2, "Trilho de cobre" (owner, 12/10/2026,
   `virada-rota-forte/DIRECAO-DE-ARTE-ROTA-FORTE-D6v2.md`; protótipo A).

   ⭐ ONDE MORA A D6 v2 DA PÁGINA: aqui. Esta folha vem DEPOIS da parcial da chave
   (`rota-forte.css` e as três folhas por superfície da RF-V1), e a contagem e o aviso a carregam
   antes da folha deles. Uma regra da página em `rota-forte-pagina.css` perderia para a regra
   desta folha com a mesma especificidade; por isso a página é desenhada AQUI, e a régua
   `apps/marketing/test_rf_v2_pagina_d6v2.py` confere a ordem das folhas nos três templates.
   Usa só os tokens da base (`--rf-*`, `rota-forte.css`). ⛔ Cor solta.

   O sistema (D6 v2 §4):
   - fundo branco e texto grafite para ler; pedra como superfície (a barra do topo, o preço, a
     prova das seções S5 e S19, o cálculo, as faixas);
   - o cobre é AÇÃO (o botão) e só vira CAMPO no topo e na conta à vista (S4): no celular, o campo
     segura a linha pequena, o título, o método e o vídeo; a partir de 1000 px, o topo inteiro;
   - o petróleo é DADO (as faixas, as 80 bolhas do 47º, as barras, o ✓ da prova); ⛔ botão;
   - o preço é grafite sobre pedra ou branco; ⛔ tarja, ⛔ cor de promoção;
   - Literata nos títulos e números de destaque; Hanken a 18 px no resto. Raio 6 px.
   - S11 (RF-REV1 §10): ⛔ "cartão branco em tudo": o que separa é o fio, o espaço e a pedra;
     S48: ⛔ número de seção sem função; S49: ⛔ faixa colorida à esquerda; S25: a grade do
     protótipo A a 1440 (coluna de leitura à esquerda numa largura de 75rem).

   Acessibilidade (D3): corpo de 18 px, alvos de 48 px, contraste ≥ 4,5:1 no texto (o menor aqui
   é branco sobre cobre, 5,52:1) e anel BRANCO em todo controle sobre o cobre (RF-V1).
   ========================================================================== */

body.rf-p1 { font-size: 1.125rem; line-height: 1.6; }
body.rf-p1 main { font-size: 1.125rem; }
/* ⛔ O grão de papel da 48 (`body.pv48`, S67): a D6 v2 é branco liso. */
body.pv48.rf-p1 { background-image: none; }

.rf-wrap { width: 100%; max-width: 75rem; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1000px) { .rf-wrap { padding: 0 40px; } }
.rf-sec { padding: 56px 0; border-top: 1px solid var(--rf-pedra); }
@media (min-width: 1000px) { .rf-sec { padding: 88px 0; } }
.rf-sec > .rf-wrap > p + p, .rf-texto p + p { margin-top: 14px; }
.rf-sec .pv-h2 { max-width: none; font-size: 2rem; line-height: 1.14; font-weight: 700; letter-spacing: -.01em; }
@media (min-width: 720px) { .rf-sec .pv-h2 { font-size: 2.5rem; } }
@media (min-width: 1000px) { .rf-sec .pv-h2 { font-size: 2.75rem; } }
.rf-sub { margin: 10px 0 24px; font-size: 1.25rem; line-height: 1.5; color: var(--rf-texto2); }
.rf-miudo { margin-top: 10px; font-size: 1rem; line-height: 1.5; color: var(--rf-texto2); }
.rf-h3 { margin: 28px 0 8px; font: 700 1.3125rem/1.3 var(--rf-texto); color: var(--rf-grafite); }
body.rf-p1 main a { color: var(--rf-cobre-texto); }

/* S25 · a grade a 1440: a leitura fica numa coluna de 44rem, à esquerda; o que é figura (a conta,
   as telas, as listas em duas colunas, o preço) usa a largura inteira. */
@media (min-width: 1000px) {
  .rf-sec .rf-wrap > * { max-width: 44rem; }
  .rf-sec .rf-wrap > .rf-contagem, .rf-sec .rf-wrap > .pv-celulares, .rf-sec .rf-wrap > .rf-cartoes,
  .rf-sec .rf-wrap > .rf-cols { max-width: none; }
}

/* As seções de prova (S5) e de fechamento (S19): pedra, a superfície; texto grafite. A classe
   `rf-escura` é a de antes (RF-P1); ⛔ campo grafite na D6 v2. */
.rf-escura { background: var(--rf-pedra); color: var(--rf-grafite); border-top: 0; }
.rf-escura .pv-h2 { color: var(--rf-grafite); }
.rf-escura .rf-sub, .rf-escura .rf-miudo, .rf-escura .rf-kit, .rf-escura .pv-leg { color: var(--rf-texto2); }

/* O marcador do que ainda falta: SÓ nesta rota interna. */
.rf-falta {
  display: inline-block; margin: 4px 0; padding: 2px 8px; border: 1.5px dashed var(--rf-cobre-texto);
  border-radius: var(--rf-raio); background: var(--rf-fundo); color: var(--rf-cobre-texto);
  font: 700 0.875rem/1.45 var(--rf-texto);
}
.rf-campo .rf-falta { border-color: var(--rf-branco); background: var(--rf-cobre); color: var(--rf-branco); }

/* S0 · a barra do topo (pedra) e o cabeçalho (branco, com o fio). */
.rf-barra { background: var(--rf-pedra); color: var(--rf-grafite); text-align: center; padding: 8px 16px; font-size: 0.875rem; line-height: 1.45; }
.rf-barra b { color: var(--rf-grafite); font-weight: 700; }
.rf-topo { position: sticky; top: 0; z-index: 20; background: var(--rf-fundo); border-bottom: 1px solid var(--rf-pedra); }
.rf-topo .rf-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.rf-topo .rf-assinatura { height: 26px; }
@media (min-width: 600px) { .rf-topo .rf-assinatura { height: 36px; } }
.rf-menu { display: flex; align-items: center; gap: 4px; font-size: 1rem; }
body.rf-p1 .rf-menu a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 10px; color: var(--rf-grafite); text-decoration: none; }
body.rf-p1 .rf-menu a:hover { color: var(--rf-cobre-texto); text-decoration: underline; }
@media (max-width: 760px) { body.rf-p1 .rf-menu .rf-menu__opc { display: none; } }
.rf-marca { flex: none; display: flex; align-items: center; }
/* RF-S1v13 · o "OAB" em texto ao lado da assinatura-casa, menor (D1: descritor, ⛔ dentro da marca;
   `marca/LEIA-ME.md`: abaixo de 300 px, a casa e "OAB" em texto ao lado). Só aparece de 360 a 599 px
   (o bloco depois da primeira tela do celular); a partir de 600 a assinatura horizontal já traz o
   descritor. */
.rf-topo .rf-marca { gap: 7px; }
.rf-oab { display: none; align-self: flex-end; margin-bottom: 1px; font: 600 0.9375rem/1 var(--rf-texto); letter-spacing: .06em; color: inherit; white-space: nowrap; }

/* ── S1 · a primeira tela ──────────────────────────────────────────────────────────────
   No celular, na ordem da v12 (RF-S1v12): o CAMPO cobre (`.rf-campo`) segura a linha pequena, o
   título, o subtítulo (`.rf-metodo`, com a instrução de play) e o vídeo, de ponta a ponta da tela
   (a sombra de 100vmax recortada na altura do campo; ⛔ rolagem lateral); embaixo, no branco, o
   botão cobre e a linha de preço. Logo abaixo, já fora da primeira tela: a frase do edital, a
   prova curta com os dois links, a forma de pagar, o "Curso independente" e o WhatsApp. A partir
   de 1000 px o topo INTEIRO é cobre, em duas colunas (protótipo A), e o botão fica branco com o
   texto cobre-esc. */
.rf-hero { padding: 0 0 40px; }
.rf-campo {
  padding: 18px 0 16px; background: var(--rf-cobre); color: var(--rf-branco);
  box-shadow: 0 0 0 100vmax var(--rf-cobre); clip-path: inset(0 -100vmax);
}
/* A linha pequena SAI da caixa-alta (S10): as mesmas palavras, em texto normal. */
.rf-olho { margin: 0; font: 500 1rem/1.4 var(--rf-texto); color: var(--rf-branco); }
body.rf-p1 .rf-hero .pv-h1 { max-width: none; margin: 8px 0 0; font-size: 2rem; line-height: 1.08; font-weight: 800; color: var(--rf-branco); }
@media (min-width: 720px) { body.rf-p1 .rf-hero .pv-h1 { font-size: 2.875rem; } }
.rf-metodo { margin: 10px 0 0; font-size: 1.125rem; line-height: 1.45; color: var(--rf-branco); }
.rf-video {
  position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  margin: 14px 0 0; padding: 0; border-radius: var(--rf-raio); background: var(--rf-grafite); text-align: center; overflow: hidden;
}
/* O player do 48º (`.sp5-vsl`) entra inteiro na caixa do vídeo: ⛔ a moldura, a sombra e o fundo pedra dele. */
body.pv48.rf-p1 .rf-video > .sp5-vsl { width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; background: var(--rf-grafite); }
/* A prova curta: o ✓ petróleo e o texto, ⛔ cartão (S11). */
.rf-provas { display: grid; gap: 8px; margin: 14px 0 0; }
.rf-prova { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; line-height: 1.45; }
.rf-prova svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.rf-prova svg path { stroke: var(--rf-petroleo); }
.rf-prova b { font: 800 1.06em/1 var(--rf-titulo); }
body.rf-p1 .rf-prova a { color: var(--rf-cobre-texto); font-weight: 700; }

/* O botão da venda e a linha de preço embaixo dele. ⛔ Sombra: o botão é chapado. */
.rf-cta-bloco { max-width: 34rem; margin: 28px 0 0; }
.rf-hero .rf-cta-bloco { margin: 18px 0 0; max-width: none; }
body.rf-p1 .rf-cta {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px;
  padding: 0 24px; border: 0; border-radius: var(--rf-raio); background: var(--rf-cobre);
  color: var(--rf-branco); font: 700 1.25rem/1.2 var(--rf-texto); text-decoration: none; cursor: pointer;
}
body.rf-p1 .rf-cta:hover { background: var(--rf-cobre-texto); color: var(--rf-branco); }
.rf-kit { margin-top: 10px; font-size: 1rem; line-height: 1.5; color: var(--rf-texto2); }
.rf-kit b { color: var(--rf-grafite); font-weight: 700; }
/* RF-S1v12 · o que desceu para baixo do preço: a frase do edital (saiu da faixa do topo) e a forma
   de pagar (saiu da linha do preço), no tom da linha do preço. */
.rf-edital { margin-top: 18px; font-size: 1rem; line-height: 1.5; color: var(--rf-texto2); }
.rf-edital b { color: var(--rf-grafite); font-weight: 700; }
.rf-pagamento { margin-top: 14px; font-size: 1rem; line-height: 1.5; color: var(--rf-texto2); }
.rf-indep { margin-top: 10px; font-size: 1rem; color: var(--rf-texto2); }
.rf-whats { margin-top: 14px; font-size: 1rem; }
body.rf-p1 .rf-whats a { font-weight: 700; }

@media (min-width: 1000px) {
  .rf-hero { padding: 0; background: var(--rf-cobre); color: var(--rf-branco); }
  .rf-hero .rf-wrap {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px;
    align-items: start; padding-top: 48px; padding-bottom: 56px;
  }
  .rf-campo { display: contents; }
  .rf-hero .rf-olho { grid-column: 1; grid-row: 1; text-wrap: balance; }
  body.rf-p1 .rf-hero .pv-h1 { grid-column: 1; grid-row: 2; margin-top: 12px; font-size: 3.5rem; line-height: 1.04; }
  .rf-hero .rf-metodo { grid-column: 1; grid-row: 3; margin-top: 16px; }
  .rf-hero .rf-video { grid-column: 2; grid-row: 1 / span 3; margin-top: 4px; }
  .rf-hero .rf-cta-bloco { grid-column: 1; grid-row: 4; margin-top: 22px; }
  .rf-hero > .rf-wrap > .rf-kit { grid-column: 1; }
  .rf-hero .rf-edital { grid-column: 1; grid-row: 5; margin-top: 24px; }
  .rf-hero .rf-provas { grid-column: 1; grid-row: 6; }
  .rf-hero .rf-pagamento { grid-column: 1; grid-row: 7; }
  .rf-hero .rf-indep { grid-column: 1; grid-row: 8; }
  .rf-hero .rf-whats { grid-column: 2; grid-row: 5 / span 4; align-self: end; margin: 0; }
  body.rf-p1 .rf-hero .rf-cta { display: inline-flex; width: auto; padding: 0 40px; background: var(--rf-branco); color: var(--rf-cobre-esc); }
  body.rf-p1 .rf-hero .rf-cta:hover { background: var(--rf-pedra); color: var(--rf-cobre-esc); }
  .rf-hero .rf-kit, .rf-hero .rf-kit b, .rf-hero .rf-edital, .rf-hero .rf-edital b, .rf-hero .rf-pagamento, .rf-hero .rf-indep, .rf-hero .rf-whats { color: var(--rf-branco); }
  body.rf-p1 .rf-hero .rf-prova a, body.rf-p1 .rf-hero .rf-whats a { color: var(--rf-branco); }
  .rf-hero .rf-prova svg path { stroke: var(--rf-branco); }
}

/* S2 · as três frases (v11: "[três frases numeradas, com a Costura ao lado, um bloco por frase]"):
   cada número mora num bloco da Costura, de contorno cobre (identidade), alternando a largura 6/4
   e a altura, como no símbolo; as frases separadas pelo fio, na coluna de leitura também no
   computador (⛔ três colunas iguais, ⛔ cartão). */
.rf-tres { display: grid; gap: 0; margin-bottom: 20px; }
.rf-tres li { display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--rf-borda); }
.rf-tres li:last-child { border-bottom: 1px solid var(--rf-borda); }
.rf-tres__n {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; margin-top: 2px;
  border: 2px solid var(--rf-cobre); border-radius: 4px; font: 800 0.9375rem/1 var(--rf-titulo); color: var(--rf-cobre-texto);
}
.rf-tres li:nth-child(even) .rf-tres__n { width: 20px; margin: 12px 0 0 5px; }

/* ── S4 · a CONTA À VISTA: a fileira da Costura no campo cobre, costurada pelo fio tracejado ──
   Cada número tem o seu bloco do símbolo; os blocos alternam a largura 6/4 (24 × 16 px no
   celular, 30 × 20 px no computador) e a altura (um em cima, outro embaixo), como no desenho da
   marca. ⛔ Esticar, ⛔ escada, ⛔ tamanho com sentido de tempo: todos os blocos do mesmo par são
   iguais; só o do destaque é cheio. As setas da RF-P1 saem (S29: a sequência ⛔ é derivação).
   `body.rf-p1 main` na frente: o reset das listas (`body.pv48 main ol`, 0,1,3) zeraria o recuo. */
body.rf-p1 main .rf-contagem {
  position: relative; display: block; margin: 28px 0; padding: 30px 0 6px 56px;
  background: var(--rf-cobre); color: var(--rf-branco);
  box-shadow: 0 0 0 100vmax var(--rf-cobre); clip-path: inset(0 -100vmax);
}
.rf-contagem::before {
  content: ""; position: absolute; left: 25px; top: 40px; bottom: 44px;
  border-left: 2px dashed var(--rf-branco);
}
.rf-contagem li.rf-seta { display: none; }
.rf-contagem li { position: relative; margin: 0 0 24px; padding: 0; font-size: 1.125rem; line-height: 1.4; }
.rf-contagem li::before {
  content: ""; position: absolute; left: -44px; top: 6px; width: 24px; height: 20px;
  border: 2px solid var(--rf-branco); border-radius: 4px; background: var(--rf-cobre);
}
.rf-contagem li:nth-child(4n+3)::before { left: -40px; top: 14px; width: 16px; }
.rf-contagem li b { display: block; margin-bottom: 2px; font: 800 2.25rem/1.05 var(--rf-titulo); letter-spacing: -.01em; color: var(--rf-branco); }
.rf-contagem li.rf-contagem--dest { font-size: 1.1875rem; font-weight: 600; }
.rf-contagem li.rf-contagem--dest::before { background: var(--rf-branco); }
.rf-contagem li.rf-contagem--dest b { display: inline; margin: 0; font: inherit; letter-spacing: 0; }
@media (min-width: 1000px) {
  body.rf-p1 main .rf-contagem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; padding: 96px 0 44px; }
  .rf-contagem::before { left: 0; right: 0; top: 56px; bottom: auto; border-left: 0; border-top: 2px dashed var(--rf-branco); }
  .rf-contagem li { margin: 0; }
  .rf-contagem li::before { left: 0; top: -54px; width: 30px; height: 26px; }
  .rf-contagem li:nth-child(4n+3)::before { left: 5px; top: -42px; width: 20px; }
  .rf-contagem li b { font-size: 3rem; }
}
.rf-nao-faz { margin-top: 32px; padding-top: 18px; border-top: 2px solid var(--rf-grafite); }
.rf-nao-faz .rf-h3 { margin-top: 0; }
/* As duas ordens: o dado em petróleo sobre a pedra (5,53:1), ⛔ cobre. */
.rf-faixas { margin: 24px 0 6px; }
.rf-faixa + .rf-faixa { margin-top: 14px; }
.rf-faixa__rot { margin-bottom: 6px; font: 700 1rem/1.3 var(--rf-texto); }
.rf-faixa svg { display: block; width: 100%; height: 30px; background: var(--rf-pedra); border-radius: 0; }
.rf-faixa rect { fill: var(--rf-petroleo); }
.pv-leg { font-size: 1rem; line-height: 1.5; color: var(--rf-texto2); }

/* S5 · os 80 círculos do 47º: o dado em petróleo. O círculo da rota é CHEIO (petróleo, número
   branco, 6,38:1) e o de fora é VAZADO (contorno, número grafite): a forma diz sem a cor. A
   régua: o trecho cheio e o ponteiro em petróleo; o teto em grafite. */
.rf-escura .pv-cartao { margin-top: 24px; color: var(--rf-grafite); }
body.pv48.rf-p1 .pv-cartao__folha { border: 0; border-radius: var(--rf-raio); background: var(--rf-fundo); }
body.pv48.rf-p1 .pv-bolha { font-size: 0.75rem; border-color: var(--rf-borda); background: var(--rf-fundo); color: var(--rf-grafite); }
body.pv48.rf-p1 .pv-bolha--sim { background: var(--rf-petroleo); border-color: var(--rf-petroleo); color: var(--rf-branco); }
body.pv48.rf-p1 .pv-cartao[data-aguardando] .pv-bolha--sim:not(.is-acesa) { background: var(--rf-fundo); border-color: var(--rf-borda); color: var(--rf-grafite); }
@media (min-width: 600px) { body.pv48.rf-p1 .pv-bolha { font-size: 0.8125rem; } }
body.rf-p1 .pv-regua__cheio, body.rf-p1 .pv-regua__ponteiro { background: var(--rf-petroleo); }
body.rf-p1 .pv-regua__teto { background: var(--rf-grafite); }
body.rf-p1 .pv-regua__rotulo--teto { color: var(--rf-grafite); }
body.rf-p1 .pv-regua__rotulo--ponteiro { color: var(--rf-petroleo); }

/* S6 · o cálculo: a superfície pedra, sem borda; o resultado embaixo do fio. */
.rf-sim { padding: 20px; border-radius: var(--rf-raio); background: var(--rf-pedra); }
.rf-sim__q { display: block; margin: 18px 0 8px; font: 700 1.125rem/1.35 var(--rf-texto); }
.rf-sim__q:first-child { margin-top: 0; }
.rf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.rf-p1 .rf-chips button { min-height: 48px; padding: 0 16px; border: 1px solid var(--rf-borda); border-radius: var(--rf-raio); background: var(--rf-fundo); color: var(--rf-grafite); font: 600 1rem/1.2 var(--rf-texto); cursor: pointer; }
body.rf-p1 .rf-chips button:hover { border-color: var(--rf-grafite); }
body.rf-p1 .rf-chips button[aria-pressed="true"] { background: var(--rf-grafite); border-color: var(--rf-grafite); color: var(--rf-branco); }
.rf-sim__outro { width: 9rem; min-height: 48px; margin-top: 8px; padding: 0 12px; border: 1px solid var(--rf-borda); border-radius: var(--rf-raio); font: 400 1.125rem var(--rf-texto); }
.rf-sim__res { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rf-borda); }
.rf-sim__res b { font-weight: 700; }
.rf-trilho { position: relative; height: 14px; margin-top: 12px; background: var(--rf-fundo); overflow: hidden; }
.rf-trilho i { position: absolute; inset: 0 auto 0 0; background: var(--rf-petroleo); }

/* S7 · a demonstração reaproveita `pv-demo*`. */
.rf-demo { margin-top: 18px; }

/* S8 · os passos e as telas. A numeração "1 ·" e "2 ·" fica: ela É a sequência do bloco. */
.rf-passo { margin-top: 28px; }

/* S8B · a linha do tempo da Volta do Erro: são REVISÕES, então âmbar e com o ícone de data
   (D6 v2 §4), desenhado em CSS; os dias numa linha só (S52). ⛔ cartão. */
.rf-voltas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 18px 0 6px; border-top: 1px solid var(--rf-borda); }
.rf-voltas li { padding: 12px 6px 4px 0; }
.rf-voltas b { display: flex; align-items: center; gap: 6px; white-space: nowrap; font: 800 1.375rem/1.15 var(--rf-titulo); color: var(--rf-revisao); }
.rf-voltas b::before {
  content: ""; flex: none; width: 13px; height: 13px; border: 1.5px solid currentColor; border-top-width: 4px; border-radius: 2px;
}
.rf-voltas span { display: block; margin-top: 2px; font-size: 1rem; color: var(--rf-texto2); }
/* A 320–420 px as quatro datas ⛔ cabem numa fileira sem quebrar o "Dia 30": duas por linha. */
@media (max-width: 420px) { .rf-voltas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* S9 · o que você recebe: a lista separada pelo fio, em duas colunas no computador. */
.rf-cartoes { display: grid; gap: 0; margin-bottom: 18px; }
@media (min-width: 720px) { .rf-cartoes { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.rf-cartoes li { padding: 14px 0; border-top: 1px solid var(--rf-borda); font-size: 1.125rem; line-height: 1.5; }
.rf-cartoes b { font-weight: 700; }
.rf-barra-prog { position: relative; height: 18px; margin: 14px 0 6px; background: var(--rf-pedra); overflow: hidden; }
.rf-barra-prog i { position: absolute; inset: 0 auto 0 0; background: var(--rf-petroleo); }
.rf-barra-prog em { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--rf-grafite); }

/* S11 · os marcos de quem montou: texto numa linha, separado pelo fio; ⛔ pílula. */
.rf-marcos { display: flex; flex-wrap: wrap; gap: 6px 0; margin-bottom: 18px; }
.rf-marcos li { padding: 0 12px; font: 700 1rem/1.4 var(--rf-texto); }
.rf-marcos li:first-child { padding-left: 0; }
.rf-marcos li + li { border-left: 1px solid var(--rf-borda); }
.rf-galeria { margin-bottom: 20px; }

/* S12 · as três perguntas: lista pelo fio, ⛔ cartão. O "01 · 02 · 03" é texto da v11 e fica,
   no tom secundário (a S48 pedia tirá-lo: decisão do MENTOR, no relatório da RF-V2). */
.rf-pergs { display: grid; gap: 0; }
.rf-pergs li { padding: 18px 0 14px; border-top: 1px solid var(--rf-borda); }
.rf-pergs .rf-h3 { margin: 0 0 6px; }
.rf-pergs__n { font: 800 1em/1 var(--rf-titulo); color: var(--rf-texto2); }

/* S13 · para quem serve: duas colunas abertas pelo fio grafite; ⛔ faixa à esquerda (S49). */
.rf-cols { display: grid; gap: 28px; margin-top: 22px; }
@media (min-width: 720px) { .rf-cols { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.rf-col { padding-top: 16px; border-top: 2px solid var(--rf-grafite); }
.rf-col .rf-h3 { margin-top: 0; }
body.rf-p1 .rf-col ul { padding-left: 20px; list-style: disc; }
.rf-col li + li { margin-top: 6px; }

/* S14 · o preço: grafite sobre a pedra (13,67:1); o cobre SÓ no botão. ⛔ tarja. */
#preco { background: var(--rf-pedra); border-top: 0; }
.rf-preco { margin: 24px 0 0; }
.rf-preco__parc { font: 400 1.125rem/1.45 var(--rf-texto); color: var(--rf-grafite); }
.rf-preco__parc b { display: block; margin-bottom: 4px; font: 800 2.25rem/1.05 var(--rf-titulo); letter-spacing: -.015em; color: var(--rf-grafite); white-space: nowrap; }
.rf-preco__vista { margin: 14px 0 20px; font-size: 1.125rem; color: var(--rf-grafite); }
.rf-preco__vista b { font: 800 1.75rem/1.2 var(--rf-titulo); color: var(--rf-grafite); white-space: nowrap; }
.rf-preco .rf-kit { color: var(--rf-texto2); }
@media (min-width: 1000px) {
  /* A 4ª linha (1fr) absorve a altura do bloco do preço: as três da esquerda ficam juntas. */
  #preco .rf-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto auto 1fr; column-gap: 72px; align-items: start; }
  #preco .rf-wrap > * { grid-column: 1; }
  #preco .rf-wrap > .rf-preco { grid-column: 2; grid-row: 1 / span 4; max-width: none; margin: 0; padding: 40px; border-radius: var(--rf-raio); background: var(--rf-fundo); }
  .rf-preco__parc b { font-size: 3.25rem; }
}
@media (min-width: 720px) and (max-width: 999px) { .rf-preco__parc b { font-size: 2.75rem; } }

/* S15 · as duas garantias: calmas (branco, grafite); o selo é um círculo de contorno grafite com
   o número em Literata. ⛔ cartão, ⛔ cobre (o cobre fica no botão de pagar). */
.rf-selo { display: grid; grid-template-columns: 72px 1fr; gap: 20px; margin: 24px 0; padding-top: 20px; border-top: 1px solid var(--rf-borda); }
.rf-selo__disco { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border: 2px solid var(--rf-grafite); border-radius: 50%; color: var(--rf-grafite); font: 800 1.625rem/1 var(--rf-titulo); }
.rf-selo .rf-h3 { margin-top: 0; }
.rf-selo p + p, .rf-selo ul + p { margin-top: 10px; }
body.rf-p1 .rf-selo ul { margin-top: 8px; padding-left: 20px; list-style: disc; }
.rf-assina { margin-top: 10px; font-style: italic; font-weight: 700; color: var(--rf-texto2); }
@media (max-width: 480px) { .rf-selo { grid-template-columns: 1fr; } }

/* S18 · a sanfona: as perguntas separadas pelo fio, ⛔ cartão; o "+" e o "–" desenhados (S40). */
.rf-grupo { margin: 32px 0 4px; font: 700 1rem/1.4 var(--rf-texto); color: var(--rf-texto2); }
.rf-faq details { margin: 0; border-top: 1px solid var(--rf-borda); }
.rf-faq details:last-of-type { border-bottom: 1px solid var(--rf-borda); }
.rf-faq summary { position: relative; display: flex; align-items: center; min-height: 52px; padding: 12px 44px 12px 0; font-weight: 700; cursor: pointer; list-style: none; }
.rf-faq summary::-webkit-details-marker { display: none; }
.rf-faq summary::before, .rf-faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; margin-top: -1px; background: var(--rf-cobre-texto);
}
.rf-faq summary::after { transform: rotate(90deg); }
.rf-faq details[open] summary::after { display: none; }
.rf-faq details > p { padding: 0 0 18px; font-size: 1.125rem; }

/* S20 · o rodapé grafite. */
.rf-rodape { padding: 40px 0 120px; background: var(--rf-grafite); color: var(--rf-tinta-escura); font-size: 1rem; line-height: 1.6; }
.rf-rodape p + p { margin-top: 12px; }
body.rf-p1 .rf-rodape a { color: var(--rf-branco); }
.rf-rodape .rf-assinatura { height: 24px; margin-bottom: 14px; }
.rf-rodape b { color: var(--rf-branco); }
/* RF-P5 · o aviso de medição é o parcial do portal (`aside[role="note"]`, `.small.faint`), feito
   para fundo claro: no rodapé grafite ele veste as cores do rodapé (4,5:1 no mínimo). */
body.rf-p1 .rf-rodape aside[role="note"] .faint { color: var(--rf-tinta-escura); }
body.rf-p1 .rf-rodape aside[role="note"] a, body.rf-p1 .rf-rodape aside[role="note"] .linklike { color: var(--rf-branco); }

/* S21 · a janela antes do pagamento. */
.rf-janela { width: min(30rem, 100vw); max-height: 92vh; margin: auto auto 0; padding: 22px 20px 26px; border: 0; border-radius: 18px 18px 0 0; background: var(--rf-papel); color: var(--rf-grafite); }
@media (min-width: 720px) { .rf-janela { margin: auto; border-radius: 18px; } }
.rf-janela::backdrop { background: rgba(32, 35, 38, .6); }
.rf-janela__passo { font: 700 0.8125rem/1.4 var(--rf-texto); letter-spacing: .05em; text-transform: uppercase; color: var(--rf-cobre-texto); }
.rf-janela h2 { margin: 6px 0 14px; font: 800 1.5rem/1.2 var(--rf-titulo); }
.rf-janela label { display: block; margin-bottom: 10px; }
.rf-janela input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--rf-controle); border-radius: 10px; background: var(--rf-branco); font: 400 1.0625rem var(--rf-texto); }
.rf-janela__conf { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--rf-superficie); font-size: 0.9375rem; line-height: 1.45; }
.rf-janela__pe { margin-top: 10px; font-size: 0.875rem; line-height: 1.45; color: var(--rf-texto2); text-align: center; }
body.rf-p1 .rf-janela__fechar { float: right; min-width: 48px; min-height: 48px; border: 0; background: none; font-size: 1.75rem; line-height: 1; color: var(--rf-texto2); cursor: pointer; }
/* RF-C2 · a janela envia, pelo JS do pré-checkout do 48º: o erro de cada campo logo abaixo dele
   (o JS marca `.is-invalid` no `.pv-pc__campo`), o botão "Um instante…" enquanto envia e a
   página parada atrás da janela (`pv-pc-lock`, a classe que o mesmo JS põe no `<html>`). */
.rf-janela__erro { margin: -4px 0 10px; font-size: 0.9375rem; line-height: 1.4; font-weight: 600; color: var(--alert); }
.rf-janela__erro:empty { display: none; }
.rf-janela .pv-pc__campo.is-invalid input { border: 2px solid var(--alert); }
.rf-janela .pv-pc__campo .rf-miudo { margin: -4px 0 10px; }
body.rf-p1 .rf-janela button.rf-cta[disabled] { opacity: .72; cursor: default; }
body.rf-p1 .rf-janela__pe a { text-decoration: underline; text-underline-offset: .16em; }
html.pv-pc-lock, html.pv-pc-lock body { overflow: hidden; }

/* O botão fixo do celular, depois da primeira tela. */
.rf-fixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--rf-papel); border-top: 1px solid var(--rf-linha); }
@media (min-width: 761px) { .rf-fixo { display: none !important; } }

/* ── A primeira tela no celular (v12, RF-S1v12): acima da dobra, só o olho, o título, o subtítulo,
   o vídeo e o botão com a linha de preço; a 390 × 844 e a 360 × 680 cabem, sem rolar, o player
   INTEIRO, o botão e a linha de preço inteira. Na ordem do protótipo A: (1) os espaços, (2) as
   barras (a faixa do topo, numa linha só, e o cabeçalho, com o "Entrar" de 48 px), (3) o título
   (27 px, como estava) e (4) a letra: na S0 e na S1, todo texto que ⛔ é o título fica em 18 px
   (D3 do owner), inclusive o que desceu para baixo do preço.
   RF-S1v12a · a folga do preço a 360 × 680 (proposta P2 do MENTOR): a faixa com 4 px em cima e
   embaixo, o botão com 48 px (a D3 continua cumprida) e o olho, o subtítulo e o preço com
   entrelinha 1.3. Assim sobram 8 px ou mais abaixo do preço a 360 × 680 e a 390 × 844. ── */
@media (max-width: 760px) {
  /* (1) espaços */
  .rf-hero { padding: 0 0 32px; }
  .rf-campo { padding: 6px 0 6px; }
  body.rf-p1 .rf-hero .pv-h1 { margin-top: 3px; }
  .rf-metodo { margin-top: 4px; }
  .rf-video { margin-top: 8px; }
  .rf-hero .rf-cta-bloco { margin-top: 6px; }
  .rf-hero .rf-kit { margin-top: 4px; }
  /* (2) barras */
  .rf-barra { padding: 4px 12px; font-size: 1.125rem; line-height: 1.3; }
  .rf-topo .rf-wrap { min-height: 48px; gap: 8px; }
  .rf-topo .rf-assinatura { height: 22px; }
  .rf-menu { font-size: 1.125rem; }
  body.rf-p1 .rf-menu a { min-height: 48px; padding: 0 4px; }
  body.rf-p1 .rf-hero .rf-cta { min-height: 48px; font-size: 1.1875rem; }
  /* (3) título (RF-S1v13: 25 px, com "1ª fase da OAB:" na frente; antes, 27) */
  body.rf-p1 .rf-hero .pv-h1 { font-size: 1.5625rem; line-height: 1.04; }
  /* (4) letras */
  .rf-olho { font-size: 1.125rem; line-height: 1.3; }
  .rf-metodo { font-size: 1.125rem; line-height: 1.3; }
  .rf-hero .rf-kit { font-size: 1.125rem; line-height: 1.3; }
  .rf-edital { font-size: 1.125rem; }
  .rf-prova { font-size: 1.125rem; }
  .rf-pagamento { font-size: 1.125rem; }
  .rf-indep { font-size: 1.125rem; }
  .rf-whats { font-size: 1.125rem; }
}
/* RF-S1v13 · o cabeçalho do celular: abaixo de 600 px a assinatura-casa com 20 px de altura (eram 22)
   e, de 360 px para cima, o "OAB" ao lado dela, sem encostar no "Entrar". Abaixo de 360 ⛔ cabe. */
@media (max-width: 599.98px) { .rf-topo .rf-assinatura { height: 20px; } }
@media (min-width: 360px) and (max-width: 599.98px) { .rf-oab { display: block; } }

/* ── RF-UX1 · o alinhamento no celular (regra do owner, 08/10; direção de arte §4). À esquerda,
   o texto corrido de mais de 2 linhas, os títulos, as listas, o FAQ e os formulários; centraliza
   só o que é curto e fica sozinho. O desktop ⛔ muda: lá vale a grade (prosa à esquerda em 38rem).
   - a barra do topo tem 3 a 4 linhas a 390 px: vai para a esquerda, na mesma margem do conteúdo
     (20 px; a altura continua a mesma, então a primeira tela ⛔ muda);
   - os três números da contagem (S4) são número em destaque com legenda de até 2 linhas: centro,
     como as setas entre eles. O cartão petróleo é uma frase de 3 linhas: fica à esquerda;
   - `.rf-fecho` é a frase solta de até 2 linhas que fecha a seção (S12, S13). ── */
@media (max-width: 760px) {
  .rf-barra { padding-inline: 20px; text-align: left; }
  .rf-contagem li:not(.rf-contagem--dest) { text-align: center; text-wrap: balance; }
  .rf-fecho { text-align: center; text-wrap: balance; }
}
/* RF-V2 · a conta à vista virou a fileira da Costura (D6 v2 §4, protótipo A): cada número fica
   preso ao bloco dele, na linha do fio, e por isso À ESQUERDA, como a frase do destaque. O centro
   da RF-UX1 deixa de valer para ela (a regra fica acima, registrada); vale para o resto. */
.rf-sec .rf-contagem li { text-align: left; }

/* O respiro entre parágrafos em toda seção (o reset da casca do 48º zera as margens). */
body.rf-p1 main .rf-sec p + p, body.rf-p1 main .rf-sec h3 + p { margin-top: 14px; }
/* O título das seções de prova: o `.pv-h2` da casca pinta grafite com mais peso. */
body.rf-p1 .rf-escura .pv-h2 { color: var(--rf-grafite); }
body.rf-p1 .rf-janela .rf-cta { font-size: 1.125rem; }

/* RF-C1 · S8: as telas REAIS da área na moldura do celular, logo abaixo do recorte do alto-falante
   (os 30 px da tela desenhada). A imagem já tem a proporção da tela; `cover` só apara o pixel. */
body.rf-p1 .pv-cel__foto { position: absolute; top: 30px; left: 0; width: 100%; height: calc(100% - 30px); object-fit: cover; object-position: top center; }

/* ── D6-05 (gate D6 v2) · a letra do navegador a 200 % ─────────────────────────────────
   A letra destas páginas está em `rem` (o bloco gerado no topo de `rota-forte.css` e as regras
   acima): ela dobra com a preferência de 32 px. O que ainda passava da largura com ela dobrada,
   resolvido SEM mudar o desenho no tamanho normal (no tamanho normal tudo isto cabe numa linha):
   - uma palavra mais larga que a coluna (o e-mail, uma palavra do título) quebra onde precisar
     (`break-word` só age quando a palavra ⛔ cabe; ⛔ muda a largura mínima de nada);
   - o preço deixa de ser `nowrap`: numa linha quando cabe, e, quando ⛔ cabe, em duas linhas
     equilibradas ("12× de" / "R$ 50,57"), sem sair da tela. */
body.rf-p1 { overflow-wrap: break-word; }
.rf-preco__parc b,
.rf-preco__vista b { white-space: normal; text-wrap: balance; }