/* ══════════════════════════════════════════════════════════════════════════
   wa-flotante.css
   Botón flotante de WhatsApp
   Procede de styles.css (secciones 15) del proyecto original.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 15. BOTÓN FLOTANTE DE WHATSAPP ═══════════════ */
.wa-flotante {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.5rem;      /* supera con holgura los 44px táctiles */
  min-width: 3.5rem;
  padding: 0 1.15rem;
  border-radius: 999px;
  background: var(--color-whatsapp);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 14px 30px -10px rgba(58, 46, 28, 0.45);
  transition: transform var(--transicion), opacity var(--transicion),
              visibility var(--transicion), background var(--transicion);
}
.wa-flotante:hover { background: var(--color-whatsapp-hover); }

/* Se oculta con el menú móvil abierto y al llegar al formulario de contacto,
   para no tapar contenido ni duplicar el CTA. */
.wa-flotante.oculto {
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem) scale(0.9);
}

@media (max-width: 400px) {
  .wa-flotante { padding: 0; justify-content: center; }
  .wa-flotante__texto { display: none; }
}