Changes

src/components/FloatingButton.tsx

@@ -0,0 +1,46 @@
+import { Button } from "@/components/ui/button";
+import { motion, AnimatePresence } from "framer-motion";
+import { useState, useEffect } from "react";
+import { ChevronUp } from "lucide-react";
+
+/** Botón flotante de reserva + scroll to top */
+const FloatingButton = () => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setVisible(window.scrollY > 400);
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 20 }}
+          className="fixed bottom-6 right-6 z-50 flex flex-col gap-2"
+        >
+          <Button
+            variant="hero"
+            size="lg"
+            className="animate-pulse-glow rounded-full px-6 shadow-elevated"
+            asChild
+          >
+            <a href="#booking">🎶 Reservar</a>
+          </Button>
+          <button
+            onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+            className="self-center bg-foreground/20 backdrop-blur-sm p-2 rounded-full hover:bg-foreground/30 transition-colors"
+            aria-label="Volver arriba"
+          >
+            <ChevronUp className="w-4 h-4 text-foreground" />
+          </button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default FloatingButton;