/* =============================================================================
   ROTA FORTE · D6 v2 — o pré-checkout e o checkout.

   Dona: a fatia V3 da implementação da D6 v2. Só ela escreve aqui.
   Vem logo depois de `rota-forte.css` (a base: tokens, letras, foco e seleção), atrás da
   mesma chave (`templates/brand/_folha_rota_forte.html`). Use só os tokens `--rf-*` da base;
   ⛔ cor solta fora deles.

   RF-V3 (12/10/2026). O pagamento é CALMO: base branca e pedra, texto grafite; o cobre SÓ no
   botão de pagar e no botão principal de cada estado; o petróleo SÓ no estado confirmado, sempre
   com texto; o erro é texto2 TRACEJADO, ⛔ vermelho; ⛔ cor de promoção no preço.

   Os escopos (todos nascem só com a chave ligada):
   - `body.rfck` — o checkout transparente (com `.checkout-v2-page`), o Checkout Pro
     (`.rfck-pro`), os três retornos e a página de erro (`.rfck-retorno`). A classe vem do bloco
     `body_class` de cada template, dentro de `{% if marca.rota_forte %}`;
   - `body.rf-p1 .rf-janela` — a janela S21 da página nova. ⚠ `pagina-vendas-rf.css` vem DEPOIS
     desta folha na página: as regras da janela levam `body.rf-p1` para vencer pela
     especificidade, ⛔ pela ordem.
   As folhas de hoje (`checkout-transparent-v2.css`, `checkout-condicoes.css`, `app.css`,
   `pagina-vendas-rf.css`) ⛔ mudam: com a chave desligada nada daqui é pedido.

   Contraste (WCAG 2.x; a régua `apps/payments/test_rf_v3_checkout_d6v2.py` mede a partir dos
   tokens lidos): grafite/branco 15,79 · grafite/pedra 13,67 · texto2/branco 8,27 · texto2/pedra
   7,16 · branco/cobre 5,52 · branco/link 7,49 (botão sob a mão) · petróleo-esc/petróleo-claro 8,62 ·
   borda/branco 4,26 · borda/pedra 3,69 · placeholder/branco 5,30 · placeholder/pedra 4,59 ·
   anel grafite/branco 15,79.
   ========================================================================== */

/* ── 0 · Os ícones desenhados (S40) ───────────────────────────────────────────────────
   O SVG em linha (`payments/_rf_icone.html`) herda a cor do texto. Os dois ✓ que hoje são
   `content` de CSS (a lista "O que você recebe" e a garantia do Pro) viram o MESMO traço, por
   máscara: a cor continua a do texto (`currentColor`), e o desenho é forma, ⛔ letra. */
