Shared Hosting
    Consultorios Médicos
    Universidades
    Hoteles
    Supermercados
    Tiendas de Ropa
    Restaurantes
    Bancos y Entidades Financieras
    Comercio Electrónico (E-commerce)
    Centros de Atención al Cliente
    Escuelas y Academias de Idiomas
    Agencias de Publicidad y Marketing
    Farmacias
    Agencias de Viajes
    Compañías de Seguros
    Agencias de Recursos Humanos
    Consultorías en Tecnología
    Plataformas de Streaming
    Gimnasios y Centros de Bienestar
    Librerías y Editoriales
    Estudios Jurídicos
    Tiendas de Tecnología y Electrónica
    Plataformas de Capacitación Online
    Servicios de Consultoría Legal
    Empresas de Reclutamiento y Selección de Personal
    Empresas Fintech (Tecnología Financiera)
    Minas
    Plantas de Procesamiento de Alimentos
    Granjas Agrícolas
    Invernaderos Inteligentes
    Empresas de Energía Renovable
    Acuicultura y Pesca
    Plantas de Tratamiento de Agua
    Industria de la Construcción
    Automatización de Trenes y Transporte Ferroviario
    Industria Textil
    Plantas de Reciclaje
    Sistemas de Energía Inteligente en el Campo
    Industria Maderera y Forestal
    Aviación Rural (drones para control agrícola)
    Empresas de Equipos Industriales
    Plantas Químicas
    Sistemas de Refrigeración en la Industria Alimentaria
    Cultivo Vertical y Agricultura Urbana
    Riego Automatizado en Campos Agrícolas
    Sistemas de Monitoreo de Vías Fluviales
    Ganadería y Cría de Animales
    Viveros y Jardinería Comercial
    Sistemas de Control de Plagas en el Campo
    Transporte de Mercancías por Carretera en Áreas Rurales
    Cloud Hosting
    Video Streaming
    Chatbots y Asistentes Virtuales
    Lite Hosting
    Recomendadores de Productos
    Guias de compra
    Chatbots para organizaciones
    Sistemas Adaptativos
    Recomendación de Contenidos
    Tutorías Virtuales
    Corrección Automatizada
    Análisis de Progreso
    Exámenes Adaptativos
    Traducción Automática
    Servidores Dedicados
    Asistentes para Discapacidades
    Subtítulos Generados por IA
    Automatización de Procesos
    Analítica Predictiva
    Optimización de Recursos
    Desarrollo de Juegos Educativos Inteligentes
    Simulaciones y Realidad Virtual
    Asistentes Virtuales
    Mentoría Basada en Datos
    Comunidades Inteligentes
    Odoo Server
    Análisis de Clases
    Recomendación de Estrategias
    Asistentes para Planeación
    Optimización de Rutas
    Mantenimiento Predictivo
    Gestión de la Cadena de Suministro
    RPA (Robotic Process Automation)
    Automatización en TI
    Gestión de Agenda
    Procesamiento de Documentos
    Apple Servers
    Generación de Informes
    Traducción en Tiempo Real
    Asistentes de Reuniones
    Plataformas de Colaboración Inteligente
    Análisis de Currículums
    Evaluaciones Automatizadas
    Predicción de Rotación
    Monitoreo Inteligente
    Autenticación Biométrica
    Detección de Phishing
    Cluster Network
    Contabilidad Automatizada
    Presupuestación Predictiva
    Facturación Inteligente
    Asistentes de Búsqueda
    Clasificación Automática
    Sistemas de Conocimiento
    Automatización de Campañas
    Análisis de Clientes
    Optimización de Contenidos
    Seguimiento de Tareas
    Hosting Privado
    Predicción de Riesgos
    Visualización de Datos
    Asistentes para la Salud Mental
    Pausas Inteligentes
    Encuestas Anónimas
    Recomendaciones Dinámicas
    Interfaces Adaptativas
    Predicción de Intenciones
    Búsquedas Inteligentes
    Asistentes Virtuales y Chatbots
    Cloud Hosting
    Reconocimiento de Patrones de Uso
    Correo empresarial
    Audio Streaming
    Tarjetas virtuales VISA & Mastercard
    eCommerce
    Vende con nosotros
    Video streaming
    Tiendas WAP
    Cloud VPS
    WordPress Hosting
    Audio Streaming
    Moodle Hosting
    Shared Hosting
    Cloud Hosting
    Hosting Privado
    Hosting Empresarial
    Windows Hosting
    WordPress Hosting
    Odoo Server
    Correo empresarial
    Hosting Empresarial
    Video streaming
    Servidores dedicados
    Developer Hosting
    OCR + Clasificación de Documentos
    Dashboard IA de Sensores
    Kiosko con Chatbot Básico
    Texto en Imágenes (OCR)
    Transcripción Básica (Vosk)
    IA de Recomendación
    Detector de Movimiento con IA
    Hosting Empresarial
    Windows Hosting
    Medidor de Atención
    Mantenimiento Predictivo Básico
    Clasificador de Sonidos Simples
    Transcripción avanzada (Whisper)
    Reconocimiento facial offline
    Clasificación por imagen (YOLOv5)
    Seguimiento de objetos
    Analítica de video
    IA predictiva de ventas
    Anomalías en red o sensores
    Informes automáticos con IA
    Traducción de voz en tiempo real
    Análisis emocional
    Moodle Hosting
    Cloud Storage
    Correo Empresarial
    Cloud Streaming
    Cloud Backup
    Social Media
    Fábricas de Automóviles
    Amazon
    Saldo de Paypal a bolivianos
    Crédito en Meta Ads (Facebook & Instagram)
    USDT Commerce
    Shared Hosting
    Cloud Hosting
    cPanel Reseller
    WordPress Hosting
    Constructor Web
    Cloud Hosting
    Shared Hosting
    Cloud VPS
    WordPress Hosting
    Cloud Streaming
    Whats! Panel
    WhatsApp Cloud
    Tienda Whatsapp
    Trackr Satelital
    Cloud VPS
    Whats! Tiendas
    WordPress Hosting
    Cloud Hosting
    Shared Hosting
    Windows Hosting
    WordPress Hosting
    Cloud VPS
    Hosting Empresarial
    Hosting Privado
    Audio Streaming
    Moodle Hosting
    Video Streaming
    Moodle Hosting
    Black Friday
    Devs
    Cyber Monday 2023
    Navidad 2023
    PROMO 2024
    Cloud Weekend • Promociones de fin de semana
    Sucursales
    Desarrollo y Programación
    Windows Hosting
    PROMO Febrero
    Juegos
    Paypal PROMO
    Whats! CRM
    FEXCO 2024
    Windows Hosting
    Moodle Hosting
    Bases de datos
    Developer Hosting
    Hosting Corporativo
    Correo empresarial
    Cloud VPS
    Odoo Server
    Servidores dedicados
    Exchange
    Audio Streaming
    Pagos Digitales
    Importar productos
    Cloud Storage

