/* ==========================================================================
   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);
}

.lista-artigos{background:var(--papel);color:var(--texto);padding:clamp(46px,5vw,78px) 0}
.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);
}
.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);
}
.art-capa img{width:100%;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}
.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)}