/* =====================================================================
   economia.css — L9 (21/10/2026) + L10 Bloco E (21/10/2026)
   Calculadora "Quanto você economiza com a Ton" (.eco-*), quiz "Qual é a
   sua?" (.quiz-*) e as partes NOVAS do simulador (.sim-cmp = "Quanto você economiza", .sim-pb, .sim-mods,
   .sim-cta-*, .sim-rodape, .sim-parc-nota — a réplica oficial .sim-* continua no
   style.css). Celular primeiro. Só tokens do style.css (CONTRATOS.md); rgba()
   com a base rgb de um token = uso do token.
   Carregar DEPOIS do style.css (usa .btn, .btn-lime, .btn-dark, .btn-white,
   .sr-only, .container, .sec-head).
   ===================================================================== */

/* Tempos da régua do plano L10 que ainda não existiam em --d-* (só este módulo usa; registrar no CONTRATOS.md) */
:root {
  --d-toque: 120ms;      /* feedback de toque (escala 0,98) */
  --d-passo: 250ms;      /* pergunta do quiz entrando / atraso da resposta marcada */
  --d-revela: 400ms;     /* resultado do quiz entrando */
}

/* L11 (fusão, P3 do dono): a calculadora separada (.eco-*) saiu — a conta vive no simulador (.sim-cmp, abaixo). */

/* ============ 2) QUIZ "Qual é a sua?" ============ */
.quiz-mount { margin-top: var(--s-10); }
.quiz-mount:empty { display: none; }
.quiz-slot[hidden], .quiz-teaser[hidden] { display: none; }

.quiz {
  display: grid; gap: var(--s-5);
  max-width: 1280px; margin: 0 auto;   /* = largura da grade de 4 cartões do #modelos */
  padding: var(--s-6) var(--s-5);
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  color: var(--ink-body);
}
.quiz-cab { display: grid; gap: var(--s-2); align-content: start; }
.quiz-chamada { font-size: 14px; font-weight: 700; color: var(--green-dark); }
.quiz-titulo {
  font-family: var(--font-display); font-weight: 400;
  font-size: 30px; line-height: 1.05; color: var(--ink);
  letter-spacing: 0.005em;
}
.quiz-titulo:focus, .quiz-perg:focus, .quiz-res-punch:focus { outline: none; }
.quiz-sub { font-size: 15px; line-height: 1.5; color: var(--ink-mid); text-wrap: pretty; }
.quiz-prog { display: flex; gap: var(--s-1); margin-top: var(--s-2); }
.quiz-prog span {
  flex: 1 1 0; height: 4px;
  background: var(--badge-gray);
  border-radius: var(--r-full);
  transition: background-color var(--d-base) var(--ease-out);
}
.quiz-prog span.is-feito { background: var(--green-deep); }
.quiz-prog span.is-atual { background: var(--green-brand); }

/* Pergunta entra em 250 ms; o resultado, em 400 ms (régua do plano) */
.quiz-corpo { min-width: 0; transition: opacity var(--d-passo) var(--ease-out), transform var(--d-passo) var(--ease-out); }
.quiz-corpo.quiz-corpo--res { transition-duration: var(--d-revela); }
.quiz-corpo.is-entrando { opacity: 0; transform: translateY(8px); transition: none; }
.quiz-conta { font-size: 13px; font-weight: 600; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.quiz-perg { margin: var(--s-1) 0 var(--s-4); font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--ink); text-wrap: balance; }

.quiz-ops { display: grid; gap: var(--s-2); }
.quiz-op {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; min-height: 56px;
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  text-align: left;
  background: var(--bg-0);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out), transform var(--d-toque) var(--ease-out);
}
.quiz-op:hover { border-color: var(--ink); }
.quiz-op:active { transform: scale(0.98); }
.quiz-op.is-escolhida { border-color: var(--green-deep); background: var(--lime-soft); }
.quiz-op-txt { display: grid; gap: 2px; min-width: 0; }
.quiz-op-tit { font-size: 16px; font-weight: 700; line-height: 1.3; }
.quiz-op-sub { font-size: 13px; line-height: 1.4; color: var(--ink-mid); }
.quiz-op svg { flex: none; color: var(--ink-mid); transition: transform var(--d-fast) var(--ease-out); }
.quiz-op:hover svg { transform: translateX(2px); color: var(--ink); }

