@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..600&display=swap');

/* ---------------------------------------------------------------------------
   Tokens do sistema — marca Monté.

   Mesma forma do bloco que o design system entrega: um bloco só, cor e escala
   juntas. Só os valores de cor mudaram; tipografia, escala de texto,
   espaçamento, raio, motion e container seguem como estavam.

   Este é o único hex do projeto. Tudo o que vem depois é color-mix em cima
   destes tokens.

   O dourado #A37E2C é a cor da incorporadora e entra como --accent, que é o
   ponto de troca previsto por este sistema: uma edição aqui retinge o site
   inteiro, porque nenhuma camada abaixo carrega cor própria. As neutras
   acompanharam para o lado quente — as bases anteriores eram azul-petróleo, e
   um dourado sobre neutro frio esverdeia. Não é decoração: --soot, --ink e
   --navy descendem de --bg e de --border, então a temperatura delas decide a
   da página toda.
--------------------------------------------------------------------------- */

:root {
  --bg: #1a1710;
  --surface: #2b2618;
  --surface-warm: #2b2618;
  --fg: #ffffff;
  --fg-2: #efeae0;
  --muted: #c4bcab;
  --meta: #6f6754;
  --border: #4a4235;
  --border-soft: rgba(239, 234, 224, 0.14);
  --accent: #a37e2c;
  /* texto sobre o dourado: o quase-preto da marca dá 4,6:1, o branco daria
     3,8:1 — sobre um acento de luminância média quem lê melhor é a tinta */
  --accent-on: #1a1710;
  --accent-hover: #8a6a24;
  --accent-active: color-mix(in oklab, var(--accent-hover), black 12%);
  --success: #16a34a;
  --warn: #eab308;
  --danger: #dc2626;
  --signal: var(--accent);
  --on-signal: var(--accent-on);
  --font-display: "CiscoSansTT", Inter, Arial, sans-serif;
  --font-body: "CiscoSansTT", Inter, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 56px;
  --text-4xl: 72px;
  --leading-body: 1.55;
  --leading-tight: 1.05;
  --tracking-display: -0.02em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-y-desktop: 104px;
  --section-y-tablet: 76px;
  --section-y-phone: 52px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 9999px;
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 26px 44px rgba(26, 23, 16, 0.12), 0 7px 13px rgba(0, 0, 0, 0.13);
  --focus-ring: 0 0 0 3px rgba(163, 126, 44, 0.3);
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --container-max: 1240px;
  --container-gutter-desktop: 40px;
  --container-gutter-tablet: 28px;
  --container-gutter-phone: 20px;
}

/* ---------------------------------------------------------------------------
   Portal do Investidor — leitura clara sobre a camada de marca ativa.

   Duas correções de temperatura em cima dos tokens, e todo o resto decorre
   delas. As bases de marca são frias por natureza (--bg azul-preto na Cisco,
   preto-petróleo na MongoDB; --fg-2 sempre um branco puxado para o azul):
   deixadas como estão, a página inteira assenta num cinza de painel de dados.
   Por isso o branco do sistema é --warm (um traço de --warn no branco, papel
   de catálogo impresso) e o preto é --soot (o mesmo traço no --bg). Papel,
   tinta, régua e acento descendem desses dois — tudo color-mix sobre os tokens
   da marca ativa, nenhuma cor inventada e nenhum hex fora do brand-*.css.
--------------------------------------------------------------------------- */

