/* ================================================================
   SuporteGO — Blog
   Direção: editorial. Título em serifa com contraste alto, corpo em
   Inter com medida de leitura curta, imagens generosas e cor só onde
   significa alguma coisa (tags e links). Nada de card genérico.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root {
  --blog-serif: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --blog-medida: 68ch;          /* linha de leitura confortável */
  --blog-tinta: #16233A;
  --blog-tinta-suave: #4A6080;
  --blog-linha: #E4EBF5;
}

/* ── Capa da seção ───────────────────────────────────────────── */
.blog-hero {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.blog-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(59,191,206,.28) 0%, transparent 45%),
    radial-gradient(circle at 88% 0%, rgba(249,168,38,.18) 0%, transparent 45%);
}
.blog-hero .container { position: relative; z-index: 1; }
.blog-hero .eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan-light);
  margin-bottom: var(--sp-3);
}
.blog-hero h1 {
  font-family: var(--blog-serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: var(--sp-3);
}
.blog-hero p {
  color: rgba(255,255,255,.78);
  font-size: clamp(.98rem, 1.6vw, 1.12rem);
  max-width: 56ch;
  line-height: 1.65;
}

/* ── Barra de busca e tags ───────────────────────────────────── */
.blog-filtros {
  position: sticky; top: var(--header-height); z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--blog-linha);
  padding: var(--sp-3) 0;
}
.blog-filtros .container {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.blog-busca { position: relative; flex: 1 1 260px; min-width: 0; }
.blog-busca i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: .85rem;
}
.blog-busca input {
  width: 100%; padding: 10px 14px 10px 38px;
  border: 1.5px solid var(--border); border-radius: var(--radius-full);
  font: inherit; font-size: .9rem; background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.blog-busca input:focus { border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(42,92,138,.12); }

.blog-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: #fff;
  font-size: .8rem; font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer; text-decoration: none;
  transition: all .15s var(--ease, cubic-bezier(.4,0,.2,1));
}
.tag-chip:hover { border-color: var(--primary-light); color: var(--primary); transform: translateY(-1px); }
.tag-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tag-chip .n { opacity: .55; font-weight: 500; }

/* ── Listagem ────────────────────────────────────────────────── */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: var(--sp-7);
}

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-5); }

.post-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--blog-linha);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .2s var(--ease, cubic-bezier(.4,0,.2,1)), box-shadow .2s, border-color .2s;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(30,58,111,.13); border-color: var(--border); }
.post-card .capa {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--cyan) 140%);
  position: relative; overflow: hidden;
}
.post-card .capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease, cubic-bezier(.4,0,.2,1)); }
.post-card:hover .capa img { transform: scale(1.04); }
.post-card .capa .sem-img {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,.5); font-size: 1.8rem;
}
.post-card .corpo { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.post-card h2, .post-card h3 {
  font-family: var(--blog-serif);
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--blog-tinta);
  margin: var(--sp-2) 0 var(--sp-2);
}
.post-card:hover h2, .post-card:hover h3 { color: var(--primary); }
.post-card p { font-size: .89rem; line-height: 1.6; color: var(--blog-tinta-suave); flex: 1; }
.post-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.post-meta .sep { opacity: .4; }
.post-card .rodape {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--blog-linha);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .78rem;
}
.post-card .rodape .ler { color: var(--primary-light); font-weight: 700; }
.post-card .rodape .ler i { transition: transform .18s; }
.post-card:hover .rodape .ler i { transform: translateX(3px); }

