/* ==========================================================================
   Simulador Acelera Consórcio Porto Bank — /simulador-consorcio

   Identidade Capital Consórcio, conforme DESIGN.md e o manual de marca.
   A Porto entra como logo no cabeçalho e no rodapé; a página é da Capital.

   Esta folha é exclusiva desta página. Ela NÃO carrega css/webflow.css, então
   as variáveis --_cores---* não existem aqui: a paleta é declarada abaixo.
   ========================================================================== */

:root {
  /* Paleta oficial (manual, pág. 6). Preto e branco puros ficam de fora. */
  --cc-azul: #355673;
  --cc-amarelo: #efce67;
  --cc-creme: #fcf5e0;
  --cc-verde: #dae8d1;
  --cc-offwhite: #f7f5f0;
  --cc-ink: #121d26;

  /* Única cor de página fora do manual, sancionada no DESIGN.md §2. */
  --cc-erro: #c0392b;

  /* Transparências do ink para texto secundário. Cinza neutro sobre creme ou
     verde lava; o manual pede transparência da própria tinta. */
  --cc-ink-70: #121d26b3;
  --cc-ink-65: #121d26a6;

  /* Limite de campo a 3,13:1 sobre o card — o verde dava 1,17:1 e reprovava a
     WCAG 1.4.11. Mesmo token da folha irmã, pela mesma razão. */
  --cc-borda-campo: #355673a6;

  /* Gradientes oficiais (manual, pág. 7). Stops e ângulos exatos. */
  --cc-grad-escuro: linear-gradient(135deg, #121d26 0%, #355673 100%);
  --cc-grad-quente: linear-gradient(135deg, #efce67 0%, #fcf5e0 100%);
  --cc-grad-marca: linear-gradient(110deg, #355673 0%, #4d8aa8 28%, #dae8d1 55%, #efce67 80%, #fcf5e0 100%);

  /* Escala de cantos (manual, pág. 5): múltiplos de 8, complementar de 4. */
  --cc-r-xs: 4px;
  --cc-r-sm: 8px;
  --cc-r-md: 16px;
  --cc-r-lg: 24px;
  --cc-r-xl: 32px;

  /* Escala tipográfica — oito degraus (DESIGN.md §3). */
  --cc-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --cc-h2: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
  --cc-h3: 1.25rem;
  --cc-h4: 1rem;
  --cc-body-lg: 1.125rem;
  --cc-body: 1rem;
  --cc-body-sm: .875rem;
  --cc-caption: .8125rem;

  /* Dois pesos (manual, pág. 8). O 400 é a exceção documentada abaixo de 16px:
     a Light em 13–14px fica frágil demais para leitura em tela. */
  --cc-w-titulo: 900;
  --cc-w-corpo: 300;
  --cc-w-apoio: 400;

  --sim-sombra: 0 1px 2px #121d260a, 0 8px 20px #121d2612, 0 24px 48px #121d2610;

  /* --------------------------------------------------------------------
     Escala de larguras de coluna.

     A página inteira corria numa coluna só de 760px, herdada do tempo em que
     ela era apenas o simulador. Com as oito seções da LP embaixo isso ficou
     estreito demais. As quatro larguras são concêntricas — todas centradas no
     mesmo eixo — então a variação lê como aninhamento e não como desalinho, e
     a página continua descendo como um documento só.

     Quem escolhe é o tipo de conteúdo, não a ordem:
       ferramenta  simulador e hero, onde a medida é do formulário
       leitura     prosa corrida: os passos, a oferta explicada e o FAQ
       lista       grades, tabela, CTA final e bloco legal
       (sem cap)   a faixa de autoridade e os depoimentos, na largura do shell
     -------------------------------------------------------------------- */
  --sim-col-ferramenta: 760px;
  --sim-col-leitura: 820px;
  --sim-col-lista: 1000px;

  /* --------------------------------------------------------------------
     Apelidos consumidos pelo JavaScript, que está congelado nesta frente.
     js/simulador-consorcio.js:230 monta o preenchimento da barra de crédito
     por concatenação de string, citando estes dois nomes de variável. Trocar
     os nomes quebraria a barra, então eles permanecem, apontando para a
     paleta da Capital.
     -------------------------------------------------------------------- */
  --porto-blue: var(--cc-azul);
  --sim-border: #35567359;
}

.sim-page {
  background-color: var(--cc-creme);
  color: var(--cc-ink);
  font-family: "DM Sans", sans-serif;
  font-size: var(--cc-body);
  font-weight: var(--cc-w-corpo);
  line-height: 1.55;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.sim-page *,
.sim-page *:before,
.sim-page *:after {
  box-sizing: border-box;
}

/* Regras com `display` (flex/grid) venceriam o atributo `hidden` e deixariam
   elementos escondidos aparecendo. Esta regra garante que `hidden` sempre vale. */
.sim-page [hidden] {
  display: none !important;
}

/* Títulos sempre em lowercase (manual, pág. 8). O HTML mantém a capitalização
   original, então SEO, dados estruturados e leitores de tela não são afetados. */
.sim-page h1,
.sim-page h2,
.sim-page h3 {
  text-transform: lowercase;
  text-wrap: balance;
}

/* O sistema tem três pesos: 300, 400 e 900. Sem esta regra todo <strong> sem
   seletor próprio cai no `bolder` do user-agent, que resolve para 700 — peso
   que o manual não tem. Mordeu em seis pontos das seções da LP, todos dentro
   da melhor prosa da página (a oferta e as formas de contemplação). */
.sim-page strong {
  font-weight: var(--cc-w-titulo);
}

.sim-shell {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Trecho que não pode quebrar no meio. Hoje só o telefone do CTA final, onde o
   rótulo passa para duas linhas no celular e o número partia entre "(11)" e o
   resto. */
.sim-nao-quebra {
  white-space: nowrap;
}

.sim-visually-hidden {
  font-weight: var(--cc-w-titulo);
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Anel de foco em azul capital: 7,06:1 sobre o card off-white. O azul-Porto
   anterior media 2,80:1 e reprovava a WCAG 2.4.11 — e é a única affordance
   que quem navega por teclado não consegue contornar.

   **A cor do anel é token, não valor fixo.** O `outline-offset` joga o anel no
   fundo *ao redor* do elemento, então em superfície escura o azul media 2,22:1
   na ponta escura do gradiente e 1,00:1 na clara — invisível. As superfícies
   escuras redefinem `--cc-anel` logo abaixo, e a propriedade herda para dentro
   delas. Off-white sobre o gradiente mede 15,3:1 na ponta escura e 6,85:1 na
   clara. */
.sim-page {
  --cc-anel: var(--cc-azul);
}

.sim-page :focus-visible {
  outline: 3px solid var(--cc-anel);
  outline-offset: 3px;
  border-radius: var(--cc-r-sm);
}

/* Hero, CTA final e rodapé correm sobre `--cc-grad-escuro`. */
.sim-promo,
.sim-cta-final,
.sim-footer {
  --cc-anel: var(--cc-offwhite);
}

/* ---------- Header ------------------------------------------------------ */

/* Cabeçalho flutuante, no mesmo padrão de /vender-consorcio: sem fundo próprio,
   logos centralizados, e o gradiente do hero correndo inteiro por trás. Quem
   reserva o espaço dele é o `padding-top` do `.sim-promo`.

   O `z-index: 5` não é arbitrário: é a camada "cabeçalho do site" da escala
   declarada no topo de `css/whatsapp-flutuante.css`. Sem ele o hero pintaria por
   cima, porque os dois são posicionados e o hero vem depois no documento. */
.sim-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background-color: transparent;
  padding: 16px 0;
  /* Fio de 1px separando a barra do hero. Off-white a 14%, e não uma cor
     chapada: o fundo por baixo é um gradiente de 135°, então qualquer cor fixa
     ficaria forte numa ponta e sumiria na outra. Sendo transparência do próprio
     claro, o fio acompanha as duas pontas. */
  border-bottom: 1px solid #f7f5f024;
}

.sim-header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* O alvo do logo é de 44px, o mínimo de dedo, mesmo com a arte a 32px. */
.sim-header-inner a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.sim-brands {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* A Capital vem primeiro no cabeçalho e o logo dela é o maior: a página é dela,
   a Porto é a administradora da campanha. */
.sim-logo-porto {
  height: 26px;
  width: auto;
}

/* Divisória a 3:1 sobre o gradiente. A de antes usava branco a 20% e
   praticamente não existia na tela. */
.sim-brand-divider {
  width: 1px;
  height: 28px;
  background-color: #f7f5f099;
}

/* A Capital é a dona da página: o logo dela não fica menor que o da Porto. */
.sim-logo-capital {
  height: 32px;
  width: auto;
}

/* ---------- Destaque da promoção (topo da página) ---------------------- */

.sim-promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cc-grad-escuro);
  color: var(--cc-offwhite);
  /* O topo reserva o espaço do cabeçalho, que agora flutua por cima e saiu do
     fluxo. 96px cobrem os 76px dele com folga. */
  padding: 96px 0 44px;
  text-align: center;
}

/* Textura oficial da porta sobre o gradiente. `cover` + `no-repeat` porque o
   PNG não é tile contínuo: o período horizontal do desenho é 106,33px em
   1087px de arte, e a sobra aparecia como costura vertical. Com uma cópia só
   não existe junta para errar. */
.sim-promo:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/padrao-porta-branco.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .04;
  pointer-events: none;
}

.sim-promo-inner {
  max-width: var(--sim-col-ferramenta);
}

/* Selo de validade da campanha. É um badge nomeado, não um eyebrow de seção:
   fica em lowercase e sem tracking, e aparece uma única vez na página. */
.sim-promo-kicker {
  display: inline-block;
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  line-height: 1.4;
  text-transform: lowercase;
  color: var(--cc-ink);
  background-color: var(--cc-amarelo);
  padding: 7px 16px;
  border-radius: 999px;
  margin: 0 0 18px;
}

/* Nome da campanha. Papel de identificação, não de manchete: a oferta abaixo
   é que carrega o peso de display. */
.sim-promo-title {
  font-size: var(--cc-h3);
  line-height: 1.3;
  font-weight: var(--cc-w-titulo);
  color: var(--cc-amarelo);
  margin: 0 0 14px;
}

/* Bloco "até 50% de redução na parcela até a contemplação" — a manchete real.
   Centralizado: o `text-align: left` de antes deixava um bloco desalinhado no
   meio de uma seção centrada, e no celular a linha vazava 12px do container
   para cada lado. */
/* O número ganha a linha inteira e o resto desce: pedido do cliente em
   2026-08-27, "mais destaque nos 50%".

   O ganho é relacional, não de tamanho absoluto. O display continua no teto de
   56px que o manual fixa (§3), e a distância até a vizinhança é que cresce: o
   "até" cai de 20px/900 para 16px/300 e vira qualificador, e o texto da oferta
   cai de `--cc-h2` para `--cc-h3`. A razão entre o número e o texto ao lado sai
   de 1,55× para 2,8×, e o número passa a ser o único objeto da sua linha. */
.sim-promo-headline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0 0 18px;
}

/* Degrau próprio, acima do teto de 56px da escala. **Desvio deliberado**, a
   pedido do cliente em 2026-08-27, registrado no §8c: 48px no celular a 72px no
   desktop, contra os 36–56px do `--cc-display`.

   O teto de 3.5rem do §3 existe para a página explicar em vez de gritar, e ele
   continua valendo para todo o resto: este é o único elemento fora dele, e não
   toca no `--cc-display`, então o valor da simulação segue nos 56px. Longe dos
   112px de onde a página partiu, que eram o dobro do teto, e ainda abaixo do
   limite de 6rem que vale para qualquer manchete. */
.sim-promo-pct {
  font-size: clamp(3rem, 2.2rem + 3.4vw, 4.5rem);
  line-height: 1.05;
  font-weight: var(--cc-w-titulo);
  letter-spacing: -.02em;
  color: var(--cc-amarelo);
  flex: none;
}

/* `flex-basis: 100%` joga o texto da oferta para a linha de baixo, deixando o
   número sozinho na sua. */
.sim-promo-headline-text {
  flex-basis: 100%;
  font-size: var(--cc-h3);
  line-height: 1.3;
  font-weight: var(--cc-w-titulo);
  text-transform: lowercase;
  color: var(--cc-offwhite);
}

/* ---------- Botões ------------------------------------------------------ */

.sim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--cc-h4);
  font-weight: var(--cc-w-titulo);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}

