/* Blog de captação (HTML renderizado pela API, ver CONTRATO_API.md, "Blog").
   Carregado depois de landing-v1.css: reaproveita os tokens --cj-*, o cabeçalho,
   o rodapé, os botões e a chamada final da home. Aqui fica só o que é do blog:
   tipografia de leitura, cards de artigo e a caixa de CTA do meio do texto. */

.cj-blog-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cj-blog-estreito{max-width:760px}

/* ------------------------------------------------------------ cabeçalho */
.cj-blog .cj-blog-hero{padding-block:56px 48px}
.cj-blog .cj-blog-hero h1{max-width:860px;margin-top:12px;font-size:clamp(30px,1rem + 2.4vw,46px);line-height:1.1;letter-spacing:-.03em}
.cj-blog-lead{max-width:720px;margin-top:16px!important;font-size:18px;line-height:29px;color:var(--cj-muted)}
.cj-blog-meta{margin-top:16px!important;font-size:14px;line-height:20px;color:var(--cj-soft)}
.cj-blog-trilha{display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px;font-weight:600;color:var(--cj-soft)}
.cj-blog-trilha a{color:var(--cj-azul-600)!important}
.cj-blog-trilha a:hover{color:var(--cj-azul-700)!important;text-decoration:underline!important}

/* --------------------------------------------------------------- leitura */
.cj-blog-corpo{padding-block:48px 72px;font-size:17px;line-height:30px;color:var(--cj-body)}
.cj-blog-corpo>p{margin-bottom:20px}
.cj-blog-corpo>h2{margin:48px 0 16px;font-size:26px;line-height:1.25;font-weight:800;letter-spacing:-.02em}
.cj-blog-corpo>h3{margin:32px 0 10px;font-size:19px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.cj-blog-corpo>ul,.cj-blog-corpo>ol{margin:0 0 24px;padding-left:24px}
.cj-blog-corpo>ul{list-style:disc}
.cj-blog-corpo>ol{list-style:decimal}
.cj-blog-corpo li{margin-bottom:10px;padding-left:4px}
.cj-blog-corpo li::marker{color:var(--cj-azul-500);font-weight:700}
.cj-blog-corpo strong{color:var(--cj-ink);font-weight:700}
.cj-blog-corpo p a,.cj-blog-corpo li a{color:var(--cj-azul-600);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cj-blog-corpo p a:hover,.cj-blog-corpo li a:hover{color:var(--cj-azul-700)}

/* Chamada do meio do texto: o convite aparece quando o leitor já recebeu valor. */
.cj-blog-chamada{margin:40px 0 44px;padding:28px 32px;border:1px solid var(--cj-azul-100);border-radius:16px;background:var(--cj-azul-50)}
.cj-blog-chamada h2{margin:8px 0 8px;font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.02em}
.cj-blog-chamada p:not(.cj-overline){font-size:16px;line-height:26px;color:var(--cj-muted)}
.cj-blog-chamada .cj-btn{margin-top:20px}

/* ---------------------------------------------------------------- cards */
.cj-blog-lista{padding-block:56px 72px}
.cj-blog-relacionados{padding-block:64px 72px;border-top:1px solid var(--cj-hair)}
.cj-blog-relacionados h2{margin-bottom:28px;font-size:clamp(24px,1rem + 1vw,30px);line-height:1.15;font-weight:800;letter-spacing:-.02em}
.cj-blog-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.cj-blog-card a{display:flex;flex-direction:column;align-items:flex-start;gap:12px;height:100%;padding:24px;border:1px solid var(--cj-hair);border-radius:14px;background:var(--cj-card);box-shadow:var(--cj-shadow-card);transition:box-shadow .2s var(--cj-ease),border-color .2s var(--cj-ease)}
.cj-blog-card a:hover{border-color:var(--cj-azul-100);box-shadow:var(--cj-shadow-hover)}
.cj-blog-card h3{font-size:19px;line-height:1.3;font-weight:800;letter-spacing:-.015em}
.cj-blog-card a:hover h3{color:var(--cj-azul-600)}
.cj-blog-card p{font-size:15px;line-height:24px;color:var(--cj-muted)}
.cj-blog-card-meta{margin-top:auto;font-size:13px;line-height:18px;color:var(--cj-soft)}

/* A chamada final fica sobre o fundo da página, sem a faixa branca da home. */
.cj-blog .cj-blog-final{padding-block:0 96px;background:transparent;border-top:0}

@media (max-width:719px){
  .cj-blog .cj-blog-hero{padding-block:32px 32px}
  .cj-blog .cj-blog-hero h1{font-size:clamp(28px,8vw,34px);line-height:1.12}
  .cj-blog-lead{font-size:16px;line-height:26px}
  .cj-blog-corpo{padding-block:32px 48px;font-size:16px;line-height:28px}
  .cj-blog-corpo>h2{margin-top:40px;font-size:22px}
  .cj-blog-corpo>h3{font-size:18px}
  .cj-blog-chamada{padding:20px}
  .cj-blog-chamada .cj-btn{width:100%}
  .cj-blog-lista,.cj-blog-relacionados{padding-block:40px 56px}
  .cj-blog-cards{grid-template-columns:1fr;gap:16px}
  .cj-blog-card a{padding:20px}
  .cj-blog .cj-blog-final{padding-bottom:56px}
}