/* =====================================================================
   09-rodape.css
   Rodape e botao flutuante do WhatsApp
   Carregado pelo index.html na ordem dos arquivos — a ordem importa
   para a cascata, entao nao troque os <link> de lugar.
   ===================================================================== */

/* ---------------------------------------------------------------
   16. Rodapé
   --------------------------------------------------------------- */
.rodape {
  background: var(--cinza-900);
  color: rgba(255,255,255,.72);
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
  font-size: .95rem;
}
.rodape__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 2.5rem;
}
.rodape h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.rodape a { color: rgba(255,255,255,.78); }
.rodape a:hover { color: #fff; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.rodape li a { display: inline-block; padding: .45rem 0; }
.rodape__contato li { display: flex; gap: .65rem; align-items: flex-start; }
.rodape__contato svg { width: 18px; height: 18px; flex: none; color: var(--azul-300); margin-top: 4px; }

.rodape__base {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  font-size: .95rem;
  color: rgba(255,255,255,.82);
}
.rodape__legal { max-width: 100%; line-height: 1.6; }

/* ---------------------------------------------------------------
   17. Botão flutuante do WhatsApp
   --------------------------------------------------------------- */
.zap-flutuante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--zap);
  color: #fff;
  box-shadow: 0 14px 34px rgba(37, 211, 102, .45);
  transform: translateY(120px);
  opacity: 0;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s ease, box-shadow var(--transicao);
}
.zap-flutuante[data-visivel='true'] { transform: translateY(0); opacity: 1; }
.zap-flutuante:hover { text-decoration: none; box-shadow: 0 18px 44px rgba(37,211,102,.6); }
.zap-flutuante svg { width: 30px; height: 30px; color: #fff; }
.zap-flutuante__texto { display: none; }