/* glass/rodape.css — o rodapé das quatro páginas, num lugar só.

   Antes deste arquivo, a inicial tinha um rodapé em grade e as outras três
   tinham duas linhas soltas. Quem chega ao fim de produto.html ou de
   checkout.html tem as MESMAS dúvidas de quem chega ao fim da inicial — e
   encontrava menos.

   O rodapé não é um mapa do site: é o último lugar onde a dúvida que segura a
   compra pode ser respondida. Por isso a primeira faixa responde, e só depois
   vêm os links.

   Carregar SEMPRE depois do <style> da página (lição registrada no CLAUDE.md:
   arquivo carregado antes do estilo inline perde a cascata). */

/* ---- Superfície ---------------------------------------------------------- */

/* A emenda: o corpo em --surface encostava seco no --surface-alt do rodapé.
   O gradiente de 120px dissolve a linha.
   O segundo ponto do gradiente é `transparent`, não a cor creme literal: se a
   paleta mudar (o teste de página branca ainda está em aberto), a emenda
   acompanha sozinha em vez de continuar dissolvendo para um bege que saiu. */
/* A EMENDA COM A PÁGINA, refeita em 12/08/2026 depois de o usuário circular
   o degrau numa tela e escrever "esse tipo de quebra".

   O que havia ali eram TRÊS temperaturas encostadas em um pixel: a página
   branco-quente, um fio de 1px bege (--border) e o topo do rodapé em branco
   puro, que só então descia para o branco-frio. O olho não vê um degradê
   suave, vê um degrau — e a régua do fio ainda o sublinhava.

   Agora o topo é TRANSPARENTE. O rodapé não tenta adivinhar a cor da página:
   ele deixa a página aparecer e vai ganhando o próprio tom ao longo de
   160 px. Seja qual for o fundo — creme, branco, ou o que a paleta virar
   amanhã — a emenda desaparece, porque não existe cor a combinar.

   O fio saiu junto. Uma linha de contorno é o oposto do que uma transição
   invisível pretende: ou se marca a fronteira, ou se dissolve, nunca os dois. */
.site-footer {
  background: linear-gradient(180deg, transparent 0, var(--surface-alt) 160px);
  border-top: 0;
  padding: var(--space-8) 0 var(--space-6);
  margin-top: var(--space-8);
}

/* ---- Faixa que responde -------------------------------------------------- */

.footer-ajuda {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding-bottom: var(--space-7);
  margin-bottom: var(--space-7);
  border-bottom: 1px solid var(--border-strong);
}
@media (max-width: 900px) { .footer-ajuda { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-ajuda { grid-template-columns: 1fr; gap: var(--space-4); } }

.footer-ajuda h2 {
  font: 500 .75rem/1.4 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gold-text);
  margin: 0 0 var(--space-2);
}
.footer-ajuda p {
  margin: 0;
  font: 400 .875rem/1.65 var(--font-ui);
  color: var(--text-body);
  max-width: 34ch;
}
.footer-ajuda a {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.footer-ajuda a:hover { text-decoration-color: var(--brand-gold); }

/* ---- Grade de navegação -------------------------------------------------- */

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-grid h2 {
  font: 500 .75rem/1.4 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gold-text);
  margin-bottom: var(--space-4);
}
.footer-grid ul { list-style: none; display: grid; gap: var(--space-2); margin: 0; padding: 0; }
.footer-grid a {
  font: 400 .9375rem/1.6 var(--font-ui);
  color: var(--text-body);
  text-decoration: none;
  display: inline-block;
  /* Alvo de toque: 4px em cima e embaixo sobre 1.6em de linha passa de 44px
     junto com o gap da lista. */
  padding-block: 4px;
}
.footer-grid a:hover {
  color: var(--brand-blue);
  text-decoration: underline;
  text-decoration-color: var(--brand-gold);
  text-underline-offset: 4px;
}

/* Item sem destino ainda: texto, não link. Um <a href="#"> promete uma página
   que não existe — e o clique que não leva a lugar nenhum custa mais confiança
   do que a ausência do link. */
.footer-grid li > .pendente {
  font: 400 .9375rem/1.6 var(--font-ui);
  color: var(--text-muted);
  display: inline-block;
  padding-block: 4px;
}

.footer-brand .brand-name { font-size: 1rem; }
.footer-info { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.footer-info p { margin: 0; font: 400 .875rem/1.6 var(--font-ui); color: var(--text-muted); }

/* ---- Linha final --------------------------------------------------------- */

.footer-bottom {
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font: 400 .8125rem/1.6 var(--font-ui);
  color: var(--text-muted);
}
.footer-bottom p { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }

/* No celular a linha final vira coluna: dois blocos de texto lado a lado em
   375px ficam com 3 palavras por linha. */
@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}