/* ==========================================================================
   VENCO Engenharia — seção de artigos (www.vencoengenharia.com/artigos/)
   Carrega depois de site.css e usa os tokens dele (--noite, --petroleo,
   --ouro, --papel, --serif, --sans...). Aqui só entra o que a home não tem.

   Cabeçalho, capa e rodapé seguem escuros como a home. O texto corre num bloco
   claro: leitura longa em fundo quase preto cansa, e o off-white é o fundo
   principal do Manual de Marca (regra 60/30/10). Sobre o claro, o dourado fica
   em filete e marcador; texto pequeno em dourado não passa em contraste (3,8:1),
   então rótulo e link vão em verde petróleo (11:1 e 7,9:1).
   ========================================================================== */

:root{
  --tinta:#18211F;
  --tinta-2:#3F4348;
  --tinta-3:#6B7280;
  --papel-2:#F2EEE3;
  --papel-3:#E9E3D3;
  --filete-claro:#E1DAC8;
  --max-texto:720px;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Item da seção corrente no menu */
.menu a.ativo{color:var(--papel)}
.menu a.ativo::after{transform:scaleX(1)}
.menu-movel a.ativo{color:var(--ouro-claro)}

/* ==========================================================================
   Trilha de navegação
   Carrega o afastamento do header fixo; as seções logo abaixo dela têm o
   padding de cima reduzido, senão o espaço aparece duas vezes.
   ========================================================================== */
.trilha{padding:calc(var(--header-h) + 28px) 0 0;font-size:13px;color:var(--texto-inv-2)}
.trilha .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.trilha a{color:var(--texto-inv);border-bottom:1px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease)}
.trilha a:hover{color:var(--ouro-claro);border-bottom-color:var(--ouro-claro)}
.trilha .sep{color:var(--texto-inv-2)}
.trilha .atual{display:inline-flex;align-items:center;gap:8px 10px;min-width:0;max-width:100%}
.trilha [aria-current="page"]{max-width:min(60ch,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Código de norma numa linha só: "NBR 15575-4" não quebra no hífen. */
.cod{white-space:nowrap}

/* ==========================================================================
   Cabeçalho do artigo
   ========================================================================== */
.art-hero{padding:34px 0 clamp(44px,5vw,70px)}
.art-hero h1{
  margin:22px 0 22px;max-width:24ch;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(34px,4.5vw,60px);line-height:1.07;letter-spacing:-.015em;
  text-wrap:balance;
}
.art-resumo{max-width:64ch;font-size:clamp(16.5px,1.3vw,19px);line-height:1.7;color:var(--texto-inv)}
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;margin-top:28px;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-inv-2);
}
.art-meta span{display:inline-flex;align-items:center}
.art-meta span+span::before{
  content:"";flex:none;width:6px;height:6px;margin:0 16px;
  border:1px solid var(--ouro);transform:rotate(45deg);
}

/* ==========================================================================
   Capa: atravessa a divisa entre o escuro do cabeçalho e o papel do texto.
   height:auto é obrigatório: os atributos width/height do <img> viram altura
   fixa em px e anulam o aspect-ratio (foi o que pôs de pé uma capa da IC).
   ========================================================================== */
.art-capa{background:linear-gradient(180deg,var(--noite) 0,var(--noite) 56%,var(--papel) 56%,var(--papel) 100%)}
.art-capa .moldura{max-width:1080px;margin:0 auto;overflow:hidden;background:var(--noite-2);box-shadow:0 34px 80px -34px rgba(0,0,0,.55)}
.art-capa img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.art-capa.retrato .moldura{max-width:760px}
.art-capa.retrato img{aspect-ratio:4/3}
.art-capa figcaption{
  max-width:1080px;margin:12px auto 0;text-align:right;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);
}
.art-capa.retrato figcaption{max-width:760px}

/* ==========================================================================
   Corpo do artigo
   ========================================================================== */
.artigo{background:var(--papel);color:var(--tinta);padding:clamp(36px,4.6vw,64px) 0 clamp(64px,7vw,104px)}
.wrap-texto{width:100%;max-width:calc(var(--max-texto) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}

.voltar{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:34px;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--petroleo);
  transition:color .25s var(--ease);
}
.voltar svg{width:16px;height:16px}
.voltar:hover{color:var(--petroleo-2)}