<!DOCTYPE html>
<html lang="" x-data="{ theme: $store.theme.current }" :data-theme="$store.theme.current">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#0ea5e9">
    <meta name="color-scheme" content="dark light">
    
    <!-- SEO Meta Tags -->
    <title>Components - HOST</title>
    <meta name="description" content="Un sitio moderno con OctoberCMS">
    <meta name="keywords" content="octobercms, vite, tailwindcss, alpinejs, pwa">
    <meta name="author" content="aero">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Components - HOST">
    <meta property="og:description" content="Un sitio moderno con OctoberCMS">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="HOST">
    <meta property="og:image" content="https://clouds.com.bo/themes/master/themes/master/assets/images/og-image.jpg">
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Components - HOST">
    <meta name="twitter:description" content="Un sitio moderno con OctoberCMS">
    <meta name="twitter:image" content="https://clouds.com.bo/themes/master/themes/master/assets/images/twitter-image.jpg">

    <!-- PWA Meta Tags -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="HOST">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="msapplication-TileColor" content="#0ea5e9">
    <meta name="msapplication-tap-highlight" content="no">
    
    <!-- PWA Icons -->
    <link rel="manifest" href="https://clouds.com.bo/themes/master/assets/dist/manifest.webmanifest">

    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- DNS Prefetch -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//fonts.gstatic.com">

    <!-- Vite Development Client -->
    
    
    <!-- Critical CSS - Prevents FOUC -->
    <style>
        /* CSS Variables for theming */
        :root {
            --color-background: 255 255 255;
            --color-foreground: 15 23 42;
            --color-border: 226 232 240;
            --color-primary: 14 165 233;
        }
        
        [data-theme="dark"] {
            --color-background: 2 6 23;
            --color-foreground: 248 250 252;
            --color-border: 30 41 59;
            --color-primary: 56 189 248;
        }
        
        /* Immediate hide body to prevent FOUC */
        body {
            visibility: hidden !important;
            background-color: rgb(var(--color-background));
            color: rgb(var(--color-foreground));
            margin: 0;
            padding: 0;
            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        }
        
        body.loaded {
            visibility: visible !important;
        }
        
        /* Alpine.js x-cloak directive */
        [x-cloak] {
            display: none !important;
        }
        
        /* Preloader styles - must be inline for immediate effect */
        .page-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(var(--color-background));
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        
        .page-loader.loaded {
            opacity: 0;
            visibility: hidden;
        }
        
        .loader-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid rgb(var(--color-border));
            border-top: 3px solid rgb(var(--color-primary));
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }
        
        .loader-content {
            text-align: center;
            color: rgb(var(--color-foreground));
            font-size: 14px;
            font-weight: 500;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* Page transition styles */
        .page-transition {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .page-transition.loaded {
            opacity: 1;
            transform: translateY(0);
        }
    </style>

    <!-- Theme Initialization Script (must be before Vite) -->
    <script>
        // Initialize theme immediately to prevent flash
        (function() {
            const savedTheme = localStorage.getItem('theme');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            const shouldBeDark = savedTheme === 'dark' || (savedTheme !== 'light' && prefersDark);
            
            if (shouldBeDark) {
                document.documentElement.classList.add('dark');
                document.documentElement.setAttribute('data-theme', 'dark');
            } else {
                document.documentElement.classList.remove('dark');
                document.documentElement.setAttribute('data-theme', 'light');
            }
        })();
    </script>

    <!-- Vite Assets -->
    <link rel="stylesheet" href="https://clouds.com.bo/themes/master/assets/dist/css/style.BANFEj2o.css">
    <script type="module" src="https://clouds.com.bo/themes/master/assets/dist/js/app.CePm3WWJ.js"></script>
    
    <!-- Additional CSS -->
        
    <!-- Page-specific styles -->
    </head>

<body class="antialiased bg-background text-foreground font-sans">
    <!-- Page Loader -->
    <div id="page-loader" class="page-loader">
        <div class="loader-content">
            <div class="loader-spinner"></div>
            <p class="text-sm font-medium">Cargando...</p>
        </div>
    </div>

    <!-- Skip Navigation -->
    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 bg-primary text-primary-foreground px-4 py-2 rounded-md">
        Saltar al contenido principal
    </a>

    <!-- Main Content Wrapper -->
    <div id="main-wrapper" class="page-transition" x-cloak>

    <!-- Drawer Structure (closed by default) -->
    <div class="drawer">
        <input id="main-drawer" type="checkbox" class="drawer-toggle" />
        
        <!-- Drawer Content (Main content) -->
        <div class="drawer-content flex flex-col">
            <!-- Navigation -->
            <nav 
    x-data="mobileNav"
    class="bg-background/80 backdrop-blur-md border-b border-border sticky top-0 z-40"
>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <!-- Logo -->
            <div class="flex-shrink-0 flex items-center space-x-3">
                <!-- Drawer Toggle - Components Menu -->
                <label for="main-drawer" class="p-2 rounded-lg text-foreground hover:bg-accent hover:text-accent-foreground transition-all duration-200 cursor-pointer" title="Componentes">
                    <i class="fas fa-bars text-lg text-gray-300"></i>
                </label>
                <a 
                    href="https://clouds.com.bo" 
                    class="flex items-center space-x-2 text-xl font-bold text-foreground hover:text-primary transition-colors"
                >
                    <span class="font-extrabold">HOST</span>
                </a>
            </div>

            <!-- Desktop Navigation -->
            <div class="hidden md:block">
                <div class="flex items-center space-x-8">
                    <a 
                        href="https://clouds.com.bo" 
                        class="nav-link "
                    >
                        Inicio
                    </a>
                    <a 
                        href="https://clouds.com.bo/about" 
                        class="nav-link "
                    >
                        Acerca
                    </a>
                    <a 
                        href="https://clouds.com.bo/contact" 
                        class="nav-link "
                    >
                        Contacto
                    </a>
                    
                    <!-- Components Dropdown -->
                    <div 
                        x-data="dropdown"
                        class="relative"
                    >
                        <button 
                            @click="toggle()"
                            class="nav-link flex items-center space-x-1"
                        >
                            <span>Servicios</span>
                            <i class="fas fa-chevron-down text-xs transition-transform" :class="{ 'rotate-180': open }"></i>
                        </button>
                        
                        <div 
                            x-show="open"
                            @click.away="close()"
                            x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 transform scale-95"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="opacity-100 transform scale-100"
                            x-transition:leave-end="opacity-0 transform scale-95"
                            class="absolute right-0 mt-2 w-56 bg-card border rounded-lg shadow-lg py-1 z-50"
                        >
                            <a 
                                href="https://clouds.com.bo/components/buttons" 
                                class="block px-4 py-2 text-sm text-card-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
                            >
                                <i class="fas fa-mouse-pointer w-4 mr-2"></i>
                                Buttons
                            </a>
                            <a 
                                href="https://clouds.com.bo/components/forms" 
                                class="block px-4 py-2 text-sm text-card-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
                            >
                                <i class="fas fa-edit w-4 mr-2"></i>
                                Forms
                            </a>
                            <a 
                                href="https://clouds.com.bo/components/cards" 
                                class="block px-4 py-2 text-sm text-card-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
                            >
                                <i class="fas fa-id-card w-4 mr-2"></i>
                                Cards
                            </a>
                            <a 
                                href="https://clouds.com.bo/components/modals" 
                                class="block px-4 py-2 text-sm text-card-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
                            >
                                <i class="fas fa-window-restore w-4 mr-2"></i>
                                Modals
                            </a>
                            <div class="border-t border-border my-1"></div>
                            <a 
                                href="https://clouds.com.bo/components" 
                                class="block px-4 py-2 text-sm text-primary hover:bg-accent transition-colors"
                            >
                                <i class="fas fa-th-large w-4 mr-2"></i>
                                Ver todos
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Side Items -->
            <div class="flex items-center space-x-4">
                <!-- Theme Toggle -->
                <button 
                    x-data="{ 
                        isDark: document.documentElement.classList.contains('dark'),
                        toggle() {
                            this.isDark = !this.isDark;
                            if (this.isDark) {
                                document.documentElement.classList.add('dark');
                                document.documentElement.setAttribute('data-theme', 'dark');
                                localStorage.setItem('theme', 'dark');
                            } else {
                                document.documentElement.classList.remove('dark');
                                document.documentElement.setAttribute('data-theme', 'light');
                                localStorage.setItem('theme', 'light');
                            }
                        }
                    }"
                    @click="toggle()"
                    class="p-2 rounded-lg text-foreground hover:bg-accent hover:text-accent-foreground transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20"
                    :aria-label="'Switch to ' + (isDark ? 'light' : 'dark') + ' mode'"
                    :title="'Switch to ' + (isDark ? 'light' : 'dark') + ' mode'"
                >
                    <i 
                        class="fas text-lg transition-all duration-300"
                        :class="isDark ? 'fa-sun text-yellow-400' : 'fa-moon text-slate-600 dark:text-slate-400'"
                    ></i>
                </button>

                <!-- Search Button -->
                <button 
                    x-data="{ searchOpen: false }"
                    @click="searchOpen = true"
                    class="p-2 rounded-lg text-foreground hover:bg-accent hover:text-accent-foreground transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20"
                    title="Buscar"
                >
                    <i class="fas fa-search text-lg"></i>
                </button>

                <!-- Mobile menu button -->
                <button 
                    @click="toggle()"
                    class="md:hidden p-2 rounded-lg text-foreground hover:bg-accent hover:text-accent-foreground transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20"
                    :aria-expanded="isOpen"
                    aria-label="Toggle navigation menu"
                >
                    <i 
                        class="fas text-lg transition-transform duration-200" 
                        :class="isOpen ? 'fa-times' : 'fa-ellipsis-vertical'"
                    ></i>
                </button>
            </div>
        </div>

        <!-- Mobile Navigation -->
        <div 
            x-show="isOpen"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 transform -translate-y-2"
            x-transition:enter-end="opacity-100 transform translate-y-0"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 transform translate-y-0"
            x-transition:leave-end="opacity-0 transform -translate-y-2"
            class="md:hidden border-t border-border"
        >
            <div class="px-2 pt-2 pb-3 space-y-1 bg-background">
                <a 
                    href="https://clouds.com.bo" 
                    @click="close()"
                    class="block px-3 py-2 rounded-md text-base font-medium nav-link "
                >
                    Inicio
                </a>
                <a 
                    href="https://clouds.com.bo/about" 
                    @click="close()"
                    class="block px-3 py-2 rounded-md text-base font-medium nav-link "
                >
                    Acerca
                </a>
                <a 
                    href="https://clouds.com.bo/contact" 
                    @click="close()"
                    class="block px-3 py-2 rounded-md text-base font-medium nav-link "
                >
                    Contacto
                </a>
                
                <!-- Mobile Components Menu -->
                <div x-data="{ componentsOpen: false }">
                    <button 
                        @click="componentsOpen = !componentsOpen"
                        class="w-full text-left px-3 py-2 rounded-md text-base font-medium nav-link flex items-center justify-between"
                    >
                        <span>Componentes</span>
                        <i 
                            class="fas fa-chevron-right text-xs transition-transform" 
                            :class="{ 'rotate-90': componentsOpen }"
                        ></i>
                    </button>
                    
                    <div 
                        x-show="componentsOpen"
                        x-transition
                        class="pl-6 space-y-1"
                    >
                        <a 
                            href="https://clouds.com.bo/components/buttons" 
                            @click="close()"
                            class="block px-3 py-2 rounded-md text-sm nav-link"
                        >
                            <i class="fas fa-mouse-pointer w-4 mr-2"></i>
                            Buttons
                        </a>
                        <a 
                            href="https://clouds.com.bo/components/forms" 
                            @click="close()"
                            class="block px-3 py-2 rounded-md text-sm nav-link"
                        >
                            <i class="fas fa-edit w-4 mr-2"></i>
                            Forms
                        </a>
                        <a 
                            href="https://clouds.com.bo/components/cards" 
                            @click="close()"
                            class="block px-3 py-2 rounded-md text-sm nav-link"
                        >
                            <i class="fas fa-id-card w-4 mr-2"></i>
                            Cards
                        </a>
                        <a 
                            href="https://clouds.com.bo/components/modals" 
                            @click="close()"
                            class="block px-3 py-2 rounded-md text-sm nav-link"
                        >
                            <i class="fas fa-window-restore w-4 mr-2"></i>
                            Modals
                        </a>
                        <a 
                            href="https://clouds.com.bo/components" 
                            @click="close()"
                            class="block px-3 py-2 rounded-md text-sm text-primary"
                        >
                            <i class="fas fa-th-large w-4 mr-2"></i>
                            Ver todos
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- Global Search Modal -->
<div 
    x-data="{ 
        searchOpen: false, 
        query: '', 
        results: [] 
    }"
    @keydown.escape.window="searchOpen = false"
    @keydown.cmd.k.window.prevent="searchOpen = true"
    @keydown.ctrl.k.window.prevent="searchOpen = true"
    x-init="$watch('searchOpen', value => value && $nextTick(() => $refs.searchInput.focus()))"
