/* ==========================================================================
   IC Para Raios — seção de artigos (www.icpararaios.com/artigos/)
   Carrega DEPOIS de home.css e reaproveita os tokens dele (--azul, --papel,
   --amarelo, --cobre, --aco, --display, --sans, --mono...). Aqui só entra o
   que a home não tem: índice da seção e corpo de texto longo.

   O body continua escuro (home.css) porque header e rodapé são escuros. A
   área de leitura é um bloco claro entre os dois.
   ========================================================================== */

:root{
  --azul-profundo:#050B18;
  --branco:#fff;
  --max-texto:760px;
  --r:14px;
}

/* ==========================================================================
   Índice da seção
   ========================================================================== */
.capa-secao{
  background:linear-gradient(160deg,var(--azul-profundo),var(--azul) 72%);
  padding:calc(var(--header-h) + 68px) 0 62px;
}
.capa-secao h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(30px,5vw,58px);
  line-height:1.03;
  letter-spacing:-.032em;
  text-transform:uppercase;
  text-wrap:balance;
  margin:20px 0 18px;
  max-width:16ch;
}
.capa-secao .lead{
  max-width:60ch;
  font-size:clamp(15px,1.5vw,18px);
  color:var(--texto-inv);
}

/* --------------------------------------------------------------- filtros
   Dois eixos: tema (do que trata) e aplicação (onde vale). Uma faixa clara
   entre a capa escura e a lista, que gruda no topo ao rolar — com 70+ artigos,
   filtro que sai da tela obriga a voltar lá em cima.

   Dois campos de seleção, não fileiras de botão: catorze chips gastavam 130px
   de barra fixa aqui e 435px no celular. Agora a barra cabe numa linha e sobra
   tela para o que o leitor veio ver, que é artigo. */
.filtros{
  background:var(--papel-2);color:var(--texto);
  border-bottom:1px solid var(--filete);
  padding:13px 0;
  position:sticky;top:var(--header-h);z-index:20;
}
.barra-filtro{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filtro-rotulo{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);flex:0 0 auto;
}
.campo-filtro{position:relative;display:block;min-width:0}
/* Seta em CSS: o select perde a nativa com appearance:none, e um SVG embutido
   custaria mais bytes do que dois filetes girados. */
.campo-filtro::after{
  content:"";position:absolute;right:14px;top:50%;
  width:7px;height:7px;margin-top:-5px;
  border-right:1.5px solid var(--aco);border-bottom:1.5px solid var(--aco);
  transform:rotate(45deg);pointer-events:none;
  transition:border-color .2s var(--ease);
}
.campo-filtro select{
  font:inherit;font-size:13.5px;line-height:1.2;
  background:var(--branco);color:var(--aco);
  border:1px solid var(--filete);border-radius:999px;
  padding:9px 34px 9px 15px;
  width:100%;max-width:100%;
  text-overflow:ellipsis;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.campo-filtro select:hover{border-color:var(--cobre);color:var(--texto)}
.campo-filtro select:focus-visible{outline:2px solid var(--amarelo);outline-offset:2px}
/* A lista aberta é desenhada pelo sistema e herda a cor do campo: sem estas
   duas linhas ela some dentro do fundo escuro do campo ativo. */
.campo-filtro option{background:var(--branco);color:var(--texto)}
.campo-filtro option:disabled{color:var(--muted)}
/* Campo com recorte aplicado fica escuro — é assim que o leitor vê, de
   relance, qual dos dois eixos ele mexeu. */
.campo-filtro.ativo select{background:var(--azul);color:var(--papel);border-color:var(--azul)}
.campo-filtro.ativo::after{border-color:var(--papel)}
.filtro-saida{
  display:flex;align-items:center;gap:14px;margin-left:auto;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.filtro-resultado{color:var(--muted)}
.limpar-filtro{
  font:inherit;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--cobre);text-decoration:underline;text-underline-offset:3px;
}

.lista-artigos{background:var(--papel);color:var(--texto);padding:clamp(46px,5vw,78px) 0}

/* --------------------------------------------------- agrupamento por tema */
.grupo-tema + .grupo-tema{margin-top:clamp(40px,4.6vw,68px)}
.cabeca-tema{
  border-top:1px solid var(--filete);
  padding-top:20px;margin-bottom:24px;
  max-width:62ch;
}
.cabeca-tema h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(20px,2.4vw,27px);line-height:1.16;letter-spacing:-.02em;
  color:var(--texto);margin-bottom:7px;
  /* O h2 tem id e serve de âncora. Sem esta folga a barra de filtros, que é
     sticky e agora tem ~64px, cobre o título de quem chega por /artigos/#aterramento. */
  scroll-margin-top:calc(var(--header-h) + 84px);
}
.cabeca-tema p{font-size:15px;color:var(--aco);line-height:1.6}
.grupo-tema:first-child .cabeca-tema{border-top:0;padding-top:0}
/* Filtrar esconde grupos inteiros, e o primeiro que sobrava herdava o recuo e
   o filete de quem vem no meio da lista: 130px de vao entre a barra e o
   primeiro cartao. O artigos-filtro.js marca quem virou o primeiro da vez;
   sem ele vale o :first-child acima. */