:root {
  --warm:       color-mix(in oklab, var(--warn) 7%, white);
  --soot:       color-mix(in oklab, var(--bg) 95%, var(--warn));

  --paper:      color-mix(in oklab, var(--fg-2) 44%, var(--warm));
  --paper-2:    color-mix(in oklab, var(--fg-2) 24%, var(--warm));
  --card:       color-mix(in oklab, var(--fg-2) 5%,  var(--warm));
  --card-2:     color-mix(in oklab, var(--fg-2) 17%, var(--warm));

  --ink:        color-mix(in oklab, var(--soot) 86%, var(--border));
  --ink-2:      color-mix(in oklab, var(--border) 72%, var(--soot));
  /* ink-3 é o cinza de legenda e de rótulo, o menor corpo de texto da página,
     e por isso é o primeiro a quebrar quando se troca de marca: o --muted da
     Cisco é um cinza médio e o da MongoDB é uma prata clara de superfície
     escura. Descendo de --muted, a mesma receita dava 4,18:1 numa marca e
     2,91:1 na outra. Descendo de --ink-2 em direção ao papel, o degrau é o
     mesmo em qualquer paleta e fica acima de 4,5:1 nas duas. */
  --ink-3:      color-mix(in oklab, var(--ink-2) 75%, var(--warm));

  --rule:       color-mix(in oklab, var(--border) 22%, var(--warm));
  --rule-soft:  color-mix(in oklab, var(--border) 12%, var(--warm));

  /* o acento da página, rebaixado até virar tinta de nanquim: a 36% sobre o
     preto do sistema, um azul elétrico assenta em marinho e um verde neon
     assenta em verde de mata. O nome --navy é contrato, a cor é da marca. */
  --navy:       color-mix(in oklab, var(--accent) 36%, var(--soot));
  --navy-deep:  color-mix(in oklab, var(--accent) 21%, var(--soot));
  --navy-line:  color-mix(in oklab, var(--navy) 26%, var(--warm));
  --navy-soft:  color-mix(in oklab, var(--navy) 8%,  var(--warm));
  --navy-wash:  color-mix(in oklab, var(--navy) 4%,  var(--warm));

  --pos:        color-mix(in oklab, var(--success) 58%, var(--soot));
  --neg:        color-mix(in oklab, var(--danger) 66%, var(--soot));

  /* superfícies escuras — os capítulos de respiro do site público. Não é preto:
     é o grafite quente aberto o suficiente para a foto e o desenho de linha
     respirarem em cima. */
  --night:      color-mix(in oklab, var(--soot) 96%, var(--accent));
  --night-2:    color-mix(in oklab, var(--night) 93%, var(--warm));
  --night-line: color-mix(in oklab, var(--warm) 15%, transparent);
  --on-night:   color-mix(in oklab, var(--warm) 93%, var(--night));
  --on-night-2: color-mix(in oklab, var(--warm) 58%, var(--night));
  /* --sky é o azul do lago e das cotas de vista no desenho do terreno: é o
     único campo de cor largo da página. Vinha de --meta, e --meta na MongoDB
     é Cool Gray — o desenho inteiro saía cinza e a leitura de "vista para o
     parque" morria junto. Descendo do acento, a vista fica azul numa marca e
     verde-parque na outra, e nunca cinza. */
  --sky:        color-mix(in oklab, var(--accent) 62%, var(--navy-line));

  /* a única serifa do sistema, reservada aos títulos, aos números de destaque
     e aos preços: é ela que tira a página do registro de painel de dados e a
     põe no de imóvel. Newsreader é de eixo ótico variável — nos corpos grandes
     o desenho afina sozinho, que é o comportamento de uma serifa de revista. */
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;

  /* quinas quase retas. O raio de 12px do sistema é de produto digital; num
     material de lançamento a referência é a prancha impressa. */
  --edge:       3px;
  --edge-2:     2px;

  --rail-w: 236px;
  --shell-pad: clamp(20px, 3.2vw, 40px);
  --gap: clamp(16px, 1.7vw, 24px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote {
  margin: 0;
  padding: 0;
}

ol, ul { list-style: none; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--navy-line); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--edge);
}

/* --- tipografia ---------------------------------------------------------- */

.eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

/* A serifa entra nos títulos e nos números de vitrine. Newsreader tem eixo
   ótico: em corpo grande o desenho afina e abre por conta própria, então o
   peso pedido aqui é 340 e não 400 — num display de 50px o regular já lê
   como institucional pesado. */
.display {
  font-family: var(--font-serif);
  font-size: clamp(31px, 4vw, 54px);
  font-weight: 340;
  line-height: 1.07;
  letter-spacing: -0.016em;
  text-wrap: balance;
  margin: 0;
}