.artigo p{margin:0 0 1.3em;font-size:17px;line-height:1.78;color:var(--tinta)}
.artigo p.abre{font-size:clamp(19px,1.55vw,21px);line-height:1.66}
.artigo h2{
  position:relative;margin:2.2em 0 .8em;padding-top:.95em;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(26px,2.6vw,35px);line-height:1.15;letter-spacing:-.01em;color:var(--noite);
}
.artigo h2::before{content:"";position:absolute;left:0;top:0;width:40px;height:2px;background:var(--ouro)}
.artigo h3{margin:1.8em 0 .6em;font-family:var(--sans);font-weight:600;font-size:18.5px;line-height:1.35;color:var(--petroleo)}
.artigo p a,.artigo li a,.nota-norma a,.faq-item a{
  color:var(--petroleo-2);border-bottom:1px solid rgba(207,169,79,.85);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.artigo p a:hover,.artigo li a:hover,.nota-norma a:hover,.faq-item a:hover{color:var(--noite);border-bottom-color:var(--noite)}
.artigo ul,.artigo ol{margin:0 0 1.5em 1.25em}
.artigo ul{list-style:disc}
.artigo ol{list-style:decimal}
.artigo li{margin-bottom:.6em;padding-left:.25em;font-size:16.5px;line-height:1.72;color:var(--tinta)}
.artigo li::marker{color:var(--ouro)}
.artigo strong{font-weight:600;color:var(--noite)}

/* Tabela dentro do texto: rola na horizontal, a página nunca. */
.tabela{margin:1.8em 0;overflow-x:auto}
.artigo table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.55}
.artigo th{padding:10px 12px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--petroleo);border-bottom:1px solid var(--ouro)}
.artigo td{padding:11px 12px;vertical-align:top;border-bottom:1px solid var(--filete-claro);color:var(--tinta)}

/* Nota normativa */
.nota-norma{margin:2em 0;padding:24px 28px;background:var(--papel-2);border-left:2px solid var(--ouro)}
.nota-norma .rot{display:block;margin-bottom:10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--petroleo)}
.nota-norma p{font-size:16px;line-height:1.72}
.nota-norma p:last-child{margin-bottom:0}

/* Perguntas frequentes */
.faq-bloco{display:grid;gap:12px;margin:1.2em 0 2.2em}
.faq-item{padding:22px 26px;background:#fff;border:1px solid var(--filete-claro)}
.faq-item p{margin:0}
.faq-item .pergunta{margin-bottom:10px;font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.3;color:var(--noite)}
.faq-item .resposta{font-size:16px;line-height:1.72;color:var(--tinta-2)}

/* Normas e fontes citadas: montado pelo build a partir das âncoras */
.fontes{margin:2.6em 0 0;padding-top:1.5em;border-top:1px solid var(--filete-claro)}
.fontes .rot{display:block;margin-bottom:14px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--petroleo)}
.fontes ul{margin:0;list-style:none}
.fontes li{position:relative;margin:0 0 .65em;padding-left:22px;font-size:14.5px;line-height:1.6;color:var(--tinta-2)}
.fontes li::marker{content:""}
.fontes li::before{content:"";position:absolute;left:2px;top:.8em;width:10px;height:1px;background:var(--ouro)}
.fontes a{color:var(--petroleo-2);border-bottom:1px solid rgba(207,169,79,.85);word-break:break-word}
.fontes a:hover{color:var(--noite);border-bottom-color:var(--noite)}

/* Chamada final */
.cta-fim{margin:3em 0 0;padding:clamp(28px,3.4vw,46px);background:var(--petroleo);color:var(--papel)}
.cta-fim .rotulo{color:var(--ouro-claro)}
.cta-fim h2{margin:16px 0 14px;padding-top:0;color:var(--papel);font-size:clamp(24px,2.3vw,31px)}
.cta-fim h2::before{display:none}
.cta-fim p{color:rgba(250,248,242,.84);font-size:16px}
.cta-fim ul{display:grid;gap:12px;margin:0 0 28px;list-style:none}
.cta-fim li{display:flex;align-items:flex-start;gap:12px;margin:0;padding:0;font-size:15.5px;line-height:1.6;color:rgba(250,248,242,.86)}
.cta-fim li::marker{content:""}
.cta-fim li svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--ouro)}
.cta-fim li b{font-weight:600;color:var(--papel)}
.cta-fim .ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Assinatura: a empresa assina, nunca uma pessoa */
.assinatura{margin-top:2.4em;padding-top:1.4em;border-top:1px solid var(--filete-claro)}
.assinatura p{margin-bottom:.7em;font-size:13.5px;line-height:1.7;color:var(--tinta-3)}
.assinatura p:last-child{margin-bottom:0}

/* ==========================================================================
   Leia também e cartões
   ========================================================================== */
.leia-tambem{padding:clamp(56px,6vw,92px) 0;background:var(--papel-2);color:var(--tinta)}
.leia-tambem .rotulo{color:var(--petroleo)}
.leia-tambem h2{margin:16px 0 30px;font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,40px);line-height:1.1;color:var(--noite)}

.grade-artigos{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(18px,2vw,28px);align-items:stretch}
.card-artigo{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--filete-claro);
  transition:border-color .4s var(--ease),transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
/* [hidden] vem da folha do navegador e perde para qualquer regra de autor:
   sem esta linha o display:flex acima mantém em tela o cartão filtrado. */
