diff --git a/app/demos/page.tsx b/app/demos/page.tsx
new file mode 100644
index 0000000..b7068d9
--- /dev/null
+++ b/app/demos/page.tsx
@@ -0,0 +1,296 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+
+type Vertical = "real-estate" | "restaurant" | "clinic" | "home-services";
+
+const verticals = {
+  "real-estate": {
+    id: "real-estate",
+    name: "Real Estate",
+    icon: "🏠",
+    color: "#10b981",
+    hero: {
+      badge: "✓ Agentes inmobiliarios en España",
+      title: "Tu web inmobiliario con IA que vende 24/7",
+      subtitle: "La IA responde preguntas sobre propiedades, agenda visitas y cualifica leads mientras tú cierras ventas. Especialistas en agencias inmobiliarias en la Costa del Sol.",
+    },
+    features: [
+      { title: "Búsqueda inteligente", desc: "Los clientes encuentran propiedades con preguntas naturales" },
+      { title: "Visitas automáticas", desc: "Agenda visitas sin intervención humana" },
+      { title: "Cualificación de leads", desc: "La IA filtra compradores serios de mirones" },
+      { title: "Multidioma", desc: "Responde en español, inglés, francés, alemán" },
+    ],
+    pricing: [
+      { name: "Esencial", price: "€299", features: ["1 agente IA", "Web básica", "WhatsApp incluido"] },
+      { name: "Profesional", price: "€549", popular: true, features: ["2 agentes IA", "Web completa", "CRM integrado", "Analytics"] },
+      { name: "Premium", price: "€949", features: ["Agentes ilimitados", "Web a medida", "API integrations", "Soporte 24/7"] },
+    ],
+  },
+  "restaurant": {
+    id: "restaurant",
+    name: "Restaurante",
+    icon: "🍽️",
+    color: "#f59e0b",
+    hero: {
+      badge: "✓ Restaurantes en España",
+      title: "Tu restaurante abierto 24 horas",
+      subtitle: "Toma reservas a las 3 AM, responde sobre alérgenos y sugiere platos. La IA maneja todo el atención al cliente mientras tú disfrutas de tu negocio.",
+    },
+    features: [
+      { title: "Reservas 24/7", desc: "Reservas automáticas sin llamar" },
+      { title: "Menú interactivo", desc: "Clientes preguntan sobre platos y alérgenos" },
+      { title: "Pedidos online", desc: "Carrito de pedidos integrado" },
+      { title: "Promociones automáticas", desc: "La IA предложа ofertas en momentos bajos" },
+    ],
+    pricing: [
+      { name: "Inicio", price: "€199", features: ["1 agente IA", "Web básica", "Reservas"] },
+      { name: "Negocio", price: "€399", popular: true, features: ["2 agentes IA", "Web completa", "Pedidos", " CRM"] },
+      { name: "Cadena", price: "€749", features: ["Agentes ilimitados", "Multi-sucursal", "API integrations", "Soporte 24/7"] },
+    ],
+  },
+  "clinic": {
+    id: "clinic",
+    name: "Clínica",
+    icon: "⚕️",
+    color: "#06b6d4",
+    hero: {
+      badge: "✓ Clínicas estéticas y médicas",
+      title: "Tu clínica siempre disponible",
+      subtitle: "La IA agenda citas, responde sobre tratamientos y recuerda citas. Libera a tu equipo para lo que importa: cuidar pacientes.",
+    },
+    features: [
+      { title: "Citas automáticas", desc: "Agenda 24/7 sin receptionist" },
+      { title: "Info de tratamientos", desc: "Responde sobre procedimientos y precios" },
+      { title: "Recordatorios", desc: "La IA recuerda citas y seguimiento" },
+      { title: "Cualificación", desc: "Filtra pacientes adecuados para cada tratamiento" },
+    ],
+    pricing: [
+      { name: "Básico", price: "€249", features: ["1 agente IA", "Web básica", "Citas"] },
+      { name: "Clínica", price: "€499", popular: true, features: ["2 agentes IA", "Web completa", "CRM médico", "Recordatorios"] },
+      { name: "Grupo", price: "€899", features: ["Agentes ilimitados", "Multi-sede", "API integrations", "Soporte 24/7"] },
+    ],
+  },
+  "home-services": {
+    id: "home-services",
+    name: "Servicios del Hogar",
+    icon: "🔧",
+    color: "#8b5cf6",
+    hero: {
+      badge: "✓ Fontaneros, electricistas, piscinas",
+      title: "Tu empresa de servicios siempre operativa",
+      subtitle: "La IA responde emergencias, agenda servicios y quotea presupuestos. Nunca pierdas un cliente por no estar disponible.",
+    },
+    features: [
+      { title: "Emergencias 24/7", desc: "Responde siempre, incluso a las 2 AM" },
+      { title: "Presupuestos rápidos", desc: "La IA genera presupuestos preliminares" },
+      { title: "Agenda inteligente", desc: "Coordina citas con disponibilidad real" },
+      { title: "Seguimiento", desc: "Recordatorios y seguimiento automático" },
+    ],
+    pricing: [
+      { name: "Profesional", price: "€249", features: ["1 agente IA", "Web básica", "Presupuestos"] },
+      { name: "Empresa", price: "€449", popular: true, features: ["2 agentes IA", "Web completa", "CRM servicios", "Fotos/proyectos"] },
+      { name: "Corporativo", price: "€849", features: ["Agentes ilimitados", "Flota/varios equipos", "API integrations", "Soporte 24/7"] },
+    ],
+  },
+};
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+};
+
+export default function DemosPage() {
+  const [selected, setSelected] = useState<Vertical>("real-estate");
+  const [contactOpen, setContactOpen] = useState(false);
+  const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "" });
+
+  const v = verticals[selected];
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    alert("¡Gracias! Te contactaremos pronto.");
+    setContactOpen(false);
+    setFormData({ name: "", email: "", phone: "", message: "" });
+  };
+
+  return (
+    <div className="min-h-screen bg-[#1a1625] text-white">
+      {/* Header */}
+      <header className="border-b border-white/10 bg-[#1a1625]/90 backdrop-blur sticky top-0 z-50">
+        <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
+          <a href="/" className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-lg bg-brand-pink flex items-center justify-center">
+              <span className="text-xl">🌐</span>
+            </div>
+            <span className="font-bold text-xl">SiteMente</span>
+          </a>
+          <nav className="hidden md:flex items-center gap-6 text-sm font-medium">
+            <a href="#features" className="hover:text-brand-pink transition">Características</a>
+            <a href="#pricing" className="hover:text-brand-pink transition">Precios</a>
+            <a href="#contact" className="hover:text-brand-pink transition">Contacto</a>
+          </nav>
+          <a href="#contact" onClick={() => setContactOpen(true)} className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">
+            Pedir demo
+          </a>
+        </div>
+      </header>
+
+      {/* Vertical Selector */}
+      <section className="py-8 border-b border-white/10">
+        <div className="mx-auto max-w-6xl px-6">
+          <p className="text-center text-white/50 text-sm mb-4">Selecciona tu industria:</p>
+          <div className="flex flex-wrap justify-center gap-3">
+            {(Object.keys(verticals) as Vertical[]).map((key) => (
+              <button
+                key={key}
+                onClick={() => setSelected(key)}
+                className={`flex items-center gap-2 px-4 py-2 rounded-full border transition ${
+                  selected === key
+                    ? `bg-${verticals[key].color}/20 border-${verticals[key].color} text-white`
+                    : "border-white/20 text-white/70 hover:border-white/40"
+                }`}
+                style={{ backgroundColor: selected === key ? `${verticals[key].color}20` : undefined }}
+              >
+                <span>{verticals[key].icon}</span>
+                <span className="font-medium">{verticals[key].name}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Hero */}
+      <section className="py-16 md:py-24">
+        <div className="mx-auto max-w-4xl px-6 text-center">
+          <motion.div variants={fadeUp} initial="hidden" animate="visible" transition={{ duration: 0.6 }}>
+            <span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1 text-sm mb-6">
+              <span className="w-2 h-2 rounded-full bg-brand-pink" />
+              {v.hero.badge}
+            </span>
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">{v.hero.title}</h1>
+            <p className="text-lg text-white/70 mb-8">{v.hero.subtitle}</p>
+            <div className="flex flex-wrap justify-center gap-4">
+              <button onClick={() => setContactOpen(true)} className="px-6 py-3 bg-brand-pink rounded-lg font-semibold hover:bg-[#ff7bc0] transition">
+                Ver demo en vivo
+              </button>
+              <a href="#features" className="px-6 py-3 border border-white/20 rounded-lg font-semibold hover:bg-white/10 transition">
+                Ver características
+              </a>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section id="features" className="py-16 border-t border-white/10">
+        <div className="mx-auto max-w-6xl px-6">
+          <h2 className="text-3xl font-bold text-center mb-12">Características para {v.name}</h2>
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {v.features.map((feature, i) => (
+              <motion.div
+                key={feature.title}
+                variants={fadeUp}
+                initial="hidden"
+                animate="visible"
+                transition={{ duration: 0.5, delay: i * 0.1 }}
+                className="p-6 rounded-xl border border-white/10 bg-white/5 hover:border-white/20 transition"
+              >
+                <div className="w-12 h-12 rounded-lg bg-brand-pink/20 flex items-center justify-center text-2xl mb-4">✨</div>
+                <h3 className="font-semibold mb-2">{feature.title}</h3>
+                <p className="text-sm text-white/60">{feature.desc}</p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing */}
+      <section id="pricing" className="py-16 border-t border-white/10 bg-white/5">
+        <div className="mx-auto max-w-6xl px-6">
+          <h2 className="text-3xl font-bold text-center mb-4">Planes para {v.name}</h2>
+          <p className="text-center text-white/60 mb-12">Precios claros sin sorpresas. Incluye todo lo que necesitas.</p>
+          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
+            {v.pricing.map((plan, i) => (
+              <motion.div
+                key={plan.name}
+                variants={fadeUp}
+                initial="hidden"
+                animate="visible"
+                transition={{ duration: 0.5, delay: i * 0.1 }}
+                className={`p-6 rounded-2xl border ${plan.popular ? "border-brand-pink bg-brand-pink/10" : "border-white/10 bg-white/5"}`}
+              >
+                {plan.popular && <span className="text-xs font-medium text-brand-pink">Más popular</span>}
+                <h3 className="text-xl font-bold mt-2">{plan.name}</h3>
+                <p className="text-3xl font-bold mt-4">{plan.price}<span className="text-sm font-normal text-white/60">/mes</span></p>
+                <ul className="mt-6 space-y-3">
+                  {plan.features.map((f) => (
+                    <li key={f} className="flex items-center gap-2 text-sm text-white/70">
+                      <span className="text-brand-pink">✓</span> {f}
+                    </li>
+                  ))}
+                </ul>
+                <button onClick={() => setContactOpen(true)} className={`w-full mt-6 py-3 rounded-lg font-medium transition ${plan.popular ? "bg-brand-pink hover:bg-[#ff7bc0]" : "border border-white/20 hover:bg-white/10"}`}>
+                  Elegir plan
+                </button>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section id="contact" className="py-16 border-t border-white/10">
+        <div className="mx-auto max-w-2xl px-6 text-center">
+          <h2 className="text-3xl font-bold mb-4">¿Listo para empezar?</h2>
+          <p className="text-white/60 mb-8">Cuéntanos sobre tu negocio y te mostraremos una demo personalizada.</p>
+          <button onClick={() => setContactOpen(true)} className="px-8 py-3 bg-brand-pink rounded-lg font-semibold hover:bg-[#ff7bc0] transition">
+            Solicitar demo gratuita
+          </button>
+        </div>
+      </section>
+
+      {/* Contact Modal */}
+      {contactOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
+          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setContactOpen(false)} />
+          <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="relative z-10 w-full max-w-lg rounded-2xl border border-white/20 bg-[#1a1625] p-8">
+            <div className="flex items-start justify-between mb-6">
+              <div>
+                <p className="text-sm uppercase tracking-widest text-white/50">Contacto</p>
+                <h3 className="text-xl font-bold mt-1">Cuéntanos sobre tu negocio</h3>
+              </div>
+              <button onClick={() => setContactOpen(false)} className="text-white/50 hover:text-white">✕</button>
+            </div>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="text-sm text-white/70">Nombre</label>
+                <input required value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} className="w-full mt-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-brand-pink" placeholder="Tu nombre" />
+              </div>
+              <div>
+                <label className="text-sm text-white/70">Email</label>
+                <input required type="email" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} className="w-full mt-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-brand-pink" placeholder="tu@email.com" />
+              </div>
+              <div>
+                <label className="text-sm text-white/70">Teléfono</label>
+                <input required value={formData.phone} onChange={(e) => setFormData({...formData, phone: e.target.value})} className="w-full mt-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-brand-pink" placeholder="+34 600 000 000" />
+              </div>
+              <div>
+                <label className="text-sm text-white/70">Mensaje</label>
+                <textarea required value={formData.message} onChange={(e) => setFormData({...formData, message: e.target.value})} rows={3} className="w-full mt-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-brand-pink" placeholder="¿Qué necesitas automatizar?" />
+              </div>
+              <button type="submit" className="w-full py-3 bg-brand-pink rounded-lg font-medium hover:bg-[#ff7bc0] transition">Enviar mensaje</button>
+            </form>
+          </motion.div>
+        </div>
+      )}
+
+      {/* Footer */}
+      <footer className="py-8 border-t border-white/10 text-center text-white/40 text-sm">
+        <p>© 2026 SiteMente. Parte de la familia HolaCompi.</p>
+      </footer>
+    </div>
+  );
+}
diff --git a/components/mission-control/MissionControlDashboard.tsx b/components/mission-control/MissionControlDashboard.tsx
index a4bee94..6dace73 100644
--- a/components/mission-control/MissionControlDashboard.tsx
+++ b/components/mission-control/MissionControlDashboard.tsx
@@ -25,6 +25,7 @@ interface SidebarCategory {
 const sidebarCategories: SidebarCategory[] = [
   { id: "projects", name: "Projects", icon: "🎯", items: [
     { id: "sitemente", name: "SiteMente", icon: "🌐", color: "#ff7bc0", category: "projects" },
+    { id: "demos", name: "Demo Pages", icon: "🎨", category: "demos" },
     { id: "holacompi", name: "HolaCompi", icon: "🤝", color: "#6366f1", category: "projects" },
   ]},
   { id: "tasks", name: "Tasks", icon: "✓", items: [
@@ -190,6 +191,23 @@ export default function MissionControlDashboard() {
             <div className="space-y-2 text-sm text-white/70"><p>Memory is stored in:</p><ul className="text-white/50 space-y-1"><li>• localStorage (browser)</li><li>• GitHub repo (daily commits)</li><li>• MEMORY.md (curated)</li></ul></div>
           </div>
         )}
+        {currentItem?.category === "demos" && (
+          <div className="rounded-xl border border-white/10 bg-white/5 p-6">
+            <div className="text-center py-8">
+              <div className="text-5xl mb-4">🎨</div>
+              <h3 className="text-xl font-bold mb-2">Demo Pages</h3>
+              <p className="text-white/60 mb-6">Vertical demo pages for SiteMente</p>
+              <div className="flex flex-wrap justify-center gap-3">
+                <a href="/demos" target="_blank" className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">🌐 All Demos</a>
+                <a href="/demos?vertical=real-estate" target="_blank" className="px-4 py-2 bg-green-500/20 border border-green-500/30 rounded-lg text-sm hover:bg-green-500/30 transition">🏠 Real Estate</a>
+                <a href="/demos?vertical=restaurant" target="_blank" className="px-4 py-2 bg-yellow-500/20 border border-yellow-500/30 rounded-lg text-sm hover:bg-yellow-500/30 transition">🍽️ Restaurant</a>
+                <a href="/demos?vertical=clinic" target="_blank" className="px-4 py-2 bg-cyan-500/20 border border-cyan-500/30 rounded-lg text-sm hover:bg-cyan-500/30 transition">⚕️ Clinic</a>
+                <a href="/demos?vertical=home-services" target="_blank" className="px-4 py-2 bg-purple-500/20 border border-purple-500/30 rounded-lg text-sm hover:bg-purple-500/30 transition">🔧 Home Services</a>
+              </div>
+            </div>
+          </div>
+        )}
+
 
         {currentItem?.category === "projects" && (
           <>