/* ---------------------------------------------------------------------------
   mercado-report — blog

   Terceira superficie de leitura do projeto, e ela e CLARA de proposito.

   A landing e vitrine e e sempre escura: a pessoa passa segundos nela. O
   artigo e para ler por minutos, e fundo escuro cansa nesse tempo. Por isso
   este arquivo fica mais perto de legal.css (documento) do que de
   landing.css (vitrine) — mesma coluna estreita, mesma logica de leitura.

   O que amarra tudo a marca: a logo, a familia tipografica (Fraunces nos
   titulos, Inter no corpo), o dourado como unico destaque e a escala de
   arredondamento compartilhada com a extensao e o backoffice.

   Nao ha alternador de tema aqui, como nao ha na landing nem nas legais.
--------------------------------------------------------------------------- */

:root {
  --tinta: #10141C;
  --tinta-70: rgba(16, 20, 28, .74);
  --tinta-50: rgba(16, 20, 28, .54);
  --tinta-20: rgba(16, 20, 28, .14);
  --papel: #FFFFFF;
  --papel-fundo: #F6F4EE;
  --linha: #E4E0D6;
  --ouro: #D9A62E;
  --ouro-fundo: #FDF6E3;
  --ouro-linha: #EBD9A6;
  --lucro: #1F8A57;
  --lucro-fundo: #EDF7F1;
  --vaza: #C4432F;
  --vaza-fundo: #FCF0ED;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', monospace;

  /* Mesma escala da extensao, do backoffice, da landing e das legais. */
  --raio: 12px;
  --raio-sm: 8px;

  --coluna: 700px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--tinta);
  background: var(--papel-fundo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

/* --------------------------------------------------------------- cabecalho */

header.topo {
  background: var(--tinta);
  color: #F7F3EA;
  border-bottom: 3px solid var(--ouro);
}
.topo-inner {
  max-width: 1040px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo {
  font-family: var(--serif);
  font-weight: 700; font-size: 20px; letter-spacing: -.3px;
  text-decoration: none; color: #F7F3EA;
  /* Sem isto a marca quebra em "mercado" / "-report" a 375px: o cabecalho
     inteiro cabe por 12px de folga, e o navegador parte o logo para fechar a
     conta. Marca partida no topo do artigo e a primeira coisa que se ve. */
  white-space: nowrap;
}
.logo .dash { color: var(--ouro); }
.topo-links { display: flex; gap: 18px; align-items: center; font-size: 14px; }
.topo-links a { color: rgba(247,243,234,.78); text-decoration: none; }
.topo-links a:hover { color: #F7F3EA; }
.topo-cta {
  background: var(--ouro); color: var(--tinta) !important;
  padding: 8px 15px; border-radius: var(--raio-sm); font-weight: 700;
  white-space: nowrap;
}
.topo-cta:hover { background: #F0C34E; }
@media (max-width: 620px) {
  .topo-links .esconde-mobile { display: none; }
}
/* Aperta o cabecalho no celular para o logo, "entrar" e o CTA caberem numa
   linha so. Medido a 375px: sem isto sobram 12px e algo tem de ceder. */
@media (max-width: 430px) {
  .topo-inner { padding: 14px 18px; }
  .logo { font-size: 18px; }
  .topo-links { gap: 14px; font-size: 13.5px; }
  .topo-cta { padding: 7px 12px; }
}

/* ------------------------------------------------------------------ layout */

main { max-width: var(--coluna); margin: 0 auto; padding: 0 24px 80px; }

.trilha {
  font-size: 13.5px; color: var(--tinta-50);
  padding: 26px 0 0; display: flex; gap: 8px; flex-wrap: wrap;
}
.trilha a { color: var(--tinta-50); text-decoration: none; }
.trilha a:hover { color: var(--ouro); text-decoration: underline; }

article { background: transparent; }

.artigo-cab { padding: 18px 0 26px; border-bottom: 1px solid var(--linha); margin-bottom: 34px; }

h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 5.2vw, 42px);
  line-height: 1.16; letter-spacing: -.8px; font-weight: 700;
  margin-bottom: 16px;
}
.resumo { font-size: 18.5px; color: var(--tinta-70); line-height: 1.62; }
.meta {
  margin-top: 18px; font-size: 13.5px; color: var(--tinta-50);
  font-family: var(--mono); display: flex; gap: 14px; flex-wrap: wrap;
}

h2 {
  font-family: var(--serif);
  font-size: clamp(23px, 3.6vw, 28px);
  line-height: 1.25; letter-spacing: -.4px; font-weight: 700;
  margin: 46px 0 14px;
}
h3 {
  font-size: 18px; font-weight: 700;
  margin: 30px 0 10px;
}
p { margin-bottom: 18px; }
p a, li a { color: #14603C; text-decoration: underline; text-underline-offset: 2px; }
p a:hover, li a:hover { color: var(--ouro); }

ul, ol { margin: 0 0 18px 22px; }
li { margin-bottom: 8px; }
strong { font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--linha); margin: 44px 0; }

/* ------------------------------------------------------------------ blocos */

/* Caixa de destaque. `.atencao` para armadilha, `.dica` para atalho. */
.caixa {
  background: var(--papel); border: 1px solid var(--linha);
  border-left: 4px solid var(--ouro);
  border-radius: var(--raio-sm);
  padding: 18px 20px; margin: 26px 0;
  font-size: 16px;
}
.caixa p:last-child { margin-bottom: 0; }
.caixa .rotulo {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--ouro); display: block; margin-bottom: 6px;
}
.caixa.atencao { border-left-color: var(--vaza); background: var(--vaza-fundo); }
.caixa.atencao .rotulo { color: var(--vaza); }
.caixa.dica { border-left-color: var(--lucro); background: var(--lucro-fundo); }
.caixa.dica .rotulo { color: var(--lucro); }

/* Conta passo a passo — a metafora e o recibo da landing. */
.conta {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio-sm); padding: 8px 20px; margin: 26px 0;
  font-family: var(--mono); font-size: 15px;
}
.conta-linha {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px dashed var(--linha);
}
.conta-linha:last-child { border-bottom: 0; }
.conta-linha .v { white-space: nowrap; font-variant-numeric: tabular-nums; }
.conta-linha.menos .v { color: var(--vaza); }
.conta-linha.total {
  font-weight: 700; border-top: 2px solid var(--tinta); border-bottom: 0;
  margin-top: 4px; padding-top: 12px;
}
.conta-linha.total .v { color: var(--lucro); }

