/* ==========================================================================
   STHEFANY — rodapé
   rodape.css · v0.3.0
   --------------------------------------------------------------------------
   Bloco escuro que fecha a página, com a mesma linguagem do hero: recuo,
   arredondamento e a assinatura como marca.

   A chamada de contratação vem no topo do rodapé porque é aqui que termina
   quem leu tudo. Abaixo dela, os dados que alguém procura no fim de um site:
   como falar, o que existe, onde a agência está nas redes.
   ========================================================================== */

/* Sem margem própria no topo: a seção anterior já tem `--sp-secao` de padding
   embaixo, e padding com margem não se fundem — os dois somados davam quase
   18 rem de branco antes do rodapé. */
.sp-rodape {
  padding-block: var(--sp-e-9);
}

/* --- chamada --------------------------------------------------------------- */

.sp-rodape__chamada {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-e-6) var(--sp-e-8);
  align-items: end;
  padding-block-end: var(--sp-e-8);
  border-block-end: 1px solid var(--sp-linha);
}

.sp-rodape__titulo {
  max-width: 16ch;
}

.sp-rodape__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-3);
  justify-self: end;
}

/* --- colunas ---------------------------------------------------------------- */

.sp-rodape__colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-e-7);
  padding-block: var(--sp-e-8);
}

.sp-rodape__rotulo {
  margin-block-end: var(--sp-e-4);
  font-size: var(--sp-t-mini);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sp-texto-3);
}

.sp-rodape__lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-rodape__link {
  color: var(--sp-texto-2);
  transition: color var(--sp-transicao);
}
.sp-rodape__link:hover { color: var(--sp-texto); }

/* `min-width: 0` e quebra em qualquer ponto: sem os dois, o e-mail longo não
   cabe na coluna, não quebra, e vaza por cima da coluna vizinha.

   `anywhere` é o último recurso e quebra feio — deixa um `r` sozinho na
   linha de baixo. O ponto de quebra bom vem do `<wbr>` depois do `@`, no
   HTML: com ele o navegador quebra ali antes de tentar qualquer outro lugar. */
.sp-rodape__dado {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-e-3);
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--sp-texto-2);
  transition: color var(--sp-transicao);
}
.sp-rodape__dado:hover { color: var(--sp-texto); }
.sp-rodape__dado i {
  flex: 0 0 auto;
  color: var(--sp-acento-texto);
  font-size: 1.125rem;
  line-height: 1.5;
}

.sp-rodape__redes { display: flex; flex-wrap: wrap; gap: var(--sp-e-4); }

.sp-rodape__rede {
  color: var(--sp-texto-2);
  font-size: 1.5rem;
  line-height: 0;
  transition: color var(--sp-transicao);
}
.sp-rodape__rede:hover { color: var(--sp-acento-texto); }

/* --- base -------------------------------------------------------------------- */

.sp-rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-e-5);
  padding-block-start: var(--sp-e-6);
  border-block-start: 1px solid var(--sp-linha);
}

.sp-rodape__marca { color: var(--sp-texto); line-height: 0; }
.sp-rodape__marca svg { height: 2.75rem; width: auto; }

.sp-rodape__miudo {
  color: var(--sp-texto-3);
  font-size: var(--sp-t-mini);
}

.sp-rodape__assina {
  color: var(--sp-texto-3);
  font-size: var(--sp-t-mini);
  transition: color var(--sp-transicao);
}
.sp-rodape__assina:hover { color: var(--sp-texto-2); }

@media (max-width: 64rem) {
  .sp-rodape__chamada { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sp-rodape__acoes { justify-self: start; }
}

@media (max-width: 48rem) {
  .sp-rodape { padding-block: var(--sp-e-8); }
  .sp-rodape__colunas { gap: var(--sp-e-6); }
  .sp-rodape__acoes .sp-botao { flex: 1 1 auto; justify-content: center; }
  .sp-rodape__base { flex-direction: column; align-items: flex-start; }
}