/* o itálico da mesma família. Sem troca de cor: grifar E colorir a mesma
   palavra é dizer duas vezes a mesma coisa, e a segunda vez soa promocional. */
.display em { font-style: italic; }

.h2 {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
  margin: 0;
}

.h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

.lede {
  font-size: clamp(14px, 1.05vw, 15px);
  color: var(--ink-2);
  margin: 0;
  max-width: 62ch;
}

.meta {
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* --- ícones ---------------------------------------------------------------
   Os símbolos vivem em assets/icons.js. Aqui só o comportamento: traço aberto,
   sem preenchimento, cor herdada do texto vizinho. O peso do traço é
   compensado pelo tamanho — 1,4 em 20px e 1,8 em 15px dão a mesma espessura
   aparente na tela, o que impede o ícone pequeno de sumir ao lado do grande.
--------------------------------------------------------------------------- */

.ic {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  color: var(--ink-3);
}

.ic--sm { width: 15px; height: 15px; stroke-width: 1.8; }
.ic--navy { color: var(--navy); }
.band .ic { color: var(--on-night-2); }

/* rótulo com marca: os dois andam na mesma linha e o ícone não encolhe
   quando a palavra ao lado quebra */
.ic-row { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }

/* --- shell --------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
  /* faixa da coluna do rail: o .rail é sticky/100vh, então sem isto a cor
     dele acaba no fim da primeira dobra em páginas longas */
  background:
    linear-gradient(to right,
      var(--card) 0 var(--rail-w),
      var(--rule) var(--rail-w) calc(var(--rail-w) + 1px),
      transparent calc(var(--rail-w) + 1px));
}

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-5);
  background: var(--card);
  border-right: 1px solid var(--rule);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--edge);
  background: var(--navy);
  color: var(--card);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.brand__name {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.brand__sub {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.rail__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

/* Sem ícone: são quatro palavras, e o desenho ao lado de cada uma só
   acrescentava um objeto por linha. A página ativa se marca pelo peso e pela
   cor — o fundo cheio era um quinto retângulo numa coluna que já tem poucos. */
.navlink {
  display: flex;
  align-items: center;
  min-height: 34px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--motion-fast) var(--ease-standard);
}

.navlink:hover { color: var(--ink); }

.navlink[aria-current="page"] {
  color: var(--navy-deep);
  font-weight: 600;
}

.rail__foot {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rail__unit {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* as duas saídas na mesma linha, separadas por um ponto: empilhadas, dois
   links de 12px pareciam mais navegação abaixo da navegação */
.rail__exits {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--text-xs);
}

.rail__exits form { margin: 0; display: flex; align-items: center; gap: var(--space-3); }

.rail__exits a,
.rail__exits button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--ink-3);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard);
}

.rail__exits a:hover,
.rail__exits button:hover { color: var(--navy-deep); }

.rail__exits form::before { content: "·"; color: var(--rule); }

.main {
  min-width: 0;
  width: 100%;
  /* acima de ~1480px a coluna pararia de crescer útil e só esticaria as
     linhas de texto; o teto é o mesmo container do sistema */
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--shell-pad);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.topbar { display: none; }
.tabbar { display: none; }

/* --- cartões ------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--edge);
  padding: var(--space-6);
  min-width: 0;
}

.card--flush { padding: 0; overflow: hidden; }

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.card__headline { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* o cabeçalho das quatro telas. Estava declarado três vezes, uma por página,
   com o mesmo corpo */
.page__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-bottom: var(--space-2);
}

/* --- grades -------------------------------------------------------------- */

.grid { display: grid; gap: var(--gap); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  align-items: start;
}

/* --- KPI ----------------------------------------------------------------- */

.kpi {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--edge);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.kpi__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 2.5vw, 33px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  white-space: nowrap;
}

.kpi__value sup {
  font-size: 0.46em;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: super;
  color: var(--ink-3);
}

/* a linha de apoio do KPI. O delta vinha dentro de um chip: com três cartões
   lado a lado eram três caixas dentro de três caixas, e a borda não dizia nada
   que o sinal e a cor do número já não dissessem. */
