/* =====================================================================
   Blog da VEC Sistemas — complementos do vecsistemas.css
   Carregue SEMPRE depois do vecsistemas.css.
   ===================================================================== */

/* topo do blog: mais baixo que o das páginas de venda */
.hero--blog{padding:3.5rem 0 3.2rem}
.hero--blog .wrap{grid-template-columns:1fr}
.hero--blog h1{max-width:20ch}
.hero--blog .lead{max-width:60ch}

/* a lista começa mais perto do topo escuro, já que o filtro ancora a seção */
.sec--lista{padding-top:2.8rem}

/* filtro de categorias — fica acima dos artigos, na seção clara */
.blog-cats{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  margin:0 0 2.2rem;padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
.blog-cats a{color:var(--mute);text-decoration:none;font-family:var(--ff-d);font-weight:600;font-size:.94rem;
  padding:.45rem 1rem;border-radius:999px;border:1px solid var(--line);background:#fff;
  transition:color .15s,border-color .15s,background .15s}
.blog-cats a span{color:#A8A8A8;font-size:.82rem;margin-left:.3rem}
.blog-cats a:hover{color:var(--ink);border-color:var(--ink)}
.blog-cats a.ativa{background:var(--red);border-color:var(--red);color:#fff}
.blog-cats a.ativa span{color:#FFD2D5}
@media (max-width:640px){
  .blog-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-left:-1.25rem;margin-right:-1.25rem;padding-left:1.25rem;padding-right:1.25rem}
  .blog-cats::-webkit-scrollbar{display:none}
  .blog-cats a{flex:none}
}

/* cartões do índice */
.post-card{position:relative}
.post-card h2,.post-card h3{font-size:1.25rem;margin:.5rem 0 .6rem;line-height:1.25}
.post-card-tag{display:inline-block;font-family:var(--ff-d);font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red-d);margin-bottom:.5rem}

/* paginação */
.paginacao{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:3rem;
  padding-top:1.6rem;border-top:1px solid var(--line);font-family:var(--ff-d);font-weight:600}
.paginacao a{text-decoration:none;color:var(--ink);padding:.5rem .9rem;border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,color .15s}
.paginacao a:hover{border-color:var(--red);color:var(--red-d)}
.paginacao span{color:var(--mute);font-weight:400;font-family:var(--ff-b)}

/* aviso de rascunho */
.aviso-previa{background:#FFF4CE;border-bottom:1px solid #E8D48A;color:#5B4A00;
  padding:.8rem 1.25rem;text-align:center;font-size:.95rem;font-family:var(--ff-d);font-weight:600}

/* imagem de capa */
.post-capa{width:100%;border-radius:var(--r);border:1px solid var(--line);margin:0 0 2rem;aspect-ratio:1200/630;object-fit:cover}

/* ---------------------------------------------------------------
   Página do artigo: texto + lateral, como no blog da VEC Digital.
   O grid .post-grid e as caixas .side-box vêm do vecsistemas.css.
   --------------------------------------------------------------- */
.post-topo{margin-bottom:1.6rem}
.post-cat{display:inline-block;font-family:var(--ff-d);font-weight:600;font-size:.95rem;
  color:var(--red-d);text-decoration:none;margin-bottom:.7rem}
.post-cat:hover{text-decoration:underline}
.post-grid .post-topo h1{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:0 0 .8rem}
.post-lead{font-size:1.15rem;line-height:1.6;color:var(--mute);margin:0 0 1.3rem;max-width:58ch}
.post-topo .post-meta{display:flex;flex-wrap:wrap;gap:.4rem 2rem;margin:0;
  padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.post-topo .post-meta strong{font-family:var(--ff-d);color:var(--ink)}
.post-capa{margin-top:1.8rem}

/* A coluna ocupa toda a altura do artigo e NÃO gruda inteira: só o bloco
   de baixo (índice + contato) acompanha a leitura. Assim "Outros artigos"
   sobe junto com o texto e nada fica cortado fora da tela. */
.side{position:static;align-self:stretch;align-content:start}
.side-fixo{position:sticky;top:90px;display:grid;gap:1.2rem}
/* índice muito comprido rola por dentro em vez de empurrar o contato pra fora */
.side-box--indice ul{max-height:50vh;overflow-y:auto;scrollbar-width:thin}
@media (max-width:900px){
  .side-fixo{position:static;display:contents}
  /* no celular a lateral cai DEPOIS do texto: um índice ali não serve pra nada */
  .side-box--indice{display:none}
}

.side-box h3{font-family:var(--ff-d);font-size:1.05rem;margin:0 0 .8rem}
.side-todos{display:inline-block;margin-top:.9rem;font-family:var(--ff-d);font-weight:600;
  font-size:.92rem;color:var(--red-d);text-decoration:underline;text-underline-offset:3px}
.side-todos:hover{color:var(--ink)}

/* índice "Neste artigo", com marcação da seção atual */
.side-box--indice li{border-top:0;padding:0}
.side-box--indice li + li{border-top:1px solid var(--line)}
.side-box--indice li a{display:block;padding:.55rem 0 .55rem .8rem;font-size:.95rem;line-height:1.35;
  color:var(--mute);text-decoration:none;font-weight:400;border-left:3px solid transparent;
  transition:color .15s,border-color .15s}
.side-box--indice li a:hover{color:var(--ink)}
.side-box--indice li a.atual{color:var(--ink);font-weight:600;border-left-color:var(--red)}

/* no celular a lateral vira conteúdo normal, depois do texto */
@media (max-width:900px){
  .side{display:grid;gap:1.2rem;margin-top:2.5rem}
  .post-topo .post-meta{gap:.3rem 1.2rem}
}

/* texto do artigo */
.prose h2{scroll-margin-top:90px}
.prose h3{scroll-margin-top:90px;margin-top:1.8rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin:.4rem 0}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.prose a:hover{color:var(--red-d)}
.prose blockquote{margin:1.8rem 0;padding:.2rem 0 .2rem 1.3rem;border-left:4px solid var(--red);color:var(--mute);font-size:1.1rem}
.prose img{border-radius:var(--r);border:1px solid var(--line);margin:1.6rem 0}
.prose figure{margin:1.6rem 0}
.prose figcaption{font-size:.9rem;color:var(--mute);margin-top:.5rem}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}

/* tabela que rola no celular */
.tabela{overflow-x:auto;margin:1.8rem 0;border:1px solid var(--line);border-radius:var(--r)}
.tabela table{border-collapse:collapse;width:100%;min-width:480px;font-size:.98rem}
.tabela th,.tabela td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tabela thead th{background:var(--ink);color:#fff;font-family:var(--ff-d);font-weight:600;border-bottom:0}
.tabela tbody th{font-family:var(--ff-d);font-weight:600;background:var(--stone)}
.tabela tr:last-child th,.tabela tr:last-child td{border-bottom:0}

/* chamada no meio do texto: [cta Título | Texto] */
.cta-meio{background:var(--ink);color:#fff;border-radius:var(--r);padding:1.8rem;margin:2.4rem 0;position:relative;overflow:hidden}
.cta-meio::after{content:"";position:absolute;right:-6rem;top:-8rem;width:20rem;height:20rem;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(193,18,28,.35),transparent 60%);pointer-events:none}
.cta-meio h3{color:#fff;margin:0 0 .5rem;position:relative}
.cta-meio p{color:#CFCFCF;margin:0 0 1.2rem;position:relative}
.cta-meio .btn{position:relative}

/* autor */
.post-autor{display:flex;gap:1.3rem;align-items:flex-start;margin:3rem 0 0;padding-top:1.8rem;border-top:1px solid var(--line)}
.post-autor img{height:40px;width:auto;flex:none;margin:0;border:0;border-radius:0}
.post-autor strong{font-family:var(--ff-d);display:block;margin-bottom:.3rem}
.post-autor p{color:var(--mute);font-size:.95rem;margin:0}
@media (max-width:560px){.post-autor{flex-direction:column;gap:.9rem}}

/* compartilhar */
.post-share{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem;font-size:.92rem}
.post-share span{color:var(--mute)}
.post-share a{text-decoration:none;font-family:var(--ff-d);font-weight:600;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;transition:border-color .15s,color .15s}
.post-share a:hover{border-color:var(--red);color:var(--red-d)}
.post-share button{font:inherit;font-family:var(--ff-d);font-weight:600;color:var(--ink);cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;
  transition:border-color .15s,color .15s}
.post-share button:hover{border-color:var(--red);color:var(--red-d)}
.post-share button.copiado{border-color:var(--red);background:var(--red);color:#fff}

/* "Continue lendo": o cartão é cinza e a seção também, então ali ele
   some. Sobre esse fundo o cartão vira branco e ganha contorno. */
.sec--stone .post-card{background:#fff;border:1px solid var(--line)}
.sec--stone .post-card:hover{border-color:#CFCFCF}
/* com 2 relacionados os cartões preenchem a linha, sem buraco à direita */
.sec--stone .post-grid-index{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* botão da caixa escura da lateral */
.side-box--cta .btn{width:100%;justify-content:center;margin-top:.6rem}

/* botões dentro do texto não herdam o estilo de link do artigo */
.prose .btn{text-decoration:none}
.prose .btn--red{color:#fff}
.prose .btn--red:hover{color:#fff;background:var(--red-d)}
.prose .btn--ghost{color:var(--ink)}

/* barra de progresso da leitura (só na página do artigo) */
.progresso{position:fixed;top:0;left:0;height:3px;width:100%;z-index:70;pointer-events:none;
  background:transparent;transform-origin:left center}
.progresso span{display:block;height:100%;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left center;will-change:transform}
@media print{.progresso{display:none}}