/* Amarelo é a cor de ação do manual. Avança a simulação. */
.sim-btn-primary {
  background-color: var(--cc-amarelo);
  color: var(--cc-ink);
}

.sim-btn-primary:hover {
  background: var(--cc-grad-quente);
}

.sim-btn-primary:active {
  transform: translateY(1px);
}

.sim-btn-ghost {
  background-color: #0000;
  color: var(--cc-azul);
  border: 1.5px solid var(--cc-borda-campo);
}

.sim-btn-ghost:hover {
  border-color: var(--cc-azul);
  background-color: var(--cc-verde);
}

/* Ação de WhatsApp em azul capital. O verde saturado de antes brigava com o
   CTA da própria página e contrariava a decisão de "verde só no ícone" — e
   aqui não há ícone, então não há verde. */
.sim-btn-whats {
  background-color: var(--cc-azul);
  color: var(--cc-offwhite);
}

.sim-btn-whats:hover {
  background-color: var(--cc-ink);
}

.sim-btn-whats:active {
  transform: translateY(1px);
}

.sim-btn-block {
  width: 100%;
}

/* CTA principal do resultado — precisa dominar visualmente o card.

   O que fazia ele não parecer botão era a superfície: azul chapado, sem
   elevação, logo abaixo de um card que já é azul-escuro. Lia como faixa, não
   como coisa clicável. Três correções, em ordem de peso:

   1. Cor de ação. Amarelo é o que o manual chama de ação, e aqui ele não
      disputa com ninguém: no estado de resultado os outros amarelos da página
      saem da tela (ver a regra de `#sim-step-3` mais abaixo).
   2. Relevo. A sombra é dupla: uma linha escura curta, que faz a aresta de
      baixo do botão, e uma difusa larga, que o descola da página. É esse par
      que o olho lê como "isso levanta".
   3. Resposta ao toque. Sobe 2px no hover e afunda no clique, com a aresta
      encolhendo junto, para se comportar como superfície física. */
/* Respiro lateral e corpo do texto são apertados na base e folgam a partir de
   600px: no celular o card tem ~300px, e a 1.125rem com 32px de cada lado o
   rótulo quebrava em duas linhas, com a seta pendurada no meio da altura. Uma
   linha só importa aqui — é o que faz o botão ler como um alvo, e não como um
   parágrafo dentro de uma caixa amarela. */
.sim-btn-xl {
  width: 100%;
  min-height: 66px;
  padding-inline: 18px;
  font-size: var(--cc-body);
  box-shadow:
    0 4px 0 #c9a63f,
    0 12px 28px #121d2633,
    0 2px 6px #121d261a;
}

/* O `background` aqui sobrescreve de propósito o gradiente quente de
   `.sim-btn-primary:hover`: naquele gradiente o canto direito chega quase em
   creme, e num botão desse tamanho, sobre uma página off-white, a metade clara
   se dissolvia no fundo justo quando o cursor está em cima. Escurecer é o
   gesto que todo mundo já espera de um botão sob o cursor. */
.sim-btn-xl:hover {
  background: #e8c250;
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 #c9a63f,
    0 18px 38px #121d2640,
    0 2px 6px #121d261a;
}

.sim-btn-xl:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #c9a63f,
    0 6px 14px #121d2633;
}

/* A seta é afordância, não enfeite: diz que o botão leva a algum lugar. Anda um
   passo à frente no hover. */
.sim-btn-seta {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s ease;
}

.sim-btn-xl:hover .sim-btn-seta {
  transform: translateX(3px);
}

@media screen and (min-width: 600px) {
  .sim-btn-xl {
    padding-inline: 32px;
    font-size: var(--cc-body-lg);
  }
}

/* Quem pediu menos movimento fica com a cor e o relevo, que são estáticos, e
   sem o sobe-desce. */
@media (prefers-reduced-motion: reduce) {
  .sim-btn-xl:hover,
  .sim-btn-xl:active,
  .sim-btn-xl:hover .sim-btn-seta {
    transform: none;
  }
}

/* ---------- Simulador -------------------------------------------------- */

/* O fundo sangrado da faixa de autoridade estica por `100vw`, e `100vw` inclui
   a barra de rolagem — sobram ~8px além da borda direita real. Quem os contém é
   este `clip`.

   **Tem que ser aqui, e não no `.sim-page`.** No `<body>` o `overflow` propaga
   para o viewport: em vez de conter a sobra, ela virava 8px de rolagem lateral
   de verdade (medido — `scrollLeft` chegava a 8). Num `<main>` o clip é local.

   E é `clip`, não `hidden`: `hidden` criaria contexto de rolagem e quebraria
   `position: sticky` de qualquer coisa que venha a usar aqui dentro. O `clip`
   também permite cortar só um eixo, deixando o vertical intacto. */
.sim-main {
  overflow-x: clip;
  padding: 32px 0 72px;
}

/* Sem fio de gradiente no topo. A separação do card contra o creme da página
   fica na borda a 3,13:1 e na sombra em três camadas. */
.sim-card {
  position: relative;
  overflow: hidden;
  background-color: var(--cc-offwhite);
  border: 1px solid var(--cc-borda-campo);
  border-radius: var(--cc-r-xl);
  box-shadow: var(--sim-sombra);
  padding: 32px 22px;
  max-width: var(--sim-col-ferramenta);
  margin: 0 auto;
}

/* Progresso */

.sim-progress {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 8px;
}

/* Mesmo padrão da trilha do formulário de /vender-consorcio: número do passo
   mais rótulo, centralizados sob o risco. Verde para etapa não alcançada, azul
   capital para atual e concluída.

   O número vem do `data-step` que o JS já usa para marcar estado, então não
   precisa de markup novo. */
