<!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 | Agencia Joomla, Diseño Web y SEO Técnico Especializado</title>
    
    <!-- SEO Meta Tags Optimizadas -->
    <meta name="description" content="Agencia Joomla exclusiva. Elevamos tu marca con Desarrollo Joomla a medida, Diseño Web Joomla de alto rendimiento y estrategias de SEO Técnico avanzado.">
    <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 | Agencia de Desarrollo y SEO Técnico">
    <meta property="og:description" content="Expertos en Desarrollo Joomla y posicionamiento orgánico. Construimos arquitecturas web escalables y seguras para líderes del sector.">
    <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 | Agencia de Desarrollo y SEO Técnico">
    <meta property="twitter:description" content="Expertos en Desarrollo Joomla y posicionamiento orgánico. Construimos arquitecturas web escalables y seguras para líderes del sector.">

    <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) E-E-A-T Orientado -->
    <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 Joomla de ingeniería web especializada en crear arquitecturas digitales escalables, con un enfoque estricto en SEO Técnico y Core Web Vitals.",
          "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 Joomla", "Joomla SEO", "Diseño Web Joomla", "SEO Técnico"]
          }
        },
        {
          "@type": "FAQPage",
          "mainEntity": [
            {
              "@type": "Question",
              "name": "¿Por qué elegir Joomla frente a otros gestores de contenido comerciales?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "La elección radica en la robustez arquitectónica. Joomla proporciona un framework MVC puro, un control de acceso (ACL) de grado empresarial y capacidades multilingües en su núcleo, siendo la opción superior para un Desarrollo Joomla corporativo que exige seguridad y flexibilidad absoluta."
              }
            },
            {
              "@type": "Question",
              "name": "¿Es posible alcanzar la primera página de Google usando Joomla?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "Indiscutiblemente. El núcleo del CMS permite una manipulación granular del SEO Técnico. Al optimizar el enrutamiento, implementar microformatos y perfeccionar los Core Web Vitals, el Joomla SEO estructurado por nuestra agencia supera regularmente a plataformas competidoras en las SERPs."
              }
            }
          ]
        }
      ]
    }
    </script>

    <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>
        <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>
                        Laboratorio de Ingeniería y Posicionamiento
                    </div>
                    
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-dark leading-[1.15] mb-8 tracking-tight">
                        Liderazgo Digital mediante <span class="gradient-text">Diseño Web Joomla</span> y SEO Técnico
                    </h1>
                    
                    <p class="text-lg md:text-xl text-slate-600 mb-10 leading-relaxed font-normal max-w-3xl mx-auto">
                        Forjamos activos digitales inquebrantables. Operando como una <strong>Agencia Joomla</strong> de élite, no solo ensamblamos páginas; orquestamos un <strong>Desarrollo Joomla</strong> de grado empresarial donde la arquitectura limpia converge con el <strong>Joomla SEO</strong> más agresivo para conquistar el algoritmo de Google.
                    </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">
                            Desplegar Arquitectura <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">
                            Auditar Capacidades
                        </a>
                    </div>
                </div>

                <!-- Hero Dashboard/Code visual -->
                <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">auditoria-tecnica.json — SoloJoomla Engine</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">plataformaJoomla</span> <span class="text-cyan-300">=</span> {</div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">2</span>&nbsp;&nbsp;estructura: <span class="text-green-300">"MVC Personalizado & Blindado"</span>,</div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">3</span>&nbsp;&nbsp;metricasAEO_GEO: {</div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">4</span>&nbsp;&nbsp;&nbsp;&nbsp;LCP_Time: <span class="text-orange-300">0.6s</span>, <span class="text-slate-500 italic">// Core Web Vitals Optimo</span></div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">5</span>&nbsp;&nbsp;&nbsp;&nbsp;Semantic_Markup: <span class="text-purple-400">true</span>,</div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">6</span>&nbsp;&nbsp;&nbsp;&nbsp;Indexability: <span class="text-green-300">"100%"</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;especialistaSEO: <span class="text-purple-400">true</span>,</div>
                                <div class="flex"><span class="text-slate-500 w-8 select-none">9</span>&nbsp;&nbsp;desarrollador: <span class="text-green-300">"SoloJoomla Certified Devs"</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">iniciarDespliegue</span>(plataformaJoomla).<span class="text-blue-300">execute</span>(dominarSERPs);</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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">El Framework Definitivo para la Escalabilidad</h2>
                    <p class="text-slate-600 leading-relaxed text-lg">
                        Mientras otros sistemas colapsan bajo arquitecturas complejas, el núcleo de Joomla está forjado para entornos Enterprise. Analicemos por qué cualquier <strong>Joomla Developer</strong> experto prefiere esta infraestructura lógica para proyectos ambiciosos.
                    </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">Model-View-Controller (MVC)</h3>
                        <p class="text-slate-600 leading-relaxed text-sm">
                            El <strong>Desarrollo Joomla</strong> se fundamenta en un patrón MVC estricto. Esta separación de la lógica de negocio y la presentación visual nos permite construir extensiones intrincadas sin comprometer la estabilidad del núcleo central de tu plataforma.
                        </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">Joomla Security Intransigente</h3>
                        <p class="text-slate-600 leading-relaxed text-sm">
                            Superficie de ataque minimizada por diseño. Con un sistema de cifrado robusto, protección contra inyecciones SQL integrada y autenticación en dos pasos nativa, aseguramos el blindaje total de los datos corporativos más sensibles.
                        </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">ACL: Control de Acceso Granular</h3>
                        <p class="text-slate-600 leading-relaxed text-sm">
                            Olvídese de los parches. Joomla posee el Gestor de Listas de Control de Acceso (ACL) más avanzado del mercado <i>out-of-the-box</i>. Segmentamos roles, permisos y jerarquías de publicación con una precisión micrométrica para grandes corporaciones.
                        </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">Dominio de Core Web Vitals</h3>
                        <p class="text-slate-600 leading-relaxed text-sm">
                            Un ecosistema ágil. Implementamos estrategias de caché profunda y minificación dinámica. Nuestro <strong>Diseño Web Joomla</strong> garantiza un Time to First Byte (TTFB) fugaz, satisfaciendo las métricas de rendimiento más exigentes de Google.
                        </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">Arquitectura Multilingüe Nativa</h3>
                        <p class="text-slate-600 leading-relaxed text-sm">
                            Despliegue global sin dependencias de terceros. Estructuramos portales internacionales con asociaciones de menú precisas y etiquetas hreflang automáticas, elementos cruciales para una estrategia de <strong>Joomla SEO</strong> sin fronteras.
                        </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">Independencia Tecnológica</h3>
                        <p class="text-slate-600 leading-relaxed text-sm">
                            Basado en estándares universales (PHP/MySQL) y sin licencias cautivas (Open Source). Como su <strong>Agencia Joomla</strong> de confianza, le entregamos la propiedad absoluta de una plataforma respaldada por un ecosistema global de desarrolladores.
                        </p>
                    </article>
                </div>
            </div>
        </section>

        <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">
                
                <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">Factura de Ingeniería (Code Crafting)</span>
                        <h2 class="text-3xl md:text-4xl font-extrabold text-dark leading-tight mb-6">Desarrollo Joomla a Medida y Diseño Estructural</h2>
                        <p class="text-slate-600 text-lg leading-relaxed">
                            Trascendemos el ensamblaje visual básico. En SoloJoomla, ejecutamos un <strong>Diseño Web Joomla</strong> programado desde los cimientos. Evadimos los constructores monolíticos (page builders) que ralentizan la carga, apostando por maquetación semántica nativa y desarrollo de componentes exclusivos que resuelven flujos de trabajo únicos.
                        </p>
                    </div>
                    <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="Programación y Diseño Web Joomla Personalizado" 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">Plataformas B2B y Portales</h3>
                        <p class="text-sm text-slate-600 leading-relaxed mb-4 mt-2">
                            Ingeniería aplicada a directorios de alta densidad, plataformas e-learning (LMS), extranets seguras y sitios corporativos. Sincronizamos su <strong>Desarrollo Joomla</strong> mediante APIs REST con su infraestructura interna (CRMs y ERPs), centralizando la operatividad digital.
                        </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 Transaccional Avanzado</h3>
                        <p class="text-sm text-slate-600 leading-relaxed mb-4 mt-2">
                            Integración de motores de catálogo robustos. Optimizamos radicalmente el proceso de checkout y la gestión de inventario. Configuramos pasarelas de pago cifradas, plataformas <a href="https://chandra-lawfirm.com/" target="_blank">Law Firm</a> priorizando siempre la experiencia del usuario final y las tasas de conversión orgánicas.
                        </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">Entornos Institucionales Restrictivos</h3>
                        <p class="text-sm text-slate-600 leading-relaxed mb-4 mt-2">
                            Despliegues adaptados a ministerios, <a href="https://schoolday.id/en" target="_blank">school management system</a> redes universitarias y centros de salud. Nos regimos por auditorías de accesibilidad estandarizadas y aplicamos endurecimiento perimetral continuo para neutralizar vectores de amenaza sobre el core del sistema.
                        </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">Directrices de nuestro <strong>Joomla Developer</strong> Team:</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-code-branch text-brand-500 mr-2"></i> Clean Code & Overrides Nativos</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-mobile-screen-button text-brand-500 mr-2"></i> Fluid Responsive UI</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-microchip text-brand-500 mr-2"></i> Consumo Reducido de DOM</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-spider text-brand-500 mr-2"></i> AEO & GEO Ready Markup</span>
                    </div>
                </div>
            </div>
        </section>

        <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">
                    
                    <div>
                        <span class="block text-brand-400 font-bold uppercase tracking-wider text-sm mb-3">Supremacía en SERPs y Motores de IA</span>
                        <h2 class="text-3xl md:text-4xl font-extrabold mb-6 leading-tight">Posicionamiento Orgánico y SEO Técnico</h2>
                        
                        <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="Métricas Avanzadas de Joomla SEO y AEO" 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-network-wired mr-2"></i> Arquitectura Semántica Descubrible</span>
                             </div>
                        </div>

                        <div class="space-y-6 text-slate-300 text-base leading-relaxed">
                            <p>
                                El algoritmo de Google y los nuevos motores de respuestas generativas (GEO) penalizan la mediocridad técnica. Como <strong>Agencia Joomla</strong> especialista, no realizamos SEO cosmético. Intervenimos directamente en las tripas del servidor y el código para garantizar una indexación hiper-eficiente.
                            </p>
                            <p>
                                Ejecutamos una hoja de ruta de <strong>SEO Técnico</strong> implacable. Desde la resolución de bucles de redirección y canonicalizaciones conflictivas, hasta la inyección de esquemas JSON-LD dinámicos. Maximizamos el <i>Crawl Budget</i> (Presupuesto de Rastreo) de tu sitio para que cada página publicada aporte autoridad real a tu dominio.
                            </p>
                            <p>
                                El resultado de este enfoque de ingeniería sobre el <strong>Joomla SEO</strong> es matemático: <strong>Eliminación de fricciones técnicas, cumplimiento del 100% de los Core Web Vitals, y un flujo sostenido de tráfico transaccional (Leads B2B/B2C) altamente cualificado.</strong>
                            </p>
                        </div>
                    </div>

                    <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">Vector de Optimización SEO</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-server text-brand-400 w-6"></i> Análisis de Logs de Servidor</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-project-diagram text-brand-400 w-6"></i> Arquitectura Silo e Interlinking</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-bolt text-brand-400 w-6"></i> Aprobación <strong>Core Web Vitals</strong></li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-route text-brand-400 w-6"></i> Optimización del Enrutador (URLs)</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-code text-brand-400 w-6"></i> Marcado Schema (Entities AEO)</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-file-code text-brand-400 w-6"></i> Limpieza de DOM y CSS/JS</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-robot text-brand-400 w-6"></i> Directivas Robots y Sitemap dinámico</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-globe text-brand-400 w-6"></i> Hreflang para SEO Internacional</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-heading text-brand-400 w-6"></i> Jerarquía de Encabezados H1-H6</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-compress text-brand-400 w-6"></i> Compresión WebP y AVIF</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-link-slash text-brand-400 w-6"></i> Remediación de Errores 404/5xx</li>
                            <li class="flex items-center text-slate-300"><i class="fa-solid fa-magnifying-glass-chart text-brand-400 w-6"></i> Auditorías Forenses Continuas</li>
                        </ul>
                    </div>
                </div>
            </div>
        </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">El Valor de la Hiper-Especialización</h2>
                <p class="text-brand-100 max-w-3xl mx-auto text-lg mb-12 leading-relaxed">
                    A diferencia de agencias generalistas que improvisan entre múltiples plataformas, SoloJoomla dedica el 100% de su capacidad intelectual a ser la máxima autoridad como <strong>Joomla Developer</strong>. Esta inmersión total nos dota de un conocimiento enciclopédico del core del sistema. Sabemos exactamente qué línea de código tocar para resolver cuellos de botella de rendimiento, aplicar protocolos de <strong>Joomla Security</strong> severos o efectuar complejas migraciones estructurales sin disrupción operativa. Construimos pensando en el futuro.
                </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">Expertise</div>
                        <div class="text-sm text-brand-200 font-medium uppercase tracking-wide">Desarrollo Core Exclusivo</div>
                    </div>
                    <div>
                        <div class="text-4xl font-black mb-2">Zero-Day</div>
                        <div class="text-sm text-brand-200 font-medium uppercase tracking-wide">Mitigación de Vulnerabilidades</div>
                    </div>
                    <div>
                        <div class="text-4xl font-black mb-2">API First</div>
                        <div class="text-sm text-brand-200 font-medium uppercase tracking-wide">Integración de Sistemas B2B</div>
                    </div>
                    <div>
                        <div class="text-4xl font-black mb-2">AEO / GEO</div>
                        <div class="text-sm text-brand-200 font-medium uppercase tracking-wide">Optimizados para IA</div>
                    </div>
                </div>
            </div>
        </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">Metodología Operativa</h2>
                    <p class="text-slate-600">Ciclo de vida del software diseñado para asegurar la estabilidad, escalabilidad y rentabilidad.</p>
                </div>

                <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="Consultoría y Estrategia Agencia 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">
                            Protocolo de Ingeniería Estricto
                        </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">Diagnóstico e Ingeniería de Requisitos</h3>
                            <p class="text-sm text-slate-600">Auditoría profunda del entorno actual (código, servidores, KPIs) y mapeo lógico de la nueva arquitectura de datos y entidades clave para AEO.</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">Prototipado y Diseño Web Joomla</h3>
                            <p class="text-sm text-slate-600">Construcción de interfaces (UI/UX) bajo principios <i>Mobile-First</i>. Diseño modular visualmente persuasivo y técnicamente liviano.</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">Codificación Pura y Ensamblaje</h3>
                            <p class="text-sm text-slate-600">Elaboración de overrides de plantilla, creación de componentes específicos y configuración férrea de políticas de <strong>Joomla Security</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">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">Stress Test y Calibración SEO Técnico</h3>
                            <p class="text-sm text-slate-600">Simulación de carga intensiva, validación W3C, depuración de Core Web Vitals y verificación de esquemas estructurados para dominar el <strong>Joomla SEO</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">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">Despliegue y Mantenimiento Proactivo</h3>
                            <p class="text-sm text-slate-600">Migración final a producción. Implementamos monitorización 24/7 y ciclos de actualización continua para evitar obsolescencia o brechas de seguridad.</p>
                        </div>
                    </div>
                </div>
            </div>
        </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">
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
                    
                    <div class="lg:col-span-7">
                        <h2 class="text-3xl font-extrabold text-dark mb-6">El Imperativo del SEO en la Era de las IAs (GEO)</h2>
                        
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Análisis de Rendimiento SEO Técnico Joomla" 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">
                            El paradigma de búsqueda ha mutado. Ya no se trata solo de clasificar enlaces azules; se trata de convertirse en la respuesta fáctica extraída por Google AI Overviews o ChatGPT. La Optimización para Motores Generativos (GEO) exige que su sitio web actúe como una base de datos de conocimiento impecable.
                        </p>
                        <p class="text-slate-600 leading-relaxed mb-6">
                            Un ecosistema sin <strong>SEO Técnico</strong> es invisible, sin importar la calidad del servicio que ofrezca. La autoridad digital se consolida demostrando <i>Expertise</i> a través de contenido semánticamente enlazado, arquitecturas de información lógicas y un rendimiento (WPO) sin fisuras. Nuestro trabajo es convertir su portal en el estándar de oro de su industria, asegurando que las máquinas comprendan, confíen y prioricen su marca frente a cualquier competidor, garantizando así la adquisición constante de clientes (B2B/B2C).
                        </p>
                        <div class="clear-both"></div>
                    </div>

                    <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">Estructuras Web que Dominamos</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">Redes Corporativas Multinacionales</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">Catálogos B2B Complejos</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 Transaccional</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">Sedes Electrónicas (Gov)</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">Sistemas LMS Educativos</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">Intranets de Alta Seguridad</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">Portales Médicos Privados</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">Agregadores de Noticias Inmobiliarias</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">Motores de Reservas (Hoteles)</span>
                        </div>
                    </div>
                </div>
            </div>
        </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">Auditorías Previas (Ejemplos Conceptuales)</span>
                    <h2 class="text-3xl md:text-4xl font-extrabold mb-6">Demostración de Capacidad Técnica</h2>
                    <p class="text-slate-400 leading-relaxed text-lg">
                        La verdadera prueba de un <strong>Joomla Developer</strong> es su capacidad resolutiva bajo presión estructural. A continuación, desglosamos los retos técnicos y de escalabilidad extrema que nuestra agencia está capacitada para auditar y solventar, tomando como referencia entornos de máxima exigencia transaccional y alto tráfico.
                    </p>
                </div>

                <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/">Escenario A</a> <span class="text-sm font-normal text-slate-400 ml-2">Alta Concurrencia</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">Ingeniería para Tráfico Masivo (Traffic Spikes)</h3>
                        <p class="text-sm text-slate-300 leading-relaxed flex-grow">
                            Diseño arquitectónico para plataformas que deben soportar miles de peticiones HTTP por segundo. Implica la segregación de bases de datos de lectura/escritura (Replication), configuración de balanceadores de carga en alta disponibilidad y ajuste fino del framework Joomla para minimizar consultas redundantes (Query Optimization).
                        </p>
                    </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/">Escenario B</a> <span class="text-sm font-normal text-slate-400 ml-2">Memoria y WPO</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">Dominio Absoluto de Caché y Renderizado</h3>
                        <p class="text-sm text-slate-300 leading-relaxed flex-grow">
                            Implementación avanzada de capas de almacenamiento en memoria (Redis/Varnish) conectadas directamente al núcleo del CMS. El objetivo es entregar páginas dinámicas con tiempos de respuesta de milisegundos (TTFB), cumpliendo rigurosamente los mandatos de Google sobre <strong>Core Web Vitals</strong> sin sacrificar la interactividad.
                        </p>
                    </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/">Escenario C</a> <span class="text-sm font-normal text-slate-400 ml-2">Ciberseguridad</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">Cifrado de Datos y Endurecimiento Perimetral</h3>
                        <p class="text-sm text-slate-300 leading-relaxed flex-grow">
                            Evaluación y blindaje contra las vulnerabilidades del OWASP Top 10. Despliegue de cabeceras de seguridad estrictas (CSP, HSTS), sanitización exhaustiva de inputs en formularios a medida, y establecimiento de políticas de <strong>Joomla Security</strong> que protegen la integridad de bases de datos que contienen información de usuarios críticos.
                        </p>
                    </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/">Escenario D</a> <span class="text-sm font-normal text-slate-400 ml-2">SEO Global</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">Despliegue Hreflang a Gran Escala</h3>
                        <p class="text-sm text-slate-300 leading-relaxed">
                            Gestión de proyectos multinacionales donde el <strong>Joomla SEO</strong> se vuelve extremadamente complejo. Orquestación perfecta de etiquetas de idioma regionalizadas, prevención de canibalización y contenido duplicado internacional, garantizando que el buscador muestre la variación correcta de la URL según la IP y preferencia del usuario.
                        </p>
                    </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">Escenario E <span class="text-sm font-normal text-slate-400 ml-2">Integraciones Nativas</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 Plugins Creados desde Cero</h3>
                        <p class="text-sm text-slate-300 leading-relaxed">
                            A diferencia de los implementadores básicos que acumulan extensiones pesadas de terceros, nuestro equipo de <strong>Desarrollo Joomla</strong> diagrama y codifica soluciones personalizadas (Componentes, Módulos, Plugins) adheridas al 100% a los estándares de codificación oficiales. Esto asegura actualizaciones futuras (Upgrades) sin conflictos fatales y un rendimiento limpio.
                        </p>
                    </article>

                </div>
                <div class="mt-8 text-center text-xs text-slate-500 border-t border-slate-700 pt-6">
                    *Aviso Legal: Los escenarios planteados constituyen modelos de arquitectura de referencia tecnológica (Arch Ref.) destinados a ilustrar la madurez de ingeniería exigida en despliegues corporativos de alto estrés operativo.
                </div>
            </div>
        </section>

        <section class="py-20 bg-white">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-slate-800 mb-4">Transferencia de Conocimiento</h2>
                <p class="text-slate-600">Documentación técnica, guías SysAdmin y tácticas avanzadas de posicionamiento.</p>
            </div>
            <div class="grid px-10 max-w-7xl mx-auto lg:grid-cols-4 gap-6">
                <!-- Article 1 -->
                <article class="bg-white rounded-2xl shadow-sm border border-slate-200 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-brand-900/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-brand-700 text-xs font-bold px-3 py-1 rounded-full shadow-sm">Infraestructura Server</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-dark text-lg mb-3 line-clamp-2 hover:text-brand-600 transition-colors cursor-pointer">
                            <a href="/instalar-joomla-nginx-php-fpm-mariadb/">Guía Definitiva: Despliegue de Joomla sobre Pila LEMP (Nginx, PHP-FPM, MariaDB) de Alto Rendimiento</a>
                        </h3>
                        <div class="mt-auto flex items-center justify-between text-xs text-slate-500 font-medium border-t border-slate-100 pt-3">
                            <span>15 Agosto 2026</span>
                            <span class="flex items-center gap-1"><i class="far fa-clock"></i> 8 min de lectura técnica</span>
                        </div>
                    </div>
                </article>
                <!-- Article 2 -->
                <article class="bg-white rounded-2xl shadow-sm border border-slate-200 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-brand-900/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-brand-700 text-xs font-bold px-3 py-1 rounded-full shadow-sm">Análisis de 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-dark text-lg mb-3 line-clamp-2 hover:text-brand-600 transition-colors cursor-pointer">
                            <a href="/que-es-joomla/">Diseccionando Joomla: Arquitectura del Gestor de Contenidos para Proyectos Escalables</a>
                        </h3>
                        <div class="mt-auto flex items-center justify-between text-xs text-slate-500 font-medium border-t border-slate-100 pt-3">
                            <span>02 Agosto 2026</span>
                            <span class="flex items-center gap-1"><i class="far fa-clock"></i> 6 min de lectura técnica</span>
                        </div>
                    </div>
                </article>
                <!-- Article 3 -->
                <article class="bg-white rounded-2xl shadow-sm border border-slate-200 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-brand-900/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-brand-700 text-xs font-bold px-3 py-1 rounded-full shadow-sm">Configuración 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-dark text-lg mb-3 line-clamp-2 hover:text-brand-600 transition-colors cursor-pointer">
                            <a href="/instalar-nginx-ubuntu-24-04/">Tutorial Técnico: Instalación y Endurecimiento de Nginx en Servidores Ubuntu 24.04 LTS</a>
                        </h3>
                        <div class="mt-auto flex items-center justify-between text-xs text-slate-500 font-medium border-t border-slate-100 pt-3">
                            <span>28 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-slate-200 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-brand-900/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-brand-700 text-xs font-bold px-3 py-1 rounded-full shadow-sm">Optimización AEO/GEO</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-dark text-lg mb-3 line-clamp-2 hover:text-brand-600 transition-colors cursor-pointer">
                            <a href="/guia-seo-on-page-optimizacion/">Masterclass de SEO On-Page: Marcado Semántico, Prominencia de Entidades y Estrategias Técnicas</a>
                        </h3>
                        <div class="mt-auto flex items-center justify-between text-xs text-slate-500 font-medium border-t border-slate-100 pt-3">
                            <span>15 Julio 2026</span>
                            <span class="flex items-center gap-1"><i class="far fa-clock"></i> 10 min de lectura técnica</span>
                        </div>
                    </div>
                </article>
            </div>       
        </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">Base de Conocimientos Críticos (FAQ)</h2>
                    <p class="text-slate-600">Respuestas directas, precisas y transparentes proporcionadas por nuestros ingenieros especializados.</p>
                </div>
                
                <div class="space-y-4">
                    <!-- FAQ 1 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden shadow-sm">
                        <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é priorizar Joomla frente a WordPress en entornos corporativos?</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">La elección radica en la robustez arquitectónica fundacional. Mientras que WordPress nació como una plataforma de blogging que depende en gran medida de plugins de terceros para funciones básicas de seguridad y multilenguaje, Joomla proporciona un framework Modelo-Vista-Controlador (MVC) puro, un control de acceso (ACL) nativo de grado empresarial y capacidades multilingües integradas en su núcleo. Esto lo convierte en la opción superior, más segura y limpia para un <strong>Desarrollo Joomla</strong> complejo que exige escalabilidad y cero vulnerabilidades derivadas de parches externos.</p>
                        </div>
                    </div>

                    <!-- FAQ 2 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden shadow-sm">
                        <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">¿Puede un sitio Joomla competir y alcanzar la primera posición 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">Indiscutiblemente. La capacidad de clasificación no depende del nombre del CMS, sino del código generado y del <strong>SEO Técnico</strong> aplicado. El núcleo de Joomla permite una manipulación granular excelente de metadatos, estructuración semántica y enrutamiento de URLs. Al optimizar estos factores, inyectar microformatos JSON-LD y garantizar un código fuente minificado, nuestras estrategias de <strong>Joomla SEO</strong> logran sistemáticamente superar a plataformas competidoras en las páginas de resultados de búsqueda (SERPs).</p>
                        </div>
                    </div>

                    <!-- FAQ 3 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden shadow-sm">
                        <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">Tengo una web obsoleta en Joomla 3. ¿Es segura la migración a la versión 5?</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">Es imperativo, no solo una opción. Mantener versiones desactualizadas (Legacy) expone su negocio a brechas críticas. En nuestra <strong>Agencia Joomla</strong>, orquestamos un proceso de actualización (Migration) meticuloso y en servidores staging (pruebas). Garantizamos la preservación absoluta de la base de datos (usuarios, artículos, pedidos), reescribimos las extensiones incompatibles para que funcionen con PHP 8+ y, crucialmente, mantenemos intactas sus URLs y mapeos de redirección 301 para no sacrificar su tráfico orgánico preexistente.</p>
                        </div>
                    </div>

                    <!-- FAQ 4 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden shadow-sm">
                        <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">Si mi modelo de negocio es único, ¿pueden crear lógicas personalizadas?</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">Totalmente. El diferencial de contratar a un <strong>Joomla Developer</strong> certificado radica en no estar sujeto a las limitaciones del software "empaquetado". Desarrollamos Componentes, Módulos y Plugins 100% nativos e individualizados. Ya sea un sistema de gestión de inventario, un conector (API Bridge) con su software contable, o un portal de cálculo de presupuestos en tiempo real, programamos la lógica matemática y de datos exacta que su corporación requiera, manteniendo el core de Joomla impoluto.</p>
                        </div>
                    </div>

                    <!-- FAQ 5 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden shadow-sm">
                        <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">¿El servicio incluye monitorización y blindaje continuo post-lanzamiento?</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">Entendemos que un portal corporativo no puede permitirse tiempos de inactividad (Downtime). Proveemos acuerdos de nivel de servicio (SLA) para soporte continuo. Esto abarca copias de seguridad incrementales automatizadas off-site, auditorías de <strong>Joomla Security</strong> en tiempo real, aplicación inmediata de parches del núcleo emitidos por el equipo global de Joomla (Zero-Day vulnerabilities) y monitorización de uptime, garantizando la integridad de su activo digital 24/7/365.</p>
                        </div>
                    </div>

                    <!-- FAQ 6 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden shadow-sm">
                        <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">¿De qué manera garantizan métricas impecables en Core Web Vitals?</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">La velocidad web dejó de ser una sugerencia para convertirse en un factor de posicionamiento crítico. Logramos métricas "verdes" en <strong>Core Web Vitals</strong> aplicando tácticas de ingeniería: erradicamos dependencias innecesarias bloqueando el renderizado, implementamos carga diferida (Lazy Load) programática, servimos assets a través de CDN de última generación, y aplicamos arquitecturas de caché a nivel de servidor (Redis) que reducen el impacto en la base de datos MySQL, entregando el HTML al navegador en fracciones de segundo.</p>
                        </div>
                    </div>

                    <!-- FAQ 7 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden shadow-sm">
                        <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">¿La arquitectura web estará optimizada para indexación "Mobile-First"?</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">De manera irrefutable. Dado que los rastreadores de búsqueda (como Googlebot) evalúan los sitios primordialmente en su versión móvil, todo nuestro <strong>Diseño Web Joomla</strong> se concibe bajo el paradigma Mobile-First. Construimos interfaces fluidas y adaptativas (Responsive Web Design) donde la jerarquía visual, la tipografía escalable y las zonas táctiles están meticulosamente diseñadas para maximizar la retención de usuarios en smartphones y tablets, evitando penalizaciones de usabilidad.</p>
                        </div>
                    </div>

                    <!-- FAQ 8 -->
                    <div class="bg-slate-50 border border-slate-200 rounded-xl overflow-hidden shadow-sm">
                        <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 modelo de inversión para un proyecto de esta envergadura?</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">La ingeniería a medida exige planificación rigurosa. El presupuesto es directamente proporcional a la complejidad arquitectónica, las integraciones API requeridas y los objetivos de escalabilidad. Un entorno de ecommerce multinacional requerirá más ciclos de desarrollo que un portal B2B estándar. Le invitamos a agendar una consulta técnica inicial, totalmente gratuita; tras auditar sus requisitos operativos, le presentaremos un cronograma de ejecución detallado y una propuesta económica clara y sin costos ocultos.</p>
                        </div>
                    </div>
                </div>
            </div>
        </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">
                <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">
                            Consolide su Autoridad Digital
                        </h2>
                        <p class="text-brand-100 text-lg md:text-xl max-w-2xl mx-auto lg:mx-0">
                            Evite perder terreno frente a competidores tecnológicamente superiores. Intervenga ahora contactando a los expertos en infraestructura y posicionamiento orgánico exclusivo para el ecosistema Joomla.
                        </p>
                    </div>
                    
                    <div class="z-10 w-full lg:w-1/3 flex flex-col gap-4">
                        <a href="/cdn-cgi/l/email-protection#1e6e6c7b6d6b6e6b7b6d6a716d5e6d71727174717173727f307d7173" 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">
                            Análisis Técnico Gratuito
                        </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> Conversar con un Ingeniero
                        </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#ed8588818182ad9e82818287828280818cc38e8280" class="text-sm text-slate-400 hover:text-white transition"><span class="__cf_email__" data-cfemail="4129242d2d2e01322e2d2e2b2e2e2c2d206f222e2c">[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');
            });
        });

        // Dropdown Menu "Serivice" Mobile
        document.getElementById("mobile-service-toggle").addEventListener("click", function(e) {
            e.preventDefault(); 
            const submenu = document.getElementById("mobile-service-submenu");
            const icon = document.getElementById("mobile-service-icon");
            
            submenu.classList.toggle("hidden");
            
            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>