/* styles.css · SHM Consórcios · LP de captura (2026-11-11, redesenho claro pedido pelo Henrique)
   Página sobre o papel (claro), com o campo (escuro) só onde a marca mora: topo com a logo, cartão do
   simulador, faixa de aviso, chamada final e rodapé. Regras que este arquivo cumpre e que o QA mede:
   - laranja (--acento) só no CTA, na prova (sempre sobre o campo) e no anel de foco das zonas escuras;
     nunca dentro do cartão, nunca como texto sobre o claro (2,57);
   - 700 só no número da carta; as duas parcelas com o mesmo corpo, peso e cor;
   - nenhum gradiente, nenhuma sombra, nenhuma pílula de rótulo; o anel da logo nunca anima;
   - motion só por translação, desligado em prefers-reduced-motion; dobra e LCP fora de qualquer reveal. */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papel); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-4); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fs-corpo);
  font-weight: 400;
  line-height: var(--lh-corpo);
  color: var(--campo);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
p, h1, h2, h3, ul, ol, figure, fieldset { margin: 0; }
b, strong { font-weight: 600; } /* 700 só no número da carta (DESIGN.md §2) */
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
/* Zonas escuras: texto papel, rótulo névoa, anel de foco laranja (6,88 no campo). */
.topo, .cartao, .aviso, .final, .rodape { --foco: var(--acento); color: var(--papel); }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--space-4)); margin-inline: auto; padding-inline: var(--space-4); }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- tipografia (escala da LP, §2) */
.rotulo {
  font-size: var(--fs-rotulo);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
}
.cartao .rotulo, .final .rotulo, .rodape .rotulo { color: var(--nevoa); }
.h1, h1 {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-titulo);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-titulo);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.h3 { font-size: var(--fs-corpo); font-weight: 600; line-height: 1.25; }

/* "R$" na linha de base, menor que o número, com 0,32 em de respiro (DESIGN.md §2). */
.rs { font-size: var(--fs-rotulo); font-weight: 500; letter-spacing: 0; margin-right: 0.32em; }
.rs--carta { font-size: var(--fs-sub); }
.sep { margin-inline: -0.05em; }

.legal { font-size: var(--fs-rotulo); font-weight: 400; line-height: 1.45; letter-spacing: 0.01em; color: var(--tinta-2); }

/* ---------------------------------------------------------------- CTA "Simule no WhatsApp" (§4) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-cta);
  background: var(--acento);
  color: var(--campo);
  font-family: inherit;
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-small) var(--ease-out);
}
.btn:hover { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-2px); } .btn:active { transform: none; } }
.btn:disabled { cursor: progress; transform: none; }
.btn--bloco { width: 100%; }
.btn--borda { background: transparent; color: var(--campo); border: 1px solid var(--campo); }
.link { font-weight: 500; }

/* ---------------------------------------------------------------- topo (faixa do campo, só a logo) */
.topo { background: var(--campo); padding: var(--space-2) 0; }
.logo { height: 40px; width: auto; }
/* O anel é marca, não interface: parado, sem transição nem animação, em qualquer estado. */
.logo, .logo * { animation: none !important; transition: none !important; }

/* ---------------------------------------------------------------- 1 · dobra */
.dobra { padding-top: var(--space-4); }
.dobra__grade { display: grid; gap: var(--space-4); }
.dobra__rotulo { margin-bottom: var(--space-2); }
.dobra__sub { margin-top: var(--space-3); max-width: 33.5em; color: var(--tinta-2); }
.dobra__descritor { display: grid; gap: var(--space-3); max-width: 38em; justify-items: start; }

.selos { display: grid; gap: var(--space-2); }
.selos li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-2); align-items: center; font-weight: 500; }
/* Visto desenhado em CSS (dois traços), sem pacote de ícone. */
.selos li::before {
  content: "";
  width: 12px;
  height: 7px;
  margin-left: 4px;
  border-left: 2px solid var(--campo);
  border-bottom: 2px solid var(--campo);
  transform: translateY(-2px) rotate(-45deg);
}