.grupo-tema.primeiro{margin-top:0}
.grupo-tema.primeiro .cabeca-tema{border-top:0;padding-top:0}

.card-artigo .cat .apl{
  color:var(--muted);
  border-left:1px solid var(--filete);
  margin-left:9px;padding-left:9px;
}

.sem-resultado{
  font-size:15px;color:var(--aco);padding:40px 0;text-align:center;
}
.sem-resultado .limpar{
  font:inherit;background:none;border:0;padding:0;cursor:pointer;
  color:var(--cobre);text-decoration:underline;text-underline-offset:3px;
}

@media (max-width:640px){
  /* Lado a lado, os dois campos cortariam o rótulo mais longo ("Vale para
     qualquer edificação"), então empilham. Mesmo empilhada a barra fica em
     127px contra os 435px das fileiras de chip — ainda muito para grudar no
     topo de uma tela de 812px, e por isso aqui ela rola junto. */
  .filtros{position:static;padding:14px 0}
  .barra-filtro{gap:8px}
  .filtro-rotulo{display:none}
  .campo-filtro{flex:1 0 100%}
  .campo-filtro select{padding:11px 34px 11px 15px}
  .filtro-saida{margin-left:0;padding-top:2px}
}
.grade-artigos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(20px,2.4vw,30px);
  align-items:stretch;
}
.card-artigo{
  display:flex;
  flex-direction:column;
  background:var(--branco);
  border:1px solid var(--filete);
  border-radius:var(--r);
  overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
/* [hidden] vem da folha do navegador e perde para qualquer regra de autor:
   sem esta linha o display:flex acima mantinha em tela justamente o artigo
   que o filtro de aplicacao tinha acabado de descartar. */
.card-artigo[hidden]{display:none}
.card-artigo:hover{transform:translateY(-4px);box-shadow:0 22px 48px -22px rgba(10,22,40,.4)}
.card-artigo .capa{aspect-ratio:16/10;overflow:hidden;background:var(--papel-2)}
.card-artigo .capa img{width:100%;height:100%;object-fit:cover}
.card-artigo .corpo{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;gap:10px}
.card-artigo .cat{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cobre);
}
.card-artigo h2{
  font-family:var(--display);font-weight:700;font-size:19px;line-height:1.24;
  letter-spacing:-.015em;color:var(--texto);
}
.card-artigo p{font-size:14.5px;color:var(--aco);line-height:1.62;flex:1}
.card-artigo .rodape-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--filete);padding-top:14px;margin-top:4px;
}
.card-artigo .rodape-card .ler{color:var(--cobre);font-weight:500}

/* ==========================================================================
   Cabeçalho do artigo
   ========================================================================== */
