/* ============================================================
   Orange Invest — módulo educacional (deep-dive por gomo)
   Estende landing.css: mesmos tokens, mesmo header/footer/CTA.
   Este arquivo só acrescenta os componentes do artigo longo —
   trilha de leitura numerada, callouts, tabela comparativa e
   selos de fonte (CVM/PINHEIRO) que dão lastro institucional
   ao conteúdo, em vez de conselho genérico sem origem.
   ============================================================ */

/* ---------- breadcrumb ---------- */
.breadcrumb{
  display:flex; align-items:center; gap:8px; margin:0 0 22px;
  font-family:var(--font-mono); font-size:0.8rem; color:var(--text-on-ink-mu);
  text-decoration:none;
}
.breadcrumb svg{width:14px; height:14px; flex:none}
.breadcrumb:hover{color:var(--orange-300)}

/* ---------- mini-hero do artigo ---------- */
.article-hero{
  background:
    radial-gradient(760px 460px at 88% -20%, rgba(255,122,51,0.22), transparent 60%),
    var(--ink);
  color:var(--text-on-ink);
  padding:56px 0 64px;
}
.article-hero .eyebrow{margin-bottom:16px}
.article-hero h1{
  font-family:var(--font-display); font-weight:600; font-size:clamp(2.1rem,3.6vw,3rem);
  line-height:1.1; letter-spacing:-0.015em; margin:0 0 18px; max-width:20ch;
}
.article-hero .lead{font-size:1.08rem; color:var(--text-on-ink-mu); max-width:62ch; margin:0 0 22px}
.article-meta{display:flex; flex-wrap:wrap; gap:10px 22px; font-family:var(--font-mono); font-size:0.78rem; color:var(--text-on-ink-mu)}
.article-meta b{color:var(--orange-300); font-weight:600}

/* ---------- layout: sumário fixo + conteúdo ---------- */
.article-body{padding:64px 0 20px}
.article-layout{
  display:grid; grid-template-columns:240px minmax(0,1fr); gap:56px; align-items:start;
}
.toc{position:sticky; top:28px; padding:22px 4px 4px 0;}
.toc-title{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); margin:0 0 14px;
}
.toc ol{list-style:none; margin:0; padding:0; border-left:2px solid rgba(30,20,10,0.1);}
.toc li{margin:0}
.toc a{
  display:block; padding:9px 0 9px 16px; margin-left:-2px; border-left:2px solid transparent;
  text-decoration:none; color:#4A3F33; font-size:0.9rem; line-height:1.3;
  transition:color .18s ease, border-color .18s ease;
}
.toc a:hover{color:var(--orange-700)}
.toc a.is-active{color:var(--orange-700); border-left-color:var(--orange-500); font-weight:600}

/* ---------- trilha de lições ---------- */
.lesson{
  padding:36px 0; border-top:1px solid rgba(30,20,10,0.08); scroll-margin-top:28px;
}
.lesson:first-child{border-top:none; padding-top:0}
.lesson-num{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--orange-700); font-weight:700; margin:0 0 10px;
}
.lesson-num svg{width:13px; height:13px; flex:none}
.lesson h2{
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,2.2vw,1.9rem);
  margin:0 0 16px; letter-spacing:-0.01em;
}
.lesson p{color:#3E342A; margin:0 0 14px; max-width:66ch}
.lesson p strong{color:var(--orange-700)}
.lesson ul, .lesson ol.steps{margin:0 0 16px; padding-left:20px; color:#3E342A; max-width:66ch}
.lesson li{margin-bottom:8px}
.lesson ol.steps{counter-reset:step}
.lesson ol.steps li{list-style:none; position:relative; padding-left:4px; margin-bottom:14px}
.lesson ol.steps li::before{
  counter-increment:step; content:counter(step);
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-right:10px;
  background:var(--orange-700); color:#fff; border-radius:50%;
  font-family:var(--font-mono); font-size:0.74rem; font-weight:700;
  transform:translateY(4px);
}

/* selo de fonte -- credita CVM/PINHEIRO em vez de dar conselho sem origem */
.source-tag{
  display:inline-block; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:.02em;
  color:var(--text-muted); background:rgba(30,20,10,0.05); border:1px solid rgba(30,20,10,0.1);
  border-radius:999px; padding:2px 9px; margin-left:6px; white-space:nowrap;
}

/* callout de definição */
.callout{
  background:var(--card); border-left:3px solid var(--rind-500); border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:16px 20px; margin:0 0 18px; box-shadow:var(--shadow-card); max-width:66ch;
}
.callout .k{
  display:block; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rind-500); font-weight:700; margin-bottom:6px;
}
.callout p{margin:0; color:#3E342A}

/* tabela comparativa (ON x PN, tipos de ordem etc.) */
.table-wrap{overflow-x:auto; margin:0 0 18px; border-radius:var(--radius-md); box-shadow:var(--shadow-card)}
.compare-table{width:100%; border-collapse:collapse; background:var(--card); font-size:0.92rem; min-width:420px}
.compare-table th, .compare-table td{text-align:left; padding:12px 16px; border-bottom:1px solid rgba(30,20,10,0.08)}
.compare-table thead th{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange-700); background:var(--paper-alt);
}
.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table td strong{color:var(--text-on-paper)}

/* fontes ao final */
.sources-wrap{padding:0 0 60px}
.sources{
  max-width:66ch; margin:0 0 8px; padding:18px 20px; background:var(--paper-alt);
  border-radius:var(--radius-md); font-size:0.86rem; color:var(--text-muted);
}
.sources b{color:var(--text-on-paper)}

@media (max-width:920px){
  .article-layout{grid-template-columns:1fr}
  .toc{position:static; border-bottom:1px solid rgba(30,20,10,0.1); padding-bottom:18px; margin-bottom:8px}
  .toc ol{display:flex; flex-wrap:wrap; gap:2px 4px; border-left:none}
  .toc a{padding:7px 12px; border:1px solid rgba(30,20,10,0.12); border-radius:999px; border-left-width:1px}
  .toc a.is-active{background:rgba(226,67,0,0.08)}
}