/* PÁGINA DE VENDA DE UM PLANO (L1) — /planos/<codigo>
 *
 * Arquivo próprio, e não uma seção em 19_entrada.css: aquela folha é da fatia
 * C3 (a vitrine, o /experimente, a contratação de dentro) e continua sendo
 * mexida por lá. Misturar as duas transformaria qualquer ajuste de layout numa
 * disputa de merge entre duas frentes.
 *
 * O desenho é de duas colunas em tela larga — o argumento à esquerda, o
 * pagamento GRUDADO à direita — e de uma coluna no celular, com o pagamento no
 * fim. É a página que o dono manda por WhatsApp: ela é lida no celular, com o
 * polegar, e o preço precisa aparecer antes de qualquer rolagem.
 */

.venda {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--esp-5) var(--esp-4) var(--esp-6);
}

/* ── O topo: o que é e quanto custa ─────────────────────────────────────── */

.venda__topo { text-align: center; margin-bottom: var(--esp-6); }

.venda__voltar {
  display: block;
  margin-bottom: var(--esp-4);
  font-size: var(--texto-sm);
  color: var(--cor-texto-fraco);
}

.venda__selo {
  display: inline-block;
  padding: 0.15rem var(--esp-2);
  border-radius: 999px;
  background: var(--cor-acao);
  color: var(--cor-acao-contraste);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.venda__titulo {
  margin: var(--esp-2) 0 var(--esp-1);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
}

.venda__frase {
  margin: 0 auto var(--esp-4);
  max-width: 34rem;
  color: var(--cor-texto-suave);
  font-size: var(--texto-lg);
}

.venda__ciclo {
  display: inline-flex;
  padding: 0.2rem;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-fundo-afundado);
}

.venda__ciclo-opcao {
  padding: 0.4rem var(--esp-3);
  border-radius: 999px;
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--cor-texto-fraco);
  text-decoration: none;
}

.venda__ciclo-opcao--ativa {
  background: var(--cor-acao);
  color: var(--cor-acao-contraste);
}

.venda__preco {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--esp-2);
  margin: var(--esp-4) 0 var(--esp-1);
}

.venda__valor {
  font-size: clamp(2.5rem, 7vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.venda__periodo { color: var(--cor-texto-fraco); }

.venda__preco-detalhe {
  margin: 0 auto;
  max-width: 34rem;
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

/* ── O corpo: argumento à esquerda, compra à direita ────────────────────── */

.venda__corpo { display: grid; gap: var(--esp-5); align-items: start; }

@media (min-width: 62rem) {
  .venda__corpo { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--esp-6); }
  .venda__pagamento { position: sticky; top: var(--esp-4); }
}

.venda__secao-titulo {
  margin: var(--esp-5) 0 var(--esp-2);
  font-size: var(--texto-lg);
}

.venda__conteudo > .venda__secao-titulo:first-child { margin-top: 0; }

.venda__para-quem,
.venda__proximo,
.venda__alternativa {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.venda__itens,
.venda__honestidade { margin: 0; padding-left: var(--esp-4); display: grid; gap: var(--esp-2); }

.venda__honestidade { list-style: none; padding-left: 0; }

.venda__honestidade li {
  padding-left: var(--esp-4);
  position: relative;
  font-size: var(--texto-sm);
}

.venda__honestidade li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--cor-acao);
  font-weight: 700;
}

.venda__numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--esp-3);
  margin: 0;
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
}

.venda__numeros dt { font-size: var(--texto-xs); color: var(--cor-texto-fraco); }
.venda__numeros dd {
  margin: 0;
  font-size: var(--texto-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── A caixa da compra ──────────────────────────────────────────────────── */

.compra {
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  box-shadow: var(--sombra-md);
}

.compra__titulo { margin: 0 0 var(--esp-2); font-size: var(--texto-lg); }

.compra__resumo,
.compra__linha-fina,
.compra__quem {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.compra__quem--aviso { color: var(--cor-texto); }

.compra__aviso {
  margin: 0 0 var(--esp-3);
  padding: var(--esp-2);
  border-radius: var(--raio-sm);
  background: var(--sgp-info-suave, var(--cor-fundo-afundado));
  font-size: var(--texto-xs);
}

.compra__formulario { display: grid; gap: var(--esp-4); }

.compra__bloco { border: 0; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }

.compra__legenda {
  padding: 0;
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}

.compra__formas { display: grid; gap: var(--esp-2); }

.compra__forma {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  cursor: pointer;
  font-size: var(--texto-sm);
}

.compra__forma:has(input:checked) {
  border-color: var(--cor-acao);
  box-shadow: inset 0 0 0 1px var(--cor-acao);
}

.compra__seguranca {
  margin: 0;
  text-align: center;
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}

/* A isca do honeypot: fora da tela, fora do foco, e nunca `display:none` — há
   robô que ignora campo com display none justamente por saber que é isca. */
.compra__isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* O caminho do teste, na vitrine, em segundo plano — o botão principal de cada
   cartão agora leva para a página do plano (L1). Link e não botão: são duas
   ações de peso diferente, e dois botões lado a lado não têm hierarquia. */
.vitrine-plano__teste {
  display: block;
  margin-top: var(--esp-2);
  text-align: center;
  font-size: var(--texto-sm);
  color: var(--cor-texto-fraco);
}

/* ── O cartão dentro da coluna estreita ─────────────────────────────────────
 *
 * `.cartao-campos` (19_checkout.css) usa `auto-fit` com pista mínima de 11rem,
 * que foi desenhado para a largura inteira da tela de Configurações. Dentro dos
 * 24rem desta coluna, `auto-fit` colapsa para UMA pista — e mês, ano e CVV, que
 * são três caixas de 2 a 4 dígitos, viram três linhas cheias. O formulário
 * ficava com o dobro da altura sem precisar, e altura é desistência.
 *
 * Aqui a grade é declarada em três pistas iguais, e só os campos que precisam
 * da linha inteira pedem `__largo`. */
.compra .cartao-campos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-2) var(--esp-3);
}

/* CEP, rua e bairro precisam de mais de um terço para caber; o número não. */
.compra .cartao-campos .campo:has(input[autocomplete="billing postal-code"]),
.compra .cartao-campos .campo:has(input[autocomplete="billing address-line1"]),
.compra .cartao-campos .campo:has(input[autocomplete="billing address-level3"]) {
  grid-column: span 2;
}

.compra .campo__controle { width: 100%; }

/* O atalho para o pagamento — só existe onde ele está longe (ver a nota na
   view). Em tela larga o formulário está ao lado, e um botão que rola a página
   para algo já visível é ruído. */
.venda__atalho { margin-top: var(--esp-4); }

@media (min-width: 62rem) {
  .venda__atalho { display: none; }
}