/* ═══════════════════════════════════════════════════════════════
 * COMPONENT — Rodapé do site
 *
 * Usado em: landing, /recursos, /planos e 404 — o markup é injetado por
 * assets/js/modules/footer-html.js.
 *
 * ⚠️ POR QUE COMPONENTE: o rodapé vivia COPIADO em 3 páginas (landing,
 * /recursos, /planos) e a 404 tinha um QUARTO, completamente diferente — uma
 * linha de copyright. Pedido do dono: "esse rodapé deve ser fixo em todos os
 * sites até mesmo nas páginas de erro 404". Com o markup e o estilo no
 * componente, página nova nasce com ele e nenhuma pode divergir.
 *
 * Depende dos tokens da página (--soft, --tx2, --tx3, --b1, --or). Toda página
 * do site define os mesmos.
 * ═══════════════════════════════════════════════════════════════ */

footer {
  border-top: none;
  padding: 52px 0 26px;
  background: var(--soft, #f6f7fb);
  position: relative;
  /* ⚠️ z-index 0, NÃO 2: a `.finalcta` (o box do teste grátis, que entra por
     cima do rodapé) é `z-index:1` — com o rodapé em 2 ele pintava POR CIMA e
     CORTAVA o box no meio, deixando um vão enorme no lugar. O 0 mantém o
     rodapé acima do `body::before` da 404 (que é `z-index:0` mas vem antes no
     DOM) e abaixo do box. */
  z-index: 0;
}
/* ⚠️ Nas páginas que têm o box do "teste grátis" (landing, /recursos,
   /planos) o rodapé SOBE por trás dele — o box fica metade fora, metade
   dentro. A regra é escopada no IRMÃO ANTERIOR, então a 404 (que não tem o
   box) não herda o recuo e o rodapé dela assenta normal. */
.finalcta + footer { padding-top: calc(52px + 190px); margin-top: -190px; }

/* ⚠️ o `.wrap` vem do CSS de cada página — MENOS na 404, que não tem esse
   utilitário e deixava o rodapé colado na borda esquerda. Escopado em
   `footer .wrap` os mesmos valores valem em todas, sem tocar no resto. */
footer .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px; }
/* ⚠️ idem pro sublinhado: a 404 não zera `text-decoration` em `a`. */
footer a { text-decoration: none; }

.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.foot-brand .logo { margin-bottom: 14px; display: inline-flex; }
.foot-brand .logo img { height: 30px; }
.foot-brand p { color: var(--tx3); font-size: .86rem; line-height: 1.65; max-width: 250px; }
.foot-col h5 {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tx3); margin-bottom: 14px;
}
.foot-col a { display: block; color: var(--tx2); font-size: .88rem; padding: 6px 0; transition: .2s; }
.foot-col a:hover { color: var(--or); }
.foot-bottom {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--b1);
  text-align: center; color: var(--tx3); font-size: .8rem;
}

/* ── redes sociais (abaixo da descrição da marca) ── */
.foot-social { display: flex; gap: 10px; margin-top: 16px; }
.foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid var(--b1); color: var(--tx2);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: color .2s, border-color .2s, transform .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.foot-social a svg { width: 18px; height: 18px; display: block; }
.foot-social a:hover, .foot-social a:focus-visible {
  color: var(--or); border-color: var(--or);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(16,24,40,.10);
}

/* ⚠️ 2 COLUNAS no celular (com a marca ocupando a linha inteira) — é o que a
   landing sempre fez. Empilhar tudo em 1 coluna, como cheguei a fazer, deixa
   o rodapé com o dobro da altura e obriga a rolar pra ver "Suporte". */
@media (max-width: 780px) {
  .foot { grid-template-columns: 1fr 1fr; gap: 26px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .foot-social a { transition: none; } }