Fix Demo enterprise

frontend/src/pages/app/DashboardPage.tsx

@@ -23,7 +23,7 @@ import {
   useApprovePurchaseOrder,
   useStartProductionBatch,
 } from '../../api/hooks/useProfessionalDashboard';
-import { useDashboardData, useDashboardRealtimeSync } from '../../api/hooks/useDashboardData';
+import { useControlPanelData, useControlPanelRealtimeSync } from '../../api/hooks/useControlPanelData';
 import { useRejectPurchaseOrder } from '../../api/hooks/purchase-orders';
 import { useIngredients } from '../../api/hooks/inventory';
 import { useSuppliers } from '../../api/hooks/suppliers';
@@ -99,15 +99,15 @@ export function BakeryDashboard({ plan }: { plan?: string }) {
   );
   const qualityTemplates = Array.isArray(qualityData?.templates) ? qualityData.templates : [];
 
-  // NEW: Single unified data fetch for all 4 dashboard blocks
+  // NEW: Enhanced control panel data fetch with SSE integration
   const {
     data: dashboardData,
     isLoading: dashboardLoading,
     refetch: refetchDashboard,
-  } = useDashboardData(tenantId);
+  } = useControlPanelData(tenantId);
 
-  // Enable SSE real-time state synchronization
-  useDashboardRealtimeSync(tenantId);
+  // Enable enhanced SSE real-time state synchronization
+  useControlPanelRealtimeSync(tenantId);
 
   // Mutations
   const approvePO = useApprovePurchaseOrder();
