/* =====================================================================
   Blog da SST Engenharia — complementa /assets/estilo.css.
   Mesma régua do site: cantos retos, borda de 1px, mono em caixa alta
   para rótulo e IBM Plex Sans Condensed nos títulos.
   ===================================================================== */

/* ---------------- índice do blog ---------------- */
.blog-hero{background:var(--marinho);color:#fff;padding:clamp(44px,7vw,84px) 0 clamp(38px,6vw,64px)}
.blog-hero .mono{color:var(--azul-claro);display:block;margin-bottom:18px}
.blog-hero h1{font-size:clamp(32px,5.4vw,58px);max-width:17ch;color:#fff}
.blog-hero-txt{margin-top:20px;max-width:62ch;font-size:clamp(16px,1.5vw,18.5px);color:var(--azul-pal);line-height:1.65}

.blog-lista{padding:clamp(38px,6vw,70px) 0 clamp(44px,7vw,80px)}
.grupo + .grupo{margin-top:clamp(38px,5vw,62px)}
.grupo > h2{
  font-size:clamp(21px,2.4vw,27px);padding-bottom:13px;
  border-bottom:2px solid var(--marinho);display:inline-block;
}
.cartoes{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:1px;background:var(--linha);
  border:1px solid var(--linha);grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.cartao{background:#fff}
.cartao a{display:flex;flex-direction:column;gap:11px;height:100%;padding:24px 24px 26px;text-decoration:none;
  border-left:3px solid transparent;transition:background .16s,border-color .16s}
.cartao a:hover{background:var(--papel-2);border-left-color:var(--vermelho)}
.cartao .mono{color:var(--tinta-50)}
.cartao h3{font-size:20.5px;line-height:1.14;color:var(--tinta)}
.cartao a:hover h3{color:var(--marinho)}
.cartao-txt{font-size:15px;line-height:1.6;color:var(--tinta-70);margin-top:auto}

/* ---------------- artigo ---------------- */
.artigo-env{max-width:790px;padding-top:clamp(26px,4vw,44px);padding-bottom:clamp(40px,6vw,72px)}
.trilha{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-50);margin-bottom:26px}
.trilha a{text-decoration:none;color:var(--tinta-50)}
.trilha a:hover{color:var(--vermelho)}
.trilha span{margin:0 3px}

.artigo-cat{color:var(--vermelho);display:block;margin-bottom:14px}
.artigo h1{font-size:clamp(29px,4.4vw,45px);line-height:1.05;max-width:22ch}
.artigo-resumo{margin-top:18px;font-size:clamp(17px,1.8vw,19.5px);line-height:1.6;color:var(--tinta-70);max-width:60ch}
.artigo-meta{margin-top:20px;padding-bottom:22px;border-bottom:1px solid var(--linha);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-50)}

/* bloco que a IA cita: fica no topo, curto e com número */
.pontos{border:1px solid var(--linha);border-left:4px solid var(--marinho);background:var(--papel-2);
  padding:24px 26px 26px;margin:30px 0 8px}
.pontos .mono{color:var(--marinho);display:block;margin-bottom:14px}
.pontos ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.pontos li{position:relative;padding-left:22px;font-size:16px;line-height:1.58;color:var(--tinta)}
.pontos li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--vermelho)}

/* ---------------- corpo do texto ---------------- */
.prosa{margin-top:34px}
.prosa h2{font-size:clamp(23px,2.7vw,30px);line-height:1.1;margin:46px 0 16px;padding-top:26px;
  border-top:1px solid var(--linha)}
.prosa h2:first-child{margin-top:0;padding-top:0;border-top:none}
.prosa h3{font-size:19.5px;line-height:1.2;margin:32px 0 12px;color:var(--marinho)}
.prosa h4{font-size:17px;margin:24px 0 10px;color:var(--tinta-70)}
.prosa p{margin:0 0 17px;font-size:17px;line-height:1.68}
.prosa a{color:var(--marinho);text-decoration:underline;text-underline-offset:2.5px;text-decoration-thickness:1px}
.prosa a:hover{color:var(--vermelho)}
.prosa ul,.prosa ol{margin:0 0 20px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.prosa li{font-size:17px;line-height:1.62}
.prosa li::marker{color:var(--vermelho)}
.prosa strong{font-weight:600;color:var(--tinta)}
.prosa code{font-family:var(--mono);font-size:14.5px;background:var(--papel-2);
  border:1px solid var(--linha);padding:1px 5px}
.prosa blockquote{margin:26px 0;padding:18px 22px;background:var(--papel-2);
  border-left:4px solid var(--azul-claro)}
.prosa blockquote p{margin:0;font-size:16.5px;color:var(--tinta-70)}

.tabela-rolagem{overflow-x:auto;margin:0 0 24px;border:1px solid var(--linha)}
.tabela-rolagem table{border-collapse:collapse;width:100%;min-width:460px;font-size:15.5px}
.tabela-rolagem th{background:var(--marinho);color:#fff;text-align:left;padding:12px 15px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.tabela-rolagem td{padding:12px 15px;border-top:1px solid var(--linha);color:var(--tinta-70);vertical-align:top}
.tabela-rolagem tr:nth-child(even) td{background:var(--papel-2)}

/* ---------------- fontes e notas ---------------- */
.fontes{margin-top:46px;padding-top:26px;border-top:2px solid var(--marinho)}
.fontes h2{font-size:20px;margin-bottom:16px}
.fontes ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.fontes li{font-size:15.5px;line-height:1.5}
.fontes a{color:var(--marinho);text-decoration:underline;text-underline-offset:2.5px}
.fontes a:hover{color:var(--vermelho)}

.artigo-md,.artigo-nota{margin-top:22px;font-size:14px;line-height:1.6;color:var(--tinta-50)}
.artigo-md a,.artigo-nota a{color:var(--tinta-50);text-decoration:underline;text-underline-offset:2.5px}
.artigo-md a:hover,.artigo-nota a:hover{color:var(--vermelho)}
.blog-lista .artigo-md{margin-top:clamp(36px,5vw,56px);padding-top:20px;border-top:1px solid var(--linha)}

.aviso-rascunho{background:#FFF4D6;border:1px solid #E0B93C;border-left:4px solid #CB8A02;
  padding:16px 20px;margin-bottom:26px;font-size:15px;line-height:1.6;color:#4A3708}
.aviso-rascunho code{font-family:var(--mono);font-size:13.5px;background:#fff;border:1px solid #E0B93C;padding:1px 5px}

/* ---------------- chamada do fim ---------------- */
.cta-blog{background:var(--papel-2);border-top:1px solid var(--linha)}
.cta-blog-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,60px);
  padding:clamp(36px,5vw,60px) 0}
.cta-blog .mono{color:var(--vermelho);display:block;margin-bottom:12px}
.cta-blog h2{font-size:clamp(23px,3vw,34px);max-width:19ch}
.cta-blog-txt{margin-top:14px;font-size:16px;line-height:1.6;color:var(--tinta-70);max-width:52ch}
.cta-blog-acoes{display:flex;flex-direction:column;gap:12px;flex:none}

@media (max-width:860px){
  .cta-blog-in{flex-direction:column;align-items:flex-start}
  .cta-blog-acoes{width:100%}
  .cta-blog-acoes .btn{width:100%}
}
@media (max-width:640px){
  .cartoes{grid-template-columns:1fr}
  .artigo h1{max-width:none}
  .pontos{padding:20px 18px 22px}
  .prosa p,.prosa li{font-size:16.5px}
}