/* ==========================================================================
   Vazto — o rodapé, uma vez só

   Havia três rodapés: o completo da Home, uma versão reduzida na página do
   Método e uma linha de links nas páginas de produto. Passa a haver um — este
   ficheiro e `assets/js/rodape.js`, carregados por todas as páginas.

   O RODAPÉ É INSTITUCIONAL. Herdava `--cyan` da página onde assentava, e nas
   páginas de produto essa variável é o acento do produto: os títulos das
   colunas saíam âmbar no Search, lima no Flow, lavanda no Customizer. A
   identidade de um produto tem de acabar antes do rodapé — o último bloco da
   página é da Vazto, não do produto que a pessoa acabou de ler.

   O ACENTO E AS DUAS TINTAS SÃO ESCRITOS AQUI, uma vez. `--foot-acc` é o
   ciano institucional. `--foot-tinta` e `--foot-tinta-suave` existem pela
   mesma razão que ele: `metodo-futuro.html` declara `--on-dark` em branco
   puro e `--on-dark-soft` a 82%, e o rodapé dessa página vinha um tom mais
   claro do que o de todas as outras — pouco, mas diferente, e o pedido era
   um rodapé igual em todo o lado, não um parecido.

   `--ink` e `--rule-dark` continuam herdados: medidos página a página, são
   os mesmos em todas.
   ========================================================================== */
.foot{
  position:relative;
  --foot-acc:#07d2d2;
  --foot-tinta:#f1f7f7;
  --foot-tinta-suave:rgba(241,247,247,.72);
  background:var(--ink); color:var(--foot-tinta);
  padding-block:clamp(52px,7vw,84px) 30px;
}
.foot .shell{ margin-inline:auto }

/* Mais ar entre a marca e as colunas: com as bandeiras fora, a coluna da
   esquerda ficou curta e as duas metades desencostaram-se sozinhas. */
.foot__top{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,2fr);
  gap:clamp(32px,6vw,88px);
}
.foot__brand img{ inline-size:170px; block-size:auto }
.foot__brand p{
  margin-block-start:12px; font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--foot-tinta-suave);
}
.foot__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,3vw,40px) }
.foot__cols h3{
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--foot-acc); margin-block-end:16px;
}
.foot__cols a{
  position:relative; display:block; padding-block:7px; font-size:14.5px;
  color:var(--foot-tinta-suave);
  transition:color .2s ease, transform .2s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.foot__cols a:hover{ color:#fff; transform:translateX(2px) }

.foot__bottom{
  margin-block-start:clamp(40px,5vw,60px); padding-block-start:24px;
  border-block-start:1px solid var(--rule-dark, rgba(241,247,247,.12));
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
/* Os ícones são glifos sólidos normalizados, não logótipos: cinco marcas
   coloridas no último bloco da página competiam com a da Vazto. E são
   desenhados à mesma massa óptica — o Instagram e o YouTube têm moldura e
   enchiam a caixa, o LinkedIn e o Facebook são letras e desapareciam. */
.foot__social{ display:flex; gap:6px }
.foot__social a,
.foot__social span{
  display:grid; place-items:center; inline-size:38px; block-size:38px; border-radius:11px;
  color:var(--foot-tinta-suave);
  transition:color .22s ease, background-color .22s ease, transform .22s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.foot__social svg{ inline-size:17px; block-size:17px }
.foot__social a:hover{ color:#03070d; background:var(--foot-acc); transform:translateY(-2px) }
.foot__legal{ font-size:13px; color:rgba(241,247,247,.46) }

@media (max-width:900px){
  .foot__top{ grid-template-columns:minmax(0,1fr) }
  .foot__cols{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

/* --------------------------------------------------------------------------
   No telemóvel

   Empilhado tal como está no desktop, o rodapé virava uma lista de vinte
   linhas com a marca encostada à esquerda e ar a mais entre os grupos — mais
   alto do que qualquer secção da página, e a dizer menos.

   Aqui: marca ao centro, os dois grupos principais em duas colunas, Contato
   à largura toda por baixo, redes e copyright ao centro. Mais compacto sem
   deixar de respirar.

   É o componente global: esta composição vale em todas as páginas do site.
   -------------------------------------------------------------------------- */
@media (max-width:660px){
  .foot{ padding-block:clamp(38px,9vw,52px) 24px }
  .foot__top{ gap:30px; justify-items:center; text-align:center }
  .foot__brand img{ inline-size:150px; margin-inline:auto }
  .foot__brand p{ margin-block-start:10px; font-size:11.5px; letter-spacing:.2em }

  /* Produtos e A Vazto lado a lado; Contato ocupa a linha inteira, porque os
     seus rótulos são frases e numa meia coluna partem-se todos. */
  .foot__cols{
    inline-size:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 18px; text-align:start;
  }
  .foot__cols > *:nth-child(3){ grid-column:1 / -1; text-align:center }
  .foot__cols h3{ margin-block-end:10px; font-size:11px }
  .foot__cols a{ padding-block:6px; font-size:14px }
  .foot__cols a:hover{ transform:none }

  .foot__bottom{
    margin-block-start:30px; padding-block-start:20px;
    flex-direction:column; justify-content:center; gap:16px; text-align:center;
  }
  .foot__social{ gap:4px }
  .foot__legal{ font-size:12px; line-height:1.5 }
}