/* ============================================================
   EMÉRITO · Blog
   Reusa tokens e utilitários de emerito.css (--ouro, --papel, .wrap,
   .botao, .rotulo, .reveal). Não redefine tokens.
   ============================================================ */

:root{
  --leitura-col:700px;      /* medida de leitura */
  --largura-col:940px;      /* hero + relacionados */
  --corpo:#D8CDB4;          /* corpo de texto: mais legível que --grafite no escuro */
}

/* ---------- FIX: logo do header (blog não carrega home-redesign.css) ---------- */
.topo .marca-logo{height:44px;width:auto;display:block}

/* ---------- estrutura geral ---------- */
.blog-main{padding:clamp(48px,8vw,88px) 0 0}

/* ---------- hero do hub ---------- */
.blog-hero{padding-bottom:clamp(40px,6vw,64px)}
.blog-hero h1{margin-top:14px;max-width:16ch}
.blog-hero-sub{margin-top:20px;color:var(--grafite);max-width:56ch;font-size:clamp(1rem,2vw,1.12rem);line-height:1.7}

/* ---------- migalha (breadcrumb) ---------- */
.migalha{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.84rem;color:var(--apagado);margin-bottom:24px;
}
.migalha a{color:var(--grafite);text-decoration:none;transition:color .2s ease}
.migalha a:hover{color:var(--ouro)}
.migalha span[aria-hidden]{color:var(--apagado)}

/* ---------- pill de nicho ---------- */
.blog-tag{
  display:inline-flex;align-items:center;
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ouro);
  border:1px solid var(--linha);border-radius:100px;padding:7px 16px;
}

/* ============================================================
   ARTIGO (post) — coluna de leitura centralizada
   FIX: antes o .artigo não tinha wrap; corpo colava na borda.
   Agora todo filho direto centraliza numa medida de leitura.
   ============================================================ */
.artigo{padding:0 clamp(20px,5vw,48px) clamp(64px,9vw,104px)}
.artigo > *{max-width:var(--leitura-col);margin-inline:auto}
.artigo-hero,.relacionados{max-width:var(--largura-col)}

/* cabeçalho do artigo */
.artigo-topo{margin-bottom:clamp(28px,4vw,40px)}
.artigo-topo h1{margin-top:18px;font-size:clamp(2.1rem,5vw,3.2rem);line-height:1.08;max-width:20ch}
.artigo-lead{
  margin-top:20px;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,2.4vw,1.4rem);line-height:1.5;
  color:var(--marfim);max-width:52ch;
}

/* ---------- hero do artigo (imagem tratada p/ combinar com a marca) ---------- */
.artigo-hero{position:relative;margin:0 auto clamp(36px,5vw,52px);border-radius:16px;overflow:hidden;border:1px solid var(--linha)}
.artigo-hero img{
  display:block;width:100%;height:clamp(220px,40vw,400px);object-fit:cover;
  /* imagens já vêm com o grade da marca aplicado (sépia-dourado); filtro leve só p/ integrar */
}
.artigo-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,8,0) 0%,rgba(11,10,8,.12) 55%,rgba(11,10,8,.55) 100%);
}
.artigo-hero figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:16px 22px;font-size:.8rem;color:var(--grafite);
  display:flex;gap:8px;align-items:center;
}
.artigo-hero figcaption::before{content:"";width:18px;height:1px;background:var(--ouro);flex:none}

/* ---------- corpo ---------- */
.artigo-corpo{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,24px);font-size:1.05rem;line-height:1.78}
.artigo-corpo > p{color:var(--corpo)}
.artigo-corpo > p:first-of-type{                       /* parágrafo de abertura levemente destacado */
  font-size:1.14rem;color:var(--marfim);line-height:1.7;
}
.artigo-corpo strong{color:var(--papel);font-weight:600}
.artigo-corpo em{color:var(--marfim)}

