@import "tokens.css";

/* ============ TEMA CLARO (padrão) ============ */
html[data-theme="light"] {
  --c-paper:      #FBFCFB;
  --c-paper-2:    #FFFFFF;
  --c-paper-3:    #F0F3F1;
  --c-paper-deep: #F5F8F6;
  --c-ink:    #14201B;
  --c-ink-2:  #3C4B45;
  --c-muted:  #5E6E68;
  --c-faint:  #8A9791;
  --c-line:      #E5EAE7;
  --c-line-soft: #EEF2F0;
  --c-line-hair: #D6DDD9;
  --c-brand-text: #067A45;
  --c-brand-soft: rgba(0,184,96,.10);
  --head-bg: rgba(255,255,255,.86);
}
:root { --head-bg: rgba(6,15,16,.9); }

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .3s var(--ease-soft), color .3s var(--ease-soft);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); position: relative; }
:focus-visible { outline: 2px solid var(--c-brand-text); outline-offset: 3px; }

/* ============ HEADER ============ */
.site-head {
  height: 62px; display: flex; align-items: center;
  border-bottom: 1px solid var(--c-line); background: var(--head-bg); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: var(--z-nav);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.brand-lock { display: flex; align-items: center; gap: 11px; }
.brand-lock img { height: 24px; width: auto; }
.brand-lock .wm { font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.brand-lock .sep { width: 1px; height: 20px; background: var(--c-line-hair); margin: 0 4px; }

/* logo C10X: troca clara/escura conforme o tema */
.lg-dark { display: none; }
html:not([data-theme="light"]) .lg-light { display: none; }
html:not([data-theme="light"]) .lg-dark { display: inline-block; }
.brand-logo, .gate-logo, .foot-logo { vertical-align: middle; }
.brand-lock .tag { font-size: 13px; color: var(--c-faint); }
.head-right { display: flex; align-items: center; gap: var(--space-md); }
.head-date { font-size: 13px; color: var(--c-muted); display: flex; align-items: center; gap: 8px; }
.head-date .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-brand); }
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--c-muted); background: transparent; border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  padding: .4rem .8rem; cursor: pointer; transition: .18s; }
.theme-toggle:hover { color: var(--c-ink); border-color: var(--c-line-hair); }
.theme-toggle svg { width: 15px; height: 15px; }

/* ============ PERFIL (segmentado) ============ */
/* .head-block / .title / .controls saíram junto com o H1 genérico e o
   toggle solto de index.html na Frente 2 (o toggle migrou pra dentro da
   rota da Aposentadoria). O segmentado .seg abaixo continua em uso. */
.seg { display: inline-flex; background: var(--c-paper-3); border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 4px; gap: 3px; }
.seg__btn { font-family: var(--font-body); padding: .55rem 1.2rem; font-size: var(--fs-sm); font-weight: 600;
  background: transparent; color: var(--c-muted); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: .18s; }
.seg__btn:hover { color: var(--c-ink); }
.seg__btn[aria-pressed="true"] { background: var(--c-brand); color: #04150C; }
.meta-line, .meta-grid { display: flex; flex-wrap: wrap; gap: .45rem; }
.meta-grid { margin-top: var(--space-md); }
.meta-line .chip, .meta-grid .chip { font-size: 13px; color: var(--c-muted); background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: var(--radius-pill); padding: .3rem .8rem; }
.meta-line .chip b, .meta-grid .chip b { color: var(--c-ink); font-weight: 600; }

.profile-summary { margin-top: var(--space-md); color: var(--c-ink-2); font-size: var(--fs-lg); max-width: 74ch; line-height: 1.5; }
.profile-summary b { color: var(--c-ink); font-weight: 600; }

/* ============ CABEÇALHO DA CARTEIRA (objetivo + perfil, B1) ============ */
.carteira-header { margin-top: var(--space-lg); }
.carteira-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-faint); }
.carteira-perfil { margin-top: .3rem; font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; color: var(--c-brand-text); text-transform: uppercase; }

/* ============ AVISO DE VALIDADE (adendo C §5, VALIDADE_DIAS) ============ */
/* Texto em --c-ink-2 (legível nos dois temas); --c-warn fica só no traço
   de acento à esquerda, como no .fgc-callout. Usar --c-warn no texto
   falharia o contraste AA no tema claro (#F5B73D sobre papel claro). */
.validity-notice { margin-top: .5rem; padding-left: .6rem; border-left: 2px solid var(--c-warn); font-size: 12px; color: var(--c-ink-2); }

/* ============ AVISO FGC — callout no topo da tela (B2) ============ */
.fgc-callout { display: flex; gap: .7rem; align-items: flex-start; margin-top: var(--space-md);
  background: var(--c-warn-bg); border: 1px solid transparent; border-left: 3px solid var(--c-warn);
  border-radius: var(--radius-md); padding: .85rem 1.1rem; }
.fgc-callout__icon { flex: none; line-height: 1.4; }
.fgc-callout p { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.55; }

/* ============ SUB-TABS (Carteira recomendada / Simular meu aporte) ============
   Deliberadamente diferente do .seg logo acima (que é uma pill preenchida,
   estilo toggle): aqui é um seletor de painel, trilho fino embaixo, sem
   preenchimento. A aba ativa sobe de --c-muted para --c-ink e ganha uma
   barra verde que nasce do centro (scaleX), como um cursor de terminal
   acendendo, não uma pill se movendo. O índice numerado (01/02) ecoa a
   linguagem de ficha/ticket já usada na calculadora, sem duplicar o .seg. */