.sim-progress li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--cc-body-sm);
  line-height: 1.5;
  text-transform: lowercase;
  color: var(--cc-ink-65);
  font-weight: var(--cc-w-apoio);
  padding-top: 12px;
  border-top: 4px solid var(--cc-verde);
  transition: color .15s ease, border-color .15s ease;
}

/* Não alcançada: contorno, sem preenchimento. O peso visual do círculo cheio
   fica reservado para onde a pessoa já esteve. */
.sim-progress li:before {
  content: attr(data-step);
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-titulo);
  line-height: 1;
  border: 1.5px solid var(--cc-verde);
  color: var(--cc-ink-65);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.sim-progress li[data-state="current"] {
  color: var(--cc-ink);
  border-top-color: var(--cc-azul);
  font-weight: var(--cc-w-titulo);
}

.sim-progress li[data-state="done"] {
  color: var(--cc-azul);
  border-top-color: var(--cc-azul);
  font-weight: var(--cc-w-apoio);
}

/* Atual e concluída: círculo cheio em azul capital. Número a 7,06:1 sobre ele. */
.sim-progress li[data-state="current"]:before,
.sim-progress li[data-state="done"]:before {
  background-color: var(--cc-azul);
  border-color: var(--cc-azul);
  color: var(--cc-offwhite);
}

/* Etapas */

.sim-step[hidden] {
  display: none;
}

.sim-step-head {
  margin-bottom: 22px;
}

/* "Etapa 1 de 3". A trilha acima já diz a mesma coisa, então este rótulo fica
   como nota de apoio: lowercase, sem tracking, sem caixa alta. */
.sim-step-kicker {
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  line-height: 1.4;
  text-transform: lowercase;
  color: var(--cc-ink-65);
  margin: 0 0 6px;
}

.sim-step-title {
  font-size: var(--cc-h3);
  line-height: 1.3;
  font-weight: var(--cc-w-titulo);
  margin: 0;
}

.sim-step-help {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.5;
  color: var(--cc-ink-70);
  margin: 8px 0 0;
  max-width: 52ch;
}

/* Opções em cartão (radio acessível) */

.sim-options {
  display: grid;
  gap: 12px;
  border: 0;
  margin: 0;
  padding: 0;
}

.sim-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1.5px solid var(--cc-borda-campo);
  border-radius: var(--cc-r-md);
  background-color: var(--cc-offwhite);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.sim-option:hover {
  border-color: var(--cc-azul);
  background-color: var(--cc-verde);
}

.sim-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* Anel do radio em azul a 3:1. O #b9cad8 de antes media 1,68:1 e era a única
   coisa na etapa 1 dizendo onde clicar. */
.sim-option-mark {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 2px solid var(--cc-borda-campo);
  border-radius: 50%;
  position: relative;
  transition: border-color .15s ease;
}

.sim-option-mark:after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background-color: var(--cc-azul);
  transform: scale(0);
  transition: transform .12s ease;
}

.sim-option input:checked ~ .sim-option-body .sim-option-title {
  color: var(--cc-azul);
}

.sim-option:has(input:checked) {
  border-color: var(--cc-azul);
  background-color: var(--cc-verde);
  box-shadow: 0 0 0 3px #35567326;
}

.sim-option:has(input:checked) .sim-option-mark {
  border-color: var(--cc-azul);
}

.sim-option:has(input:checked) .sim-option-mark:after {
  transform: scale(1);
}

.sim-option:has(input:focus-visible) {
  outline: 3px solid var(--cc-azul);
  outline-offset: 3px;
}

.sim-option-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sim-option-title {
  font-size: var(--cc-h4);
  font-weight: var(--cc-w-titulo);
  line-height: 1.4;
  margin: 0;
}

/* Peso 400, não 300: são as faixas de valor que decidem a escolha, e abaixo de
   16px a Light fica frágil demais (exceção documentada no DESIGN.md §3). */
.sim-option-desc {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.5;
  color: var(--cc-ink-70);
  margin: 0;
}

/* O aviso creme entre a parcela e o CTA ("essa é a parcela da tabela oficial,
   fale com um corretor") saiu a pedido do cliente: ele repetia em texto o que o
   próprio botão já promete, e punha uma caixa entre o número e a ação. Com ele
   fora, a leitura é parcela → botão, sem escala no meio. As regras de
   `.sim-notice` foram junto, porque essa era a única marcação que as usava. */

/* Slider de crédito */

.sim-credit-display {
  text-align: center;
  padding: 8px 0 4px;
}

.sim-credit-label {
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  line-height: 1.4;
  text-transform: lowercase;
  color: var(--cc-ink-65);
  margin: 0 0 6px;
}

.sim-credit-value {
  font-size: var(--cc-h2);
  line-height: 1.1;
  font-weight: var(--cc-w-titulo);
  letter-spacing: -.02em;
  color: var(--cc-azul);
  margin: 0;
}

.sim-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.sim-stepper {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--cc-borda-campo);
  background-color: var(--cc-offwhite);
  color: var(--cc-azul);
  font-family: inherit;
  font-size: var(--cc-h3);
  font-weight: var(--cc-w-titulo);
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.sim-stepper:hover:not(:disabled) {
  border-color: var(--cc-azul);
  background-color: var(--cc-verde);
}

.sim-stepper:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.sim-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--sim-border);
  outline: none;
  margin: 0;
  cursor: grab;
}

.sim-slider:active {
  cursor: grabbing;
}

/* Polegar de 44px, o mínimo de alvo de toque. O input tem 8px de altura, então
   não existe padding para compensar um polegar menor. */
.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--cc-offwhite);
  border: 12px solid var(--cc-azul);
  box-shadow: 0 4px 14px #121d2633;
  cursor: grab;
}

.sim-slider::-moz-range-thumb {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: var(--cc-offwhite);
  border: 12px solid var(--cc-azul);
  box-shadow: 0 4px 14px #121d2633;
  cursor: grab;
}

.sim-slider-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink-70);
}

/* Mobile-first: empilhado em largura cheia. Em telas estreitas dois botões
   lado a lado quebram o texto em várias linhas e viram pílulas deformadas. */
.sim-step-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.sim-step-actions .sim-btn {
  width: 100%;
}

/* ---------- Resultado -------------------------------------------------- */

.sim-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--cc-amarelo);
  color: var(--cc-ink);
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  line-height: 1.4;
  padding: 7px 16px;
  border-radius: 999px;
  margin: 0 0 18px;
}

/* ---------- O crédito e a parcela são um objeto só ----------------------
   Primeira tentativa foi manter os dois na superfície do card e ligá-los por
   uma seta. Não segurou: o crédito continuava flutuando no off-white e a
   parcela era uma caixa à parte, então liam como "um rótulo, depois um bloco".

   Agora os dois dividem a mesma peça escura. O topo é `--cc-ink` chapado com o
   crédito; a base é o `--cc-grad-escuro` com a parcela. Não há emenda visível
   porque o gradiente oficial **começa exatamente em `#121d26`** no canto
   superior esquerdo — o mesmo ink do topo —, então a peça inteira lê como uma
   superfície que vai clareando em direção à resposta.

   O que separa as duas metades é um fio e a seta, agora em off-white sobre o
   escuro. Cantos: 32px em cima na categoria, 32px embaixo no bloco da parcela,
   zero no meio. A sombra fica só no bloco de baixo, que é onde ela cai.
   ----------------------------------------------------------------------- */
.sim-result-category {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.5;
  color: #f7f5f0bf;
  background-color: var(--cc-ink);
  border-radius: var(--cc-r-xl) var(--cc-r-xl) 0 0;
  padding: 22px 26px 0;
  margin: 0;
}

/* **O crédito sobe um degrau, de `--cc-h3` para `--cc-h2`.** Em 375px ele media
   20px contra os 36px da parcela e o cliente leu como pequeno demais para o
   número que é. Agora são 28px no celular e 36px no desktop.

   A parcela continua à frente (36 contra 28 no celular), e é de propósito: ela
   é a resposta da página. O que mudou é que os dois deixaram de ser dois
   números soltos e passaram a ser um par — quem faz isso é o conector abaixo. */
.sim-result-credit {
  font-size: var(--cc-h2);
  line-height: 1.2;
  font-weight: var(--cc-w-titulo);
  color: var(--cc-offwhite);
  background-color: var(--cc-ink);
  padding: 2px 26px 20px;
  margin: 0;
}

/* Conector entre o crédito e a parcela. Pedido do cliente: "colocar algo que
   simbolize que os 300 mil são só 1.053 ao mês". A relação já existia na tela,
   só não estava desenhada — os dois números eram parágrafos vizinhos separados
   por 24px de nada.

   Sem texto novo. A seta dá a direção, e o respiro apertado dos dois lados faz
   crédito, conector e parcela lerem como um gesto só. */
.sim-result-conector {
  display: flex;
  justify-content: center;
  background-color: var(--cc-ink);
  /* Fio deliberadamente discreto (2,6:1). Mais forte que isso e a peça volta a
     ler como dois objetos, que é justamente o que se estava desfazendo — quem
     diz "uma coisa vira a outra" é a seta, não o fio. */
  border-top: 1px solid #f7f5f04d;
  padding: 10px 26px 4px;
  margin: 0;
}