.rfck-icone { display: block; flex: none; }
body.rfck {
  --rfck-certo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── 1 · O cabeçalho comum das três cascas (S10 e S16) ─────────────────────────────────
   A linha de cima do título é TEXTO: as mesmas palavras, em caixa normal, ⛔ caixa-alta, ⛔
   espaçamento de "selo", ⛔ fundo. O título é Literata 800, na mesma escala no transparente,
   no Pro, nos retornos e no erro; a janela segue um degrau abaixo (é um diálogo). */
body.rfck .ckv2-eyebrow,
body.rfck .eyebrow,
body.rf-p1 .rf-janela .rf-janela__passo {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  background: none;
  color: var(--rf-texto2);
  font: 600 15px/1.4 var(--rf-texto);
  letter-spacing: 0;
  text-transform: none;
}
body.rfck .ckv2-title,
body.rfck-pro .container > h2,
body.rfck-retorno .container > h2 {
  margin: 0 0 10px;
  color: var(--rf-grafite);
  font: 800 clamp(1.75rem, 3.2vw, 2.25rem)/1.15 var(--rf-titulo);
  letter-spacing: -0.01em;
}
body.rfck .ckv2-sub { color: var(--rf-texto2); font-size: 16px; line-height: 1.5; }

/* ── 2 · A grade comum: a coluna do formulário tem a MESMA medida (40rem) nas três cascas ── */
body.rfck .ckv2__container { width: min(100% - 32px, 1040px); }
body.rfck .ckv2-intro { max-width: 40rem; }
body.rfck .ckv2-grid {
  grid-template-columns: minmax(0, 40rem) minmax(0, 20rem);
  justify-content: space-between;
  gap: 32px;
}
body.rfck-pro .container--narrow,
body.rfck-retorno .container--narrow { max-width: 40rem; }
@media (max-width: 900px) {
  body.rfck .ckv2-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ── 3 · As superfícies: branco para ler, pedra para o bloco do preço e os avisos ─────────
   ⛔ "cartão branco em tudo", ⛔ sombra, ⛔ faixa colorida à esquerda. Raio 6 px. */
body.rfck.checkout-v2-page { background: var(--rf-fundo); }
body.rfck .ckv2-banner { border-radius: var(--rf-raio); box-shadow: none; background: var(--rf-grafite); }
body.rfck .ckv2-trust {
  padding: 12px 0;
  background: none;
  border: 0;
  border-block: 1px solid var(--rf-pedra);
  border-radius: 0;
  box-shadow: none;
}
body.rfck .ckv2-trust li { color: var(--rf-grafite); font-size: 14px; font-weight: 600; }
/* O ✓ da faixa: traço grafite, ⛔ disco petróleo (o petróleo é só do estado confirmado). */
body.rfck .ckv2-trust__check {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--rf-grafite);
  background: none;
  border-radius: 0;
}
body.rfck .ckv2-card {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.rfck .ckv2-summary {
  padding: 20px;
  background: var(--rf-pedra);
  border: 0;
  border-radius: var(--rf-raio);
  box-shadow: none;
}
body.rfck .ckv2-summary__icon { border-radius: var(--rf-raio); }
body.rfck .ckv2-summary__name { color: var(--rf-grafite); font: 700 18px/1.25 var(--rf-texto); }
body.rfck .ckv2-summary__access { border-top-color: var(--rf-borda); }
body.rfck .ckv2-summary__note,
body.rfck .ckv2-summary__compact,
body.rfck .ckv2-summary__access p,
body.rfck .ckv2-installments__cash,
body.rfck .ckv2-installments__disclosure { color: var(--rf-texto2); font-size: 14px; }
body.rfck .ckv2-includes li { font-size: 15px; color: var(--rf-grafite); }
body.rfck .ckv2-includes li::before {
  top: 4px;
  width: 16px;
  height: 16px;
  content: "";
  background-color: var(--rf-grafite);
  -webkit-mask: var(--rfck-certo) center / contain no-repeat;
  mask: var(--rfck-certo) center / contain no-repeat;
}

/* O preço e as condições: grafite, ⛔ cor de promoção, ⛔ tarja. O total parcelado
   (`#ck-installments-total`) fica legível, junto do botão: grafite sobre pedra, 16 px. */
body.rfck .ckv2-price__value,
body.rfck .ckv2-installments__prefix,
body.rfck .ckv2-installments__amount { color: var(--rf-grafite); }
body.rfck .ckv2-price__unit { color: var(--rf-texto2); }
body.rfck .ckv2-note {
  color: var(--rf-grafite);
  background: var(--rf-pedra);
  border: 0;
  border-radius: var(--rf-raio);
  font-size: 15px;
}
body.rfck #ck-installments-total { font-size: 16px; font-weight: 600; }

/* ── 4 · Os campos e os controles (S03, S17, S18, S20) ─────────────────────────────────
   A borda é a de controle (4,26:1 no branco), o placeholder 5,30:1, o foco é o anel da casa
   (3 px grafite, afastado 2 px) e ⛔ o halo do ouro antigo. Vale no transparente (`.ckv2-field`)
   e no Pro (`.field`, onde o `app.css` apagava o anel com `outline: none`). */
body.rfck .ckv2-card__title { color: var(--rf-grafite); font: 700 20px/1.25 var(--rf-texto); }
body.rfck .ckv2-field label,
body.rfck .field label { color: var(--rf-grafite); font: 700 15px/1.35 var(--rf-texto); }
body.rfck .ckv2-field input,
body.rfck .field input {
  min-height: 50px;
  color: var(--rf-grafite);
  background: var(--rf-fundo);
  border: 1px solid var(--rf-borda);
  border-radius: var(--rf-raio);
  font-size: 17px;
}
body.rfck .ckv2-field input::placeholder,
body.rfck .field input::placeholder { color: var(--rf-placeholder); opacity: 1; }
body.rfck .ckv2-field input[readonly] { color: var(--rf-texto2); background: var(--rf-pedra); }
body.rfck .ckv2-field input:focus,
body.rfck .ckv2-field input:focus-visible,
body.rfck .field input:focus,
body.rfck .field input:focus-visible {
  outline: 3px solid var(--rf-anel);
  outline-offset: 2px;
  border-color: var(--rf-borda);
  box-shadow: none;
}
body.rfck a:focus-visible,
body.rfck button:focus-visible,
body.rfck input:focus-visible,
body.rfck summary:focus-visible,
body.rfck [tabindex]:focus-visible,
body.rfck .ck-condicoes__completas > summary:focus-visible {
  outline: 3px solid var(--rf-anel);
  outline-offset: 2px;
  border-radius: var(--rf-raio);
}
body.rfck .ckv2-help { color: var(--rf-texto2); font-size: 14px; }
body.rfck .ckv2-secure,
body.rfck .ckv2-fallback,
body.rfck .ckv2-seller,
body.rfck .ckv2-footnote { color: var(--rf-texto2); font-size: 14px; }
body.rfck .ckv2-fallback,
body.rfck .ckv2-pay { border-top-color: var(--rf-pedra); }

/* O erro de preenchimento: texto2, com o campo TRACEJADO (forma + texto: ⛔ só cor). */
body.rfck .form-errors { color: var(--rf-texto2); font-size: 15px; font-weight: 600; }
body.rfck .ckv2-field input[aria-invalid="true"],
body.rfck .field input[aria-invalid="true"] { border: 2px dashed var(--rf-texto2); }
/* As frases de erro do Pro trazem `color: var(--danger, …)` em linha: o token muda aqui. */
body.rfck { --danger: var(--rf-texto2); --line-strong: var(--rf-borda); --line: var(--rf-pedra); }

/* O aceite: caixa na cor da ação, moldura pedra. */
body.rfck .ckv2-terms {
  background: var(--rf-pedra);
  border: 0;
  border-radius: var(--rf-raio);
}
body.rfck .ckv2-terms .small { font-size: 14px; }
body.rfck .ckv2-terms input[type="checkbox"],
body.rfck .checkout__terms input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--rf-cobre);
}
body.rfck main a:not(.btn) { color: var(--rf-cobre-texto); text-decoration: underline; }
body.rfck .linklike { color: var(--rf-grafite); }
body.rfck .linklike:hover { color: var(--rf-cobre-texto); }