.art-hero{
  background:linear-gradient(160deg,var(--azul-profundo),var(--azul) 70%);
  padding:calc(var(--header-h) + 62px) 0 52px;
}
.art-hero h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(27px,3.9vw,44px);
  line-height:1.07;
  letter-spacing:-.028em;
  text-wrap:balance;
  margin:20px 0 20px;
  max-width:22ch;
}
.art-meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(246,244,238,.56);
}
.art-meta span{display:flex;align-items:center;gap:7px}
.art-meta svg{width:14px;height:14px;color:var(--amarelo);flex:none}

/* Capa. Foto de acervo próprio: as verticais recebem .retrato para não
   perderem o assunto no corte de uma faixa 1200x630. */
.art-capa{background:var(--azul);padding-bottom:clamp(40px,5vw,64px)}
.art-capa .moldura{
  border-radius:var(--r);overflow:hidden;max-width:920px;margin:0 auto;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.5);
}
/* height:auto e obrigatorio: os atributos width/height do <img> viram altura
   fixa em px e anulam o aspect-ratio, e a capa renderiza deitada de pe (660x1200
   no retrato) em vez de respeitar a moldura. */
.art-capa img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center}
.art-capa.retrato .moldura{max-width:660px}
.art-capa.retrato img{aspect-ratio:4/3}
/* Vertical: foto em pe mostrada inteira, sem corte. A largura curta segura a
   altura (440px de largura dao 587px de foto) e a legenda acompanha a moldura,
   senao fica alinhada a uma caixa de 920px e parece deslocada. */
.art-capa.vertical .moldura{max-width:440px}
.art-capa.vertical img{aspect-ratio:3/4}
.art-capa.vertical figcaption{max-width:440px;text-align:center;line-height:1.7}
.art-capa figcaption{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(246,244,238,.42);text-align:right;max-width:920px;margin:11px auto 0;
}

/* ==========================================================================
   Corpo do artigo
   ========================================================================== */
.artigo{background:var(--papel);color:var(--texto);padding:clamp(46px,5vw,72px) 0 clamp(40px,4vw,56px)}
.wrap-texto{width:100%;max-width:var(--max-texto);margin:0 auto;padding:0 var(--gut)}

.voltar{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cobre);margin-bottom:26px;
}
.voltar:hover{color:var(--azul)}
.voltar svg{width:14px;height:14px}