.quiz-voltar {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 44px; margin-top: var(--s-2); padding: 0 var(--s-2) 0 0;
  font-size: 14px; font-weight: 600; color: var(--ink-mid);
  touch-action: manipulation;
}
.quiz-voltar:hover { color: var(--ink); }

/* --- Resultado (L10, 1.17): identidade → preço → botões → por que ela --- */
.quiz-res { display: grid; gap: var(--s-4); }
.quiz-res-id { display: grid; gap: var(--s-1); }
.quiz-res-lead { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink-mid); text-wrap: pretty; }
.quiz-res-punch {
  font-family: var(--font-display); font-weight: 400;
  font-size: 32px; line-height: 1.08; color: var(--ink);
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.quiz-res-modelo { color: var(--green-dark); white-space: nowrap; }
.quiz-res-tag {
  display: inline-block; position: relative; top: -0.3em;
  margin-left: var(--s-1); padding: 0 var(--s-2);
  font: 700 12px/22px var(--font); letter-spacing: 0; white-space: nowrap;
  color: var(--blue); background: rgba(43, 82, 232, 0.08);
  border-radius: var(--r-full);
}
.quiz-res-linha { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.quiz-res-foto {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-2);
  background: var(--bg-soft);
  border-radius: var(--r-lg);
}
.quiz-res-foto[hidden] { display: none; }
.quiz-res-foto picture { display: block; width: 100%; }
.quiz-res-foto img { width: 100%; height: auto; }
.quiz-res-preco { display: grid; gap: 2px; min-width: 0; }
.quiz-res-de { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.quiz-res-off {
  padding: 2px var(--s-2);
  font-size: 12px; font-weight: 700; line-height: 18px;
  color: var(--green-deep); background: var(--lime-soft);
  border-radius: var(--s-1);
}
.quiz-res-de s { font-size: 13px; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.quiz-res-parc {
  margin-top: 2px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; line-height: 1.1; color: var(--green-dark);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.quiz-res-vista { font-size: 13px; line-height: 1.4; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.quiz-res-acao { display: grid; gap: var(--s-2); }
.quiz-res-btns { display: grid; gap: var(--s-2); }
.quiz-res-btns .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
.quiz-res-cta { font-weight: 800; }
.quiz-res-seguro {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; color: var(--ink-mid);
}
.quiz-res-seguro svg { flex: none; color: var(--green-brand); }
.quiz-res-ajuda {
  justify-self: center;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-2);
  font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; color: var(--ink-mid);
  text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px;
  touch-action: manipulation;
  transition: color var(--d-fast) var(--ease-out), text-decoration-color var(--d-fast) var(--ease-out);
}
.quiz-res-ajuda[hidden] { display: none; }
.quiz-res-ajuda svg { flex: none; color: var(--green-brand); }
.quiz-res-ajuda:hover { color: var(--ink); text-decoration-color: currentColor; }
.quiz-res-motivos { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--border-soft); }
.quiz-res-porque-tit { font-size: 13px; font-weight: 700; color: var(--ink); }
.quiz-res-porque { display: grid; gap: var(--s-2); }
.quiz-res-porque li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: 14px; line-height: 1.4; color: var(--ink-body); }
.quiz-res-porque svg { flex: none; margin-top: 2px; color: var(--green-brand); }
.quiz-res-pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); }
.quiz-res-pe .quiz-voltar { margin-top: 0; }

/* Cartão do modelo indicado, na grade do #modelos */
.modelo-card.quiz-escolhido { box-shadow: 0 0 0 3px var(--green-deep), var(--shadow-card); }

