/* ============================================================
   Brandão Torres Construtora — Rodapé
   Ordem de carregamento: 5 de 7 (não altere a ordem dos <link>
   no index.html — a cascata do CSS depende dela).
   ============================================================ */

/* ---------- footer ---------- */
footer {
  padding: 60px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--ink)
}

.foot-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--line)
}

.foot-top img {
  height: 56px;
  width: auto
}

.foot-nav {
  display: flex;
  gap: 28px
}

.foot-nav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut);
  transition: .3s
}

.foot-nav a:hover {
  color: var(--sage)
}

.foot-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--mut);
  text-transform: uppercase;
}

.klyro-link {
  transition: .3s;
  color: var(--mut)
}

.klyro-link:hover {
  color: var(--mist)
}

.klyro {
  color: #7FE8C8;
  font-weight: 600;
  letter-spacing: .12em;
  text-shadow: 0 0 14px rgba(127, 232, 200, .45);
  transition: .3s;
}

.klyro-link:hover .klyro {
  color: #A5F5DC;
  text-shadow: 0 0 20px rgba(127, 232, 200, .75)
}