.artigo p{margin-bottom:1.35em;font-size:16.5px;line-height:1.72;color:#2b3242}
.artigo p.abre{font-size:18.5px;line-height:1.62;color:var(--texto)}
.artigo h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(21px,2.5vw,29px);line-height:1.14;letter-spacing:-.02em;
  margin:2em 0 .75em;padding-top:.85em;position:relative;
}
.artigo h2::before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;background:var(--amarelo);border-radius:2px}
.artigo h3{
  font-family:var(--display);font-weight:700;font-size:17.5px;line-height:1.28;
  letter-spacing:-.012em;margin:1.7em 0 .55em;color:var(--aco);
}
.artigo a{color:var(--cobre);border-bottom:1px solid rgba(184,115,51,.42);transition:color .2s,border-color .2s}
.artigo a:hover{color:var(--azul);border-color:var(--azul)}
.artigo ul{margin:0 0 1.5em 1.15em}
.artigo ul li{margin-bottom:.55em;font-size:16px;line-height:1.68;color:#2b3242}
.artigo ul li::marker{color:var(--amarelo)}
.artigo strong{color:var(--texto);font-weight:600}

/* Figura dentro do texto */
.art-img{margin:2em 0}
.art-img .moldura{border-radius:var(--r);overflow:hidden;border:1px solid var(--filete);box-shadow:0 18px 44px -20px rgba(10,22,40,.35)}
.art-img img{width:100%}
.art-img figcaption{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-top:10px;line-height:1.65;
}
.art-img.dupla{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.art-img.dupla figure{margin:0}
.art-img.dupla .moldura{aspect-ratio:1/1}
.art-img.dupla img{height:100%;object-fit:cover}
@media(max-width:640px){.art-img.dupla{grid-template-columns:1fr}}

/* Nota normativa: o quadro que sustenta a autoridade da página. */
.nota-norma{
  background:var(--papel-2);border-left:3px solid var(--cobre);border-radius:0 var(--r) var(--r) 0;
  padding:22px 26px;margin:1.9em 0;
}
.nota-norma p:last-child{margin-bottom:0}
.nota-norma .rot{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cobre);margin-bottom:9px;
}
.nota-norma p{font-size:15.5px;color:#333b4c}

/* FAQ */
.faq-bloco{margin:1.2em 0 2em;display:grid;gap:14px}
.faq-item{background:var(--branco);border:1px solid var(--filete);border-radius:var(--r);padding:22px 26px}
.faq-item p{margin:0}
.faq-item .pergunta{
  font-family:var(--display);font-weight:700;font-size:16.5px;line-height:1.32;
  color:var(--texto);margin-bottom:9px;display:flex;gap:10px;
}
.faq-item .pergunta::before{
  content:"?";flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--amarelo);color:var(--azul);font-size:12.5px;font-weight:800;
  display:grid;place-items:center;margin-top:2px;font-family:var(--display);
}
.faq-item .resposta{font-size:15.5px;color:#4c5568;line-height:1.68}

/* CTA de fim de artigo */
.cta-fim{
  background:linear-gradient(120deg,var(--azul-3),var(--azul));
  color:var(--papel);border-radius:var(--r);padding:clamp(30px,3.6vw,44px);margin:2.6em 0 0;
}
.cta-fim h2{font-size:clamp(19px,2.3vw,26px);font-weight:700;margin:13px 0 12px;padding-top:0;color:var(--papel)}
.cta-fim h2::before{display:none}
.cta-fim p{color:rgba(246,244,238,.8);margin-bottom:1.15em;font-size:15.5px}
.cta-fim ul{list-style:none;margin:0 0 26px;display:grid;gap:11px}
.cta-fim ul li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:rgba(246,244,238,.85)}
.cta-fim ul li::marker{content:""}
.cta-fim ul li svg{width:18px;height:18px;flex:none;color:var(--amarelo);margin-top:3px}
.cta-fim .ctas{display:flex;gap:13px;flex-wrap:wrap}

/* Assinatura técnica */
.assinatura{border-top:1px solid var(--filete);margin-top:2.6em;padding-top:1.6em}
.assinatura p{font-size:13.5px;color:var(--muted);line-height:1.7;margin-bottom:.8em}
.assinatura p:last-child{margin-bottom:0}

/* Leia também */
.leia-tambem{background:var(--papel-2);color:var(--texto);padding:clamp(40px,4.4vw,66px) 0}
.leia-tambem .rotulo{color:var(--cobre)}
.leia-tambem h2{
  font-family:var(--display);font-weight:800;font-size:clamp(22px,2.7vw,32px);
  letter-spacing:-.025em;text-transform:uppercase;margin:14px 0 26px;
}

/* Item de navegação da seção corrente */
.nav-links a.ativo{color:var(--amarelo)}

/* ==========================================================================
   Trilha de navegação
   Fica entre o header fixo e o hero da página, e por isso carrega o
   afastamento do header: as duas seções que vêm depois dela (.art-hero no
   artigo, .capa-secao no índice) têm o padding-top devolvido ao normal pelo
   seletor irmão, senão o espaço apareceria duas vezes.

   O fundo é o azul-profundo sólido, que é exatamente onde o gradiente das
   duas seções começa — a emenda não aparece.
   ========================================================================== */
.trilha{
  background:var(--azul-profundo);
  padding:calc(var(--header-h) + 22px) 0 0;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.01em;
}
.trilha .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.trilha a{
  color:var(--texto-inv);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.trilha a:hover,
.trilha a:focus-visible{color:var(--amarelo);border-bottom-color:var(--amarelo)}
.trilha .sep{color:var(--muted)}
.trilha [aria-current="page"]{
  color:var(--muted);
  /* Título de artigo é longo demais para a trilha em telas estreitas. */
  max-width:min(52ch,100%);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.trilha + .art-hero,
.trilha + .capa-secao{padding-top:28px}

@media (max-width:600px){
  .trilha{font-size:12px;padding-top:calc(var(--header-h) + 16px)}
  .trilha [aria-current="page"]{max-width:100%}
}