>
    <div 
        x-show="searchOpen"
        @click="searchOpen = false"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
    ></div>

    <div 
        x-show="searchOpen"
        @click.stop
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 transform scale-95"
        x-transition:enter-end="opacity-100 transform scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 transform scale-100"
        x-transition:leave-end="opacity-0 transform scale-95"
        class="fixed inset-x-4 top-16 md:inset-x-auto md:left-1/2 md:transform md:-translate-x-1/2 md:w-full md:max-w-2xl bg-card border rounded-lg shadow-xl z-50"
    >
        <div class="p-4">
            <div class="relative">
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground"></i>
                <input 
                    x-ref="searchInput"
                    x-model="query"
                    type="text"
                    placeholder="Buscar páginas, componentes..."
                    class="input pl-10 pr-4"
                >
                <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-xs text-muted-foreground">
                    <kbd class="px-2 py-1 bg-muted rounded text-xs">ESC</kbd>
                </div>
            </div>
            
            <div class="mt-4" x-show="query.length > 0">
                <div class="text-sm text-muted-foreground mb-2">
                    Resultados para "<span x-text="query"></span>"
                </div>
                
                <div class="space-y-2 max-h-64 overflow-y-auto">
                    <!-- Mock search results -->
                    <a 
                        href="https://clouds.com.bo" 
                        @click="searchOpen = false"
                        class="block p-3 rounded-lg hover:bg-accent transition-colors"
                    >
                        <div class="font-medium text-sm">Página de Inicio</div>
                        <div class="text-xs text-muted-foreground">Página principal del sitio</div>
                    </a>
                    <a 
                        href="https://clouds.com.bo/components" 
                        @click="searchOpen = false"
                        class="block p-3 rounded-lg hover:bg-accent transition-colors"
                    >
                        <div class="font-medium text-sm">Componentes</div>
                        <div class="text-xs text-muted-foreground">Galería de componentes UI</div>
                    </a>
                    <a 
                        href="https://clouds.com.bo/about" 
                        @click="searchOpen = false"
                        class="block p-3 rounded-lg hover:bg-accent transition-colors"
                    >
                        <div class="font-medium text-sm">Acerca de</div>
                        <div class="text-xs text-muted-foreground">Información sobre el proyecto</div>
                    </a>
                </div>
            </div>
        </div>
        
        <div class="border-t border-border px-4 py-3 text-xs text-muted-foreground flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <div class="flex items-center space-x-1">
                    <kbd class="px-2 py-1 bg-muted rounded">↵</kbd>
                    <span>to select</span>
                </div>
                <div class="flex items-center space-x-1">
                    <kbd class="px-2 py-1 bg-muted rounded">↑↓</kbd>
                    <span>to navigate</span>
                </div>
            </div>
            <div>
                <span>Search by</span>
                <span class="font-medium">aero</span>
            </div>
        </div>
    </div>