/* Em off-white agora, porque a seta passou a viver sobre o escuro. Amarelo aqui
   competiria com o rótulo da parcela logo abaixo, que é o amarelo da peça. */
.sim-result-conector svg {
  width: 20px;
  height: 24px;
  fill: none;
  stroke: #f7f5f0a6;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bloco do preço: gradiente oficial escuro, no mesmo material do hero e do
   rodapé. O anterior era inventado, a 150°. */
.sim-highlight {
  background: var(--cc-grad-escuro);
  color: var(--cc-offwhite);
  border-radius: 0 0 var(--cc-r-xl) var(--cc-r-xl);
  padding: 18px 26px 26px;
  margin: 0 0 22px;
  box-shadow: 0 12px 32px #121d2626;
}

/* Amarelo sobre o gradiente escuro: 11,1:1. O azul-Porto de antes caía a
   3,09:1 no lado claro do gradiente e era a única falha real de contraste de
   texto da página. */
.sim-highlight-label {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.5;
  text-transform: lowercase;
  color: var(--cc-amarelo);
  margin: 0 0 8px;
}

.sim-highlight-value {
  font-size: var(--cc-display);
  line-height: 1.05;
  font-weight: var(--cc-w-titulo);
  letter-spacing: -.02em;
  margin: 0;
}

.sim-highlight-value small {
  font-size: var(--cc-body);
  font-weight: var(--cc-w-corpo);
  letter-spacing: 0;
}

.sim-highlight-from {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.5;
  color: #f7f5f0cc;
  margin: 0 0 2px;
}

.sim-highlight-sub {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.55;
  color: #f7f5f0e6;
  margin: 12px 0 0;
}

/* Especificações do plano */

/* As linhas divisórias vêm de um box-shadow em cada célula, não do fundo do
   container. Assim, quando uma linha está oculta (ex.: "Lance fixo" em
   automóvel) a área sobrando fica na cor do card em vez de virar um bloco
   chapado. */
.sim-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--cc-offwhite);
  border: 1px solid var(--cc-borda-campo);
  border-radius: var(--cc-r-md);
  overflow: hidden;
  margin: 0 0 24px;
}

.sim-spec {
  background-color: var(--cc-offwhite);
  box-shadow: 0 0 0 1px var(--cc-borda-campo);
  padding: 14px 16px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 12px;
}

.sim-spec dt {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.5;
  color: var(--cc-ink-70);
  margin: 0;
}

.sim-spec-value {
  font-size: var(--cc-h4);
  line-height: 1.4;
  font-weight: var(--cc-w-titulo);
  margin: 0;
  text-align: right;
  color: var(--cc-ink);
  grid-column: 2;
  grid-row: 1;
}

.sim-spec-term {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Botão "i" que abre a explicação do termo. 28px porque a WCAG 2.5.8 pede 24
   como mínimo de alvo, e os 19px de antes ficavam abaixo disso em cinco
   instâncias. */
.sim-info {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1.5px solid var(--cc-borda-campo);
  border-radius: 50%;
  background-color: var(--cc-offwhite);
  color: var(--cc-azul);
  font-family: inherit;
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-titulo);
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.sim-info:hover,
.sim-info[aria-expanded="true"] {
  border-color: var(--cc-azul);
  background-color: var(--cc-azul);
  color: var(--cc-offwhite);
}

/* Explicação ocupa uma linha própria de largura cheia — em telas estreitas ela
   ficaria comprimida se dividisse a linha com o valor. Sem faixa lateral: a
   distinção vem da superfície creme e da borda inteira. */
.sim-spec-info {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.55;
  color: var(--cc-ink);
  margin: 10px 0 0;
  padding: 12px 14px;
  background-color: var(--cc-creme);
  border: 1px solid var(--cc-borda-campo);
  border-radius: var(--cc-r-sm);
  text-align: left;
}

/* CTA principal, logo abaixo do card de valor */

/* O respiro de cima separa o botão da peça da parcela — antes havia um aviso
   creme entre os dois, que saiu. A margem tem que sobrar para a sombra: o botão
   projeta 28px de sombra difusa e sobe 2px no hover, e sem folga isso encosta
   no bloco de cima. */
.sim-primary-cta {
  margin: 28px 0 26px;
}

.sim-primary-cta-hint {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.5;
  color: var(--cc-ink-70);
  text-align: center;
  margin: 12px auto 0;
  max-width: 52ch;
  text-wrap: pretty;
}

/* ---------- Formulário ------------------------------------------------- */

.sim-form[hidden] {
  display: none;
}

/* Sem contorno: a caixa se separa do card pela superfície creme e pela sombra.
   O fio azul de 1,5px que existia aqui puxava o olho para a borda em vez do
   conteúdo. */
.sim-form {
  display: grid;
  gap: 18px;
  margin: 0 0 26px;
  padding: 24px;
  border-radius: var(--cc-r-lg);
  background-color: var(--cc-creme);
  box-shadow: 0 1px 2px #121d260a, 0 10px 24px #121d2614;
}

.sim-form-title {
  font-size: var(--cc-h3);
  line-height: 1.3;
  font-weight: var(--cc-w-titulo);
  margin: 0;
  color: var(--cc-ink);
}

.sim-field {
  display: grid;
  gap: 6px;
}

.sim-field label {
  font-size: var(--cc-h4);
  font-weight: var(--cc-w-titulo);
  line-height: 1.4;
}

/* Poço do campo em verde, clareando para off-white ao focar, com o limite a
   3,13:1. Antes a borda media 1,25:1 sobre o card: não se via onde digitar. */
.sim-field input[type="text"],
.sim-field input[type="email"],
.sim-field input[type="tel"] {
  font-family: inherit;
  font-size: var(--cc-body);
  font-weight: var(--cc-w-apoio);
  line-height: 1.5;
  min-height: 52px;
  padding: 13px 16px;
  border: 1.5px solid var(--cc-borda-campo);
  border-radius: var(--cc-r-sm);
  background-color: var(--cc-verde);
  color: var(--cc-ink);
  width: 100%;
  transition: border-color .15s ease, background-color .15s ease;
}

.sim-field input:focus {
  border-color: var(--cc-azul);
  background-color: var(--cc-offwhite);
}

/* Placeholder declarado, não herdado do navegador: a regra do manual vale
   também para ele, 4,5:1, e o cinza default do Chromium passava por 0,11. */
.sim-field input::placeholder {
  color: var(--cc-ink-70);
  opacity: 1;
}

.sim-field input[aria-invalid="true"] {
  border-color: var(--cc-erro);
  background-color: #c0392b14;
}

/* `min-height` reservado: sem isso o campo saltava 19px no instante em que a
   mensagem aparecia, movendo o layout embaixo de quem está sendo corrigido. */
.sim-error {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.5;
  color: var(--cc-erro);
  min-height: 1.3em;
  margin: 0;
}

.sim-form-privacy {
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  line-height: 1.5;
  color: var(--cc-ink-70);
  margin: 0;
}

.sim-form-privacy a {
  color: var(--cc-azul);
  font-weight: var(--cc-w-titulo);
}

.sim-form-feedback {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.55;
  margin: 0;
}

.sim-form-feedback[data-state="error"] {
  color: var(--cc-erro);
}

/* Sucesso em azul capital, que já é a cor de "concluído" na trilha de etapas.
   O verde anterior não pertence ao manual. */
.sim-form-feedback[data-state="success"] {
  color: var(--cc-azul);
  font-weight: var(--cc-w-titulo);
}

/* ---------- Avisos obrigatórios ---------------------------------------- */

/* Terceira superfície: verde. Creme e off-white têm luminância praticamente
   idêntica (razão 1,000:1), então uma seção em off-white sobre o creme da
   página simplesmente não existiria na tela. */
/* **Sem a porta.** Ela ficava aqui em escala grande, cortada pela borda
   direita, desde o passe de 27/08 — quando esta era a última caixa da página e
   o gráfico aparecia uma vez só. O banner final, que veio depois com a LP, usa
   a mesma porta cortada do mesmo jeito, e as duas caixas ficaram encostadas:
   o mesmo gesto duas vezes seguidas deixa de ser assinatura e vira padrão.
   O banner fica com ela; aqui a superfície verde já separa a caixa sozinha. */
.sim-legal {
  max-width: var(--sim-col-lista);
  margin: 32px auto 0;
  padding: 26px;
  background-color: var(--cc-verde);
  border-radius: var(--cc-r-lg);
}

.sim-legal h2 {
  font-size: var(--cc-h3);
  line-height: 1.3;
  font-weight: var(--cc-w-titulo);
  margin: 0 0 14px;
  color: var(--cc-ink);
}

.sim-legal ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  max-width: 52ch;
}

.sim-legal li {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: 1.6;
  color: var(--cc-ink);
  text-wrap: pretty;
}

/* ---------- Campanha encerrada ----------------------------------------- */

.sim-expired {
  text-align: center;
}

.sim-expired h2 {
  font-size: var(--cc-h2);
  line-height: 1.2;
  font-weight: var(--cc-w-titulo);
  margin: 0 0 14px;
}