@@ -417,6 +417,7 @@ export function BakeryDashboard({ plan }: { plan?: string }) {
                   runningBatches={dashboardData?.runningBatches || []}
                   pendingBatches={dashboardData?.pendingBatches || []}
                   alerts={dashboardData?.alerts || []}
+                  equipmentAlerts={dashboardData?.equipmentAlerts || []}
                   loading={dashboardLoading}
                   onStartBatch={handleStartBatch}
                 />

frontend/src/pages/public/FeaturesPage.tsx

@@ -4,15 +4,17 @@ import { useTranslation } from 'react-i18next';
 import { PublicLayout } from '../../components/layout';
 import {
   Button,
-  TableOfContents,
   ProgressBar,
   FloatingCTA,
   ScrollReveal,
   SavingsCalculator,
   StepTimeline,
   AnimatedCounter,
-  TOCSection,
-  TimelineStep
+  TimelineStep,
+  Card,
+  CardHeader,
+  CardBody,
+  Badge
 } from '../../components/ui';
 import { getDemoUrl } from '../../utils/navigation';
 import {
@@ -41,7 +43,8 @@ import {
   Droplets,
   Award,
   Database,
-  FileText
+  FileText,
+  Sparkles
 } from 'lucide-react';
 
 const FeaturesPage: React.FC = () => {
@@ -117,39 +120,6 @@ const FeaturesPage: React.FC = () => {
     },
   ];
 
-  // Table of Contents sections
-  const tocSections: TOCSection[] = [
-    {
-      id: 'automatic-system',
-      label: t('toc.automatic', 'Sistema Automático'),
-      icon: <Clock className="w-4 h-4" />
-    },
-    {
-      id: 'local-intelligence',
-      label: t('toc.local', 'Inteligencia Local'),
-      icon: <MapPin className="w-4 h-4" />
-    },
-    {
-      id: 'demand-forecasting',
-      label: t('toc.forecasting', 'Predicción de Demanda'),
-      icon: <Target className="w-4 h-4" />
-    },
-    {
-      id: 'waste-reduction',
-      label: t('toc.waste', 'Reducción de Desperdicios'),
-      icon: <Recycle className="w-4 h-4" />
-    },
-    {
-      id: 'sustainability',
-      label: t('toc.sustainability', 'Sostenibilidad'),
-      icon: <Leaf className="w-4 h-4" />
-    },
-    {
-      id: 'business-models',
-      label: t('toc.business', 'Modelos de Negocio'),
-      icon: <Store className="w-4 h-4" />
-    },
-  ];
 
   return (
     <PublicLayout
@@ -175,44 +145,69 @@ const FeaturesPage: React.FC = () => {
         dismissible
       />
 
-      {/* Main Content with Sidebar */}
-      <div className="flex gap-8">
-        {/* Sidebar - Table of Contents */}
-        <aside className="hidden lg:block w-64 flex-shrink-0">
-          <TableOfContents sections={tocSections} />
-        </aside>
+      {/* Hero Section - Enhanced with Demo page style */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--bg-primary)] via-[var(--bg-secondary)] to-[var(--color-primary)]/5 dark:from-[var(--bg-primary)] dark:via-[var(--bg-secondary)] dark:to-[var(--color-primary)]/10 py-24">
+        {/* Background Pattern */}
+        <div className="absolute inset-0 bg-pattern opacity-50"></div>
 
-        {/* Main Content */}
-        <div className="flex-1 min-w-0">
-      {/* Hero Section */}
-      <section className="bg-gradient-to-br from-[var(--bg-primary)] via-[var(--bg-secondary)] to-[var(--color-primary)]/5 py-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Animated Background Elements */}
+        <div className="absolute top-20 left-10 w-72 h-72 bg-[var(--color-primary)]/10 rounded-full blur-3xl animate-pulse"></div>
+        <div className="absolute bottom-10 right-10 w-96 h-96 bg-[var(--color-secondary)]/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }}></div>
+
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <ScrollReveal variant="fadeUp" delay={0.1}>
-            <div className="text-center max-w-4xl mx-auto">
-              <h1 className="text-4xl lg:text-6xl font-extrabold text-[var(--text-primary)] mb-6">
-                {t('hero.title', 'Cómo Bakery-IA Trabaja Para Ti Cada Día')}
+            <div className="text-center max-w-4xl mx-auto space-y-6">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 mb-4">
+                <Sparkles className="w-4 h-4 text-[var(--color-primary)]" />
+                <span className="text-sm font-medium text-[var(--color-primary)]">{t('hero.badge', 'Funcionalidades Completas')}</span>
+              </div>
+
+              <h1 className="text-5xl md:text-6xl font-bold text-[var(--text-primary)] mb-6 leading-tight">
+                {t('hero.title', 'Cómo Bakery-IA')}
+                <span className="block bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent">
+                  {t('hero.title_highlight', 'Trabaja Para Ti Cada Día')}
+                </span>
               </h1>
-              <p className="text-xl text-[var(--text-secondary)] leading-relaxed">
+
+              <p className="text-xl md:text-2xl text-[var(--text-secondary)] max-w-3xl mx-auto leading-relaxed">
                 {t('hero.subtitle', 'Todas las funcionalidades explicadas en lenguaje sencillo para dueños de panaderías')}
               </p>
+
+              <div className="flex items-center justify-center gap-8 pt-4 text-sm text-[var(--text-tertiary)]">
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="w-5 h-5 text-[var(--color-success)]" />
+                  <span>{t('hero.feature1', 'IA Automática 24/7')}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="w-5 h-5 text-[var(--color-success)]" />
+                  <span>{t('hero.feature2', '92% Precisión')}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="w-5 h-5 text-[var(--color-success)]" />
+                  <span>{t('hero.feature3', 'ROI Inmediato')}</span>
+                </div>
+              </div>
             </div>
           </ScrollReveal>
         </div>
       </section>
 
       {/* Feature 1: Automatic Daily System - THE KILLER FEATURE */}
-      <section id="automatic-system" className="py-20 bg-[var(--bg-primary)] scroll-mt-24">
+      <section id="automatic-system" className="py-20 bg-[var(--bg-primary)]">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <ScrollReveal variant="fadeUp" delay={0.1}>
             <div className="text-center mb-16">
-              <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
-                <Clock className="w-4 h-4" />
+              <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
+                <Clock className="w-5 h-5" />
                 <span>{t('automatic.badge', 'La Funcionalidad Estrella')}</span>
               </div>
-              <h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)] mb-6">
-                {t('automatic.title', 'Tu Asistente Personal Que Nunca Duerme')}
+              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-6">
+                {t('automatic.title', 'Tu Asistente Personal')}
+                <span className="block bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent">
+                  {t('automatic.title_highlight', 'Que Nunca Duerme')}
+                </span>
               </h2>
-              <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
+              <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto leading-relaxed">
                 {t('automatic.intro', 'Imagina contratar un ayudante súper organizado que llega a las 5:30 AM (antes que tú) y hace todo esto AUTOMÁTICAMENTE:')}
               </p>
             </div>
@@ -229,61 +224,65 @@ const FeaturesPage: React.FC = () => {
               />
 
             {/* Morning Result */}
-            <div className="bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-2xl p-8 text-white">
-              <div className="text-center max-w-3xl mx-auto">
-                <Clock className="w-16 h-16 mx-auto mb-4" />
-                <h3 className="text-2xl lg:text-3xl font-bold mb-4">
+            <div className="relative overflow-hidden bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-2xl p-8 text-white shadow-xl mt-8">
+              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
+              <div className="relative text-center max-w-3xl mx-auto">
+                <div className="relative inline-block mb-6">
+                  <Clock className="w-16 h-16 mx-auto" />
+                  <div className="absolute inset-0 rounded-full bg-white/20 blur-xl animate-pulse"></div>
+                </div>
+                <h3 className="text-2xl lg:text-3xl font-bold mb-6">
                   {t('automatic.result.title', 'A las 6:00 AM recibes un email:')}
                 </h3>
-                <div className="space-y-2 text-lg">
-                  <div className="flex items-center justify-center gap-2">
-                    <CheckCircle2 className="w-6 h-6" />
-                    <span>{t('automatic.result.item1', 'Predicción del día hecha')}</span>
+                <div className="grid md:grid-cols-2 gap-4 text-left">
+                  <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
+                    <CheckCircle2 className="w-6 h-6 flex-shrink-0" />
+                    <span className="text-lg">{t('automatic.result.item1', 'Predicción del día hecha')}</span>
                   </div>
-                  <div className="flex items-center justify-center gap-2">
-                    <CheckCircle2 className="w-6 h-6" />
-                    <span>{t('automatic.result.item2', 'Plan de producción listo')}</span>
+                  <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
+                    <CheckCircle2 className="w-6 h-6 flex-shrink-0" />
+                    <span className="text-lg">{t('automatic.result.item2', 'Plan de producción listo')}</span>
                   </div>
-                  <div className="flex items-center justify-center gap-2">
-                    <CheckCircle2 className="w-6 h-6" />
-                    <span>{t('automatic.result.item3', '3 pedidos creados (aprobar con 1 clic)')}</span>
+                  <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
+                    <CheckCircle2 className="w-6 h-6 flex-shrink-0" />
+                    <span className="text-lg">{t('automatic.result.item3', '3 pedidos creados (aprobar con 1 clic)')}</span>
                   </div>
-                  <div className="flex items-center justify-center gap-2">
-                    <CheckCircle2 className="w-6 h-6" />
-                    <span>{t('automatic.result.item4', 'Alerta: "Leche caduca en 2 días, úsala primero"')}</span>
+                  <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
+                    <CheckCircle2 className="w-6 h-6 flex-shrink-0" />
+                    <span className="text-lg">{t('automatic.result.item4', 'Alerta: "Leche caduca en 2 días, úsala primero"')}</span>
                   </div>
                 </div>
               </div>
             </div>
 
             {/* What it eliminates */}
-            <div className="bg-[var(--bg-secondary)] rounded-2xl p-8 border border-[var(--border-primary)]">
+            <div className="bg-gradient-to-br from-[var(--bg-secondary)] to-[var(--bg-tertiary)] rounded-2xl p-8 border border-[var(--border-primary)] shadow-lg mt-8">
               <h3 className="text-2xl font-bold text-[var(--text-primary)] mb-6 text-center">
                 {t('automatic.eliminates.title', 'Lo que ELIMINA de tu rutina:')}
               </h3>
               <div className="grid md:grid-cols-2 gap-4">
-                <div className="flex items-start gap-3">
-                  <span className="text-red-500 text-xl">❌</span>
+                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
+                  <span className="text-red-500 text-xl flex-shrink-0">❌</span>
                   <span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item1', 'Adivinar cuánto hacer')}</span>
                 </div>
-                <div className="flex items-start gap-3">
-                  <span className="text-red-500 text-xl">❌</span>
+                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
+                  <span className="text-red-500 text-xl flex-shrink-0">❌</span>
                   <span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item2', 'Contar inventario manualmente')}</span>
                 </div>
-                <div className="flex items-start gap-3">
-                  <span className="text-red-500 text-xl">❌</span>
+                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
+                  <span className="text-red-500 text-xl flex-shrink-0">❌</span>
                   <span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item3', 'Calcular cuándo pedir a proveedores')}</span>
                 </div>
-                <div className="flex items-start gap-3">
-                  <span className="text-red-500 text-xl">❌</span>
+                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
+                  <span className="text-red-500 text-xl flex-shrink-0">❌</span>
                   <span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item4', 'Recordar fechas de caducidad')}</span>
                 </div>
-                <div className="flex items-start gap-3">
-                  <span className="text-red-500 text-xl">❌</span>
+                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
+                  <span className="text-red-500 text-xl flex-shrink-0">❌</span>
                   <span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item5', 'Preocuparte por quedarte sin stock')}</span>
                 </div>
-                <div className="flex items-start gap-3">
-                  <span className="text-red-500 text-xl">❌</span>
+                <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
+                  <span className="text-red-500 text-xl flex-shrink-0">❌</span>
                   <span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item6', 'Desperdiciar ingredientes caducados')}</span>
                 </div>
               </div>
@@ -294,18 +293,21 @@ const FeaturesPage: React.FC = () => {
       </section>
 
       {/* Feature 2: Local Intelligence */}
-      <section id="local-intelligence" className="py-20 bg-[var(--bg-secondary)] scroll-mt-24">
+      <section id="local-intelligence" className="py-20 bg-[var(--bg-secondary)]">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <ScrollReveal variant="fadeUp" delay={0.1}>
             <div className="text-center mb-16">
-              <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
-                <MapPin className="w-4 h-4" />
+              <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
+                <MapPin className="w-5 h-5" />
                 <span>{t('local.badge', 'Tu Ventaja Competitiva')}</span>
               </div>
-              <h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)] mb-6">
-                {t('local.title', 'Tu Panadería Es Única. La IA También.')}
+              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-6">
+                {t('local.title', 'Tu Panadería Es Única.')}
+                <span className="block bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent">
+                  {t('local.title_highlight', 'La IA También.')}
+                </span>
               </h2>
-              <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
+              <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto leading-relaxed">
                 {t('local.intro', 'Las IA genéricas saben que es lunes. La TUYA sabe que:')}
               </p>
             </div>
@@ -314,8 +316,8 @@ const FeaturesPage: React.FC = () => {
           <div className="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
             {/* Schools */}
             <ScrollReveal variant="fadeUp" delay={0.1}>
-              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all">
-              <div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
+              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
+              <div className="w-12 h-12 bg-gradient-to-br from-blue-500/10 to-blue-600/10 rounded-xl flex items-center justify-center mb-4">
                 <School className="w-6 h-6 text-blue-600" />
               </div>
               <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
@@ -340,8 +342,8 @@ const FeaturesPage: React.FC = () => {
 
             {/* Offices */}
             <ScrollReveal variant="fadeUp" delay={0.15}>
-              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all">
-              <div className="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mb-4">
+              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
+              <div className="w-12 h-12 bg-gradient-to-br from-purple-500/10 to-purple-600/10 rounded-xl flex items-center justify-center mb-4">
                 <Building2 className="w-6 h-6 text-purple-600" />
               </div>
               <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
@@ -366,8 +368,8 @@ const FeaturesPage: React.FC = () => {
 
             {/* Gyms */}
             <ScrollReveal variant="fadeUp" delay={0.2}>
-              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all">
-              <div className="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center mb-4">
+              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
+              <div className="w-12 h-12 bg-gradient-to-br from-green-500/10 to-green-600/10 rounded-xl flex items-center justify-center mb-4">
                 <Dumbbell className="w-6 h-6 text-green-600" />
               </div>
               <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
@@ -392,8 +394,8 @@ const FeaturesPage: React.FC = () => {
 
             {/* Competition */}
             <ScrollReveal variant="fadeUp" delay={0.25}>
-              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all">
-              <div className="w-12 h-12 bg-amber-500/10 rounded-xl flex items-center justify-center mb-4">
+              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
+              <div className="w-12 h-12 bg-gradient-to-br from-amber-500/10 to-amber-600/10 rounded-xl flex items-center justify-center mb-4">
                 <ShoppingBag className="w-6 h-6 text-amber-600" />
               </div>
               <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
@@ -418,8 +420,8 @@ const FeaturesPage: React.FC = () => {
 
             {/* Weather */}
             <ScrollReveal variant="fadeUp" delay={0.3}>
-              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all">
-              <div className="w-12 h-12 bg-sky-500/10 rounded-xl flex items-center justify-center mb-4">
+              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
+              <div className="w-12 h-12 bg-gradient-to-br from-sky-500/10 to-sky-600/10 rounded-xl flex items-center justify-center mb-4">
                 <Cloud className="w-6 h-6 text-sky-600" />
               </div>
               <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
@@ -444,8 +446,8 @@ const FeaturesPage: React.FC = () => {
 
             {/* Events */}
             <ScrollReveal variant="fadeUp" delay={0.35}>
-              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all">
-              <div className="w-12 h-12 bg-pink-500/10 rounded-xl flex items-center justify-center mb-4">
+              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
+              <div className="w-12 h-12 bg-gradient-to-br from-pink-500/10 to-pink-600/10 rounded-xl flex items-center justify-center mb-4">
                 <PartyPopper className="w-6 h-6 text-pink-600" />
               </div>
               <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
@@ -471,37 +473,49 @@ const FeaturesPage: React.FC = () => {
 
           {/* Why it matters */}
           <ScrollReveal variant="fadeUp" delay={0.4}>
-            <div className="mt-12 max-w-4xl mx-auto bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-2xl p-8 text-white">
-            <h3 className="text-2xl font-bold mb-4 text-center">
-              {t('local.why_matters.title', 'Por qué importa:')}
-            </h3>
-            <div className="grid md:grid-cols-2 gap-6">
-              <div className="bg-white/10 rounded-lg p-4">
-                <p className="font-medium mb-2">{t('local.why_matters.generic', 'IA genérica:')}</p>
-                <p className="text-white/90">{t('local.why_matters.generic_example', '"Es lunes → vende X"')}</p>
+            <div className="mt-12 max-w-4xl mx-auto relative overflow-hidden bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-2xl p-8 text-white shadow-xl">
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
+            <div className="relative">
+              <h3 className="text-2xl font-bold mb-6 text-center">
+                {t('local.why_matters.title', 'Por qué importa:')}
+              </h3>
+              <div className="grid md:grid-cols-2 gap-6">
+                <div className="bg-white/10 backdrop-blur-sm rounded-lg p-5 border border-white/20">
+                  <p className="font-semibold mb-3 text-lg">{t('local.why_matters.generic', 'IA genérica:')}</p>
+                  <p className="text-white/90 text-base leading-relaxed">{t('local.why_matters.generic_example', '"Es lunes → vende X"')}</p>
+                </div>
+                <div className="bg-white/20 backdrop-blur-sm rounded-lg p-5 border-2 border-white shadow-lg">
+                  <p className="font-semibold mb-3 text-lg">{t('local.why_matters.yours', 'TU IA:')}</p>
+                  <p className="text-white/90 text-base leading-relaxed">{t('local.why_matters.yours_example', '"Es lunes, llueve, colegio cerrado (festivo local), mercadillo cancelado → vende Y"')}</p>
+                </div>
               </div>
-              <div className="bg-white/20 rounded-lg p-4 border-2 border-white">
-                <p className="font-medium mb-2">{t('local.why_matters.yours', 'TU IA:')}</p>
-                <p className="text-white/90">{t('local.why_matters.yours_example', '"Es lunes, llueve, colegio cerrado (festivo local), mercadillo cancelado → vende Y"')}</p>
+              <div className="text-center mt-8 p-4 bg-white/10 backdrop-blur-sm rounded-lg">
+                <p className="text-xl font-bold">
+                  Precisión: <span className="text-3xl"><AnimatedCounter value={92} suffix="%" className="inline" /></span> <span className="text-white/80 text-lg">(vs 60-70% de sistemas genéricos)</span>
+                </p>
               </div>
             </div>
-            <p className="text-center mt-6 text-xl font-bold">
-              Precisión: <AnimatedCounter value={92} suffix="%" className="inline text-[var(--color-primary)]" /> (vs 60-70% de sistemas genéricos)
-            </p>
             </div>
           </ScrollReveal>
         </div>
       </section>
 
       {/* Feature 3: Demand Forecasting */}
-      <section id="demand-forecasting" className="py-20 bg-[var(--bg-primary)] scroll-mt-24">
+      <section id="demand-forecasting" className="py-20 bg-[var(--bg-primary)]">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <ScrollReveal variant="fadeUp" delay={0.1}>
             <div className="text-center mb-12">
-              <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
-                Sabe Cuánto Venderás Mañana (<AnimatedCounter value={92} suffix="%" className="inline text-[var(--color-primary)]" /> de Precisión)
+              <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
+                <Target className="w-5 h-5" />
+                <span>{t('forecasting.badge', 'Predicción Inteligente')}</span>
+              </div>
+              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-4">
+                {t('forecasting.title', 'Sabe Cuánto Venderás Mañana')}
+                <span className="block">
+                  (<AnimatedCounter value={92} suffix="%" className="inline bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent" /> de Precisión)
+                </span>
               </h2>
-              <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
+              <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto leading-relaxed">
                 {t('forecasting.subtitle', 'No es magia. Es matemáticas con tus datos.')}
               </p>
             </div>
@@ -570,12 +584,19 @@ const FeaturesPage: React.FC = () => {
       </section>
 
       {/* Feature 4: Reduce Waste = Save Money */}
-      <section id="waste-reduction" className="py-20 bg-[var(--bg-secondary)] scroll-mt-24">
+      <section id="waste-reduction" className="py-20 bg-[var(--bg-secondary)]">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <ScrollReveal variant="fadeUp" delay={0.1}>
             <div className="text-center mb-12">
-              <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
-                {t('waste.title', 'Menos Pan en la Basura, Más Dinero en Tu Bolsillo')}
+              <div className="inline-flex items-center gap-2 bg-green-500/10 dark:bg-green-500/20 border border-green-500/20 dark:border-green-500/30 text-green-600 dark:text-green-400 px-4 py-2 rounded-full text-sm font-medium mb-6">
+                <Recycle className="w-5 h-5" />
+                <span>{t('waste.badge', 'Ahorro Directo')}</span>
+              </div>
+              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-4">
+                {t('waste.title_part1', 'Menos Pan en la Basura,')}
+                <span className="block bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
+                  {t('waste.title_part2', 'Más Dinero en Tu Bolsillo')}
+                </span>
               </h2>
             </div>
           </ScrollReveal>
@@ -640,16 +661,19 @@ const FeaturesPage: React.FC = () => {
       </section>
 
       {/* Feature 5: Sustainability + Grants */}
-      <section id="sustainability" className="py-20 bg-[var(--bg-primary)] scroll-mt-24">
+      <section id="sustainability" className="py-20 bg-[var(--bg-primary)]">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <ScrollReveal variant="fadeUp" delay={0.1}>
             <div className="text-center mb-12">
-              <div className="inline-flex items-center gap-2 bg-green-500/10 text-green-600 dark:text-green-400 px-4 py-2 rounded-full text-sm font-medium mb-6">
-                <Leaf className="w-4 h-4" />
-                <span>{t('sustainability.badge', 'Funcionalidad del Sistema')}</span>
+              <div className="inline-flex items-center gap-2 bg-green-500/10 dark:bg-green-500/20 border border-green-500/20 dark:border-green-500/30 text-green-600 dark:text-green-400 px-4 py-2 rounded-full text-sm font-medium mb-6">
+                <Leaf className="w-5 h-5" />
+                <span>{t('sustainability.badge', 'Impacto Positivo')}</span>
               </div>
-              <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
-                {t('sustainability.title', 'Impacto Ambiental y Sostenibilidad')}
+              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-4">
+                {t('sustainability.title', 'Impacto Ambiental')}
+                <span className="block bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
+                  {t('sustainability.title_highlight', 'y Sostenibilidad')}
+                </span>
               </h2>
             </div>
           </ScrollReveal>
@@ -813,22 +837,32 @@ const FeaturesPage: React.FC = () => {
       </section>
 
       {/* Feature 6: Business Models */}
-      <section id="business-models" className="py-20 bg-[var(--bg-secondary)] scroll-mt-24">
+      <section id="business-models" className="py-20 bg-[var(--bg-secondary)]">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
-              {t('business_models.title', 'Para Cualquier Modelo de Negocio')}
-            </h2>
-            <p className="text-xl text-[var(--text-secondary)]">
-              {t('business_models.subtitle', 'No importa cómo trabajes, funciona para ti')}
-            </p>
-          </div>
+          <ScrollReveal variant="fadeUp" delay={0.1}>
+            <div className="text-center mb-12">
+              <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
+                <Store className="w-5 h-5" />
+                <span>{t('business_models.badge', 'Flexible y Adaptable')}</span>
+              </div>
+              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-4">
+                {t('business_models.title', 'Para Cualquier')}
+                <span className="block bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent">
+                  {t('business_models.title_highlight', 'Modelo de Negocio')}
+                </span>
+              </h2>
+              <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto leading-relaxed">
+                {t('business_models.subtitle', 'No importa cómo trabajes, funciona para ti')}
+              </p>
+            </div>
+          </ScrollReveal>
 
           <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
-            <div className="bg-[var(--bg-primary)] rounded-2xl p-8 border-2 border-[var(--color-primary)]">
-              <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center mb-4">
-                <Store className="w-6 h-6 text-[var(--color-primary)]" />
-              </div>
+            <ScrollReveal variant="fadeUp" delay={0.15}>
+              <div className="bg-[var(--bg-primary)] rounded-2xl p-8 border-2 border-[var(--color-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
+                <div className="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-primary)]/20 rounded-xl flex items-center justify-center mb-4">
+                  <Store className="w-6 h-6 text-[var(--color-primary)]" />
+                </div>
               <h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
                 {t('business_models.local.title', 'Panadería Producción Local')}
               </h3>
@@ -845,9 +879,11 @@ const FeaturesPage: React.FC = () => {
                   <span className="text-[var(--text-secondary)]">{t('business_models.local.benefit2', 'Gestiona inventario de un punto')}</span>
                 </li>
               </ul>
-            </div>
+              </div>
+            </ScrollReveal>
 
-            <div className="bg-[var(--bg-primary)] rounded-2xl p-8 border-2 border-blue-600">
+            <ScrollReveal variant="fadeUp" delay={0.2}>
+              <div className="bg-[var(--bg-primary)] rounded-2xl p-8 border-2 border-blue-600 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
               <div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
                 <Globe className="w-6 h-6 text-blue-600" />
               </div>
@@ -871,33 +907,68 @@ const FeaturesPage: React.FC = () => {
                   <span className="text-[var(--text-secondary)]">{t('business_models.central.benefit3', 'Gestiona inventario central + puntos')}</span>
                 </li>
               </ul>
-            </div>
+              </div>
+            </ScrollReveal>
           </div>
         </div>
       </section>
 
       {/* Final CTA */}
-      <section className="py-20 bg-gradient-to-r from-[var(--color-primary)] to-orange-600">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-3xl lg:text-4xl font-bold text-white mb-6">
-            {t('cta.title', 'Ver Bakery-IA en Acción')}
-          </h2>
-          <p className="text-xl text-white/90 mb-8">
-            {t('cta.subtitle', 'Solicita una demo personalizada para tu panadería')}
-          </p>
-          <Link to={getDemoUrl()}>
-            <Button
-              size="lg"
-              className="bg-white text-[var(--color-primary)] hover:bg-gray-100 font-bold text-lg px-8 py-4"
-            >
-              {t('cta.button', 'Solicitar Demo')}
-              <ArrowRight className="ml-2 w-5 h-5" />
-            </Button>
-          </Link>
+      <section className="relative overflow-hidden py-24 bg-gradient-to-r from-[var(--color-primary)] to-orange-600">
+        {/* Animated shimmer effect */}
+        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
+
+        {/* Animated background blobs */}
+        <div className="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-pulse"></div>
+        <div className="absolute bottom-0 right-0 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }}></div>
+
+        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <ScrollReveal variant="fadeUp" delay={0.1}>
+            <div className="text-center space-y-6">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm border border-white/30 mb-4">
+                <Sparkles className="w-5 h-5 text-white" />
+                <span className="text-sm font-medium text-white">{t('cta.badge', 'Prueba Gratuita Disponible')}</span>
+              </div>
+
+              <h2 className="text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight">
+                {t('cta.title', 'Ver Bakery-IA en Acción')}
+              </h2>
+
+              <p className="text-xl lg:text-2xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed">
+                {t('cta.subtitle', 'Solicita una demo personalizada para tu panadería')}
+              </p>
+
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
+                <Link to={getDemoUrl()}>
+                  <Button
+                    size="lg"
+                    className="bg-white text-[var(--color-primary)] hover:bg-gray-50 hover:shadow-2xl font-bold text-lg px-10 py-5 transition-all duration-300 hover:scale-105 group shadow-xl"
+                  >
+                    <Sparkles className="mr-2 w-5 h-5" />
+                    {t('cta.button', 'Solicitar Demo')}
+                    <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                  </Button>
+                </Link>
+              </div>
+
+              <div className="flex items-center justify-center gap-8 pt-6 text-sm text-white/80">
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="w-5 h-5" />
+                  <span>{t('cta.feature1', 'Sin compromiso')}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="w-5 h-5" />
+                  <span>{t('cta.feature2', 'Configuración en minutos')}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="w-5 h-5" />
+                  <span>{t('cta.feature3', 'Soporte dedicado')}</span>
+                </div>
+              </div>
+            </div>
+          </ScrollReveal>
         </div>
       </section>
-        </div>
-      </div>
     </PublicLayout>
   );
 };