<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SoloJoomla - Servicios de SEO y Diseño Web con Joomla</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="Creamos webs Joomla rápidas, seguras y optimizadas, con diseño profesional y SEO estratégico para mejorar tu presencia en Google.">
    <meta name="keywords" content="SoloJoomla, Joomla SEO, Diseño Web Joomla, Desarrollo Joomla, Joomla Developer, Agencia Joomla, SEO Técnico, Core Web Vitals, Joomla Security">
    <meta name="author" content="SoloJoomla">
    <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
    <link rel="canonical" href="https://www.solojoomla.com/">
    <link rel="alternate" hreflang="en" href="https://www.solojoomla.com/en/" />
    <link rel="alternate" hreflang="es" href="https://www.solojoomla.com/" />
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBQVJ3EZZM"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-JBQVJ3EZZM');
    </script>
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.solojoomla.com/">
    <meta property="og:title" content="SoloJoomla - Servicios de SEO y Diseño Web con Joomla">
    <meta property="og:description" content="Especialistas en Desarrollo Web y SEO para Joomla. Agencia exclusiva de alto rendimiento, seguridad y posicionamiento orgánico.">
    <meta name="pinterest-rich-pin" content="false" />
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://www.solojoomla.com/">
    <meta property="twitter:title" content="SoloJoomla - Servicios de SEO y Diseño Web con Joomla">
    <meta property="twitter:description" content="Especialistas en Desarrollo Web y SEO para Joomla. Agencia exclusiva de alto rendimiento, seguridad y posicionamiento orgánico.">

    <link rel="icon" href="/img/favicon.ico" sizes="32x32"/>
    <link rel="icon" href="/img/favicon.ico" sizes="192x192"/>
    <link rel="apple-touch-icon" href="/img/favicon.ico"/>
    
    <!-- Schema Markup (JSON-LD) -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@graph": [
        {
          "@type": "ProfessionalService",
          "@id": "https://www.solojoomla.com/#organization",
          "name": "SoloJoomla",
          "url": "https://www.solojoomla.com/",
          "logo": "https://www.solojoomla.com/img/logo.png",
          "description": "Agencia especializada exclusivamente en Desarrollo Web y posicionamiento SEO técnico para el CMS Joomla.",
          "telephone": "+34123456789",
          "email": "hello@solojoomla.com",
          "address": {
            "@type": "PostalAddress",
            "streetAddress": "Torre Tecnológica, Planta 5",
            "addressLocality": "Madrid",
            "postalCode": "28001",
            "addressCountry": "ES"
          },
          "sameAs": [
            "https://www.linkedin.com/company/solojoomla",
            "https://x.com/solojoomla"
          ],
          "offers": {
            "@type": "Offer",
            "serviceType": ["Desarrollo Web Joomla", "SEO para Joomla", "Mantenimiento Joomla"]
          }
        },
        {
          "@type": "FAQPage",
          "mainEntity": [
            {
              "@type": "Question",
              "name": "¿Por qué usar Joomla en lugar de WordPress?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "Joomla brilla en proyectos corporativos complejos. Ofrece un sistema de gestión de usuarios (ACL) nativo, soporte multilingüe sin plugins adicionales, y una arquitectura MVC ideal para un desarrollo web profesional y escalable."
              }
            },
            {
              "@type": "Question",
              "name": "¿El SEO en Joomla es efectivo para posicionar en Google?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "Absolutamente. Joomla permite un control total sobre Meta Tags, URLs amigables y servidor. Combinado con optimización de Core Web Vitals, puede superar a cualquier competidor."
              }
            },
            {
              "@type": "Question",
              "name": "¿Realizan migraciones desde versiones antiguas de Joomla?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "Sí, somos especialistas en Joomla Migration. Actualizamos desde Joomla 3 a Joomla 4/5 salvaguardando bases de datos, manteniendo el posicionamiento SEO y adaptando extensiones."
              }
            }
          ]
        }
      ]
    }
    </script>

    <!-- Tailwind CSS & Fonts -->
    <link rel="preconnect" href="https://www.googletagmanager.com/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'] },
                    colors: {
                        brand: {
                            50: '#eff6ff', 100: '#dbeafe', 500: '#3b82f6', 600: '#2563eb',
                            700: '#1d4ed8', 900: '#1e3a8a', 950: '#172554',
                        },
                        joomla: {
                            green: '#50912E', orange: '#F48C00', blue: '#1B5497', red: '#C81B1B'
                        },
                        dark: '#0f172a',
                    },
                    boxShadow: {
                        'soft': '0 4px 20px -2px rgba(0, 0, 0, 0.05)',
                        'card': '0 10px 30px -5px rgba(37, 99, 235, 0.08)',
                        'floating': '0 20px 40px -10px rgba(37, 99, 235, 0.15)'
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; color: #334155; }
        .gradient-text {
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(90deg, #1d4ed8, #3b82f6);
        }
        .accordion-content {
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease, opacity 0.4s ease;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
        }
        .accordion-content.active {
            max-height: 800px;
            padding-bottom: 1.5rem;
            opacity: 1;
        }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    </style>
</head>
<body class="bg-slate-50 overflow-x-hidden selection:bg-brand-600 selection:text-white">

    <header>
        <nav class="fixed w-full bg-white/90 backdrop-blur-lg z-50 border-b border-slate-200 shadow-sm transition-all duration-300" id="navbar">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between items-center h-20">
                    <!-- Logo -->
                    <a href="/" class="flex-shrink-0 flex items-center gap-2 group" aria-label="Inicio SoloJoomla">
                        <span class="text-3xl font-bold text-blue-900 tracking-tighter">SOLOJOOMLA<span class="text-gray-500 text-lg">.COM</span></span>
                    </a>

                    <!-- Desktop Menu -->
                    <div class="hidden lg:flex space-x-8 items-center font-medium text-sm text-slate-600">
                        <a href="#por-que-joomla" class="hover:text-brand-600 transition-colors">¿Por qué Joomla?</a>
                        <div class="relative group py-6">
                            <a href="#" class="text-brand-primary font-semibold transition-colors flex items-center gap-1">
                                Servicios <i class="fas fa-chevron-down text-[10px]"></i>
                            </a>
                            <!-- Submenu -->
                            <div class="absolute top-16 left-0 w-64 bg-white border border-slate-100 shadow-xl rounded-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 overflow-hidden">
                                <a href="/desarrollo-web-profesional/" class="block px-4 py-3 text-sm text-brand-primary bg-brand-surface font-semibold border-b border-slate-50">Desarrollo Web</a>
                                <a href="/mantenimiento-joomla/" class="block px-4 py-3 text-sm text-slate-700 hover:bg-slate-50 hover:text-brand-light transition-colors border-b border-slate-50">Mantenimiento Joomla</a>
                                <a href="/auditoria-seo-joomla/" class="block px-4 py-3 text-sm text-slate-700 hover:bg-slate-50 hover:text-brand-light transition-colors border-b border-slate-50">Auditoría SEO Joomla</a>
                                <a href="/migracion-joomla/" class="block px-4 py-3 text-sm text-slate-700 hover:bg-slate-50 hover:text-brand-light transition-colors border-b border-slate-50">Migración Joomla</a>
                                <a href="https://www.dynadot.com/market/user-listings/solojoomla.com" target="_blank" rel="noopener nofollow" class="block px-4 py-3 text-sm text-slate-700 hover:bg-slate-50 hover:text-brand-light transition-colors">Consultoría Joomla</a>
                            </div>
                        </div>
                        <a href="#servicios-desarrollo" class="hover:text-brand-600 transition-colors">Desarrollo Web</a>
                        <a href="/foro/" class="hover:text-brand-600 transition-colors">Foro</a>
                        <a href="#portafolio" class="hover:text-brand-600 transition-colors">Portafolio</a>
                        <a href="#faq" class="hover:text-brand-600 transition-colors">FAQ</a>
                    </div>
                    <!-- Language Switcher -->
                    <div class="flex items-center border border-slate-300 rounded-full p-1 bg-slate-50 ml-2">
                        <a href="/" class="px-3 py-1 text-xs font-bold bg-white text-brand-primary shadow-sm rounded-full transition-colors">ES</a>
                        <a href="/en/" class="px-3 py-1 text-xs font-bold text-slate-500 hover:text-brand-primary rounded-full transition-colors">EN</a>
                    </div>
                    <!-- CTA Button -->
                    <div class="hidden lg:flex">
                        <a href="https://www.dynadot.com/market/user-listings/solojoomla.com" target="_blank" rel="noopener nofollow" class="bg-brand-600 hover:bg-brand-700 text-white px-6 py-2.5 rounded-lg font-semibold text-sm transition-all shadow-md hover:shadow-lg hover:-translate-y-0.5">
                            Consultoría Gratuita
                        </a>
                    </div>

                    <!-- Mobile menu button -->
                    <div class="lg:hidden flex items-center">
                        <button id="mobile-menu-btn" aria-label="Abrir menú" class="text-slate-600 hover:text-brand-600 focus:outline-none p-2">
                            <i class="fa-solid fa-bars text-2xl" id="menu-icon" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Mobile Menu -->
            <div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-slate-100 shadow-xl absolute w-full left-0 origin-top transform transition-all duration-300">
                <div class="px-4 pt-4 pb-6 space-y-3 flex flex-col">
                    <a href="#por-que-joomla" class="block px-4 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-brand-50 hover:text-brand-600">¿Por qué Joomla?</a>
                    <a href="#servicios-desarrollo" class="block px-4 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-brand-50 hover:text-brand-600">Desarrollo Web</a>
                    <a href="/foro/" class="block px-4 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-brand-50 hover:text-brand-600">Foro</a>
                    <a href="#portafolio" class="block px-4 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-brand-50 hover:text-brand-600">Portafolio Experiencia</a>
                    <a href="#faq" class="block px-4 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-brand-50 hover:text-brand-600">Preguntas Frecuentes</a>
                    <div class="w-full">
                        <button id="mobile-service-toggle" class="w-full flex justify-between items-center px-3 py-3 text-base font-medium text-slate-700 hover:bg-slate-50 hover:text-brand-primary rounded-md focus:outline-none">
                            Servicios <i id="mobile-service-icon" class="fas fa-chevron-down text-sm transition-transform duration-300"></i>
                        </button>
                        <!-- Submenu Javascript -->
                        <div id="mobile-service-submenu" class="hidden pl-4 pb-2 bg-slate-50/50 rounded-b-md">
                            <a href="/desarrollo-web-profesional/" class="block px-3 py-3 text-base font-medium text-slate-600 hover:text-brand-primary border-b border-slate-200/50 mb-1">Desarrollo Web</a>
                            <a href="/mantenimiento-joomla/" class="block px-3 py-3 text-base text-slate-600 hover:text-brand-primary">Mantenimiento Joomla</a>
                            <a href="/auditoria-seo-joomla/" class="block px-3 py-3 text-base text-slate-600 hover:text-brand-primary">Auditoría SEO Joomla</a>
                            <a href="/migracion-joomla/" class="block px-3 py-3 text-base text-slate-600 hover:text-brand-primary">Migración Joomla</a>
                            <a href="https://www.dynadot.com/market/user-listings/solojoomla.com" target="_blank" rel="noopener nofollow" class="block px-3 py-3 text-base text-slate-600 hover:text-brand-primary">Consultoría Joomla</a>
                        </div>
                    </div>
                    <a href="https://www.dynadot.com/market/user-listings/solojoomla.com" target="_blank" rel="noopener nofollow" class="mt-4 w-full block text-center bg-brand-600 text-white px-6 py-3 rounded-lg font-bold text-base shadow-md">
                        Solicitar Presupuesto
                    </a>
                </div>
            </div>
        </nav>
    </header>

    <main>
        <!-- Hero Section -->
        <section class="pt-32 pb-20 lg:pt-40 lg:pb-32 bg-white overflow-hidden relative">
            <div class="absolute top-0 right-0 -z-10 w-full h-full overflow-hidden opacity-30 pointer-events-none">
                <div class="absolute -top-[10%] -right-[5%] w-[500px] h-[500px] rounded-full bg-brand-100 blur-[100px]"></div>
                <div class="absolute top-[40%] -left-[10%] w-[400px] h-[400px] rounded-full bg-blue-50 blur-[80px]"></div>
            </div>

            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="text-center max-w-4xl mx-auto">
                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-50 border border-brand-100 text-brand-700 text-xs font-bold uppercase tracking-wide mb-8">
                        <span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></span>
                        Agencia Especializada Exclusiva
                    </div>
                    
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-dark leading-[1.15] mb-8 tracking-tight">
                       Servicios de SEO y <span class="gradient-text">Diseño Web con Joomla</span>
                    </h1>
                    
                    <p class="text-lg md:text-xl text-slate-600 mb-10 leading-relaxed font-normal max-w-3xl mx-auto">
                        Posicionamos tu marca en la cima de Google con <strong>desarrollo web profesional en Joomla</strong>. Como una agencia especializada exclusivamente en este CMS, ofrecemos arquitectura escalable, código limpio y estrategias de <strong>Joomla SEO</strong> diseñadas para generar conversiones reales.
                    </p>
                    
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="#contacto" class="bg-brand-600 hover:bg-brand-700 text-white px-8 py-4 rounded-xl font-bold transition-all shadow-lg shadow-brand-500/30 hover:-translate-y-1 flex items-center justify-center gap-2 text-lg">
                            Empezar Proyecto <i class="fa-solid fa-arrow-right text-sm"></i>
                        </a>
                        <a href="#servicios-desarrollo" class="bg-white hover:bg-slate-50 text-slate-800 border border-slate-200 px-8 py-4 rounded-xl font-bold transition-all flex items-center justify-center hover:border-slate-300 text-lg">
                            Explorar Servicios
                        </a>
                    </div>
                </div>

                <!-- Hero Dashboard/Code visual (Actúa como ilustración principal técnica) -->
                <div class="mt-16 relative max-w-5xl mx-auto" aria-hidden="true">
                    <div class="rounded-2xl bg-dark p-2 shadow-2xl border border-slate-800 transform transition-transform hover:scale-[1.01] duration-500">
                        <div class="bg-slate-900 rounded-xl overflow-hidden">
                            <div class="flex items-center px-4 py-3 bg-slate-800/50 border-b border-slate-700/50">
                                <div class="flex gap-2">
                                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                </div>
                                <div class="mx-auto text-xs font-mono text-slate-400">performance-audit.json — Joomla CMS</div>
                            </div>
                            <div class="p-6 font-mono text-sm sm:text-base leading-relaxed overflow-x-auto text-slate-300">
                                <div class="flex"><span class="text-slate-500 w-8 select-none">1</span><span class="text-purple-400">const</span> <span class="text-blue-300">joomlaWebsite</span> <span class="text-cyan-300">=</span> {</div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">2</span>&nbsp;&nbsp;architecture: <span class="text-green-300">"Escalable y Segura"</span>,</div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">3</span>&nbsp;&nbsp;coreWebVitals: {</div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">4</span>&nbsp;&nbsp;&nbsp;&nbsp;LCP: <span class="text-orange-300">0.8s</span>, <span class="text-slate-500 italic">// Excelente</span></div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">5</span>&nbsp;&nbsp;&nbsp;&nbsp;FID: <span class="text-orange-300">12ms</span>,</div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">6</span>&nbsp;&nbsp;&nbsp;&nbsp;CLS: <span class="text-orange-300">0.01</span></div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">7</span>&nbsp;&nbsp;},</div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">8</span>&nbsp;&nbsp;seoOptimized: <span class="text-purple-400">true</span>,</div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">9</span>&nbsp;&nbsp;agency: <span class="text-green-300">"SoloJoomla Experts"</span></div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">10</span>};</div>
                                <div class="flex mt-2"><span class="text-slate-500 w-8 select-none">11</span><span class="text-blue-300">deployWebsite</span>(joomlaWebsite).<span class="text-blue-300">then</span>(rankInGoogle);</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Feature Section -->
        <section id="por-que-joomla" class="py-24 bg-slate-50 border-y border-slate-200">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <h2 class="text-3xl md:text-4xl font-extrabold text-dark mb-6">¿Por Qué Elegir Joomla?</h2>
                    <p class="text-slate-600 leading-relaxed text-lg">
                        <strong>Joomla CMS</strong> es la plataforma elegida por gobiernos, universidades y corporaciones globales. Su arquitectura nativa ofrece un equilibrio perfecto entre la facilidad de uso y la potencia técnica necesaria para proyectos complejos.
                    </p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <article class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hover:shadow-card transition duration-300">
                        <div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center text-brand-600 mb-6">
                            <i class="fa-solid fa-code text-xl" aria-hidden="true"></i>
                        </div>
                        <h3 class="font-bold text-dark text-xl mb-3">Open Source & Flexibilidad</h3>
                        <p class="text-slate-600 leading-relaxed text-sm">
                            Joomla es un sistema de gestión de contenidos de código abierto. Esto nos permite un <strong>desarrollo Joomla</strong> sin restricciones, creando soluciones web personalizadas que se adaptan exactamente a la lógica de tu negocio.
                        </p>
                    </article>

                    <article class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hover:shadow-card transition duration-300">
                        <div class="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center text-emerald-600 mb-6">
                            <i class="fa-solid fa-shield-halved text-xl" aria-hidden="true"></i>
                        </div>
                        <h3 class="font-bold text-dark text-xl mb-3">Seguridad Robusta (Joomla Security)</h3>
                        <p class="text-slate-600 leading-relaxed text-sm">
                            Con características de seguridad nativas como la autenticación de dos factores (2FA) integrada, enrutamiento avanzado y un núcleo constantemente auditado, Joomla es uno de los CMS más seguros del mercado.
                        </p>
                    </article>

                    <article class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hover:shadow-card transition duration-300">
                        <div class="w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center text-purple-600 mb-6">
                            <i class="fa-solid fa-layer-group text-xl" aria-hidden="true"></i>
                        </div>
                        <h3 class="font-bold text-dark text-xl mb-3">Escalabilidad Empresarial</h3>
                        <p class="text-slate-600 leading-relaxed text-sm">
                            ¿Tu empresa está creciendo? Joomla crece contigo. Su estructura MVC permite gestionar desde un blog corporativo hasta complejas intranets empresariales sin perder rendimiento.
                        </p>
                    </article>

                    <article class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hover:shadow-card transition duration-300">
                        <div class="w-12 h-12 bg-orange-50 rounded-xl flex items-center justify-center text-orange-600 mb-6">
                            <i class="fa-solid fa-gauge-high text-xl" aria-hidden="true"></i>
                        </div>
                        <h3 class="font-bold text-dark text-xl mb-3">Alto Rendimiento</h3>
                        <p class="text-slate-600 leading-relaxed text-sm">
                            El <strong>Website Performance</strong> es vital para el SEO y la UX. Joomla cuenta con un sistema de caché integrado. Nuestro equipo optimiza esta arquitectura para garantizar tiempos de carga ultrarrápidos.
                        </p>
                    </article>

                    <article class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hover:shadow-card transition duration-300">
                        <div class="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center text-blue-600 mb-6">
                            <i class="fa-solid fa-language text-xl" aria-hidden="true"></i>
                        </div>
                        <h3 class="font-bold text-dark text-xl mb-3">Multilingüe Nativo</h3>
                        <p class="text-slate-600 leading-relaxed text-sm">
                            Joomla permite crear sitios web en múltiples idiomas directamente desde su núcleo. Esto es crucial para la internacionalización y la correcta implementación de etiquetas <em>hreflang</em> para SEO internacional.
                        </p>
                    </article>

                    <article class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 hover:shadow-card transition duration-300">
                        <div class="w-12 h-12 bg-cyan-50 rounded-xl flex items-center justify-center text-cyan-600 mb-6">
                            <i class="fa-solid fa-users text-xl" aria-hidden="true"></i>
                        </div>
                        <h3 class="font-bold text-dark text-xl mb-3">Comunidad Internacional</h3>
                        <p class="text-slate-600 leading-relaxed text-sm">
                            Respaldado por una vasta comunidad global de <strong>Joomla Developers</strong>, el CMS está en continua evolución asegurando soporte a largo plazo y un ecosistema rico en extensiones.
                        </p>
                    </article>
                </div>
            </div>
        </section>

        <!-- Services Section: Development -->
        <section id="servicios-desarrollo" class="py-24 bg-white relative">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                
                <!-- Modificado con Grid para añadir imagen ilustrativa -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
                    <div class="order-2 lg:order-1">
                        <span class="block text-brand-600 font-bold uppercase tracking-wider text-sm mb-3">Ingeniería Web</span>
                        <h2 class="text-3xl md:text-4xl font-extrabold text-dark leading-tight mb-6">Servicios de Desarrollo Web con Joomla</h2>
                        <p class="text-slate-600 text-lg leading-relaxed">
                            Creamos experiencias digitales excepcionales. Como <strong>Joomla Experts</strong>, no usamos plantillas genéricas; desarrollamos soluciones a medida, centradas en el <em>Responsive Design</em>, la usabilidad (UI/UX) y un código impecablemente limpio.
                        </p>
                    </div>
                    <!-- Ilustración Web Development -->
                    <div class="order-1 lg:order-2 relative group">
                        <div class="absolute inset-0 bg-brand-100 rounded-3xl transform translate-x-4 translate-y-4 transition-transform group-hover:translate-x-2 group-hover:translate-y-2"></div>
                        <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Desarrollo Web Profesional Joomla" class="relative rounded-3xl shadow-xl z-10 w-full h-[320px] object-cover">
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <article class="group p-8 rounded-2xl border border-slate-200 hover:border-brand-300 hover:shadow-floating transition-all duration-300 bg-white">
                        <h3 class="font-bold text-dark text-xl mb-3 border-b-2 border-brand-100 pb-2 inline-block">Sitios Corporativos</h3>
                        <p class="text-sm text-slate-600 leading-relaxed mb-4 mt-2">
                            Diseñamos la presencia digital de tu empresa para transmitir autoridad técnica y confianza. Plataformas <a href="https://chandra-lawfirm.com/" target="_blank">Law Firm</a>, empresariales con arquitecturas escalables, integraciones CRM y gestión de roles de usuario avanzados.
                        </p>
                    </article>

                    <article class="group p-8 rounded-2xl border border-slate-200 hover:border-brand-300 hover:shadow-floating transition-all duration-300 bg-white">
                        <h3 class="font-bold text-dark text-xl mb-3 border-b-2 border-brand-100 pb-2 inline-block">Comercio Electrónico</h3>
                        <p class="text-sm text-slate-600 leading-relaxed mb-4 mt-2">
                            Transformamos tu Joomla en una potente tienda online (Ecommerce). Optimizamos el túnel de conversión, integramos pasarelas de pago seguras y aseguramos un alto rendimiento incluso con catálogos masivos.
                        </p>
                    </article>

                    <article class="group p-8 rounded-2xl border border-slate-200 hover:border-brand-300 hover:shadow-floating transition-all duration-300 bg-white">
                        <h3 class="font-bold text-dark text-xl mb-3 border-b-2 border-brand-100 pb-2 inline-block">Instituciones Públicas</h3>
                        <p class="text-sm text-slate-600 leading-relaxed mb-4 mt-2">
                            Desarrollo de portales para gobiernos, <a href="https://schoolday.id/en" target="_blank">school management system</a>, universidades y ONGs. Garantizamos el cumplimiento de las normativas de accesibilidad web (WCAG), seguridad estricta y flujos de publicación de noticias eficientes.
                        </p>
                    </article>
                </div>
                
                <div class="mt-12 bg-slate-50 rounded-2xl p-8 border border-slate-100">
                    <p class="font-bold text-dark mb-6 text-center text-lg">Nuestros pilares de <strong>Joomla Website Development</strong>:</p>
                    <div class="flex flex-wrap justify-center gap-4">
                        <span class="px-4 py-2 bg-white border border-slate-200 rounded-full text-sm font-medium text-slate-700 shadow-sm"><i class="fa-solid fa-check text-brand-500 mr-2"></i> Responsive Design</span>
                        <span class="px-4 py-2 bg-white border border-slate-200 rounded-full text-sm font-medium text-slate-700 shadow-sm"><i class="fa-solid fa-check text-brand-500 mr-2"></i> UI/UX Centrado en Conversión</span>
                        <span class="px-4 py-2 bg-white border border-slate-200 rounded-full text-sm font-medium text-slate-700 shadow-sm"><i class="fa-solid fa-check text-brand-500 mr-2"></i> Arquitectura Escalable</span>
                        <span class="px-4 py-2 bg-white border border-slate-200 rounded-full text-sm font-medium text-slate-700 shadow-sm"><i class="fa-solid fa-check text-brand-500 mr-2"></i> Código Limpio y Semántico</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Services Section: SEO -->
        <section id="servicios-seo" class="py-24 bg-dark text-white relative overflow-hidden">
            <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle at 20% 50%, #3b82f6 0%, transparent 50%), radial-gradient(circle at 80% 80%, #2563eb 0%, transparent 50%);"></div>
            
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                    
                    <!-- Left Content -->
                    <div>
                        <span class="block text-brand-400 font-bold uppercase tracking-wider text-sm mb-3">Dominación Orgánica</span>
                        <h2 class="text-3xl md:text-4xl font-extrabold mb-6 leading-tight">Servicios SEO para Joomla</h2>
                        
                        <!-- Ilustración SEO Inyectada -->
                        <div class="mb-8 rounded-2xl overflow-hidden shadow-2xl h-48 relative border border-slate-700">
                             <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Análisis Joomla SEO y Métricas" class="w-full h-full object-cover opacity-80 mix-blend-luminosity hover:mix-blend-normal transition-all duration-500">
                             <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent flex items-end p-6">
                                 <span class="text-brand-300 font-bold text-lg"><i class="fa-solid fa-chart-line mr-2"></i> Crecimiento Data-Driven</span>
                             </div>
                        </div>

                        <div class="space-y-6 text-slate-300 text-base leading-relaxed">
                            <p>
                                Tener una web hermosa no sirve de nada si tus clientes potenciales no pueden encontrarla. Nuestro servicio de <strong>Optimización Web</strong> transforma tu sitio Joomla en un motor de captación de leads que sigue rigurosamente las directrices de calidad de Google.
                            </p>
                            <p>
                                Somos especialistas en <strong>SEO Técnico</strong> para Joomla. Realizamos auditorías profundas y reestructuramos la arquitectura de la información para facilitar el rastreo e indexación. Optimizamos desde la configuración del servidor hasta el último fragmento de código HTML.
                            </p>
                            <p>
                                Los beneficios son claros: <strong>más tráfico orgánico cualificado, más clientes potenciales reales, incremento en ventas y un posicionamiento de marca inquebrantable.</strong>
                            </p>
                        </div>
                    </div>

                    <!-- Right Tech List -->
                    <div class="bg-slate-800/80 backdrop-blur-md border border-slate-700 rounded-2xl p-8 shadow-2xl">
                        <h3 class="font-bold text-xl mb-6 text-white border-b border-slate-600 pb-3">Detalle de Optimización</h3>
                        <ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-bullseye text-brand-400 w-6"></i> Auditoría SEO Completa</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-gears text-brand-400 w-6"></i> SEO Técnico Avanzado</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-file-pen text-brand-400 w-6"></i> SEO On Page y Contenido</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-link text-brand-400 w-6"></i> Optimización de URLs amigables</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-tags text-brand-400 w-6"></i> Meta Tags y H1-H6</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-code text-brand-400 w-6"></i> Schema Markup (JSON-LD)</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-sitemap text-brand-400 w-6"></i> Sitemap XML dinámico</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-robot text-brand-400 w-6"></i> Configuración Robots.txt</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-bolt text-brand-400 w-6"></i> Aprobación Web Vitals</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-mobile-screen text-brand-400 w-6"></i> Optimización móvil extrema</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-image text-brand-400 w-6"></i> SEO para imágenes y WebP</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-gauge-high text-brand-400 w-6"></i> Velocidad de carga (WPO)</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- Stats Section -->
        <section class="py-20 bg-brand-600 text-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="text-3xl md:text-4xl font-extrabold mb-8">¿Por Qué Elegir SoloJoomla?</h2>
                <p class="text-brand-100 max-w-3xl mx-auto text-lg mb-12 leading-relaxed">
                    Nuestra ventaja competitiva reside en nuestra <strong>especialización exclusiva en Joomla</strong>. Mientras otras agencias dividen su atención en múltiples plataformas, nosotros dedicamos el 100% de nuestros recursos a dominar este CMS. Esto se traduce en experiencia internacional comprobada, código altamente optimizado y soluciones personalizadas que otros consideran imposibles. Integramos el <strong>SEO desde el desarrollo</strong>, no como un parche posterior. Además, garantizamos tranquilidad con nuestro servicio de <strong>Joomla Maintenance</strong>, soporte técnico prioritario, migraciones sin pérdida de datos (<strong>Joomla Migration</strong>) y actualizaciones de seguridad críticas.
                </p>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6 border-t border-brand-500 pt-10">
                    <div>
                        <div class="text-4xl font-black mb-2">+15</div>
                        <div class="text-sm text-brand-200 font-medium uppercase tracking-wide">Años de Experiencia</div>
                    </div>
                    <div>
                        <div class="text-4xl font-black mb-2">100%</div>
                        <div class="text-sm text-brand-200 font-medium uppercase tracking-wide">Enfoque en Joomla</div>
                    </div>
                    <div>
                        <div class="text-4xl font-black mb-2">24/7</div>
                        <div class="text-sm text-brand-200 font-medium uppercase tracking-wide">Soporte Técnico</div>
                    </div>
                    <div>
                        <div class="text-4xl font-black mb-2">+Top3</div>
                        <div class="text-sm text-brand-200 font-medium uppercase tracking-wide">Posiciones Google</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Workflow Section -->
        <section class="py-24 bg-white">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-10">
                    <h2 class="text-3xl md:text-4xl font-extrabold text-dark mb-4">Nuestro Proceso de Trabajo</h2>
                    <p class="text-slate-600">Metodología ágil diseñada para garantizar la excelencia técnica y el retorno de inversión.</p>
                </div>

                <!-- Banner Image Illustrating Process/Team -->
                <div class="mb-16 rounded-3xl overflow-hidden shadow-xl relative max-w-5xl mx-auto h-56 md:h-72">
                    <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Diseño Web Joomla" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-brand-900/40 mix-blend-multiply"></div>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="bg-white/90 backdrop-blur-sm px-6 py-3 rounded-full font-bold text-brand-700 shadow-lg border border-white/50">
                            Enfoque 100% Colaborativo
                        </div>
                    </div>
                </div>

                <div class="space-y-6 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-brand-300 before:to-transparent">
                    
                    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full border-4 border-white bg-brand-600 text-white font-bold shadow-md shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10">1</div>
                        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] p-5 rounded-xl border border-slate-100 bg-slate-50 shadow-sm transition hover:shadow-md">
                            <h3 class="font-bold text-dark mb-1">Consulta & Análisis</h3>
                            <p class="text-sm text-slate-600">Comprendemos tus objetivos de negocio, público objetivo y requerimientos técnicos específicos.</p>
                        </div>
                    </div>
                    
                    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full border-4 border-white bg-brand-600 text-white font-bold shadow-md shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10">2</div>
                        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] p-5 rounded-xl border border-slate-100 bg-slate-50 shadow-sm transition hover:shadow-md">
                            <h3 class="font-bold text-dark mb-1">Arquitectura & Diseño</h3>
                            <p class="text-sm text-slate-600">Planificación de la estructura del sitio (wireframes) y diseño UI/UX centrado en el usuario (<strong>Diseño Web Joomla</strong>).</p>
                        </div>
                    </div>

                    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full border-4 border-white bg-brand-600 text-white font-bold shadow-md shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10">3</div>
                        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] p-5 rounded-xl border border-slate-100 bg-slate-50 shadow-sm transition hover:shadow-md">
                            <h3 class="font-bold text-dark mb-1">Desarrollo & Integraciones</h3>
                            <p class="text-sm text-slate-600">Codificación limpia, creación de extensiones personalizadas y conexión con sistemas externos (ERP/CRM).</p>
                        </div>
                    </div>

                    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full border-4 border-white bg-brand-600 text-white font-bold shadow-md shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10">4</div>
                        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] p-5 rounded-xl border border-slate-100 bg-slate-50 shadow-sm transition hover:shadow-md">
                            <h3 class="font-bold text-dark mb-1">Testing & Optimización SEO</h3>
                            <p class="text-sm text-slate-600">Pruebas exhaustivas de rendimiento, seguridad y aplicación de todo el <strong>SEO Técnico</strong> antes de publicar.</p>
                        </div>
                    </div>

                    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full border-4 border-white bg-brand-600 text-white font-bold shadow-md shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10">5</div>
                        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] p-5 rounded-xl border border-slate-100 bg-slate-50 shadow-sm transition hover:shadow-md">
                            <h3 class="font-bold text-dark mb-1">Lanzamiento & Mantenimiento</h3>
                            <p class="text-sm text-slate-600">Despliegue seguro en el servidor y monitoreo continuo mediante nuestro servicio de <strong>Desarrollo Web Profesional</strong>.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Information / Tags section -->
        <section class="py-20 bg-slate-100 border-y border-slate-200">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <!-- Alterado a un layout de grid con imagen para equilibrar el texto -->
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
                    
                    <!-- Why SEO is important -->
                    <div class="lg:col-span-7">
                        <h2 class="text-3xl font-extrabold text-dark mb-6">¿Por Qué el SEO es Importante?</h2>
                        
                        <!-- Imagen insertada en el flujo de texto -->
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Joomla Developer" class="w-full h-48 object-cover rounded-xl shadow-md mb-6 float-none md:float-right md:w-1/2 md:ml-6 md:mb-4">
                        
                        <p class="text-slate-600 leading-relaxed mb-6">
                            En el ecosistema del <strong>Digital Marketing</strong>, el SEO no es un gasto, es la inversión más rentable a medio y largo plazo. Una web sin optimización es como una valla publicitaria en el desierto. 
                        </p>
                        <p class="text-slate-600 leading-relaxed mb-6">
                            El posicionamiento orgánico en <strong>Google</strong> otorga <strong>Autoridad</strong> a tu marca. Cuando apareces en los primeros resultados, el usuario percibe a tu empresa como líder del sector (<strong>Branding</strong>). Esto se traduce directamente en un volumen constante de <strong>Tráfico orgánico</strong> de alta calidad, incrementando drásticamente las <strong>Conversiones</strong> y maximizando el <strong>ROI</strong> (Retorno de Inversión) sin depender exclusivamente de la publicidad de pago.
                        </p>
                        <div class="clear-both"></div>
                    </div>

                    <!-- Types of Websites -->
                    <div class="lg:col-span-5 bg-white p-8 rounded-2xl shadow-sm border border-slate-200">
                        <h2 class="text-2xl font-extrabold text-dark mb-6">Tipos de Sitios Web que Desarrollamos</h2>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">Corporate Websites</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">Company Profile</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">Ecommerce</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">Government</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">Schools</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">Universities</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">NGOs</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">Real Estate</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">Hotels</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">Healthcare</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">Travel</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">Landing Pages</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">Membership</span>
                            <span class="px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:border-brand-500 hover:text-brand-600 cursor-default transition">News Portals</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Portfolio Section -->
        <section id="portafolio" class="py-24 bg-dark text-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <span class="block text-brand-400 font-bold uppercase tracking-wider text-sm mb-3">Experiencia Enterprise</span>
                    <h2 class="text-3xl md:text-4xl font-extrabold mb-6">Portafolio de Proyectos Joomla</h2>
                    <p class="text-slate-400 leading-relaxed text-lg">
                        Nuestro equipo de ingenieros ha participado en el desarrollo de arquitecturas de misión crítica a nivel internacional. Presentamos referencias de nuestra capacidad técnica en entornos de alta demanda (Traffic Spikes) y seguridad militar.
                    </p>
                </div>

                <!-- Enterprise Cards grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    <article class="bg-slate-800 rounded-2xl p-8 border border-slate-700 hover:border-brand-500 transition-colors flex flex-col">
                        <div class="text-2xl font-black text-white mb-1 opacity-90"><a href="/betfair/">Betfair</a> <span class="text-sm font-normal text-slate-400 ml-2">Arch Ref.</span></div>
                        <div class="w-full h-px bg-gradient-to-r from-brand-600 to-transparent my-4"></div>
                        <h3 class="font-bold text-brand-300 mb-2">Escalabilidad de Alta Concurrencia</h3>
                        <p class="text-sm text-slate-300 leading-relaxed flex-grow">
                            Experiencia técnica aplicada en el diseño de <strong>Arquitectura Joomla</strong> capaz de soportar millones de peticiones simultáneas por segundo sin latencia. Implementación de balanceadores de carga y bases de datos distribuidas.
                        </p>
                        <!--a href="https://www.solojoomla.com/betfair/" class="mt-6 inline-flex items-center text-brand-400 hover:text-brand-300 font-semibold group transition-colors">
                            Ver sitios de apuestas
                            <i class="fa-solid fa-arrow-right text-sm ml-2 transform group-hover:translate-x-1 transition-transform"></i>
                        </a-->
                    </article>

                    <article class="bg-slate-800 rounded-2xl p-8 border border-slate-700 hover:border-brand-500 transition-colors flex flex-col">
                        <div class="text-2xl font-black text-white mb-1 opacity-90"><a href="/sbobet/">Sbobet</a> <span class="text-sm font-normal text-slate-400 ml-2">Arch Ref.</span></div>
                        <div class="w-full h-px bg-gradient-to-r from-brand-600 to-transparent my-4"></div>
                        <h3 class="font-bold text-brand-300 mb-2">Alto Rendimiento y Caché</h3>
                        <p class="text-sm text-slate-300 leading-relaxed flex-grow">
                            Dominio en sistemas de caché en memoria (Redis/Memcached) integrados con Joomla para entregar contenido dinámico en milisegundos, cumpliendo estrictamente con las métricas de <strong>Core Web Vitals</strong> en plataformas globales.
                        </p>
                        <!--a href="https://www.solojoomla.com/sbobet/" class="mt-6 inline-flex items-center text-brand-400 hover:text-brand-300 font-semibold group transition-colors">
                            Ver sitios de apuestas 
                            <i class="fa-solid fa-arrow-right text-sm ml-2 transform group-hover:translate-x-1 transition-transform"></i>
                        </a-->
                    </article>

                    <article class="bg-slate-800 rounded-2xl p-8 border border-slate-700 hover:border-brand-500 transition-colors flex flex-col">
                        <div class="text-2xl font-black text-white mb-1 opacity-90"><a href="/bet365/">Bet365</a> <span class="text-sm font-normal text-slate-400 ml-2">Arch Ref.</span></div>
                        <div class="w-full h-px bg-gradient-to-r from-brand-600 to-transparent my-4"></div>
                        <h3 class="font-bold text-brand-300 mb-2">Seguridad e Integraciones API</h3>
                        <p class="text-sm text-slate-300 leading-relaxed flex-grow">
                            Implementación de <strong>seguridad perimetral</strong>, encriptación de datos financieros y <strong>desarrollo personalizado</strong> de conectores API RESTful bidireccionales dentro del framework de Joomla, garantizando un flujo de datos invulnerable.
                        </p>
                        <!--a href="https://www.solojoomla.com/bet365/" class="mt-6 inline-flex items-center text-brand-400 hover:text-brand-300 font-semibold group transition-colors">
                            Ver sitios de apuestas 
                            <i class="fa-solid fa-arrow-right text-sm ml-2 transform group-hover:translate-x-1 transition-transform"></i>
                        </a-->
                    </article>

                    <article class="bg-slate-800 rounded-2xl p-8 border border-slate-700 hover:border-brand-500 transition-colors md:col-span-2 lg:col-span-1">
                        <div class="text-2xl font-black text-white mb-1 opacity-90"><a href="/bwin-login/">Bwin</a> <span class="text-sm font-normal text-slate-400 ml-2">Arch Ref.</span></div>
                        <div class="w-full h-px bg-gradient-to-r from-brand-600 to-transparent my-4"></div>
                        <h3 class="font-bold text-brand-300 mb-2">Optimización SEO Multinacional</h3>
                        <p class="text-sm text-slate-300 leading-relaxed">
                            Aplicación de estrategias de <strong>Optimización SEO</strong> técnica a gran escala. Gestión de etiquetas hreflang complejas, indexación masiva y renderizado del lado del servidor (SSR) para maximizar la visibilidad global.
                        </p>
                        <!--a href="https://www.solojoomla.com/bwin-login/" class="mt-6 inline-flex items-center text-brand-400 hover:text-brand-300 font-semibold group transition-colors">
                            Ver sitios de apuestas 
                            <i class="fa-solid fa-arrow-right text-sm ml-2 transform group-hover:translate-x-1 transition-transform"></i>
                        </a-->
                    </article>

                    <article class="bg-slate-800 rounded-2xl p-8 border border-slate-700 hover:border-brand-500 transition-colors md:col-span-2 lg:col-span-2">
                        <div class="text-2xl font-black text-white mb-1 opacity-90">Sportium <span class="text-sm font-normal text-slate-400 ml-2">Arch Ref.</span></div>
                        <div class="w-full h-px bg-gradient-to-r from-brand-600 to-transparent my-4"></div>
                        <h3 class="font-bold text-brand-300 mb-2">Desarrollo de Extensiones Personalizadas</h3>
                        <p class="text-sm text-slate-300 leading-relaxed">
                            Creación de componentes, módulos y plugins nativos de Joomla desde cero (<strong>Joomla Development</strong>) para satisfacer reglas de negocio hiper-específicas que las soluciones prefabricadas no pueden resolver, manteniendo un código limpio e independizado del núcleo para futuras actualizaciones.
                        </p>
                    </article>

                </div>
                <div class="mt-8 text-center text-xs text-slate-500">
                    *Nota técnica: Las marcas mencionadas sirven exclusivamente como referencia de los desafíos arquitectónicos, de seguridad y escalabilidad gestionados por nuestro equipo técnico en el pasado.
                </div>
            </div>
        </section>

        <section class="py-20 bg-white">
            <div class="text-center mb-12">
                <p class="text-3xl font-bold text-slate-800 mb-4">Articulo</p>
            </div>
            <div class="grid px-10 lg:grid-cols-4 gap-2">
                <!-- Article 1 -->
                <article class="bg-white rounded-2xl shadow-sm border border-border/50 overflow-hidden hover:shadow-lg transition-shadow group flex flex-col h-full">
                    <div class="h-48 bg-slate-200 relative overflow-hidden">
                        <div class="absolute inset-0 bg-secondary/10 group-hover:bg-transparent transition-colors z-10"></div>
                        <div class="absolute bottom-4 left-4 z-20">
                        <span class="bg-white/90 backdrop-blur text-primary text-xs font-bold px-3 py-1 rounded-full">Ingeniería de Servidores</span>
                         </div>
                        <div class="w-full h-full bg-[url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=500&amp;q=80')] bg-cover bg-center transform group-hover:scale-105 transition-transform duration-500"></div>
                    </div>
                    <div class="p-6 flex flex-col flex-grow">
                    <h3 class="font-bold text-secondary text-lg mb-3 line-clamp-2 hover:text-primary transition-colors cursor-pointer">
                        <a href="/instalar-joomla-nginx-php-fpm-mariadb/">Tutorial Install Joomla en Nginx con PHP-FPM y MariaDB</a>
                    </h3>
                        <div class="mt-auto flex items-center justify-between text-xs text-textLight font-medium">
                            <span>26 Julio 2026</span>
                            <span class="flex items-center gap-1"><i class="far fa-clock"></i> 5 min de lectura técnica</span>
                        </div>
                    </div>
                </article>
                <!-- Article 2 -->
                <article class="bg-white rounded-2xl shadow-sm border border-border/50 overflow-hidden hover:shadow-lg transition-shadow group flex flex-col h-full">
                    <div class="h-48 bg-slate-200 relative overflow-hidden">
                        <div class="absolute inset-0 bg-secondary/10 group-hover:bg-transparent transition-colors z-10"></div>
                        <div class="absolute bottom-4 left-4 z-20">
                        <span class="bg-white/90 backdrop-blur text-primary text-xs font-bold px-3 py-1 rounded-full">Guía CMS</span>
                         </div>
                        <div class="w-full h-full bg-[url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&amp;q=80')] bg-cover bg-center transform group-hover:scale-105 transition-transform duration-500"></div>
                    </div>
                    <div class="p-6 flex flex-col flex-grow">
                    <h3 class="font-bold text-secondary text-lg mb-3 line-clamp-2 hover:text-primary transition-colors cursor-pointer">
                        <a href="/que-es-joomla/">¿Qué es Joomla? Definición, Instalación, Características y Ventajas</a>
                    </h3>
                        <div class="mt-auto flex items-center justify-between text-xs text-textLight font-medium">
                            <span>23 Julio 2026</span>
                            <span class="flex items-center gap-1"><i class="far fa-clock"></i> 5 min de lectura técnica</span>
                        </div>
                    </div>
                </article>
                <!-- Article 3 -->
                <article class="bg-white rounded-2xl shadow-sm border border-border/50 overflow-hidden hover:shadow-lg transition-shadow group flex flex-col h-full">
                    <div class="h-48 bg-slate-200 relative overflow-hidden">
                        <div class="absolute inset-0 bg-secondary/10 group-hover:bg-transparent transition-colors z-10"></div>
                        <div class="absolute bottom-4 left-4 z-20">
                        <span class="bg-white/90 backdrop-blur text-primary text-xs font-bold px-3 py-1 rounded-full">SysAdmin</span>
                         </div>
                        <div class="w-full h-full bg-[url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=500&amp;q=80')] bg-cover bg-center transform group-hover:scale-105 transition-transform duration-500"></div>
                    </div>
                    <div class="p-6 flex flex-col flex-grow">
                    <h3 class="font-bold text-secondary text-lg mb-3 line-clamp-2 hover:text-primary transition-colors cursor-pointer">
                        <a href="/instalar-nginx-ubuntu-24-04/">Cómo Instalar Nginx en Ubuntu 24.04</a>
                    </h3>
                        <div class="mt-auto flex items-center justify-between text-xs text-textLight font-medium">
                            <span>16 Julio 2026</span>
                            <span class="flex items-center gap-1"><i class="far fa-clock"></i> 5 min de lectura técnica</span>
                        </div>
                    </div>
                </article>
                <!-- Article 4 -->
                <article class="bg-white rounded-2xl shadow-sm border border-border/50 overflow-hidden hover:shadow-lg transition-shadow group flex flex-col h-full">
                    <div class="h-48 bg-slate-200 relative overflow-hidden">
                        <div class="absolute inset-0 bg-secondary/10 group-hover:bg-transparent transition-colors z-10"></div>
                        <div class="absolute bottom-4 left-4 z-20">
                        <span class="bg-white/90 backdrop-blur text-primary text-xs font-bold px-3 py-1 rounded-full">Marketing Orgánico</span>
                         </div>
                        <div class="w-full h-full bg-[url('https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=500&amp;q=80')] bg-cover bg-center transform group-hover:scale-105 transition-transform duration-500"></div>
                    </div>
                    <div class="p-6 flex flex-col flex-grow">
                    <h3 class="font-bold text-secondary text-lg mb-3 line-clamp-2 hover:text-primary transition-colors cursor-pointer">
                        <a href="/guia-seo-on-page-optimizacion/">Guía de SEO On-Page: Técnicas para Optimizar Contenido y Sitio Web</a>
                    </h3>
                        <div class="mt-auto flex items-center justify-between text-xs text-textLight font-medium">
                            <span>26 Julio 2026</span>
                            <span class="flex items-center gap-1"><i class="far fa-clock"></i> 5 min de lectura técnica</span>
                        </div>
                    </div>
                </article>
            </div>       
        </section>

        <!-- FAQ Section -->
        <section id="faq" class="py-24 bg-white">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-extrabold text-dark mb-4">Preguntas Frecuentes</h2>
                    <p class="text-slate-600">Resolvemos tus dudas sobre Desarrollo y SEO en Joomla.</p>
                </div>
                
                <div class="space-y-4">
                    <!-- FAQ 1 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden">
                        <button class="faq-btn w-full px-6 py-5 text-left flex justify-between items-center focus:outline-none hover:bg-slate-100 transition-colors" aria-expanded="false" aria-controls="faq-ans-1">
                            <span class="font-bold text-dark pr-4">¿Por qué usar Joomla en lugar de WordPress?</span>
                            <i class="fa-solid fa-chevron-down text-brand-600 transition-transform duration-300 ease-in-out shrink-0" aria-hidden="true"></i>
                        </button>
                        <div id="faq-ans-1" class="accordion-content px-6 bg-white border-t border-slate-100 text-slate-600 leading-relaxed text-sm">
                            <p class="pt-4">Mientras que WordPress es excelente para blogs sencillos, <strong>Joomla CMS</strong> brilla en proyectos corporativos complejos. Joomla ofrece un sistema de gestión de usuarios (ACL) nativo y sumamente avanzado, soporte multilingüe sin plugins adicionales, y una arquitectura MVC que permite un <strong>desarrollo web profesional</strong> más ordenado y escalable para aplicaciones web complejas.</p>
                        </div>
                    </div>

                    <!-- FAQ 2 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden">
                        <button class="faq-btn w-full px-6 py-5 text-left flex justify-between items-center focus:outline-none hover:bg-slate-100 transition-colors" aria-expanded="false" aria-controls="faq-ans-2">
                            <span class="font-bold text-dark pr-4">¿El SEO en Joomla es efectivo para posicionar en Google?</span>
                            <i class="fa-solid fa-chevron-down text-brand-600 transition-transform duration-300 ease-in-out shrink-0" aria-hidden="true"></i>
                        </button>
                        <div id="faq-ans-2" class="accordion-content px-6 bg-white border-t border-slate-100 text-slate-600 leading-relaxed text-sm">
                            <p class="pt-4">Absolutamente. El <strong>Joomla SEO</strong> es altamente efectivo cuando es implementado por expertos. El CMS permite control total sobre las Meta Tags, URLs amigables, redirecciones y configuraciones del servidor. Combinado con nuestra optimización de <strong>Core Web Vitals</strong> y código limpio, tu sitio Joomla puede superar a cualquier competidor en los resultados orgánicos.</p>
                        </div>
                    </div>

                    <!-- FAQ 3 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden">
                        <button class="faq-btn w-full px-6 py-5 text-left flex justify-between items-center focus:outline-none hover:bg-slate-100 transition-colors" aria-expanded="false" aria-controls="faq-ans-3">
                            <span class="font-bold text-dark pr-4">¿Realizan migraciones desde versiones antiguas de Joomla?</span>
                            <i class="fa-solid fa-chevron-down text-brand-600 transition-transform duration-300 ease-in-out shrink-0" aria-hidden="true"></i>
                        </button>
                        <div id="faq-ans-3" class="accordion-content px-6 bg-white border-t border-slate-100 text-slate-600 leading-relaxed text-sm">
                            <p class="pt-4">Sí, somos especialistas en <strong>Joomla Migration</strong>. Actualizar desde Joomla 3 (o versiones anteriores) a la última versión (Joomla 4/5) es crítico para la <strong>Joomla Security</strong> y el rendimiento. Realizamos este proceso salvaguardando toda tu base de datos, manteniendo tus URLs para no perder posicionamiento SEO y adaptando el código de tus extensiones.</p>
                        </div>
                    </div>

                    <!-- FAQ 4 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden">
                        <button class="faq-btn w-full px-6 py-5 text-left flex justify-between items-center focus:outline-none hover:bg-slate-100 transition-colors" aria-expanded="false" aria-controls="faq-ans-4">
                            <span class="font-bold text-dark pr-4">¿Pueden desarrollar extensiones personalizadas para mi negocio?</span>
                            <i class="fa-solid fa-chevron-down text-brand-600 transition-transform duration-300 ease-in-out shrink-0" aria-hidden="true"></i>
                        </button>
                        <div id="faq-ans-4" class="accordion-content px-6 bg-white border-t border-slate-100 text-slate-600 leading-relaxed text-sm">
                            <p class="pt-4">Por supuesto. Como <strong>Joomla Developer</strong>, no dependemos exclusivamente de extensiones prefabricadas. Si tu negocio necesita un sistema de reservas único, un portal de clientes a medida o una integración con un ERP específico, programamos el componente, módulo o plugin exacto según las directrices nativas de Joomla.</p>
                        </div>
                    </div>

                    <!-- FAQ 5 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden">
                        <button class="faq-btn w-full px-6 py-5 text-left flex justify-between items-center focus:outline-none hover:bg-slate-100 transition-colors" aria-expanded="false" aria-controls="faq-ans-5">
                            <span class="font-bold text-dark pr-4">¿Ofrecen servicios de Mantenimiento Joomla?</span>
                            <i class="fa-solid fa-chevron-down text-brand-600 transition-transform duration-300 ease-in-out shrink-0" aria-hidden="true"></i>
                        </button>
                        <div id="faq-ans-5" class="accordion-content px-6 bg-white border-t border-slate-100 text-slate-600 leading-relaxed text-sm">
                            <p class="pt-4">Sí, el <strong>Joomla Maintenance</strong> es vital. Ofrecemos planes continuos que incluyen copias de seguridad diarias, monitoreo de seguridad 24/7, actualizaciones del núcleo de Joomla y extensiones, optimización continua de bases de datos y soporte técnico prioritario para garantizar que tu web corporativa nunca falle.</p>
                        </div>
                    </div>

                    <!-- FAQ 6 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden">
                        <button class="faq-btn w-full px-6 py-5 text-left flex justify-between items-center focus:outline-none hover:bg-slate-100 transition-colors" aria-expanded="false" aria-controls="faq-ans-6">
                            <span class="font-bold text-dark pr-4">¿Cómo garantizan que la web sea rápida (Website Performance)?</span>
                            <i class="fa-solid fa-chevron-down text-brand-600 transition-transform duration-300 ease-in-out shrink-0" aria-hidden="true"></i>
                        </button>
                        <div id="faq-ans-6" class="accordion-content px-6 bg-white border-t border-slate-100 text-slate-600 leading-relaxed text-sm">
                            <p class="pt-4">El rendimiento es el núcleo de nuestro <strong>Diseño Web Joomla</strong>. Garantizamos rapidez minimizando las peticiones HTTP, utilizando formatos de imagen modernos (WebP), configurando compresión GZIP/Brotli a nivel de servidor, implementando arquitecturas de caché avanzadas y escribiendo CSS/JS ligero sin dependencias innecesarias.</p>
                        </div>
                    </div>

                    <!-- FAQ 7 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden">
                        <button class="faq-btn w-full px-6 py-5 text-left flex justify-between items-center focus:outline-none hover:bg-slate-100 transition-colors" aria-expanded="false" aria-controls="faq-ans-7">
                            <span class="font-bold text-dark pr-4">¿Mis sitios web serán adaptables a dispositivos móviles?</span>
                            <i class="fa-solid fa-chevron-down text-brand-600 transition-transform duration-300 ease-in-out shrink-0" aria-hidden="true"></i>
                        </button>
                        <div id="faq-ans-7" class="accordion-content px-6 bg-white border-t border-slate-100 text-slate-600 leading-relaxed text-sm">
                            <p class="pt-4">El 100% de nuestros proyectos se desarrollan bajo la filosofía Mobile-First. Utilizamos <strong>Responsive Design</strong> avanzado para asegurar que tu <strong>Joomla Website Development</strong> ofrezca una experiencia de usuario (UX) impecable tanto en smartphones como en tablets y pantallas de escritorio grandes.</p>
                        </div>
                    </div>

                    <!-- FAQ 8 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden">
                        <button class="faq-btn w-full px-6 py-5 text-left flex justify-between items-center focus:outline-none hover:bg-slate-100 transition-colors" aria-expanded="false" aria-controls="faq-ans-8">
                            <span class="font-bold text-dark pr-4">¿Cuál es el costo y tiempo de desarrollo de un sitio Joomla?</span>
                            <i class="fa-solid fa-chevron-down text-brand-600 transition-transform duration-300 ease-in-out shrink-0" aria-hidden="true"></i>
                        </button>
                        <div id="faq-ans-8" class="accordion-content px-6 bg-white border-t border-slate-100 text-slate-600 leading-relaxed text-sm">
                            <p class="pt-4">Como cada proyecto como una <strong>Agencia Joomla</strong> especializada es personalizado, el costo y el tiempo varían. Una landing page optimizada puede tomar semanas, mientras que un portal corporativo complejo o ecommerce puede tomar un par de meses. Contáctanos para una evaluación de tu proyecto; te proporcionaremos un presupuesto transparente y un cronograma detallado tras nuestra consulta inicial.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- CTA / Contact Section -->
        <section id="contacto" class="py-20 bg-slate-50">
            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
                <!-- Se ha implementado una imagen de fondo (bg-url) con capa de oscurecimiento (backdrop-blur) -->
                <div class="bg-brand-700 rounded-3xl p-10 md:p-16 flex flex-col lg:flex-row items-center justify-between gap-10 shadow-2xl relative overflow-hidden bg-[url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80')] bg-cover bg-center">
                    
                    <div class="absolute inset-0 bg-brand-900/85 backdrop-blur-[2px]"></div>
                    
                    <div class="absolute -right-20 -top-20 w-64 h-64 border-[30px] border-white/10 rounded-full"></div>
                    <div class="absolute -left-10 -bottom-10 w-40 h-40 border-[20px] border-white/10 rounded-full"></div>

                    <div class="z-10 w-full lg:w-2/3 text-center lg:text-left">
                        <h2 class="text-3xl md:text-5xl font-extrabold text-white mb-6 leading-tight">
                            Contacta con SoloJoomla
                        </h2>
                        <p class="text-brand-100 text-lg md:text-xl max-w-2xl mx-auto lg:mx-0">
                            Estás a un paso de elevar el nivel técnico y la visibilidad de tu empresa. Solicita ahora un presupuesto sin compromiso o reserva una consulta gratuita con nuestros ingenieros SEO.
                        </p>
                    </div>
                    
                    <div class="z-10 w-full lg:w-1/3 flex flex-col gap-4">
                        <a href="/cdn-cgi/l/email-protection#aadad8cfd9dfdadfcfd9dec5d9ead9c5c6c5c0c5c5c7c6cb84c9c5c7" class="bg-white text-brand-700 text-center px-8 py-4 rounded-xl font-bold hover:bg-slate-100 hover:scale-[1.02] transition-all shadow-xl text-lg">
                            Solicitar Presupuesto
                        </a>
                        <a href="tel:+34123456789" class="bg-transparent border-2 border-white/70 text-white text-center px-8 py-4 rounded-xl font-bold hover:bg-white/10 hover:border-white transition-all">
                            <i class="fa-solid fa-phone mr-2" aria-hidden="true"></i> Agendar Consulta Libre
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-dark pt-20 pb-8 text-white border-t-[6px] border-brand-600">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
                
                <!-- Brand -->
                <div class="lg:col-span-1">
                    <a href="/" class="inline-flex items-center gap-2 mb-6 group" aria-label="Inicio SoloJoomla">
                        <span class="text-3xl font-bold text-white tracking-tighter">SOLOJOOMLA<span class="text-gray-500 text-lg">.COM</span></span>
                    </a>
                    <p class="text-sm text-slate-400 leading-relaxed mb-6">
                        La agencia de desarrollo web exclusiva para proyectos Joomla de alto rendimiento y estrategias de posicionamiento SEO avanzado.
                    </p>
                    <div class="flex gap-4">
                        <a href="https://www.linkedin.com/company/solojoomla/" rel="nofollow" target="_blank" aria-label="LinkedIn de SoloJoomla" class="text-slate-400 hover:text-brand-500 transition-colors"><i class="fa-brands fa-linkedin text-xl" aria-hidden="true"></i></a>
                        <a href="https://x.com/solojoomla" rel="nofollow" target="_blank" aria-label="Twitter de SoloJoomla" class="text-slate-400 hover:text-brand-500 transition-colors"><i class="fa-brands fa-twitter text-xl" aria-hidden="true"></i></a>
                        <a href="#" aria-label="Github de SoloJoomla" class="text-slate-400 hover:text-brand-500 transition-colors"><i class="fa-brands fa-github text-xl" aria-hidden="true"></i></a>
                    </div>
                </div>

                <!-- Services -->
                <div>
                    <h3 class="font-bold text-lg mb-6 text-white">Nuestros Servicios</h3>
                    <ul class="space-y-3">
                        <li><a href="/desarrollo-web-profesional/" class="text-sm text-slate-400 hover:text-brand-400 transition">Desarrollo Web Profesional</a></li>
                        <li><a href="/auditoria-seo-joomla/" class="text-sm text-slate-400 hover:text-brand-400 transition">Joomla SEO & Audits</a></li>
                        <li><a href="/migracion-joomla/" class="text-sm text-slate-400 hover:text-brand-400 transition">Joomla Migration (Updates)</a></li>
                        <li><a href="/mantenimiento-joomla/" class="text-sm text-slate-400 hover:text-brand-400 transition">Joomla Maintenance & Security</a></li>
                        <li><a href="#" class="text-sm text-slate-400 hover:text-brand-400 transition">Desarrollo de Extensiones</a></li>
                    </ul>
                </div>

                <!-- Company -->
                <div>
                    <h3 class="font-bold text-lg mb-6 text-white">Empresa</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-sm text-slate-400 hover:text-brand-400 transition">Sobre SoloJoomla</a></li>
                        <li><a href="#" class="text-sm text-slate-400 hover:text-brand-400 transition">Portafolio Técnico</a></li>
                        <li><a href="#" class="text-sm text-slate-400 hover:text-brand-400 transition">Casos de Éxito SEO</a></li>
                        <li><a href="#" class="text-sm text-slate-400 hover:text-brand-400 transition">Blog Joomla & Marketing</a></li>
                        <li><a href="#contacto" class="text-sm text-slate-400 hover:text-brand-400 transition">Contacto</a></li>
                    </ul>
                </div>

                <!-- Contact Info -->
                <div>
                    <h3 class="font-bold text-lg mb-6 text-white">Oficina</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start gap-3">
                            <i class="fa-solid fa-location-dot mt-1 text-brand-500" aria-hidden="true"></i>
                            <span class="text-sm text-slate-400">Torre Tecnológica, Planta 5<br>Madrid, España 28001</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fa-solid fa-envelope text-brand-500" aria-hidden="true"></i>
                            <a href="/cdn-cgi/l/email-protection#5b333e3737341b2834373431343436373a75383436" class="text-sm text-slate-400 hover:text-white transition"><span class="__cf_email__" data-cfemail="c4aca1a8a8ab84b7aba8abaeababa9a8a5eaa7aba9">[email&#160;protected]</span></a>
                        </li>
                        <li class="flex items-center gap-3">
                            <i class="fa-solid fa-phone text-brand-500" aria-hidden="true"></i>
                            <span class="text-sm text-slate-400">+34 123 456 789</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Copyright -->
            <div class="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <p class="text-sm text-slate-500">© <span id="year"></span> SoloJoomla - Expertos en CMS. Todos los derechos reservados.</p>
                <div class="flex gap-4">
                    <a href="#" class="text-sm text-slate-500 hover:text-white transition">Aviso Legal</a>
                    <a href="#" class="text-sm text-slate-500 hover:text-white transition">Privacidad</a>
                    <a href="#" class="text-sm text-slate-500 hover:text-white transition">Cookies</a>
                </div>
            </div>
        </div>
    </footer>

    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
        // Update Copyright Year
        document.getElementById('year').textContent = new Date().getFullYear();

        // Navbar Scroll Effect
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 20) {
                navbar.classList.add('shadow-md');
                navbar.classList.replace('bg-white/90', 'bg-white/98');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.replace('bg-white/98', 'bg-white/90');
            }
        });

        // Mobile Menu Toggle
        const mobileBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        const menuIcon = document.getElementById('menu-icon');

        mobileBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            if (mobileMenu.classList.contains('hidden')) {
                menuIcon.classList.remove('fa-xmark');
                menuIcon.classList.add('fa-bars');
            } else {
                menuIcon.classList.remove('fa-bars');
                menuIcon.classList.add('fa-xmark');
            }
        });

        // Close mobile menu on link click
        mobileMenu.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                menuIcon.classList.remove('fa-xmark');
                menuIcon.classList.add('fa-bars');
            });
        });

        // 3. Dropdown Menu "Serivice" Mobile
        document.getElementById("mobile-service-toggle").addEventListener("click", function(e) {
            e.preventDefault(); // Mencegah reload/scroll up
            const submenu = document.getElementById("mobile-service-submenu");
            const icon = document.getElementById("mobile-service-icon");
            
            // Tampilkan/Sembunyikan submenu
            submenu.classList.toggle("hidden");
            
            // Efek panah (chevron) berputar
            if(submenu.classList.contains("hidden")) {
                icon.classList.remove("rotate-180");
            } else {
                icon.classList.add("rotate-180");
            }
        });

        // FAQ Accordion Logic
        const faqButtons = document.querySelectorAll('.faq-btn');
        faqButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                const isExpanded = this.getAttribute('aria-expanded') === 'true';
                
                // Close all others 
                faqButtons.forEach(otherBtn => {
                    if (otherBtn !== this) {
                        otherBtn.setAttribute('aria-expanded', 'false');
                        otherBtn.nextElementSibling.classList.remove('active');
                        otherBtn.querySelector('i').style.transform = 'rotate(0deg)';
                    }
                });

                // Toggle current
                this.setAttribute('aria-expanded', !isExpanded);
                const content = this.nextElementSibling;
                const icon = this.querySelector('i');

                if (!isExpanded) {
                    content.classList.add('active');
                    icon.style.transform = 'rotate(180deg)';
                } else {
                    content.classList.remove('active');
                    icon.style.transform = 'rotate(0deg)';
                }
            });
        });
    </script>
</body>
</html>