.kpi__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.kpi__foot b { font-weight: 600; color: var(--ink-2); }
.kpi__foot b.pos { color: var(--pos); }
.kpi__foot b.neg { color: var(--neg); }

/* --- chips --------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--edge-2);
  border: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  white-space: nowrap;
}

.chip--pos { color: var(--pos); border-color: color-mix(in oklab, var(--pos) 26%, var(--warm)); background: color-mix(in oklab, var(--pos) 8%, var(--warm)); }
.chip--neg { color: var(--neg); border-color: color-mix(in oklab, var(--neg) 26%, var(--warm)); background: color-mix(in oklab, var(--neg) 8%, var(--warm)); }
.chip--navy { color: var(--navy-deep); border-color: var(--navy-line); background: var(--navy-soft); }

/* reservada: mesmo azul da disponível, um grau abaixo — o tracejado carrega a
   diferença sem precisar de uma segunda cor de destaque no sistema */
.chip--hold {
  color: var(--navy-deep);
  border-color: var(--navy-line);
  border-style: dashed;
  background: transparent;
}

/* --- botões -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-5);
  border-radius: var(--edge);
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}

.btn:hover { background: var(--paper-2); color: var(--ink); }
.btn[aria-pressed="true"] { background: var(--navy-soft); border-color: var(--navy-line); color: var(--navy-deep); }
.btn--solid { background: var(--navy); border-color: var(--navy); color: var(--card); }
.btn--solid:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--card); }

/* --- barra de progresso -------------------------------------------------- */

.bar {
  height: 6px;
  border-radius: var(--edge-2);
  background: var(--paper-2);
  overflow: hidden;
}

.bar__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--navy);
}

.bar--thin { height: 5px; }
.bar__fill--quiet { background: var(--ink-3); }

/* --- tabelas enxutas ----------------------------------------------------- */

.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.tbl th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.tbl td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
  vertical-align: middle;
}

.tbl tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; padding-right: 0; }
.tbl th.r { padding-right: 0; }
.tbl .strong { color: var(--ink); font-weight: 600; }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* A capa do painel saiu: era uma foto de vitrine com quatro fatos — pavimentos,
   nº de unidades, entrega, registro — dentro da área de quem já comprou, e
   todos eles já apareciam ou nos KPIs abaixo ou na tela de documentos. Com ela
   fora, as quatro telas abrem do mesmo jeito, por .page__head. */

/* --- utilitários --------------------------------------------------------- */

.stack { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.between { justify-content: space-between; }
.sep { height: 1px; background: var(--rule); border: 0; margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- site público -------------------------------------------------------- *
   A metade comercial do sistema: quem ainda não comprou navega por um site
   normal, com header e rodapé, e não pelo shell de rail do portal. O portal
   entra pelo botão "Área do investidor".
--------------------------------------------------------------------------- */

.site {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in oklab, var(--card) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

.site__in {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--shell-pad);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 64px;
}

/* O nome por extenso no lugar do quadrado "AY": a sigla ocupava 34px de marca
   para dizer menos do que o nome já diz, e o bloco de duas linhas ao lado dela
   era o único item alto da barra — era daí que vinha o desalinhamento. Aqui o
   serifado itálico é o mesmo da capa: na página inteira ele só aparece no nome
   próprio do empreendimento, então a barra herda o gesto em vez de inventar um. */
.site__brand {
  flex: none;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease-standard);
}

.site__brand em { font-style: italic; }
.site__brand:hover { color: var(--navy); }

.site__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.site__link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--edge);
  text-decoration: none;
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}

.site__link:hover { background: var(--paper-2); color: var(--ink); }
.site__link[aria-current="page"] { color: var(--navy-deep); font-weight: 600; }

/* Dois botões lado a lado dividiam a atenção e "Área do investidor" era o
   rótulo mais largo da barra inteira — sem `nowrap` ele ainda quebrava em duas
   linhas e esticava o cabeçalho para 99px. Entrar no portal é um destino de
   quem já comprou, não a ação que a página está pedindo: vira link de texto,
   atrás de um filete que separa navegar de agir. */