.subtabs { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); border-bottom: 1px solid var(--c-line); }
.subtabs__btn {
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted);
  background: transparent; border: none; padding: .1rem .1rem .9rem; cursor: pointer;
  transition: color .18s var(--ease-soft);
}
.subtabs__btn:hover { color: var(--c-ink-2); }
.subtabs__idx {
  font-size: 11px; font-weight: 700; color: var(--c-faint); font-variant-numeric: tabular-nums;
  border: 1px solid var(--c-line-hair); border-radius: 5px; padding: 1px 6px; line-height: 1.5;
  transition: color .18s var(--ease-soft), border-color .18s var(--ease-soft);
}
.subtabs__btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--c-brand); box-shadow: var(--glow-soft);
  transform: scaleX(0); transform-origin: center; transition: transform .32s var(--ease);
}
.subtabs__btn[aria-selected="true"] { color: var(--c-ink); }
.subtabs__btn[aria-selected="true"] .subtabs__idx { color: var(--c-brand-text); border-color: var(--c-brand); }
.subtabs__btn[aria-selected="true"]::after { transform: scaleX(1); }

.tabpanel { animation: tab-rise .36s var(--ease) both; }
@keyframes tab-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ============ ALERTA DE MOMENTO ============ */
.tsignal { margin-top: var(--space-lg); display: flex; gap: 1rem; align-items: baseline;
  background: var(--c-brand-soft); border: 1px solid transparent; border-left: 3px solid var(--c-brand);
  border-radius: var(--radius-md); padding: 1rem 1.2rem; }
.tsignal__tag { flex: none; font-size: 13px; font-weight: 600; color: var(--c-brand-text); white-space: nowrap; }
.tsignal p { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.55; }
.tsignal b { color: var(--c-brand-text); font-weight: 600; }

/* ============ TABELA ============ */
.tbl-wrap, .table-wrap { margin-top: var(--space-lg); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; background: var(--c-paper-2); }
table.rec, .rec-table { width: 100%; border-collapse: collapse; min-width: 940px; }
.rec thead th, .rec-table thead th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--c-faint);
  padding: 16px 22px; background: var(--c-paper-deep); border-bottom: 1px solid var(--c-line); white-space: nowrap;
}
.rec tbody td, .rec-table tbody td { padding: 22px; vertical-align: top; border-bottom: 1px solid var(--c-line-soft); position: relative; }
.rec tbody tr:last-child td, .rec-table tbody tr:last-child td { border-bottom: none; }
.rec tbody tr, .rec-table tbody tr { transition: background .16s; }
.rec tbody tr:hover, .rec-table tbody tr:hover { background: var(--c-paper-3); }
.rec tbody tr:hover td:first-child::before, .rec-table tbody tr:hover td:first-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c-brand); }
.rec thead th:nth-child(4), .rec tbody td:nth-child(4), .rec-table tbody td:nth-child(4) { border-left: 1px solid var(--c-line-soft); }

.c-class { font-weight: 600; font-size: 1.05rem; color: var(--c-ink); width: 15%; }
.c-class .d { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--c-brand); margin-right: .6rem; vertical-align: middle; }
.c-alloc { width: 12%; }
.c-alloc .a-num { font-weight: 700; font-size: 1.3rem; color: var(--c-brand-text); display: block; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-alloc .a-bar { display: block; margin-top: 10px; position: relative; height: 5px; width: 92px; max-width: 100%; background: var(--c-paper-3); border-radius: 3px; overflow: hidden; }
[data-theme="light"] .c-alloc .a-bar { background: #E9EEEB; }
.c-alloc .a-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c-brand); border-radius: 3px; }
.c-alloc .a-flex { position: absolute; top: 0; bottom: 0; background: var(--c-brand); opacity: .32; }
.c-prod { display: grid; gap: .75rem; }
.c-prod .p { display: grid; gap: 2px; }
.c-prod .p-main { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.4; }
.c-prod .p-main .w { font-weight: 700; color: var(--c-brand-text); margin-right: .25rem; font-variant-numeric: tabular-nums; }
.c-prod .p-sub { font-size: 12px; color: var(--c-faint); }
/* Isento de IR (adendo C §2.4): marca o pós-fixado pra não ser confundido
   com a reserva de oportunidade (103–105% CDI, tributada). Mesma
   linguagem visual do reserva-tag, um degrau mais discreto (vive dentro
   da célula de Produto, colada ao rótulo do sub-item). */
.isento-tag { font-size: 11px; font-weight: 600; color: var(--c-brand-text); border: 1px solid var(--c-line-hair); border-radius: var(--radius-pill); padding: .05rem .5rem; margin-left: .35rem; white-space: nowrap; vertical-align: middle; }
.c-onde { font-size: var(--fs-sm); color: var(--c-muted); }
.c-taxa { font-size: var(--fs-sm); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.c-taxa.dash, .c-onde.dash, .c-obs.dash { color: var(--c-faint); }
.c-obs { font-size: 13px; color: var(--c-faint); line-height: 1.5; max-width: 30ch; }

/* Taxa de Referência / Observações com múltiplos itens literais da planilha
   (ex.: Pós/Pré/IPCA+; "Objetivo..." + "Ver alerta de momento abaixo") —
   cada item na sua própria linha, sem separador corrido (A9). */
.taxa-multi, .obs-multi { display: grid; gap: 3px; }
.taxa-line, .obs-line { display: block; }

tr.reserva td { background: var(--c-brand-soft); }
tr.reserva td:nth-child(4) { border-left: none; }
tr.reserva .c-class { color: var(--c-brand-text); }
/* A10: rótulo completo "RESERVA DE OPORTUNIDADE (valor considerado FORA da
   carteira de aposentadoria)" — nome em destaque, parênteses explicativos
   menores abaixo, pra não estourar a largura da coluna Classe. */
.reserva-class-main { display: block; }
.reserva-class-sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--c-brand-text); opacity: .8; text-transform: none; }
.reserva-note { font-size: var(--fs-sm); color: var(--c-ink-2); }
.reserva-note b { color: var(--c-ink); font-weight: 600; }
.reserva-tag { font-size: 12px; color: var(--c-brand-text); border: 1px solid var(--c-brand); border-radius: var(--radius-pill); padding: .12rem .6rem; margin-left: .6rem; white-space: nowrap; }

