/* =====================================================================
   ABEPRO, camada de notícias e postagens — prefixo nt-
   ---------------------------------------------------------------------
   Cobre três telas:
     1. Arquivo (/noticias/): destaque + filtros + lista
     2. Postagem (/noticias/<slug>/): cabeçalho, corpo, coluna fixa
     3. Blocos de apoio: resumo, tabela de fatos, FAQ, fontes, autoria
   Os blocos de SEO/GEO (resumo em tópicos, sumário, tabela de fatos e
   perguntas frequentes) têm estilo próprio porque também são âncoras de
   extração para buscadores e assistentes: precisam ficar visíveis e
   semanticamente separados do corpo do texto.
   ===================================================================== */

/* =====================================================================
   1. Barra de progresso de leitura
   ===================================================================== */
.nt-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: calc(var(--z-header) + 2); background: transparent; pointer-events: none; }
.nt-progress__bar { height: 100%; width: 0; background: var(--accent-500); transition: width 80ms linear; }

/* =====================================================================
   2. Cabeçalho da postagem
   ===================================================================== */
.nt-head { padding: var(--space-6) 0 var(--space-4); border-bottom: 1px solid var(--neutral-100); background: var(--white); }
.nt-head__in { max-width: 820px; }
.nt-head__cat { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-600); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius-pill); padding: 6px 13px; text-decoration: none; }
.nt-head__cat:hover { background: var(--brand-100); color: var(--brand-700); }
.nt-head__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 4vw, var(--text-4xl)); line-height: 1.14; color: var(--brand-900); margin: 18px 0 0; letter-spacing: -.01em; }
/* A linha de apoio (dek) é o primeiro trecho que buscadores e assistentes
   citam: uma frase completa, autossuficiente, sem depender do título. */
.nt-head__dek { font-size: var(--text-md); line-height: 1.6; color: var(--neutral-600); margin-top: 16px; max-width: 720px; }

.nt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--neutral-100); }
.nt-meta__who { display: flex; align-items: center; gap: 11px; }
.nt-meta__av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--brand-400)); }
.nt-meta__name { font-size: 14px; font-weight: 600; color: var(--neutral-900); line-height: 1.3; }
.nt-meta__role { font-size: 12.5px; color: var(--neutral-500); margin-top: 1px; }
.nt-meta__dates { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--neutral-500); margin-left: auto; }
.nt-meta__dates span { display: inline-flex; align-items: center; gap: 6px; }
.nt-meta__dates i { color: var(--brand-400); }
.nt-meta__upd { color: var(--brand-600); font-weight: 600; }

/* =====================================================================
   3. Imagem de capa
   ===================================================================== */
.nt-cover { margin: 0; }
.nt-cover__frame { position: relative; border-radius: var(--radius-2xl); overflow: hidden; background: var(--neutral-100); aspect-ratio: 16 / 9; }
.nt-cover__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-cover figcaption { font-size: 12.5px; color: var(--neutral-500); line-height: 1.5; margin-top: 10px; }
.nt-cover figcaption strong { color: var(--neutral-700); font-weight: 600; }

/* =====================================================================
   4. Grade da postagem: corpo + coluna fixa
   ===================================================================== */
.nt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.nt-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--space-3); }
.nt-panel { background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); padding: 20px; }
.nt-panel__title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-500); margin-bottom: 14px; }

/* =====================================================================
   5. Em resumo (bloco de extração)
   ===================================================================== */
.nt-key { background: var(--brand-50); border: 1px solid var(--brand-100); border-left: 4px solid var(--brand-500); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: var(--space-5); }
.nt-key__title { display: flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-700); margin: 0 0 14px; }
.nt-key__title i { color: var(--accent-600); }
.nt-key ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* O marcador e posicionado, nao e um item de flex: dentro do <li> ha texto
   e <strong> misturados, e o flex separaria cada trecho com o gap. */
.nt-key li { position: relative; padding-left: 19px; font-size: 14.5px; line-height: 1.6; color: var(--neutral-800); }
.nt-key li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-500); }
.nt-key strong { color: var(--brand-900); font-weight: 600; }

/* =====================================================================
   6. Sumário (gerado a partir dos h2 do corpo)
   ===================================================================== */
