/* ═══════════════════════════════════════════════════════════════════════════
   /recursos e /recursos/calculadora

   Carregado só nessas rotas (ver medza_recurso_atual). Não define paleta nem
   fonte próprias: tudo sai dos tokens do MeDS que o hero.css já publica, para
   a página não virar um segundo sistema visual dentro do mesmo site.
   ═══════════════════════════════════════════════════════════════════════════ */

.calc {
  --calc-borda: var(--meds-border-default);
  --calc-borda-fraca: var(--meds-border-subtle);
  --calc-fundo: var(--meds-surface-subtle);
  --calc-raio: 16px;
  /* Sem padding lateral aqui: a casca já recua com --shell-inset e quem devolve
     a medida do site (120px da borda) é a regra .page-shell .calc-* no hero.css,
     a mesma que alinha hero, planos e FAQ. Padding próprio somaria aos dois e
     era o que deixava o bloco de contato fora do prumo. */
  padding-block: 96px 128px;
}

/* Base é o mobile; acima de 900px a casca sobrescreve com a medida do site. */
.calc-porta,
.calc-app,
.rec-topo,
.rec-grade,
.bloco-contato { padding-inline: 20px; }

/* A régua da página é o banner de contato, que é `max-width: 1080px` centrado
   dentro da calha de 120px. Sem repetir essa conta, as seções acompanhariam a
   casca inteira e só coincidiriam com o banner por volta de 1280px, onde a
   área disponível é menor que 1080 e ele enche tudo. Acima disso o banner
   trava e o conteúdo continua largo — era o desalinho visível em tela grande.
   O box soma as duas calhas ao 1080 porque o padding é interno (border-box). */
@media (min-width: 901px) {
  .calc-porta,
  .calc-app,
  .rec-topo,
  .rec-grade {
    max-width: calc(1080px + 2 * (120px - var(--shell-inset)));
    margin-inline: auto;
  }
}

/* O espaço até o bloco de contato: 32px vinham só da margem do próprio
   .contact-box e colavam o banner no conteúdo. */
.bloco-contato { margin-top: var(--meds-spacing-space-48); }

/* ── porta ───────────────────────────────────────────────────────────────── */

.calc-porta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 80px;
  align-items: start;
}

.calc-titulo {
  margin: 20px 0 0;
  font-family: 'Space Grotesk', var(--meds-font-family-sans);
  font-size: var(--meds-font-size-5xl);
  font-weight: var(--meds-font-weight-regular);
  line-height: var(--meds-line-height-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.calc-lead {
  margin: 16px 0 0;
  font-size: var(--meds-font-size-lg);
  line-height: var(--meds-line-height-body);
  color: var(--meds-text-secondary);
  max-width: 58ch;
}

.calc-bullets {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 52ch;
}
.calc-bullets li {
  position: relative;
  padding-left: 26px;
  font-size: var(--meds-font-size-md);
  color: var(--meds-text-secondary);
  line-height: var(--meds-line-height-normal);
}
.calc-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--meds-interactive-primary-default);
}
.calc-bullets strong {
  display: block;
  font-size: var(--meds-font-size-lg);
  font-weight: var(--meds-font-weight-semibold);
  color: var(--meds-text-primary);
  margin-bottom: 2px;
}

/* ── formulário ──────────────────────────────────────────────────────────── */

.calc-form-caixa { position: sticky; top: 24px; }

