/* O ARTIGO DE CONTEÚDO (0206) — a casca do artigo que a porta `/api/v1/conteudo` grava.
   ⚠ O BLOCO DE TOKENS É COPIADO, como em toda folha deste site, e isso é de propósito: o
   ouro.express escreve o CSS inline e escopado por id em cada página, e o clone preserva
   isso (docs/SITE-CLONE.md §2). Cada página carrega UMA folha, e o escopo por id garante
   que mexer aqui não alcança página nenhuma.
   ⚠ E ESTA FOLHA ESTILIZA POR TAG, não por classe, porque o corpo é HTML GERADO por nós
   a partir de uma marcação restrita: a lista de tags que pode aparecer é fechada e curta,
   e a autora não escolhe marcação — logo não há classe para ela errar. */
#oe-artigo{
--green-950:#042A20; --green-900:#063B2E; --green-800:#0B4A3A;
--green-700:#125E49; --green-600:#1B7259; --green-500:#2B8A6C;
--gold-100:#F7EFDB; --gold-200:#EEDFB6; --gold-300:#E5D096; --gold-400:#DBC078;
--gold-500:#CBAA63; --gold-600:#BE9B54; --gold-700:#9C7E42;
--gold-gradient:linear-gradient(135deg,#DBC078 0%,#BE9B54 100%);
--cream-050:#FCFAF6; --cream-100:#F8F4EC; --cream-200:#F0E9DA;
--ink-900:#111512; --ink-800:#1D231F; --ink-700:#333B36; --ink-600:#525C55;
--ink-500:#767F79; --ink-400:#9AA19C; --ink-300:#C2C7C3; --ink-200:#E1E4E1;
--ink-100:#EFF1EF; --white:#FFFFFF;
--success-600:#2F7D5A; --success-100:#E5F1EA;
--warning-600:#B07F2B; --warning-100:#F7EEDC;
--danger-600:#A8402F;  --danger-100:#F6E4E0;
--info-600:#2E6B7A;    --info-100:#E3EEF0;
--bg-page:var(--cream-050); --bg-surface:var(--white); --bg-surface-sunken:var(--cream-100);
--bg-inverse:var(--green-900);
--text-primary:var(--ink-900); --text-secondary:var(--ink-600); --text-tertiary:var(--ink-500);
--text-on-dark:var(--cream-050); --text-on-dark-muted:rgba(252,250,246,.68); --text-gold:var(--gold-600);
--brand-primary:var(--green-900); --brand-accent:var(--gold-600);
--border-subtle:var(--ink-200); --border-default:var(--ink-300); --border-on-dark:rgba(251,248,242,.16);
--focus-ring:var(--gold-500);
--font-sans:inherit;
--fs-display-xl:clamp(2.75rem,4.5vw,4.75rem);
--fs-display-lg:clamp(2.25rem,3.4vw,3.5rem);
--fs-display-md:clamp(1.75rem,2.4vw,2.5rem);
--fs-heading-lg:1.75rem; --fs-heading-md:1.375rem; --fs-heading-sm:1.125rem;
--fs-body-lg:1.125rem; --fs-body-md:1rem; --fs-body-sm:.875rem; --fs-caption:.75rem;
--lh-display:1.05; --lh-heading:1.2; --lh-body:1.6; --lh-caption:1.4;
--ls-display:-0.02em; --ls-heading:-0.01em; --ls-eyebrow:.14em;
--fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;
--container-max:1200px;--gutter:24px;
--shadow-sm:0 1px 2px rgba(6,59,46,.06);
--shadow-md:0 4px 16px rgba(6,59,46,.08);
--shadow-lg:0 16px 40px rgba(6,59,46,.12);
--shadow-gold:0 8px 24px rgba(190,155,84,.28);
--ease-standard:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(0,0,.2,1);
--dur-fast:150ms;--dur-med:260ms;--dur-slow:420ms;
}


/* ===== BASE ===== */
#oe-artigo{font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-page);
  -webkit-font-smoothing:antialiased;width:100%;max-width:100%;overflow-x:hidden;}
#oe-artigo *{box-sizing:border-box;}
#oe-artigo a{color:inherit;}
#oe-artigo .oe-wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);}

/* ===== HERÓI ===== */
#oe-artigo .oe-hero{background:var(--bg-inverse);color:var(--text-on-dark);
  padding:var(--space-16) 0 var(--space-12);}
#oe-artigo .oe-eyebrow{display:block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-gold);
  margin-bottom:var(--space-3);}
#oe-artigo .oe-eyebrow a{text-decoration:none;}
#oe-artigo .oe-eyebrow a:hover{text-decoration:underline;}
/* ⚠ A COR DO H1 É DECLARADA, NUNCA HERDADA DO HERÓI ESCURO. O `base.css` deste site tem
   `h1,h2,...{color:var(--oe-titulo)}`, que é tinta escura e vence a herança do `.oe-hero`: sem esta
   linha o título sai preto sobre o verde e fica ilegível. Foi o que o navegador mostrou na
   primeira versão desta folha, e nenhum teste pegaria — o HTML estava certo. É a mesma armadilha
   que o `cambio.css` já documenta em "BRANCO NO BRANCO". */