.sim-expired p {
  font-size: var(--cc-body);
  font-weight: var(--cc-w-corpo);
  line-height: 1.6;
  color: var(--cc-ink-70);
  margin: 0 auto 20px;
  max-width: 52ch;
  text-wrap: pretty;
}

/* ---------- Footer ----------------------------------------------------- */

/* Mesmo rodapé de /vender-consorcio: gradiente oficial invertido, conteúdo
   centralizado, fechando a página com a mesma matéria do hero. */
.sim-footer {
  background-color: var(--cc-ink);
  background-image: linear-gradient(135deg, #355673 0%, #121d26 100%);
  padding: 40px 0;
  text-align: center;
}

.sim-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sim-footer p {
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  line-height: 1.6;
  color: #f7f5f0cc;
  margin: 0 auto;
  max-width: 50ch;
}

/* Os links do rodapé tinham 17px de altura, em linha, separados por "·".
   O texto continua em 13px; o alvo vira 44px. */
.sim-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  color: var(--cc-offwhite);
  font-weight: var(--cc-w-apoio);
}

.sim-footer-brands {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* O logo da Porto no rodapé vinha com `style="height:22px"` no HTML. */
.sim-footer-brands .sim-logo-porto {
  height: 22px;
}

/* ---------- Breakpoints ------------------------------------------------ */

@media screen and (min-width: 600px) {
  .sim-promo {
    padding: 104px 0 56px;
  }

  .sim-card {
    padding: 40px 34px;
  }

  .sim-form {
    padding: 28px;
  }

  .sim-specs {
    grid-template-columns: 1fr 1fr;
  }

  .sim-highlight {
    padding: 32px;
  }

  .sim-step-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sim-step-actions .sim-btn {
    flex: 0 1 auto;
    width: auto;
  }
}

/* Ritmo vertical: as seções não repetem o mesmo respiro. */
@media screen and (min-width: 992px) {
  .sim-main {
    padding: 40px 0 88px;
  }

  .sim-legal {
    margin-top: 40px;
    padding: 32px 34px;
  }
}

/* ---------- Movimento --------------------------------------------------------

   Mesmo vocabulário de /vender-consorcio, para as duas páginas se moverem
   igual: dois gestos e uma curva.

     cc-entrar — opacidade mais 12px de subida. Tudo que aparece usa esta.
     cc-montar — mais curso, 28px e escala leve. Só a entrada da primeira tela.
     cc-surgir — opacidade mais escala de .96. Só o bloco do valor.

   Nada aqui anima largura, altura, `top` ou `margin`: só `opacity` e
   `transform`, que o compositor resolve sem recalcular layout. É o que mantém a
   animação barata num celular fraco, que é o aparelho de boa parte deste
   tráfego.
   -------------------------------------------------------------------------- */

.sim-page {
  --cc-curva: cubic-bezier(.22, .7, .28, 1);
}

@keyframes cc-entrar {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cc-montar {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes cc-surgir {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* --- Troca de etapa -------------------------------------------------------
   Toda etapa desta página aparece pela remoção do atributo `hidden`. O
   `:not([hidden])` já é o gancho, então a animação dispara sozinha no primeiro
   quadro em que o elemento volta a renderizar, sem precisar de linha nova no
   `js/simulador-consorcio.js`.

   Só entrada, nunca saída. Saída exigiria segurar o elemento no DOM depois de
   escondido, e isso atrasaria a leitura de quem está esperando um número. */
.sim-step:not([hidden]),
#sim-expired:not([hidden]) {
  animation: cc-entrar .38s var(--cc-curva) both;
}

/* O valor por último.
   A escada é curta de propósito, 100ms e 300ms, então o olho lê como um gesto
   só e não como três coisas separadas. O que ela compra é a ordem: o bloco
   assenta, depois o número chega, depois o convite. Numa página cujo produto é
   esse número, ele é a única coisa que merece ser a última a aparecer.

   **A peça do valor deixou de usar `cc-surgir`.** Ela era um elemento só e
   podia escalar de .96; agora são quatro empilhados (categoria, crédito,
   conector, parcela) e cada um escalaria em torno do próprio centro, abrindo
   frestas entre eles no meio da animação. `cc-entrar` só translada, e
   translação uniforme mantém a pilha inteira. Mesma duração e mesmo atraso nos
   quatro, senão a peça entra em pedaços. */
#sim-step-3:not([hidden]) .sim-result-category,
#sim-step-3:not([hidden]) .sim-result-credit,
#sim-step-3:not([hidden]) .sim-result-conector,
#sim-step-3:not([hidden]) .sim-highlight {
  animation: cc-entrar .5s var(--cc-curva) .1s both;
}

/* O CTA herdou o tempo do aviso que saía antes dele: com a caixa creme fora, os
   .34s deixavam um buraco entre a parcela e o botão. Em .26s a sequência volta a
   ser contínua — a peça do valor assenta e o convite chega logo atrás. */
#sim-step-3:not([hidden]) .sim-primary-cta {
  animation: cc-entrar .45s var(--cc-curva) .26s both;
}

/* O formulário só existe depois do clique, então tem entrada própria. */
.sim-form:not([hidden]) {
  animation: cc-entrar .42s var(--cc-curva) both;
}

.sim-form:not([hidden]) .sim-field:nth-of-type(1) { animation: cc-entrar .4s var(--cc-curva) .08s both; }
.sim-form:not([hidden]) .sim-field:nth-of-type(2) { animation: cc-entrar .4s var(--cc-curva) .13s both; }
.sim-form:not([hidden]) .sim-field:nth-of-type(3) { animation: cc-entrar .4s var(--cc-curva) .18s both; }
.sim-form:not([hidden]) #sim-submit { animation: cc-entrar .4s var(--cc-curva) .24s both; }

/* A trilha muda de estado por atributo; sem transição o marcador pula. */
.sim-progress li,
.sim-progress li:before {
  transition: color .25s var(--cc-curva),
              background-color .25s var(--cc-curva),
              border-color .25s var(--cc-curva);
}

/* --- Entrada da primeira tela --------------------------------------------
   Hero e card nascem em tela: não há rolagem para disparar nada, então aqui é
   animação de carregamento em CSS puro, escalonada por `animation-delay`.

   A escada inteira fecha em ~0,54s. Se ficar longa ou curta, os delays estão
   todos aqui. O h1 e o número do hero não têm atraso: um deles é o provável
   LCP, e atrasar o LCP por estética é trocar métrica real por enfeite. */
.sim-promo-kicker        { animation: cc-montar .45s var(--cc-curva) 0s both; }
.sim-promo-title         { animation: cc-montar .5s var(--cc-curva) 0s both; }
.sim-promo-headline      { animation: cc-montar .5s var(--cc-curva) 0s both; }

.sim-card                { animation: cc-montar .5s var(--cc-curva) .14s both; }
.sim-progress            { animation: cc-montar .4s var(--cc-curva) .24s both; }
#sim-step-1 .sim-step-head { animation: cc-montar .4s var(--cc-curva) .26s both; }

#sim-step-1 .sim-option:nth-of-type(1) { animation: cc-montar .4s var(--cc-curva) .3s both; }
#sim-step-1 .sim-option:nth-of-type(2) { animation: cc-montar .4s var(--cc-curva) .35s both; }
#sim-step-1 .sim-option:nth-of-type(3) { animation: cc-montar .4s var(--cc-curva) .4s both; }

/* A etapa 1 já tem a animação do próprio card; anular aqui evita o gesto duplo
   no primeiro carregamento. */
#sim-step-1:not([hidden]) {
  animation: none;
}

/* ==========================================================================
   Seções da LP — briefing RM Digital (autoridade, passos, benefícios, oferta,
   contemplação, comparativo, depoimentos, FAQ e CTA final).

   Tudo na mesma coluna de 760px do card do simulador, para a página descer
   como uma coisa só. O que é campanha carrega `data-campanha` no HTML e sai
   da tela quando a validade passa (js/lp-simulador.js).
   ========================================================================== */

.sim-secao {
  max-width: var(--sim-col-lista);
  margin: 56px auto 0;
}

/* As duas seções de prosa corrida ficam na coluna de leitura. */
.sim-oferta,
.sim-faq {
  max-width: var(--sim-col-leitura);
}

/* Os depoimentos vão à largura cheia do shell: três thumbnails de 480px ganham
   em deixar de ser ampliados. */
.sim-dep {
  max-width: none;
}

/* Ritmo. Espaçamento uniforme em tudo achata a hierarquia (DESIGN.md §8, mesma
   razão pela qual a irmã recebeu 56/64 — 80/72 — 64/64 — 88/96). As duas
   seções que carregam o argumento — a oferta explicada e o FAQ — recebem mais
   ar que as seções de lista, e o CTA final fecha com o maior respiro. */
.sim-oferta,
.sim-faq {
  margin-top: 80px;
}

.sim-secao-titulo {
  font-size: var(--cc-h2);
  font-weight: var(--cc-w-titulo);
  line-height: 1.15;
  margin: 0 0 20px;
}