</div>
            <!-- Main Content -->
            <main id="main-content" class="flex-1 min-h-screen">
                <!-- Features Section -->
<section class="py-24 bg-muted/30">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-6xl font-bold text-base-content mb-4">
                Características Principales
            </h2>
            <p class="text-xl text-base-content/70 max-w-3xl mx-auto">
                Todo lo que necesitas para crear experiencias web modernas y excepcionales
            </p>
        </div>

        <!-- Features Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Feature 1: Vite -->
            <div 
                x-data="{ hovered: false }"
                @mouseenter="hovered = true"
                @mouseleave="hovered = false"
                class="card p-6 text-center transition-transform hover:scale-105"
                :class="{ 'shadow-lg': hovered }"
            >
                <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-bolt text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-card-foreground mb-2">Vite Development</h3>
                <p class="text-muted-foreground text-sm">
                    Hot Module Replacement (HMR) ultra-rápido para desarrollo eficiente
                </p>
            </div>

            <!-- Feature 2: Tailwind -->
            <div 
                x-data="{ hovered: false }"
                @mouseenter="hovered = true"
                @mouseleave="hovered = false"
                class="card p-6 text-center transition-transform hover:scale-105"
                :class="{ 'shadow-lg': hovered }"
            >
                <div class="w-16 h-16 bg-cyan-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-wind text-cyan-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-card-foreground mb-2">Tailwind CSS</h3>
                <p class="text-muted-foreground text-sm">
                    Framework CSS utility-first para diseños rápidos y personalizables
                </p>
            </div>

            <!-- Feature 3: Alpine.js -->
            <div 
                x-data="{ hovered: false }"
                @mouseenter="hovered = true"
                @mouseleave="hovered = false"
                class="card p-6 text-center transition-transform hover:scale-105"
                :class="{ 'shadow-lg': hovered }"
            >
                <div class="w-16 h-16 bg-green-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-mountain text-green-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-card-foreground mb-2">Alpine.js</h3>
                <p class="text-muted-foreground text-sm">
                    Reactividad ligera con sintaxis declarativa y componentes reutilizables
                </p>
            </div>

            <!-- Feature 4: PWA -->
            <div 
                x-data="{ hovered: false }"
                @mouseenter="hovered = true"
                @mouseleave="hovered = false"
                class="card p-6 text-center transition-transform hover:scale-105"
                :class="{ 'shadow-lg': hovered }"
            >
                <div class="w-16 h-16 bg-blue-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-mobile-alt text-blue-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-card-foreground mb-2">Progressive Web App</h3>
                <p class="text-muted-foreground text-sm">
                    Aplicación instalable con soporte offline y notificaciones push
                </p>
            </div>

            <!-- Feature 5: Dark Mode -->
            <div 
                x-data="{ hovered: false }"
                @mouseenter="hovered = true"
                @mouseleave="hovered = false"
                class="card p-6 text-center transition-transform hover:scale-105"
                :class="{ 'shadow-lg': hovered }"
            >
                <div class="w-16 h-16 bg-purple-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-moon text-purple-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-card-foreground mb-2">Dark/Light Mode</h3>
                <p class="text-muted-foreground text-sm">
                    Sistema de temas completo con persistencia y auto-detección
                </p>
            </div>

            <!-- Feature 6: Performance -->
            <div 
                x-data="{ hovered: false }"
                @mouseenter="hovered = true"
                @mouseleave="hovered = false"
                class="card p-6 text-center transition-transform hover:scale-105"
                :class="{ 'shadow-lg': hovered }"
            >
                <div class="w-16 h-16 bg-orange-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-rocket text-orange-500 text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-card-foreground mb-2">Alto Rendimiento</h3>
                <p class="text-muted-foreground text-sm">
                    Optimizado para velocidad con code splitting y lazy loading
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Demo Components Section -->
<section class="py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
                Componentes Demo
            </h2>
            <p class="text-xl text-muted-foreground max-w-3xl mx-auto">
                Explora algunos de los componentes interactivos incluidos
            </p>
        </div>

        <!-- Components Demo Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <!-- Carousel Demo -->
            <div class="space-y-4">
                <h3 class="text-xl font-semibold text-foreground">Carousel Interactivo</h3>
                <div 
                    x-data="carousel([
                        { title: 'Slide 1', description: 'Primer elemento del carousel', color: 'bg-primary' },
                        { title: 'Slide 2', description: 'Segundo elemento del carousel', color: 'bg-secondary' },
                        { title: 'Slide 3', description: 'Tercer elemento del carousel', color: 'bg-accent' }
                    ])"
                    class="relative"
                >
                    <!-- Carousel Container -->
                    <div class="relative h-64 bg-muted rounded-lg overflow-hidden">
                        <template x-for="(item, index) in items" :key="index">
                            <div 
                                x-show="currentIndex === index"
                                x-transition:enter="transition ease-out duration-300"
                                x-transition:enter-start="opacity-0 transform translate-x-full"
                                x-transition:enter-end="opacity-100 transform translate-x-0"
                                x-transition:leave="transition ease-in duration-300"
                                x-transition:leave-start="opacity-100 transform translate-x-0"
                                x-transition:leave-end="opacity-0 transform -translate-x-full"
                                class="absolute inset-0 flex items-center justify-center text-white"
                                :class="item.color"
                            >
                                <div class="text-center">
                                    <h4 class="text-2xl font-bold mb-2" x-text="item.title"></h4>
                                    <p x-text="item.description"></p>
                                </div>
                            </div>
                        </template>

                        <!-- Navigation Arrows -->
                        <button 
                            @click="previous()"
                            class="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-black/20 hover:bg-black/40 rounded-full flex items-center justify-center text-white transition-colors"
                        >
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button 
                            @click="next()"
                            class="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-black/20 hover:bg-black/40 rounded-full flex items-center justify-center text-white transition-colors"
                        >
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>

                    <!-- Dots Indicator -->
                    <div class="flex justify-center space-x-2 mt-4">
                        <template x-for="(item, index) in items" :key="index">
                            <button 
                                @click="goTo(index)"
                                class="w-3 h-3 rounded-full transition-colors"
                                :class="currentIndex === index ? 'bg-primary' : 'bg-muted-foreground/30'"
                            ></button>
                        </template>
                    </div>
                </div>
            </div>

            <!-- Tabs Demo -->
            <div class="space-y-4">
                <h3 class="text-xl font-semibold text-foreground">Sistema de Tabs</h3>
                <div x-data="tabs(0)">
                    <!-- Tab Headers -->
                    <div class="flex border-b border-border">
                        <button 
                            @click="setTab(0)"
                            class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
                            :class="isActive(0) ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'"
                        >
                            <i class="fas fa-home mr-2"></i>
                            Inicio
                        </button>
                        <button 
                            @click="setTab(1)"
                            class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
                            :class="isActive(1) ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'"
                        >
                            <i class="fas fa-cog mr-2"></i>
                            Configuración
                        </button>
                        <button 
                            @click="setTab(2)"
                            class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
                            :class="isActive(2) ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'"
                        >
                            <i class="fas fa-info-circle mr-2"></i>
                            Info
                        </button>
                    </div>

                    <!-- Tab Content -->
                    <div class="pt-4">
                        <div x-show="isActive(0)" x-transition class="space-y-4">
                            <h4 class="font-semibold text-foreground">Panel de Inicio</h4>
                            <p class="text-muted-foreground">
                                Este es el contenido del tab de inicio. Aquí puedes mostrar la información principal de tu aplicación.
                            </p>
                        </div>
                        
                        <div x-show="isActive(1)" x-transition class="space-y-4">
                            <h4 class="font-semibold text-foreground">Configuración</h4>
                            <p class="text-muted-foreground">
                                Panel de configuración donde los usuarios pueden personalizar su experiencia.
                            </p>
                        </div>
                        
                        <div x-show="isActive(2)" x-transition class="space-y-4">
                            <h4 class="font-semibold text-foreground">Información</h4>
                            <p class="text-muted-foreground">
                                Información adicional sobre la aplicación y sus características.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Interactive Buttons -->
        <div class="mt-16 text-center">
            <h3 class="text-xl font-semibold text-foreground mb-8">Botones Interactivos</h3>
            <div class="flex flex-wrap justify-center gap-4">
                <button 
                    @click="$store.toast.success('¡Acción exitosa!')"
                    class="btn btn-primary"
                >
                    <i class="fas fa-check mr-2"></i>
                    Success Toast
                </button>
                <button 
                    @click="$store.toast.error('Error simulado')"
                    class="btn btn-secondary"
                >
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Error Toast
                </button>
                <button 
                    @click="$store.toast.warning('Advertencia importante')"
                    class="btn btn-outline"
                >
                    <i class="fas fa-info-circle mr-2"></i>
                    Warning Toast
                </button>
                <button 
                    x-data="modal()"
                    @click="show()"
                    class="btn btn-ghost"
                >
                    <i class="fas fa-window-restore mr-2"></i>
                    Abrir Modal
                </button>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-24 bg-gradient-to-r from-primary/10 to-secondary/10">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">
            ¿Listo para comenzar?
        </h2>
        <p class="text-xl text-muted-foreground mb-8">
            Explora todos los componentes y características que Master Theme tiene para ofrecerte
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a 
                href="https://clouds.com.bo/components" 
                class="btn btn-primary btn-lg px-8"
            >
                <i class="fas fa-palette mr-2"></i>
                Ver Componentes
            </a>
            <a 
                href="https://clouds.com.bo/about" 
                class="btn btn-outline btn-lg px-8"
            >
                <i class="fas fa-info-circle mr-2"></i>
                Más Información
            </a>
        </div>
    </div>
