/* ============================================================
   FOOTER — escuro, redes no topo, nome gigante cortado na base
   ============================================================ */
.site-footer{
  background:var(--ink);color:var(--paper);
  padding-top:clamp(48px,7vw,96px);overflow:hidden;
}

/* Redes / contato */
.footer__social{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px)}
.footer__social a{
  font-family:var(--font-mono);font-weight:700;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);
  transition:color .25s;
}
@media(hover:hover) and (pointer:fine){.footer__social a:hover{color:#fff}}

/* Localização */
.footer__location{
  margin-top:clamp(48px,8vw,110px);
  font-family:var(--font-mono);font-weight:700;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.35);
}

/* Barra: copyright + links legais */
.footer__bar{
  margin-top:clamp(56px,9vw,130px);
  display:flex;flex-wrap:wrap;gap:16px 48px;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-weight:700;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);
}
.footer__legal{display:flex;flex-wrap:wrap;gap:16px 40px}
.footer__legal a{transition:color .25s}
@media(hover:hover) and (pointer:fine){.footer__legal a:hover{color:var(--green-live)}}

/* Nome gigante rolando, cortado na base (translateY empurra além da borda;
   o overflow:hidden do footer faz o corte) */
.footer__brand{margin-top:clamp(40px,6vw,80px);white-space:nowrap;overflow:hidden;transform:translateY(14%)}
.footer__brandtrack{
  display:inline-flex;will-change:transform;
  animation:footerbrand 50s linear infinite;
  transform-origin:left bottom;
}
/* condensada 800, igual ao letreiro do meio da página: as duas pontas
    assinam com a mesma letra */
.footer__brandtrack span{
  font-family:var(--font-display);font-stretch:78%;font-weight:800;text-transform:uppercase;
  font-size:clamp(4rem,13vw,15rem);line-height:.78;letter-spacing:-.03em;color:#fff;
}
@keyframes footerbrand{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* —— Mobile: ritmo vertical mais curto e blocos bem separados —— */
@media(max-width:640px){
  .site-footer{padding-top:40px}
  .footer__social{gap:18px 28px}
  .footer__location{margin-top:36px}
  .footer__bar{margin-top:44px;flex-direction:column;align-items:flex-start;gap:20px}
  .footer__bar>span{color:rgba(255,255,255,.45)}   /* copyright recua, links legais ganham foco */
  .footer__legal{gap:8px 28px}
  .footer__brand{margin-top:32px}
}

/* ---------- o contato virou par rótulo + valor (11/09/2026) ----------
   "INSTAGRAM · E-MAIL · WHATSAPP" eram três rótulos sem o dado: quem
   chegou ao pé da página querendo falar tinha que clicar para descobrir
   o número. Agora cada um mostra o valor por baixo do rótulo, com o
   filete de link, e os vãos de meia tela entre as linhas encolheram para
   o rodapé caber numa dobra. Vale nas duas páginas. */
.footer__social{gap:clamp(20px,3vw,48px) clamp(28px,5vw,72px)}
.footer__social a{display:grid;gap:7px;color:#fff}
.footer__k{
  font-family:var(--font-mono);font-weight:700;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.footer__v{
  font-family:var(--font-body);font-weight:600;font-size:clamp(15px,1.3vw,18px);
  letter-spacing:0;text-transform:none;color:#fff;
  width:fit-content;border-bottom:1.5px solid rgba(255,255,255,.28);padding-bottom:3px;
  transition:border-color .25s,color .25s;
}
@media(hover:hover) and (pointer:fine){
  .footer__social a:hover .footer__v{border-color:var(--green-live);color:var(--green-live)}
}
.footer__location{margin-top:clamp(28px,4vw,48px);color:rgba(255,255,255,.55)}
.footer__bar{margin-top:clamp(28px,4vw,48px)}
.footer__brand{margin-top:clamp(28px,4vw,56px)}
@media(max-width:640px){
  .footer__social{gap:22px 28px}
  .footer__location{margin-top:30px}
  .footer__bar{margin-top:30px}
  .footer__brand{margin-top:26px}
}