/* CTA repetido entre seções: leva de volta ao simulador, que é a conversão. */
.sim-cta-meio {
  margin: 26px 0 0;
  text-align: center;
}

/* O anchor #simulador é alvo de vários CTAs; um respiro para o card não colar
   no topo da janela quando a página pula até ele. */
#simulador {
  scroll-margin-top: 16px;
}

/* "A partir de" nos cards de objetivo. Valores da própria tabela de planos,
   os mesmos que o resultado mostra; o span carrega data-campanha porque a
   parcela reduzida é linguagem da campanha. */
.sim-option-preco {
  display: block;
  margin-top: 4px;
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-azul);
}

/* ---------- Prova de autoridade ---------- */

/* **Faixa, e não pílulas.** As pílulas off-white sobre o verde mediam 1,17:1 e
   mal se descolavam do fundo, e as cinco afirmações têm comprimentos muito
   diferentes, então em linha elas nunca fechavam uma barra (medido: 2/1/1/1 em
   1280 e 1 + 4 em 375). Agora é uma faixa só, na largura cheia do shell, com o
   ícone ancorando cada coluna e o `<strong>` no papel de rótulo escaneável.

   O `<strong>` e o texto que vem depois dele são itens de grid separados — o
   texto solto vira item anônimo, que é comportamento de especificação. É o que
   permite empilhar rótulo e descrição sem acrescentar `<span>` ao HTML. */
/* **Largura total da página — mas só o fundo sangra.**
   A caixa continua na régua do shell, na mesma coluna de 1000px das outras
   seções, e quem vai até a borda da janela é o `::before`.

   Por que não esticar a caixa: `100vw` inclui a barra de rolagem e nenhuma
   unidade CSS sabe descontá-la, então a caixa esticada nascia ~7px à esquerda
   do zero. Medido a 768px, isso deixava o conteúdo com 13px de respiro de um
   lado e 20px do outro. Sangrando só o fundo, esses 7px caem numa aresta de cor
   chapada, onde ninguém vê, e o conteúdo alinha exatamente com o resto da
   página (verificado: faixa e seções ambas em x=293 a 1600px).

   `transform: translateX(-50%)` também está fora: a faixa entra na revelação
   por rolagem, que já usa `transform`. */
.sim-confia {
  position: relative;
  isolation: isolate;
  max-width: var(--sim-col-lista);
  margin: 40px auto 0;
}

.sim-confia:before {
  content: "";
  position: absolute;
  inset: 0 calc((100% - 100vw) / 2);
  z-index: -1;
  background-color: var(--cc-verde);
}

.sim-confia-lista {
  list-style: none;
  margin: 0;
  padding: 24px 0;
  display: grid;
  gap: 20px 16px;
}

.sim-confia-lista li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 2px 12px;
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink-70);
}

.sim-confia-lista svg {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--cc-azul);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sim-confia-lista strong {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-titulo);
  color: var(--cc-ink);
}

@media screen and (min-width: 600px) {
  .sim-confia-lista {
    grid-template-columns: 1fr 1fr;
  }
}

/* Cinco colunas: o ícone sobe para cima do rótulo, senão sobram ~159px para a
   descrição e as duas afirmações longas quebram em três linhas. */
@media screen and (min-width: 900px) {
  .sim-confia-lista {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px 28px;
    padding: 30px 0;
  }

  .sim-confia-lista li {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .sim-confia-lista svg {
    grid-row: auto;
  }
}

/* ---------- Como funciona (3 passos) ---------- */

/* **Sem card, e em coluna única.** Caixas idênticas com número + título +
   texto são a forma literal do padrão banido, e o §8 registra ter desfeito
   exatamente isso na irmã em 26/08. Em 3 colunas dentro dos 760px a descrição
   media 27 caracteres por linha — menos da metade do piso de 65. Agora o
   círculo azul é a única marca do passo e a prosa corre na medida. */
.sim-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
}

/* Duas colunas na largura de lista, e o passo 3 atravessando as duas. Não é
   sobra de grade: o passo 3 é o desfecho ("entre no grupo e concorra à
   contemplação"), então ele ganhar a linha inteira é ênfase, não raggedness.
   Coluna única em 1000px deixaria 436px vazios à direita do cap de prosa; três
   colunas derrubariam a medida para 44 caracteres. Assim ficam 58, contra os 27
   de quando os passos eram cards. */
@media screen and (min-width: 900px) {
  .sim-passos {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
  }

  .sim-passo:last-child {
    grid-column: 1 / -1;
  }
}

.sim-passo {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
}

.sim-passo-num {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--cc-azul);
  color: var(--cc-offwhite);
  font-weight: var(--cc-w-titulo);
}

.sim-passo h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--cc-h3);
  font-weight: var(--cc-w-titulo);
  margin: 0;
}

/* **32rem, e não `ch`.** O §3 avisa que `ch` não é caractere; o que ele não
   dizia é que a razão varia com o texto. Medido nesta página: 52ch entregou 82
   caracteres reais aqui e 76 na seção da oferta — razão de 1,46 a 1,58, não os
   1,35 registrados. 32rem (512px) põe as duas na faixa de 65-75. Ao mexer
   nestes caps, conte caracteres no navegador; não confie no `ch`. */
.sim-passo p {
  grid-column: 2;
  grid-row: 2;
  max-width: 32rem;
  margin: 0;
  color: var(--cc-ink-70);
  text-wrap: pretty;
}

/* ---------- Benefícios ---------- */

.sim-beneficios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.sim-beneficio {
  background-color: var(--cc-offwhite);
  border: 1px solid var(--cc-borda-campo);
  border-radius: var(--cc-r-md);
  padding: 18px 20px;
}

/* `--cc-h3`, e não `--cc-h4`. Em 16px/900 o título ficava do mesmo tamanho do
   corpo que ele titula, e lia como entrada em negrito. Agora é a mesma escala
   dos outros títulos de card da página — seções irmãs, um degrau só. */
.sim-beneficio h3 {
  font-size: var(--cc-h3);
  font-weight: var(--cc-w-titulo);
  margin: 0 0 4px;
}

.sim-beneficio p {
  margin: 0;
  color: var(--cc-ink-70);
  text-wrap: pretty;
}

/* ---------- A oferta em detalhe ---------- */

/* A explicação honesta de como a redução funciona é a passagem mais importante
   da página, e corria a 97 caracteres por linha nos 760px da coluna. */
.sim-oferta-texto p {
  max-width: 32rem;
  margin: 0 0 12px;
  text-wrap: pretty;
}

/* O "sem pegadinha" é a frase que a seção existe para dizer, então ela é o
   único trecho com fundo próprio. Em verde, não no gradiente quente: o §2 diz
   que o amarelo é cor de ação e destaque, **não de superfície ampla**, e o §8
   registra ter revertido essa mesma colisão na irmã em 26/08 — aqui ela
   voltava a acontecer a ~350px de um botão amarelo. */
.sim-oferta-nota {
  display: block;
  max-width: calc(32rem + 44px); /* 32rem de texto + os 22px de cada lado */
  margin-top: 20px;
  padding: 18px 22px;
  background-color: var(--cc-verde);
  border-radius: var(--cc-r-md);
}

/* ---------- Formas de contemplação ---------- */

/* **Sem card.** As três formas de contemplação são uma taxonomia — um termo e
   a explicação dele — e não três objetos comparáveis. Em caixas verdes elas
   pediam a mesma leitura dos benefícios logo acima, e o verde chapado três
   vezes seguidas pesava. Viram linhas separadas por fio, com o termo à
   esquerda: forma de glossário, que é o que o conteúdo é.

   O fio atravessa a largura inteira da seção enquanto a prosa fica no cap de
   32rem. É o fio que ocupa o espaço à direita, então a sobra lê como respiro e
   não como caixa mal preenchida.

   (A classe ainda se chama `-card` por herança do HTML; renomear custaria três
   toques no markup sem ganho.) */
.sim-contempla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--cc-borda-campo);
}

.sim-contempla-card {
  display: grid;
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--cc-borda-campo);
}

.sim-contempla-card h3 {
  font-size: var(--cc-h3);
  font-weight: var(--cc-w-titulo);
  color: var(--cc-azul);
  margin: 0;
}

.sim-contempla-card p {
  max-width: 32rem;
  margin: 0;
  color: var(--cc-ink-70);
  text-wrap: pretty;
}

@media screen and (min-width: 600px) {
  .sim-contempla-card {
    grid-template-columns: 220px minmax(0, 32rem);
    gap: 0 32px;
    padding: 26px 0;
  }
}

/* ---------- Comparativo ---------- */

/* A tabela rola dentro da própria moldura no celular; a página nunca ganha
   rolagem lateral por causa dela. */
.sim-compara-scroll {
  overflow-x: auto;
  background-color: var(--cc-offwhite);
  border: 1px solid var(--cc-borda-campo);
  border-radius: var(--cc-r-md);
}

.sim-compara {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--cc-body-sm);
}

.sim-compara th,
.sim-compara td {
  text-align: left;
  padding: 15px 18px;
  vertical-align: top;
}