.tag-mini {
  display: inline-block; padding: 2px 9px; border-radius: var(--radius-full);
  background: rgba(59,191,206,.12); color: #0E7C8B;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  text-decoration: none;
}
.tag-mini:hover { background: rgba(59,191,206,.22); color: #0B6675; }

/* Post em destaque: ocupa a linha inteira, com imagem ao lado */
.post-card.destaque {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}
.post-card.destaque .capa { flex: 0 0 46%; aspect-ratio: auto; }
.post-card.destaque .corpo { padding: var(--sp-6); justify-content: center; }
.post-card.destaque h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.post-card.destaque p { font-size: .95rem; max-width: 52ch; }
.selo-destaque {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff;
  padding: 3px 11px; border-radius: var(--radius-full);
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

/* ── Coluna lateral ──────────────────────────────────────────── */
.blog-aside { position: sticky; top: calc(var(--header-height) + 70px); display: grid; gap: var(--sp-5); }
.aside-bloco {
  background: #fff; border: 1px solid var(--blog-linha); border-radius: 14px; padding: var(--sp-5);
}
.aside-bloco h3 {
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--sp-4);
}
.recentes { display: grid; gap: var(--sp-4); }
.recente { display: flex; gap: var(--sp-3); text-decoration: none; color: inherit; }
.recente img, .recente .ph {
  width: 62px; height: 62px; flex-shrink: 0; border-radius: 10px; object-fit: cover;
  background: linear-gradient(135deg, var(--primary), var(--cyan));
}
.recente .tit {
  font-size: .86rem; font-weight: 600; line-height: 1.35; color: var(--blog-tinta);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.recente:hover .tit { color: var(--primary); }
.recente .dt { font-size: .72rem; color: var(--text-muted); margin-top: 3px; }

.aside-cta {
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; border: none;
}
.aside-cta h3 { color: rgba(255,255,255,.6); }
.aside-cta p { font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.8); margin-bottom: var(--sp-4); }

/* ── Artigo ──────────────────────────────────────────────────── */
.artigo-hero { padding: clamp(2.5rem, 5vw, 4rem) 0 0; background: #fff; }
.artigo-cabeca { max-width: var(--blog-medida); margin-inline: auto; }
.artigo-cabeca .trilha {
  font-size: .78rem; color: var(--text-muted); margin-bottom: var(--sp-4);
}
.artigo-cabeca .trilha a { color: var(--primary-light); }
.artigo-cabeca h1 {
  font-family: var(--blog-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--blog-tinta);
  margin-bottom: var(--sp-4);
}
.artigo-cabeca .chamada {
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.6;
  color: var(--blog-tinta-suave);
  margin-bottom: var(--sp-5);
}
.artigo-assinatura {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--blog-linha);
  font-size: .82rem; color: var(--text-muted);
}
.artigo-assinatura .autor { font-weight: 700; color: var(--blog-tinta); }

/* A capa ilustra, não protagoniza: acompanha a largura do texto e tem
   altura limitada, senão uma imagem alta empurra o post inteiro para
   baixo da dobra e rouba a atenção do título. */
.artigo-capa {
  max-width: calc(var(--blog-medida) + 8ch);
  margin: var(--sp-5) auto var(--sp-6);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(30,58,111,.14);
}
.artigo-capa img {
  display: block;
  width: 100%;
  max-height: min(38vh, 340px);
  object-fit: cover;
  object-position: center;
}
.artigo-capa figcaption {
  font-size: .76rem; color: var(--text-muted); text-align: center;
  padding: var(--sp-2) var(--sp-4); background: var(--bg);
}

/* Corpo do texto — é aqui que a leitura acontece */
.artigo-corpo {
  max-width: var(--blog-medida);
  margin-inline: auto;
  font-size: 1.075rem;
  line-height: 1.78;
  color: #223142;
  padding-bottom: var(--sp-7);
}
.artigo-corpo > * + * { margin-top: 1.35em; }
.artigo-corpo p { margin: 0; }
.artigo-corpo h2 {
  font-family: var(--blog-serif);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -.015em;
  color: var(--blog-tinta);
  margin-top: 2.2em;
}
.artigo-corpo h3 {
  font-size: 1.2rem; font-weight: 700; color: var(--blog-tinta); margin-top: 1.8em;
}
.artigo-corpo a { color: var(--primary-light); text-decoration: underline; text-underline-offset: 3px; }
.artigo-corpo a:hover { color: var(--accent-dark); }
.artigo-corpo strong { font-weight: 700; color: var(--blog-tinta); }
.artigo-corpo ul, .artigo-corpo ol { padding-left: 1.4em; }
.artigo-corpo ul { list-style: disc; }
.artigo-corpo ol { list-style: decimal; }
.artigo-corpo li + li { margin-top: .5em; }
.artigo-corpo img {
  width: 100%; height: auto; border-radius: 12px; margin-block: 1.8em;
  box-shadow: 0 8px 26px rgba(30,58,111,.12);
}
.artigo-corpo figure { margin-block: 1.8em; }
.artigo-corpo figcaption { font-size: .82rem; color: var(--text-muted); text-align: center; margin-top: .6em; }
.artigo-corpo blockquote {
  border-left: 3px solid var(--accent);
  padding: .2em 0 .2em 1.2em;
  font-family: var(--blog-serif);
  font-size: 1.18rem; font-style: italic; line-height: 1.55;
  color: var(--blog-tinta);
}
.artigo-corpo pre {
  background: var(--bg-dark); color: #E6EDF7;
  padding: 1.1em 1.3em; border-radius: 12px; overflow-x: auto;
  font-size: .88rem; line-height: 1.6;
}
.artigo-corpo code {
  font-family: ui-monospace, Consolas, monospace; font-size: .9em;
  background: var(--bg); padding: 2px 6px; border-radius: 5px;
}
.artigo-corpo pre code { background: none; padding: 0; }
.artigo-corpo hr { border: none; border-top: 1px solid var(--blog-linha); margin-block: 2.4em; }
.artigo-corpo table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.artigo-corpo th, .artigo-corpo td { border: 1px solid var(--blog-linha); padding: 8px 12px; text-align: left; }
.artigo-corpo th { background: var(--bg); font-weight: 700; }

/* Barra de progresso da leitura */
.leitura-progresso {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--accent));
  z-index: 200; transition: width .1s linear;
}