/* ============ COMPLIANCE (CNPI / FGC / data-base / disclaimer) ============ */
.compliance { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--c-line); display: grid; gap: .6rem; }
.compliance .fgc {
  color: var(--c-ink-2); font-size: var(--fs-sm); line-height: 1.6;
  background: var(--c-brand-soft); border-left: 3px solid var(--c-brand); border-radius: var(--radius-md);
  padding: .8rem 1.1rem;
}
.compliance .cnpi, .compliance .databaseline { font-size: 13px; color: var(--c-muted); line-height: 1.7; }
.compliance .disclaimer { font-size: 12px; color: var(--c-faint); line-height: 1.6; }

/* Metadados do analista por perfil (B4): Perfil de recomendação, Tolerância
   a volatilidade, Necessidade de liquidez, Horizonte, Objetivo, Conhecimento
   financeiro — exigidos junto da identificação do CNPI (Resolução CVM 20). */
.compliance-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem 1.4rem;
  margin: .2rem 0; padding: .9rem 0; border-top: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft); }
.compliance-meta dt { font-size: 11px; color: var(--c-faint); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.compliance-meta dd { font-size: 13px; color: var(--c-ink-2); font-weight: 600; margin-top: 2px; }

/* ============ CALCULADORA DE APORTE (ficha de alocação) ============
   Metáfora de ticket de execução de ordem: a Reserva de Oportunidade
   fica no talão de cima; uma perfuração (borda tracejada + 2 furos
   em CSS puro, cor = fundo da página) separa fisicamente da carteira
   abaixo, deixando claro que aquele valor é "destacado" do resto. */
.calc { margin-top: var(--space-xl); }
.calc-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-brand-text); margin-bottom: .4rem; }
.calc-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; }
/* Nome próprio (calc-subtitle) para não colidir com .calc-sub, a lista de
   produtos por classe abaixo (mesma string curta, propósitos diferentes). */
.calc-subtitle { color: var(--c-muted); font-size: var(--fs-sm); margin-top: .35rem; max-width: 60ch; }
.calc-subtitle b { color: var(--c-ink-2); font-weight: 600; }

.calc-ticket { margin-top: var(--space-md); background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-sm); }

.calc-input-row { display: flex; align-items: stretch; gap: .7rem; }
.calc-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-md); padding-inline-start: 1rem; transition: border-color .18s var(--ease-soft), box-shadow .18s var(--ease-soft); }
.calc-field:focus-within { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); }
.calc-prefix { flex: none; font-weight: 700; font-size: var(--fs-lg); color: var(--c-brand-text); font-variant-numeric: tabular-nums; }
.calc-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xl); letter-spacing: -.01em; color: var(--c-ink); font-variant-numeric: tabular-nums; padding: .65rem 0; }
.calc-input::placeholder { color: var(--c-faint); font-weight: 500; }
.calc-btn { flex: none; display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); color: var(--c-on-brand); background: var(--c-brand); border: none; border-radius: calc(var(--radius-md) - 2px); padding: 0 1.3rem; cursor: pointer; transition: background .18s var(--ease-soft), transform .12s var(--ease-soft); }
.calc-btn:hover { background: var(--c-brand-bright); }
.calc-btn:active { transform: scale(.96); }
.calc-btn svg { flex: none; transition: transform .18s var(--ease-soft); }
.calc-btn:hover svg { transform: translateX(2px); }

@keyframes calc-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.calc-field.calc-shake { animation: calc-shake .4s var(--ease-soft); border-color: var(--c-warn); }

.calc-out { margin-top: var(--space-md); }
.calc-out[hidden] { display: none; }

.calc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-brand); margin-right: .5rem; vertical-align: middle; flex: none; }

/* Figura em R$ sem quebra de linha (usada na Reserva e nos valores de
   classe/sub-item, pra o número nunca partir ao meio em telas estreitas). */
.calc-figure { white-space: nowrap; }

.calc-reserva { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--c-brand-soft); border-radius: var(--radius-md); padding: 1rem 1.1rem; }
.calc-reserva-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.calc-reserva-label { font-weight: 600; font-size: var(--fs-sm); color: var(--c-brand-text); }
.calc-reserva-value { font-weight: 800; font-size: var(--fs-lg); color: var(--c-brand-text); font-variant-numeric: tabular-nums; }

/* "perfuração" do talão: linha tracejada + 2 furos circulares na cor do
   fundo por trás do card (paper), criando a ilusão de ticket destacável */
.calc-perf { position: relative; height: 0; margin: var(--space-md) calc(var(--space-md) * -1) var(--space-sm); border-top: 1.5px dashed var(--c-line-hair); }
.calc-perf::before, .calc-perf::after { content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-paper); border: 1px solid var(--c-line); }
.calc-perf::before { left: -9px; }
.calc-perf::after { right: -9px; }