/* --- Cartão curto no lugar do quiz (celular) --- */
.quiz-teaser {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.quiz-teaser-txt { flex: 1 1 180px; min-width: 0; }
.quiz-teaser-tit { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.quiz-teaser-sub { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-mid); text-wrap: pretty; }
.quiz-teaser-btns { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.quiz-teaser-btns .btn { flex: 1 1 auto; white-space: normal; text-align: center; line-height: 1.2; }
.quiz-teaser-cta[hidden] { display: none; }

/* Computador: quiz em 2 colunas (cabeçalho | pergunta) */
@media (min-width: 560px) {
  .quiz:not(.quiz--folha) .quiz-ops { grid-template-columns: 1fr 1fr; }
  .quiz-res-linha { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-5); }
  .quiz-res-btns { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .quiz-teaser-btns { flex: none; }
  .quiz-teaser-btns .btn { flex: none; }
}
@media (min-width: 900px) {
  .quiz:not(.quiz--folha) {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: var(--s-10);
    padding: var(--s-8);
  }
  .quiz:not(.quiz--folha) .quiz-titulo { font-size: 42px; }
  .quiz:not(.quiz--folha) .quiz-cab { align-self: center; }   /* L9 item 10: o cabeçalho fica no meio da altura do resultado */
  .quiz:not(.quiz--folha) .quiz-res-linha { grid-template-columns: 132px minmax(0, 1fr); }
  .quiz:not(.quiz--folha) .quiz-res-punch { font-size: 40px; }
  .quiz:not(.quiz--folha) .quiz-res-parc { font-size: 30px; }
}

/* --- Folha que sobe de baixo (celular) / janela central (sem quiz na página) --- */
.quiz-folha {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.quiz-folha[hidden] { display: none; }
.quiz-folha.is-aberto { pointer-events: auto; }
.quiz-folha-fundo {
  position: absolute; inset: 0;
  background: rgba(27, 34, 31, 0.55);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-out);
}
.quiz-folha.is-aberto .quiz-folha-fundo { opacity: 1; }
.quiz-folha-caixa {
  position: relative;
  width: 100%;
  max-height: 92vh; max-height: calc(92dvh / var(--z, 1));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: var(--s-2) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-0);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-float);
  transform: translateY(100%);
  transition: transform var(--d-slow) var(--ease-out);
}
.quiz-folha.is-aberto .quiz-folha-caixa { transform: none; }
.quiz-folha-alca { width: 40px; height: 4px; margin: 0 auto var(--s-2); background: var(--border); border-radius: var(--r-full); }
.quiz-folha-x {
  position: absolute; top: var(--s-2); right: var(--s-2); z-index: 1;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-mid);
  border-radius: var(--r-full);
  touch-action: manipulation;
}
.quiz-folha-x:hover { color: var(--ink); background: var(--bg-soft); }
.quiz.quiz--folha { padding: var(--s-2) 0 0; border: 0; border-radius: 0; box-shadow: none; max-width: none; }
.quiz.quiz--folha .quiz-cab { padding-right: var(--s-10); }   /* não passa por baixo do X */
.quiz.quiz--folha .quiz-chamada { display: none; }            /* já estava no cartão que abriu a folha */
.quiz.quiz--folha .quiz-titulo { font-size: 28px; }
.quiz.quiz--folha.quiz--andamento .quiz-sub { display: none; }   /* sobra altura para a pergunta/resultado */

@media (min-width: 641px) {
  .quiz-folha { align-items: center; padding: var(--s-6); }
  .quiz-folha-caixa {
    max-width: 640px;
    padding: var(--s-6) var(--s-8) var(--s-8);
    border-radius: var(--r-xl);
    opacity: 0; transform: translateY(16px) scale(0.98);
    transition: transform var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
  }
  .quiz-folha.is-aberto .quiz-folha-caixa { opacity: 1; transform: none; }
  .quiz-folha-alca { display: none; }
}

/* Celular em pé: a folha ocupa no máximo 80% da tela (a página continua à vista em cima) e tem
   altura firme (a borda de cima não "pula" a cada pergunta); sombra no pé enquanto houver conteúdo
   escondido embaixo (some ao chegar no fim: fundo "local" × "scroll") */