/* O aviso do que falta para o pagamento aparecer: pedra, ⛔ tracejado (tracejado é o erro). */
body.rfck .ckv2-gate {
  color: var(--rf-texto2);
  background: var(--rf-pedra);
  border: 0;
  border-radius: var(--rf-raio);
  font-size: 15px;
}
body.rfck .ckv2-brick-shell,
body.rfck .ckv2-pix-direct {
  background: var(--rf-fundo);
  border: 1px solid var(--rf-pedra);
  border-radius: var(--rf-raio);
}
body.rfck .ckv2-method-title { color: var(--rf-grafite); font: 700 17px/1.3 var(--rf-texto); }
body.rfck .ckv2-method-divider { color: var(--rf-texto2); font-size: 14px; }
body.rfck .ckv2-method-divider::before,
body.rfck .ckv2-method-divider::after { border-top-color: var(--rf-pedra); }

/* ── 5 · Os botões ─────────────────────────────────────────────────────────────────────
   UM cobre por tela: o de pagar (Pix, Pro) e o principal de cada estado ("Verificar esta
   tentativa", "Ir para a área do aluno", "Continuar para o pagamento"). Os outros são vazados,
   com a borda de controle. O cartão é o botão do próprio Brick (variáveis no JS, seção 3 do
   prompt). Altura de toque ≥ 48 px. */
body.rfck .btn { min-height: 48px; border-radius: var(--rf-raio); font: 700 16px/1.2 var(--rf-texto); }
body.rfck .btn--purchase,
body.rfck .ckt-state .btn--primary,
body.rfck-retorno .btn--primary {
  color: var(--rf-branco);
  background: var(--rf-cobre);
  border-color: var(--rf-cobre);
  text-decoration: none;
}
body.rfck .btn--purchase:hover,
body.rfck .ckt-state .btn--primary:hover,
body.rfck-retorno .btn--primary:hover {
  color: var(--rf-branco);
  background: var(--rf-cobre-texto);
  border-color: var(--rf-cobre-texto);
}
body.rfck .btn--ghost {
  color: var(--rf-grafite);
  background: var(--rf-fundo);
  border: 1px solid var(--rf-borda);
  text-decoration: none;
}
body.rfck .btn--ghost:hover { border-color: var(--rf-grafite); }
body.rfck-retorno .container > div > .btn { margin: 0 12px 12px 0; }

/* ── 6 · Os estados (o servidor e o JS os mostram; aqui só a aparência) ──────────────────
   Neutro (processando, Pix gerado, em análise, 3DS, em andamento): pedra, ⛔ faixa à
   esquerda. Erro e resultado ambíguo: branco com contorno TRACEJADO texto2. Confirmado: o
   ÚNICO petróleo da tela, sempre com o texto "Pagamento aprovado!" e o ✓ desenhado. */