.calc-carteira-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-2); padding-bottom: .9rem; margin-bottom: var(--space-sm); border-bottom: 1px solid var(--c-line-soft); }
.calc-carteira-head b { font-size: var(--fs-lg); font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* ---- Contador de resíduo ao vivo (adendo C §3.1): mesma linguagem visual
   dos callouts já existentes no site (.fgc-callout/.validity-notice, fundo
   fraco + acento à esquerda), só troca de cor conforme falta/passou/fechou,
   pra ficar calmo e não um "erro" berrando pro leigo. ---- */
.calc-residual { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: var(--space-sm);
  border-radius: var(--radius-md); padding: .7rem .9rem; border-left: 3px solid var(--c-line-hair);
  background: var(--c-paper-3); transition: background .2s var(--ease-soft), border-color .2s var(--ease-soft); }
.calc-residual p { font-size: 12.5px; line-height: 1.55; color: var(--c-ink-2); }
.calc-residual-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: .38em; background: var(--c-faint); }
.calc-residual[data-state="under"] { background: var(--c-warn-bg); border-left-color: var(--c-warn); }
.calc-residual[data-state="under"] .calc-residual-dot { background: var(--c-warn); }
.calc-residual[data-state="over"] { background: var(--c-down-bg); border-left-color: var(--c-down); }
.calc-residual[data-state="over"] .calc-residual-dot { background: var(--c-down); }
.calc-residual[data-state="ok"] { background: var(--c-brand-soft); border-left-color: var(--c-brand); }
.calc-residual[data-state="ok"] .calc-residual-dot { background: var(--c-brand); }
.calc-residual[data-state="ok"] p { color: var(--c-brand-text); font-weight: 600; }

/* Cabeçalho estático quando o perfil não tem NENHUMA classe ajustável
   (conservador: os 4 pesos são cravados pela planilha). Não há o que
   "distribuir", então em vez do contador de resíduo + trava de 100%
   (que sugeririam ação do usuário), uma nota calma de que é distribuição
   fixa. Mesma linguagem visual do estado neutro do contador. */
.calc-fixed-lead { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: var(--space-sm);
  border-radius: var(--radius-md); padding: .7rem .9rem; border-left: 3px solid var(--c-line-hair); background: var(--c-paper-3); }
.calc-fixed-lead p { font-size: 12.5px; line-height: 1.55; color: var(--c-ink-2); }

.calc-classes { display: grid; gap: var(--space-md); }
.calc-class { padding-bottom: var(--space-md); border-bottom: 1px solid var(--c-line-soft); }
.calc-class:last-child { padding-bottom: 0; border-bottom: none; }
.calc-class-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.calc-class-name { display: flex; align-items: center; gap: .1rem; font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink); }
.calc-fixed-tag { margin-left: .5rem; font-size: 10.5px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-faint); border: 1px solid var(--c-line-hair); border-radius: var(--radius-pill); padding: .08rem .5rem; }
.calc-class-meta { display: flex; align-items: baseline; gap: .5rem; }
.calc-class-val { font-weight: 700; font-size: var(--fs-base); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.calc-class-pct { font-size: 12px; font-weight: 700; color: var(--c-brand-text); background: var(--c-brand-soft); border-radius: var(--radius-pill); padding: .12rem .55rem; font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: center; }

/* ---- Slider nativo (input[type=range]), sem lib. O preenchimento verde do
   trilho é um gradiente de 2 paradas cuja borda é a custom property --fill
   (0 a 100, a POSIÇÃO do valor dentro da PRÓPRIA faixa da classe, não uma
   escala global de 0 a 100), atualizada via JS a cada input. Firefox ganha
   o preenchimento "de graça" via ::-moz-range-progress. ---- */
.calc-slider-wrap { margin-top: .7rem; }
/* Preenchimento verde usa --c-brand-text (não --c-brand): no escuro os dois
   são o mesmo #00B860 (tema escuro intacto); no claro --c-brand-text é o
   verde mais escuro #067A45, que lê contra o trilho claro #E9EEEB acima de
   3:1 (o #00B860 direto dava ~2.2:1, invisível pra muita gente). */
.calc-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--c-brand-text) var(--fill, 50%), var(--c-paper-3) var(--fill, 50%));
  outline: none; cursor: pointer; touch-action: pan-y;
}
[data-theme="light"] .calc-slider { background: linear-gradient(to right, var(--c-brand-text) var(--fill, 50%), #E9EEEB var(--fill, 50%)); }
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-brand); border: 3px solid var(--c-paper-2);
  box-shadow: var(--shadow-sm); cursor: grab;
  transition: transform .15s var(--ease-soft), box-shadow .15s var(--ease-soft);
}
/* No claro o anel branco (--c-paper-2 = branco = fundo do talão) some; uma
   hairline externa devolve a borda visível do thumb contra o papel branco. */
[data-theme="light"] .calc-slider::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--c-line-hair), var(--shadow-sm); }
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc-slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.05); box-shadow: var(--glow-soft); }
.calc-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--c-brand-soft); }
.calc-slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--c-paper-3); }
[data-theme="light"] .calc-slider::-moz-range-track { background: #E9EEEB; }
.calc-slider::-moz-range-progress { height: 6px; border-radius: 3px 0 0 3px; background: var(--c-brand-text); }
.calc-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--c-brand);
  border: 3px solid var(--c-paper-2); box-shadow: var(--shadow-sm); cursor: grab;
  transition: transform .15s var(--ease-soft);
}
[data-theme="light"] .calc-slider::-moz-range-thumb { box-shadow: 0 0 0 1px var(--c-line-hair), var(--shadow-sm); }
.calc-slider::-moz-range-thumb:hover { transform: scale(1.12); }
.calc-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--c-brand-soft); }

