/* =====================================================================
   BLOG VEC DIGITAL
   Complementa o style.css. Carregado só nas páginas dentro de /blog/.
   ===================================================================== */

/* ---------- Barra de progresso de leitura ---------- */
.progresso{position:fixed;top:0;left:0;right:0;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:0 50%;z-index:1000;pointer-events:none}

/* ---------- Topo do artigo ---------- */
.post-head{margin-bottom:2.2rem;padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
.post-cat{display:inline-block;margin-bottom:.7rem;font-family:var(--ff-d);font-weight:600;font-size:.92rem;color:var(--amber-d);text-decoration:none}
.post-cat:hover{text-decoration:underline}
.post-head h1{margin:0 0 .9rem}
.post-resumo{margin:0 0 1.3rem;font-size:1.15rem;line-height:1.55;color:var(--mute)}
.post-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;margin:0;font-size:.92rem;color:var(--mute)}
.post-meta strong{color:var(--ink);font-weight:600}

/* ---------- Texto ---------- */
.prose h2{scroll-margin-top:100px}
.prose ol.perguntas{padding-left:1.3rem}
.prose ol.perguntas li{margin-bottom:1rem;padding-left:.3rem}
.prose ol.perguntas li::marker{font-family:var(--ff-d);font-weight:700;color:var(--amber-d)}

.tabela{margin:1.6rem 0 2rem;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tabela table{width:100%;min-width:560px;border-collapse:collapse;font-size:.95rem;line-height:1.45}
.tabela th,.tabela td{padding:.8rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tabela thead th{background:var(--ink);color:#fff;font-family:var(--ff-d);font-weight:600}
.tabela tbody th{width:24%;background:var(--stone);color:var(--ink);font-family:var(--ff-d);font-weight:600}
.tabela tbody tr:last-child > *{border-bottom:0}

/* ---------- Chamada dentro do texto ---------- */
.cta-artigo{margin:2.6rem 0;padding:1.6rem 1.8rem;background:var(--stone);border-left:4px solid var(--amber);border-radius:var(--r)}
.cta-artigo-titulo{margin:0 0 .35rem;font-family:var(--ff-d);font-weight:700;font-size:1.2rem;color:var(--ink)}
.cta-artigo p{margin:0 0 1.1rem}
.cta-artigo .btn{margin:0}

/* ---------- Autor ---------- */
.autor{display:flex;gap:1.2rem;align-items:flex-start;margin:3rem 0 0;padding:1.5rem;border:1px solid var(--line);border-radius:var(--r)}
.autor-foto{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--ff-d);font-weight:700;font-size:1.5rem;object-fit:cover}
.autor-nome{margin:0 0 .25rem;font-family:var(--ff-d);font-weight:700;color:var(--ink)}
.autor p{margin:0 0 .5rem;font-size:.95rem;color:var(--mute)}
.autor p:last-child{margin:0}

/* ---------- Compartilhar ---------- */
.compartilhar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.4rem}
.compartilhar span{margin-right:.4rem;font-family:var(--ff-d);font-weight:600;color:var(--ink)}
.compartilhar a,.compartilhar button{padding:.45rem .95rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:.9rem;text-decoration:none;cursor:pointer}
.compartilhar a:hover,.compartilhar button:hover{border-color:var(--ink)}

/* ---------- Lateral ---------- */
.side{position:static}
.post-grid .side{align-self:stretch;align-content:start}
.side-fixo{position:sticky;top:90px;display:grid;gap:1.2rem}
.side-todos{margin:.8rem 0 0}
.side-todos a{font-family:var(--ff-d);font-weight:600;font-size:.92rem}
.side-box--cta .btn + .btn{margin-top:.6rem}

.toc[hidden]{display:none}
.toc ol{margin:0;padding:0;list-style:none}
.toc li,.toc li:first-child{padding:0}
.toc li a{display:block;margin-left:-1.4rem;padding:.45rem 0 .45rem 1.15rem;border-left:3px solid transparent;color:var(--mute);font-size:.93rem;font-weight:400;line-height:1.35;text-decoration:none}
.toc li a:hover{color:var(--ink)}
.toc li a.ativo{border-left-color:var(--amber);color:var(--ink);font-weight:600}

.toc-mobile{display:none}

/* ---------- Relacionados ---------- */
.relacionados{border-top:1px solid var(--line)}
.relacionados h2{margin-bottom:0}

/* ---------- Cards (índice e relacionados) ---------- */
.post-card[hidden]{display:none}
.post-card h3{margin:.5rem 0 .6rem;font-size:1.2rem;line-height:1.25}
.post-card-cat{font-family:var(--ff-d);font-weight:600;font-size:.85rem;color:var(--amber-d)}
.post-card-meta{display:flex;flex-wrap:wrap;gap:.2rem 1rem;margin-top:.4rem;font-size:.85rem;color:var(--mute)}
.post-card-cta{margin-top:.9rem}

.post-card--destaque{grid-column:1 / -1;padding:2.4rem 2.6rem;background:var(--ink);color:#fff}
.post-card--destaque h2{max-width:26ch;font-size:clamp(1.5rem,2.8vw,2.2rem);color:#fff}
.post-card--destaque p{max-width:62ch;font-size:1.05rem;color:#C9D1E3}
.post-card--destaque time,
.post-card--destaque .post-card-meta{color:#C9D1E3}
.post-card--destaque .post-card-cat,
.post-card--destaque .post-card-cta{color:var(--amber)}

/* ---------- Índice ---------- */
.blog-indice{padding-top:2rem}
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.filtros button{padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-family:var(--ff-d);font-weight:600;font-size:.92rem;cursor:pointer}
.filtros button:hover{border-color:var(--ink)}
.filtros button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.blog-pauta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:3.5rem;padding:2rem 2.2rem;background:var(--stone);border-radius:var(--r)}
.blog-pauta h2{margin:0 0 .35rem;font-size:1.35rem}
.blog-pauta p{max-width:58ch;margin:0;color:var(--mute)}

/* ---------- Foco visível ---------- */
.filtros button:focus-visible,
.compartilhar a:focus-visible,
.compartilhar button:focus-visible,
.toc li a:focus-visible,
.post-card:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ---------- Celular e tablet ---------- */
@media (max-width:900px){
  .side-fixo{position:static}
  .toc{display:none}
  .toc-mobile{display:block;margin:0 0 2rem;padding:1rem 1.2rem;background:var(--stone);border-radius:var(--r)}
  .toc-mobile summary{font-family:var(--ff-d);font-weight:600;cursor:pointer}
  .toc-mobile ol{margin:.8rem 0 0;padding-left:1.2rem}
  .toc-mobile li{margin:.4rem 0}
  .post-card--destaque{padding:1.8rem}
}
@media (max-width:560px){
  .cta-artigo{padding:1.3rem}
  .autor{flex-direction:column}
  .blog-pauta{padding:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  .progresso{display:none}
}

/* ---------- Vídeo responsivo ---------- */
.video{position:relative;aspect-ratio:16/9;margin:1.5rem 0 2rem;border-radius:var(--r);overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}