</section>            </main>
        </div>
        
        <!-- Drawer Side -->
        <div class="drawer-side z-50">
            <label for="main-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
            <aside class="min-h-full w-72 bg-base-200 text-base-content shadow-xl">
                <!-- Drawer Header -->
<div class="p-4 border-b border-base-300">
    <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold">
            <i class="fas fa-th-large mr-2 text-primary"></i>
            Componentes
        </h2>
        <label for="main-drawer" class="btn btn-ghost btn-sm lg:hidden">
            <i class="fas fa-times"></i>
        </label>
    </div>
</div>

<!-- Drawer Menu -->
<div class="p-4">
    <!-- Components Section -->
    <div class="mb-6">
        <h3 class="text-sm font-medium text-base-content/70 uppercase tracking-wide mb-3">
            UI Components
        </h3>
        <ul class="menu menu-sm w-full">
            <li>
                <a href="https://clouds.com.bo/components/buttons" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-mouse-pointer w-4"></i>
                    <span>Buttons</span>
                </a>
            </li>
            <li>
                <a href="https://clouds.com.bo/components/forms" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-edit w-4"></i>
                    <span>Forms</span>
                </a>
            </li>
            <li>
                <a href="https://clouds.com.bo/components/cards" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-id-card w-4"></i>
                    <span>Cards</span>
                </a>
            </li>
            <li>
                <a href="https://clouds.com.bo/components/modals" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-window-restore w-4"></i>
                    <span>Modals</span>
                </a>
            </li>
            <li>
                <a href="https://clouds.com.bo/components/tables" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-table w-4"></i>
                    <span>Tables</span>
                </a>
            </li>
            <li>
                <a href="https://clouds.com.bo/components/navigation" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-compass w-4"></i>
                    <span>Navigation</span>
                </a>
            </li>
        </ul>
    </div>

    <!-- Layout Section -->
    <div class="mb-6">
        <h3 class="text-sm font-medium text-base-content/70 uppercase tracking-wide mb-3">
            Layout
        </h3>
        <ul class="menu menu-sm w-full">
            <li>
                <a href="https://clouds.com.bo/components/grids" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-th w-4"></i>
                    <span>Grids</span>
                </a>
            </li>
            <li>
                <a href="https://clouds.com.bo/components/containers" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-square w-4"></i>
                    <span>Containers</span>
                </a>
            </li>
            <li>
                <a href="https://clouds.com.bo/components/dividers" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-minus w-4"></i>
                    <span>Dividers</span>
                </a>
            </li>
        </ul>
    </div>

    <!-- Data Display Section -->
    <div class="mb-6">
        <h3 class="text-sm font-medium text-base-content/70 uppercase tracking-wide mb-3">
            Data Display
        </h3>
        <ul class="menu menu-sm w-full">
            <li>
                <a href="https://clouds.com.bo/components/badges" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-tag w-4"></i>
                    <span>Badges</span>
                </a>
            </li>
            <li>
                <a href="https://clouds.com.bo/components/avatars" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-user-circle w-4"></i>
                    <span>Avatars</span>
                </a>
            </li>
            <li>
                <a href="https://clouds.com.bo/components/progress" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-chart-line w-4"></i>
                    <span>Progress</span>
                </a>
            </li>
            <li>
                <a href="https://clouds.com.bo/components/stats" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-chart-bar w-4"></i>
                    <span>Stats</span>
                </a>
            </li>
        </ul>
    </div>

    <!-- Feedback Section -->
    <div class="mb-6">
        <h3 class="text-sm font-medium text-base-content/70 uppercase tracking-wide mb-3">
            Feedback
        </h3>
        <ul class="menu menu-sm w-full">
            <li>
                <a href="https://clouds.com.bo/components/alerts" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-exclamation-triangle w-4"></i>
                    <span>Alerts</span>
                </a>
            </li>
            <li>
                <a href="https://clouds.com.bo/components/toasts" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-bell w-4"></i>
                    <span>Toasts</span>
                </a>
            </li>
            <li>
                <a href="https://clouds.com.bo/components/loading" class="flex items-center" onclick="document.getElementById('main-drawer').checked = false">
                    <i class="fas fa-spinner w-4"></i>
                    <span>Loading</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<!-- Drawer Footer -->