.calc-slider-scale { display: flex; justify-content: space-between; margin-top: .4rem; font-size: 11px; color: var(--c-faint); font-variant-numeric: tabular-nums; }

/* Lista de sub-produtos: agora com valor em R$ por item (a divisão dentro
   da classe é exata e conhecida, adendo C §2.1: RF 40/30/30, ETF FLOA
   80/VWRA 20, deixou de ser "faixa sobre faixa"). Marcador circular
   discreto, ecoando o .calc-dot do nome da classe/reserva. */
.calc-sub { list-style: none; margin-top: .7rem; padding-left: 1.05rem; border-left: 2px solid var(--c-line-soft); display: grid; gap: .45rem; }
.calc-sub-row { position: relative; padding-left: .9rem; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.calc-sub-row::before { content: ""; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: var(--c-line); }
.calc-sub-label { font-size: 13px; line-height: 1.45; color: var(--c-muted); }
.calc-sub-value { flex: none; font-size: 13px; font-weight: 600; color: var(--c-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Onde comprar / Taxa de referência: legenda de rodapé por classe, discreta de
   propósito (não pode competir com o valor em R$ nem com o slider). Mesmo par
   de rótulos usado no fallback mobile da tabela ("Onde comprar" / "Taxa ref."). */
.calc-meta { margin-top: .6rem; padding-left: 1.05rem; display: grid; gap: .2rem; }
.calc-meta-row { font-size: 11.5px; line-height: 1.55; color: var(--c-faint); }
.calc-meta-k { font-weight: 600; color: var(--c-muted); }

/* ---- Confirmar alocação: chip de status compacto (eco do contador lá em
   cima, sem precisar rolar) + botão que só habilita com soma = 100%. ---- */
.calc-confirm-row { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; flex-wrap: wrap; margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--c-line-soft); }
.calc-confirm-chip { font-size: 12px; font-weight: 600; color: var(--c-faint); margin-right: auto; }
.calc-confirm-chip[data-state="under"] { color: var(--c-warn); }
.calc-confirm-chip[data-state="over"] { color: var(--c-down); }
.calc-confirm-chip[data-state="ok"] { color: var(--c-brand-text); }
.calc-confirm-btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm);
  color: var(--c-on-brand); background: var(--c-brand); border: none; border-radius: calc(var(--radius-md) - 2px);
  padding: .75rem 1.3rem; cursor: pointer; transition: background .18s var(--ease-soft), transform .12s var(--ease-soft), opacity .18s var(--ease-soft); }
.calc-confirm-btn:hover:not(:disabled) { background: var(--c-brand-bright); }
.calc-confirm-btn:active:not(:disabled) { transform: scale(.97); }
.calc-confirm-btn:disabled { opacity: .4; cursor: not-allowed; }
.calc-confirm-btn.is-confirmed { background: var(--c-brand-deep); }
.calc-confirm-btn.is-confirmed:hover { background: var(--c-brand-deep); }
/* ticket "selado": anel verde sutil no talão inteiro quando a alocação foi
   confirmada (some sozinho no próximo arrasto, via JS removendo a classe). */
.calc-ticket { transition: box-shadow .3s var(--ease-soft); }
.calc-ticket:has(.calc-out.calc-confirmed) { box-shadow: 0 0 0 1px var(--c-brand), var(--shadow-sm); }

.calc-note { margin-top: var(--space-sm); font-size: 12px; color: var(--c-faint); line-height: 1.6; max-width: 70ch; }

/* revelação escalonada ao calcular, como uma ficha sendo impressa linha a linha */
@keyframes calc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.calc-out.show .calc-reserva, .calc-out.show .calc-perf, .calc-out.show .calc-carteira-head,
.calc-out.show .calc-residual, .calc-out.show .calc-fixed-lead, .calc-out.show .calc-class, .calc-out.show .calc-confirm-row { animation: calc-rise .42s var(--ease) both; }
.calc-out.show .calc-reserva { animation-delay: 0ms; }
.calc-out.show .calc-perf { animation-delay: 40ms; }
.calc-out.show .calc-carteira-head { animation-delay: 80ms; }
.calc-out.show .calc-residual, .calc-out.show .calc-fixed-lead { animation-delay: 110ms; }
.calc-out.show .calc-class:nth-child(1) { animation-delay: 140ms; }
.calc-out.show .calc-class:nth-child(2) { animation-delay: 180ms; }
.calc-out.show .calc-class:nth-child(3) { animation-delay: 220ms; }
.calc-out.show .calc-class:nth-child(4) { animation-delay: 260ms; }
.calc-out.show .calc-confirm-row { animation-delay: 300ms; }

/* selo de confirmado: um "carimbo" sutil no ícone do botão, não um efeito
   chamativo (é um ticket de execução, não um confete). */