.nt-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-toc li { counter-increment: toc; }
.nt-toc a { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.45; color: var(--neutral-600); text-decoration: none; padding: 7px 10px; border-radius: var(--radius-md); border-left: 2px solid transparent; }
.nt-toc a::before { content: counter(toc); font-family: var(--font-mono); font-size: 11px; color: var(--brand-400); flex-shrink: 0; }
.nt-toc a:hover { background: var(--neutral-50); color: var(--brand-700); }
.nt-toc a.is-current { background: var(--brand-50); border-left-color: var(--brand-500); color: var(--brand-800); font-weight: 600; }

/* =====================================================================
   7. Corpo do texto
   ===================================================================== */
.nt-body { max-width: 720px; }
.nt-body > p:first-of-type { font-size: var(--text-md); line-height: 1.68; color: var(--neutral-800); }
.nt-body h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: 1.22; color: var(--brand-900); margin: var(--space-6) 0 14px; scroll-margin-top: 100px; }
.nt-body h3 { font-family: var(--font-sans); font-weight: 600; font-size: 17.5px; color: var(--neutral-900); margin: var(--space-4) 0 10px; scroll-margin-top: 100px; }
.nt-body p { font-size: 15.5px; line-height: 1.75; color: var(--neutral-700); margin: 0 0 18px; }
.nt-body ul, .nt-body ol { margin: 0 0 20px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.nt-body li { font-size: 15.5px; line-height: 1.7; color: var(--neutral-700); }
.nt-body li::marker { color: var(--brand-400); }
.nt-body strong { color: var(--neutral-900); font-weight: 600; }
.nt-body a:not(.btn) { color: var(--brand-600); text-decoration: underline; text-decoration-color: var(--brand-200); text-underline-offset: 3px; }
.nt-body a:not(.btn):hover { color: var(--brand-700); text-decoration-color: var(--brand-500); }
.nt-body blockquote { margin: var(--space-4) 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--accent-500); }
.nt-body blockquote p { font-family: var(--font-serif, var(--font-sans)); font-size: 18px; line-height: 1.6; color: var(--neutral-800); font-style: italic; }
.nt-body blockquote cite { display: block; font-size: 13px; font-style: normal; color: var(--neutral-500); margin-top: -8px; }
.nt-body figure { margin: var(--space-4) 0; }
.nt-body figure img { width: 100%; border-radius: var(--radius-xl); display: block; }
.nt-body figcaption { font-size: 12.5px; color: var(--neutral-500); margin-top: 9px; line-height: 1.5; }
.nt-body hr { border: 0; border-top: 1px solid var(--neutral-200); margin: var(--space-5) 0; }
.nt-body code, .nt-body kbd { font-family: var(--font-mono); font-size: 13px; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 5px; padding: 1px 6px; }

/* =====================================================================
   8. Tabela de fatos (dados duros, fáceis de extrair)
   ===================================================================== */
.nt-facts { width: 100%; border-collapse: collapse; margin: var(--space-4) 0 var(--space-5); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); overflow: hidden; }
.nt-facts caption { caption-side: top; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-500); padding-bottom: 10px; }
.nt-facts th, .nt-facts td { text-align: left; padding: 13px 16px; font-size: 14.5px; line-height: 1.5; border-bottom: 1px solid var(--neutral-100); vertical-align: top; }
.nt-facts th { width: 34%; font-family: var(--font-sans); font-weight: 600; color: var(--brand-700); background: var(--neutral-50); white-space: nowrap; }
.nt-facts td { color: var(--neutral-800); }
.nt-facts tr:last-child th, .nt-facts tr:last-child td { border-bottom: 0; }

/* =====================================================================
   9. Destaque lateral no corpo
   ===================================================================== */
.nt-callout { display: flex; gap: 15px; align-items: flex-start; background: var(--accent-50); border: 1px solid var(--accent-100); border-radius: var(--radius-lg); padding: 18px 20px; margin: var(--space-4) 0 var(--space-5); }
.nt-callout > i { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--accent-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.nt-callout__t { font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--neutral-900); margin-bottom: 5px; }
.nt-callout p { font-size: 14px; line-height: 1.62; color: var(--neutral-700); margin: 0; }

