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>Acerca de - 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="Acerca de - 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="Acerca de - 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">
                <!-- Hero Section -->
<section class="relative bg-gradient-to-br from-secondary/5 via-background to-primary/5 py-24">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
            Acerca de 
            <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                Master Theme
            </span>
        </h1>
        
        <p class="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto mb-8">
            Un tema moderno y completo para OctoberCMS que combina las mejores tecnologías 
            de desarrollo frontend con un diseño elegante y funcional.
        </p>

        <div class="flex flex-wrap justify-center items-center gap-4 text-sm text-muted-foreground">
            <div class="flex items-center space-x-2">
                <i class="fas fa-user text-primary"></i>
                <span>Desarrollado por <strong>aero</strong></span>
            </div>
            <div class="flex items-center space-x-2">
                <i class="fas fa-calendar text-primary"></i>
                <span>2025</span>
            </div>
            <div class="flex items-center space-x-2">
                <i class="fas fa-code text-primary"></i>
                <span>OctoberCMS 4.0</span>
            </div>
        </div>
    </div>
</section>

<!-- Technology Stack -->
<section class="py-24 bg-muted/30">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
                Stack Tecnológico
            </h2>
            <p class="text-xl text-muted-foreground">
                Construido con las mejores herramientas y tecnologías modernas
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- OctoberCMS -->
            <div class="card p-6 text-center">
                <div class="w-16 h-16 bg-orange-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fab fa-laravel text-orange-500 text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-card-foreground mb-2">OctoberCMS 4</h3>
                <p class="text-sm text-muted-foreground">
                    CMS moderno basado en Laravel 12 con PHP 8.4
                </p>
            </div>

            <!-- Vite -->
            <div class="card p-6 text-center">
                <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-bolt text-purple-500 text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-card-foreground mb-2">Vite 5</h3>
                <p class="text-sm text-muted-foreground">
                    Build tool ultra-rápido con HMR para desarrollo eficiente
                </p>
            </div>

            <!-- Tailwind CSS -->
            <div class="card p-6 text-center">
                <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-lg font-semibold text-card-foreground mb-2">Tailwind CSS</h3>
                <p class="text-sm text-muted-foreground">
                    Framework CSS utility-first para diseños rápidos
                </p>
            </div>

            <!-- Alpine.js -->
            <div class="card p-6 text-center">
                <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-lg font-semibold text-card-foreground mb-2">Alpine.js</h3>
                <p class="text-sm text-muted-foreground">
                    Framework reactivo ligero con sintaxis declarativa
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Features -->
<section class="py-24">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
                Características Principales
            </h2>
            <p class="text-xl text-muted-foreground">
                Todo lo que necesitas para crear sitios web modernos y profesionales
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- PWA Support -->
            <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-blue-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-mobile-alt text-blue-500 text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-foreground mb-2">PWA Completo</h3>
                    <p class="text-muted-foreground text-sm">
                        Aplicación web progresiva con soporte offline, notificaciones push e instalación nativa.
                    </p>
                </div>
            </div>

            <!-- Dark/Light Mode -->
            <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-adjust text-purple-500 text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-foreground mb-2">Modo Oscuro/Claro</h3>
                    <p class="text-muted-foreground text-sm">
                        Sistema completo de temas con persistencia, auto-detección y transiciones suaves.
                    </p>
                </div>
            </div>

            <!-- Responsive Design -->
            <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-green-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-tablet-alt text-green-500 text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-foreground mb-2">Diseño Responsivo</h3>
                    <p class="text-muted-foreground text-sm">
                        Adaptación perfecta a todos los dispositivos y tamaños de pantalla.
                    </p>
                </div>
            </div>

            <!-- Performance Optimized -->
            <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-orange-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-rocket text-orange-500 text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-foreground mb-2">Alto Rendimiento</h3>
                    <p class="text-muted-foreground text-sm">
                        Optimizado para velocidad con code splitting, lazy loading y compresión.
                    </p>
                </div>
            </div>

            <!-- Developer Friendly -->
            <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-red-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-code text-red-500 text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-foreground mb-2">Developer Friendly</h3>
                    <p class="text-muted-foreground text-sm">
                        HMR, TypeScript support, herramientas modernas y documentación completa.
                    </p>
                </div>
            </div>

            <!-- SEO Ready -->
            <div class="flex items-start space-x-4">
                <div class="w-12 h-12 bg-indigo-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-search text-indigo-500 text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-foreground mb-2">SEO Optimizado</h3>
                    <p class="text-muted-foreground text-sm">
                        Meta tags, structured data, sitemap y optimizaciones para buscadores.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats 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-12">
            En Números
        </h2>
        
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
            <div>
                <div class="text-3xl md:text-4xl font-bold text-primary mb-2">20+</div>
                <div class="text-sm text-muted-foreground">Componentes Alpine.js</div>
            </div>
            <div>
                <div class="text-3xl md:text-4xl font-bold text-primary mb-2">100%</div>
                <div class="text-sm text-muted-foreground">Responsive Design</div>
            </div>
            <div>
                <div class="text-3xl md:text-4xl font-bold text-primary mb-2">PWA</div>
                <div class="text-sm text-muted-foreground">Ready & Installable</div>
            </div>
            <div>
                <div class="text-3xl md:text-4xl font-bold text-primary mb-2">A11Y</div>
                <div class="text-sm text-muted-foreground">Accessibility Support</div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-24">
    <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 empezar?
        </h2>
        <p class="text-xl text-muted-foreground mb-8">
            Explora todos los componentes y funcionalidades que Master Theme tiene para ofrecer
        </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/contact" 
                class="btn btn-outline btn-lg px-8"
            >
                <i class="fas fa-envelope mr-2"></i>
                Contactar
            </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>