@media (max-width: 640px) {
  .quiz-folha-caixa {
    min-height: min(720px, 80vh); min-height: min(720px, calc(80dvh / var(--z, 1)));   /* 720 ≈ altura do resultado (o passo mais alto) */
    max-height: 80vh; max-height: calc(80dvh / var(--z, 1));
    background:
      linear-gradient(rgba(255, 255, 255, 0), var(--bg-0) 50%) center bottom / 100% 48px no-repeat local,
      radial-gradient(farthest-side at 50% 100%, rgba(27, 34, 31, 0.16), rgba(27, 34, 31, 0)) center bottom / 100% 16px no-repeat scroll,
      var(--bg-0);
  }
  .quiz.quiz--folha { background: transparent; gap: var(--s-4); }
  .quiz.quiz--folha .quiz-res-punch { font-size: 30px; }
  .quiz.quiz--folha .quiz-res-linha { grid-template-columns: 104px minmax(0, 1fr); gap: var(--s-4); }   /* L11: foto deitada (536×400) — 72 era pra foto em pé */
  .quiz.quiz--folha .quiz-res-parc { font-size: 24px; }
}
/* Celular em pé mais baixo (até 740 de altura): o subtítulo sai da folha (o cartão que a abriu já disse
   "Responda 3 perguntas" e o "Pergunta 1 de 3" + a barra de 3 partes dizem o mesmo) — as 4 opções cabem sem rolar */
@media (max-width: 640px) and (max-height: 740px) {
  .quiz.quiz--folha .quiz-sub { display: none; }
}
/* Celular pequeno (altura até 620, ex.: 320×568): tudo um pouco mais justo pra pergunta caber inteira */
@media (max-width: 640px) and (max-height: 620px) {
  .quiz.quiz--folha { gap: var(--s-3); }
  .quiz.quiz--folha .quiz-titulo { font-size: 24px; }
  .quiz.quiz--folha .quiz-prog { margin-top: var(--s-1); }
  .quiz.quiz--folha .quiz-perg { margin-bottom: var(--s-3); font-size: 18px; }
  .quiz.quiz--folha .quiz-op { min-height: 52px; padding-top: var(--s-2); padding-bottom: var(--s-2); }
  .quiz.quiz--folha .quiz-res { gap: var(--s-3); }
}
@media (max-width: 359px) {
  .quiz-folha-caixa { padding-left: var(--s-4); padding-right: var(--s-4); }
  .quiz.quiz--folha .quiz-res-punch { font-size: 27px; }
  .quiz.quiz--folha .quiz-res-linha { grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-3); }
  .quiz-res-parc { font-size: 22px; }
  .quiz-op { padding-left: var(--s-3); }
}

/* Celular deitado / tela baixa (altura ≤ 500): folha de baixo com no máximo 90% da altura,
   cabeçalho à esquerda e pergunta à direita, opções em 2 colunas (nada tapa a tela inteira) */
@media (max-height: 500px) and (min-width: 480px) and (max-width: 1023px) {
  .quiz-folha { align-items: flex-end; padding: 0; }
  .quiz-folha-caixa {
    max-width: 880px;
    min-height: min(420px, 90vh); min-height: min(420px, calc(90dvh / var(--z, 1)));   /* altura firme: a borda não pula */
    max-height: 90vh; max-height: calc(90dvh / var(--z, 1));
    padding: var(--s-4) var(--s-6) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    padding-left: max(var(--s-6), env(safe-area-inset-left, 0px));
    padding-right: max(var(--s-6), env(safe-area-inset-right, 0px));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    opacity: 1; transform: translateY(100%);
    transition: transform var(--d-slow) var(--ease-out);
  }
  .quiz-folha.is-aberto .quiz-folha-caixa { transform: none; }
  .quiz-folha-alca { display: none; }
  .quiz.quiz--folha {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.5fr);
    gap: var(--s-6); align-items: start;
    padding-top: 0;
  }
  .quiz.quiz--folha .quiz-cab { position: sticky; top: 0; padding-right: 0; }
  .quiz.quiz--folha .quiz-titulo { font-size: 26px; }
  .quiz.quiz--folha .quiz-sub { font-size: 13px; line-height: 1.45; }
  .quiz.quiz--folha .quiz-corpo { padding-right: var(--s-8); }   /* o X fica no canto, fora das opções */
  .quiz.quiz--folha .quiz-perg { margin-bottom: var(--s-3); font-size: 17px; }
  .quiz.quiz--folha .quiz-ops { grid-template-columns: 1fr 1fr; }
  .quiz.quiz--folha .quiz-op { min-height: 52px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); }
  .quiz.quiz--folha .quiz-op-sub { font-size: 12px; }
  .quiz.quiz--folha .quiz-res { gap: var(--s-3); }
  .quiz.quiz--folha .quiz-res-punch { font-size: 28px; }
  .quiz.quiz--folha .quiz-res-linha { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-4); }
  .quiz.quiz--folha .quiz-res-parc { font-size: 22px; }
  .quiz.quiz--folha .quiz-res-btns { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .quiz.quiz--folha .quiz-res-btns .btn { min-height: 48px; }
}

