/* Observatório Truesail — superfície editorial.
   Namespace exclusivo: NENHUMA classe deste arquivo existe em public.css.
   Motivo: /about e /pricing compartilham .about-hero e .section, e a Frente B
   vai reescrever as duas. Namespace isolado desacopla as frentes.
   Carregado só pelos dois templates da seção, depois de public.css. */

.obs-hero,
.obs-wrap {
  --obs-accent: #E76F51;
  max-width: 40rem;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* REVISITADO pela Frente B (F3), como o comentário anterior pedia.

   O valor era 10rem porque a navbar pública era `position: fixed` e cada
   página compensava a barra por conta própria — reduzir aqui jogava o H1 sob
   ela. Isso deixou de valer: o cabeçalho canônico ocupa 88px no fluxo, e a
   compensação da barra saiu de dentro das páginas.

   O que resta aqui é só o RESPIRO visual abaixo da barra: 3,25rem = 52px, o
   mesmo que a landing tem entre a base da barra e o primeiro elemento. */
.obs-hero { padding-top: 3.25rem; padding-bottom: 2.5rem; }
.obs-wrap { padding-bottom: 6rem; }

.obs-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 1rem;
}
/* Neutraliza qualquer <em> herdado: a voz Truesail não colore palavra dentro
   de sentença em conteúdo editorial. */
.obs-hero h1 em { font-style: normal; color: inherit; }

.obs-lede { font-size: 1.0625rem; line-height: 1.7; color: var(--muted); }

.obs-meta { font-size: .8125rem; line-height: 1.5; color: var(--dim); margin-bottom: .75rem; }
.obs-meta .sep { margin: 0 .5rem; opacity: .6; }
.obs-meta a { color: var(--muted); text-decoration: none; }
.obs-meta a:hover { color: var(--text); text-decoration: underline; }

.obs-back {
  display: inline-block; font-size: .8125rem; color: var(--dim);
  text-decoration: none; margin-bottom: 1.5rem;
}
.obs-back:hover { color: var(--obs-accent); }

/* Índice */
.obs-list { border-top: 1px solid var(--border); }
.obs-item { border-bottom: 1px solid var(--border); padding: 1.75rem 0; }
.obs-item h2 {
  font-size: 1.1875rem; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.35; margin-bottom: .5rem;
}
.obs-item h2 a { color: var(--text); text-decoration: none; }
.obs-item h2 a:hover { color: var(--obs-accent); }
.obs-item p { font-size: .9375rem; color: var(--muted); line-height: 1.65; }

/* Corpo da matéria — o HTML do markdown-it não tem atributo algum.
   Toda regra abaixo depende exclusivamente do seletor de descendência. */
.article-body {
  font-size: 1.0625rem; line-height: 1.7; color: var(--muted);
  hyphens: auto;
  text-wrap: pretty;
}
.article-body > :first-child { margin-top: 0; }
.article-body p { margin-bottom: 1.25em; }
/* h1 no corpo é erro editorial: duplica o H1 da página. Estilizado como h2
   para que o acidente não vire um título gigante enquanto não for corrigido
   na origem. Ver DT-Noticias-H1-No-Corpo. */
.article-body h1,
.article-body h2 {
  font-size: 1.375rem; font-weight: 700; line-height: 1.35;
  letter-spacing: -.01em; color: var(--text); margin: 2.5em 0 .6em;
}
.article-body h3 {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.4;
  color: var(--text); margin: 2em 0 .5em;
}
.article-body ul,
.article-body ol { padding-left: 1.5rem; margin-bottom: 1.25em; }
/* O preflight do Tailwind CDN zera list-style em runtime. Especificidade
   só decide propriedade declarada nos dois lados — sem esta linha o
   marcador some. */
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li::marker { color: var(--dim); }
.article-body li { margin-bottom: .5em; }
.article-body li:last-child { margin-bottom: 0; }
.article-body strong { color: var(--text); font-weight: 600; }
.article-body em { font-style: italic; color: inherit; }
.article-body a {
  color: var(--text); text-decoration: underline;
  text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.article-body a:hover { color: var(--obs-accent); }
.article-body blockquote {
  border-left: 2px solid var(--border); padding-left: 1rem;
  margin: 2em 0; color: var(--dim);
}
.article-body hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }
.article-body code { font-family: 'Space Mono', monospace; font-size: .875em; }

/* Nota de apuração e fontes */
.obs-note {
  font-size: .875rem; line-height: 1.65; color: var(--dim);
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.obs-sources { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.obs-sources-label { font-size: .8125rem; color: var(--dim); margin-bottom: .75rem; }
.obs-sources ul { list-style: none; padding: 0; margin: 0; }
.obs-sources li { padding: .375rem 0; font-size: .9375rem; line-height: 1.55; }
.obs-sources a { color: var(--muted); text-decoration: none; }
.obs-sources a:hover { color: var(--text); text-decoration: underline; }
.obs-sources .tipo { color: var(--dim); }

@media (max-width: 600px) {
  .obs-hero { padding-top: 1.5rem; }
  .obs-hero, .obs-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Bloco de materias relacionadas. Mesmo padrao visual de .obs-sources
   (separador, rotulo pequeno, lista discreta), com classe propria: o
   significado e outro, e uma pagina pode ter os dois. */
.obs-related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.obs-related-label { font-size: .8125rem; color: var(--dim); margin-bottom: .75rem; }
.obs-related ul { list-style: none; padding: 0; margin: 0; }
.obs-related li { padding: .375rem 0; font-size: .9375rem; line-height: 1.55; }
.obs-related a { color: var(--muted); text-decoration: none; }
.obs-related a:hover { color: var(--text); text-decoration: underline; }
.obs-related-meta { font-size: .8125rem; color: var(--dim); }

/* Hub de editoria. A intro usa a mesma tipografia de corpo de .article-body
   (mesmo tamanho, mesma entrelinha, mesma cor), sem herdar dela: sao dois
   contextos distintos e um H2 na intro competiria com os titulos das
   materias. Por isso nao ha regra de heading aqui — o markdown da editoria
   e prosa corrida por contrato do template. */
.obs-editoria-intro {
  font-size: 1.0625rem; line-height: 1.7; color: var(--muted);
  padding-bottom: 2.5rem;
}
.obs-editoria-intro p { margin: 0 0 1.35em; }
.obs-editoria-intro p:last-child { margin-bottom: 0; }
.obs-editoria-intro strong { color: var(--text); font-weight: 600; }
.obs-editoria-intro a { color: var(--text); text-decoration: underline; }

/* CTA. Fecha a pagina com o mesmo separador discreto de .obs-note e
   .obs-sources — e nao com caixa, fundo ou destaque: o valor comercial do
   Observatorio depende de ele nao parecer peca de venda. */
.obs-cta {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: .875rem; line-height: 1.65; color: var(--dim);
}
.obs-cta p { margin: 0 0 .75em; }
.obs-cta p:last-child { margin-bottom: 0; }