/* ============================================================
   WF ADS — Blog
   Soma a style.css, nao substitui. Os tokens (--brand, --ink,
   --display, --body...) vem de la, e o blog fica no mesmo escuro
   da landing.

   O claro foi testado no ar e reprovado: apagou a marca. O que
   compensa o cansaco de ler texto longo no escuro nao e trocar o
   fundo, e a tipografia — coluna estreita, entrelinha mais larga
   e corpo de texto um grau abaixo do branco puro.
   ============================================================ */

body.pg-blog,
body.pg-artigo{
  --col:        720px;   /* largura da coluna de leitura */
  --col-larga:  900px;   /* tabela, codigo e video podem vazar */
}

/* A landing liga o fundo da nav no scroll via JS, que o blog nao
   carrega. Aqui ela ja nasce solida. */
.pg-blog .nav,
.pg-artigo .nav{
  background: rgba(4, 1, 2, .88);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}

.blog-wrap,
.artigo-wrap{ padding-top: 132px; padding-bottom: 40px; }

/* ---------- etiqueta de categoria ---------- */
.tag{
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  padding: 6px 12px;
  border: 1px solid var(--line-brand);
  border-radius: 999px;
  background: rgba(254, 26, 189, .06);
  white-space: nowrap;
}

/* ============================================================
   LISTA
   ============================================================ */
.blog-cab{ max-width: 780px; margin-bottom: 68px; }
.blog-cab h1{
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 22px 0 20px;
}
.blog-cab h1 em{ font-style: normal; color: var(--brand); }
.blog-cab p{ color: var(--ink-2); font-size: 1.06rem; line-height: 1.65; max-width: 62ch; }

.post-grade{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 28px;
}
.post-card{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.post-card:hover{ border-color: var(--line-brand); transform: translateY(-3px); }

/* O primeiro post ocupa a linha inteira: a lista precisa de uma
   entrada, nao de doze cartoes iguais. */
.post-card.destaque{ grid-column: 1 / -1; flex-direction: row; }
.post-card.destaque .post-capa{ flex: 0 0 52%; align-self: center; }
/* A capa tem texto dentro. Esticar para a altura do cartao cortaria o
   titulo, entao no destaque ela mantem a proporcao original. */
.post-card.destaque .post-capa img{ height: auto; }
.post-card.destaque .post-txt{ justify-content: center; padding: 40px; }
.post-card.destaque .post-txt b{ font-size: 1.75rem; }

.post-capa{ background: var(--surface-2); }
.post-capa img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1200 / 630; }

