/* ============================================================
   Calculadora de balanço patrimonial — Cysne Finanças
   Usa os tokens do :root de styles.css. Nada de cor nova aqui:
   ativos em jade, passivos em coral, patrimônio líquido em roxo.
   Desktop-first, com os mesmos cortes do site (900 / 720 / 540).
   ============================================================ */

/* ---------- `hidden` tem que esconder ----------
   O navegador aplica `[hidden] { display: none }` com especificidade zero,
   então QUALQUER `display` declarado depois o vence — e o elemento que o
   JavaScript escondeu continua na tela. Aconteceu aqui com `.passo`
   (grid), `.btn` (inline-flex) e os blocos de renda do passo 3.
   Uma regra global evita o remendo por componente: `hidden` é uma
   afirmação sobre o elemento, não uma sugestão de layout. */
[hidden] { display: none !important; }

/* ---------- abertura ---------- */
.calc-hero {
  background: linear-gradient(180deg, var(--nude) 0%, var(--off-white) 100%);
  padding: 72px 0 56px;
}
.calc-hero-inner { max-width: 780px; }
.calc-hero h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--roxo); margin-bottom: 18px; }
.calc-lead { font-size: 1.2rem; color: var(--tinta); }
.calc-body { color: var(--tinta-suave); }
.calc-privacidade {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--jade);
  border-radius: 12px; padding: 14px 18px; margin: 26px 0;
  font-size: 0.95rem; color: var(--tinta-suave);
}
.ico-cadeado { flex: none; line-height: 1.5; }

/* Ponte para o canal: uma linha discreta abaixo do botão, não uma caixa —
   o convite principal da página continua sendo calcular. */
.calc-video { margin: 18px 0 0; font-size: 0.92rem; color: var(--tinta-suave); }
.calc-video span[aria-hidden] { color: var(--coral); margin-right: 4px; }
.calc-video a { color: var(--roxo); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- moldura do formulário ---------- */
.calc-container { max-width: 900px; }
#form-balanco {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--radius);
  padding: 36px 40px 30px; box-shadow: var(--shadow-soft);
}

/* ---------- barra de progresso ---------- */
.passos-barra { margin-bottom: 32px; }
/* <ol> porque os passos têm ordem de verdade; o styles.css zera o marcador
   só de <ul>, então desligamos aqui. */
.passos-lista {
  display: flex; justify-content: space-between; gap: 8px;
  list-style: none; margin: 0 0 10px; padding: 0;
  font-size: 0.78rem; color: var(--tinta-suave);
}
.passos-lista li { flex: 1; text-align: center; opacity: 0.5; transition: opacity 0.25s ease; }
.passos-lista li.ativo { opacity: 1; color: var(--roxo); font-weight: 600; }
.passos-lista li.concluido { opacity: 0.85; color: var(--jade); }
.passos-trilho { height: 4px; background: var(--linha); border-radius: 99px; overflow: hidden; }
.passos-preenchido {
  height: 100%; width: 20%; border-radius: 99px;
  background: linear-gradient(90deg, var(--roxo), var(--coral));
  transition: width 0.35s ease;
}

/* ---------- passos ---------- */
.passo { border: 0; padding: 0; margin: 0; }
.passo legend {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 600;
  color: var(--roxo); margin-bottom: 6px; padding: 0;
}
.passo-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--roxo); color: #fff;
  display: grid; place-items: center; font-size: 0.95rem;
}
.passo-sub { color: var(--tinta-suave); margin-bottom: 26px; }

.grupo-titulo {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-suave); font-weight: 600;
  margin: 30px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--linha);
}
.grupo-titulo:first-of-type { margin-top: 8px; }

/* ---------- campos ---------- */
.campos { display: grid; gap: 20px; margin-top: 18px; }
.campos-1 { grid-template-columns: 1fr; max-width: 420px; }
.campos-2 { grid-template-columns: repeat(2, 1fr); }
.campos-3 { grid-template-columns: repeat(3, 1fr); }
/* Uma pergunta de múltipla escolha por linha. Os 420px da `.campos-1` são a
   medida de um campo de digitar, e espremem três opções lado a lado; a largura
   inteira do formulário faria o contrário, esticando duas opções até virarem
   duas faixas enormes. 640px é onde as duas coisas cabem bem. */
