/* Rodapé — sem fundo sólido próprio: nessa altura o degradê do body já
   clareou totalmente, então o rodapé fica direto sobre essa cor clara,
   com texto e ícones escuros (mesma lógica do bloco "Como trabalho" em
   diante). */
.rodape {
  color: var(--cor-texto-sobre-claro);
  padding-block: var(--space-6);
  margin-top: var(--space-7);
}

.rodape__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.rodape__endereco {
  font-size: var(--tam-corpo);
  line-height: 1.6;
}

.rodape__endereco strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--tam-h2);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.rodape__contato {
  display: flex;
  gap: var(--space-3);
}

.rodape__contato a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--altura-toque-minima);
  height: var(--altura-toque-minima);
  border: 1.5px solid var(--cor-texto-sobre-claro);
  border-radius: var(--raio-medio);
  color: inherit;
  transition: background-color .15s ease, color .15s ease;
}

.rodape__contato a:hover {
  background: var(--cor-texto-sobre-claro);
  color: var(--cor-marca-clara);
}

/* Ícones inline (não <img>) pra herdar a cor via currentColor — assim
   funcionam tanto aqui (escuro sobre claro) quanto em qualquer outro
   lugar que precise da cor oposta, sem precisar de um arquivo .svg por
   variação de cor (cada forma usa currentColor no próprio atributo
   fill/stroke, ver marcação no HTML). */
.rodape__contato svg {
  width: 22px;
  height: 22px;
}

.rodape__logo img {
  height: 56px;
  width: auto;
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--cor-borda-sobre-claro);
}

.rodape__creditos {
  font-size: var(--tam-legenda);
  opacity: .75;
}

.rodape__link {
  font-size: var(--tam-legenda);
  opacity: .75;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rodape__link:hover {
  opacity: 1;
}

@media (min-width: 768px) {
  .rodape__conteudo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}