/* =========================================================
   LIKE · páginas de conteúdo
   Medida de 68ch, entrelinha 1.8. Leitura longa pede linha
   curta e respiro grande entre blocos, senão o olho perde a
   linha seguinte e a pessoa abandona no terceiro parágrafo.
   ========================================================= */

.art { background: var(--paper, #f6f4ef); color: var(--ink, #14140f); }

.art-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s3) var(--gutter);
  background: rgba(251, 250, 246, .94); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(20, 20, 15, .1);
}
.art-nav .lk-mark { height: 26px; color: #0b0b0c; }
.art-nav a { text-decoration: none; color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.art-nav .voltar { font-family: "Inter", system-ui, sans-serif; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lk-gold); }

.art-progresso { position: sticky; top: 52px; z-index: 39; height: 2px; background: rgba(20,20,15,.08); }
.art-progresso i { display: block; height: 100%; width: 0; background: var(--lk-gold); }

.art-head { max-width: 820px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--gutter) 0; }
.art-tag { font-family: "Inter", system-ui, sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--lk-gold); display: block; margin-bottom: var(--s4); }
.art-head h1 { font-family: "Host Grotesk", system-ui, sans-serif; font-weight: 300;
  font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.024em; margin: 0 0 var(--s5); }
.art-lead { font-family: "Inter", system-ui, sans-serif; font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.7; color: rgba(20,20,15,.72); margin: 0 0 var(--s5); max-width: 60ch; }
.art-meta { font-family: "Inter", system-ui, sans-serif; font-size: 13px; color: rgba(20,20,15,.5);
  border-top: 1px solid rgba(20,20,15,.12); padding-top: var(--s4); }

.art-corpo { max-width: 820px; margin: 0 auto; padding: var(--s8) var(--gutter) var(--s10); }
.art-corpo h2 { font-family: "Host Grotesk", system-ui, sans-serif; font-weight: 300;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.14; letter-spacing: -.02em; margin: var(--s9) 0 var(--s4); }
.art-corpo h3 { font-family: "Host Grotesk", system-ui, sans-serif; font-weight: 400;
  font-size: clamp(19px, 1.8vw, 23px); line-height: 1.25; margin: var(--s7) 0 var(--s3); }
.art-corpo p, .art-corpo li { font-family: "Inter", system-ui, sans-serif; font-size: 17px;
  line-height: 1.8; color: rgba(20,20,15,.8); max-width: 68ch; }
.art-corpo p { margin: 0 0 var(--s5); }
.art-corpo ul, .art-corpo ol { margin: 0 0 var(--s6); padding-left: 1.2em; }
.art-corpo li { margin-bottom: var(--s3); }
.art-corpo strong { font-weight: 500; color: rgba(20,20,15,.95); }
.art-corpo a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lk-gold); }

.art-sumario { border: 1px solid rgba(20,20,15,.14); border-radius: 4px; padding: var(--s5) var(--s6);
  margin: 0 0 var(--s8); background: rgba(251,250,246,.7); }
.art-sumario b { font-family: "Inter", system-ui, sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(20,20,15,.5); display: block; margin-bottom: var(--s3); }
.art-sumario ol { margin: 0; padding-left: 1.1em; }
.art-sumario li { margin-bottom: var(--s2); font-size: 15.5px; }

.art-caixa { border-left: 2px solid var(--lk-gold); background: rgba(200,149,74,.07);
  padding: var(--s5) var(--s5) var(--s5) var(--s6); margin: 0 0 var(--s6); }
.art-caixa p:last-child { margin-bottom: 0; }
.art-caixa p { font-size: 16px; }

.art-tabela { width: 100%; border-collapse: collapse; margin: 0 0 var(--s6); }
.art-tabela th, .art-tabela td { text-align: left; padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid rgba(20,20,15,.12); font-family: "Inter", system-ui, sans-serif;
  font-size: 15px; line-height: 1.6; vertical-align: top; }
.art-tabela th { font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(20,20,15,.55); }
.art-rolagem { overflow-x: auto; }

.art-cta { background: #0b0b0c; color: #fbfaf6; border-radius: 4px;
  padding: clamp(28px, 4vw, 48px); margin: var(--s9) 0 0; }
.art-cta h2 { margin: 0 0 var(--s3); color: #fbfaf6; font-size: clamp(22px, 2.4vw, 30px); }
.art-cta p { color: rgba(251,250,246,.7); margin-bottom: var(--s5); max-width: 52ch; }

.art-relacionados { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter) var(--s10); }
.art-relacionados h2 { font-family: "Host Grotesk", system-ui, sans-serif; font-weight: 300;
  font-size: 24px; margin: 0 0 var(--s5); }
.art-relacionados a { display: block; text-decoration: none; color: inherit;
  border-top: 1px solid rgba(20,20,15,.14); padding: var(--s4) 0; min-height: 44px; }
.art-relacionados a b { display: block; font-family: "Inter", system-ui, sans-serif;
  font-size: 17px; font-weight: 400; margin-bottom: 4px; }
.art-relacionados a span { font-family: "Inter", system-ui, sans-serif; font-size: 14px; color: rgba(20,20,15,.55); }

@media (max-width: 720px) {
  .art-progresso { top: 48px; }
  .art-corpo p, .art-corpo li { font-size: 16px; }
}

/* --- correções medidas no medidor (375/390/412) ---------------------- */

/* o link do logo tinha 21 px de largura */
.art-nav a[aria-label] { min-width: 44px; justify-content: flex-start; }

/* itens do sumário tinham 20 px de altura */
.art-sumario li a { display: inline-flex; align-items: center; min-height: 44px; }
.art-sumario li { margin-bottom: 0; }

/* art-tag media 11 px */
.art-tag { font-size: 12px; }

/* contraste: texto de apoio estava em .5 e .55 sobre papel claro */
.art-meta, .art-relacionados a span { color: rgba(20, 20, 15, .66); }
.art-sumario b { color: rgba(20, 20, 15, .62); }
.art-tabela th { color: rgba(20, 20, 15, .66); }

/* O dourado da marca (#C8954A) sobre papel dá 2,43:1 e não passa em AA.
   Em TEXTO usamos a versão tinta (#8A6320 = 4,92:1); o dourado original
   segue valendo em fundo, filete e ícone, onde a régua é outra. */
.art-tag { color: #8A6320; }

/* O botão estava com texto claro sobre o dourado (2,56:1). Texto preto
   sobre o mesmo dourado dá 7,36:1. */
.art-cta .btn--gold, .art-corpo .btn--gold { color: #0b0b0c; }