/* Blog — Agência Criaativos
   Estrutura herdada do blog antigo (Astro), pintada com os tokens da home:
   --azul, --tinta, --borda, --fonte. Nenhuma cor nova é inventada aqui.
   A home não carrega este arquivo, então mexer no blog não afeta a página
   que converte. */

.container--estreito { max-width: 760px; }

/* Na home o CTA do menu é <button>; aqui vira <a>, e a cor dos links do
   menu (.nav a) tem especificidade maior que .botao--azul, deixando o
   texto cinza sobre azul (2,1:1). Esta regra devolve o branco. */
.nav a.botao--azul,
.nav a.botao--azul:hover,
.nav a.botao--azul:visited { color: #fff; }

/* ── peças reaproveitadas ── */

.etiqueta {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* --azul sobre --azul-claro dá 3,9:1, pouco para 12px. O tom de hover
     resolve sem sair da paleta da home. */
  color: var(--azul-hover);
  background: var(--azul-claro);
  padding: 5px 11px;
  border-radius: 999px;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  flex: none;
}
.avatar--g { width: 56px; height: 56px; font-size: 18px; }

.meta-linha, .post__assinatura-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--tinta-3);
}
.meta-autor { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; color: var(--tinta-2); }
.meta-ponto { width: 3px; height: 3px; border-radius: 50%; background: var(--borda); }

/* Capa gerada: nenhum post tem foto própria, então a categoria vira a capa.
   Mesma ideia do blog antigo: gradiente com grade fina por cima. */
.capa-gerada {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--azul) 0%, var(--tinta) 100%);
}
.capa-gerada::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 36px 36px;
}
.capa-gerada__cat {
  position: relative;
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
  text-align: center;
  padding: 24px;
}
.capa-gerada[data-cat="Orçamento"]  { background: linear-gradient(135deg, var(--azul) 0%, var(--tinta) 100%); }
.capa-gerada[data-cat="Estratégia"] { background: linear-gradient(135deg, var(--verde) 0%, var(--tinta) 100%); }
/* O amarelo puro no meio deixava o texto branco em 3,3:1. O vermelho entra
   antes e leva o centro da capa para um tom escuro o bastante. */
.capa-gerada[data-cat="Métricas"]   { background: linear-gradient(135deg, var(--amarelo) 0%, var(--vermelho) 45%, var(--tinta) 100%); }
.capa-gerada[data-cat="Mercado"]    { background: linear-gradient(135deg, var(--vermelho) 0%, var(--tinta) 100%); }
.capa-gerada[data-cat="Compliance"] { background: linear-gradient(135deg, var(--g-azul) 0%, var(--verde) 100%); }

/* ── índice: topo ── */

.blog-hero { border-bottom: 1px solid var(--borda-clara); }
.blog-hero .container { padding-top: 64px; padding-bottom: 44px; }
.sobrancelha {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 14px;
}
.blog-hero__titulo {
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--tinta);
  margin: 0 0 16px;
}
.blog-hero__titulo em { font-style: normal; color: var(--azul); }
.blog-hero__lead { font-size: 19px; line-height: 1.6; color: var(--tinta-3); margin: 0; }

/* ── índice: post em destaque ── */