#oe-artigo .oe-hero h1{font-size:var(--fs-display-md);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);font-weight:var(--fw-bold);margin:0;max-width:24ch;
  color:var(--text-on-dark);}
/* E o mesmo cuidado nos títulos DA PROSA, que ficam sobre fundo claro: ali a cor certa é a escura,
   e declará-la impede que uma mudança no `base.css` mexa no artigo sem ninguém ver. */
#oe-artigo .oe-prosa h2,#oe-artigo .oe-prosa h3,
#oe-artigo .oe-section h2{color:var(--text-primary);}
#oe-artigo .oe-hero__lead{margin-top:var(--space-5);font-size:var(--fs-body-lg);
  line-height:var(--lh-body);color:var(--text-on-dark-muted);max-width:66ch;}

/* ===== SEÇÕES ===== */
#oe-artigo .oe-section{padding:var(--space-16) 0;}
#oe-artigo .oe-section--sunken{background:var(--bg-surface-sunken);
  border-top:1px solid var(--border-subtle);}
#oe-artigo .oe-section h2{font-size:var(--fs-heading-lg);line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);font-weight:var(--fw-bold);margin:0;}
#oe-artigo .oe-section--sunken p{margin-top:var(--space-4);font-size:var(--fs-body-md);
  line-height:var(--lh-body);color:var(--text-secondary);max-width:66ch;}

/* ===== A PROSA DO ARTIGO =====
   ⚠ A LISTA PRECISA DE MARCADOR DECLARADO. O reset acima tira o marcador de `ul`/`ol` (como no site
   real, onde toda lista é um grid de cartões); aqui lista é lista, e sem isto os itens sairiam como
   parágrafos grudados, sem nada indicando que são uma enumeração. */
#oe-artigo .oe-prosa{max-width:68ch;}
#oe-artigo .oe-prosa > * + *{margin-top:var(--space-5);}
#oe-artigo .oe-prosa h2{font-size:var(--fs-heading-md);line-height:var(--lh-heading);
  font-weight:var(--fw-bold);margin-top:var(--space-12);}
#oe-artigo .oe-prosa h3{font-size:var(--fs-heading-sm);line-height:var(--lh-heading);
  font-weight:var(--fw-semibold);margin-top:var(--space-10);}
#oe-artigo .oe-prosa p{font-size:var(--fs-body-md);line-height:var(--lh-body);
  color:var(--text-primary);}
#oe-artigo .oe-prosa ul,#oe-artigo .oe-prosa ol{padding-left:1.35rem;}
#oe-artigo .oe-prosa ul{list-style:disc;}
#oe-artigo .oe-prosa ol{list-style:decimal;}
#oe-artigo .oe-prosa li{font-size:var(--fs-body-md);line-height:var(--lh-body);}
#oe-artigo .oe-prosa li + li{margin-top:var(--space-2);}
#oe-artigo .oe-prosa strong{font-weight:var(--fw-semibold);}
#oe-artigo .oe-prosa a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px;}
#oe-artigo .oe-prosa a:hover{color:var(--green-900);}
#oe-artigo .oe-prosa blockquote{margin:0;padding:var(--space-5) var(--space-6);
  background:var(--bg-surface);border-left:3px solid var(--gold-500);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);}
#oe-artigo .oe-prosa blockquote p{margin:0;color:var(--text-secondary);}

/* ===== BOTÕES (os mesmos dos artigos do clone) ===== */
#oe-artigo .oe-artigo__cta{display:flex;flex-wrap:wrap;gap:var(--space-4);
  margin-top:var(--space-8);}
#oe-artigo .oe-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:var(--fw-semibold);font-size:var(--fs-body-md);line-height:1;text-decoration:none;
  padding:14px 26px;border-radius:var(--radius-sm);border:1.5px solid transparent;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
#oe-artigo .oe-btn:hover{transform:translateY(-1px);}
#oe-artigo .oe-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
#oe-artigo .oe-btn--gold{background:var(--gold-gradient);color:var(--green-950);}
#oe-artigo .oe-btn--gold:hover{box-shadow:var(--shadow-gold);}
#oe-artigo .oe-btn--ghost{background:transparent;color:var(--green-900);
  border-color:var(--border-default);}
#oe-artigo .oe-btn--ghost:hover{border-color:var(--green-700);}

/* ===== TELEFONE ===== */
@media (max-width:600px){
  #oe-artigo .oe-hero{padding:var(--space-12) 0 var(--space-10);}
  #oe-artigo .oe-section{padding:var(--space-12) 0;}
  #oe-artigo .oe-wrap{padding:0 16px;}
}