.site__act { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.site__act .btn { min-height: 38px; white-space: nowrap; }

.site__enter {
  display: inline-flex;
  align-items: center;
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease-standard);
}

.site__enter::before {
  content: "";
  width: 1px;
  height: 18px;
  margin-right: var(--space-4);
  background: var(--rule);
}

.site__enter:hover { color: var(--navy); }

.page {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.sect { padding-block: clamp(38px, 5vw, 88px); }
.sect + .sect { border-top: 1px solid var(--rule); }
.sect--tight { padding-block: clamp(26px, 3.2vw, 48px); }

.sect__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 56ch;
  margin-bottom: clamp(22px, 2.6vw, 38px);
}

/* Aqui havia um filete azul de 34px acima de cada olho-de-boi. Saiu: repetido
   seis vezes na mesma página ele deixava de marcar o começo do capítulo e
   passava a marcar o gabarito — e o border-top de .sect + .sect já separa os
   capítulos sem gastar cor. */

/* --- capítulo escuro ------------------------------------------------------ *
   Uma faixa que sai da largura do container e toma a tela. É o respiro entre
   dois campos claros: sem ela a página inteira fica num tom só de cinza e
   nada mais se destaca depois da capa.
--------------------------------------------------------------------------- */

.band {
  background: var(--night);
  color: var(--on-night);
}

.band__in {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(52px, 7vw, 112px) var(--shell-pad);
}

/* o olho-de-boi da faixa escura não é azul: sobre o grafite o cinza-claro já
   se destaca, e o azul aqui viraria enfeite */
/* o rótulo da faixa escura é o lugar certo do acento: fundo escuro é a
   condição em que a marca desenhou o neon para viver. Fora daqui ele fica
   restrito ao botão — dois pontos por tela, como o sistema pede. */
.band .eyebrow { color: var(--signal); }
.band .meta { color: var(--on-night-2); }
.band .lede { color: color-mix(in oklab, var(--warm) 74%, var(--night)); }
.band .sep { background: var(--night-line); }
.band .num { color: var(--on-night); }

.band .btn {
  border-color: color-mix(in oklab, var(--warm) 26%, transparent);
  background: transparent;
  color: var(--on-night);
}

.band .btn:hover { background: color-mix(in oklab, var(--warm) 12%, transparent); color: var(--fg); }
/* sobre superfície escura o botão cheio vira o quase-branco do sistema, não o
   azul: o navy só existe para leitura sobre papel e aqui perderia contraste */
/* o hover clareia em vez de escurecer: sobre a faixa escura, um sinal mais
   fundo derrubaria o contraste do texto que está por cima dele. */
