/* ===========================================================
   RODAPÉ GIGANTE
   Topo: tagline + links rápidos + contato.
   Base: o nome em tamanho gigante, como marca d'água.
   =========================================================== */
.footer{
  position:relative;
  overflow:hidden;                 /* recorta o wordmark que sangra */
  background:var(--black-deep);
  border-top:1px solid var(--cream-10);
  padding:clamp(64px,9vw,110px) 20px 0;
}

.footer__inner{
  max-width:1240px;
  margin-inline:auto;
}

/* ---------- topo ---------- */
.footer__top{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(40px,5vw,64px);
  padding-bottom:clamp(48px,7vw,90px);
}

.footer__tagline{
  /* 3.3vw em vez de 4.4vw: com a coluna do tagline estreitando junto com a
     tela, o coeficiente antigo mantinha a fonte grande demais e a frase
     caía pra três e quatro linhas entre 820 e 1100. Varri de 820 a 1600
     e nesse coeficiente ela fecha em duas linhas na faixa inteira. */
  font-size:clamp(28px,3.3vw,60px);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:.98;
  color:var(--cream);
  /* balance reparte as palavras entre as linhas em vez de encher cada uma
     até estourar. Sem isso a frase caía em cinco linhas com "óbvias."
     sozinha na última, e a segunda quase o dobro da primeira. */
  text-wrap:balance;
}

.footer__label{
  display:block;
  font-size:13px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--red-edge);
  margin-bottom:20px;
}

/* links rápidos como chips */
.footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.footer__links a{
  font-size:14px;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--cream);
  text-decoration:none;
  padding:9px 16px;
  border:1px solid var(--cream-10);
  border-radius:999px;
  background:var(--surface-1);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.footer__links a:hover{border-color:var(--red-edge);background:var(--surface-2);}
.footer__links a:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

.footer__email{
  font-size:clamp(16px,1.6vw,20px);
  font-weight:400;
  letter-spacing:-0.02em;
  color:var(--cream);
  text-decoration:none;
  border-bottom:1px solid var(--cream-30);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.footer__email:hover{color:var(--red-edge);border-color:var(--red-edge);}
.footer__email:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

/* ---------- wordmark gigante ---------- */
.footer__wordmark{
  font-size:26vw;                  /* 4 letras enchem a largura */
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:.72;
  text-align:center;
  color:rgba(250,247,243,.05);     /* marca d'água: bem apagado sobre o preto */
  user-select:none;
  margin-bottom:-0.12em;           /* deixa a base sangrar pra fora, como na ref */
  white-space:nowrap;
}

@media (min-width:820px){
  .footer{padding-inline:5vw;}
  .footer__top{
    /* 1.85 e não 2: em 2fr o tagline fecha em duas linhas, mas a coluna dos
       links aperta e os chips caem pra três fileiras. Aqui os dois cabem. */
    grid-template-columns:1.85fr 1fr 1fr;
    align-items:start;
  }
}