/* Identidade compartilhada do novo site, sem substituir regras de negócio. */
:root{--navy:#082750;--tinta:#082750;--tinta-2:#49617f;--gray:#49617f;--green:#ff5c00;--green-dark:#be4500;--green-light:#fff3e9;--laranja:#ff5c00;--laranja-forte:#be4500;--laranja-fraco:#fff3e9;--orange:#ff5c00;--border:#d9e4ef;--linha:#d9e4ef;--papel-2:#f3f6fa;--sombra:0 8px 28px #08275008}
html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:#fff;color:#082750;font:400 17px/1.65 Arial,Helvetica,sans-serif}body h1,body h2,body h3,body input,body button,body select,body textarea{font-family:Arial,Helvetica,sans-serif}body h1{font-size:clamp(30px,4vw,44px);line-height:1.15;letter-spacing:-1px}body h2{line-height:1.25}a{color:#214e83}button,input,select,textarea{max-width:100%}button,a,input,select,summary{touch-action:manipulation}img{max-width:100%;height:auto}:focus-visible{outline:3px solid #147de1!important;outline-offset:3px}[hidden]{display:none!important}
.mp-header{display:flex!important;align-items:center;justify-content:space-between;gap:24px;max-width:1080px;margin:auto;padding:24px 20px;background:#fff;position:relative;z-index:10;border-bottom:1px solid #e6edf5}.mp-brand,.mp-header .mp-brand{font:bold 28px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-1.2px;text-decoration:none;color:#082750;white-space:nowrap}.mp-brand span{color:#ff5c00}.mp-header nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}.mp-header nav a{display:inline-flex;align-items:center;min-height:44px;font:600 15px/1.4 Arial,Helvetica,sans-serif;text-decoration:none;color:#082750}/* O "Entrar" saiu de dentro do <nav> e virou irmão dele. No computador nada
   muda de lugar: o menu é empurrado para a direita e o botão o segue. */
.mp-header nav{margin-left:auto}
.mp-header .mp-access{display:inline-flex;align-items:center;min-height:44px;border:1px solid #ff5c00;padding:8px 20px;border-radius:12px;color:#be4500;font:600 15px/1.4 Arial,Helvetica,sans-serif;text-decoration:none;white-space:nowrap}.mp-skip{position:fixed;left:16px;top:-100px;background:#fff;padding:12px;z-index:100000}.mp-skip:focus{top:12px}
.mp-footer{max-width:1080px;margin:48px auto 0;padding:32px 20px;border-top:1px solid #d9e4ef;display:block!important;color:#49617f;font:400 15px/1.65 Arial,Helvetica,sans-serif}.mp-footer nav{display:flex;flex-wrap:wrap;gap:12px 24px;margin:20px 0}.mp-footer a{color:#214e83}.mp-footer p{margin:12px 0}.mp-footer .mp-brand{color:#082750}.mp-footer .mp-disclosure{background:#f3f6fa;padding:16px;border-radius:14px}
body .folha{max-width:900px;padding:32px;margin:32px auto;border:1px solid #d9e4ef;box-shadow:none;border-radius:24px}body .conteudo{max-width:940px;padding:28px 24px 48px}body .chamada{font-size:18px}body .page-title{font-size:clamp(28px,4vw,40px)}body .page-body h2{font-size:24px}body .page-body h3{font-size:20px}body .page-tag,body .conteudo .eyebrow{color:#be4500;background:#fff3e9;font:600 14px/1.5 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none}body .numero,body .page-card,body .cartao,body .caixa{border-color:#d9e4ef;border-radius:18px;box-shadow:none}body .page-card{background:#f3f6fa}body .cta,body .btn-1,body .btn-primary{background:#ff5c00;color:white;border:1px solid #ff5c00;box-shadow:none;border-radius:12px;min-height:48px;font-size:17px}body .cta:hover,body .btn-1:hover{background:#e45200}body .nota{font-size:14px}body .opcao,body .resposta{font-size:16px;min-height:48px}body .h1-icone{display:none}body .trilha{max-width:940px;font-size:14px;padding:20px 24px 0}
/* Conta e autenticação mantêm os IDs, sessões e validações existentes. */
body.mp-account{background:#f5f8fc}body.mp-account .mp-header{max-width:none;padding-inline:max(20px,calc((100vw - 1080px)/2))}body.mp-account .centro{max-width:580px;padding:48px 20px}body.mp-account .centro>.marca{display:none}body.mp-account .centro .cartao{padding:30px;background:#fff;border:1px solid #d9e4ef;border-radius:24px;text-align:left}body.mp-account #ptTitulo{font-size:30px}body.mp-account .desc{font-size:16px;color:#49617f}body.mp-account .campos{gap:14px}body.mp-account .campos input{min-height:54px;font-weight:400;font-size:17px}body.mp-account .links-pt{justify-content:space-between;gap:14px;margin-top:20px}body.mp-account .links-pt button{min-height:44px;font-size:15px}body.mp-account .marca-menu{font:700 22px Arial,Helvetica,sans-serif;color:#082750}body.mp-account .marca-menu .sig{display:none}body.mp-account .menu{border:1px solid #d9e4ef;box-shadow:none}body.mp-account .menu nav button{font-family:Arial,Helvetica,sans-serif}body.mp-account .quadro{max-width:1280px;gap:24px}body.mp-account .topo{background:#fff;box-shadow:none;border-bottom:1px solid #d9e4ef}body.mp-account .marca{font:700 25px Arial,Helvetica,sans-serif;color:#082750}body.mp-account .marca i{display:none}body.mp-account .topo-dir a,body.mp-account .topo-dir button{color:#214e83}body.mp-account .rodape{background:#fff;color:#49617f}
@media(max-width:700px){.mp-header{flex-direction:column;align-items:stretch;gap:12px;padding:20px 16px}.mp-header nav{justify-content:space-between;gap:6px 12px}.mp-header nav a{font-size:14px}.mp-header nav .mp-access{padding:6px 12px}.mp-footer{padding:28px 16px;margin-top:28px}body .folha{margin:20px 16px;padding:24px 20px;border-radius:20px}body .conteudo{padding:20px 16px 36px}body .chamada{font-size:17px}body .page-body h2{font-size:23px}body.mp-account .centro{padding:28px 16px}body.mp-account .centro .cartao{padding:24px 20px}body.mp-account .quadro{padding:16px 12px 92px}body.mp-account #ptTitulo{font-size:28px}.mp-footer nav{gap:12px 20px}}
.site-cd-flow header.mp-header{display:flex!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ── celular: o cabeçalho depois de crescer ──
 *
 * O menu tinha quatro itens quando esta folha foi escrita, e `space-between`
 * em quatro itens numa linha dá um resultado aceitável. Em 15/09/2026 entraram
 * "Início" e "App": com seis, o `space-between` espalha os itens até as bordas,
 * a linha quebra em lugares arbitrários e o botão "Entrar" vai parar sozinho
 * numa segunda fileira torta. Foi uma mudança minha que não olhou o celular.
 *
 * `flex-start` com espaçamento constante quebra a linha onde o texto manda, e
 * o botão de conta é empurrado para o fim com margem automática — ele fica no
 * canto em qualquer largura, sem depender de quantos itens existem antes.
 */
@media(max-width:700px){
  /* ── cabeçalho de celular em duas fileiras, não três ──
   *
   * Era uma coluna: marca, depois o menu. Os cinco itens não cabiam numa linha
   * e o "Entrar" sobrava numa terceira fileira, sozinho e encostado na borda —
   * parecia um botão solto no meio da página, não o fim do menu.
   *
   * Agora é uma grade de duas colunas: marca à esquerda e "Entrar" à direita na
   * MESMA linha — o lugar onde todo aplicativo põe a conta — e o menu ocupando
   * a linha de baixo inteira. Uma fileira a menos numa tela onde cada fileira
   * custa um cartão de conteúdo.
   */
  .mp-header{display:grid!important;grid-template-columns:1fr auto;align-items:center;
    gap:4px 12px;padding:10px 16px}
  .mp-brand,.mp-header .mp-brand{grid-column:1;grid-row:1;font-size:23px}
  /* 44px como os itens do menu. Pus 38px para a linha ficar mais baixa e o
     teste de celular reprovou — com razão: entrar na conta é dos toques mais
     importantes do site, e ele não pode ser o alvo mais difícil da tela. */
  .mp-header .mp-access{grid-column:2;grid-row:1;justify-self:end;
    min-height:44px;padding:8px 16px;font-size:14px;border-radius:10px}
  .mp-header nav{grid-column:1/-1;grid-row:2;margin:0;justify-content:flex-start;gap:0 16px}
  /* 44px mesmo com o menu numa fileira só: item de menu é o alvo mais tocado
     do site, e errar o toque custa mais que a altura economizada. */
  .mp-header nav a{min-height:44px;font-size:13.5px}

  /* O botão da chamada volta a ser de largura cheia: no celular todos os
     outros são, e um botão de 200px no meio de uma coluna parece deslocado. */
  .intro-acoes{margin:16px 0 10px}
  .intro-acoes .primary{width:100%;min-width:0;padding:13px 20px}
  .intro-selo{font-size:12.5px;line-height:1.5}

  /* Quinze perguntas numa tela estreita: o texto precisa do espaço todo, e a
     seta não pode encostar nele. */
  .faq-lista{gap:16px}
  .faq-grupo summary{padding:11px 24px 11px 0;font-size:14.5px}
  .faq-grupo details p{font-size:14.5px;line-height:1.6}

  /* ── escala de celular ──
   *
   * O corpo do site é 17px com entrelinha 1,65, o título chega a 30px e os
   * cartões têm 20px de recheio. Num aparelho de 360px isso significa ver umas
   * poucas linhas por vez: a pergunta sai da tela antes de a resposta entrar,
   * e é por isso que não dá para ligar uma informação na outra — não é falta
   * de organização, é falta de tela.
   *
   * O que muda aqui é só tipografia e espaçamento. O que NÃO muda:
   *
   * 1. Alvo de toque nunca abaixo de 44px. No computador dá para apertar
   *    porque o mouse é preciso; aqui é o dedo, e encolher botão é trocar
   *    conforto de leitura por erro de clique.
   * 2. Campo de digitação nunca abaixo de 16px. O Safari do iPhone dá zoom
   *    sozinho num campo com fonte menor que isso, e a página inteira salta
   *    de lugar quando a pessoa toca no campo — é provavelmente parte do que
   *    apareceu como "distorceu bastante".
   */
  body{font-size:15.5px;line-height:1.5}
  body h1{font-size:clamp(23px,6.4vw,28px);line-height:1.2;letter-spacing:-.5px;margin:10px 0 8px}
  /* `body h1` não bastava: .hero .intro h1 tem especificidade maior e fixava
     34px, então o título da capa ocupava três linhas da tela do celular
     enquanto o resto do site já tinha encolhido. Os quatro seletores abaixo
     repetem a especificidade deles para poder mandar. */
  .hero .intro h1,.centered .intro h1,.assisted .intro h1,.centered h1{
    font-size:clamp(23px,6.4vw,28px);letter-spacing:-.5px;line-height:1.2;max-width:none}
  body h2{font-size:19px}
  body h3{font-size:16px}
  body p{margin:8px 0}
  body .chamada{font-size:15px}
  body .page-title{font-size:24px}
  body .page-body h2{font-size:18px}
  body .page-body h3{font-size:16px}
  body .nota,body .trilha{font-size:12.5px}
  body .trilha{padding:12px 16px 0}

  /* seções e cartões: o mesmo conteúdo, menos ar entre ele */
  .section{padding:24px 0}
  .hero{gap:18px;padding:14px 0 22px}
  .eyebrow{margin-bottom:9px;font-size:11.5px}
  .three-cards{gap:10px;margin:14px 0}
  .three-cards article{padding:14px}
  .three-cards p{font-size:14.5px;margin-top:7px}
  .trust-cards{gap:10px;margin-top:14px}
  .trust-cards article{padding:14px}
  .trust-cards p{font-size:14.5px}
  .trust-cards h3{margin:8px 0 6px}
  .trust-cards small{font-size:12.5px;line-height:1.5;margin-top:8px}
  .tools>a{padding:13px 14px;gap:11px}
  .tools h3{font-size:15.5px}
  .tools p{font-size:13px;margin-top:2px}
  .safety{padding:13px 14px}
  .privacy-commitment article{padding:14px}
  body .folha{margin:14px 12px;padding:16px 14px;border-radius:14px}
  body .conteudo{padding:14px 14px 26px}

  /* assistente e passos guiados */
  .wizard{padding:16px 14px;border-radius:14px}
  .wizard h2{font-size:17px;padding:11px 12px;line-height:1.3}
  .sub{font-size:13.5px;margin-bottom:12px}
  .choice{min-height:52px;padding:11px 12px;font-size:14.5px;gap:10px}
  .choice small{font-size:12.5px}
  .choice-mark{width:22px;height:22px}
  .summary,.result-note{padding:12px 13px;margin:12px 0}
  .field{margin:12px 0;font-size:13.5px}
  .field small{font-size:12.5px;margin-top:3px}
  .unknown{font-size:13.5px}

  /* Os dois pisos que não descem. 16px no campo evita o zoom do iPhone; 46px
     de altura mantém o alvo confortável para o dedo. */
  .field input,.field select,
  body .folha input,body .folha select,body .folha textarea,
  body input[type=email],body input[type=text],body input[type=tel]{font-size:16px;min-height:46px}
  .primary,.outline,body .cta,body .btn-1,body .btn-acao,body .btn-enviar{min-height:46px;font-size:15px}

  /* calculadora e diagnóstico */
  body .bloco{margin-top:18px}
  body .ferramenta{padding:15px 13px;margin-top:14px}
  body .valor-grande{font-size:25px}
  body .opcao,body .resposta{font-size:14px;min-height:46px}
  body .caixa{padding:11px 10px}
  body .economia{padding:14px 13px}
  body .campo-rotulo{font-size:12.5px;margin-bottom:5px}
  body .passos li{font-size:14px;line-height:1.45}
  .site-cd-flow .cd-context{padding:11px 12px;margin:11px 0;font-size:13.5px}
  .site-cd-flow #cdValor,.site-cd-flow .cd-rate input{font-size:16px;min-height:46px}
  .site-cd-flow .cd-error{font-size:14px}

  /* rodapé */
  .mp-footer{padding:20px 14px;margin-top:22px;font-size:13px}
  .mp-footer nav{gap:8px 16px;margin:12px 0}
  .mp-footer p{margin:8px 0}
  .mp-footer .mp-disclosure{padding:12px;border-radius:11px}
}

/* ── faixa "abrir no app" ──
 * Fica no fluxo da página, não presa na tela: uma barra fixa cobriria conteúdo
 * no celular justamente onde ele é mais escasso. Sobe junto ao rolar e não
 * volta depois de dispensada. */
.mp-faixa-app{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--papel-2);
  border-bottom:1px solid var(--linha);font:400 13px/1.4 Arial,Helvetica,sans-serif;color:var(--tinta-2)}
.mp-faixa-app span{flex:1;min-width:0}
.mp-faixa-app a{flex:none;color:var(--laranja-forte);font-weight:700;text-decoration:none;
  border:1px solid var(--laranja);border-radius:9px;padding:7px 12px;min-height:34px;
  display:inline-flex;align-items:center}
.mp-faixa-app button{flex:none;background:none;border:0;color:var(--tinta-2);font-size:20px;
  line-height:1;width:34px;height:34px;cursor:pointer}
/* ── seção Transparência ──
 *
 * O selo não deve herdar a largura de um parágrafo — daí o inline-block.
 * O resto é correção de contraste: a versão anterior punha uma pílula creme
 * (#fff3e9) sobre o fundo azul-escuro, e ela lia como um adesivo colado na
 * seção, não como parte dela. Numa faixa escura o destaque vem de clarear o
 * próprio fundo, não de importar a cor de fundo do modo claro.
 *
 * O cadeado era um emoji, único em todo o site — as outras seções usam sinais
 * tipográficos (✓, ≡, ↔). Emoji muda de desenho em cada sistema e não aceita
 * a cor da seção; virou um desenho nosso, que aceita.
 */
body .privacy-commitment .eyebrow{display:inline-block;width:auto;max-width:100%;padding:5px 13px;border-radius:999px;background:#ffffff1f;color:#ffc79c;font:700 12.5px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.4px;margin-bottom:14px}
body .privacy-commitment{padding-bottom:44px}
body .privacy-commitment h2{color:#fff}
body .privacy-commitment article{background:#ffffff0f;border-color:#ffffff29;align-items:flex-start}
body .privacy-commitment article h3{color:#fff;margin-bottom:5px}
body .privacy-commitment article p{color:#c9d8e8;margin:0}
body .privacy-commitment article>span{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#ff5c001f;font-size:0;line-height:0}
/* Cadeado desenhado: herda currentColor, então acompanha a seção em vez de
   trazer a paleta do emoji de cada sistema operacional. */
body .privacy-commitment article>span::before{content:"";display:block;width:19px;height:21px;background:#ffb27a;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath d='M6 11V8a6 6 0 0 1 12 0v3h1.5A1.5 1.5 0 0 1 21 12.5v11A1.5 1.5 0 0 1 19.5 25h-15A1.5 1.5 0 0 1 3 23.5v-11A1.5 1.5 0 0 1 4.5 11H6Zm2.4 0h7.2V8a3.6 3.6 0 0 0-7.2 0v3Zm3.6 5.2a1.9 1.9 0 0 0-.95 3.55V21.4a.95.95 0 0 0 1.9 0v-1.65A1.9 1.9 0 0 0 12 16.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath d='M6 11V8a6 6 0 0 1 12 0v3h1.5A1.5 1.5 0 0 1 21 12.5v11A1.5 1.5 0 0 1 19.5 25h-15A1.5 1.5 0 0 1 3 23.5v-11A1.5 1.5 0 0 1 4.5 11H6Zm2.4 0h7.2V8a3.6 3.6 0 0 0-7.2 0v3Zm3.6 5.2a1.9 1.9 0 0 0-.95 3.55V21.4a.95.95 0 0 0 1.9 0v-1.65A1.9 1.9 0 0 0 12 16.2Z'/%3E%3C/svg%3E") center/contain no-repeat}
/* O corte entre a faixa escura e o rodapé branco era uma linha dura. */
body .privacy-commitment + .mp-footer,
body .privacy-commitment ~ .mp-footer{border-top:none;margin-top:0;padding-top:30px}

/* ══════════ UMA LINGUAGEM SÓ ══════════
 *
 * As páginas antigas (calculadora, diagnóstico, modalidades, institucionais)
 * falam um dialeto visual diferente do site novo, e é isso que faz a tela
 * parecer remendada — não o tamanho:
 *
 *   antigo                          novo
 *   degradê laranja nos botões      laranja chapado
 *   raio de 50px (pílula)           raio de 11px
 *   borda de 2px                    borda de 1px
 *   sombra colorida sob o botão     sem sombra
 *   caixas creme com borda laranja  caixas cinza-claro com borda neutra
 *
 * Reescrever as quatro folhas antigas seria arriscar quebrar telas que
 * funcionam. Aqui o site-shell.css — que carrega por último em toda página —
 * traduz o dialeto antigo para o novo, só na aparência. Nenhuma regra de
 * cálculo, texto ou comportamento é tocada.
 *
 * O laranja chapado não é só gosto: degradê com sombra colorida é a assinatura
 * de anúncio de crédito fácil, e este site passa a página inteira dizendo que
 * não é isso.
 */
body .btn-acao,body .btn-enviar,body .cta,body .btn-1,body .btn-primary{
  background:#ff5c00;background-image:none;box-shadow:none;border:1px solid #ff5c00;
  border-radius:11px;color:#fff;font-weight:800}
body .btn-acao:hover,body .btn-enviar:hover,body .cta:hover,body .btn-1:hover{background:#e45200}
body .ferramenta,body .opcao,body .caixa,body .guardar,body .comparativo>div,
body .folha,body .economia,body .info-box,body input,body select,body textarea{border-width:1px}
body .ferramenta{box-shadow:none;border-color:var(--linha);border-radius:16px}
body .opcao{border-color:var(--linha);background:var(--papel-2)}
body .opcao.marcada{border-color:var(--laranja);background:var(--laranja-fraco);color:var(--laranja-forte)}
body .economia{border-color:#bfe3cf;background:#eef8f2;border-radius:13px}
/* A caixa de destaque era creme com borda laranja — a mesma cor do botão de
   ação. Duas coisas com o mesmo destaque e só uma é clicável. */
body .info-box{background:var(--papel-2);border:1px solid var(--linha);border-radius:12px}
body .alert-success{background:#eef8f2;border-left:3px solid #2f9e68;color:#1e6b46}
body .page-tag{background:var(--laranja-fraco);color:var(--laranja-forte);border-radius:999px;
  text-transform:none;letter-spacing:.2px;font-weight:700}
body .valor-grande{color:var(--laranja-forte);letter-spacing:-.5px}
body .faixa-limites{color:var(--tinta-2)}

/* ── um tamanho por papel ──
 *
 * A auditoria (tools/auditoria-tipografia.js) mostrou o mesmo papel com
 * tamanhos diferentes conforme a folha que o desenhou primeiro. O caso visível:
 * o selo acima do título — "Ferramenta gratuita", "Compare antes de decidir" —
 * saía com 13px na home (site-cd-propostas.css) e 12px nas páginas de
 * modalidade (modalidade.css). Ninguém decidiu essa diferença; ela é a marca
 * de duas folhas escritas em épocas diferentes.
 *
 * Aqui o papel ganha um valor só. O site-shell.css carrega por último em toda
 * página, então esta é a última palavra — é o lugar certo para a decisão.
 */
body .eyebrow,body .page-tag,body .conteudo .eyebrow{font-size:12.5px;letter-spacing:.6px}
body .campo-rotulo,body .label,.step{font-size:13px}
/* O rótulo de um grupo de perguntas é o mesmo papel do rótulo de um campo;
   17px o deixava do tamanho de um subtítulo. */
.credit-group legend{font-size:15.5px}

/* ── perguntas frequentes ──
 * Quinze perguntas numa pilha única viram um paredão que ninguém abre. Os três
 * grupos separam as três dúvidas de quem chega: quanto custa, quem somos, o
 * que acontece com meus dados. O título do grupo é discreto de propósito — ele
 * organiza a leitura, não disputa atenção com as perguntas. */
.faq-lista{display:grid;gap:22px}
.faq-grupo>h3{font-size:12.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#8194ab;margin:0 0 9px}
.faq-grupo details{border-bottom:1px solid var(--linha)}
.faq-grupo details:first-of-type{border-top:1px solid var(--linha)}
.faq-grupo summary{cursor:pointer;padding:12px 26px 12px 0;font-weight:700;position:relative;list-style:none}
.faq-grupo summary::-webkit-details-marker{display:none}
/* O sinal é desenhado com bordas, não com caractere: em fonte que não tem o
   glifo, um "▸" vira quadrado vazio bem no lugar que indica "clique aqui". */
.faq-grupo summary::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--laranja);border-bottom:2px solid var(--laranja);
  transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.faq-grupo details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-grupo details p{margin:0 0 14px;color:var(--tinta-2);max-width:64ch}

/* ── chamada da capa ──
 * O botão principal vive dentro do cartão do assistente desde a migração, e
 * quem chega pela primeira vez lê o texto e não encontra o que fazer: o cartão
 * fica ao lado, não abaixo. "Simular agora" ao fim da chamada devolve a ação
 * ao lugar onde o olho termina de ler.
 * O `.primary` do site é de largura cheia porque nasceu para celular; no
 * parágrafo da chamada ele precisa ser um botão, não uma faixa. */
.intro-acoes{margin:20px 0 12px}
.intro-acoes .primary{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:200px;margin-top:0;padding:14px 30px}
/* Três promessas curtas, sem cartão e sem ícone: quem está com medo de golpe
   lê isto antes de clicar, e um selo desenhado chamaria mais atenção que a
   própria frase. As três são verificáveis no site — nenhuma é enfeite. */
.intro-selo{font-size:13.5px;color:#49617f;margin:0}

/* ══════════ ESCALA DE DESKTOP ══════════
 *
 * Todo o CSS acima é desenho de celular. Só existiam regras `max-width`: o
 * telefone encolhia e o computador ficava com os números de toque — corpo de
 * 17px com entrelinha 1,65, botão de 48px, cartão com 24px de recheio, seção
 * com 58px de respiro. Numa tela de 1900px isso vira uma página onde cada
 * pergunta ocupa um terço do monitor e é preciso rolar para ver a seguinte.
 *
 * O corte é por dispositivo, não só por largura: `pointer:fine` significa
 * mouse ou trackpad — ponteiro preciso. Um tablet de 800px continua com os
 * alvos grandes, porque lá ainda é dedo. Um notebook de 760px encolhe, porque
 * lá é mouse. Cortar só por largura erraria os dois: começar em 900px deixava
 * de fora metade das janelas de quem trabalha com o navegador em meia tela.
 *
 * Três regras que respeitei ao apertar:
 * 1. Alvos de clique não descem de 38px. Mouse é preciso, mas existe gente com
 *    tremor, notebook com touchscreen e celular em modo desktop.
 * 2. Corpo de texto não desce de 15,5px, e a entrelinha fica em 1,5. Abaixo
 *    disso o texto fica hostil para quem não enxerga bem — e o site fala de
 *    dinheiro com quem precisa entender, não com quem lê rápido.
 * 3. O H1 da home continua grande de propósito: ali tamanho é hierarquia.
 *    Ele só deixa de escalar sem limite com a largura da tela.
 */
@media(min-width:701px) and (any-pointer:fine),(min-width:1000px){
  /* ── escala geral ── */
  body{font-size:15px;line-height:1.5}
  body h1{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.6px;margin:12px 0 9px}
  body h2{font-size:clamp(18px,1.5vw,21px)}
  body h3{font-size:16px}
  body p{margin:9px 0}

  /* ── cabeçalho: uma barra, não uma faixa ── */
  .mp-header{padding:12px 20px;gap:18px}
  .mp-brand,.mp-header .mp-brand{font-size:22px;letter-spacing:-.9px}
  .mp-header nav{gap:8px 18px}
  .mp-header nav a{min-height:38px;font-size:14px}
  .mp-header nav .mp-access{padding:6px 15px;border-radius:10px}

  /* ── rodapé ── */
  .mp-footer{margin-top:32px;padding:24px 20px;font-size:13.5px}
  .mp-footer nav{gap:9px 18px;margin:14px 0}
  .mp-footer p{margin:9px 0}
  .mp-footer .mp-disclosure{padding:13px;border-radius:11px}

  /* ── páginas de conteúdo e ferramentas ── */
  /* 52rem é largura de celular esticada: numa tela larga o formulário de
     contato ficava com campos de 830px para escrever um nome. */
  body .folha{max-width:40rem;padding:22px 24px;margin:20px auto;border-radius:16px}
  body .folha input,body .folha select,body .folha textarea,
  body .contato-form input,body .contato-form select,body .contato-form textarea{
    font-size:14.5px;padding:9px 11px;border-width:1px;border-radius:9px}
  body .folha textarea,body .contato-form textarea{min-height:110px}
  body .btn-enviar{padding:11px 22px;font-size:14.5px}
  body .page-divider{margin:18px 0}
  body .page-tag{font-size:11.5px;padding:4px 11px;margin-bottom:11px}
  body .info-grid{gap:12px}
  body .info-box{padding:14px}
  body .conteudo{padding:20px 24px 32px}
  body .chamada{font-size:15px;max-width:62em}
  body .page-title{font-size:clamp(22px,2vw,27px)}
  body .page-body h2{font-size:19px}
  body .page-body h3{font-size:16px}
  /* o número grande da calculadora: continua o destaque da tela, sem ser um
     cartaz — 34px num cartão de 600px é metade da altura útil */
  body .valor-grande{font-size:26px;margin-bottom:4px}
  body .val{font-size:18px}
  body .page-tag,body .conteudo .eyebrow{font-size:13px}
  body .numero,body .page-card,body .cartao,body .caixa{border-radius:14px}
  body .trilha{font-size:13px;padding:14px 24px 0}
  body .nota{font-size:13px}

  /* ── botões e opções ── */
  body .cta,body .btn-1,body .btn-primary{min-height:42px;font-size:15px;border-radius:10px}
  body .opcao,body .resposta{font-size:14.5px;min-height:40px}

  /* ── calculadora e diagnóstico ──
     .bloco tinha 40px entre um passo e outro: era o principal motivo de
     "tem que ficar descendo para ver o resto". */
  body .bloco{margin-top:22px}
  body .opcao{padding:9px 7px;border-radius:10px}
  body .opcoes{gap:7px;margin-bottom:12px}
  body .caixa{padding:12px 11px}
  body .ferramenta{padding:20px 20px;margin-top:18px;border-radius:16px}
  body .economia{padding:16px 18px;margin-bottom:11px;border-radius:13px}
  body .comparativo{gap:10px}
  body .btn-acao{padding:12px;font-size:15px;border-radius:11px}
  body .campo-rotulo{font-size:13px;margin-bottom:6px}
  body .passos{gap:9px;margin-top:12px}
  body .passos li{font-size:14.5px;line-height:1.5}
  body .resultado{margin-top:14px}
  body input[type=email]{padding:11px 13px;font-size:15px;border-radius:10px}

  /* A calculadora quando chega vinda do fluxo guiado. Os seletores repetem
     `.site-cd-flow #cdValor` porque o original usa ID: um `body .algo` não
     ganharia dele, e a regra passaria despercebida. */
  .site-cd-flow .cd-site-nav{padding-block:11px;gap:14px}
  .site-cd-flow .cd-site-nav a{min-height:38px;font-size:14px}
  .site-cd-flow .cd-site-nav .cd-brand{font-size:21px}
  .site-cd-flow .cd-context{padding:12px 14px;margin:12px 0;font-size:14px;line-height:1.5;border-radius:10px}
  .site-cd-flow #cdValor,.site-cd-flow .cd-rate input{min-height:40px;padding:9px 11px;font-size:15px;border-radius:9px}
  .site-cd-flow .cd-rate{font-size:13.5px;margin:13px 0}
  .site-cd-flow .cd-error{font-size:14px;margin:12px 0}
  .site-cd-flow .opcao,.site-cd-flow .resposta{min-height:40px;font-size:14.5px}
  .site-cd-flow .rodape-calc{font-size:13px;line-height:1.5}

  /* ── home ── */
  .hero{padding:24px 0 30px;gap:38px}
  .section{padding:34px 0}
  .eyebrow{margin-bottom:11px}
  .wizard{padding:18px 20px;border-radius:14px}
  .wizard h2{font-size:17px;padding:9px 12px;margin-bottom:8px}
  .wizard-head{margin-bottom:9px}
  .step{font-size:12px}
  .sub{font-size:13px;margin-bottom:11px}

  /* Os passos guiados da troca de dívida: campo, dica, caixa de "não sei".
     Eram 52px de altura e 18px de fonte por campo — as três perguntas do passo
     não cabiam juntas e era preciso rolar para ver a última. O alvo aqui é o
     passo inteiro visível de uma vez: quem responde vendo as três perguntas
     juntas entende que o formulário é curto e vai até o fim. */
  .field{margin:10px 0;font-size:13px}
  .field input,.field select{min-height:36px;padding:7px 10px;font-size:14px;margin-top:4px;border-radius:8px}
  .field small{font-size:11.5px;margin-top:2px;line-height:1.4}
  .unknown{font-size:13px;min-height:28px;margin-top:-4px;gap:7px}
  .unknown input[type=checkbox]{width:16px;height:16px}
  .summary{padding:13px 15px;margin:13px 0;border-radius:10px}
  .result-note{padding:13px 15px;margin:13px 0;border-radius:10px;font-size:13.5px}
  .context-message{font-size:13.5px;padding:10px 13px;margin-bottom:14px}
  .prototype-note{font-size:12px;margin-top:13px}
  .guide-card{padding:17px;margin-top:18px;border-radius:13px}
  .check{width:21px;height:21px}
  .primary{margin-top:13px;font-size:14.5px;min-height:40px}
  .outline{min-height:38px;padding:9px 14px;border-radius:9px;margin-top:9px}
  /* Um passo por vez, num cartão estreito: o olho não precisa varrer a tela
     inteira para ligar a pergunta à resposta que acabou de dar. */
  .centered .wizard,.assisted .wizard{max-width:520px}

  /* "Seu ponto de partida": os quatro caminhos cabiam em quatro cartões de
     100px de altura. Continuam dois por linha, só que menores. */
  .choices{gap:8px}
  .choice{min-height:52px;padding:12px 14px;gap:11px;border-radius:12px;font-size:15px}
  .choice small{font-size:12.5px;margin-top:2px}
  .choice-mark{width:22px;height:22px}

  .three-cards{gap:16px;margin:18px 0}
  .three-cards article{padding:18px;border-radius:13px}
  .three-cards p{font-size:14.5px;margin-top:9px}
  .trust-cards{gap:14px;margin-top:16px}
  .trust-cards article{padding:18px;border-radius:14px}
  .trust-cards h3{margin:10px 0 7px}
  .trust-cards p{font-size:14.5px}
  .trust-cards small{font-size:12.5px;line-height:1.5;margin-top:8px}
  .tools{gap:9px}
  .tools>a{padding:15px 18px;gap:14px;border-radius:12px}
  .tools p{font-size:13.5px;margin-top:3px}
  .tools>a>span:last-child{font-size:19px}
  .safety{padding:15px 18px}
  .privacy-commitment article{padding:16px}
  body .privacy-commitment .eyebrow{margin-bottom:12px}
}

/* ── o olho da senha ──
 * A caixa só existe para segurar o botão no canto do campo. display:block
 * porque o campo costuma ser bloco dentro de um <label>. */
.olho-caixa{position:relative;display:block}
.olho-caixa input{width:100%;padding-right:3rem}
.olho{position:absolute;right:0.25rem;top:50%;transform:translateY(-50%);
  width:2.75rem;height:2.75rem;display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;color:#6b7f96}
.olho svg{width:1.3125rem;height:1.3125rem;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.olho:hover{color:#082750}
.olho:focus-visible{outline:2px solid #ff5c00;outline-offset:-2px;border-radius:0.5rem}