body.rfck .ckt-state {
  padding: 16px;
  color: var(--rf-grafite);
  background: var(--rf-pedra);
  border: 0;
  border-radius: var(--rf-raio);
  font-size: 16px;
}
body.rfck .ckt-state .small { font-size: 15px; color: var(--rf-grafite); }
body.rfck .ckt-state--error {
  background: var(--rf-fundo);
  border: 2px dashed var(--rf-texto2);
}
body.rfck .ckt-state--ok {
  color: var(--rf-petroleo-escuro);
  background: var(--rf-petroleo-claro);
  border: 1px solid var(--rf-petroleo);
}
body.rfck .ckt-state--ok .small { color: var(--rf-petroleo-escuro); }
body.rfck .ckt-state--ok > p:first-child { display: flex; gap: 8px; align-items: center; }
body.rfck .ckt-state--ok > p:first-child::before {
  flex: none;
  width: 18px;
  height: 18px;
  content: "";
  background-color: var(--rf-petroleo);
  -webkit-mask: var(--rfck-certo) center / contain no-repeat;
  mask: var(--rfck-certo) center / contain no-repeat;
}
body.rfck .ckt-pix-code {
  color: var(--rf-grafite);
  background: var(--rf-fundo);
  border: 1px solid var(--rf-borda);
  border-radius: var(--rf-raio);
  font-size: 14px;
}
body.rfck .ckt-pix-qr { border-radius: var(--rf-raio); }

/* ── 7 · O Checkout Pro e os retornos (base.html + app.css) ─────────────────────────────
   O mesmo idioma do transparente: ⛔ cartão com sombra; o bloco do produto e do preço em
   pedra; os avisos em pedra, ⛔ faixa colorida; o erro tracejado. */
body.rfck-pro .panel {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.rfck-pro .panel__head {
  padding: 16px 20px;
  background: var(--rf-pedra);
  border-radius: var(--rf-raio);
}
body.rfck-pro .panel__head h3 { color: var(--rf-grafite); font: 700 18px/1.3 var(--rf-texto); }
body.rfck-pro .meta__value { color: var(--rf-grafite); }
body.rfck .notice {
  color: var(--rf-grafite);
  background: var(--rf-pedra);
  border: 0;
  border-radius: var(--rf-raio);
}
body.rfck .notice--block {
  background: var(--rf-fundo);
  border: 2px dashed var(--rf-texto2);
}
body.rfck .faint,
body.rfck .muted { color: var(--rf-texto2); }
body.rfck .small { font-size: 15px; }
body.rfck .offer__guarantee { color: var(--rf-grafite); font-size: 15px; }
body.rfck .offer__guarantee::before {
  flex: none;
  align-self: center;
  width: 16px;
  height: 16px;
  content: "";
  background-color: var(--rf-grafite);
  -webkit-mask: var(--rfck-certo) center / contain no-repeat;
  mask: var(--rfck-certo) center / contain no-repeat;
}
body.rfck .ck-condicoes__completas > summary { color: var(--rf-cobre-texto); }
body.rfck .ck-condicoes__completas > summary:hover { color: var(--rf-grafite); }

/* ── 8 · A janela S21 (pré-checkout da página nova) ────────────────────────────────────
   Base branca, campos com borda perceptível, UMA ação cobre, foco grafite; o rótulo de cada
   campo VISÍVEL acima dele (S36); o erro com texto, contorno tracejado e associação ao campo
   (`aria-describedby`, que o template já tem). */
body.rf-p1 .rf-janela { border-radius: var(--rf-raio) var(--rf-raio) 0 0; background: var(--rf-fundo); }
@media (min-width: 720px) { body.rf-p1 .rf-janela { border-radius: var(--rf-raio); } }
body.rf-p1 .rf-janela .rf-janela__rotulo {
  display: block;
  margin-bottom: 6px;
  color: var(--rf-grafite);
  font: 700 15px/1.35 var(--rf-texto);
}
body.rf-p1 .rf-janela label { margin-bottom: 12px; }
body.rf-p1 .rf-janela input {
  border: 1px solid var(--rf-borda);
  border-radius: var(--rf-raio);
  background: var(--rf-fundo);
  color: var(--rf-grafite);
}
body.rf-p1 .rf-janela input::placeholder { color: var(--rf-placeholder); opacity: 1; }
body.rf-p1 .rf-janela input:focus,
body.rf-p1 .rf-janela input:focus-visible {
  outline: 3px solid var(--rf-anel);
  outline-offset: 2px;
  box-shadow: none;
}
body.rf-p1 .rf-janela .rf-janela__erro { color: var(--rf-texto2); }
body.rf-p1 .rf-janela .pv-pc__campo.is-invalid input,
body.rf-p1 .rf-janela input[aria-invalid="true"] { border: 2px dashed var(--rf-texto2); }
body.rf-p1 .rf-janela .rf-janela__conf { border-radius: var(--rf-raio); background: var(--rf-pedra); }
body.rf-p1 .rf-janela .rf-janela__fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rf-grafite);
  border-radius: var(--rf-raio);
}
body.rf-p1 .rf-janela .rf-cta { border-radius: var(--rf-raio); }

/* Movimento reduzido: nada aqui anima. */