/* =============================================================
   RODAPÉ — colunas, minimapa, crédito e botão flutuante
   ============================================================= */

.footer {
  position: relative;
  background: var(--c-navy); color: #B7D6EC;
  padding-block: clamp(3rem,6vw,4.5rem) 2rem;
}
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1.1rem; letter-spacing: .02em; }
.footer a { color: #B7D6EC; display: inline-block; padding: .2rem 0; transition: color var(--t-fast); }
.footer a:hover { color: #fff; }

.footer__brand img { height: 66px; margin-bottom: 1rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
/* Sem isto o <p> herda o --muted (cinza-azulado de card claro) e fica
   ilegível no navy do rodapé. */
.footer__brand p { color: #B7D6EC; }

.footer__contact li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .7rem; font-size: .96rem; }
.footer__contact svg { width: 20px; height: 20px; color: var(--c-blue-300); flex: 0 0 auto; margin-top: 2px; }

/* ---------- Minimapa ----------
   Mesmo embed da página Contato, só que menor.
   ARMADILHA: já tentei embrulhar o <iframe> num <a> pra "clicar e abrir a
   rota" — <iframe> dentro de <a> é HTML inválido e o mapa simplesmente não
   carrega (fica um retângulo vazio). O próprio embed já traz os botões de
   abrir/traçar rota, então deixamos ele interativo e sem embrulho. */
.footer__map {
  position: relative; height: 172px; margin-top: 1.1rem;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.30);
  background: #cfe6f5;
}
.footer__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: .86rem; color: #8FB6D4;
}

/* ---------- Crédito do desenvolvedor ----------
   Brilho suave que atravessa o texto de tempos em tempos + sublinhado
   que cresce no hover. De propósito discreto: é assinatura, não anúncio. */
.footer__credit { display: inline-flex; align-items: center; gap: .35rem; color: #8FB6D4; }
.exycode { position: relative; font-family: 'Outfit', sans-serif; font-weight: 700; letter-spacing: .01em; line-height: 1.35; padding: 0 .05rem; }
.exycode__text {
  background: linear-gradient(100deg, #2E9BD6 0%, #41B6E6 30%, #EAF6FE 50%, #41B6E6 70%, #2E9BD6 100%);
  background-size: 220% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: exyShine 5s linear infinite;
}
@keyframes exyShine { to { background-position: -120% 0; } }
.exycode::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #41B6E6, #7FD0F0);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.exycode:hover::after, .exycode:focus-visible::after { transform: scaleX(1); }
.exycode:hover .exycode__text, .exycode:focus-visible .exycode__text {
  animation-duration: 1.6s; filter: drop-shadow(0 0 8px rgba(127,208,240,.55));
}
@media (prefers-reduced-motion: reduce) {
  .exycode__text { animation: none !important; background-position: 50% 0 !important; }
}

/* ---------- Botão flutuante do WhatsApp ----------
   Aqui o verde fica: é o código visual que todo mundo reconhece. */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(37,211,102,.45);
  animation: pulse 2.6s infinite;
  transition: transform var(--t-fast);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 32px; height: 32px; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0    rgba(37,211,102,.5); }
  70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0    rgba(37,211,102,0); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
}