/* =====================================================================
   10. Perguntas frequentes (par com o JSON-LD FAQPage)
   ===================================================================== */
.nt-faq { display: flex; flex-direction: column; gap: 10px; }
.nt-faq details { background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--duration-base); }
.nt-faq details[open] { border-color: var(--brand-200); box-shadow: var(--shadow-xs); }
.nt-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; font-family: var(--font-sans); font-size: 15.5px; font-weight: 600; color: var(--neutral-900); line-height: 1.45; list-style: none; }
.nt-faq summary::-webkit-details-marker { display: none; }
.nt-faq summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: var(--brand-500); flex-shrink: 0; transition: transform var(--duration-base); }
.nt-faq details[open] summary::after { transform: rotate(180deg); }
.nt-faq summary:hover { color: var(--brand-700); }
.nt-faq__a { padding: 0 20px 18px; }
.nt-faq__a p { font-size: 14.5px; line-height: 1.7; color: var(--neutral-700); margin: 0 0 12px; }
.nt-faq__a p:last-child { margin-bottom: 0; }
.nt-faq__a a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   11. Fontes e transparência
   ===================================================================== */
.nt-sources { background: var(--neutral-50); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); padding: 20px 22px; }
.nt-sources__title { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-600); margin-bottom: 13px; }
.nt-sources__title i { color: var(--brand-500); }
.nt-sources ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.nt-sources li { font-size: 13.5px; line-height: 1.6; color: var(--neutral-600); }
.nt-sources a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   12. Autoria, marcadores e compartilhamento
   ===================================================================== */
.nt-author { display: flex; gap: 18px; align-items: flex-start; background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); padding: 22px 24px; }
.nt-author__av { width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 17px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand-700), var(--brand-400)); }
.nt-author__name { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--neutral-900); }
.nt-author__role { font-size: 12.5px; color: var(--brand-600); font-weight: 600; margin-top: 2px; }
.nt-author__bio { font-size: 14px; line-height: 1.62; color: var(--neutral-600); margin: 10px 0 0; }

.nt-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nt-tags__label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--neutral-500); margin-right: 4px; }
.nt-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--neutral-700); background: var(--neutral-50); border: 1px solid var(--neutral-200); border-radius: var(--radius-pill); padding: 6px 13px; text-decoration: none; }
.nt-tag::before { content: "#"; color: var(--brand-400); font-weight: 700; }
.nt-tag:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }

.nt-share { display: flex; flex-direction: column; gap: 8px; }
.nt-share__row { display: flex; flex-wrap: wrap; gap: 7px; }
.nt-share__btn { width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--neutral-200); background: var(--white); color: var(--neutral-600); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; text-decoration: none; transition: color var(--duration-base), border-color var(--duration-base), background var(--duration-base); }
.nt-share__btn:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
.nt-share__btn.is-copied { color: var(--success-700); border-color: var(--success-500); background: var(--success-100); }

/* =====================================================================
   13. Navegação entre postagens
   ===================================================================== */
.nt-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.nt-nav__item { display: flex; flex-direction: column; gap: 7px; background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); padding: 18px 22px; text-decoration: none; color: inherit; transition: border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-base) var(--ease-out); }
.nt-nav__item:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.nt-nav__item--next { text-align: right; align-items: flex-end; }
.nt-nav__dir { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-500); }
.nt-nav__t { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--neutral-900); line-height: 1.4; }

/* =====================================================================
   14. Arquivo (/noticias/)
   ===================================================================== */
.nt-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-2xl); overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--duration-base), box-shadow var(--duration-base); }
.nt-featured:hover { border-color: var(--brand-200); box-shadow: var(--shadow-md); }
.nt-featured__media { position: relative; min-height: 320px; background: linear-gradient(130deg, var(--brand-900), var(--brand-500)); overflow: hidden; }
.nt-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.nt-featured__flag { position: absolute; top: 18px; left: 18px; z-index: 1; }
.nt-featured__body { padding: var(--space-5); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.nt-featured__cat { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-500); }
.nt-featured__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, var(--text-3xl)); line-height: 1.2; color: var(--brand-900); }
.nt-featured__text { font-size: 15px; line-height: 1.65; color: var(--neutral-600); }
.nt-featured__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--neutral-500); padding-top: 12px; border-top: 1px solid var(--neutral-100); }
.nt-featured__meta span { display: inline-flex; align-items: center; gap: 6px; }
.nt-featured__meta i { color: var(--brand-400); }

