/* ============================================================
   Blog do Finnly — tipografia e cartões.

   CSS próprio, à mão, porque o tailwind.css compilado só contém as
   classes já usadas na home: utilitário novo em página nova = estilo
   que silenciosamente não existe (já nos mordeu três vezes). Aqui
   nada depende do compilador.
   ============================================================ */

/* Fundo da página: classe própria. bg-gray-950 no body não existia no
   Tailwind compilado (só tem classes da home) — o blog abria BRANCO com
   texto branco. Quarta mordida da mesma cobra; desta vez sem compilador. */
body.pagina-blog {
  background: #101010;
  /*
    Mesmo clip da home (.marquee-mask usa igual): o header em pílula e o
    footer herdados estouram alguns px em 320px por um empate de
    especificidade que a home inteira já carrega (.btn-lime sem camada
    vence o .hidden do Tailwind em camada). A home não rola; estas
    páginas também não podem rolar.
  */
  overflow-x: clip;
}

.post-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 128px 20px 80px; /* espaço para o header fixo */
  color: rgba(255, 255, 255, .82);
}

.post-trilha {
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 20px;
}
.post-trilha a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.post-trilha a:hover { color: #D6FFAD; }

.post h1, .blog-topo h1 {
  color: #fff;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0 0 14px;
}

.post-meta { font-size: 14px; color: rgba(255, 255, 255, .5); margin-bottom: 22px; }

.post-resumo {
  border-left: 3px solid #79EB93;
  background: rgba(121, 235, 147, .07);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 26px;
}

.post-indice {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 30px;
  font-size: 14px;
}
.post-indice strong { color: #fff; display: block; margin-bottom: 8px; }
.post-indice ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.post-indice a { color: rgba(255, 255, 255, .65); text-decoration: none; }
.post-indice a:hover { color: #D6FFAD; }

.post-corpo { font-size: 16.5px; line-height: 1.75; }
.post-corpo h2 {
  color: #fff; font-size: 23px; font-weight: 700; letter-spacing: -.01em;
  margin: 38px 0 14px; scroll-margin-top: 110px;
}
.post-corpo p { margin: 0 0 16px; }
.post-corpo ul, .post-corpo ol { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.post-corpo a { color: #79EB93; text-decoration: underline; text-underline-offset: 3px; }
.post-corpo a:hover { color: #D6FFAD; }
.post-corpo strong { color: #fff; }
.post-corpo em { color: rgba(255, 255, 255, .92); }

.tabela-rolagem { overflow-x: auto; margin: 0 0 16px; }
.post-corpo table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 14.5px; }
.post-corpo th, .post-corpo td {
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 10px 14px; text-align: left; vertical-align: top;
}
.post-corpo th { color: #fff; background: rgba(255, 255, 255, .05); }

.post-cta {
  background: linear-gradient(131deg, rgba(121, 235, 147, .12), rgba(214, 255, 173, .07));
  border: 1px solid rgba(121, 235, 147, .3);
  border-radius: 16px;
  padding: 22px;
  margin: 36px 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.post-cta p { margin: 0; max-width: 480px; font-size: 15px; line-height: 1.6; }

.post-relacionados h2, .blog-secao {
  color: #fff; font-size: 20px; font-weight: 700; margin: 34px 0 14px;
}
.post-voltar { margin-top: 26px; }
.post-voltar a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.post-voltar a:hover { color: #D6FFAD; }

/* ------------------------------------------------ página do blog */

.blog-intro { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .7); max-width: 620px; margin: 0 0 18px; }
.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.blog-cat-chip {
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .75);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 5px 12px;
}

.blog-grade { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .blog-grade { grid-template-columns: 1fr 1fr; } }

.blog-card {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px; padding: 20px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.blog-card:hover { border-color: rgba(121, 235, 147, .5); transform: translateY(-2px); }
.blog-card h3 { color: #fff; font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0; }
.blog-card p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .6); margin: 0; }
.blog-card-cat { font-size: 12px; font-weight: 700; color: #79EB93; text-transform: uppercase; letter-spacing: .04em; }
.blog-card-meta { font-size: 12.5px; color: rgba(255, 255, 255, .45); margin-top: auto; }

/* busca do blog (filtro no cliente; sem JS a lista fica completa) */
.blog-busca { position: relative; max-width: 420px; margin: 0 0 18px; }
.blog-busca input {
  width: 100%; padding: 12px 16px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-size: 14px; outline: none;
}
.blog-busca input::placeholder { color: rgba(255,255,255,.4); }
.blog-busca input:focus { border-color: rgba(121,235,147,.5); }
.blog-sem-resultado { color: rgba(255,255,255,.55); font-size: 14px; padding: 14px 0; display: none; }

/* ---------- Artigos em destaque (seleção editorial) ---------- */
.blog-destaques { margin-bottom: 44px; }
.bdest-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 899.5px) { .bdest-grid { grid-template-columns: 1fr; } }
.bdest-main { display: block; text-decoration: none; color: inherit; }
.bdest-main-img {
  display: block; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1); margin-bottom: 18px;
}
.bdest-main-img img { display: block; width: 100%; height: auto; transition: transform .45s ease; }
.bdest-main:hover .bdest-main-img img { transform: scale(1.04); }
.bdest-main h3 { color: #fff; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.3; margin: 0 0 10px; transition: color .15s; }
.bdest-main:hover h3 { color: #79EB93; }
.bdest-main p { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .6); margin: 0; }
.bdest-lista { display: flex; flex-direction: column; }
.bdest-item {
  display: flex; gap: 16px; align-items: center;
  padding: 14px 0; text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.bdest-item:first-child { border-top: none; padding-top: 0; }
.bdest-thumb {
  flex: none; width: 108px; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
}
.bdest-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bdest-item-txt { min-width: 0; }
.bdest-item-cat {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #79EB93; margin-bottom: 4px;
}
.bdest-item-titulo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #fff; font-size: 15.5px; font-weight: 600; line-height: 1.35; transition: color .15s;
}
.bdest-item:hover .bdest-item-titulo { color: #D6FFAD; }

/* ---------- Banner Finnly entre as seções ---------- */
.blog-banner {
  display: flex; align-items: center; gap: 36px;
  background:
    radial-gradient(120% 170% at 100% 0%, rgba(121, 235, 147, .16), transparent 55%),
    linear-gradient(120deg, #0C231F 0%, #123129 100%);
  border: 1px solid rgba(121, 235, 147, .18);
  border-radius: 20px;
  padding: 34px 38px;
  margin-bottom: 44px;
  color: #F5F3EA;
}
.blog-banner-txt { flex: 1; min-width: 0; }
.blog-banner-eyebrow {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #D6FFAD; margin-bottom: 10px;
}
.blog-banner h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 10px; }
.blog-banner p { font-size: 15.5px; line-height: 1.6; color: rgba(245, 243, 234, .75); margin: 0 0 20px; max-width: 480px; }
.blog-banner-img { flex: none; width: min(340px, 34%); }
.blog-banner-img img {
  display: block; width: 100%; height: auto;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55);
}
@media (max-width: 767.5px) {
  .blog-banner { flex-direction: column; align-items: stretch; padding: 26px 22px; gap: 22px; }
  .blog-banner-img { width: 100%; max-width: 420px; margin: 0 auto; }
  .blog-banner .btn-lime { width: 100%; justify-content: center; min-height: 46px; }
}

/* menu de categorias: botão fechado; clicou, abre a lista de filtros */
.blog-catmenu { position: relative; }
.blog-catmenu-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .85); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.blog-catmenu-btn:hover { border-color: rgba(121, 235, 147, .5); color: #D6FFAD; }
.blog-catmenu-btn.ativa { border-color: rgba(121, 235, 147, .6); color: #79EB93; }
.blog-catmenu-btn svg { width: 15px; height: 15px; transition: transform .2s; }
.blog-catmenu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.blog-catmenu-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  display: flex; flex-wrap: wrap; gap: 8px;
  width: min(560px, calc(100vw - 32px));
  background: #1A1A1A; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px; padding: 16px;
  box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .6);
}
.blog-catmenu-pop[hidden] { display: none; }
@media (max-width: 720px) { .blog-catmenu-pop { left: 0; right: auto; } }

/* paginação da listagem (12 por página; filtros resetam pra página 1) */
.blog-pag { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 34px 0 6px; flex-wrap: wrap; }
.blog-pag button {
  min-width: 40px; height: 40px; padding: 0 8px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16); background: none;
  color: rgba(255, 255, 255, .75); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.blog-pag button:hover { border-color: rgba(121, 235, 147, .5); color: #D6FFAD; }
.blog-pag button.on { background: #79EB93; color: #101010; border-color: transparent; cursor: default; }
.blog-pag button:focus-visible { outline: 2px solid #79EB93; outline-offset: 2px; }

/* tags do artigo */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.post-tags span {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px 11px;
}

/* ============================================================ layout largo
   O blog usa o MESMO padrão do site: largura total com respiro lateral
   de clamp(20px, 5vw, 72px) — igual às seções da home e à borda visual
   do hero. A coluna de leitura do artigo continua estreita (76ch é
   medida de texto, não de página). */

.post-shell { padding: 128px 16px 80px; color: rgba(255, 255, 255, .82); }
@media (min-width: 768px) { .post-shell { padding-left: 24px; padding-right: 24px; } }

/* artigo em duas colunas a partir de 1080px */
.post-duas-colunas { display: grid; gap: 40px; }
@media (min-width: 1080px) {
  .post-duas-colunas { grid-template-columns: minmax(0, 760px) 300px; justify-content: space-between; }
  .post-indice-mobile { display: none; }
  .post-lateral .post-indice { position: sticky; top: 110px; }
}
@media (max-width: 1079.5px) { .post-lateral { display: none; } }
.post-conteudo { min-width: 0; max-width: 760px; }
/* telas muito largas: coluna de leitura um pouco maior para equilibrar */
@media (min-width: 1720px) {
  .post-duas-colunas { grid-template-columns: minmax(0, 860px) 320px; }
  .post-conteudo { max-width: 860px; }
}

.post-capa {
  margin: 18px 0 22px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
}
.post-capa img { display: block; width: 100%; height: auto; }

.post-lateral-cta {
  margin-top: 18px; padding: 18px; border-radius: 16px; text-align: center;
  background: rgba(121, 235, 147, .07); border: 1px solid rgba(121, 235, 147, .25);
}
.post-lateral-cta img { margin: 0 auto 8px; }
.post-lateral-cta p { font-size: 13.5px; line-height: 1.55; margin: 0 0 12px; }

/* cartões com imagem */
.blog-card { padding: 0; overflow: hidden; }
.blog-card-img { display: block; aspect-ratio: 2 / 1; overflow: hidden; background: rgba(255,255,255,.04); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.blog-card:hover .blog-card-img img { transform: scale(1.03); }
.blog-card-corpo { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }

/* grade em 3 colunas na largura cheia */
@media (min-width: 1024px) { .blog-grade { grid-template-columns: repeat(3, 1fr); } }
/* telas muito largas: 4 colunas para os cards não ficarem gigantes */
@media (min-width: 1720px) { .blog-grade { grid-template-columns: repeat(4, 1fr); } }

/* destaque: imagem ao lado do texto */
.blog-destaque {
  display: grid; gap: 0; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px; overflow: hidden; transition: border-color .15s;
}
.blog-destaque:hover { border-color: rgba(121, 235, 147, .5); }
@media (min-width: 900px) { .blog-destaque { grid-template-columns: 1.15fr 1fr; } }
.blog-destaque .blog-card-img { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 899.5px) { .blog-destaque .blog-card-img { aspect-ratio: 2 / 1; } }
.blog-destaque .blog-card-corpo { padding: 26px 28px; justify-content: center; }
.blog-destaque h3 { color: #fff; font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; line-height: 1.25; margin: 0; }
.blog-destaque p { color: rgba(255, 255, 255, .65); font-size: 15px; line-height: 1.65; margin: 0; }
.blog-ler { color: #79EB93; font-weight: 700; font-size: 14px; margin-top: 4px; }

/* ------------------------------------------------ hero do blog
   Mascote em PNG transparente ao lado do texto (pedido do dono: usar o
   arquivo como está, sem converter nem renomear). Some abaixo de 900px —
   em tela pequena a imagem empurraria o conteúdo pra baixo da dobra. */
.blog-hero { display: grid; gap: 24px; align-items: center; margin-bottom: 26px; }
@media (min-width: 900px) { .blog-hero { grid-template-columns: minmax(0, 1fr) 380px; } }
.blog-hero-img { width: 100%; max-width: 420px; height: auto; justify-self: center; }
@media (max-width: 899.5px) { .blog-hero-img { display: none; } }

/* 404 com o mascote transparente */
.pagina-404-img { width: min(340px, 70vw); height: auto; margin: 0 auto 4px; display: block; }

/* ------------------------------------------------ lateral sem sobreposição
   O sticky era só no sumário: rolando, o CTA ficava parado e os dois se
   atropelavam (relatado com print). Agora o bloco fixo é UM — sumário e
   CTA grudam juntos. */
.post-lateral-fixa { display: flex; flex-direction: column; gap: 0; }
@media (min-width: 1080px) {
  .post-lateral-fixa { position: sticky; top: 110px; }
  .post-lateral .post-indice { position: static; }
}

/* busca com lupa (referência) */
.blog-busca svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: rgba(255,255,255,.45); pointer-events: none;
}
.blog-busca input { padding-left: 42px; }

/* chips viram botões de filtro; "Todos" nasce aceso */
.blog-cat-chip { background: none; cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s, background .15s; }
.blog-cat-chip:hover { border-color: rgba(121,235,147,.45); color: #fff; }
.blog-cat-chip.on { background: rgba(121,235,147,.14); border-color: rgba(121,235,147,.5); color: #D6FFAD; }

/* CTA final com mascote (referência) */
.blog-cta-final { align-items: center; }
.blog-cta-final img { flex: none; }
.blog-cta-final .blog-cta-txt { flex: 1; min-width: 240px; }

/* ------------------------------------------------ página 404 (referência) */
.p404 { position: relative; max-width: 860px; margin: 0 auto; padding: 150px 20px 90px; text-align: center; color: rgba(255,255,255,.82); }
.p404-fundo {
  position: absolute; inset: 90px 0 auto; z-index: 0;
  font-size: clamp(180px, 38vw, 420px); font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.07);
  pointer-events: none; user-select: none;
}
.p404 > *:not(.p404-fundo) { position: relative; z-index: 1; }
.p404-mascote { width: min(420px, 78vw); height: auto; margin: 0 auto 10px; display: block; filter: drop-shadow(0 30px 60px rgba(121,235,147,.15)); }
.p404-selo {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  border: 1px solid rgba(121,235,147,.4); color: #79EB93;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; margin-bottom: 14px;
}
.p404 h1 { color: #fff; font-size: clamp(30px, 5vw, 44px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.p404-sub { color: rgba(255,255,255,.6); font-size: 16.5px; line-height: 1.65; margin: 0 0 26px; }
.p404-acoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.p404-sec {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); color: #fff;
  font-weight: 600; font-size: 14.5px; text-decoration: none;
  transition: border-color .15s, background .15s;
}
.p404-sec:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); }
.p404-divisor { display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.45); font-size: 13.5px; margin-bottom: 22px; }
.p404-divisor::before, .p404-divisor::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.p404-atalhos { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.p404-atalhos a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #fff; font-weight: 600; font-size: 14px; text-decoration: none;
  transition: border-color .15s;
}
.p404-atalhos a:hover { border-color: rgba(121,235,147,.5); }
.p404-atalhos a span { color: rgba(255,255,255,.45); }

/* ------------------------------------------------ hero em caixa
   Pedido do dono: hero dentro de um box no estilo do menu (mesma pílula
   escura com borda), brilho verde-neon suave saindo do lado direito, e o
   mascote MAIOR com margem negativa — cortado de leve embaixo pelo
   overflow, sem nunca vazar do box. */
.blog-hero {
  position: relative;
  overflow: hidden;                       /* é o que corta o mascote e prende o brilho */
  background: rgba(22, 26, 24, .72);      /* mesmo tom translúcido do menu */
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  padding: 34px 36px 30px;
  backdrop-filter: blur(12px);
}
/* brilho neon à direita — leve de propósito: luz, não holofote */
.blog-hero::after {
  content: '';
  position: absolute; right: -140px; top: 50%;
  width: 520px; height: 520px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(121, 235, 147, .18) 0%, rgba(121, 235, 147, .06) 45%, transparent 70%);
  pointer-events: none;
}
.blog-hero-texto { position: relative; z-index: 1; }
.blog-hero-img {
  position: relative; z-index: 1;
  max-width: 480px; width: 100%;
  margin-bottom: -46px;                   /* mergulha na borda de baixo… */
  align-self: end;                        /* …e o overflow do box apara */
  justify-self: end;
}
@media (min-width: 900px) {
  .blog-hero { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* ajuste pedido: mascote maior, centralizado na coluna, mergulhando mais */
.blog-hero-img {
  width: 100%;
  max-width: 580px;
  height: auto;
  justify-self: center;
  margin-bottom: -86px;
}
@media (min-width: 900px) {
  .blog-hero { grid-template-columns: minmax(0, 1fr) 460px; }
}

/* ============================================================
   LAYOUT v3 (modelo Agenko): banner de página, grade de cards,
   sidebar de widgets e 404. As classes antigas acima seguem no
   arquivo — só deixam de ser referenciadas pelo build.
   ============================================================ */

/* ---------- banner de página (blog, artigo, 404) ---------- */
.pg-banner {
  position: relative; overflow: hidden; z-index: 1;
  background: #161616;
  padding: 168px 0 72px;
  color: rgba(255, 255, 255, .75);
}
@media (min-width: 768px) { .pg-banner { padding: 196px 0 96px; } }
.pgb-shape { position: absolute; z-index: -1; }
.pgb-shape span { display: block; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); }
.pgb-c1 { top: -45%; left: -5%; }
.pgb-c1 span { width: 979px; height: 979px; }
.pgb-c2 { top: -120%; right: 0; }
.pgb-c2 span { width: 765px; height: 765px; }
.pgb-inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 992px) { .pgb-inner { grid-template-columns: minmax(0, 1fr) 220px; } }
.pgb-title {
  color: #fff; font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(34px, 5.4vw, 68px); line-height: 1.08;
  margin: 0 0 34px;
}
.pgb-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px 32px;
}
.pgb-tag { display: flex; align-items: center; gap: 22px; max-width: 560px; }
.pgb-tag .pgb-star { width: 56px; height: 56px; flex: 0 0 auto; animation: pgb-girar 14s linear infinite; }
.pgb-tag p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.pgb-trilha {
  list-style: none; margin: 0; padding: 10px 26px;
  border-radius: 40px; border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  font-size: 14px; white-space: nowrap;
}
.pgb-trilha li { display: inline-block; }
.pgb-trilha li:not(:last-child)::after { content: "|"; margin: 0 13px; opacity: .45; }
.pgb-trilha a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.pgb-trilha a:hover { color: #D6FFAD; }
.pgb-trilha li.ativo { color: #79EB93; }
.pgb-circle { display: none; }
@media (min-width: 1200px) {
  .pgb-circle { display: block; justify-self: end; }
  .pgb-circle svg { width: 190px; height: 190px; animation: pgb-girar 18s linear infinite; }
}
@keyframes pgb-girar { to { transform: rotate(360deg); } }

/* ---------- corpo das páginas do blog (banner cuida do topo) ---- */
.pg-shell { padding: 56px 0 80px; color: rgba(255, 255, 255, .82); }
@media (min-width: 768px) { .pg-shell { padding-top: 72px; } }

/* ---------- toolbar do blog (busca + categorias) ---------- */
.blog-toolbar { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-bottom: 34px; }
.blog-toolbar .blog-busca { margin: 0; flex: 1 1 260px; }
.blog-toolbar .blog-cats { margin: 0; }

/* ---------- cards estilo quatro: imagem, meta, título ------- */
.bcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.bcard-img {
  display: block; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
}
.bcard-img img { display: block; width: 100%; height: auto; transition: transform .45s ease; }
.bcard:hover .bcard-img img { transform: scale(1.05); }
.bcard-meta {
  display: flex; flex-wrap: wrap; gap: 6px 15px; align-items: center;
  margin: 18px 0 10px; font-size: 13px; color: rgba(255, 255, 255, .55);
}
.bcard-meta svg { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: #79EB93; }
.bcard-meta span { display: inline-flex; align-items: center; }
.bcard h3 { color: #fff; font-size: 19px; font-weight: 700; line-height: 1.35; margin: 0 0 9px; transition: color .15s; }
.bcard:hover h3 { color: #79EB93; }
.bcard p { font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .6); margin: 0; }
.bcard-cat {
  font-size: 12px; font-weight: 700; color: #79EB93;
  text-transform: uppercase; letter-spacing: .05em;
}

.blog-grade-v3 { display: grid; grid-template-columns: 1fr; gap: 40px 28px; }
@media (min-width: 640px) { .blog-grade-v3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .blog-grade-v3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1720px) { .blog-grade-v3 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- artigo: duas colunas + sidebar de widgets ---------- */
.art-grid { display: grid; gap: 44px; }
@media (min-width: 1080px) {
  .art-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}
.art-conteudo { min-width: 0; max-width: 860px; }
.art-capa { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); margin: 0 0 24px; }
.art-capa img { display: block; width: 100%; height: auto; }
.art-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin: 0 0 22px; font-size: 14px; color: rgba(255, 255, 255, .55);
}
.art-meta svg { width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; color: #79EB93; }
.art-meta span { display: inline-flex; align-items: center; }

/* rodapé do artigo: tags à esquerda, compartilhar à direita */
.art-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; margin: 34px 0 0; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.art-tags > span:first-child { font-weight: 700; color: #fff; text-transform: uppercase; font-size: 13.5px; letter-spacing: .04em; }
.art-tags span.tag {
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  padding: 8px 16px; border-radius: 30px; text-transform: uppercase;
}
.art-share { display: flex; align-items: center; gap: 8px; }
.art-share > span { font-weight: 700; color: #fff; text-transform: uppercase; font-size: 13.5px; letter-spacing: .04em; margin-right: 7px; }
.art-share a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .8);
  transition: background-color .15s, color .15s, border-color .15s;
}
.art-share a:hover { background: #79EB93; color: #161616; border-color: transparent; }
.art-share svg { width: 15px; height: 15px; }

/* sidebar de widgets */
.sb { display: flex; flex-direction: column; gap: 24px; }
.sb-widget {
  background: #1E1E1E; border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px; padding: 22px 26px 26px;
}
.sb-title { color: #fff; font-size: 18px; font-weight: 700; margin: 0 0 16px; }
.sb-widget .post-indice { background: none; border: none; padding: 0; margin: 0; }
.sb-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-nav li { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.sb-nav li:last-child { border-bottom: none; }
.sb-nav a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 2px; color: rgba(255, 255, 255, .7); text-decoration: none; font-size: 14.5px;
}
.sb-nav a:hover { color: #D6FFAD; }
.sb-nav a span { color: rgba(255, 255, 255, .4); font-size: 13px; }
.sb-recentes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.sb-recentes li { display: flex; gap: 14px; align-items: flex-start; }
.sb-recentes img { width: 78px; height: 58px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.sb-recentes .sb-rec-cat { display: block; font-size: 11.5px; font-weight: 700; color: #79EB93; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.sb-recentes h6 { margin: 0; font-size: 13.5px; line-height: 1.45; font-weight: 600; }
.sb-recentes h6 a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.sb-recentes h6 a:hover { color: #D6FFAD; }
.sb-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-tags span {
  font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 30px; padding: 7px 14px;
}
.sb-fixa { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 1079.5px) { .art-lateral { display: none; } }

/* ---------- 404 (modelo: conteúdo central, sem banner) ---------- */
.pg404 {
  padding: 150px 0 110px; text-align: center; color: rgba(255, 255, 255, .8);
  min-height: 82vh; display: flex; align-items: center; justify-content: center;
}
.pg404 img { display: block; width: min(480px, 78vw); height: auto; margin: 0 auto 30px; }
.pg404 h1 { color: #fff; font-size: clamp(22px, 3.2vw, 32px); font-weight: 600; margin: 0 0 30px; }
.pg404-acoes { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
.pg404-sec { color: rgba(255, 255, 255, .7); text-decoration: underline; text-underline-offset: 4px; }
.pg404-sec:hover { color: #D6FFAD; }