/* ==========================================================
   FOOTER · columnas, aviso legal y botón flotante de WhatsApp
   ========================================================== */

footer { background: var(--color-footer); border-top: 3px solid var(--color-accent); padding: 56px 0 100px; }
footer .grid { grid-template-columns: repeat(4, 1fr); }
footer a { display: block; text-decoration: none; padding: .2em 0; }
footer a:hover { color: var(--color-cream); }

.footer-brand { display: inline-block; }
.logo-footer { width: 180px; height: auto; display: block; }
.footer-tagline { margin-top: 8px; font-size: .9rem; }


@media (max-width: 900px) {
  footer .grid { grid-template-columns: repeat(2, 1fr); }
  footer a:not(.footer-brand) { padding: .6em 0; } /* 44 px de alto: objetivo táctil mínimo */
}
@media (max-width: 500px) {
  footer .grid { grid-template-columns: 1fr; }
}

/* Botón flotante de WhatsApp (solo ≤ 900px) */
.wa-float {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-round);
  background: var(--color-accent);
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-float);
  transition: opacity .2s var(--ease), visibility .2s;
}
/* js/whatsapp.js lo oculta mientras hay contenido debajo (para no taparlo).
   Solo fundido: sin escala, para que su medida no cambie al revisar qué tiene debajo. */
.wa-float.is-oculto { opacity: 0; visibility: hidden; pointer-events: none; }
.wa-float { color: var(--color-cream); }   /* el ícono usa currentColor */
.wa-float svg { width: 30px; height: 30px; }

@media (max-width: 900px) {
  .wa-float { display: flex; }
}