/* Rodape e chamada final. */

.chamada {
  background: var(--preto); color: var(--claro-medio);
  padding-block: clamp(52px, 7vw, 96px);
  position: relative; overflow: hidden;
}
.chamada-in { position: relative; display: grid; gap: 18px; justify-items: start; max-width: 62ch; }
.chamada h2 { color: var(--claro-forte); max-width: 15ch; }
.chamada p { color: var(--claro-medio); max-width: 46ch; }
.chamada .botao { margin-top: 8px; }

/* Sem margem: a chamada acima já é escura e encosta no rodapé. */
.rodape { background: var(--preto); color: var(--claro-medio); padding-block: 56px 24px; font-size: .9rem; }
.rodape-grade { display: grid; gap: 36px; grid-template-columns: 1.4fr repeat(3, 1fr); }
.rodape h4 {
  font-variation-settings: "wdth" 118; font-weight: 800; font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: .05em; color: #fff; margin: 0 0 14px;
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rodape a { transition: color .16s; }
.rodape a:hover { color: var(--laranja); }
.rodape-marca img { height: 50px; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: .92; }
.rodape-fim {
  margin-top: 44px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.11);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: .8rem; color: rgba(255,255,255,.42);
}

.zap-flutua {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: 54px; height: 54px; border-radius: 999px;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(37, 211, 102, .4);
  transition: transform .18s;
}
.zap-flutua:hover { transform: scale(1.08); }
.zap-flutua svg { width: 28px; height: 28px; fill: currentColor; }

@media (max-width: 820px) { .rodape-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rodape-grade { grid-template-columns: 1fr; } }

/* Entrega e argumento de venda, nao nota de rodape: destacada da lista
   de endereco, que e informacao de servico. */
.rodape-entrega {
  margin-top: 8px;
  font-weight: 700; color: var(--laranja);
}

/* ---- perfis sociais ---- */

.redes { margin-top: 20px; }
.redes[hidden] { display: none; }

.redes-titulo {
  display: block; margin-bottom: 11px;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--claro-medio);
}

.redes-lista { display: flex; gap: 10px; }

/* Redondo, e nao reto como o resto do site: e a forma que se espera de
   icone social, e o botao flutuante do WhatsApp ja abriu essa excecao
   aqui. Insistir no canto reto so por coerencia deixaria estranho.

   Preenchido, e nao contornado. Contorno fino com icone acinzentado sobre
   preto praticamente desaparece — o circulo cheio e o que faz o icone ser
   visto de relance, que e a unica serventia dele no rodape. */
.redes-lista a {
  width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--claro-forte);
  color: var(--preto);
  transition: background .16s, transform .16s;
}
.redes-lista a:hover {
  background: var(--laranja);
  transform: translateY(-2px);
}
.redes-lista svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* Link dentro da linha final do rodapé — hoje é a política de
   privacidade. Herdar os 42% de branco da linha deixava o contraste em
   ~3,9:1, abaixo do mínimo legível, e este é justamente o link que a lei
   espera que a pessoa consiga achar. Sublinhado discreto porque, sem
   ele, texto claro no meio de texto claro não se anuncia como link. */
.rodape-fim a {
  color: rgba(255, 255, 255, .78);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .3);
}
.rodape-fim a:hover { color: var(--claro-forte); text-decoration-color: currentColor; }