.campos-escolha { grid-template-columns: 1fr; max-width: 640px; }

.campo label {
  display: block; font-size: 0.9rem; font-weight: 500;
  color: var(--tinta); margin-bottom: 7px;
}
.campo input {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--tinta);
  background: var(--off-white); border: 1px solid var(--linha);
  border-radius: 10px; padding: 12px 14px; transition: border-color 0.2s, box-shadow 0.2s;
}
.campo input:hover { border-color: #d6c9c3; }
.campo input:focus-visible {
  outline: none; border-color: var(--roxo);
  box-shadow: 0 0 0 3px rgba(94, 59, 96, 0.15);
}
.moeda-destaque { font-size: 1.35rem !important; font-weight: 600; }

.ajuda { font-size: 0.82rem; color: var(--tinta-suave); margin: 7px 0 0; }

/* ---------- escolha sim/não (aposentado, regime) ---------- */
/* `fieldset` porque as opções são um grupo de verdade: o leitor de tela
   anuncia a legend antes de cada rádio. O reset zera a moldura que o
   navegador desenha por padrão e destoaria do resto do formulário. */
.escolha { border: 0; margin: 0; padding: 0; min-width: 0; }
.escolha legend {
  padding: 0; font-size: 0.9rem; font-weight: 500;
  color: var(--tinta); margin-bottom: 9px;
}
.escolha-opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
.escolha-opcoes label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 0.9rem; font-weight: 400; margin: 0;
  background: var(--off-white); border: 1px solid var(--linha);
  border-radius: 10px; padding: 11px 15px; flex: 1 1 auto; min-width: 0;
  transition: border-color 0.2s, background 0.2s;
}
.escolha-opcoes label:hover { border-color: #d6c9c3; }
.escolha-opcoes input { accent-color: var(--roxo); flex: none; margin: 0; }
.escolha-opcoes label:has(input:checked) {
  border-color: var(--roxo); background: rgba(94, 59, 96, 0.06);
}
/* Fallback para navegadores sem :has() — o foco continua visível. */
.escolha-opcoes input:focus-visible {
  outline: 2px solid var(--roxo); outline-offset: 3px;
}

/* ---------- caixa de premissa (o que a conta assume) ---------- */
.premissa-caixa {
  background: var(--nude); border-radius: 12px;
  padding: 15px 17px; margin-top: 16px;
}
.premissa-caixa p { font-size: 0.86rem; line-height: 1.65; margin: 0 0 10px; }
.premissa-caixa p:last-child { margin-bottom: 0; }
.premissa-nota {
  color: var(--tinta-suave); font-size: 0.8rem !important;
  border-top: 1px solid rgba(94, 59, 96, 0.14); padding-top: 10px;
}

/* ---------- "por que perguntamos" ---------- */
.porque { margin-top: 10px; }
.porque-solto { margin-top: 26px; }
.porque summary {
  cursor: pointer; font-size: 0.82rem; color: var(--roxo);
  font-weight: 500; list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.porque summary::-webkit-details-marker { display: none; }
.porque summary::before { content: "?"; flex: none;
  width: 16px; height: 16px; border-radius: 50%; background: var(--lavanda);
  color: var(--roxo); font-size: 0.7rem; display: grid; place-items: center; font-weight: 700;
}
.porque summary:hover { color: var(--roxo-claro); }
.porque[open] summary { margin-bottom: 8px; }
.porque p {
  font-size: 0.86rem; color: var(--tinta-suave); line-height: 1.6;
  background: var(--nude); border-radius: 10px; padding: 12px 14px; margin: 0;
}

/* ---------- objetivos dinâmicos ---------- */
.lista-objetivos { display: grid; gap: 12px; margin: 14px 0; }
/* `start`, não `end`: os campos de valor carregam uma dica embaixo ("o que
   dá para bancar") e ficam mais altos que os de data. Alinhados pelo fim,
   a caixa de "De" descia e desencontrava de "Mínimo/Desejado por mês";
   alinhados pelo começo, os rótulos e os campos ficam na mesma linha. */
.objetivo-linha {
  display: grid; gap: 12px; align-items: start;
  background: var(--off-white); border: 1px solid var(--linha);
  border-radius: 12px; padding: 14px 16px;
}
/* Cada objetivo agora tem nome, dois valores e uma ou duas datas. Em vez
   de contar colunas (que estourava com o seletor de mês por extenso), o
   grid distribui pela largura mínima e quebra sozinho quando não cabe. */
.objetivo-pontual,
.objetivo-recorrente {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.objetivo-linha .obj-nome { grid-column: 1 / -1; }
/* Filho de grid tem `min-width: auto`: não encolhe abaixo do próprio
   conteúdo e vaza o card. `min-width: 0` deixa as frações mandarem. */
.objetivo-linha > div { min-width: 0; }
.objetivo-linha label { display: block; font-size: 0.78rem; margin-bottom: 6px; }
.objetivo-linha input,
.objetivo-linha select { padding: 9px 11px; font-size: 0.92rem; }
.obj-dica {
  display: block; font-size: 0.72rem; color: var(--tinta-suave); margin-top: 5px;
}

/* Mês por extenso + ano digitável. Duas colunas fixas em vez de um
   `<input type="month">`, que o navegador desenha como "---- de ----" e
   estoura a coluna sem dizer nada a quem preenche. */
.mesano { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; }
.mesano > * { min-width: 0; }
.mesano select,
.mesano input {
  width: 100%; font-family: var(--font-body); color: var(--tinta);
  background: var(--off-white); border: 1px solid var(--linha);
  border-radius: 10px; transition: border-color 0.2s, box-shadow 0.2s;
}
.mesano select { appearance: none; padding-right: 26px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b5f66' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.mesano select:focus-visible,
.mesano input:focus-visible {
  outline: none; border-color: var(--roxo);
  box-shadow: 0 0 0 3px rgba(94, 59, 96, 0.15);
}
.remover-objetivo {
  /* o único filho do grid que continua colado no fim: alinha com o campo
     ao lado, não com o rótulo dele. */
  align-self: end;
  flex: none; width: 34px; height: 40px; border: 0; background: none; cursor: pointer;
  color: var(--tinta-suave); font-size: 1.3rem; line-height: 1; border-radius: 8px;
}
.remover-objetivo:hover { color: var(--coral); background: var(--nude); }

/* ---------- navegação ---------- */
.passo-nav {
  display: flex; gap: 12px; align-items: center;
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--linha);
}
.passo-nav .btn:last-child { margin-left: auto; }
.erro-form {
  margin-top: 16px; padding: 12px 16px; border-radius: 10px;
  background: #fdecee; border-left: 4px solid var(--coral);
  color: #8f3742; font-size: 0.9rem;
}

/* ---------- resultado ---------- */
.resultado { margin-top: 44px; }
.resultado-topo {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; margin-bottom: 8px;
}
.resultado-topo h2 { color: var(--roxo); font-size: 1.9rem; }
.resultado-sub { color: var(--tinta-suave); font-size: 0.9rem; margin: 4px 0 0; }

/* O seletor de visão precisa parecer botão de verdade: borda roxa, opção
   ativa preenchida. É a única interação do resultado. */
.visao-toggle {
  display: inline-flex; background: #fff; border: 2px solid var(--roxo);
  border-radius: 99px; padding: 3px; gap: 2px;
}
.visao-toggle button {
  border: 0; background: none; cursor: pointer; border-radius: 99px;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  color: var(--tinta); padding: 8px 16px; white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.visao-toggle button:hover { color: var(--roxo); }
.visao-toggle button[aria-selected="true"] {
  background: var(--roxo); color: #fff; font-weight: 600;
}
.visao-explicacao {
  color: var(--tinta-suave); font-size: 0.95rem; max-width: 70ch; margin: 14px 0 28px;
}

.balanco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
/* Mesmo motivo das linhas de objetivo: sem `min-width: 0` a coluna se
   recusa a encolher abaixo do maior número (que é `nowrap`) e vaza. */
.coluna { min-width: 0; }
.coluna h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.coluna-ativos h3 { color: var(--jade); }
.coluna-passivos h3 { color: var(--coral); }
.ponto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ponto-ativo { background: var(--jade); }
.ponto-passivo { background: var(--coral); }

.grupo-card {
  background: #fff; border: 1px solid var(--linha); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 12px;
}
.grupo-card-topo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.grupo-card-nome { font-size: 0.9rem; font-weight: 600; color: var(--tinta); }
.grupo-card-valor { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.coluna-ativos .grupo-card-valor { color: var(--jade); }
.coluna-passivos .grupo-card-valor { color: var(--coral); }
.grupo-itens { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.grupo-item {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 0.85rem; color: var(--tinta-suave); padding: 4px 0;
}
/* O rótulo precisa poder quebrar: sem `min-width: 0` ele ocupa a linha
   inteira e empurra o valor (que é `nowrap`) para fora da tela no celular. */
.grupo-item > span:first-child { min-width: 0; overflow-wrap: anywhere; }
/* O `>` é obrigatório: sem ele o seletor pega qualquer span que seja o
   último filho do SEU pai — inclusive o detalhe, que fica dentro do span
   do rótulo. Herdando `nowrap`, o detalhe não quebrava linha e vazava do
   card para cima da coluna de passivos. */
.grupo-item > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.grupo-item-detalhe {
  display: block; font-size: 0.76rem; opacity: 0.75;
  white-space: normal; overflow-wrap: anywhere; margin-top: 2px;
}

.total {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  border-radius: 14px; padding: 16px 18px; margin-top: 4px;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.total strong { font-size: 1.3rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.total-ativos { background: rgba(91, 170, 145, 0.12); color: var(--jade); }
.total-passivos { background: rgba(217, 122, 133, 0.12); color: var(--coral); }

/* A barra travada do resultado: número + troca de visão + botão de contato.
   Cola logo abaixo do cabeçalho do site (sticky, 73px) enquanto a pessoa
   rola — a resposta e o convite nunca saem da frente. O fundo opaco cobre
   o conteúdo que passa por baixo. */
.resultado-fixo {
  position: sticky; top: 73px; z-index: 50;
  background: var(--off-white); padding: 10px 0 12px;
  box-shadow: 0 12px 14px -14px rgba(46, 26, 47, 0.28);
}
.pl-faixa {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--roxo); color: #fff; border-radius: var(--radius);
  padding: 16px 22px;
  font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.pl-faixa strong { font-size: 1.7rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pl-faixa.negativo { background: var(--vinho); }
.fixo-acoes {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px;
}
.fixo-acoes .btn { white-space: nowrap; }
.pl-leitura {
  color: var(--tinta-suave); font-size: 0.92rem; max-width: 70ch; margin: 16px 0 0;
}
/* Por que a casa ficou fora da manchete. Colada na faixa roxa e com a borda
   do lado esquerdo: é uma nota de rodapé do número grande, não um número
   concorrente. */
.pl-moradia-nota {
  background: var(--nude); border-left: 4px solid var(--roxo);
  border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 14px 0 0;
  font-size: 0.9rem; line-height: 1.65; color: var(--tinta); max-width: 70ch;
}
.pl-moradia-nota strong { color: var(--roxo); }

/* A conciliação fecha a conta das colunas com a manchete: total − casa =
   número lá de cima. Discreta de propósito — é apoio, não manchete. */
.pl-recon {
  margin-top: 16px; border: 1px solid var(--linha); border-radius: 12px;
  padding: 6px 18px; max-width: 560px; background: #fff;
}
.pl-recon div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 0.85rem; color: var(--tinta-suave); padding: 8px 0;
}
.pl-recon div + div { border-top: 1px dashed var(--linha); }
.pl-recon strong { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.pl-recon .pl-recon-final { color: var(--roxo); font-weight: 600; }
.pl-recon .pl-recon-final strong { font-weight: 700; }

.resultado-acoes {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 32px 0 8px;
}
.resultado-acoes .btn:last-child { margin-left: auto; }
.resultado-rodape { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linha); }
.premissas-usadas { font-size: 0.82rem; color: var(--tinta-suave); }
.aviso-legal { font-size: 0.75rem; color: var(--tinta-suave); opacity: 0.85; line-height: 1.6; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  #form-balanco { padding: 28px 24px 24px; }
  .campos-3 { grid-template-columns: repeat(2, 1fr); }
  .objetivo-pontual { grid-template-columns: 1fr 1fr auto; }
  .objetivo-recorrente { grid-template-columns: 1fr 1fr auto; }
}

@media (max-width: 720px) {
  .calc-hero { padding: 48px 0 40px; }
  .balanco-grid { grid-template-columns: 1fr; }
  .passos-lista { font-size: 0; }
  .passos-lista li::before {
    content: attr(data-marca); font-size: 0.8rem;
    display: inline-grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%; background: var(--linha); color: var(--tinta-suave);
  }
  .passos-lista li.ativo::before { background: var(--roxo); color: #fff; }
  .passos-lista li.concluido::before { background: var(--jade); color: #fff; }
  .resultado-topo { align-items: flex-start; }
  .visao-toggle { flex: 1; justify-content: space-between; }
  .visao-toggle button { flex: 1; padding: 8px 10px; }
}

@media (max-width: 540px) {
  #form-balanco { padding: 22px 18px 20px; border-radius: 14px; }
  .campos-2, .campos-3 { grid-template-columns: 1fr; }
  .objetivo-pontual, .objetivo-recorrente { grid-template-columns: 1fr; }
  .remover-objetivo { width: 100%; height: 36px; border: 1px solid var(--linha); }
  .passo legend { font-size: 1.25rem; }
  /* A barra travada precisa ficar BAIXA no celular: número e ações em uma
     linha cada, sem quebra, senão ela come meia tela. */
  .pl-faixa { padding: 12px 14px; gap: 10px; }
  .pl-faixa > span { font-size: 0.68rem; letter-spacing: 0.04em; white-space: nowrap; }
  .pl-faixa strong { font-size: 1.25rem; }
  .fixo-acoes { gap: 8px; }
  .fixo-acoes .btn { padding: 8px 11px; font-size: 0.8rem; }
  .visao-toggle button { padding: 7px 7px; font-size: 0.78rem; }
  .total { flex-direction: column; align-items: flex-start; gap: 4px; }
  .resultado-acoes .btn { width: 100%; margin-left: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .passos-preenchido, .passos-lista li, .campo input, .visao-toggle button {
    transition: none;
  }
}

/* ---------- avisos de premissa (preço de hoje, títulos públicos) ---------- */
.aviso-preco-hoje,
.calc-selo {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: 12px; padding: 14px 18px; margin: 0 0 26px;
  font-size: 0.88rem; line-height: 1.6;
}
.aviso-preco-hoje {
  background: var(--nude); border-left: 4px solid var(--laranja); color: var(--tinta);
}
.calc-selo {
  background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--jade);
  color: var(--tinta); margin: 0 0 14px;
}
.aviso-preco-hoje > span:first-child,
.calc-selo > span:first-child { flex: none; font-size: 1.05rem; line-height: 1.4; }

/* ---------- matriz do custo de vida (2 padrões × 2 fases) ---------- */
.matriz-custo { display: grid; gap: 14px; margin-top: 16px; }
.matriz-cabecalho,
.matriz-linha { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; align-items: end; }
.matriz-cabecalho > *, .matriz-linha > * { min-width: 0; }
.matriz-cabecalho {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--tinta-suave);
  padding-bottom: 4px; border-bottom: 1px solid var(--linha);
}
/* O `>` importa: sem ele, um negrito DENTRO do subtítulo (ex.: "garantido")
   também viraria bloco e quebraria a frase no meio. */
.matriz-rotulo > strong { display: block; font-size: 0.92rem; color: var(--tinta); }
.matriz-rotulo span { display: block; font-size: 0.78rem; color: var(--tinta-suave); margin-top: 3px; }
/* Os rótulos por campo repetem o cabeçalho: viram redundância no desktop,
   mas são a única pista quando o grid quebra em uma coluna no celular. */
.matriz-linha .campo label { font-size: 0.78rem; color: var(--tinta-suave); }

/* ---------- resultado: o que é um balanço, antes dos números ---------- */
.balanco-intro {
  background: var(--nude); border-left: 4px solid var(--roxo);
  border-radius: 12px; padding: 18px 22px; margin: 18px 0 24px; max-width: 78ch;
}
.balanco-intro p { font-size: 0.9rem; line-height: 1.7; margin: 0 0 12px; }
.balanco-intro p:last-child { margin-bottom: 0; }
.balanco-intro-nota {
  color: var(--tinta-suave); font-size: 0.82rem !important;
  border-top: 1px solid rgba(94, 59, 96, 0.14); padding-top: 12px;
}

/* O "?" de cada caixa do balanço — mesma pastilha do "por que perguntamos",
   para que o visitante reconheça o gesto de uma seção para a outra. */
.ajuda-link,
.ajuda-exemplo {
  display: inline-grid; place-items: center; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--lavanda); color: var(--roxo);
  font-size: 0.7rem; font-weight: 700; line-height: 1;
  text-decoration: none; vertical-align: 1px; margin-left: 7px;
}
.ajuda-link { cursor: pointer; transition: background 0.2s, color 0.2s; }
.ajuda-link:hover { background: var(--roxo); color: #fff; }
.ajuda-link:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
.ajuda-exemplo { margin: 0 2px; }

/* ---------- resultado: explicações e CTA ---------- */
.entendendo { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linha); }
.entendendo h3 {
  font-family: var(--font-head); font-size: 1.25rem; color: var(--roxo); margin-bottom: 6px;
}

.cta-final {
  margin-top: 40px; background: var(--nude); border-radius: 16px; padding: 30px 32px;
}
.cta-final h3 {
  font-family: var(--font-head); font-size: 1.4rem; color: var(--roxo);
  margin: 0 0 12px; line-height: 1.3;
}
.cta-final > p { font-size: 0.95rem; line-height: 1.7; margin: 0 0 16px; }
.cta-lista { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.cta-lista li {
  font-size: 0.92rem; line-height: 1.6; padding-left: 24px; position: relative;
}
.cta-lista li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral);
}
.cta-fecho {
  font-size: 0.88rem; color: var(--tinta-suave);
  border-top: 1px solid rgba(94, 59, 96, 0.14); padding-top: 16px;
}
.cta-final .resultado-acoes { margin-top: 20px; }

@media (max-width: 720px) {
  .matriz-cabecalho { display: none; }
  .matriz-linha { grid-template-columns: 1fr; gap: 12px; }
  .matriz-linha { border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; }
  .cta-final { padding: 24px 20px; }
  .cta-final h3 { font-size: 1.2rem; }
}

/* O mês por extenso ("fevereiro") e um ano de 4 dígitos não cabem numa
   coluna de 150px: o texto cortava e o ano virava "2(". A data ocupa duas
   colunas do grid e o ano perde a seta de incremento, que só roubava
   espaço num campo em que ninguém clica de 1 em 1 ano. */
.objetivo-linha .obj-quando { grid-column: span 2; min-width: 250px; }
.mesano input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.mesano input[type="number"]::-webkit-outer-spin-button,
.mesano input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 540px) {
  .objetivo-linha .obj-quando { grid-column: 1 / -1; min-width: 0; }
}