.calc-form {
  background: var(--calc-fundo);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.calc-form-titulo {
  margin: 0;
  font-family: 'Space Grotesk', var(--meds-font-family-sans);
  font-size: var(--meds-font-size-2xl);
  font-weight: var(--meds-font-weight-regular);
  line-height: var(--meds-line-height-snug);
}
.calc-form-sub {
  margin: -8px 0 4px;
  font-size: var(--meds-font-size-md);
  color: var(--meds-text-secondary);
}

/* Campo de texto no padrão do TextField do MeDS (medza-ai/meds), incluindo o
   rótulo flutuante. Lá o estado vive em React; aqui sai de :placeholder-shown,
   e por isso todo input carrega um placeholder — mesmo que seja um espaço.
   Valores conferidos no componente: 48px de altura, raio 8px, borda 1px,
   verde da marca no foco com anel de 1px por box-shadow (sem deslocar layout),
   e 250ms de transição. */
.calc-campo { position: relative; display: block; }

.calc-campo input {
  width: 100%;
  height: 48px;
  padding: 0 var(--meds-spacing-space-12);
  border: 1px solid var(--calc-borda);
  border-radius: 8px;
  background: var(--meds-surface-page);
  font-family: var(--meds-font-family-sans);
  font-size: var(--meds-font-size-md);
  color: var(--meds-text-primary);
  outline: none;
  transition:
    border-color var(--meds-transition-normal),
    box-shadow var(--meds-transition-normal),
    background-color var(--meds-transition-normal);
}
.calc-campo input:hover { border-color: var(--meds-text-tertiary); }   /* border.strong */
.calc-campo input:focus {
  border-color: var(--meds-interactive-primary-default);
  box-shadow: 0 0 0 1px var(--meds-interactive-primary-default);
}
.calc-campo input[aria-invalid="true"] {
  border-color: #B23A16;
  box-shadow: none;
}

/* O placeholder de verdade só aparece com o campo em foco: parado, quem ocupa
   aquele espaço é o rótulo, e os dois juntos se sobrepõem. */
.calc-campo input:not(:focus)::placeholder { color: transparent; }
.calc-campo input::placeholder { color: var(--meds-text-tertiary); }

.calc-campo > span {
  position: absolute;
  left: 14px;
  top: 24px;                       /* metade dos 48px do campo */
  transform: translateY(-50%);
  padding: 0 2px;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Em repouso o rótulo está DENTRO do input, que é branco: com fundo próprio
     ele aparece como um retângulo cinza atrás do texto. O fundo só existe para
     mascarar a borda quando o rótulo sobe, então só entra lá. */
  background: transparent;
  color: var(--meds-text-tertiary);
  font-size: var(--meds-font-size-md);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transition: all var(--meds-transition-normal);
}
/* Sobe para a borda quando há foco ou conteúdo. */
.calc-campo input:focus + span,
.calc-campo input:not(:placeholder-shown) + span {
  top: 0;
  font-size: var(--meds-font-size-sm);
  color: var(--meds-text-secondary);
  background: var(--calc-fundo);   /* a superfície do cartão, para cobrir a borda */
}
.calc-campo > span em {
  font-style: normal;
  color: var(--meds-text-tertiary);
}

/* fora da tela sem display:none, para o robô achar e a pessoa não */
.calc-isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Caixa de aceite no padrão do Checkbox do MeDS: 16px, raio 4px, borda de 2px,
   e quando marcada a borda e o fundo viram o verde da marca com o "check" em
   text.on-brand. O componente centraliza a caixa com o rótulo, mas ele assume
   rótulo de uma linha; aqui o texto tem três, então a caixa alinha pelo topo. */
.calc-aceite {
  display: flex;
  align-items: flex-start;
  gap: var(--meds-spacing-space-8);
  cursor: pointer;
}

/* O input nativo continua no DOM, invisível: é ele que carrega o estado, o
   `required` e o foco do teclado. Some com clip, não com display:none, que o
   tiraria da ordem de tabulação. */
.calc-aceite input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.calc-caixa {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;                 /* acompanha a primeira linha do texto */
  border: 2px solid var(--meds-border-default);
  border-radius: 4px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--meds-transition-normal),
    border-color var(--meds-transition-normal);
}
.calc-caixa svg {
  width: 14px;
  height: 14px;
  color: var(--meds-text-on-brand);
  opacity: 0;
}
.calc-aceite input:checked + .calc-caixa {
  border-color: var(--meds-interactive-primary-default);
  background: var(--meds-interactive-primary-default);
}
.calc-aceite input:checked + .calc-caixa svg { opacity: 1; }
.calc-aceite input:focus-visible + .calc-caixa {
  box-shadow: 0 0 0 2px var(--meds-surface-page), 0 0 0 4px var(--meds-interactive-primary-default);
}