.destaque-area .container { padding-top: 48px; padding-bottom: 24px; }
.destaque {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--borda-clara);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.destaque:hover { border-color: var(--azul-claro); box-shadow: 0 10px 34px rgba(0,0,0,.08); }
.destaque__capa { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cinza-neutro); }
.destaque__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destaque__conteudo { padding: 32px; }
.destaque__etiquetas { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.destaque__pin {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.destaque__titulo {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--tinta);
  margin: 0 0 14px;
}
.destaque:hover .destaque__titulo { color: var(--azul); }
.destaque__desc { font-size: 17px; line-height: 1.6; color: var(--tinta-2); margin: 0 0 20px; }

@media (min-width: 900px) {
  .destaque { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .destaque__capa { aspect-ratio: auto; min-height: 340px; }
  .destaque__conteudo { padding: 40px; align-self: center; }
}

/* ── grade de cartões ── */

.arquivo .container { padding-top: 40px; padding-bottom: 88px; }
.arquivo__titulo, .relacionados__titulo {
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--tinta);
  margin: 0 0 24px;
}

.grade-posts { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grade-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grade-posts { grid-template-columns: repeat(3, 1fr); } }

.cartao {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda-clara);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.cartao:hover { border-color: var(--azul-claro); box-shadow: 0 8px 26px rgba(0,0,0,.07); transform: translateY(-2px); }
.cartao__capa { position: relative; aspect-ratio: 16 / 9; background: var(--cinza-neutro); overflow: hidden; }
.cartao__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cartao__corpo { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cartao__titulo { font-size: 19px; line-height: 1.32; letter-spacing: -.01em; color: var(--tinta); margin: 0; }
.cartao:hover .cartao__titulo { color: var(--azul); }
.cartao__desc { font-size: 15px; line-height: 1.6; color: var(--tinta-3); margin: 0; flex: 1; }

/* ── post ── */

.post__topo { border-bottom: 1px solid var(--borda-clara); }
.post__topo .container { padding-top: 48px; padding-bottom: 36px; }

.post__voltar {
  /* flex + largura justa: a etiqueta da categoria cai na linha de baixo. */
  display: flex;
  width: max-content;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta-3);
  text-decoration: none;
  margin-bottom: 26px;
}
.post__voltar:hover { color: var(--azul); }

.post__titulo {
  font-size: clamp(29px, 4.6vw, 46px);
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--tinta);
  margin: 16px 0 18px;
}
.post__linha-fina { font-size: 19px; line-height: 1.6; color: var(--tinta-3); margin: 0 0 28px; }

.post__assinatura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.post__autor { display: inline-flex; align-items: center; gap: 12px; }
.post__autor-info { display: flex; flex-direction: column; line-height: 1.35; }
.post__autor-nome { font-weight: 600; color: var(--tinta); font-size: 15px; }
.post__autor-papel { font-size: 13px; color: var(--tinta-3); }

.post__capa-area .container { padding-top: 36px; padding-bottom: 0; }
.post__capa {
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cinza-neutro);
}
.post__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.post__texto { font-size: 18px; line-height: 1.75; color: var(--tinta-2); padding-top: 44px; }
.post__texto p { margin: 0 0 22px; }
.post__texto strong { color: var(--tinta); font-weight: 600; }
.post__texto h2 {
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--tinta);
  margin: 46px 0 18px;
}
/* O cabeçalho é fixo e translúcido: sem esta folga, link direto para um
   título interno para com o título escondido atrás dele. */
.post__texto h2[id], .post__texto h3[id] { scroll-margin-top: calc(var(--altura-header) + 20px); }
.post__texto h3 { font-size: 21px; line-height: 1.35; color: var(--tinta); margin: 34px 0 14px; }
.post__texto ul, .post__texto ol { margin: 0 0 22px; padding-left: 24px; }
.post__texto li { margin-bottom: 10px; }
.post__texto a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }
.post__texto a:hover { color: var(--azul-hover); }
.post__texto blockquote {
  margin: 30px 0;
  padding: 18px 24px;
  background: var(--fundo-cinza);
  border-left: 4px solid var(--azul);
  border-radius: 0 10px 10px 0;
  color: var(--tinta-2);
}
.post__texto blockquote p { margin: 0; }
.post__texto hr { border: 0; border-top: 1px solid var(--borda); margin: 40px 0; }
.post__texto code { font-size: .92em; background: var(--cinza-neutro); padding: 2px 6px; border-radius: 4px; }

.tabela-rolavel { overflow-x: auto; margin: 0 0 26px; }
.post__texto table { border-collapse: collapse; width: 100%; font-size: 16px; }
.post__texto th, .post__texto td {
  border: 1px solid var(--borda);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.post__texto th { background: var(--fundo-cinza); color: var(--tinta); font-weight: 600; }

/* ── bio do autor ── */

.bio {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 56px 0 0;
  padding: 30px;
  background: var(--fundo-cinza);
  border: 1px solid var(--borda-clara);
  border-radius: 14px;
}
.bio__nome { display: block; font-weight: 600; color: var(--tinta); margin-bottom: 8px; }
.bio__texto { font-size: 15px; line-height: 1.65; color: var(--tinta-3); margin: 0 0 18px; }

/* ── anterior / próximo ── */

.post-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 40px 0 0;
  padding-top: 36px;
  border-top: 1px solid var(--borda-clara);
}
@media (min-width: 720px) { .post-nav { grid-template-columns: 1fr 1fr; } }

.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid var(--borda-clara);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.post-nav__link:hover { border-color: var(--azul-claro); background: var(--fundo-cinza); }
.post-nav__link--prox { text-align: right; }
.post-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.post-nav__link--prox .post-nav__dir { justify-content: flex-end; }
.post-nav__titulo { font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--tinta); }