/* **O cabeçalho carrega a tabela.** Antes ela era off-white sobre off-white com
   um fio de 1px separando as linhas, e lia apagada: nada dizia onde começava,
   qual coluna era a nossa, nem o que era rótulo e o que era resposta. O
   cabeçalho em azul dá o topo, a coluna do consórcio em verde diz qual é a
   nossa, e o financiamento recua para o ink a 70%. */
.sim-compara thead th {
  background-color: var(--cc-azul);
  color: var(--cc-offwhite);
  font-size: var(--cc-h4);
  font-weight: var(--cc-w-titulo);
  white-space: nowrap;
}

.sim-compara tbody th {
  font-weight: var(--cc-w-titulo);
  color: var(--cc-ink);
  white-space: nowrap;
}

/* Fio por célula e não por linha: a coluna verde tem fundo próprio e cobriria
   um `border-top` declarado no `<tr>`. */
.sim-compara tbody tr + tr th,
.sim-compara tbody tr + tr td {
  border-top: 1px solid var(--cc-borda-campo);
}

/* A coluna do consórcio é a nossa: verde descendo a tabela inteira, para o olho
   pousar nela antes da outra. */
.sim-compara tbody td:first-of-type {
  background-color: var(--cc-verde);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink);
}

/* A do financiamento recua. Mesma informação, menos peso — e a concessão da
   última linha ("quem precisa do bem imediatamente") continua legível. */
.sim-compara tbody td:last-of-type {
  color: var(--cc-ink-70);
}

/* ---------- Comparativo em cards, no celular ----------------------------
   Abaixo de 600px a tabela não cabe: 560px de largura mínima numa casca de
   335px viravam rolagem lateral dentro da moldura, com um polegar só e sem
   nada na tela dizendo que havia mais à direita. Cada linha vira um card.

   **Os dois rótulos de coluna estão escritos aqui, no CSS.** O `<thead>` é
   irmão das linhas, então nenhum seletor consegue trazer o texto dele para
   dentro de cada card. As alternativas eram pôr `data-*` nos `<td>`, que o
   CLAUDE.md congela, ou duplicar as duas strings aqui. Se algum dia
   "Consórcio Porto Bank" ou "Financiamento" mudarem no HTML, **mudam aqui
   também** — e este comentário é o único aviso que existe.

   Custo conhecido: `display: block` em elementos de tabela remove os papéis
   implícitos de tabela, então o `scope="col"` para de associar cabeçalho a
   célula. É o custo padrão desta técnica. O que a compensa é que a informação
   segue completa em ordem linear — critério, "Consórcio Porto Bank" + resposta,
   "Financiamento" + resposta — e o `<thead>` continua na árvore, escondido só
   visualmente.
   Corte em 639px e não em 599: a tabela pede 560px mais os 2px de borda da
   moldura, ou seja 562px de conteúdo, e o shell só entrega isso a partir de
   602px de janela. Em 600px exatos sobravam 2px de rolagem dentro do quadro.
   ----------------------------------------------------------------------- */
@media screen and (max-width: 639px) {
  /* **O quadro continua sendo um só.** A moldura fica no scroller, como no
     desktop, e o que separa um critério do próximo é um fio — não uma caixa por
     linha. Cards soltos picavam a comparação em cinco objetos independentes,
     quando o que ela é é uma lista de critérios lado a lado. */
  .sim-compara-scroll {
    overflow-x: visible;
  }

  .sim-compara {
    min-width: 0;
  }

  .sim-compara,
  .sim-compara tbody,
  .sim-compara tr,
  .sim-compara th,
  .sim-compara td {
    display: block;
  }

  .sim-compara thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sim-compara tbody tr {
    padding: 16px 18px;
  }

  /* A divisão entre um critério e o próximo. */
  .sim-compara tbody tr + tr {
    border-top: 1px solid var(--cc-borda-campo);
  }

  /* O fio por célula é da versão em tabela; aqui ele seria um segundo traço
     logo abaixo do fio da linha. */
  .sim-compara tbody tr + tr th,
  .sim-compara tbody tr + tr td {
    border-top: 0;
  }

  /* O critério vira o título do bloco. */
  .sim-compara tbody th {
    padding: 0 0 10px;
    font-size: var(--cc-h4);
    white-space: normal;
  }

  .sim-compara tbody td {
    padding: 8px 12px;
    border-radius: var(--cc-r-sm);
  }

  .sim-compara tbody td + td {
    margin-top: 6px;
  }

  .sim-compara tbody td:before {
    display: block;
    margin-bottom: 2px;
    font-size: var(--cc-caption);
    font-weight: var(--cc-w-titulo);
    color: var(--cc-azul);
  }

  .sim-compara tbody td:first-of-type:before {
    content: "Consórcio Porto Bank";
  }

  /* A resposta do financiamento não ganha superfície: creme sobre off-white tem
     razão 1,000:1 e a caixa simplesmente não apareceria. A nossa fica com o
     verde que já vem da regra de cima, e o contraste entre as duas é esse. */
  .sim-compara tbody td:last-of-type:before {
    content: "Financiamento";
    color: var(--cc-ink-65);
  }

  .sim-compara tbody td:last-of-type {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---------- Depoimentos ---------- */

.sim-dep-grid {
  display: grid;
  gap: 14px;
}

.sim-dep-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--cc-r-md);
  background-color: var(--cc-ink);
  aspect-ratio: 16 / 9;
}

.sim-dep-video {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.sim-dep-video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sim-dep-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sim-dep-play svg {
  width: 64px;
  height: 64px;
  padding: 16px;
  border-radius: 50%;
  background-color: #121d26b3;
  fill: var(--cc-offwhite);
  transition: background-color .15s ease;
}

.sim-dep-video:hover .sim-dep-play svg,
.sim-dep-video:focus-visible .sim-dep-play svg {
  background-color: var(--cc-azul);
}

/* **O anel de foco sai do botão e passa para o card.** O botão preenche
   exatamente a caixa do `.sim-dep-card`, que é `overflow: hidden`, então o anel
   dele é recortado fora — verificado no navegador: nem forçado com `!important`
   ele renderiza. Sobrava como única pista o círculo de play trocando de
   `#121d26b3` para azul, escuro sobre foto escura, em luminância quase igual.
   O card não é recortado por ninguém, e o anel dele cai sobre o creme da
   página, onde o azul mede 7,06:1. */
.sim-dep-video:focus-visible {
  outline: none;
}

.sim-dep-card:has(.sim-dep-video:focus-visible) {
  outline: 3px solid var(--cc-azul);
  outline-offset: 3px;
}

.sim-dep-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- FAQ ---------- */

.sim-faq-item {
  background-color: var(--cc-offwhite);
  border: 1px solid var(--cc-borda-campo);
  border-radius: var(--cc-r-md);
  margin: 0 0 10px;
}

/* Peso 900, não 400. A exceção documentada do §3 cobre texto **abaixo** de
   16px, e a pergunta está exatamente em 16px. Fica em `--cc-h4` (16px/900) e
   não em `--cc-h3` (20px), que é o que a tabela do §3 mapeia para "pergunta de
   FAQ": lá são ~10 perguntas, aqui são 18, e o documento já está 3× mais alto
   do que estava. `--cc-h4` resolve o peso sem inflar a página. */
.sim-faq-item summary {
  cursor: pointer;
  padding: 15px 20px;
  font-size: var(--cc-h4);
  font-weight: var(--cc-w-titulo);
  line-height: 1.35;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}

/* **O marcador precisa existir sem hover.** O `normalize.css` dá
   `summary { display: block }`, e isso suprime o `::marker` no Chrome — as 18
   linhas ficavam sem nenhum sinal de que abrem. As únicas pistas eram
   `cursor: pointer` e a cor de hover, e nenhuma das duas existe no toque. Mesmo
   marcador da irmã: "+" que vira "−". */
.sim-faq-item summary::-webkit-details-marker {
  display: none;
}

.sim-faq-item summary:after {
  content: "+";
  flex: none;
  font-size: var(--cc-h3);
  font-weight: var(--cc-w-apoio);
  line-height: 1;
  color: var(--cc-azul);
}

.sim-faq-item[open] summary:after {
  content: "−";
}

.sim-faq-item summary:hover {
  color: var(--cc-azul);
}

/* O estado aberto era peso 400 → 900, salto de 500 unidades que requebrava as
   perguntas longas no celular no instante do toque. Agora o peso é constante e
   quem marca o estado é a cor, mais o "−" do marcador. */
.sim-faq-item[open] summary {
  color: var(--cc-azul);
}

.sim-faq-item p {
  max-width: calc(32rem + 40px); /* 32rem de texto + os 20px de cada lado */
  margin: 0;
  padding: 0 20px 16px;
  color: var(--cc-ink-70);
  text-wrap: pretty;
}

/* ---------- CTA final ---------- */

.sim-cta-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Abaixo de 1460px o banner ocupa a largura cheia do shell (até 1100px), que
     já o deixa mais largo que os 1000px das listas. Os 1400px entram no media
     query lá embaixo, onde há janela para eles. */
  width: 100%;
  max-width: none;
  margin: 64px 0 0;
  padding: 40px 24px;
  text-align: center;
  background: var(--cc-grad-escuro);
  border-radius: var(--cc-r-xl);
  color: var(--cc-offwhite);
}