.calc-aceite-txt {
  font-size: var(--meds-font-size-sm);
  line-height: var(--meds-line-height-normal);
  color: var(--meds-text-secondary);
  user-select: none;
}
.calc-aceite a { color: var(--meds-text-brand); }

.calc-erro {
  margin: 0;
  font-size: var(--meds-font-size-sm);
  color: #B23A16;
}

.calc-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--meds-interactive-primary-default);
  color: var(--meds-text-on-brand);
  font-family: var(--meds-font-family-sans);
  font-size: var(--meds-font-size-lg);
  font-weight: var(--meds-font-weight-semibold);
  cursor: pointer;
  transition: background var(--meds-transition-fast);
}
.calc-botao:hover { background: var(--meds-interactive-primary-hover); }
.calc-botao:disabled { opacity: .6; cursor: progress; }
.calc-botao svg { width: 18px; height: 18px; }

.calc-form-nota {
  margin: 0;
  text-align: center;
  font-size: var(--meds-font-size-sm);
  color: var(--meds-text-tertiary);
}

/* ── calculadora ─────────────────────────────────────────────────────────── */

/* Enquanto responde: coluna única e centralizada, sem nada disputando atenção.
   Ao terminar (.pronto), ela abre para a esquerda e o resultado entra à direita.
   Ver o bloco de transição mais abaixo. */
.calc-app-topo { max-width: 640px; margin: 0 auto 40px; }

/* Coluna única. Enquanto responde, a pessoa não divide a atenção com o
   resultado; e como o painel só aparece no fim, uma barra lateral deixaria
   metade da tela vazia durante todo o fluxo. */
/* Duas colunas desde sempre, com a segunda em 0px enquanto ninguém a usa.
   É o que permite animar: entre uma faixa e duas o navegador não interpola,
   mas entre 0px e 344px sim. */
.calc-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0px;
  gap: 32px 0;
  max-width: 640px;
  margin-inline: auto;
}

