/* ==================================================================
   RELACIONADAS E FONTES  (widget fp-relacionadas)

   Copiado do lab (lab/desenvolvimento/secoes/rodape/rodape.css), que fica congelado como
   referencia aprovada (2026-09-27). A partir daqui, este arquivo e o que
   vale. Cores pelas variaveis do tema da secao (--bg, --fg...): o controle
   "Fundo" do widget troca papel e navy.
   ================================================================== */

.rodape{
  position:relative;
  background:var(--bg);
  color:var(--fg);
  padding-block:clamp(4.5rem,11vh,7.5rem);
}

.rodape__caixa{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  column-gap:clamp(3rem,6vw,8rem);
}

.rodape__rotulo{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--t-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--fg-3);
}

.rodape__rel{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--gutter);
  margin-top:clamp(1.25rem,3vh,2rem);
}
.rodape__pagina{
  display:inline-flex;
  align-items:baseline;
  gap:.45em;
  padding-block:.4em;
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--t-md);
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--fg);
  transition:color .3s;
}
.rodape__seta{
  flex:none;
  width:auto;
  height:.62em;
  color:var(--accent);
  transition:transform .45s var(--ease-out);
}
.rodape__pagina:hover .rodape__seta,.rodape__pagina:focus-visible .rodape__seta{transform:translateX(.25em)}

.rodape__fontes{
  display:grid;
  gap:.75em;
  margin-top:clamp(1.25rem,3vh,2rem);
  font-size:var(--t-body);
  line-height:1.5;
  color:var(--fg-2);
}

@media (max-width:1099.98px){
  .rodape{padding-block:clamp(3.5rem,12vw,5rem)}
  .rodape__caixa{grid-template-columns:minmax(0,1fr);row-gap:clamp(2.5rem,10vw,3.5rem)}
  .rodape__rel{grid-template-columns:minmax(0,1fr)}
}