/* ==========================================================================
   footer.css — design.md §8 (preto/creme, filete 3px no topo), §12/§13 grade
   ========================================================================== */

.rodape {
  /* topo com padding 0: o filete encosta na borda superior do rodapé,
     como manda design.md §8. O respiro até o conteúdo vem da margem do
     próprio filete, senão a linha fica colada no logo e nos títulos. */
  padding-block: 0 var(--sp-6);
  background: var(--preto);
}

.rodape__filete {
  height: 3px;
  background: var(--filete-gradiente);
  margin-bottom: var(--sp-9);
}

.rodape__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .rodape__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }

  .rodape__logo {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .rodape__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .rodape__logo {
    grid-column: auto;
  }
}

.rodape__logo svg {
  width: 132px;
  height: auto;
}

.rodape__titulo {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cor-olho);
}

.rodape__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--creme-secundario);
}

.rodape__coluna a {
  transition: color var(--dur-padrao) ease-out;
}

.rodape__coluna a:hover,
.rodape__coluna a:focus-visible {
  color: var(--creme);
}

.rodape__coluna .link-instagram {
  align-self: flex-start;
  color: var(--creme);
}

.rodape__copyright p {
  max-width: none;
}

.rodape__copyright {
  margin-top: var(--sp-9);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--linha-escura);
  font-size: var(--fs-caption);
  color: var(--creme-secundario);
}