.descritor { color: var(--tinta-2); font-size: var(--fs-rotulo); line-height: 1.45; }
/* A prova é o único texto laranja da página e mora sempre sobre o campo (laranja sobre o claro reprova). */
.prova { background: var(--campo); color: var(--acento); font-weight: 600; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); }
.cartao .prova { background: none; padding: 0; }

/* ---------------------------------------------------------------- simulador (passo 1 e passo 2) */
.sim { display: grid; gap: var(--space-3); min-width: 0; scroll-margin-top: var(--space-3); }
.sim__passo { display: grid; gap: var(--space-3); min-width: 0; }
/* Com JS, um passo por vez (a classe has-js entra no <head>, então nada pisca). Sem JS, os dois ficam à vista. */
.has-js .sim:not(.sim--passo-2) #etapa-2 { display: none; }
.has-js .sim--passo-2 #passo-1 { display: none; }
.sim__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.sim__titulo { font-size: var(--fs-sub); font-weight: 600; line-height: 1.2; }

.escolhas { border: 0; padding: 0; min-width: 0; }
.escolhas__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.escolha { position: relative; display: block; }
.escolha input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none; /* quem recebe o toque é o rótulo (for=); o rádio segue focável pelo teclado */
}
.escolha label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--borda);
  border-radius: var(--radius-control);
  background: var(--folha);
  color: var(--campo);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-small) var(--ease-out), color var(--dur-small) var(--ease-out);
}
.escolha input:checked + label { background: var(--campo); border-color: var(--campo); color: var(--papel); }
.escolha input:focus-visible + label { outline: 2px solid var(--foco); outline-offset: 3px; }

/* Cartão do simulador: o ativo da marca no pixel. Campo, raio 16; nada laranja aqui dentro. */
.cartao {
  background: var(--campo);
  border-radius: var(--radius-cartao);
  padding: var(--space-4);
}
.cartao__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.cartao__exemplo { flex: none; }
.cartao__carta {
  margin-top: var(--space-1);
  font-size: var(--fs-carta);
  font-weight: 700;
  line-height: var(--lh-numero);
  letter-spacing: var(--ls-carta);
  font-variant-numeric: tabular-nums;
}
/* Régua do valor da carta. O trecho percorrido é um <span> com largura calculada (sem gradiente). */
.faixa { position: relative; height: 44px; --p: 0.2857; }
.faixa::before, .faixa__cheio {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  height: 6px;
  border-radius: 3px;
  pointer-events: none;
}
.faixa::before { right: 0; background: var(--superficie); border: 1px solid var(--nevoa); }
.faixa__cheio { width: calc(14px + (100% - 28px) * var(--p)); background: var(--papel); }
.faixa input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.faixa input::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.faixa input::-moz-range-track { height: 44px; background: transparent; }
.faixa input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--papel);
}
.faixa input::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--papel); }
.faixa input:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; border-radius: var(--radius-control); }
.faixa__limites { display: flex; justify-content: space-between; font-size: var(--fs-rotulo); color: var(--nevoa); font-variant-numeric: tabular-nums; }
.cartao__fio { border: 0; border-top: 1px solid var(--superficie); margin: var(--space-3) 0; }
.cartao__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: end; }
.parcela { display: grid; gap: var(--space-1); align-content: start; }
.parcela__valor {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-numero);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mes { font-size: var(--fs-rotulo); font-weight: 400; margin-left: 0.2em; }
.cartao__taxa { margin-top: var(--space-3); }

/* Passo 2: resumo do pedido, campos e consentimento. */
.form__pedido { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--papel); border-radius: var(--radius-control); }
.form__pedido-texto { font-weight: 600; }
.form__pedido .link { flex: none; display: inline-flex; align-items: center; min-height: 44px; }
.campo { display: grid; gap: var(--space-1); }
.campo label { font-weight: 500; }
.campo input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-3);
  border: 1px solid var(--borda);
  border-radius: var(--radius-control);
  background: var(--folha);
  color: var(--campo);
  font-family: inherit;
  font-size: var(--fs-corpo);
}
.campo input::placeholder { color: var(--tinta-2); opacity: 1; }
.campo--erro input { border: 2px solid var(--campo); }
.campo__erro { font-size: var(--fs-rotulo); font-weight: 600; color: var(--campo); }
.campo__erro:empty { display: none; }
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--campo); cursor: pointer; }
.consent label { font-size: var(--fs-rotulo); line-height: 1.45; color: var(--tinta-2); cursor: pointer; }
.consent .campo__erro { grid-column: 1 / -1; margin-top: var(--space-1); }
.consent--erro input { outline: 2px solid var(--campo); outline-offset: 2px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-weight: 500; }
.form__status:empty { display: none; }