.band .btn--solid { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.band .btn--solid:hover {
  background: color-mix(in oklab, var(--signal) 82%, var(--fg));
  border-color: color-mix(in oklab, var(--signal) 82%, var(--fg));
  color: var(--on-signal);
}

.site-foot { border-top: 1px solid var(--rule); background: var(--card); }

.site-foot__in {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(28px, 3.4vw, 44px) var(--shell-pad);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

/* --- gráficos ------------------------------------------------------------ */

.chart { position: relative; }
.chart__svg { display: block; width: 100%; height: auto; }

.chart-grid { stroke: var(--rule); stroke-width: 1; }

.chart-axis {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  fill: var(--ink-3);
}

.chart-axis--y { text-anchor: end; }
.chart-axis--x { text-anchor: middle; }

.chart-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart-line--accent { stroke: var(--navy); stroke-width: 2.1; }
.chart-line--quiet  { stroke: var(--ink-3); stroke-width: 1.7; stroke-dasharray: 5 4; }

.chart-area--accent { fill: color-mix(in oklab, var(--navy) 11%, transparent); }
.chart-area--quiet  { fill: color-mix(in oklab, var(--ink-3) 7%, transparent); }

.chart-dot--accent, .chart-mark--accent { fill: var(--navy); stroke: var(--card); stroke-width: 2; }
.chart-dot--quiet,  .chart-mark--quiet  { fill: var(--ink-3); stroke: var(--card); stroke-width: 2; }

.chart-guide { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }

.chart-bar--accent { fill: var(--navy); }
.chart-bar--quiet  { fill: color-mix(in oklab, var(--ink-3) 42%, var(--warm)); }

.chart__tip {
  position: absolute;
  top: 4px;
  z-index: 4;
  display: none;
  flex-direction: column;
  gap: 3px;
  padding: 8px 11px;
  border-radius: var(--edge);
  border: 1px solid var(--rule);
  background: color-mix(in oklab, var(--card) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11.5px;
  color: var(--ink-2);
  pointer-events: none;
  white-space: nowrap;
}

.chart__tip.is-on { display: flex; }

.chart__tip-head {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

.chart__tip-row { display: flex; align-items: center; gap: 6px; }
.chart__tip-row b { margin-left: auto; padding-left: var(--space-4); color: var(--ink); font-weight: 500; }

.chart__tip-dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.chart__tip-dot--accent { background: var(--navy); }
.chart__tip-dot--quiet { background: var(--ink-3); }

.chart__legend {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--ink-2);
}

.chart__legend span { display: inline-flex; align-items: center; gap: 7px; }

.chart__key { width: 16px; height: 2px; border-radius: 2px; flex: none; }
.chart__key--accent { background: var(--navy); height: 2.5px; }
.chart__key--quiet {
  background: repeating-linear-gradient(to right,
    var(--ink-3) 0 5px, transparent 5px 9px);
}

/* swatch cheio — usado nas legendas de barra, onde a série é uma área e não um traço */
.chart__key--block { width: 10px; height: 10px; border-radius: 2px; }
.chart__key--block.chart__key--quiet {
  background: color-mix(in oklab, var(--ink-3) 40%, var(--warm));
}

/* --- responsivo ---------------------------------------------------------- */

@media (max-width: 1180px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .rail { display: none; }

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    position: sticky;
    top: 0;
    z-index: 20;
    padding: var(--space-3) var(--shell-pad);
    background: color-mix(in oklab, var(--card) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule);
  }

  /* sem o rail, o topbar é o único lugar de onde se sai da sessão */
  .topbar form { margin: 0; }

  .topbar__exit {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: var(--text-xs);
    color: var(--ink-3);
    cursor: pointer;
  }

  .topbar__exit:hover { color: var(--navy-deep); }

  .main { padding-bottom: calc(72px + var(--shell-pad)); }

  .tabbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    background: color-mix(in oklab, var(--card) 92%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    text-decoration: none;
    color: var(--ink-3);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .tab svg { opacity: 0.7; }
  .tab[aria-current="page"] { color: var(--navy-deep); }
  .tab[aria-current="page"] svg { opacity: 1; }

  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* o header público vira três faixas empilhadas: marca, navegação, ações —
   nenhuma delas some, porque no celular é por aqui que se chega ao portal.
   Com quatro destinos curtos e um botão só, a linha única aguenta até ~820px —
   o ponto de quebra desceu de 1080 junto com o peso da barra. */
@media (max-width: 820px) {
  .site__in { flex-wrap: wrap; row-gap: var(--space-3); min-height: 0; }

  .site__nav {
    order: 2;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .site__nav::-webkit-scrollbar { display: none; }
  .site__act { order: 3; }
}

/* abaixo de ~620px a faixa de navegação não cabe numa linha só e a rolagem
   horizontal apenas cortava "Disponibilidade" sem nenhum sinal de que havia
   mais link ali; em duas linhas os quatro destinos ficam visíveis */
@media (max-width: 620px) {
  .site__nav { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; }
  .site__link { padding: 0 var(--space-2); }
}

@media (max-width: 560px) {
  .site__act { width: 100%; margin-left: 0; justify-content: space-between; }
  /* empilhado, o filete separava duas linhas em vez de dois grupos */
  .site__enter::before { display: none; }
}

@media (max-width: 720px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: var(--space-5); }
  .card__head { margin-bottom: var(--space-4); }
  .site-foot__in { gap: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}