/* L9 (integração): botão "Não sabe qual escolher?" sob o título do #modelos */
.quiz-abrir-wrap { margin-top: var(--s-4); }

/* ============ 3) SIMULADOR — o que é novo no L10 (1.19); a réplica oficial fica no style.css ============ */
/* Rodapé do cartão e aviso de parcelas do modelo escolhido */
.sim-rodape { margin-top: var(--s-3); font-size: 12px; line-height: 1.5; color: var(--ink-mid); }
.sim-parc-nota { margin: calc(-1 * var(--s-2)) 0 var(--s-3); font-size: 13px; line-height: 1.45; color: var(--ink-mid); }
.sim-parc-nota[hidden] { display: none; }

/* "Quanto você economiza" (L11: era o "Compare"): faixa clara na largura toda do cartão */
.sim-cmp {
  grid-column: 1 / -1;
  min-width: 0;
  background: var(--bg-soft);
  border-radius: var(--r-lg);
}
.sim-cmp-abrir {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; min-height: 60px;
  padding: var(--s-3) var(--s-4);
  text-align: left; color: var(--ink);
  border-radius: var(--r-lg);
  touch-action: manipulation;
  transition: background-color var(--d-fast) var(--ease-out);
}
.sim-cmp-abrir:active { background: rgba(27, 34, 31, 0.04); }
.sim-cmp-abrir-tx { display: grid; gap: 2px; min-width: 0; }
.sim-cmp-abrir-tx b { font-size: 15px; font-weight: 800; line-height: 1.3; }
.sim-cmp-abrir-tx small { font-size: 13px; line-height: 1.35; color: var(--ink-mid); }
.sim-cmp-abrir svg { flex: none; color: var(--ink-mid); transition: transform var(--d-base) var(--ease-out); }
.sim-cmp.is-aberto .sim-cmp-abrir svg { transform: rotate(180deg); }
.sim-cmp-cab { display: none; }
.sim-cmp-corpo { display: grid; gap: var(--s-3); padding: 0 var(--s-4) var(--s-4); }
.sim-cmp-corpo[hidden] { display: none; }
.sim-cmp-campos { display: grid; gap: var(--s-3); }
.sim-cmp-campo { display: grid; gap: 6px; min-width: 0; }
.sim-cmp-rot { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink-mid); }
.sim-cmp-input {
  display: flex; align-items: center;
  min-height: 48px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.sim-cmp-input:hover { border-color: rgba(27, 34, 31, 0.28); }
.sim-cmp-input:focus-within { border-color: var(--green-brand); box-shadow: 0 0 0 3px rgba(0, 163, 52, 0.16); }
.sim-cmp-pre, .sim-cmp-suf { flex: none; font-size: 16px; font-weight: 700; color: var(--ink-mid); }
.sim-cmp-pre { padding-left: var(--s-4); }
.sim-cmp-suf { padding-right: var(--s-4); }
.sim-cmp-input input {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 46px;
  padding: 0 var(--s-4) 0 var(--s-2);
  border: 0; background: transparent; outline: none;
  font: 700 16px/1 var(--font); color: var(--ink);   /* 16 px: o iPhone não dá zoom ao tocar */
  font-variant-numeric: tabular-nums;
}
.sim-cmp-input--suf input { padding: 0 var(--s-2) 0 var(--s-4); }
.sim-cmp-input input::placeholder { color: var(--ink-low); font-weight: 600; opacity: 1; }
.sim-cmp-ajuda { font-size: 12.5px; line-height: 1.4; color: var(--ink-mid); }

/* Resultado do payback: claro enquanto vazio; verde-escuro com o número em lime quando há conta */
.sim-pb {
  display: grid; gap: var(--s-1); align-content: center;
  min-height: 72px;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  transition: background-color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.sim-pb-tx { font-size: 14px; line-height: 1.5; color: var(--ink-mid); text-wrap: pretty; }
.sim-pb.is-neutro .sim-pb-tx { color: var(--ink-body); }
.sim-pb.is-ok {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(136, 255, 0, 0.12), transparent 70%),
    var(--green-deep);
  border-color: var(--green-deep);
}
.sim-pb.is-ok .sim-pb-tx { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--on-dark); }
.sim-pb-n {
  display: inline-block; min-width: 0.6em;
  font-family: var(--font-display); font-weight: 400;
  font-size: 30px; line-height: 1; vertical-align: -0.12em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.sim-pb-perda { font-size: 14px; line-height: 1.45; color: var(--on-dark-mid); text-wrap: pretty; }
.sim-pb-perda[hidden] { display: none; }
.sim-pb-perda b { font-weight: 800; color: var(--on-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sim-pb.is-forte .sim-pb-perda b { color: var(--lime); }
.sim-pb-nota { font-size: 12px; line-height: 1.5; color: var(--ink-mid); text-wrap: pretty; }
.sim-pb-nota[hidden] { display: none; }
/* L11: a conta aberta (aluguel · taxa a menos · 1º ano já pagando a maquininha) e o aviso extra */
.sim-pb-linhas { margin: var(--s-2) 0 0; border-top: 1px solid var(--border-soft); }
.sim-pb-linhas[hidden] { display: none; }
.sim-pb-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border-soft);
}
.sim-pb-linha:last-child { border-bottom: 0; padding-bottom: 0; }
.sim-pb-linha dt { min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.sim-pb-linha dt span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-mid); }
.sim-pb-linha dd { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-pb-extra { font-size: 13px; line-height: 1.45; color: var(--ink-mid); text-wrap: pretty; }
.sim-pb-extra[hidden] { display: none; }
.sim-pb.is-ok .sim-pb-linhas, .sim-pb.is-ok .sim-pb-linha { border-color: var(--dark-line-soft); }
.sim-pb.is-ok .sim-pb-linha dt, .sim-pb.is-ok .sim-pb-linha dd { color: var(--on-dark); }
.sim-pb.is-ok .sim-pb-linha dt span, .sim-pb.is-ok .sim-pb-extra { color: var(--on-dark-mid); }
.sim-pb.is-ok .sim-pb-linha:last-child dd { color: var(--lime); }

@media (min-width: 560px) {
  .sim-cmp-campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .sim-cmp-campo:nth-child(3) { grid-column: 1 / -1; }
}
/* L11: tablet/computador — os 3 campos lado a lado (rótulos alinhados por cima, campos na mesma linha) */
@media (min-width: 768px) {
  .sim-cmp-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sim-cmp-campo { grid-template-rows: minmax(2.6em, auto) auto auto; }
  .sim-cmp-rot { align-self: end; }
  .sim-cmp-campo:nth-child(3) { grid-column: auto; }
}
@media (min-width: 768px) {
  .sim-cmp { padding: var(--s-5) var(--s-6) var(--s-6); }
  .sim-cmp-abrir { display: none; }
  .sim-cmp-cab {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: var(--s-1) var(--s-4);
    margin-bottom: var(--s-4);
  }
  .sim-cmp-tit { font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--ink); }
  .sim-cmp-sub { font-size: 13px; line-height: 1.4; color: var(--ink-mid); }
  .sim-cmp-corpo { padding: 0; gap: var(--s-4); }
  .sim-pb { padding: var(--s-4) var(--s-5); }
  .sim-pb.is-ok .sim-pb-tx { font-size: 17px; }
}