.card-artigo[hidden]{display:none}
.card-artigo:hover{border-color:rgba(207,169,79,.75);transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(13,26,24,.45)}
.card-artigo .capa{aspect-ratio:16/10;overflow:hidden;background:var(--papel-3)}
.card-artigo .capa img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.card-artigo:hover .capa img{transform:scale(1.04)}
.card-artigo .corpo{display:flex;flex-direction:column;flex:1;gap:10px;padding:22px 24px 24px}
.card-artigo .cat{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--petroleo)}
.card-artigo .cat .tema{margin-left:9px;padding-left:10px;border-left:1px solid var(--filete-claro);color:var(--tinta-3)}
.card-artigo h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.22;color:var(--noite)}
.card-artigo p{flex:1;font-size:15px;line-height:1.62;color:var(--tinta-2)}
.card-artigo .rodape-card{
  display:flex;justify-content:space-between;gap:12px;margin-top:6px;padding-top:14px;
  border-top:1px solid var(--filete-claro);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);
}
.card-artigo .ler{color:var(--petroleo)}

/* ==========================================================================
   Índice da seção
   ========================================================================== */
.capa-secao{padding:34px 0 clamp(56px,6vw,90px)}
.capa-secao h1{
  margin:22px 0 24px;max-width:18ch;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(38px,5.2vw,74px);line-height:1.04;letter-spacing:-.018em;text-wrap:balance;
}
.capa-secao .lead{max-width:62ch}

/* Filtros em dois campos de seleção. Não gruda no topo: o header da home some
   ao descer e volta ao subir, e uma barra presa embaixo dele fica ora colada,
   ora com um vão de 76 px. */
.filtros{padding:14px 0;background:var(--papel-2);color:var(--tinta);border-bottom:1px solid var(--filete-claro)}
.barra-filtro{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.filtro-rotulo{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3)}
.campo-filtro{position:relative;display:block;min-width:0}
.campo-filtro::after{
  content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;margin-top:-5px;
  border-right:1.5px solid var(--petroleo);border-bottom:1.5px solid var(--petroleo);
  transform:rotate(45deg);pointer-events:none;
}
.campo-filtro select{
  width:100%;max-width:100%;padding:10px 40px 10px 16px;
  font-size:14px;line-height:1.2;color:var(--tinta);background:#fff;
  border:1px solid var(--filete-claro);border-radius:2px;cursor:pointer;
  -webkit-appearance:none;appearance:none;text-overflow:ellipsis;
  transition:border-color .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}
.campo-filtro select:hover{border-color:var(--ouro)}
.campo-filtro option{background:#fff;color:var(--tinta)}
.campo-filtro option:disabled{color:var(--tinta-3)}
.campo-filtro.ativo select{background:var(--petroleo);color:var(--papel);border-color:var(--petroleo)}
.campo-filtro.ativo::after{border-color:var(--papel)}
.filtro-saida{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.limpar-filtro{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--petroleo);text-decoration:underline;text-underline-offset:3px}

.lista-artigos{padding:clamp(48px,5vw,80px) 0 clamp(64px,7vw,110px);background:var(--papel);color:var(--tinta)}
.grupo-linha+.grupo-linha{margin-top:clamp(52px,5.4vw,86px)}
.grupo-linha[hidden],.cabeca-linha[hidden]{display:none}
.cabeca-linha{max-width:66ch;margin-bottom:28px;padding-top:26px;border-top:1px solid var(--filete-claro)}
.grupo-linha:first-child .cabeca-linha{padding-top:0;border-top:0}
.grupo-linha.primeiro{margin-top:0}
.grupo-linha.primeiro .cabeca-linha{padding-top:0;border-top:0}
.cabeca-linha h2{
  margin-bottom:8px;font-family:var(--serif);font-weight:500;
  font-size:clamp(26px,2.6vw,36px);line-height:1.12;color:var(--noite);
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.cabeca-linha p{font-size:15.5px;line-height:1.65;color:var(--tinta-2)}
.sem-resultado{padding:40px 0;text-align:center;font-size:15.5px;color:var(--tinta-2)}
.sem-resultado .limpar{color:var(--petroleo);text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   Telas estreitas
   ========================================================================== */
@media (max-width:640px){
  .trilha{font-size:12px;padding-top:calc(var(--header-h) + 18px)}
  .trilha .atual{display:none}
  .art-meta span+span::before{margin:0 10px}
  .art-capa{background:linear-gradient(180deg,var(--noite) 0,var(--noite) 50%,var(--papel) 50%,var(--papel) 100%)}
  .artigo p{font-size:16.5px}
  .nota-norma{padding:20px 20px}
  .faq-item{padding:18px 20px}
  .filtro-rotulo{display:none}
  .campo-filtro{flex:1 0 100%}
  .filtro-saida{margin-left:0;padding-top:2px}
}