.post-txt{ display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 30px; }
.post-meta{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.post-meta time{ font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.post-txt b{
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.02em;
}
.post-txt span{ color: var(--ink-2); font-size: .95rem; line-height: 1.6; }

@media (max-width: 860px){
  .post-card.destaque{ flex-direction: column; }
  /* o flex-basis de 52% valia para a largura; virando coluna ele passaria
     a valer para a altura e abriria um buraco embaixo da capa. */
  .post-card.destaque .post-capa{ flex: none; align-self: stretch; }
  .post-card.destaque .post-txt{ padding: 26px 28px 30px; }
  .post-card.destaque .post-txt b{ font-size: 1.28rem; }
}

/* O blog nao carrega o main.js da landing, entao nao tem menu sanduiche.
   No celular os links somem (style.css) e o botao precisa ficar. */
@media (max-width: 900px){
  .pg-blog .nav-cta .btn,
  .pg-artigo .nav-cta .btn{ display: inline-flex; padding: 10px 16px; font-size: .66rem; }
}

/* ============================================================
   ARTIGO
   ============================================================ */
.migalha{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .72rem;
  color: var(--ink-3); margin-bottom: 34px;
}
.migalha a{ color: var(--ink-3); transition: color .25s; }
.migalha a:hover{ color: var(--brand); }
.migalha i{ font-style: normal; color: var(--ink-4); }

.artigo{ max-width: var(--col-larga); }
.artigo-cab{ margin-bottom: 44px; }
.artigo-meta{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .74rem; color: var(--ink-3);
  margin-bottom: 26px;
}
.artigo-cab h1{
  font-family: var(--display);
  font-size: clamp(2.15rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  max-width: 20ch;
}
.artigo-cab .lead{
  margin-top: 22px;
  max-width: var(--col);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------- sumario ---------- */
.sumario{
  max-width: var(--col);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brand);
  border-radius: 0 14px 14px 0;
  padding: 24px 28px;
  margin-bottom: 46px;
  background: var(--surface);
}
.sumario b{
  display: block;
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px;
}
.sumario ol{ margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.sumario li{ color: var(--ink-2); font-size: .97rem; }
.sumario a{ transition: color .25s; }
.sumario a:hover{ color: var(--brand); }

/* ---------- corpo ---------- */
.artigo-corpo{ max-width: var(--col); font-size: 1.08rem; line-height: 1.85; color: var(--ink-2); }
.artigo-corpo > *{ margin-bottom: 26px; }
.artigo-corpo > *:last-child{ margin-bottom: 0; }

.artigo-corpo h2{
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -.025em;
  color: var(--ink);
  margin: 62px 0 22px;
  scroll-margin-top: 110px;      /* o link do sumario nao some atras da nav */
}
.artigo-corpo h3{
  font-family: var(--display);
  font-size: 1.28rem; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink);
  margin: 44px 0 16px;
  scroll-margin-top: 110px;
}
.artigo-corpo strong{ color: var(--ink); font-weight: 700; }
/* :not(.btn) porque o bloco de oferta entra no meio do texto — sem isso
   o link magenta do corpo vence o branco do botao por especificidade e o
   "Ver a formacao" fica magenta sobre magenta. */
.artigo-corpo a:not(.btn){
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: var(--line-brand);
  text-underline-offset: 3px;
  transition: text-decoration-color .25s;
}
.artigo-corpo a:hover{ text-decoration-color: var(--brand); }

.artigo-corpo ul,
.artigo-corpo ol{ padding-left: 24px; display: grid; gap: 11px; }
.artigo-corpo li::marker{ color: var(--brand); }

.artigo-corpo blockquote{
  border-left: 2px solid var(--brand);
  padding: 6px 0 6px 26px;
  margin-left: 0;
  color: var(--ink);
  font-size: 1.16rem;
  line-height: 1.6;
}
.artigo-corpo blockquote p{ margin: 0; }

.artigo-corpo code{
  font-family: var(--mono);
  font-size: .88em;
  color: var(--brand);
  background: rgba(254, 26, 189, .07);
  border: 1px solid var(--line-brand);
  border-radius: 6px;
  padding: 2px 7px;
}
.artigo-corpo pre{
  width: var(--col-larga); max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  overflow-x: auto;
}
.artigo-corpo pre code{
  background: none; border: 0; padding: 0; color: var(--ink-2);
  font-size: .9rem; line-height: 1.7;
}

.artigo-corpo figure{ width: var(--col-larga); max-width: 100%; }
.artigo-corpo figure img{ width: 100%; border-radius: 14px; border: 1px solid var(--line); }
.artigo-corpo figcaption{
  margin-top: 12px; font-size: .85rem; color: var(--ink-3); font-family: var(--mono);
}

.tabela{ width: var(--col-larga); max-width: 100%; overflow-x: auto; }
.tabela table{ width: 100%; border-collapse: collapse; font-size: .97rem; }
.tabela th,
.tabela td{ text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.tabela th{
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom-color: var(--line-2);
}
.tabela td{ color: var(--ink-2); }
.tabela tr:last-child td{ border-bottom: 0; }

/* ---------- video ---------- */
.video{
  width: var(--col-larga); max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.video iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   OFERTA — o bloco que fecha o artigo
   ============================================================ */
.oferta{
  width: var(--col-larga); max-width: 100%;
  margin: 64px 0 0;
  border: 1px solid var(--line-brand);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(254, 26, 189, .12), rgba(254, 26, 189, .01)),
    var(--surface);
}
.oferta-in{
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding: 34px 36px;
}
.oferta-txt b{
  display: block;
  font-family: var(--display);
  font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: 10px;
}
.oferta-txt p{ margin: 0; color: var(--ink-2); font-size: .97rem; line-height: 1.6; max-width: 48ch; }
.oferta-cta{ display: flex; align-items: center; gap: 22px; }
.oferta-preco{
  font-family: var(--display);
  font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em;
  color: var(--brand); line-height: 1;
}
@media (max-width: 700px){
  .oferta-in{ padding: 28px 24px; }
  .oferta-cta{ width: 100%; justify-content: space-between; }
}

/* ============================================================
   CONTINUE POR AQUI
   ============================================================ */
.leia{ margin-top: 88px; }
.leia h2{
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em;
  margin-bottom: 24px;
}
.leia-grade{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.leia-card{
  display: grid; gap: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 28px;
  background: var(--surface);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.leia-card:hover{ border-color: var(--line-brand); transform: translateY(-3px); }
.leia-card i{
  font-style: normal; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
}
.leia-card b{
  font-family: var(--display);
  font-size: 1.14rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em;
}
.leia-card span{ color: var(--ink-3); font-size: .92rem; line-height: 1.55; }