.artigo-rodape {
  max-width: var(--blog-medida); margin-inline: auto;
  padding-top: var(--sp-5); border-top: 1px solid var(--blog-linha);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.compartilhar { display: flex; align-items: center; gap: var(--sp-2); }
.compartilhar span { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.share-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--border); background: #fff; color: var(--text-secondary);
  cursor: pointer; text-decoration: none; font-size: .9rem;
  transition: all .15s;
}
.share-btn:hover { transform: translateY(-2px); border-color: transparent; color: #fff; background: var(--primary); }
.share-btn.zap:hover { background: #25D366; }
.share-btn.li:hover  { background: #0A66C2; }
.share-btn.fb:hover  { background: #1877F2; }

/* ── Home: últimos do blog ───────────────────────────────────── */
.home-blog { background: var(--bg); }
.home-blog .section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.home-blog .post-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ── Estados ─────────────────────────────────────────────────── */
.blog-vazio {
  grid-column: 1 / -1;
  text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-muted);
}
.blog-vazio i { font-size: 2.2rem; opacity: .3; display: block; margin-bottom: var(--sp-3); }
.blog-skel { border-radius: 14px; overflow: hidden; border: 1px solid var(--blog-linha); background: #fff; }
.blog-skel .b {
  background: linear-gradient(90deg, #EEF3FA 25%, #F7FAFD 37%, #EEF3FA 63%);
  background-size: 400% 100%; animation: blogskel 1.3s linear infinite;
}
.blog-skel .b.capa { aspect-ratio: 16/9; }
.blog-skel .b.linha { height: 12px; border-radius: 6px; margin: 12px 16px; }
@keyframes blogskel { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── Responsivo ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 760px) {
  .post-card.destaque { flex-direction: column; }
  .post-card.destaque .capa { flex: none; aspect-ratio: 16/9; }
  .post-card.destaque .corpo { padding: var(--sp-5); }
  .blog-filtros { position: static; }
  .artigo-capa { border-radius: 10px; }
  .artigo-capa img { max-height: 30vh; }
  .artigo-corpo { font-size: 1.02rem; }
  .artigo-corpo img { margin-inline: 0; }
}
@media (max-width: 480px) {
  .post-grid { grid-template-columns: 1fr; }
  .artigo-rodape { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .post-card, .post-card .capa img, .share-btn, .tag-chip { transition: none; }
}

/* Impressão do artigo: só o texto */
@media print {
  .site-header, .site-footer, .blog-filtros, .blog-aside, .artigo-rodape, .leitura-progresso { display: none !important; }
  .artigo-corpo { max-width: none; font-size: 11pt; }
}