/* Área de artigos — complementa estilo.css (mesmas cores e fontes) */
.pagina-artigos { background: var(--marfim); }
.menu a.ativo { color: var(--ouro); }
/* O texto fica sobre fundo claro: o topo é sempre escuro, mesmo ao abrir a página já rolada */
.pagina-artigos .topo { background: rgba(11, 11, 12, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--linha-escura); }

/* ===== Abertura escura ===== */
.a-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 82% 20%, #23201c, var(--noite) 60%); color: var(--texto-claro); padding: 170px 0 86px; }
.a-hero__marca { position: absolute; right: -120px; top: 50%; width: 560px; transform: translateY(-50%); opacity: .06; pointer-events: none; }
.a-hero__texto { position: relative; max-width: 980px; }
.a-hero h1 { font-size: clamp(34px, 4.6vw, 58px); margin: 20px 0 22px; max-width: 900px; }
.a-hero--indice h1 { font-size: clamp(38px, 5.4vw, 68px); }
.a-linha-fina { font-size: 19px; color: var(--texto-apagado); max-width: 760px; }
.a-meta { margin-top: 30px; font-size: 14px; color: var(--texto-apagado); }
.a-meta a { color: var(--ouro); text-decoration: none; }
.a-meta span { margin: 0 6px; opacity: .5; }

.migalhas { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--texto-apagado); margin-bottom: 26px; }
.migalhas a { color: var(--texto-apagado); text-decoration: none; }
.migalhas a:hover { color: var(--ouro); }
.migalhas span:not(:last-child) { opacity: .5; }

/* ===== Corpo do artigo ===== */
.a-grade { display: grid; grid-template-columns: 250px minmax(0, 720px); gap: 70px; justify-content: center; padding: 80px 0 110px; color: var(--tinta); }
.a-sumario { position: sticky; top: 110px; align-self: start; font-size: 14px; }
.a-sumario summary { list-style: none; cursor: default; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ouro-escuro); margin-bottom: 16px; }
.a-sumario summary::-webkit-details-marker { display: none; }
.a-sumario ol { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--linha-clara); display: grid; gap: 12px; }
.a-sumario a { color: var(--tinta-suave); text-decoration: none; line-height: 1.45; display: block; transition: color .3s; }
.a-sumario a:hover, .a-sumario a.atual { color: var(--tinta); }
.a-sumario a.atual { font-weight: 600; }

.prosa { font-size: 18px; line-height: 1.78; }
.prosa > * + * { margin-top: 22px; }
.prosa h2 { font-size: clamp(27px, 3vw, 35px); margin-top: 62px; scroll-margin-top: 100px; }
.prosa h3 { font-size: 22px; margin-top: 38px; }
.prosa a { color: #7d6334; text-decoration: underline; text-decoration-color: rgba(184, 153, 95, .55); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prosa a:hover { color: var(--tinta); text-decoration-color: var(--ouro-escuro); }
.prosa strong { font-weight: 700; color: var(--tinta); }
.prosa ul, .prosa ol { padding-left: 24px; }
.prosa li + li { margin-top: 10px; }
.prosa li::marker { color: var(--ouro-escuro); }
.prosa blockquote { margin: 34px 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--ouro-escuro); font-family: var(--serifa); font-size: 22px; line-height: 1.5; font-style: italic; }

.resposta { background: var(--noite); color: var(--texto-claro); padding: 30px 34px; border-left: 3px solid var(--ouro); }
.resposta p { font-size: 17px; line-height: 1.72; }
.resposta strong { color: var(--ouro-claro); }
.resposta__rotulo { font-size: 11px !important; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--ouro); margin-bottom: 10px; }

.tabela { overflow-x: auto; margin: 30px 0; border: 1px solid var(--linha-clara); background: #fff; }
.tabela table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.55; }
.tabela th { text-align: left; background: var(--areia); font-weight: 700; padding: 14px 18px; white-space: nowrap; }
.tabela td { padding: 14px 18px; border-top: 1px solid var(--linha-clara); vertical-align: top; }