/* A mesma porta do bloco legal, agora em offwhite sobre o gradiente escuro. */
.sim-cta-final:before {
  content: "";
  position: absolute;
  top: -2rem;
  right: -6rem;
  width: 22rem;
  height: calc(100% + 4rem);
  z-index: -1;
  background-image: url("../images/porta-offwhite.svg");
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: .18;
  pointer-events: none;
}

.sim-cta-final .sim-secao-titulo {
  color: var(--cc-offwhite);
  margin-bottom: 10px;
}

.sim-cta-final > p {
  max-width: 520px;
  margin: 0 auto 24px;
  color: #f7f5f0d9;
  text-wrap: pretty;
}

.sim-cta-acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Sobre o gradiente escuro o botão azul sumiria; o WhatsApp vira contorno. */
.sim-cta-final .sim-btn-whats {
  background: none;
  border: 1.5px solid #f7f5f0a6;
  color: var(--cc-offwhite);
}

.sim-cta-final .sim-btn-whats:hover {
  background-color: #f7f5f01a;
  border-color: var(--cc-offwhite);
}

.sim-cta-reforco {
  margin: 20px 0 0;
  font-size: var(--cc-caption);
  color: #f7f5f0b3;
}

/* ---------- Estado: a simulação já foi feita -----------------------------
   As seções da LP foram escritas para quem chega no topo, e não sabiam que
   existe uma máquina de estados acima delas. Depois que a etapa 3 abre, o
   conteúdo logo abaixo do resultado recomeça o discurso ("1 · simule / você vê
   na hora a parcela reduzida") e oferece um botão para refazer o que acabou de
   ser feito. Pior: `.sim-primary-cta`, o único CTA que gera lead no CRM com a
   simulação anexada, aparece uma vez só, enquanto os três âncoras de volta ao
   `#simulador` aparecem em 9.760px de documento.

   Neste estado os CTAs que voltam ao simulador saem e o WhatsApp fica como o
   único caminho adiante.

   `#sim-step-3` é o gancho porque é o próprio JS que remove o `hidden` dele
   quando o resultado renderiza — nada de novo precisou ser marcado no HTML. */
.sim-page:has(#sim-step-3:not([hidden])) .sim-cta-meio,
.sim-page:has(#sim-step-3:not([hidden])) .sim-cta-final .sim-btn-primary {
  display: none;
}

/* O botão do WhatsApp fica sozinho e não muda de forma: o contorno em off-white
   já é a ação mais forte da caixa quando não há um amarelo do lado. Uma versão
   preenchida foi tentada e descartada — o ganho era marginal e exigia disputar
   o shorthand `background` da regra acima, que é o tipo de override que quebra
   silencioso na próxima mexida. */

/* **A porta continua no celular, em escala menor.** Ela era escondida abaixo de
   820px porque, nas medidas do desktop, 22rem de porta atrás de um card de
   335px cobria 76% da caixa e virava mancha em vez de gráfico. O que resolve
   não é esconder, é redimensionar: 13rem com 3rem de recorte deixa a porta na
   metade direita do card, que é recorte de verdade e ainda contém o arco. A
   opacidade cai um pouco porque em caixa pequena o mesmo valor pesa mais sobre
   o texto.

   No celular ela também **muda de âncora**: em vez de correr a altura inteira
   pela direita, assenta no canto inferior direito e sai parcialmente pelas duas
   bordas. Sendo o banner o último objeto antes do bloco legal, o canto de baixo
   é o lugar onde o gráfico fecha a página em vez de disputar com o texto, que
   começa no topo.

   O SVG é 154,3 × 182,35 e o `contain` respeita isso: numa caixa de 17×22rem a
   escala fica limitada pela largura, então a porta renderiza 272 × 321px.

   O corte é 599px e não 819px: a partir de 600px o banner já tem 560px e a
   geometria de desktop ocupa 46% dele, que é recorte e não mancha. */
@media screen and (max-width: 599px) {
  .sim-cta-final:before {
    top: auto;
    bottom: -3rem;
    right: -4rem;
    width: 17rem;
    height: 22rem;
    background-position: right bottom;
    opacity: .16;
  }
}

@media screen and (min-width: 600px) {
  .sim-beneficios {
    grid-template-columns: 1fr 1fr;
  }

  .sim-cta-acoes {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Só os depoimentos vão a três colunas. Os passos correm em lista e as formas
   de contemplação em faixa: em 760px, três colunas deixavam 198px e 200px de
   prosa, ou seja 26-27 caracteres por linha. */
@media screen and (min-width: 820px) {
  .sim-dep-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 992px) {
  .sim-secao {
    margin-top: 64px;
  }

  .sim-oferta,
  .sim-faq {
    margin-top: 104px;
  }

  .sim-cta-final {
    margin-top: 88px;
    padding: 56px 40px;
  }
}

/* **O banner final em 1400px.** Sai da régua do shell por margem negativa,
   calculada só com `%` — `100%` é a largura de conteúdo do shell (1100px), e o
   shell já está centrado na janela, então o banner herda essa centralização
   sem erro nenhum. É o motivo de não haver `100vw` nesta conta: `vw` inclui a
   barra de rolagem e deslocaria a caixa uns 7px, o que num card com cantos
   arredondados se enxerga.

   1460px é onde 1400 + respiro cabe. Abaixo disso o banner fica na largura do
   shell, e a progressão de larguras da página continua de pé. */
@media screen and (min-width: 1460px) {
  .sim-cta-final {
    width: 1400px;
    margin-left: calc((100% - 1400px) / 2);
  }
}

/* --- Revelação por rolagem -----------------------------------------------
   **A rede de segurança é o `.cc-anim` no <html>.** Quem esconde os elementos é
   esta folha, mas só sob essa classe, e quem põe a classe é
   `js/revelar-simulador.js`. Se o script não rodar, falhar ou for bloqueado, a
   classe nunca aparece, estas regras nunca casam e o conteúdo nasce visível. É
   o que impede o pior caso de um reveal por JS, que é a seção ficar invisível
   para sempre.

   O `prefers-reduced-motion` é checado no script, que simplesmente não põe a
   classe.

   Esta lista de seletores é gêmea da que está em `js/revelar-simulador.js`.
   Mexeu numa, mexe na outra.

   O `:where()` zera a especificidade do que está dentro, senão
   `.cc-anim .sim-legal li` ganharia de `.cc-anim .cc-dentro` e o elemento
   receberia a classe continuando invisível. */
.cc-anim :where(
  .sim-legal h2,
  .sim-legal li,
  .sim-secao-titulo,
  .sim-confia-lista li,
  .sim-passo,
  .sim-beneficio,
  .sim-oferta-texto,
  .sim-oferta-nota,
  .sim-contempla-card,
  .sim-compara-scroll,
  .sim-dep-card,
  .sim-faq-item,
  .sim-cta-final
) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--cc-curva),
              transform .55s var(--cc-curva);
}

.cc-anim .cc-dentro {
  opacity: 1;
  transform: none;
}

/* Escalonamento dentro do grupo. 60ms entre irmãos: o suficiente para o olho
   ler como sequência, curto o bastante para não virar espera. */
.cc-anim .sim-legal li:nth-child(2) { transition-delay: .06s; }
.cc-anim .sim-legal li:nth-child(3) { transition-delay: .12s; }
.cc-anim .sim-legal li:nth-child(4) { transition-delay: .18s; }
.cc-anim .sim-legal li:nth-child(5) { transition-delay: .24s; }
.cc-anim .sim-legal li:nth-child(6) { transition-delay: .3s; }
.cc-anim .sim-legal li:nth-child(7) { transition-delay: .36s; }
.cc-anim .sim-legal li:nth-child(8) { transition-delay: .42s; }

.cc-anim :where(.sim-passo, .sim-beneficio, .sim-contempla-card, .sim-dep-card,
  .sim-confia-lista li):nth-child(2) { transition-delay: .06s; }
.cc-anim :where(.sim-passo, .sim-beneficio, .sim-contempla-card, .sim-dep-card,
  .sim-confia-lista li):nth-child(3) { transition-delay: .12s; }
.cc-anim :where(.sim-beneficio, .sim-confia-lista li):nth-child(4) { transition-delay: .18s; }
.cc-anim :where(.sim-beneficio, .sim-confia-lista li):nth-child(5) { transition-delay: .24s; }
.cc-anim :where(.sim-beneficio):nth-child(6) { transition-delay: .3s; }

/* ---------- Movimento reduzido -----------------------------------------------
   Tudo cai para instantâneo. O reveal por rolagem nem começa, porque o script
   não põe a classe. Os dois `scrollIntoView` de `js/simulador-consorcio.js`
   passam por `rolagemSuave()`, que consulta esta mesma preferência: `behavior`
   explícito no JS vence o `scroll-behavior` do CSS, então esse caminho precisa
   ser resolvido lá e não aqui.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sim-page *,
  .sim-page *:before,
  .sim-page *:after {
    animation: none !important;
    transition: none !important;
  }
}