/* Abaixo do cartão: "Qual você vai pedir?" (4 pílulas) + botão do carrinho + cadeado */
.sim-cta { display: grid; justify-items: center; gap: var(--s-3); }
.sim-mods { display: block; width: 100%; min-width: 0; margin: 0 0 var(--s-1); padding: 0; border: 0; text-align: center; }
.sim-mods-rot { display: block; width: 100%; margin-bottom: var(--s-2); padding: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.sim-mods-grid {
  display: inline-grid; grid-template-columns: repeat(4, auto); gap: var(--s-1);
  max-width: 100%;
  padding: var(--s-1);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-full);
}
.sim-mod { position: relative; display: block; min-width: 0; cursor: pointer; }
.sim-mod input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sim-mod-box {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s-4);
  border-radius: var(--r-full);
  font-size: 14px; font-weight: 700; line-height: 1.1; white-space: nowrap;
  color: var(--ink);
  transition: background-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
  touch-action: manipulation;
}
.sim-mod:hover .sim-mod-box { background: rgba(27, 34, 31, 0.05); }
.sim-mod input:checked + .sim-mod-box { background: var(--lime); box-shadow: 0 1px 2px rgba(27, 34, 31, 0.12); }
.sim-mod input:focus-visible + .sim-mod-box { outline: 3px solid var(--green-brand); outline-offset: 2px; }
.sim-cta .sim-cta-btn { width: min(100%, 440px); white-space: normal; text-align: center; line-height: 1.25; }
.sim-cta-seguro {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: calc(-1 * var(--s-1));
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink-mid);
}
.sim-cta-seguro svg { flex: none; color: var(--green-brand); }
/* Tablet/computador: pílulas e botão na MESMA linha (o cadeado fica sob o botão) — a seção não cresce à toa */
@media (min-width: 768px) {
  .sim-cta--mods {
    grid-template-columns: auto minmax(0, 380px);
    justify-content: center; align-items: end;
    column-gap: var(--s-6); row-gap: var(--s-2);
  }
  .sim-cta--mods .sim-mods { width: auto; margin: 0; }
  .sim-cta--mods .sim-cta-btn { width: 100%; }
  .sim-cta--mods .sim-cta-seguro { grid-column: 2; margin-top: 0; }
}
@media (max-width: 359px) {
  .sim-mods-grid { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); }
  .sim-mod-box { border-radius: var(--r-md); padding: 0 var(--s-2); }
}