@media (min-width: 900px) {
  .dobra { padding-top: var(--space-7); }
  .dobra__grade {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas: "texto sim" "descritor sim";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-7);
    row-gap: var(--space-5);
    align-items: start;
  }
  .dobra__texto { grid-area: texto; }
  .dobra__grade > .sim { grid-area: sim; }
  .dobra__descritor { grid-area: descritor; }
  .dobra__sub { font-size: var(--fs-sub); line-height: 1.4; }
  .sim { background: var(--folha); border: 1px solid var(--linha); border-radius: 24px; padding: var(--space-4); }
  .escolha label { background: var(--papel); }
}

/* ---------------------------------------------------------------- seções */
.secao { padding-top: var(--secao); }
.secao .h2 { margin-bottom: var(--space-4); }
.secao__nota { max-width: var(--measure); margin-top: var(--space-4); color: var(--tinta-2); }

/* Cartão claro: folha sobre o papel, com fio. */
.passo, .caminho, .criterio, .nao-e__item {
  background: var(--folha);
  border: 1px solid var(--linha);
  border-radius: var(--radius-cartao);
  padding: var(--space-4);
}
.passo p, .caminho__item, .criterio p, .nao-e__item p { color: var(--tinta-2); }

/* ---------------------------------------------------------------- 2 · como funciona (Degrau) */
.passos { display: grid; gap: var(--space-3); }
.passo { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); align-items: start; }
.passo__n {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--campo);
  color: var(--papel);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.passo .h3 { align-self: center; }