.a-faq { border-top: 1px solid var(--linha-clara); }
.a-faq details { border-bottom: 1px solid var(--linha-clara); }
.a-faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-family: var(--serifa); font-size: 20px; line-height: 1.4; }
.a-faq summary::-webkit-details-marker { display: none; }
.a-faq summary::before, .a-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 1px; background: var(--ouro-escuro); transition: transform .4s var(--curva); }
.a-faq summary::after { transform: rotate(90deg); }
.a-faq details[open] summary::after { transform: rotate(0); }
.a-faq details p { padding: 0 0 24px; color: var(--tinta-suave); font-size: 16.5px; }

.a-convite { margin-top: 64px !important; background: var(--noite); color: var(--texto-claro); padding: 48px 44px; position: relative; overflow: hidden; }
.a-convite::after { content: ""; position: absolute; inset: 14px; border: 1px solid var(--linha-escura); pointer-events: none; }
.a-convite h2 { margin: 16px 0 14px !important; font-size: clamp(26px, 3vw, 34px); }
.a-convite p:not(.sobretitulo) { color: var(--texto-apagado); font-size: 16.5px; max-width: 560px; }
.a-convite .botao { margin-top: 26px; position: relative; z-index: 1; text-decoration: none; color: var(--noite); }

.autora { display: grid; grid-template-columns: 110px 1fr; gap: 26px; align-items: start; padding: 34px 0; border-top: 1px solid var(--linha-clara); border-bottom: 1px solid var(--linha-clara); margin-top: 48px !important; }
.autora img { width: 110px; height: 140px; object-fit: cover; object-position: top; border-radius: 60px 60px 4px 4px; }
.autora__nome { font-family: var(--serifa); font-size: 23px; }
.autora__cargo { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-escuro); margin: 4px 0 12px; }
.autora p:not(.autora__nome):not(.autora__cargo) { font-size: 15.5px; color: var(--tinta-suave); line-height: 1.65; }
.autora a { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; text-decoration: none; }

.fontes h2 { font-size: 22px; margin-top: 44px; }
.fontes ul { margin-top: 14px; font-size: 15px; }
.a-aviso { font-size: 14px; color: var(--tinta-suave); border-top: 1px solid var(--linha-clara); padding-top: 22px; margin-top: 40px !important; }

/* ===== Leia também e índice ===== */
.a-relacionados { background: var(--areia); color: var(--tinta); padding: 100px 0; }
.a-relacionados h2 { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 40px; }
.a-relacionados .post h3, .i-lista .post h2 { font-family: var(--serifa); font-weight: 400; font-size: 21px; line-height: 1.25; margin: 24px 0 12px; }

.i-lista { background: var(--areia); color: var(--tinta); padding: 70px 0 110px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filtro { font: 600 14px var(--sans); color: var(--tinta); background: transparent; border: 1px solid rgba(184, 153, 95, .5); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: background .3s, color .3s; }
.filtro span { opacity: .55; margin-left: 4px; }
.filtro:hover { border-color: var(--ouro-escuro); }
.filtro[aria-pressed="true"] { background: var(--noite); color: var(--ouro); border-color: var(--noite); }
.post[hidden] { display: none; }
.i-aviso { margin-top: 40px; font-size: 14px; color: var(--tinta-suave); }
.contato--curto { padding: 120px 0; }
.contato--curto h2 { margin-bottom: 36px; }

@media (max-width: 1080px) {
  .a-grade { grid-template-columns: minmax(0, 720px); gap: 0; }
  .a-sumario { position: static; margin-bottom: 40px; border: 1px solid var(--linha-clara); background: #fff; padding: 18px 22px; }
  .a-sumario summary { cursor: pointer; margin-bottom: 0; }
  .a-sumario details[open] summary { margin-bottom: 16px; }
}

@media (max-width: 640px) {
  .a-hero { padding: 120px 0 56px; }
  .a-hero__marca { width: 380px; right: -150px; }
  .a-linha-fina { font-size: 17px; }
  .a-grade { padding: 44px 0 80px; }
  .prosa { font-size: 17px; }
  .prosa h2 { margin-top: 48px; }
  .resposta { padding: 24px 22px; }
  .a-convite { padding: 38px 26px; }
  .a-convite .botao { width: 100%; }
  .autora { grid-template-columns: 1fr; }
  .tabela table { font-size: 14.5px; }
  .tabela th, .tabela td { padding: 12px 14px; }
  .a-relacionados, .i-lista { padding: 70px 0 84px; }
}