/* ── relacionados ── */

.relacionados { background: var(--fundo-cinza); border-top: 1px solid var(--borda-clara); margin-top: 72px; }
.relacionados .container { padding-top: 56px; padding-bottom: 72px; }

@media (max-width: 600px) {
  .blog-hero .container, .destaque-area .container, .arquivo .container,
  .post__topo .container, .post__capa-area .container, .relacionados .container { padding-left: 16px; padding-right: 16px; }
  .post__texto { font-size: 17px; }
  .destaque__conteudo { padding: 24px; }
  .bio { flex-direction: column; padding: 24px; }
  .post__capa { aspect-ratio: 16 / 9; }
}

/* ── página fixa (nicho, serviço, público, região) ──
   Mesma tipografia do post (.post__texto), com topo próprio: aqui a página
   existe para converter, então o CTA aparece no alto e no fim. */

.pagina__topo { border-bottom: 1px solid var(--borda-clara); background: var(--fundo-cinza); }
.pagina__topo .container { padding-top: 56px; padding-bottom: 44px; }
.pagina__topo h1 {
  font-size: clamp(30px, 4.8vw, 46px);
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--tinta);
  margin: 16px 0 16px;
}
.pagina__linha-fina { font-size: 19px; line-height: 1.6; color: var(--tinta-2); margin: 0 0 28px; max-width: 62ch; }

/* O topo já dá respiro: o primeiro título do texto não precisa do dobro. */
.pagina .post__texto > h2:first-child { margin-top: 8px; }

.pagina__faq { margin-top: 56px; }
.pagina__faq h2 {
  font-size: 27px;
  letter-spacing: -.015em;
  color: var(--tinta);
  margin: 0 0 20px;
}
.pagina__faq .faq__resposta { color: var(--tinta-2); line-height: 1.7; padding-top: 10px; }
.pagina__faq .faq__resposta p { margin: 0; }

.post__cta {
  margin-top: 56px;
  padding: 32px;
  background: var(--fundo-cinza);
  border: 1px solid var(--borda-clara);
  border-radius: 12px;
  text-align: center;
}
.post__cta p { font-size: 18px; color: var(--tinta); margin: 0 0 20px; }

.post__servico {
  margin-top: 40px;
  padding: 18px 22px;
  background: var(--azul-claro);
  border-radius: 10px;
  font-size: 16px;
  color: var(--tinta-2);
}

@media (max-width: 600px) {
  .pagina__topo .container { padding-left: 16px; padding-right: 16px; }
  .post__cta { padding: 24px 18px; }
}

/* ── topo da página de nicho ──
   O resto da página usa os componentes da home (faixa, etapas, trilha, faq,
   cta-final), então aqui só existe o que a home não tem. */

/* Alinhamento: todas as seções da página de nicho usam o mesmo .container,
   então a margem esquerda é sempre a mesma. O comprimento da linha é
   limitado pelo próprio texto, não por um contêiner mais estreito. */
.pagina-hero { padding: 64px 0 56px; }
.pagina-hero__titulo {
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--tinta);
  margin: 16px 0 18px;
}
.pagina-hero__titulo, .pagina-conteudo .titulo-secao { max-width: 20ch; }
.pagina-hero__sub { font-size: 20px; line-height: 1.55; color: var(--tinta-2); margin: 0 0 30px; max-width: 58ch; }
.pagina-hero__selo { font-size: 14px; color: var(--tinta-3); margin: 16px 0 0; }

.pagina-conteudo { padding: 72px 0 40px; }
.pagina-conteudo .titulo-secao { margin-bottom: 24px; }
.pagina-conteudo .post__texto { padding-top: 0; max-width: 72ch; }
.faixa .faq { max-width: 860px; }
.blog-hero__titulo { max-width: 22ch; }
.blog-hero__lead { max-width: 62ch; }
.pagina-conteudo .post__texto > h2:first-child { margin-top: 0; }

.faixa .faq__resposta { color: var(--tinta-2); line-height: 1.7; padding-top: 10px; }
.faixa .faq__resposta p { margin: 0; }

@media (max-width: 600px) {
  .pagina-hero { padding: 40px 0 44px; }
  .pagina-hero__sub { font-size: 18px; }
  .pagina-conteudo { padding: 48px 0; }
}