.calc-prog { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.calc-trilho {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--calc-borda-fraca);
  overflow: hidden;
}
.calc-trilho i {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: 999px;
  background: var(--meds-interactive-primary-default);
  transition: width .25s;
}
.calc-prog-n {
  font-size: var(--meds-font-size-sm);
  color: var(--meds-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-passos { display: flex; flex-direction: column; gap: 8px; }
.calc-passo { border-radius: var(--calc-raio); }

.calc-passo.feito {
  display: grid;
  grid-template-columns: auto 1fr auto;   /* check · resumo · editar */
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 13px 18px;
  background: var(--calc-fundo);
  border: 1px solid var(--calc-borda-fraca);
  font-family: var(--meds-font-family-sans);
  text-align: left;
  cursor: pointer;
}
.calc-passo.feito:hover { border-color: var(--calc-borda); }
.calc-feito-check {
  width: 16px;
  height: 16px;
  color: var(--meds-interactive-primary-default);
}
.calc-passo.feito .r { font-size: var(--meds-font-size-md); color: var(--meds-text-primary); }
.calc-passo.feito .ed { font-size: var(--meds-font-size-sm); color: var(--meds-text-secondary); }

.calc-passo.ativo {
  background: var(--meds-surface-page);
  border: 1px solid var(--calc-borda);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.calc-passo.ativo h3 {
  margin: 0;
  font-size: var(--meds-font-size-xl);
  font-weight: var(--meds-font-weight-semibold);
  line-height: var(--meds-line-height-heading);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.calc-passo.ativo .dica {
  margin: -8px 0 0;
  font-size: var(--meds-font-size-md);
  color: var(--meds-text-secondary);
}
.calc-passo.fim { background: var(--meds-surface-accent-subtle); border-color: transparent; }


.calc-controles { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.calc-campo-num { display: flex; flex-direction: column; gap: 7px; }
.calc-rot {
  font-size: var(--meds-font-size-sm);
  font-weight: var(--meds-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--meds-text-secondary);
}
.calc-in {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--calc-borda);
  border-radius: 12px;
  background: var(--meds-surface-page);
}
.calc-in:focus-within { border-color: var(--meds-text-primary); }
.calc-in input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 5ch;
  font-family: var(--meds-font-family-sans);
  font-size: var(--meds-font-size-xl);
  font-weight: var(--meds-font-weight-medium);
  color: var(--meds-text-primary);
  font-variant-numeric: tabular-nums;
}
.calc-in--largo input { width: 7ch; }
.calc-in .u { font-size: var(--meds-font-size-md); color: var(--meds-text-secondary); white-space: nowrap; }

.calc-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-ops button {
  border: 1px solid var(--calc-borda);
  border-radius: 999px;
  padding: 11px 18px;
  background: var(--meds-surface-page);
  color: var(--meds-text-primary);
  font-family: var(--meds-font-family-sans);
  font-size: var(--meds-font-size-md);
  cursor: pointer;
}
.calc-ops button small { display: block; font-size: var(--meds-font-size-sm); color: var(--meds-text-secondary); margin-top: 1px; }
.calc-ops button[aria-pressed="true"] {
  background: var(--meds-text-primary);
  border-color: var(--meds-text-primary);
  color: var(--meds-surface-page);
}
.calc-ops button[aria-pressed="true"] small { color: rgba(255,255,255,.6); }

/* Lista de opções. O círculo segue o RadioButton do MeDS: 16px, borda de 2px,
   e selecionado vira o verde da marca com o ponto interno em text.on-brand.
   A linha inteira é clicável e ganha borda verde quando escolhida — com quatro
   alternativas empilhadas, só o círculo marcado é discreto demais para dizer
   qual está valendo. */
.calc-opcoes { display: flex; flex-direction: column; gap: 8px; }

.calc-opcao {
  display: flex;
  align-items: center;
  gap: var(--meds-spacing-space-8);
  padding: 14px 16px;
  border: 1px solid var(--calc-borda);
  border-radius: 12px;
  background: var(--meds-surface-page);
  cursor: pointer;
  transition:
    border-color var(--meds-transition-normal),
    background-color var(--meds-transition-normal);
}
.calc-opcao:hover { border-color: var(--meds-text-tertiary); }

/* O input nativo carrega o estado, o grupo e o teclado (setas navegam entre as
   opções). Some com clip, não com display:none, que o tiraria da tabulação. */
.calc-opcao input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.calc-radio {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--meds-border-default);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--meds-transition-normal),
    background-color var(--meds-transition-normal);
}
.calc-radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--meds-text-on-brand);
  opacity: 0;
  transition: opacity var(--meds-transition-normal);
}
.calc-opcao input:checked + .calc-radio {
  border-color: var(--meds-interactive-primary-default);
  background: var(--meds-interactive-primary-default);
}
.calc-opcao input:checked + .calc-radio::after { opacity: 1; }
.calc-opcao:has(input:checked) { border-color: var(--meds-interactive-primary-default); }
.calc-opcao input:focus-visible + .calc-radio {
  box-shadow: 0 0 0 2px var(--meds-surface-page), 0 0 0 4px var(--meds-interactive-primary-default);
}

.calc-opcao-txt { display: flex; flex-direction: column; gap: 1px; }
.calc-opcao-txt strong {
  font-size: var(--meds-font-size-md);
  font-weight: var(--meds-font-weight-medium);
  color: var(--meds-text-primary);
}
.calc-opcao-txt small {
  font-size: var(--meds-font-size-sm);
  color: var(--meds-text-secondary);
}

.calc-escala { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; }
.calc-escala .lin { display: flex; align-items: center; gap: 14px; }
.calc-escala input[type=range] { flex: 1; height: 24px; accent-color: var(--meds-interactive-primary-default); }
.calc-escala.amb input[type=range] { accent-color: #B5762A; }
.calc-escala .val {
  font-family: 'Space Grotesk', var(--meds-font-family-sans);
  font-size: var(--meds-font-size-xl);
  min-width: 5.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.calc-escala .cap { font-size: var(--meds-font-size-sm); color: var(--meds-text-secondary); }

/* Pergunta adicional dentro de um passo. A linha e o respiro é que dizem que
   são medidas diferentes; sem eles, os controles empilhados leem como uma
   pergunta só.
   Nome com sufixo de propósito: `.calc-sub` já é o subtítulo do painel verde, e
   a colisão fazia aquele texto virar uma coluna de três linhas. */
.calc-sub-pergunta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* senão o campo de R$ estica para a largura toda */
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--calc-borda-fraca);
}
/* O bloco trava os filhos em flex-start para o campo de R$ não esticar; o
   slider precisa do oposto, senão encolhe para o tamanho do próprio polegar. */
