/* ==========================================================================
   RODAPÉ — quatro colunas, texto legal e barra final
   Prefixo: foot-
   Tokens usados: --dark --fg-muted --rule --rule-2 --accent --display
   ========================================================================== */

.foot{background:var(--dark);border-top:1px solid var(--rule)}
.foot-body{padding-block:clamp(44px,7vh,68px) clamp(24px,4vh,32px)}

/* A coluna da marca é mais larga que as outras três — ela carrega logo,
   descrição e social; as demais carregam listas curtas. */
.foot-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;
  padding-bottom:32px;border-bottom:1px solid var(--rule);
}

.foot-logo{line-height:0;display:block}
.foot-logo img{height:20px;width:auto;display:block}
.foot-brand p{font-size:13px;color:var(--fg-muted);margin-top:14px;line-height:1.75;max-width:28ch}

.foot-col b{
  display:block;font-family:var(--display);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
/* line-height 1.95 e não 1.6: aqui cada linha é alvo de clique, e o
   espaçamento é o que separa um alvo do outro no toque. */
.foot-col a,.foot-col span{
  display:block;font-size:12.5px;line-height:1.95;color:var(--fg-muted);transition:color .2s;
}
.foot-col a:hover{color:var(--accent)}

.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{
  width:30px;height:30px;border:1px solid var(--rule-2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--fg-muted);font-size:10px;letter-spacing:.06em;transition:.25s;
}
.foot-social a:hover{border-color:var(--accent);color:var(--accent)}

.foot-legal{padding-top:24px;font-size:11.5px;line-height:1.8;color:var(--fg-muted);max-width:100ch;opacity:.8}

.foot-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding-top:20px;font-size:11.5px;color:var(--fg-muted);opacity:.8;
}

@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;row-gap:28px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}