/* subtítulos com kicker dourado */
.artigo-corpo h2{
  margin-top:clamp(20px,3vw,32px);
  font-family:var(--serif);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.45rem,3vw,2rem);line-height:1.18;color:var(--papel);
  padding-top:20px;border-top:1px solid var(--linha-suave);
}
.artigo-corpo h3{
  margin-top:8px;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.15rem,2.2vw,1.4rem);color:var(--ouro-claro);
}
.artigo-corpo a:not(.botao){color:var(--ouro);text-decoration:underline;text-decoration-color:var(--linha);text-underline-offset:3px;transition:text-decoration-color .2s ease}
.artigo-corpo a:not(.botao):hover{text-decoration-color:var(--ouro)}
/* botões dentro do corpo mantêm suas cores próprias (evita texto dourado sobre fundo dourado) */
.artigo-corpo a.botao{text-decoration:none}
.artigo-corpo a.botao-ouro{color:var(--tinta)}
.artigo-corpo a.botao-fantasma{color:var(--papel)}

/* listas com marcador dourado */
.artigo-corpo ul.lista,.artigo-corpo ol.lista{list-style:none;display:flex;flex-direction:column;gap:12px;margin:2px 0}
.artigo-corpo ul.lista li,.artigo-corpo ol.lista li{position:relative;padding-left:30px;color:var(--corpo)}
.artigo-corpo ul.lista li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:8px;height:8px;border:1.5px solid var(--ouro);transform:rotate(45deg);
}
.artigo-corpo ol.lista{counter-reset:li}
.artigo-corpo ol.lista li{counter-increment:li}
.artigo-corpo ol.lista li::before{
  content:counter(li);position:absolute;left:0;top:0;
  font-family:var(--serif);font-size:.92rem;font-weight:600;color:var(--ouro);
}
.artigo-corpo li strong{color:var(--papel)}

/* checklist — cartão com itens marcados */
.checklist{
  background:var(--carvao);border:1px solid var(--linha);border-radius:16px;
  padding:clamp(24px,3.5vw,32px);margin:8px auto;
}
.checklist-titulo{
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ouro);margin-bottom:18px;
}
.checklist ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.checklist li{position:relative;padding-left:38px;color:var(--marfim);line-height:1.55}
.checklist li::before{
  content:"✓";position:absolute;left:0;top:-1px;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;color:var(--tinta);background:var(--ouro);
}

/* callout / citação de destaque */
.destaque{
  margin:10px auto;padding:6px 0 6px 26px;border-left:3px solid var(--ouro);
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.25rem,2.6vw,1.55rem);line-height:1.42;color:var(--marfim);
}
.destaque cite{display:block;margin-top:12px;font-size:.92rem;font-style:normal;color:var(--apagado)}

/* figura inline */
.artigo-figura{margin:8px auto;border-radius:14px;overflow:hidden;border:1px solid var(--linha-suave)}
.artigo-figura img{display:block;width:100%;height:auto;filter:saturate(.85) brightness(.86)}
.artigo-figura figcaption{padding:12px 16px;font-size:.82rem;color:var(--apagado);font-style:italic}