.tabela-wrap { overflow-x: auto; margin: 26px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; background: var(--papel); }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linha); }
th { background: var(--ouro-fundo); font-weight: 700; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

figure { margin: 30px 0; }
/* `max-width`, nunca `width: 100%`: forcar a largura da coluna AMPLIA print
   estreito. O painel tem 476px de largura nativa e virava 652 — 1,37x —, que
   e exatamente como se borra uma captura de tela. Aqui ela nunca passa do
   tamanho real, e so encolhe quando nao couber. */
figure img {
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
figcaption { font-size: 14px; color: var(--tinta-50); margin-top: 10px; text-align: center; }

/* Print de tela nao cabe na coluna de leitura: a captura tem ~1220px e, espremida
   em 700, o texto miudo da interface vira borrao. `.larga` deixa a figura
   estourar a coluna sem mexer na medida do texto, que continua confortavel.
   Nunca passa da viewport — os 48px sao a margem lateral do `main`. */
figure.larga {
  width: min(1020px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
}

/* No celular, encolher a captura ate caber devolve 0,27 de escala — os numeros
   da interface viram borrao justamente para o publico majoritario deste funil.
   Aqui a figura vira uma faixa que rola na horizontal: a imagem mantem tamanho
   legivel e o leitor arrasta. O `overflow` fica na figura, nunca no `body` — a
   pagina em si nunca rola de lado. */
@media (max-width: 760px) {
  figure.larga {
    width: auto; margin-left: 0; transform: none;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* Largura fixa, nao `min-width`: com `auto` a imagem assume os 1220px
     naturais e o leitor arrasta muito mais do que precisa. 860 mantem os
     numeros legiveis com o menor arrasto possivel. */
  figure.larga img { width: 860px; max-width: none; }
  figure.larga figcaption { position: sticky; left: 0; }
}

/* ---------------------------------------------------------------- chamadas */

.cta {
  background: var(--tinta); color: #F7F3EA;
  border-radius: var(--raio); padding: 30px 28px; margin: 44px 0;
  text-align: center;
}
.cta h2 {
  color: #F7F3EA; margin: 0 0 10px; font-size: clamp(21px, 3.4vw, 26px);
}
.cta p { color: rgba(247,243,234,.76); font-size: 16px; margin-bottom: 22px; }
.cta-botoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-ouro, .btn-vazado {
  display: inline-block; padding: 13px 22px; border-radius: var(--raio-sm);
  font-weight: 700; font-size: 15.5px; text-decoration: none;
}
.btn-ouro { background: var(--ouro); color: var(--tinta); }
.btn-ouro:hover { background: #F0C34E; }
.btn-vazado { border: 1px solid rgba(247,243,234,.3); color: #F7F3EA; }
.btn-vazado:hover { border-color: rgba(247,243,234,.6); }
.cta-nota { font-size: 13.5px; color: rgba(247,243,234,.5); margin: 16px 0 0; }
@media (max-width: 460px) { .cta-botoes a { width: 100%; } }

/* Leia tambem — a rede de links internos do plano de conteudo. */
.relacionados { margin: 44px 0 0; }
.relacionados h2 { font-size: 20px; margin-bottom: 14px; }
.relacionados ul { list-style: none; margin: 0; }
.relacionados li { margin-bottom: 0; border-bottom: 1px solid var(--linha); }
.relacionados li:first-child { border-top: 1px solid var(--linha); }
.relacionados a {
  display: block; padding: 14px 0; text-decoration: none; font-weight: 600;
}
.relacionados a:hover { color: var(--ouro); }
.relacionados .sub { display: block; font-weight: 400; font-size: 14.5px; color: var(--tinta-50); }

/* ------------------------------------------------------------- indice /blog */

.indice-cab { padding: 44px 0 30px; text-align: center; }
.indice-cab .eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ouro); margin-bottom: 12px;
}
.indice-cab p { color: var(--tinta-70); font-size: 18px; max-width: 560px; margin: 12px auto 0; }

.lista-posts { list-style: none; margin: 20px 0 0; }
.lista-posts li { margin-bottom: 14px; }
.lista-posts a {
  display: block; background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 22px 24px; text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.lista-posts a:hover { border-color: var(--ouro); transform: translateY(-2px); }
.lista-posts h2 { font-size: 21px; margin: 0 0 8px; line-height: 1.3; }
.lista-posts p { color: var(--tinta-70); font-size: 15.5px; margin: 0; }
.lista-posts .em-breve { opacity: .58; }
.lista-posts .em-breve .marca {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .8px;
  text-transform: uppercase; color: var(--tinta-50);
}

/* -------------------------------------------------------------- rodape */

footer {
  border-top: 1px solid var(--linha); background: var(--papel);
  padding: 30px 24px; margin-top: 60px;
}
.rodape-inner {
  max-width: 1040px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: var(--tinta-50);
}
.rodape-inner a { color: var(--tinta-50); text-decoration: none; }
.rodape-inner a:hover { color: var(--ouro); text-decoration: underline; }
.rodape-links { display: flex; gap: 16px; flex-wrap: wrap; }

/* -------------------------------------------------------------- impressao */

@media print {
  header.topo, .cta, .relacionados, footer, .trilha { display: none; }
  body { background: #fff; font-size: 12pt; }
  main { max-width: none; padding: 0; }
  .caixa, .conta, table { break-inside: avoid; }
}