@keyframes calc-stamp { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.calc-confirm-btn.is-confirmed svg { animation: calc-stamp .32s var(--ease-soft) both; }

@media (prefers-reduced-motion: reduce) {
  .calc-out.show * { animation: none !important; }
  .calc-field.calc-shake { animation: none !important; }
  .tabpanel { animation: none !important; }
  .subtabs__btn::after { transition: none !important; }
  .calc-slider::-webkit-slider-thumb, .calc-slider::-moz-range-thumb { transition: none !important; }
  .calc-slider::-webkit-slider-thumb:hover, .calc-slider:active::-webkit-slider-thumb { transform: none !important; }
  .calc-confirm-btn.is-confirmed svg { animation: none !important; }
}

/* toque grosso (celular/tablet): alvo de arrasto maior no thumb, pra não
   exigir precisão de mouse de quem tá no telefone. */
@media (pointer: coarse) {
  .calc-slider { height: 8px; }
  .calc-slider::-webkit-slider-thumb { width: 26px; height: 26px; border-width: 4px; }
  .calc-slider::-moz-range-thumb { width: 20px; height: 20px; border-width: 4px; }
}

@media (max-width: 760px) {
  .calc-ticket { padding: var(--space-sm); }
  .calc-input-row { flex-direction: column; align-items: stretch; }
  .calc-btn { justify-content: center; padding: .85rem 1.3rem; }
  .calc-reserva { flex-direction: column; align-items: flex-start; }
  .calc-class-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .calc-sub-row { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .calc-confirm-row { justify-content: stretch; }
  .calc-confirm-chip { margin-right: 0; flex-basis: 100%; }
  .calc-confirm-btn { flex: 1; justify-content: center; }
  .calc-perf { margin-inline: calc(var(--space-sm) * -1); }
}

/* ============ FOOTER ============ */
.foot { margin-top: var(--space-2xl); border-top: 1px solid var(--c-line); background: var(--c-paper-deep); }
.foot__inner { padding-block: var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.foot__brand { display: flex; align-items: center; gap: 11px; }
.foot__brand img { height: 26px; width: auto; }
.foot__brand .wm { font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.foot__meta { font-size: 13px; color: var(--c-faint); text-align: right; line-height: 1.8; }

/* ============ GATE DE ACESSO (login) ============ */
.gate { display: none; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }
body:not([data-auth="in"]) .app-shell { display: none; }
body[data-auth="out"] .gate, body[data-auth="loading"] .gate, body[data-auth="denied"] .gate { display: flex; }
.gate__card { width: 100%; max-width: 420px; background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 2.5rem 2rem; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.06); }
.gate__logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 1.6rem; }
.gate__logo img { height: 40px; width: auto; }
.gate__logo .wm { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.gate__title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.gate__sub { color: var(--c-muted); font-size: var(--fs-sm); margin-top: .5rem; margin-bottom: 1.6rem; }
.gate__form { display: grid; gap: .7rem; }
.gate__input { width: 100%; padding: .8rem 1rem; font-size: var(--fs-base); font-family: var(--font-body); color: var(--c-ink); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-md); outline: none; transition: .16s; }
.gate__input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); }
.gate__btn { padding: .8rem 1rem; font-size: var(--fs-base); font-weight: 600; font-family: var(--font-body); color: #04150C; background: var(--c-brand); border: none; border-radius: var(--radius-md); cursor: pointer; transition: .18s; }
.gate__btn:hover { background: var(--c-brand-bright); }
.gate__btn:disabled { opacity: .55; cursor: default; }
.gate__msg { font-size: var(--fs-sm); margin-top: .5rem; min-height: 1.2em; line-height: 1.4; }
.gate__msg.ok { color: var(--c-brand-text); }
.gate__msg.err { color: var(--c-down); }
.gate__foot { margin-top: 1.4rem; font-size: 12px; color: var(--c-faint); }

/* botão sair no header (só quando logado) */
.logout { display: none; align-items: center; font-size: 13px; font-weight: 500; color: var(--c-muted); background: transparent; border: 1px solid var(--c-line); border-radius: var(--radius-pill); padding: .4rem .8rem; cursor: pointer; transition: .18s; }
body[data-auth="in"] .logout { display: inline-flex; }
.logout:hover { color: var(--c-ink); border-color: var(--c-line-hair); }

/* ============ REDEFINIR SENHA ============ */
/* aviso de senha padrão (só quando logado e ainda não trocou) */
.pwbar { display: none; align-items: center; gap: 1rem 1.2rem; flex-wrap: wrap; margin-top: var(--space-lg);
  background: var(--c-brand-soft); border: 1px solid transparent; border-left: 3px solid var(--c-brand);
  border-radius: var(--radius-md); padding: .9rem 1.2rem; }
body[data-auth="in"][data-pw="default"] .pwbar { display: flex; }
.pwbar p { font-size: var(--fs-sm); color: var(--c-ink-2); flex: 1; min-width: 220px; line-height: 1.5; }
.pwbar b { color: var(--c-brand-text); font-weight: 600; }
.pwbar__btn { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #04150C; white-space: nowrap;
  background: var(--c-brand); border: none; border-radius: var(--radius-pill); padding: .5rem 1.1rem; cursor: pointer; transition: .18s; }
.pwbar__btn:hover { background: var(--c-brand-bright); }

/* botão "Trocar senha" no header */
.pw-change { display: none; align-items: center; font-size: 13px; font-weight: 500; color: var(--c-muted);
  background: transparent; border: 1px solid var(--c-line); border-radius: var(--radius-pill); padding: .4rem .8rem; cursor: pointer; transition: .18s; }
body[data-auth="in"] .pw-change { display: inline-flex; }
.pw-change:hover { color: var(--c-ink); border-color: var(--c-line-hair); }

/* modal de troca de senha */
.pwmodal { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 24px;
  background: rgba(6,15,16,.55); backdrop-filter: blur(4px); }
.pwmodal.open { display: flex; }
.pwmodal__card { width: 100%; max-width: 420px; background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.pwmodal__title { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.pwmodal__sub { color: var(--c-muted); font-size: var(--fs-sm); margin-top: .4rem; margin-bottom: 1.3rem; }
.pwmodal__form { display: grid; gap: .7rem; }
.pwmodal__actions { display: flex; gap: .6rem; margin-top: .3rem; }
.pwmodal__actions .gate__btn { flex: 1; }
.pw-cancel { flex: none; padding: .8rem 1rem; font-size: var(--fs-base); font-weight: 500; font-family: var(--font-body); color: var(--c-muted); background: transparent; border: 1px solid var(--c-line); border-radius: var(--radius-md); cursor: pointer; transition: .16s; }
.pw-cancel:hover { color: var(--c-ink); }

/* toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1100;
  background: var(--c-ink); color: var(--c-paper); font-size: var(--fs-sm); font-weight: 500;
  padding: .7rem 1.2rem; border-radius: var(--radius-pill); box-shadow: 0 8px 24px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: opacity .25s; }
.toast.show { opacity: 1; }

/* ============ MOBILE ============ */
@media (max-width: 760px) {
  .foot__inner { flex-direction: column; align-items: flex-start; }
  .foot__meta { text-align: left; }
  .brand-lock .tag, .head-date span:not(.dot) { display: none; }

  .subtabs { gap: var(--space-md); }
  .subtabs__btn { font-size: 13px; }

  .tbl-wrap, .table-wrap { border: none; overflow: visible; margin-top: var(--space-md); background: transparent; }
  table.rec, .rec-table { min-width: 0; }
  .rec thead, .rec-table thead { display: none; }
  .rec, .rec tbody, .rec tr, .rec td,
  .rec-table, .rec-table tbody, .rec-table tr, .rec-table td { display: block; width: 100%; }
  .rec tbody tr, .rec-table tbody tr { background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: var(--radius-lg); margin-bottom: 14px; padding: 6px 2px; }
  .rec tbody tr:hover td:first-child::before, .rec-table tbody tr:hover td:first-child::before { display: none; }
  .rec tbody td, .rec-table tbody td { border: none !important; padding: 11px 18px; display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; }
  .rec tbody td::before, .rec-table tbody td::before { content: attr(data-label); font-size: 12px; color: var(--c-faint); }
  .rec tbody td.c-class, .rec-table tbody td.c-class { grid-template-columns: 1fr; padding: 16px 18px 8px; }
  .rec tbody td.c-class::before, .rec-table tbody td.c-class::before { display: none; }
  .c-class { font-size: 1.25rem; }
  .c-alloc .a-bar { width: 140px; }
  tr.reserva td { border-radius: var(--radius-lg); }
}

/* ============================================================
   FRENTE 2: NAVEGAÇÃO HÍBRIDA (opção C)
   Home por objetivo ("O que você quer fazer com seu dinheiro?") + barra
   de troca de estratégia persistente no topo de toda tela de estratégia.
   Reaproveita tokens e a linguagem visual já existente (chips, callouts,
   .rec-table, .seg) em vez de inventar um sistema novo -- só o necessário
   pra home e pro cabeçalho de cada rota é definido abaixo.
   ============================================================ */

/* ---- header: logo/wordmark e botão "Objetivos" voltam pra home ---- */
.brand-lock { cursor: pointer; border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; transition: opacity .18s var(--ease-soft); }
.brand-lock:hover { opacity: .82; }
.home-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--c-muted); background: transparent; border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  padding: .4rem .8rem; cursor: pointer; transition: .18s; }
.home-btn:hover { color: var(--c-ink); border-color: var(--c-line-hair); }
.home-btn svg { width: 14px; height: 14px; }
body[data-route="home"] .home-btn { display: none; }

/* ---- switcher de estratégia: barra fixa logo abaixo do header, some na
   home. z-index abaixo do header (var(--z-nav)) e acima do conteúdo. ---- */
.strategy-bar { position: sticky; top: 62px; z-index: var(--z-sticky); background: var(--c-paper-2); border-bottom: 1px solid var(--c-line); }
body[data-route="home"] .strategy-bar { display: none; }
.strategy-nav { display: flex; align-items: center; gap: var(--space-md); padding-block: .7rem; overflow-x: auto; scrollbar-width: none; }
.strategy-nav::-webkit-scrollbar { display: none; }
.strategy-label { flex: none; font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-faint); }
.strategy-tabs { display: flex; align-items: center; gap: .4rem; flex: none; }
.strategy-tab { flex: none; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap; color: var(--c-muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: .5rem 1rem; cursor: pointer; transition: background .18s var(--ease-soft), color .18s var(--ease-soft), border-color .18s var(--ease-soft); }
.strategy-tab:hover { color: var(--c-ink); border-color: var(--c-line-hair); }
.strategy-tab[aria-current="page"] { background: var(--c-brand); color: var(--c-on-brand); border-color: var(--c-brand); }

/* ---- #view: cada rota entra com uma leve subida + fade, uma vez, sem
   escalonar item a item (a tela inteira troca, não é uma revelação
   progressiva como a da calculadora). ---- */
#view { padding-bottom: var(--space-2xl); }
.screen { animation: screen-rise .4s var(--ease) both; }
@keyframes screen-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---- rota home ---- */
.home-hero { padding-block: var(--space-xl) var(--space-lg); text-align: center; max-width: 640px; margin-inline: auto; }
.home-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-brand-text); background: var(--c-brand-soft); border-radius: var(--radius-pill);
  padding: .35rem .9rem; margin-bottom: var(--space-md); }