.calc-sub-pergunta .calc-escala { align-self: stretch; }
.calc-sub-pergunta h4 {
  margin: 0;
  font-size: var(--meds-font-size-lg);
  font-weight: var(--meds-font-weight-semibold);
  line-height: var(--meds-line-height-heading);
  color: var(--meds-text-primary);
}

.calc-eco { margin: 0; font-size: var(--meds-font-size-md); color: var(--meds-text-secondary); }
.calc-eco b { color: var(--meds-text-primary); font-variant-numeric: tabular-nums; }

.calc-avanca { display: flex; gap: 14px; flex-wrap: wrap; }
.calc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--meds-text-primary);
  color: var(--meds-surface-page);
  font-family: var(--meds-font-family-sans);
  font-size: var(--meds-font-size-md);
  font-weight: var(--meds-font-weight-semibold);
  cursor: pointer;
}
.calc-btn--verde { background: var(--meds-interactive-primary-default); color: var(--meds-text-on-brand); }
.calc-btn--verde:hover { background: var(--meds-interactive-primary-hover); }
.calc-btn--vazio {
  background: transparent;
  border: 1px solid var(--calc-borda);
  color: var(--meds-text-secondary);
}
.calc-btn--vazio:hover { background: var(--calc-fundo); color: var(--meds-text-primary); }

/* ── painel de resultado ─────────────────────────────────────────────────── */

.calc-res { display: flex; flex-direction: column; gap: 10px; }

/* ── abertura do resultado ───────────────────────────────────────────────── */

@media (min-width: 901px) {
  .calc-app-topo,
  .calc-grade {
    transition:
      max-width var(--calc-abertura) ease,
      margin-inline var(--calc-abertura) ease,
      grid-template-columns var(--calc-abertura) ease,
      gap var(--calc-abertura) ease;
  }
  .calc-app { --calc-abertura: 550ms; }

  /* A coluna das perguntas para de ser centralizada e encosta à esquerda; a
     segunda faixa cresce de 0 até a largura do painel. */
  .calc-app.pronto .calc-app-topo { max-width: none; margin-inline: 0; }
  .calc-app.pronto .calc-grade {
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr) 344px;
    gap: 32px 48px;
  }

  /* O painel entra depois que a faixa já abriu, senão ele aparece espremido. */
  .calc-res {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 400ms ease 250ms, transform 400ms ease 250ms;
  }
  .calc-app.pronto .calc-res { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .calc-app-topo,
  .calc-grade,
  .calc-res { transition: none; }
}