.passo .h3, .passo p { grid-column: 2; }
.aviso { margin-top: var(--space-3); background: var(--campo); border-radius: var(--radius-cartao); padding: var(--space-3) var(--space-4); font-weight: 500; }
@media (min-width: 900px) {
  .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .passo { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
  .passo__n { grid-row: auto; margin-bottom: var(--space-2); }
  .passo .h3, .passo p { grid-column: 1; }
  .passo .h3 { align-self: start; }
}

/* ---------------------------------------------------------------- cartas para começar (cartões do campo) */
.cartas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.carta {
  --foco: var(--acento);
  display: grid;
  gap: var(--space-1);
  align-content: start;
  height: 100%;
  min-height: 132px;
  padding: var(--space-3);
  background: var(--campo);
  border-radius: var(--radius-cartao);
  color: var(--papel);
  text-decoration: none;
  transition: transform var(--dur-small) var(--ease-out);
}
.carta .rotulo { color: var(--nevoa); }
/* Imagem do bem atrás do texto, com película do campo por cima (cor chapada com opacidade, sem gradiente). */
.carta { position: relative; overflow: hidden; background-size: cover; background-position: center 70%; }
.carta::before { content: ""; position: absolute; inset: 0; background: var(--campo); opacity: 0.35; }
.carta > * { position: relative; }
/* Cartões pequenos (6 por linha): o texto de 12,8 px passa sobre a imagem, então a película é mais forte. */
.cartas:not(.cartas--bens) .carta::before { opacity: 0.6; }
.carta--imovel { background-image: url("/assets/img/lp/carta-imovel.webp"); }
.carta--auto { background-image: url("/assets/img/lp/carta-carro.webp"); }
.carta--moto { background-image: url("/assets/img/lp/carta-moto.webp"); }
.cartas--bens { grid-template-columns: minmax(0, 1fr); }
.cartas--bens .carta { min-height: 168px; align-content: end; }
.cartas--bens .carta__acao { margin-top: 0; }
.carta__valor { font-size: var(--fs-display); font-weight: 600; line-height: var(--lh-numero); font-variant-numeric: tabular-nums; white-space: nowrap; }
.carta__acao { align-self: end; margin-top: var(--space-2); font-size: var(--fs-rotulo); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .carta:hover { transform: translateY(-2px); } }
@media (min-width: 900px) {
  .cartas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
  .cartas--bens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cartas--bens .carta { min-height: 280px; }
  .carta { padding: var(--space-4); min-height: 168px; }
}

/* ---------------------------------------------------------------- 3 · três caminhos (nenhum destacado) */
.caminhos { display: grid; gap: var(--space-3); }
.caminho { display: grid; align-content: start; gap: var(--space-3); }
.caminho .h3 { font-size: var(--fs-sub); }
.caminho__item .rotulo { display: block; margin-bottom: var(--space-1); }
@media (min-width: 900px) { .caminhos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- 4 · critérios */
.criterios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.criterio { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-3); }
.criterio p { font-size: var(--fs-rotulo); line-height: 1.45; }
.criterio a { display: inline-block; padding: var(--space-2) 0; margin: calc(-1 * var(--space-2)) 0; }
.criterio:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .criterios { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
  .criterio { padding: var(--space-4); }
  .criterio:last-child { grid-column: auto; }
}

/* ---------------------------------------------------------------- 5 · para quem não é */
.nao-e { display: grid; gap: var(--space-3); }
.nao-e__item { display: grid; gap: var(--space-1); align-content: start; }
@media (min-width: 900px) { .nao-e { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- 6 · FAQ */
.faq { max-width: 820px; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--radius-cartao); padding: 0 var(--space-4); }
.faq__item + .faq__item { border-top: 1px solid var(--linha); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-2) 0;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-size: var(--fs-sub); font-weight: 400; color: var(--tinta-2); }
.faq__item[open] summary::after { content: "\2212"; }
.faq__corpo { padding: 0 0 var(--space-4); max-width: var(--measure); color: var(--tinta-2); }

/* ---------------------------------------------------------------- 7 · chamada final (faixa do campo) */
.final { margin-top: var(--secao); background: var(--campo); padding: var(--space-7) 0; }
.final__caixa { display: grid; gap: var(--space-3); justify-items: start; }
.final__caixa p { max-width: 34em; color: var(--nevoa); }
.final__cta { margin-top: var(--space-2); width: 100%; }
.final__cta .btn { width: 100%; }
@media (min-width: 560px) { .final__cta .btn { width: auto; min-width: 320px; } }
@media (min-width: 900px) {
  .final { padding: var(--space-8) 0; }
  .final__caixa { justify-items: center; text-align: center; }
}

/* ---------------------------------------------------------------- 8 · rodapé (campo) */
.rodape { background: var(--campo); padding: var(--space-6) 0 calc(var(--space-6) + 88px); border-top: 1px solid var(--superficie); }
main:not(:has(.final)) + .rodape { margin-top: var(--secao); }
.rodape__marca { display: grid; gap: var(--space-2); max-width: 44em; }
.rodape__marca .logo { margin-bottom: var(--space-2); }
.rodape .descritor { color: var(--nevoa); font-size: var(--fs-corpo); }
.rodape__prova { font-weight: 500; }
/* Texto regulatório recolhido: continua na página, a um toque. */
.rodape__mais { margin-top: var(--space-3); }
.rodape__mais summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--nevoa);
  font-size: var(--fs-rotulo);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}
.rodape__mais summary::-webkit-details-marker { display: none; }
.rodape__mais summary::after { content: "+"; }
.rodape__mais[open] summary::after { content: "\2212"; }
.rodape__legal { display: grid; gap: var(--space-3); margin-top: var(--space-3); max-width: 58.5em; color: var(--nevoa); font-size: 14px; }
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-3); color: var(--nevoa); font-size: 14px; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) { .rodape { padding-bottom: var(--space-6); } }