.nt-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-filter { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-pill); padding: 8px 15px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--neutral-700); cursor: pointer; transition: background var(--duration-base), color var(--duration-base), border-color var(--duration-base); }
.nt-filter:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }
.nt-filter.is-active { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.nt-filter__n { font-size: 10px; font-weight: 700; background: var(--neutral-100); color: var(--neutral-600); border-radius: var(--radius-pill); padding: 2px 7px; }
.nt-filter.is-active .nt-filter__n { background: rgba(255,255,255,.18); color: #fff; }

.nt-list { display: flex; flex-direction: column; gap: 14px; }
.nt-post { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-3); background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-xl); overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-base) var(--ease-out); }
.nt-post:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.nt-post.is-hidden { display: none; }
.nt-post__media { background: linear-gradient(130deg, var(--brand-900), var(--brand-500)); min-height: 150px; overflow: hidden; }
.nt-post__media img { width: 100%; height: 100%; object-fit: cover; }
.nt-post__body { padding: 20px 22px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.nt-post__cat { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-500); }
.nt-post__title { font-family: var(--font-sans); font-weight: 600; font-size: 17px; line-height: 1.38; color: var(--neutral-900); }
.nt-post__text { font-size: 14px; line-height: 1.6; color: var(--neutral-600); flex: 1; }
.nt-post__meta { display: flex; flex-wrap: wrap; gap: 5px 16px; font-size: 12.5px; color: var(--neutral-500); }
.nt-post__meta span { display: inline-flex; align-items: center; gap: 6px; }
.nt-post__meta i { color: var(--brand-400); }
.nt-empty { display: none; text-align: center; padding: var(--space-6); color: var(--neutral-500); font-size: 14.5px; }
.nt-empty.is-visible { display: block; }
.nt-count { font-size: 13px; color: var(--neutral-500); }

/* Cartões compactos (leia também) */
.nt-mini { display: flex; flex-direction: column; gap: 12px; }
.nt-mini__item { display: flex; gap: 13px; align-items: flex-start; text-decoration: none; color: inherit; }
.nt-mini__n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--brand-300); flex-shrink: 0; padding-top: 2px; }
.nt-mini__t { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--neutral-800); }
.nt-mini__item:hover .nt-mini__t { color: var(--brand-700); }
.nt-mini__d { display: block; font-size: 11.5px; color: var(--neutral-500); margin-top: 3px; }

/* =====================================================================
   15. Aviso do modelo (só na página de referência)
   ===================================================================== */
.nt-guide { background: var(--brand-950); color: rgba(255,255,255,.85); border-radius: var(--radius-xl); padding: 22px 24px; margin-bottom: var(--space-5); }
.nt-guide h2 { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.nt-guide p { font-size: 14px; line-height: 1.65; margin: 0 0 10px; }
.nt-guide p:last-child { margin-bottom: 0; }
.nt-guide code { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent-400); background: rgba(255,255,255,.08); border-radius: 4px; padding: 2px 6px; }

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 1023px) {
  .nt-layout { grid-template-columns: 1fr; }
  .nt-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .nt-aside > * { flex: 1 1 260px; }
  .nt-featured { grid-template-columns: 1fr; }
  .nt-featured__media { min-height: 240px; }
  .nt-body { max-width: none; }
}
@media (max-width: 767px) {
  .nt-head { padding-top: var(--space-4); }
  .nt-meta__dates { margin-left: 0; width: 100%; }
  .nt-post { grid-template-columns: 1fr; }
  .nt-post__media { min-height: 190px; }
  .nt-post__body { padding: 18px 20px; }
  .nt-nav { grid-template-columns: 1fr; }
  .nt-nav__item--next { text-align: left; align-items: flex-start; }
  .nt-facts th, .nt-facts td { display: block; width: auto; white-space: normal; }
  .nt-facts th { border-bottom: 0; padding-bottom: 4px; }
  .nt-key { padding: 18px 20px; }
  .nt-aside > * { flex: 1 1 100%; }
}