/* ============================================================================
   Atrium Finance — portal do cliente (interessado e cedente)

   Carregado só fora do backoffice (`base.html`), depois do `app.css`, e lê os
   mesmos tokens. Nada aqui muda as telas internas: é o que permite evoluir a
   experiência do cliente sem regressão na operação da XVI.

   A assinatura continua sendo a régua do dossiê. Aqui ela aparece também na
   apresentação (posição entre as telas) e na trilha "Seu caminho até aqui".
   Dourado segue escasso: só a próxima ação do topo.
   ========================================================================== */

/* ─── Apresentação ────────────────────────────────────────────────────────── */
.intro { max-width: 64ch; }
.intro-position { color: var(--ink-3); font-size: 12px; font-weight: 600; }
/* As três telas são uma sequência de verdade: a régua mostra onde se está. */
.intro-ruler {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  margin: 8px 0 0; padding: 0; list-style: none;
}
.intro-ruler li { height: 3px; border-radius: 2px; background: var(--line-2); }
.intro-ruler li.is-done { background: var(--good); }
.intro-ruler li.is-current { background: var(--gold); }
.intro h1 {
  margin-top: 22px; font-size: 28px; font-stretch: 112%; line-height: 1.15;
  letter-spacing: -.01em; text-wrap: balance;
}
.intro .lede { margin-top: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.intro-path {
  margin: 22px 0 0; padding: 0; list-style: none; counter-reset: intro-step;
  border-top: 1px solid var(--line);
}
.intro-path li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line); counter-increment: intro-step;
}
.intro-path li::before {
  content: counter(intro-step); grid-row: span 2;
  color: var(--gold-ink); font-size: 18px; font-stretch: 112%; font-weight: 600; line-height: 1.2;
}
.intro-path strong { font-size: 13.5px; font-weight: 600; }
.intro-path span { color: var(--ink-3); font-size: 12.5px; }
.intro-terms { margin: 18px 0 0; padding: 0 0 0 18px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.intro-terms li + li { margin-top: 8px; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

/* ─── Seu caminho até aqui ────────────────────────────────────────────────── */
/* Trilha vertical: o traço fica verde até o último marco alcançado. Marco é
   trabalho feito, nunca chance de aprovação — por isso nada aqui é dourado. */
.achievements { margin: 0; padding: 16px; list-style: none; }
.achievements li { position: relative; padding: 0 0 16px 26px; }
.achievements li:last-child { padding-bottom: 0; }
.achievements li::before {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 8px; height: 8px; border: 2px solid var(--line-2); border-radius: 50%;
  background: var(--surface);
}
.achievements li::after {
  content: ""; position: absolute; left: 8px; top: 17px; bottom: 1px;
  width: 2px; background: var(--line);
}
.achievements li:last-child::after { display: none; }
.achievements li.is-reached::before { border-color: var(--good); background: var(--good); }
.achievements li.is-reached::after { background: var(--good-line); }
.achievements strong { display: block; font-size: 12.5px; font-weight: 600; }
.achievements li:not(.is-reached) strong { color: var(--ink-2); font-weight: 500; }
.achievements small { display: block; margin-top: 1px; color: var(--ink-3); font-size: 11px; }

/* ─── Documentos pedidos: linha que abre a explicação ─────────────────────── */
/* O `<details>` herda borda e hover da linha, mas a grade mora no `<summary>`:
   com a grade no `<details>`, o resumo virava uma coluna de 34px. */
details.mission-doc { display: block; padding: 0; }
details.mission-doc > summary {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 170px 16px;
  gap: 8px 14px; align-items: center;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
details.mission-doc > summary::-webkit-details-marker { display: none; }
details.mission-doc > summary::after {
  content: ""; justify-self: center; width: 7px; height: 7px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform .15s ease;
}
details.mission-doc[open] > summary::after { transform: rotate(45deg); }
details.mission-doc > summary:focus-visible { outline: 2px solid var(--navy-600); outline-offset: -2px; }
.mission-doc-body { padding: 0 16px 14px 64px; }
.mission-doc-body .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* ─── Recepção do primeiro acesso ─────────────────────────────────────────── */
/* Uma coluna, um objetivo, um botão. O título em Archivo largo é a única
   ênfase; o resto é texto corrido em medida de leitura. */
.welcome {
  max-width: 62ch; margin: 24px auto 0; padding: 32px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.welcome h1 { font-size: 28px; font-stretch: 112%; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.welcome p { margin-top: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.welcome .lede { color: var(--ink); font-size: 16px; }
.welcome-status {
  margin-top: 18px; padding: 14px 16px;
  border-left: 3px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-2); font-size: 14px; color: var(--ink);
}
.welcome-status span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 13px; }
.welcome .welcome-note { color: var(--ink-3); font-size: 12.5px; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.welcome .welcome-more { margin-top: 16px; font-size: 13px; }

/* ─── Foco: uma tarefa por tela ───────────────────────────────────────────── */
/* Solicitação inicial e retorno: coluna única, a tarefa no centro e o resto
   do caminho recolhido. */
.focus { max-width: 760px; margin: 0 auto; display: grid; gap: var(--gap); }
.focus > .portal-hero { margin-bottom: 0; }
.focus-head h1 { margin-top: 4px; font-size: 24px; font-stretch: 112%; line-height: 1.2; }
.focus-head .lede { margin-top: 6px; max-width: 64ch; color: var(--ink-2); font-size: 14px; }
.focus-step { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.focus-step a { font-weight: 500; }
.focus-help { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: var(--gap); font-size: 13px; }
.focus .focus-help { margin-top: 0; }
details.focus-more > summary { cursor: pointer; list-style: none; border-bottom: 0; }
details.focus-more[open] > summary { border-bottom: 1px solid var(--line); }
details.focus-more > summary::-webkit-details-marker { display: none; }
details.focus-more > summary .faq-mark { transition: transform .15s ease; color: var(--ink-3); }
details.focus-more[open] > summary .faq-mark { transform: rotate(90deg); }
/* Recolhido dentro de um cartão: sem borda nem sombra próprias. */
details.focus-more-nested > summary { border-top: 1px solid var(--line); }
details.focus-more-nested > summary h2 { color: var(--navy-600); font-size: 12.5px; }
.focus-more-note { padding: 12px 16px 0; color: var(--ink-3); font-size: 11.5px; }
details.focus-more-inline { margin-top: 14px; font-size: 13px; }
details.focus-more-inline > summary { cursor: pointer; color: var(--navy-600); font-weight: 600; }
details.focus-more-inline > .notes { margin-top: 10px; }
details.payer-data { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
details.payer-data > .form-section-body { margin-top: 12px; padding: 0; }

/* ─── O que é o Atrium Finance ────────────────────────────────────────────── */
.about-card { max-width: 860px; }
.about { max-width: 72ch; }
.about-head h1 { font-size: 28px; font-stretch: 112%; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.about-head .lede { margin-top: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.about-section { margin-top: 28px; }
.about-section h2 { font-size: 15px; font-weight: 600; }
.about-section > p { margin-top: 8px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.about-section .intro-path { margin-top: 12px; }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.about-grid .intro-terms { margin-top: 10px; }
.about .welcome-actions { margin-top: 30px; }

/* ─── Moldura focada (recepção e fluxos) ──────────────────────────────────── */
/* Sem o menu global: marca, ajuda e saída. A tarefa ocupa a tela. */
.frame { min-height: 100vh; background: var(--paper); }
.frame-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 58px; padding: 0 24px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.frame-brand img { display: block; height: 24px; width: auto; }
.frame-actions { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.frame-main { padding: 28px 24px 72px; }
.frame-back { font-weight: 600; }
.welcome .welcome-kicker { margin: 0 0 8px; color: var(--gold-ink); font-size: 13px; font-weight: 600; }


/* ─── Moldura de fluxo: checklist da fase + uma tarefa ────────────────────── */
/* O checklist é a régua do dossiê deitada na vertical: traço, número e marca
   de concluído. Feito em verde, atual em dourado, futuro apagado. */
.flow { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1080px; margin: 0 auto; }
.flow-rail { position: sticky; top: 76px; }
.flow-rail-title { margin-bottom: 12px; color: var(--ink); font-size: 13px; font-stretch: 112%; font-weight: 600; }
.flow-steps { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.flow-steps li { position: relative; margin-left: -2px; border-left: 2px solid transparent; }
.flow-steps li.is-done { border-left-color: var(--good); }
.flow-steps li.is-current { border-left-color: var(--gold); }
.flow-steps a, .flow-steps li > span {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 9px 10px 9px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-2); text-decoration: none;
}
.flow-steps a:hover { background: var(--surface-2); }
.flow-steps a:focus-visible { outline: 2px solid var(--navy-600); outline-offset: -2px; }
.flow-steps li.is-current a, .flow-steps li.is-current > span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.flow-steps li.is-locked { opacity: .55; }
.flow-mark {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-2); background: var(--surface);
  color: var(--ink-3); font-size: 11px; font-weight: 600;
}
.flow-steps li.is-done .flow-mark { border-color: var(--good); background: var(--good); color: #fff; }
.flow-steps li.is-current .flow-mark { border-color: var(--gold); color: var(--gold-ink); }
.flow-step-copy strong { display: block; font-size: 12.5px; font-weight: 600; }
.flow-step-copy small { display: block; margin-top: 1px; color: var(--ink-3); font-size: 11px; line-height: 1.35; }
/* O que a etapa destrava: dito em todas, com destaque na atual. */
.flow-step-copy .flow-unlock {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 5px; align-items: start;
  margin-top: 5px; color: var(--ink-2); font-weight: 500; line-height: 1.4;
}
.flow-step-copy .flow-unlock .ic { width: 11px; height: 11px; margin-top: 2px; color: var(--ink-3); }
.flow-steps li.is-current .flow-unlock { color: var(--gold-ink); font-weight: 600; }
.flow-steps li.is-current .flow-unlock .ic { color: var(--gold-ink); }
.flow-steps li.is-done .flow-unlock, .flow-steps li.is-done .flow-unlock .ic { color: var(--good); }
/* O que o checklist inteiro libera: o objetivo, antes das etapas. */
.flow-outcome {
  margin: -2px 0 14px; padding: 10px 12px; border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2);
  color: var(--ink-2); font-size: 12px; line-height: 1.45;
}
.flow-outcome strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 12px; font-weight: 600; }
.flow-rail-note { margin-top: 18px; padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 12px; }
.flow-rail-note strong { display: block; font-size: 12px; }
.flow-rail-note span { display: block; margin-top: 3px; color: var(--ink-2); }
.flow-rail-note small { display: block; margin-top: 6px; color: var(--ink-3); font-size: 11px; }
.flow-main { display: grid; gap: var(--gap); min-width: 0; }
/* Telas de cadastro dentro da moldura têm a coluna mais estreita que a tela
   inteira: as grades largas usam o arranjo compacto que já existe. */
.flow-main .payer-row { grid-template-columns: 1fr 1fr; gap: 18px; }
.flow-main .payer-row-actions { align-items: start; justify-items: start; }
.flow-main .payer-signals { justify-content: flex-start; }
.flow-main .split { grid-template-columns: minmax(0, 1fr); }
.flow-mobile-progress { display: none; }
.flow-status { margin-top: 8px; color: var(--ink-2); font-size: 13px; }
.mission-current { border-top: 2px solid var(--gold); }

/* ─── Linha do tempo do pedido ────────────────────────────────────────────── */
.client-timeline { margin: 0; padding: 0; list-style: none; }
.client-timeline li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.client-timeline li::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.client-timeline li:last-child { padding-bottom: 0; }
.client-timeline li:last-child::before { display: none; }
.client-timeline li.is-done::before { background: var(--good-line); }
.client-timeline-mark {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--line-2); background: var(--surface); color: #fff;
}
.client-timeline li.is-done .client-timeline-mark { border-color: var(--good); background: var(--good); }
.client-timeline li.is-current .client-timeline-mark { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.client-timeline li.is-attention .client-timeline-mark { border-color: var(--warn); background: var(--warn); font-size: 12px; font-weight: 700; }
.client-timeline li.is-stopped .client-timeline-mark { border-color: var(--bad); background: var(--bad); font-size: 12px; font-weight: 700; }
.client-timeline li.is-attention .client-timeline-now { color: var(--warn); }
.client-timeline + .focus-more-inline { margin-top: 12px; }
.client-timeline strong { display: block; font-size: 13px; font-weight: 600; }
.client-timeline li.is-todo strong { color: var(--ink-3); font-weight: 500; }
.client-timeline small { display: block; margin-top: 1px; color: var(--ink-3); font-size: 11px; }
.client-timeline .client-timeline-now { color: var(--gold-ink); font-weight: 600; }
.client-timeline p { margin-top: 4px; color: var(--ink-2); font-size: 12.5px; max-width: 60ch; }

/* ─── Posição do crédito e oferta ─────────────────────────────────────────── */
/* Números grandes em Archivo largo: é a informação que o cliente procura
   primeiro. Sem cartão por número — uma faixa só. */
.position {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; margin-bottom: var(--gap);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1);
}
.position-item { padding: 16px 20px; border-left: 1px solid var(--line); }
.position-item:first-child { border-left: 0; }
.position-item span { display: block; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.position-item strong { display: block; margin-top: 4px; font-size: 20px; font-stretch: 112%; font-weight: 600; font-variant-numeric: tabular-nums; }
.position-item.is-main strong { font-size: 26px; }
.position-item small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 11.5px; }
.offer { border-top: 2px solid var(--gold); }
.offer-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer-figures div { padding: 16px; border-left: 1px solid var(--line); }
.offer-figures div:first-child { border-left: 0; }
.offer-figures span { display: block; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.offer-figures strong { display: block; margin-top: 4px; font-size: 22px; font-stretch: 112%; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─── Atividade ───────────────────────────────────────────────────────────── */
.activity-filters { padding-bottom: 0; }
.activity-filters .filter-tabs { margin-bottom: 4px; }
a.activity-row { color: inherit; text-decoration: none; }
a.activity-row:focus-visible { outline: 2px solid var(--navy-600); outline-offset: -2px; }

/* ─── Colunas e tabelas de texto ──────────────────────────────────────────── */
/* Item de grade não encolhe abaixo do conteúdo: uma tabela larga empurrava a
   coluna principal para baixo da lateral. */
.split > .grid { min-width: 0; grid-template-columns: minmax(0, 1fr); }
/* Comparação escrita em frases (Ajuda): o texto quebra em vez de vazar. */
.compare-table-prose td { white-space: normal; vertical-align: top; }
.compare-table-prose td:first-child { width: 22%; }

/* ─── Menu do cliente: a trajetória, de cima para baixo ───────────────────── */
/* Etapa futura é previsão: aparece no lugar dela, apagada e sem link, com
   o que a libera. */
.nav-link.is-locked { cursor: default; opacity: .55; }
.nav-link.is-locked:hover { background: transparent; }
.nav-hint { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 400; opacity: .9; }
.form-title { font-size: 13.5px; font-weight: 600; }

/* ─── Atalhos do celular ──────────────────────────────────────────────────── */
/* No desktop o menu lateral basta; no celular ele fica escondido atrás do
   botão, e os quatro destinos de sempre ficam ao alcance do polegar. */
.client-tabbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  details.mission-doc > summary::after,
  details.focus-more > summary .faq-mark { transition: none; }
}

@media (max-width: 900px) {
  .client-tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 20;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--navy-900); box-shadow: 0 -1px 0 rgba(255, 255, 255, .06);
  }
  .client-tabbar a {
    display: grid; justify-items: center; gap: 3px;
    min-height: 48px; padding: 6px 4px; border-radius: var(--r-sm);
    color: var(--on-navy-300); font-size: 11px; font-weight: 600; text-decoration: none;
  }
  .client-tabbar a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .08); }
  .client-tabbar a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  .content { padding-bottom: 104px; }
  .toasts { bottom: 84px; }
}

@media (max-width: 900px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .flow-rail { display: none; }
  .flow-mobile-progress { display: grid; gap: 6px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
  .flow-mobile-steps > summary { cursor: pointer; color: var(--navy-600); font-weight: 600; }
  .flow-mobile-steps .flow-steps { margin-top: 8px; }
  .frame-header { padding: 0 16px; }
  .frame-actions { gap: 12px; }
  .frame-main { padding: 18px 16px 56px; }
  .position { grid-template-columns: minmax(0, 1fr); }
  .position-item { border-left: 0; border-top: 1px solid var(--line); }
  .position-item:first-child { border-top: 0; }
}

@media (max-width: 600px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-head h1 { font-size: 23px; }
  /* Três itens não cabem no topo do telefone: a ajuda fica no rodapé da tela. */
  .frame-actions .frame-help { display: none; }
  .offer-figures { grid-template-columns: minmax(0, 1fr); }
  .offer-figures div { border-left: 0; border-top: 1px solid var(--line); }
  .offer-figures div:first-child { border-top: 0; }
  /* A régua inteira ocupava meia tela: no telefone fica só a etapa atual,
     que já traz o número dela ("4") e o rótulo. */
  .ruler-journey .ruler-seg:not([aria-current]) { display: none; }
  .intro h1, .welcome h1 { font-size: 23px; }
  .welcome { margin-top: 4px; padding: 22px 18px; }
  details.mission-doc > summary { grid-template-columns: 34px minmax(0, 1fr) 16px; }
  details.mission-doc > summary > div:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  details.mission-doc > summary::after { grid-column: 3; grid-row: 1; }
  .mission-doc-body { padding-left: 16px; }
}

/* Sequência da negociação (conferência → proposta → negociação → contratação):
   é uma ordem real, então os marcadores numerados carregam informação. */
.negotiation-steps { list-style: none; margin: 0; padding: 0; counter-reset: neg; display: grid; gap: 14px; }
.negotiation-steps li { counter-increment: neg; position: relative; padding-left: 36px; }
.negotiation-steps li::before {
  content: counter(neg); position: absolute; left: 0; top: 0; width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink-3);
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.negotiation-steps li.is-current::before { border-color: var(--gold); color: var(--gold-ink); }
.negotiation-steps li.is-done::before { content: "✓"; border-color: var(--good-line); color: var(--good); }
.negotiation-steps strong { display: block; font-size: 14px; }
.negotiation-steps span { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.negotiation-steps li:not(.is-current):not(.is-done) strong { color: var(--ink-2); }

/* Listas de opções da ficha (especialidades): caixas em grade, rótulo como legenda. */
.choice-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-group legend { padding: 0; margin-bottom: 10px; font-weight: 500; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 18px; }
/* A lista de opções ocupa a linha inteira: na coluna do campo, viraria uma fila longa. */
.form-row:has(.choice-group) { grid-template-columns: minmax(0, 1fr); }
.form-row:has(.choice-group) .form-row-source:empty { display: none; }
.form-row[hidden] { display: none; }

/* O que a proposta leva: o título ganha a largura; situação e ação só o que precisam. */
.package-row { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
@media (max-width: 600px) {
  .package-row { grid-template-columns: 34px minmax(0, 1fr); }
  .package-row > div:nth-child(3), .package-row > .actions { grid-column: 2; }
}

/* Partes de uma ficha (empresa, pessoa): abas dentro da tela, sem trocar o trilho. */
.parts-nav { display: grid; gap: 8px; }
.parts-nav-title { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.parts-nav-title span { margin-left: 6px; color: var(--ink-3); font-weight: 500; }
.parts-nav ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.parts-nav a, .parts-nav li > span {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink-2); font-size: 12.5px; text-decoration: none;
}
.parts-nav a:hover { border-color: var(--line-2); color: var(--ink); }
.parts-nav a:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; }
.parts-mark {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line-2); font-size: 11px; font-weight: 600; color: var(--ink-3);
}
.parts-mark .ic { width: 11px; height: 11px; }
.parts-nav li.is-current a { border-color: var(--gold); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); }
.parts-nav li.is-current .parts-mark { border-color: var(--gold); color: var(--gold-ink); }
.parts-nav li.is-done .parts-mark { border-color: var(--good); background: var(--good); color: #fff; }
.parts-nav li > span[aria-disabled] { opacity: .55; }

/* O passo depois do cenário, quando ele ainda espera algo (contrato, cadastro). */
.simulate-next { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2); color: var(--ink-2); font-size: 13px; }

/* Para quem é: aviso de elegibilidade (lastro só em operadoras de saúde). */
.eligibility { margin-top: 14px; }
.eligibility p + p { margin-top: 6px; }
.eligibility p strong { display: inline; color: inherit; font-weight: 600; }
.eligibility-note { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.eligibility-note .ic { margin-top: 2px; color: var(--navy-600); }