/* ---------- CTA inline ---------- */
.cta-inline{
  margin:clamp(8px,2vw,16px) auto;
  border:1px solid var(--linha);border-radius:16px;background:var(--carvao);
  padding:clamp(26px,4vw,38px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.cta-inline p{color:var(--papel);font-family:var(--serif);font-style:italic;font-size:1.14rem;max-width:44ch}

/* ---------- chamada final (dentro do artigo) ---------- */
.artigo-chamada{
  margin:clamp(40px,6vw,64px) auto 0;text-align:center;
  border-top:1px solid var(--linha-suave);padding-top:clamp(40px,6vw,60px);
}
.artigo-chamada h2{font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.12}
.artigo-chamada p{margin:16px auto 26px;color:var(--grafite);max-width:48ch}

/* ---------- relacionados ---------- */
.relacionados{margin-top:clamp(48px,7vw,76px);padding-top:clamp(36px,5vw,48px);border-top:1px solid var(--linha-suave)}
.relacionados > .rotulo{margin-bottom:4px}
.relacionados-lista{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-card{
  display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--linha-suave);border-radius:12px;padding:22px 20px;text-decoration:none;
  transition:border-color .25s ease,transform .25s ease;
}
.rel-card span{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ouro)}
.rel-card strong{font-family:var(--serif);font-weight:500;color:var(--papel);font-size:1.05rem;line-height:1.35}
.rel-card:hover{border-color:var(--ouro);transform:translateY(-3px)}

/* ============================================================
   HUB — filtro, grupos, grade de cards
   ============================================================ */
.blog-filtro{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.blog-filtro-botao{
  font-family:var(--sans);font-weight:600;font-size:.88rem;
  color:var(--grafite);background:transparent;
  border:1px solid var(--linha);border-radius:100px;padding:10px 20px;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.blog-filtro-botao:hover{border-color:var(--ouro);color:var(--ouro)}
.blog-filtro-botao[aria-pressed="true"]{background:var(--ouro);border-color:var(--ouro);color:var(--tinta)}

.blog-grupo{margin-top:clamp(48px,6vw,64px)}
.blog-grupo:first-of-type{margin-top:clamp(36px,5vw,48px)}
.blog-grupo-cabecalho .rotulo{display:block;margin-bottom:6px}
.blog-grupo-cabecalho h2{margin-top:0;font-size:clamp(1.4rem,3vw,1.9rem)}

.blog-grade{margin-top:clamp(24px,3vw,32px);display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.blog-card{
  display:flex;flex-direction:column;gap:14px;background:var(--carvao);
  border:1px solid var(--linha-suave);border-radius:14px;padding:26px 24px;text-decoration:none;
  position:relative;overflow:hidden;transition:border-color .3s ease,transform .3s ease;
}
.blog-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(201,162,83,.11),transparent 65%);
}
.blog-card:hover{border-color:var(--ouro);transform:translateY(-3px)}
.blog-card:hover::after{opacity:1}
.blog-card .blog-tag{align-self:flex-start}
.blog-card h3{font-family:var(--serif);font-weight:500;color:var(--papel);font-size:1.2rem;line-height:1.3}
.blog-card p{color:var(--grafite);font-size:.94rem;line-height:1.5}
.blog-card-ler{margin-top:auto;padding-top:6px;font-family:var(--sans);font-weight:600;font-size:.88rem;color:var(--ouro)}
.blog-card[hidden]{display:none}

/* ---------- HUB: layout com sidebar + busca ---------- */
.blog-layout{
  max-width:var(--largura);margin:0 auto;padding:0 clamp(20px,5vw,48px);
  display:grid;grid-template-columns:250px 1fr;gap:clamp(28px,4vw,52px);align-items:start;
}
.blog-sidebar{position:sticky;top:86px;display:flex;flex-direction:column;gap:24px}
.blog-busca{position:relative}
.blog-busca input{
  width:100%;background:var(--carvao);border:1px solid var(--linha);border-radius:12px;
  color:var(--papel);font-family:var(--sans);font-size:.95rem;padding:12px 14px 12px 42px;
}
.blog-busca input::placeholder{color:var(--apagado)}
.blog-busca input:focus{outline:none;border-color:var(--ouro)}
.blog-busca svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--apagado);pointer-events:none}
.blog-nav-titulo{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--apagado);margin:0 0 8px}
.blog-nav{display:flex;flex-direction:column;gap:1px}
.blog-nav-item{
  display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;
  background:none;border:none;text-align:left;cursor:pointer;
  font-family:var(--sans);font-size:.92rem;color:var(--grafite);
  padding:8px 11px;border-radius:8px;transition:background .2s ease,color .2s ease;
}
.blog-nav-item:hover{color:var(--papel);background:var(--carvao)}
.blog-nav-item[aria-pressed="true"]{color:var(--ouro);background:var(--carvao-2)}
.blog-nav-item .conta{font-size:.72rem;color:var(--apagado);font-variant-numeric:tabular-nums}
.blog-nav-grupo{margin-top:8px}
.blog-vazio{color:var(--grafite);padding:40px 4px;font-family:var(--serif);font-style:italic;font-size:1.1rem}

/* ---------- responsivo ---------- */
@media (max-width:920px){
  .blog-layout{grid-template-columns:1fr;gap:22px}
  .blog-sidebar{position:static;gap:16px}
  .blog-nav{flex-flow:row wrap;gap:8px}
  .blog-nav-item{width:auto;border:1px solid var(--linha-suave);border-radius:100px;padding:8px 15px}
  .blog-nav-item .conta{display:none}
  .blog-nav-titulo{width:100%;margin-bottom:2px}
}
@media (max-width:900px){
  .blog-grade{grid-template-columns:repeat(2,1fr)}
  .relacionados-lista{grid-template-columns:1fr}
}
@media (max-width:600px){
  .blog-grade{grid-template-columns:1fr}
  .artigo-corpo > p:first-of-type{font-size:1.08rem}
}
@media (prefers-reduced-motion:reduce){
  .rel-card:hover,.blog-card:hover{transform:none}
}