.home-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand); }
.home-title { font-weight: 700; font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -.03em; }
.home-sub { margin-top: var(--space-sm); color: var(--c-muted); font-size: var(--fs-lg); line-height: 1.55; }

.obj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); max-width: 920px; margin: var(--space-xl) auto 0; }
.obj-card { text-align: left; display: flex; flex-direction: column; gap: var(--space-sm); width: 100%;
  background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: var(--radius-xl);
  padding: var(--space-lg); cursor: pointer; font-family: var(--font-body); color: inherit;
  transition: border-color .22s var(--ease-soft), transform .22s var(--ease-soft), box-shadow .22s var(--ease-soft); }
.obj-card:hover, .obj-card:focus-visible { border-color: var(--c-brand); transform: translateY(-3px); box-shadow: var(--glow-soft), var(--shadow-md); }
.obj-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.obj-icon { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md);
  background: var(--c-brand-soft); font-size: 22px; }
.obj-arrow { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--c-line-hair); color: var(--c-faint); transition: transform .22s var(--ease-soft), color .22s var(--ease-soft), border-color .22s var(--ease-soft); }
.obj-arrow svg { width: 15px; height: 15px; }
.obj-card:hover .obj-arrow { transform: translateX(3px); color: var(--c-brand-text); border-color: var(--c-brand); }
.obj-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-faint); }
.obj-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; margin-top: .3rem; }
.obj-blurb { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; margin-top: .2rem; max-width: 34ch; }