/* Simulador em tela bem estreita (dobrável fechado 280 px até 359 px): a réplica oficial (style.css) foi
   desenhada a partir de 320 px; aqui o cartão, os campos e as linhas do resultado encolhem sem estourar */
.sim-card > * { min-width: 0; }
.sim-campo select, .sim-campo input { min-width: 0; width: 100%; }
@media (max-width: 359px) {
  .sim-card { padding: var(--s-4); }
  .sim-res li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nome valor" "rot tx";
    column-gap: var(--s-3); row-gap: 2px;
  }
  .sim-res b { justify-self: end; font-size: 12px; }
  .sim-res-nome select { max-width: 100%; }
  .sim-cmp-abrir { padding: var(--s-3); }
  .sim-cmp-corpo { padding: 0 var(--s-3) var(--s-3); }
  .sim-pb { padding: var(--s-3); }
  .sim-pb-tx { font-size: 13px; }
  .sim-pb.is-ok .sim-pb-tx { font-size: 15px; }
}

/* ============ MOVIMENTO REDUZIDO: tudo aparece, nada desliza ============ */
@media (prefers-reduced-motion: reduce) {
  .quiz-prog span, .quiz-corpo, .quiz-op, .quiz-op svg,
  .quiz-folha-fundo, .quiz-folha-caixa, .quiz-res-ajuda,
  .sim-cmp-abrir, .sim-cmp-abrir svg, .sim-cmp-input, .sim-pb, .sim-mod-box { transition: none !important; }
  .quiz-corpo.is-entrando { opacity: 1; transform: none; }
  .quiz-op:active { transform: none; }
}