.calc-painel {
  background: var(--meds-surface-accent-default);
  color: var(--meds-text-inverse);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.calc-k {
  font-size: var(--meds-font-size-sm);
  font-weight: var(--meds-font-weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: .65;
}
.calc-painel-titulo {
  margin: 0;
  font-size: var(--meds-font-size-lg);
  font-weight: var(--meds-font-weight-semibold);
  line-height: var(--meds-line-height-heading);
  opacity: .85;
}
.calc-painel-cta {
  align-self: flex-start;
  margin-top: 4px;
  text-decoration: none;
}
.calc-tot {
  font-family: 'Space Grotesk', var(--meds-font-family-sans);
  /* Acompanha a largura do painel: em telas estreitas o 4xl fixo estourava a
     linha e partia a faixa no meio ("a 26 / mil"). */
  font-size: clamp(var(--meds-font-size-2xl), 8.5vw, var(--meds-font-size-4xl));
  line-height: var(--meds-line-height-tight);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
/* A frase que diz o que a faixa mede. Vem logo abaixo do número porque é ali
   que a pergunta "de onde saiu isso?" aparece. */
.calc-explica {
  margin: 0;
  font-size: var(--meds-font-size-md);
  line-height: var(--meds-line-height-normal);
  opacity: .8;
}
.calc-sub { font-size: var(--meds-font-size-md); opacity: .82; }
.calc-sub b { color: var(--meds-interactive-primary-default); font-weight: var(--meds-font-weight-semibold); }

.calc-fontes {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 14px;
}
.calc-fontes-k {
  font-size: var(--meds-font-size-sm);
  font-weight: var(--meds-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 2px;
}
.calc-fonte {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: var(--meds-font-size-md);
}
.calc-fonte i { width: 8px; height: 8px; border-radius: 50%; }
.calc-fonte i.f1 { background: var(--meds-interactive-primary-default); }
.calc-fonte i.f2 { background: #E0A45E; }
.calc-fonte .l { opacity: .8; }
.calc-fonte .v { font-variant-numeric: tabular-nums; font-weight: var(--meds-font-weight-semibold); white-space: nowrap; }

.calc-plano {
  background: var(--calc-fundo);
  border-radius: var(--calc-raio);
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calc-plano-topo { display: flex; justify-content: space-between; gap: 12px; font-size: var(--meds-font-size-md); }
.calc-plano-topo b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-plano-med {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--meds-font-size-sm);
  color: var(--meds-text-secondary);
}
.calc-plano-med .calc-in { height: 38px; padding: 0 10px; }
.calc-plano-med .calc-in input { width: 3.5ch; font-size: var(--meds-font-size-md); }
.calc-plano-obs { font-size: var(--meds-font-size-sm); color: var(--meds-text-secondary); }
.calc-plano-obs:empty { display: none; }

.calc-det { border: 1px solid var(--calc-borda-fraca); border-radius: var(--calc-raio); }
.calc-det summary {
  padding: 14px 18px;
  font-size: var(--meds-font-size-md);
  font-weight: var(--meds-font-weight-semibold);
  color: var(--meds-text-secondary);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calc-det summary::-webkit-details-marker { display: none; }
.calc-det summary::after { content: "+"; font-family: 'Space Grotesk', var(--meds-font-family-sans); font-size: 19px; }
.calc-det[open] summary::after { content: "–"; }
.calc-det-corpo { padding: 0 18px 16px; }
.calc-det-corpo h4 {
  margin: 12px 0 4px;
  font-size: var(--meds-font-size-sm);
  font-weight: var(--meds-font-weight-semibold);
  display: flex;
  align-items: center;
  gap: 7px;
}
.calc-det-corpo h4:first-child { margin-top: 0; }
.calc-det-corpo h4 i { width: 7px; height: 7px; border-radius: 50%; }
.calc-det-corpo h4 i.f1 { background: var(--meds-interactive-primary-default); }
.calc-det-corpo h4 i.f2 { background: #B5762A; }
/* Detalhamento em três tempos: o que a pessoa informou, a premissa da Medza
   (marcada, para ninguém confundir com dado próprio) e o resultado. A etiqueta
   é o ponto: é ela que responde "de onde saiu esse número?" antes da pergunta. */
.calc-bloco { display: flex; flex-direction: column; gap: 14px; }
.calc-bloco + .calc-bloco {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--calc-borda-fraca);
}
.calc-bloco h4 { margin: 0; }
#calc-bloco-cob[hidden] { display: none; }
.calc-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--meds-font-size-sm);
  line-height: 1.45;
  color: var(--meds-text-secondary);
}
.calc-grupo p { margin: 0; }
.calc-grupo b { color: var(--meds-text-primary); font-weight: var(--meds-font-weight-semibold); }
.calc-grupo-k {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  font-weight: var(--meds-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--meds-text-tertiary);
}
.calc-tag {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--calc-borda);
  background: var(--meds-surface-page);
  color: var(--meds-text-secondary);
  letter-spacing: 0.02em;
  text-transform: none;
}
.calc-fatos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calc-fatos li { position: relative; padding-left: 14px; }
.calc-fatos li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--meds-text-tertiary);
}
.calc-grupo--total {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--calc-fundo);
}
.calc-grupo--total b { font-size: var(--meds-font-size-md); }
.calc-grupo--total .calc-grupo-valor { color: var(--meds-text-brand); }
#calc-bloco-cob[hidden] { display: none; }
.calc-det-corpo ul {
  margin: 0;
  padding-left: 17px;
  font-size: var(--meds-font-size-sm);
  color: var(--meds-text-secondary);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ── mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .calc { padding-block: 40px 64px; }
  .calc-porta { grid-template-columns: 1fr; gap: 32px; }
  .calc-form-caixa { position: static; }
  .calc-titulo { font-size: var(--meds-font-size-4xl); }
  .calc-bullets { margin-top: 28px; }
  /* A segunda faixa de 0px só faz sentido onde ela pode abrir. Sem isto o
     painel cairia numa coluna de largura zero no celular. */
  .calc-grade { grid-template-columns: 1fr; gap: 24px; }
  .calc-passo.ativo { padding: 22px; }
  .calc-form { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .calc-trilho i { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /recursos — índice

   Mora neste arquivo porque o índice e a calculadora carregam juntos: são a
   mesma rota do ponto de vista dos assets, e separar em dois arquivos custaria
   uma requisição a mais para economizar 2 KB.
   ═══════════════════════════════════════════════════════════════════════════ */

.rec { padding-block: 96px 128px; }

.rec-topo { margin-bottom: 48px; }
/* O limite de leitura fica no texto, não no bloco: o bloco precisa acompanhar a
   régua da página para o cabeçalho alinhar com os cards e com o banner. */
.rec-titulo, .rec-lead { max-width: 620px; }
.rec-titulo {
  margin: 20px 0 0;
  font-family: 'Space Grotesk', var(--meds-font-family-sans);
  font-size: var(--meds-font-size-5xl);
  font-weight: var(--meds-font-weight-regular);
  line-height: var(--meds-line-height-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.rec-lead {
  margin: 16px 0 0;
  font-size: var(--meds-font-size-lg);
  line-height: var(--meds-line-height-body);
  color: var(--meds-text-secondary);
}

.rec-grade {
  list-style: none;
  margin-block: 0 96px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.rec-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 28px;
  border-radius: 24px;
  background: var(--meds-surface-subtle);
  color: var(--meds-text-primary);
  text-decoration: none;
  transition: transform var(--meds-transition-fast), background var(--meds-transition-fast);
}
a.rec-card:hover { background: var(--meds-surface-accent-subtle); transform: translateY(-2px); }

/* O cartão de "em breve" não é link: sem hover, sem seta, sem cursor de mão. */
.rec-card--vazio {
  background: transparent;
  border: 1px dashed var(--meds-border-default);
  color: var(--meds-text-secondary);
}

.rec-meta { display: flex; align-items: center; gap: 10px; }
.rec-tipo {
  font-size: var(--meds-font-size-sm);
  font-weight: var(--meds-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meds-text-brand);
}
.rec-card--vazio .rec-tipo { color: var(--meds-text-tertiary); }
.rec-tempo {
  font-size: var(--meds-font-size-sm);
  color: var(--meds-text-secondary);
  padding-left: 10px;
  border-left: 1px solid var(--meds-border-default);
}

.rec-card-titulo {
  font-family: 'Space Grotesk', var(--meds-font-family-sans);
  font-size: var(--meds-font-size-2xl);
  font-weight: var(--meds-font-weight-regular);
  line-height: var(--meds-line-height-snug);
  letter-spacing: -0.01em;
}
.rec-card-texto {
  font-size: var(--meds-font-size-md);
  line-height: var(--meds-line-height-normal);
  color: var(--meds-text-secondary);
}
.rec-card-cta {
  margin-top: auto;
  padding-top: 12px;
  font-size: var(--meds-font-size-md);
  font-weight: var(--meds-font-weight-semibold);
  color: var(--meds-text-brand);
}

@media (max-width: 900px) {
  .rec { padding-block: 40px 64px; }
  .rec-titulo { font-size: var(--meds-font-size-4xl); }
  .rec-topo { margin-bottom: 32px; }
  .rec-grade { grid-template-columns: 1fr; margin-bottom: 64px; }
  .rec-card { padding: 24px; }
}