/* ---- cabeçalho comum das 4 telas de estratégia ---- */
.strat-head { padding-top: var(--space-xl); }
.strat-eyebrow { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-brand-text); }
.icon-badge { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--c-brand-soft); font-size: 15px; margin-right: .55rem; vertical-align: middle; }
.strat-title { margin-top: .5rem; font-weight: 700; font-size: var(--fs-2xl); line-height: 1.08; letter-spacing: -.03em; }
.strat-head + .seg { margin-top: var(--space-lg); }

/* ---- eyebrow "estilo relatório" reaproveitado por Escalonada/Projetos
   (B5/B6): mesma tipografia do eyebrow de compliance, só sem o wrapper
   de carteira-header (que também traz "PERFIL DE RISCO", que essas duas
   telas não têm). ---- */
.report-eyebrow { display: block; margin-top: var(--space-lg); font-size: 12px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-faint); }
.report-sub { margin-top: .4rem; color: var(--c-muted); font-size: var(--fs-sm); max-width: 62ch; line-height: 1.5; }

/* ---- texto "para quem é" / textos longos (Escalonada B5, Projetos B6,
   Previdência B7) ---- */
.para-block { margin-top: var(--space-lg); max-width: 74ch; }
.para-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.para-p { color: var(--c-ink-2); font-size: var(--fs-base); line-height: 1.65; margin-top: .7rem; }
.para-p b { color: var(--c-ink); font-weight: 600; }

.section-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; margin-top: var(--space-lg); }

/* ---- lista de exemplo numerada ("Exemplo prático" da escada / "Como
   funciona" de Projetos): índice circular ecoando o .subtabs__idx já
   usado nas abas Carteira/Simular. ---- */
.example-list { margin-top: var(--space-sm); display: grid; gap: .7rem; max-width: 74ch; list-style: none; }
.example-item { display: flex; gap: .9rem; align-items: flex-start; background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: .9rem 1.1rem; }
.example-idx { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-brand-soft); color: var(--c-brand-text); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.example-text { color: var(--c-ink-2); font-size: var(--fs-sm); line-height: 1.6; }

/* ---- exemplo do imóvel em 3 anos (Projetos B6): mesma metáfora de
   "parcela" das 3 fatias 40/30/30. ---- */
.exemplo-block { margin-top: var(--space-lg); }
.parcelas-grid { margin-top: var(--space-sm); display: grid; gap: .8rem; max-width: 74ch; }
.parcela-card { display: flex; gap: 1rem; align-items: flex-start; background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 1rem 1.1rem; }
.parcela-pct { flex: none; font-weight: 800; font-size: var(--fs-lg); color: var(--c-brand-text); font-variant-numeric: tabular-nums; min-width: 3.2em; }
.parcela-ativo { font-size: var(--fs-sm); color: var(--c-ink); }
.parcela-taxa { color: var(--c-brand-text); font-weight: 600; font-size: 13px; margin-left: .5rem; }
.parcela-just { margin-top: .3rem; font-size: 13px; color: var(--c-muted); line-height: 1.5; }

/* ---- aviso de destaque (IMPORTANTE em Projetos B6; aviso de topo em
   Previdência B7): trava mais forte que o fgc-callout informativo, por
   isso usa o acento de queda (--c-down) em vez do de alerta (--c-warn). ---- */
.alert-block { display: flex; gap: .8rem; align-items: flex-start; margin-top: var(--space-lg);
  background: var(--c-down-bg); border: 1px solid transparent; border-left: 3px solid var(--c-down);
  border-radius: var(--radius-md); padding: 1rem 1.2rem; max-width: 78ch; }
.alert-block__icon { flex: none; line-height: 1.4; }
.alert-block p { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.6; font-weight: 600; }

/* ---- tabelas novas (escada de vencimentos, produtos por prazo, fundos
   de previdência): reaproveitam .rec-table por completo; só o valor em
   R$/CNPJ ganha alinhamento numérico. ---- */
.table-block { margin-top: 0; }
.num-cell { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c-ink); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none !important; }
  .obj-card { transition: none !important; }
  .obj-card:hover { transform: none !important; }
}

@media (max-width: 760px) {
  .obj-grid { grid-template-columns: 1fr; gap: var(--space-sm); margin-top: var(--space-lg); }
  .home-hero { padding-block: var(--space-lg) var(--space-md); }
  .strategy-label { display: none; }
  .strat-head { padding-top: var(--space-lg); }
  .parcela-card, .example-item { flex-direction: column; gap: .4rem; }
  .parcela-pct { font-size: var(--fs-base); }
}