/* Rodapé igual ao da Amia Interactive.
   Refeito na marcação limpa deste site, e não copiado do Framer: lá as classes
   dependem da folha gerada, o logotipo vem de um sprite SVG que não existe aqui,
   e os blocos nascem com opacity:0 esperando o JS de animação. Copiar o HTML
   traria um rodapé invisível. A geometria abaixo é a medida do original:
   padding 80/64/64, quatro colunas de 220px, 400px entre o topo e o rodapé,
   80px entre o logotipo e a linha final, e 40px acima do filete. */
.ai-footer{
  background:linear-gradient(180deg,rgb(41,40,40) 0%,rgb(71,69,68) 72.17%,rgb(120,112,104) 100%);
  color:#fff;
  display:flex;flex-direction:column;align-items:center;
  gap:400px;
  padding:80px 64px 64px;
  max-width:1920px;margin-inline:auto;
  overflow:hidden;
}
.ai-footer a{color:inherit;text-decoration:none}

.ai-top{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:flex-start;width:100%}
.ai-claim{font-size:clamp(28px,3vw,44px);line-height:1.18;letter-spacing:-.03em;margin:0;max-width:11em}

.ai-links{display:flex;flex-flow:row wrap;align-items:flex-start;gap:0}
.ai-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:220px}
.ai-col>span{opacity:.4;font-size:15px;line-height:1.5}
.ai-col>a{font-size:15px;line-height:1.5;padding-block:2px;transition:opacity .2s var(--ease)}
.ai-col>a:hover{opacity:.6}

.ai-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:80px;width:100%}
.ai-wordmark{display:block;width:100%;max-width:1000px;height:auto}
.ai-line{display:flex;justify-content:space-between;align-items:center;width:100%;
  padding-top:40px;border-top:1px solid rgba(255,255,255,.15)}
.ai-line>p{margin:0;opacity:.4;font-size:15px;line-height:1.5}

@media(max-width:1100px){
  .ai-footer{gap:200px;padding:64px 40px 48px}
  .ai-links{gap:32px 0}
  .ai-col{width:200px}
}
@media(max-width:860px){
  .ai-footer{gap:120px;padding:56px 24px 40px}
  .ai-top{flex-direction:column;gap:56px}
  .ai-claim{max-width:none}
  .ai-col{width:50%}
  .ai-bottom{gap:48px}
}
@media(max-width:520px){
  .ai-footer{gap:80px;padding:48px 20px 32px}
  .ai-col{width:100%}
  .ai-links{gap:36px 0}
}

/* O original tem 1920px de largura, então a frase e as quatro colunas convivem
   numa linha só. Em telas menores elas quebravam e a frase colava nos títulos
   das colunas. As colunas encolhem um pouco e a frase ganha um teto, para a
   linha única sobreviver até 1200px, e a quebra ganha respiro quando acontece. */
.ai-top{gap:56px 40px}
.ai-claim{max-width:min(430px,40%)}
@media(max-width:1500px){.ai-col{width:190px}}
@media(max-width:1200px){.ai-claim{max-width:none;flex:1 1 100%}}