/* ---------------------------------------------------------------- barra fixa (celular, depois da dobra) */
.cta-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--papel);
  border-top: 1px solid var(--linha);
  transform: translateY(110%);
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--dur-block) var(--ease-out), visibility 0s linear var(--dur-block);
}
.cta-fixa--visivel { transform: none; visibility: visible; pointer-events: auto; transition: transform var(--dur-block) var(--ease-out), visibility 0s; }
@media (min-width: 900px) { .cta-fixa { display: none; } }

/* ---------------------------------------------------------------- motion "Degrau" (só translação) */
/* Visível por padrão: sem JS, ou com o observer falhando, nada fica escondido (o main.js ainda mostra tudo
   em 1,2 s). Só a posição muda; nenhum fade. Dobra, simulador e CTA nunca têm .entra. */
@media (prefers-reduced-motion: no-preference) {
  .has-js .entra { transform: translateY(12px); transition: transform var(--dur-block) var(--ease-out); }
  .has-js .entra.is-in { transform: none; }
  [data-degrau] > .entra:nth-child(2) { transition-delay: 80ms; }
  [data-degrau] > .entra:nth-child(3) { transition-delay: 160ms; }
  [data-degrau] > .entra:nth-child(4) { transition-delay: 240ms; }
}

/* ---------------------------------------------------------------- páginas institucionais (obrigado, privacidade) */
.pagina { padding-top: var(--space-6); }
.pagina__medida, .pagina .medida { max-width: 51em; display: grid; gap: var(--space-3); }
.pagina .medida h2 { margin-top: var(--space-4); font-size: var(--fs-sub); font-weight: 600; line-height: 1.2; }
.pagina .medida ul { list-style: disc; padding-left: 1.2em; display: grid; gap: var(--space-1); }
.secundario { color: var(--tinta-2); }
.pequeno { font-size: var(--fs-rotulo); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-rotulo); }
.tabela th, .tabela td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-2) var(--space-2) 0; border-top: 1px solid var(--linha); }
.tabela th { font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-rotulo); color: var(--tinta-2); }
.divisor { border: 0; border-top: 1px solid var(--linha); margin: var(--space-4) 0 0; width: 100%; }
.obrigado__cta .btn { width: 100%; }
@media (min-width: 560px) { .obrigado__cta .btn { width: auto; min-width: 320px; } }
.obrigado__horario { color: var(--tinta-2); }
.obrigado__caixa { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
/* Sem barra fixa na página, o rodapé não precisa da folga de baixo. */
body:not(:has(.cta-fixa)) .rodape { padding-bottom: var(--space-6); }

/* Celular: o simulador sobe para a primeira tela (as duas parcelas inteiras a 390 × 664). */
@media (max-width: 899px) {
  .dobra { padding-top: var(--space-3); }
  .dobra__grade { gap: var(--space-3); }
  .dobra__sub { margin-top: var(--space-2); }
  #passo-1 .sim__topo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cartao { padding: var(--space-3); }
  .cartao__fio { margin: var(--space-2) 0; }
}

/* ---------------------------------------------------------------- variação B (direta.html, sem calculadora) */
.dobra__cta { margin-top: var(--space-4); }
.dobra__cta .btn { width: 100%; }
.dobra__imagem img { width: 100%; height: auto; }
.pedido__grade { display: grid; gap: var(--space-4); }
.pedido__texto { display: grid; gap: var(--space-3); align-content: start; max-width: var(--measure); }
.pedido__texto .h2 { margin-bottom: 0; }
.pedido__texto p { color: var(--tinta-2); }
.sim--direto .escolhas legend { padding: 0; margin-bottom: var(--space-2); }
@media (min-width: 560px) { .dobra__cta .btn { width: auto; min-width: 320px; } }
@media (min-width: 900px) {
  .dobra--direta .dobra__grade { grid-template-areas: "texto imagem" "descritor imagem"; align-items: center; }
  .dobra__imagem { grid-area: imagem; }
  .pedido__grade { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--space-7); align-items: start; }
  .pedido__grade > .sim { background: var(--folha); border: 1px solid var(--linha); border-radius: 24px; padding: var(--space-4); }
}