/* ==========================================================================
   Harbor — Rodapé (Figma 21066:1011)
   Canvas de referência: 1440 x 351 · grade de 4 colunas + barra inferior.
   O botão do WhatsApp sai do rodapé e vira flutuante (fixo na viewport).
   ========================================================================== */

.site-footer {
  background: var(--color-primary-700);
  padding-block: var(--space-10);
  color: var(--color-gray-400);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12) var(--space-8);
}

.site-footer__heading {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-h4);
  line-height: 1.3;
  color: var(--color-gray-50);
}

/* --------------------------------------------------------------------------
   Coluna 1 — identidade
   -------------------------------------------------------------------------- */
.site-footer__logo img {
  width: 120px;
  height: 152px;
}

.site-footer__tagline {
  margin-top: var(--space-3);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-gray-400);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.site-footer__social a:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.site-footer__social img {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   Colunas 2 e 3 — links e contato
   -------------------------------------------------------------------------- */
.site-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.site-footer__nav a {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-gray-400);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__nav a:hover {
  color: var(--color-gray-50);
}

/* align-items: flex-start para os links terem a largura do próprio texto —
   esticados, a área clicável cobriria a coluna inteira. */
.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-gray-400);
}

.site-footer__contact a:hover {
  color: var(--color-gray-50);
}

/* --------------------------------------------------------------------------
   Barra inferior
   -------------------------------------------------------------------------- */
.site-footer__bottom {
  margin-top: var(--space-12);
  padding-top: 25px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.site-footer__copyright {
  font-size: var(--text-xs);
  line-height: 1.4;
  /* O Figma usa #667085 aqui, que sobre o azul do rodapé dá ~2,2:1 de
     contraste. Um tom acima passa em AA. */
  color: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   Botão flutuante do WhatsApp
   No Figma ele fica na barra do rodapé; aqui acompanha a rolagem.
   -------------------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: var(--z-dropdown);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-brand-teal);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-normal) var(--ease-out-expo);
}

.whatsapp-fab:hover {
  background: var(--color-auxiliary-strong);
  transform: translateY(-2px);
}

.whatsapp-fab img {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .site-footer__bottom {
    margin-top: var(--space-8);
  }

  /* Só o ícone: o rótulo ocuparia meia tela. */
  .whatsapp-fab {
    gap: 0;
    padding: var(--space-4);
  }

  .whatsapp-fab span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .whatsapp-fab img {
    width: 22px;
    height: 22px;
  }
}