<div class="mt-auto p-4 border-t border-base-300">
    <div class="text-center">
        <p class="text-xs text-base-content/60">
            Master Theme v1.0
        </p>
        <p class="text-xs text-base-content/60">
            Powered by 
            <span class="font-medium text-primary">aero</span>
        </p>
    </div>
</div>            </aside>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-muted/50 border-t border-border mt-auto">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Brand Column -->
            <div class="lg:col-span-1">
                <div class="flex items-center space-x-2 mb-4">
                    <i class="fas fa-bolt text-primary text-xl"></i>
                    <span class="text-xl font-bold text-foreground">HOST</span>
                </div>
                <p class="text-muted-foreground text-sm leading-relaxed mb-4">
                    Un sitio moderno con OctoberCMS
                </p>
                
                <!-- Social Links -->
                <div class="flex items-center space-x-4">
                    <a 
                        href="#" 
                        class="text-muted-foreground hover:text-primary transition-colors"
                        title="Twitter"
                    >
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a 
                        href="#" 
                        class="text-muted-foreground hover:text-primary transition-colors"
                        title="GitHub"
                    >
                        <i class="fab fa-github"></i>
                    </a>
                    <a 
                        href="#" 
                        class="text-muted-foreground hover:text-primary transition-colors"
                        title="LinkedIn"
                    >
                        <i class="fab fa-linkedin"></i>
                    </a>
                    <a 
                        href="#" 
                        class="text-muted-foreground hover:text-primary transition-colors"
                        title="Discord"
                    >
                        <i class="fab fa-discord"></i>
                    </a>
                </div>
            </div>

            <!-- Quick Links -->
            <div>
                <h3 class="font-semibold text-foreground mb-4">Enlaces Rápidos</h3>
                <ul class="space-y-3">
                    <li>
                        <a 
                            href="https://clouds.com.bo" 
                            class="text-muted-foreground hover:text-primary transition-colors text-sm"
                        >
                            Inicio
                        </a>
                    </li>
                    <li>
                        <a 
                            href="https://clouds.com.bo/about" 
                            class="text-muted-foreground hover:text-primary transition-colors text-sm"
                        >
                            Acerca de
                        </a>
                    </li>
                    <li>
                        <a 
                            href="https://clouds.com.bo/contact" 
                            class="text-muted-foreground hover:text-primary transition-colors text-sm"
                        >
                            Contacto
                        </a>
                    </li>
                    <li>
                        <a 
                            href="https://clouds.com.bo/blog" 
                            class="text-muted-foreground hover:text-primary transition-colors text-sm"
                        >
                            Blog
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Components -->
            <div>
                <h3 class="font-semibold text-foreground mb-4">Componentes</h3>
                <ul class="space-y-3">
                    <li>
                        <a 
                            href="https://clouds.com.bo/components/buttons" 
                            class="text-muted-foreground hover:text-primary transition-colors text-sm"
                        >
                            Buttons
                        </a>
                    </li>
                    <li>
                        <a 
                            href="https://clouds.com.bo/components/forms" 
                            class="text-muted-foreground hover:text-primary transition-colors text-sm"
                        >
                            Forms
                        </a>
                    </li>
                    <li>
                        <a 
                            href="https://clouds.com.bo/components/cards" 
                            class="text-muted-foreground hover:text-primary transition-colors text-sm"
                        >
                            Cards
                        </a>
                    </li>
                    <li>
                        <a 
                            href="https://clouds.com.bo/components/modals" 
                            class="text-muted-foreground hover:text-primary transition-colors text-sm"
                        >
                            Modals
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Tech Stack -->
            <div>
                <h3 class="font-semibold text-foreground mb-4">Tecnologías</h3>
                <ul class="space-y-3">
                    <li>
                        <a 
                            href="https://octobercms.com" 
                            target="_blank" 
                            class="text-muted-foreground hover:text-primary transition-colors text-sm flex items-center space-x-2"
                        >
                            <span>OctoberCMS</span>
                            <i class="fas fa-external-link-alt text-xs"></i>
                        </a>
                    </li>
                    <li>
                        <a 
                            href="https://vitejs.dev" 
                            target="_blank" 
                            class="text-muted-foreground hover:text-primary transition-colors text-sm flex items-center space-x-2"
                        >
                            <span>Vite</span>
                            <i class="fas fa-external-link-alt text-xs"></i>
                        </a>
                    </li>
                    <li>
                        <a 
                            href="https://tailwindcss.com" 
                            target="_blank" 
                            class="text-muted-foreground hover:text-primary transition-colors text-sm flex items-center space-x-2"
                        >
                            <span>Tailwind CSS</span>
                            <i class="fas fa-external-link-alt text-xs"></i>
                        </a>
                    </li>
                    <li>
                        <a 
                            href="https://alpinejs.dev" 
                            target="_blank" 
                            class="text-muted-foreground hover:text-primary transition-colors text-sm flex items-center space-x-2"
                        >
                            <span>Alpine.js</span>
                            <i class="fas fa-external-link-alt text-xs"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Bottom Bar -->
        <div class="border-t border-border pt-8 mt-8">
            <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                <!-- Copyright -->
                <div class="text-sm text-muted-foreground">
                    © 2025 HOST. 
                    <span>Desarrollado por</span>
                    <a href="#" class="text-primary hover:underline">aero</a>
                    <span>con</span>
                    <i class="fas fa-heart text-red-500 mx-1"></i>
                </div>

                <!-- Tech Stack Badge -->
                <div class="flex items-center space-x-4 text-xs text-muted-foreground">
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-bolt text-yellow-500"></i>
                        <span>Powered by Vite</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-mobile-alt text-blue-500"></i>
                        <span>PWA Ready</span>
                    </div>
                    <div class="flex items-center space-x-2" x-data="{ isDark: $store.theme.current === 'dark' }">
                        <i class="fas fa-moon text-purple-500" x-show="isDark"></i>
                        <i class="fas fa-sun text-yellow-500" x-show="!isDark"></i>
                        <span x-text="isDark ? 'Dark Mode' : 'Light Mode'"></span>
                    </div>
                </div>

                <!-- Back to Top -->
                <button 
                    @click="window.scrollTo({ top: 0, behavior: 'smooth' })"
                    class="btn btn-outline btn-sm"
                    title="Volver arriba"
                >
                    <i class="fas fa-arrow-up"></i>
                    <span class="ml-2 hidden sm:inline">Arriba</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Performance Info (Development Only) -->
    </footer>    
    </div> <!-- End Main Content Wrapper -->

    <!-- Toast Notifications -->
    <div 
        x-data="toastContainer"
        class="fixed top-4 right-4 z-50 space-y-2"
        x-show="notifications.length > 0"
        x-transition
    >
        <template x-for="notification in notifications" :key="notification.id">
            <div 
                class="toast animate-slide-down"
                :class="{
                    'toast-success': notification.type === 'success',
                    'toast-error': notification.type === 'error',
                    'toast-warning': notification.type === 'warning'
                }"
                x-show="true"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 transform translate-x-full"
                x-transition:enter-end="opacity-100 transform translate-x-0"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="opacity-100 transform translate-x-0"
                x-transition:leave-end="opacity-0 transform translate-x-full"
            >
                <div class="flex items-center space-x-3">
                    <div 
                        class="flex-shrink-0"
                        x-show="notification.type === 'success'"
                    >
                        <i class="fas fa-check-circle text-green-500"></i>
                    </div>
                    <div 
                        class="flex-shrink-0"
                        x-show="notification.type === 'error'"
                    >
                        <i class="fas fa-times-circle text-red-500"></i>
                    </div>
                    <div 
                        class="flex-shrink-0"
                        x-show="notification.type === 'warning'"
                    >
                        <i class="fas fa-exclamation-triangle text-yellow-500"></i>
                    </div>
                    <div 
                        class="flex-shrink-0"
                        x-show="notification.type === 'info'"
                    >
                        <i class="fas fa-info-circle text-blue-500"></i>
                    </div>
                    <div class="flex-1">
                        <p class="text-sm font-medium" x-text="notification.message"></p>
                    </div>
                    <div class="flex-shrink-0">
                        <button 
                            @click="remove(notification.id)"
                            class="text-muted-foreground hover:text-foreground transition-colors"
                        >
                            <i class="fas fa-times text-xs"></i>
                        </button>
                    </div>
                </div>
            </div>
        </template>
    </div>

    <!-- PWA Install Prompt - Bottom left position -->
    <div 
        x-data="pwaInstall"
        x-show="show"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 transform translate-y-full"
        x-transition:enter-end="opacity-100 transform translate-y-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 transform translate-y-0"
        x-transition:leave-end="opacity-0 transform translate-y-full"
        class="fixed bottom-4 left-4 z-40 bg-card border border-border rounded-lg shadow-lg p-3 max-w-sm"
    >
        <div class="flex items-start space-x-3">
            <div class="flex-shrink-0">
                <i class="fas fa-mobile-alt text-primary text-sm"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-xs font-medium text-card-foreground">
                    Instalar App
                </p>
                <p class="text-xs text-muted-foreground mt-1">
                    Acceso rápido y offline
                </p>
            </div>
            <div class="flex items-center space-x-1">
                <button 
                    @click="install()"
                    class="text-xs bg-primary text-primary-foreground px-2 py-1 rounded hover:bg-primary/90 transition-colors"
                >
                    Instalar
                </button>
                <button 
                    @click="dismiss()"
                    class="text-muted-foreground hover:text-foreground p-1 transition-colors"
                >
                    <i class="fas fa-times text-xs"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Additional JavaScript -->
        
    <!-- Page-specific scripts -->
    
    <!-- Development Tools -->
    
    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "HOST",
        "description": "Un sitio moderno con OctoberCMS",
        "url": "",
        "author": {
            "@type": "Person",
            "name": "aero"
        }
    }
    </script>

    <!-- Page Load Manager -->
    <script>
        // Immediate fallback to prevent infinite loading
        let contentShown = false;
        
        function showContent() {
            if (contentShown) return;
            contentShown = true;
            
            const loader = document.getElementById('page-loader');
            const wrapper = document.getElementById('main-wrapper');
            const body = document.body;
            
            console.log('Showing content...');
            
            // Add loaded class to body first
            body.classList.add('loaded');
            
            // Small delay to ensure styles are applied
            setTimeout(() => {
                if (loader) {
                    loader.classList.add('loaded');
                }
                if (wrapper) {
                    wrapper.classList.add('loaded');
                }
            }, 100);
            
            // Remove loader from DOM after transition
            setTimeout(() => {
                if (loader) {
                    loader.remove();
                }
            }, 600);
        }
        
        // Multiple triggers to ensure content shows
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM Content Loaded');
            
            // Wait for Alpine.js to be ready
            document.addEventListener('alpine:init', () => {
                console.log('Alpine initialized');
                setTimeout(showContent, 100);
            });
            
            // Shorter fallback
            setTimeout(showContent, 500);
        });
        
        // Immediate fallback for slow connections
        setTimeout(showContent, 2000);
        
        // Handle page visibility changes
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden) {
                // Page became visible, ensure content is shown
                showContent();
            }
        });
        
        // Handle browser navigation (back/forward buttons)
        window.addEventListener('pageshow', function(event) {
            // Reset any transition styles when page is shown (including back navigation)
            const wrapper = document.getElementById('main-wrapper');
            const body = document.body;
            
            if (wrapper) {
                wrapper.style.opacity = '';
                wrapper.style.transform = '';
                wrapper.classList.add('loaded');
            }
            
            if (body) {
                body.classList.add('loaded');
            }
            
            // Force content to be visible
            showContent();
        });
    </script>
</body>
</html>