<?php
// index.php
?>

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta
        description="Auron - Bot de Predicción Avanzado para Discord, potencia tu servidor con IA, análisis y automatización.">
    <meta name="keywords" content="Auron, Discord, IA, predicción, análisis datos, automatización">
    <meta name="author" content="Xelviora">
    <meta property="og:title" content="Auron - Bot de Predicción Avanzado para Discord">
    <meta property="og:description"
        content="Potencia tu servidor de Discord con IA, análisis de datos, predicciones y automatización.">
    <meta property="og:image" content="/images/an_logo.png">
    <meta property="og:url" content="https://www.xelviora.com">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="es_ES">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Auron - Bot Avanzado para Discord">
    <meta name="twitter:description" content="Predicciones, análisis y automatización para tu servidor de Discord.">
    <meta name="twitter:image" content="/images/an_logo.png">

    <title data-lang-es="Auron - Bot de Predicción Avanzado para Discord"
        data-lang-en="Auron - Advanced Prediction Bot for Discord">Auron - Bot de Predicción Avanzado para Discord
    </title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/images/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
    <link rel="manifest" href="/images/site.webmanifest">
    <meta name="apple-mobile-web-app-title" content="Auron">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">

    <!-- CSS Libraries -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">

    <style>
        /* ████████ OFUSCADO ████████ */
        :root {
            --g0ld: #FFD700;
            --g0ld-d@rk: #FFC300;
            --bl@ck: #000000;
            --gr@y-800: #2c2c2c;
            --gr@y-700: #3c3c3c;
            --gr@y-400: #ccc;
            --wh !te: #fff;
            --l !ght-bg: #f8f9fa;
            --pr !m@ry-gr@dient: linear-gradient(135deg, #FFD700 0%, #FFC300 100%);
        }

        body,
        html {
            overflow-x: hidden;
        }

        body {
            font-family: 'Lato', sans-serif;
            background-color: var(--bl@ck);
            color: var(--wh !te);
            margin: 0;
            padding-top: 80px;
            transition: background-color 0.5s, color 0.5s;
        }

        header,
        footer,
        section {
            position: relative;
        }

        a {
            text-decoration: none;
        }

        .h0v3r-g0ld:hover {
            color: var(--g0ld) !important;
        }

        /* ██████ H3RO S3CTION ██████ */
        .h3r0-s3ction {
            position: relative;
            min-height: 100vh;
            background: url('/images/hero-background.jpg') no-repeat center center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--wh !te);
        }

        #p@rt!cl3s-js {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;
            top: 0;
            left: 0;
        }

        #t !p3d-t3xt {
            border-right: 0.15em solid var(--g0ld);
            white-space: nowrap;
            overflow: hidden;
        }

        .btn-g0ld {
            background: var(--pr !m@ry-gr@dient);
            color: var(--bl@ck);
            transition: background 0.3s, color 0.3s;
        }

        .btn-g0ld:hover {
            background: var(--g0ld-d@rk);
            color: var(--bl@ck);
        }

        /* ██████ C@RDS Y S3CCIONES ██████ */
        .c@rd {
            border: none;
            background-color: var(--gr@y-800);
            transition: transform 0.3s, background-color 0.3s;
        }

        .c@rd: hover {
            transform: translateY(-10px);
            background-color: var(--gr@y-700);
        }

        .f0rm-c0ntrol {
            background-color: var(--gr@y-700);
            border-color: var(--g0ld);
            color: var(--wh !te);
            transition: box-shadow 0.3s;
        }

        .f0rm-c0ntrol::placeholder {
            color: var(--gr@y-400);
        }

        .f0rm-c0ntrol:focus {
            border-color: var(--g0ld);
            box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
        }

        footer a:hover {
            color: var(--g0ld);
        }

        .text-g0ld {
            color: var(--g0ld) !important;
        }

        .r0und3d-p !ll {
            border-radius: 50rem !important;
        }

        .swiper-p@gination-bullet {
            background: var(--g0ld);
        }

        .swiper-p@gination-bullet-active {
            background: var(--g0ld-d@rk);
        }

        /* ██████ GR@DIENT S3CCIONS ██████ */
        #f3@tures,
        #t3stimonials,
        #t3@m,
        #faq,
        #blog,
        #pr3c !0s,
        #c0nt@cto,
        #n3wsletter,
        #d0cument@t !0n,
        #d@shb0ard,
        #priv@cy,
        #t3rms,
        #c@r3ers {
            background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(44, 44, 44, 1) 100%);
            padding: 60px 0;
        }

        /* ██████ FAQ ACCORDION ██████ */
        .accordion-button {
            background-color: var(--gr@y-800) !important;
            color: var(--g0ld) !important;
            border: none;
            transition: background-color 0.3s, color 0.3s;
        }

        .accordion-button:not(.collapsed) {
            background-color: var(--g0ld) !important;
            color: var(--bl@ck) !important;
        }

        .accordion-body {
            background-color: var(--gr@y-700);
            color: var(--wh !te);
        }

        /* ██████ FOOTER ██████ */
        footer {
            background: linear-gradient(135deg, #000000 0%, #2c2c2c 100%);
        }

        footer .s0cial-icons a {
            transition: color 0.3s;
        }

        footer .s0cial-icons a:hover {
            color: var(--g0ld);
        }

        /* ██████ H0V3RS y TR@NSICIONES ██████ */
        a.text-g0ld:hover {
            color: var(--g0ld-d@rk) !important;
        }

        /* ██████ RESPONS!VE IMAGES ██████ */
        img.responsive-img {
            max-width: 100%;
            height: auto;
        }

        /* ██████ RESPONS!VE DESIGN ██████ */
        @media (max-width: 768px) {
            .h3r0-s3ction {
                padding: 60px 20px;
            }

            .btn-g0ld {
                width: 100%;
                text-align: center;
            }

            .s0cial-icons a {
                margin-right: 10px;
            }

            /* Ajuste de botones en el navbar para móviles */
            .navbar-nav {
                flex-direction: column;
                align-items: flex-start;
            }

            .navbar-nav .nav-item {
                width: 100%;
            }

            .navbar-nav .nav-link,
            .navbar-nav .btn {
                width: 100%;
                text-align: left;
                padding-left: 0;
            }
        }
    </style>
</head>

<body class="bg-black text-white font-lato">

    <div id="particles-js"></div>

    <!-- HEADER DESKTOP -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-black fixed-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <img src="/images/an_logo.png" alt="Auron Logo" width="50" height="50"
                    class="d-inline-block align-text-top me-2">
                <span class="text-white fs-4 fw-bold" data-lang-es="Auron" data-lang-en="Auron">Auron</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a href="#f3@tures" class="nav-link text-white h0v3r-g0ld" data-lang-es="Características"
                            data-lang-en="Features">Características</a>
                    </li>
                    <li class="nav-item">
                        <a href="#t3stimonials" class="nav-link text-white h0v3r-g0ld" data-lang-es="Testimonios"
                            data-lang-en="Testimonials">Testimonios</a>
                    </li>
                    <li class="nav-item">
                        <a href="#t3@m" class="nav-link text-white h0v3r-g0ld" data-lang-es="Equipo"
                            data-lang-en="Team">Equipo</a>
                    </li>
                    <li class="nav-item">
                        <a href="#faq" class="nav-link text-white h0v3r-g0ld" data-lang-es="FAQ"
                            data-lang-en="FAQ">FAQ</a>
                    </li>
                    <li class="nav-item">
                        <a href="#blog" class="nav-link text-white h0v3r-g0ld" data-lang-es="Blog"
                            data-lang-en="Blog">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a href="#pr3c!0s" class="btn btn-g0ld text-black rounded-pill px-4 py-2 ms-2"
                            data-lang-es="Precios" data-lang-en="Pricing">Precios</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-g0ld text-black rounded-pill px-4 py-2 ms-2"
                            data-lang-es="Unir al APP gratis" data-lang-en="Join the APP for Free">Unir al APP
                            gratis</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-g0ld text-black rounded-pill px-4 py-2 ms-2" data-lang-es="Login"
                            data-lang-en="Login">Login</a>
                    </li>
                    <!-- Se reemplaza el id por class "lang-toggle" para evitar problemas en responsive -->
                    <li class="nav-item">
                        <button class="lang-toggle btn btn-g0ld text-black rounded-pill px-3 py-1 ms-2">
                            <span data-lang="es">ES</span>
                            <span data-lang="en" class="d-none">EN</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div id="particles-js"></div>

    <!-- HEADER MÓVIL -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-black fixed-top d-lg-none">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <img src="/images/an_logo.png" alt="Auron Logo" width="50" height="50"
                    class="d-inline-block align-text-top me-2">
                <span class="text-white fs-4 fw-bold" data-lang-es="Auron" data-lang-en="Auron">Auron</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto w-100 d-flex flex-column text-center">
                    <li class="nav-item w-100">
                        <a href="#f3@tures" class="nav-link text-white h0v3r-g0ld w-100 d-block"
                            data-lang-es="Características" data-lang-en="Features">Características</a>
                    </li>
                    <li class="nav-item w-100">
                        <a href="#t3stimonials" class="nav-link text-white h0v3r-g0ld w-100 d-block"
                            data-lang-es="Testimonios" data-lang-en="Testimonials">Testimonios</a>
                    </li>
                    <li class="nav-item w-100">
                        <a href="#t3@m" class="nav-link text-white h0v3r-g0ld w-100 d-block" data-lang-es="Equipo"
                            data-lang-en="Team">Equipo</a>
                    </li>
                    <li class="nav-item w-100">
                        <a href="#faq" class="nav-link text-white h0v3r-g0ld w-100 d-block" data-lang-es="FAQ"
                            data-lang-en="FAQ">FAQ</a>
                    </li>
                    <li class="nav-item w-100">
                        <a href="#blog" class="nav-link text-white h0v3r-g0ld w-100 d-block" data-lang-es="Blog"
                            data-lang-en="Blog">Blog</a>
                    </li>
                    <li class="nav-item w-100 my-2">
                        <a href="#pr3c!0s" class="btn btn-g0ld text-black rounded-pill w-100 px-4 py-2"
                            data-lang-es="Precios" data-lang-en="Pricing">Precios</a>
                    </li>
                    <li class="nav-item w-100 my-2">
                        <a href="#" class="btn btn-g0ld text-black rounded-pill w-100 px-4 py-2"
                            data-lang-es="Unir al APP gratis" data-lang-en="Join the APP for Free">Unir al APP
                            gratis</a>
                    </li>
                    <li class="nav-item w-100 my-2">
                        <a href="#" class="btn btn-g0ld text-black rounded-pill w-100 px-4 py-2" data-lang-es="Login"
                            data-lang-en="Login">Login</a>
                    </li>
                    <!-- Se reemplaza el id por class "lang-toggle" para el cambio de idioma en móvil -->
                    <li class="nav-item w-100 my-2">
                        <button class="lang-toggle btn btn-g0ld text-black rounded-pill w-100 px-3 py-1">
                            <span data-lang="es">ES</span>
                            <span data-lang="en" class="d-none">EN</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- H3RO S3CTION -->
    <section id="h3ro" class="h3r0-s3ction d-flex align-items-center justify-content-center position-relative">
        <div class="container text-center position-relative" data-aos="fade-up" style="z-index:1;">
            <img src="/images/logo.png" alt="Auron Logo Hero" class="mb-4 responsive-img"
                style="width:150px; height:150px; object-fit:cover;">
            <h1 class="text-white display-4 fw-bold"><span id="t!p3d-t3xt" class="text-g0ld"></span></h1>
            <p class="text-g0ld fs-5 mb-5"
                data-lang-es="El bot de predicción avanzado para Discord que potencia tu servidor con IA y automatización."
                data-lang-en="The advanced prediction bot for Discord that powers your server with AI and automation.">
                El bot de predicción avanzado para Discord que potencia tu servidor con IA y automatización.
            </p>
            <a href="#pr3c!0s" class="btn-g0ld px-6 py-3 r0und3d-p!ll font-semibold" data-lang-es="Comienza Ahora"
                data-lang-en="Get Started Now">Comienza Ahora</a>
        </div>
    </section>

    <!-- F3@TURES -->
    <section id="f3@tures" class="py-20">
        <div class="container px-6 text-center">
            <div class="mb-12" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-g0ld" data-lang-es="Características Principales"
                    data-lang-en="Main Features">Características Principales</h2>
                <p class="mt-4 text-white" data-lang-es="Descubre lo que Auron puede hacer por tu servidor de Discord."
                    data-lang-en="Discover what Auron can do for your Discord server.">
                    Descubre lo que Auron puede hacer por tu servidor de Discord.
                </p>
            </div>
            <div class="row g-4">
                <!-- F3@ture 1 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="c@rd bg-gr@y-800 h-100 p-4 text-center">
                        <i class="fas fa-chart-line text-g0ld fa-3x mb-3"></i>
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Predicciones Avanzadas"
                            data-lang-en="Advanced Predictions">Predicciones Avanzadas</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Utiliza algoritmos de IA para anticipar tendencias, eventos futuros y comportamientos de usuarios en tu servidor, optimizando la toma de decisiones."
                            data-lang-en="Use AI algorithms to anticipate trends, future events, and user behaviors on your server, optimizing decision-making.">
                            Utiliza algoritmos de IA para anticipar tendencias, eventos futuros y comportamientos de
                            usuarios en tu servidor, optimizando la toma de decisiones.
                        </p>
                    </div>
                </div>
                <!-- F3@ture 2 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="c@rd bg-gr@y-800 h-100 p-4 text-center">
                        <i class="fas fa-database text-g0ld fa-3x mb-3"></i>
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Análisis de Datos"
                            data-lang-en="Data Analysis">Análisis de Datos</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Recopila, visualiza y comprende datos de la actividad de tu servidor, obtén insights accionables y mejora la experiencia de tu comunidad."
                            data-lang-en="Collect, visualize, and understand data from your server's activity, gain actionable insights, and enhance your community's experience.">
                            Recopila, visualiza y comprende datos de la actividad de tu servidor, obtén insights
                            accionables y mejora la experiencia de tu comunidad.
                        </p>
                    </div>
                </div>
                <!-- F3@ture 3 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="c@rd bg-gr@y-800 h-100 p-4 text-center">
                        <i class="fas fa-robot text-g0ld fa-3x mb-3"></i>
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Automatización Avanzada"
                            data-lang-en="Advanced Automation">Automatización Avanzada</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Automatiza tareas repetitivas, modera el contenido, administra roles y canales, y libera tiempo para enfocarte en lo que realmente importa."
                            data-lang-en="Automate repetitive tasks, moderate content, manage roles and channels, and free up time to focus on what truly matters.">
                            Automatiza tareas repetitivas, modera el contenido, administra roles y canales, y libera
                            tiempo para enfocarte en lo que realmente importa.
                        </p>
                    </div>
                </div>
                <!-- F3@ture 4 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                    <div class="c@rd bg-gr@y-800 h-100 p-4 text-center">
                        <i class="fas fa-shield-alt text-g0ld fa-3x mb-3"></i>
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Seguridad Avanzada"
                            data-lang-en="Advanced Security">Seguridad Avanzada</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Protege tu servidor con filtros anti-spam, anti-raid y medidas de seguridad avanzadas para mantener un ambiente sano y confiable."
                            data-lang-en="Protect your server with anti-spam, anti-raid filters, and advanced security measures to maintain a healthy and reliable environment.">
                            Protege tu servidor con filtros anti-spam, anti-raid y medidas de seguridad avanzadas para
                            mantener un ambiente sano y confiable.
                        </p>
                    </div>
                </div>
                <!-- F3@ture 5 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                    <div class="c@rd bg-gr@y-800 h-100 p-4 text-center">
                        <i class="fas fa-mobile-alt text-g0ld fa-3x mb-3"></i>
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Compatibilidad Móvil"
                            data-lang-en="Mobile Compatibility">Compatibilidad Móvil</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Gestiona tu servidor desde cualquier dispositivo móvil sin complicaciones, manteniéndote conectado en todo momento."
                            data-lang-en="Manage your server from any mobile device effortlessly, keeping you connected at all times.">
                            Gestiona tu servidor desde cualquier dispositivo móvil sin complicaciones, manteniéndote
                            conectado en todo momento.
                        </p>
                    </div>
                </div>
                <!-- F3@ture 6 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="600">
                    <div class="c@rd bg-gr@y-800 h-100 p-4 text-center">
                        <i class="fas fa-plug text-g0ld fa-3x mb-3"></i>
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Integraciones Flexibles"
                            data-lang-en="Flexible Integrations">Integraciones Flexibles</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Conecta Auron con otras herramientas, APIs y servicios para personalizar la experiencia y adaptarla a tus necesidades específicas."
                            data-lang-en="Connect Auron with other tools, APIs, and services to customize the experience and tailor it to your specific needs.">
                            Conecta Auron con otras herramientas, APIs y servicios para personalizar la experiencia y
                            adaptarla a tus necesidades específicas.
                        </p>
                    </div>
                </div>
                <!-- F3@ture 7 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="700">
                    <div class="c@rd bg-gr@y-800 h-100 p-4 text-center">
                        <i class="fas fa-user-shield text-g0ld fa-3x mb-3"></i>
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Privacidad de Datos"
                            data-lang-en="Data Privacy">Privacidad de Datos</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Tu información y la de tu comunidad están seguras. Cumplimos con altos estándares de privacidad y protocolos encriptados."
                            data-lang-en="Your information and that of your community are secure. We comply with high privacy standards and encrypted protocols.">
                            Tu información y la de tu comunidad están seguras. Cumplimos con altos estándares de
                            privacidad y protocolos encriptados.
                        </p>
                    </div>
                </div>
                <!-- F3@ture 8 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="800">
                    <div class="c@rd bg-gr@y-800 h-100 p-4 text-center">
                        <i class="fas fa-sync-alt text-g0ld fa-3x mb-3"></i>
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Actualizaciones Continuas"
                            data-lang-en="Continuous Updates">Actualizaciones Continuas</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Recibe mejoras periódicas, nuevas funciones y actualizaciones de seguridad para mantener tu servidor siempre al día."
                            data-lang-en="Receive periodic improvements, new features, and security updates to keep your server always up-to-date.">
                            Recibe mejoras periódicas, nuevas funciones y actualizaciones de seguridad para mantener tu
                            servidor siempre al día.
                        </p>
                    </div>
                </div>
                <!-- F3@ture 9 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="900">
                    <div class="c@rd bg-gr@y-800 h-100 p-4 text-center">
                        <i class="fas fa-users text-g0ld fa-3x mb-3"></i>
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Gestión de Comunidad"
                            data-lang-en="Community Management">Gestión de Comunidad</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Fomenta la participación, administra roles, canales y eventos. Crea una comunidad activa y comprometida."
                            data-lang-en="Foster participation, manage roles, channels, and events. Create an active and engaged community.">
                            Fomenta la participación, administra roles, canales y eventos. Crea una comunidad activa y
                            comprometida.
                        </p>
                    </div>
                </div>
                <!-- F3@ture 10 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="1000">
                    <div class="c@rd bg-gr@y-800 h-100 p-4 text-center">
                        <i class="fas fa-lock text-g0ld fa-3x mb-3"></i>
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Control de Acceso"
                            data-lang-en="Access Control">Control de Acceso</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Define permisos, roles y jerarquías para mantener el orden, la seguridad y la estructura en tu servidor."
                            data-lang-en="Define permissions, roles, and hierarchies to maintain order, security, and structure in your server.">
                            Define permisos, roles y jerarquías para mantener el orden, la seguridad y la estructura en
                            tu servidor.
                        </p>
                    </div>
                </div>
                <!-- F3@ture 11 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="1100">
                    <div class="c@rd bg-gr@y-800 h-100 p-4 text-center">
                        <i class="fas fa-comments text-g0ld fa-3x mb-3"></i>
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Respuestas Rápidas"
                            data-lang-en="Quick Responses">Respuestas Rápidas</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Configura comandos personalizados y respuestas automáticas para preguntas frecuentes, agilizando la comunicación."
                            data-lang-en="Set up custom commands and automatic responses for frequently asked questions, streamlining communication.">
                            Configura comandos personalizados y respuestas automáticas para preguntas frecuentes,
                            agilizando la comunicación.
                        </p>
                    </div>
                </div>
                <!-- F3@ture 12 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="1200">
                    <div class="c@rd bg-gr@y-800 h-100 p-4 text-center">
                        <i class="fas fa-lightbulb text-g0ld fa-3x mb-3"></i>
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Ideas Innovadoras"
                            data-lang-en="Innovative Ideas">Ideas Innovadoras</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Incorpora continuamente nuevas funcionalidades sugeridas por la comunidad, manteniendo tu servidor siempre a la vanguardia."
                            data-lang-en="Continuously incorporate new features suggested by the community, keeping your server always at the forefront.">
                            Incorpora continuamente nuevas funcionalidades sugeridas por la comunidad, manteniendo tu
                            servidor siempre a la vanguardia.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- T3stimonials -->
    <section id="t3stimonials" class="py-20">
        <div class="container px-6">
            <div class="text-center mb-12" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-g0ld" data-lang-es="Lo que dicen nuestros usuarios"
                    data-lang-en="What Our Users Say">Lo que dicen nuestros usuarios</h2>
                <p class="mt-4 text-white" data-lang-es="Historias de éxito y experiencias de la comunidad de Auron."
                    data-lang-en="Success stories and experiences from the Auron community.">
                    Historias de éxito y experiencias de la comunidad de Auron.
                </p>
            </div>
            <div class="swiper-container" data-aos="fade-up" data-aos-delay="100">
                <div class="swiper-wrapper">
                    <!-- T3stimonial 1 -->
                    <div class="swiper-slide">
                        <div class="c@rd bg-gr@y-800 rounded-lg shadow-lg p-6 text-center">
                            <img src="/images/user1.png" alt="Usuario 1"
                                class="responsive-img rounded-circle mx-auto mb-4"
                                style="width:100px; height:100px; object-fit:cover;">
                            <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="María López"
                                data-lang-en="Maria Lopez">María López</h3>
                            <p class="text-gr@y-400 mt-2"
                                data-lang-es='"Auron ha transformado mi servidor de Discord. Las predicciones de IA nos permiten anticipar tendencias y mantener a la comunidad siempre activa."'
                                data-lang-en='"Auron has transformed my Discord server. The AI predictions allow us to anticipate trends and keep the community always active."'>
                                "Auron ha transformado mi servidor de Discord. Las predicciones de IA nos permiten
                                anticipar tendencias y mantener a la comunidad siempre activa."</p>
                        </div>
                    </div>
                    <!-- T3stimonial 2 -->
                    <div class="swiper-slide">
                        <div class="c@rd bg-gr@y-800 rounded-lg shadow-lg p-6 text-center">
                            <img src="/images/user2.png" alt="Usuario 2"
                                class="responsive-img rounded-circle mx-auto mb-4"
                                style="width:100px; height:100px; object-fit:cover;">
                            <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Carlos Méndez"
                                data-lang-en="Carlos Mendez">Carlos Méndez</h3>
                            <p class="text-gr@y-400 mt-2"
                                data-lang-es='"La automatización avanzada de Auron nos ahorra tiempo y recursos. Ahora podemos enfocarnos en crear contenido de calidad."'
                                data-lang-en='"Auron\' s advanced automation saves us time and resources. Now we can
                                focus on creating quality content."'>"La automatización avanzada de Auron nos ahorra
                                tiempo y recursos. Ahora podemos enfocarnos en crear contenido de calidad."</p>
                        </div>
                    </div>
                    <!-- T3stimonial 3 -->
                    <div class="swiper-slide">
                        <div class="c@rd bg-gr@y-800 rounded-lg shadow-lg p-6 text-center">
                            <img src="/images/user3.png" alt="Usuario 3"
                                class="responsive-img rounded-circle mx-auto mb-4"
                                style="width:100px; height:100px; object-fit:cover;">
                            <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Lucía Fernández"
                                data-lang-en="Lucia Fernandez">Lucía Fernández</h3>
                            <p class="text-gr@y-400 mt-2"
                                data-lang-es='"La integración con otras herramientas ha sido clave. Auron se adapta a nuestras necesidades y mejora constantemente."'
                                data-lang-en='"Integration with other tools has been key. Auron adapts to our needs and constantly improves."'>
                                "La integración con otras herramientas ha sido clave. Auron se adapta a nuestras
                                necesidades y mejora constantemente."</p>
                        </div>
                    </div>
                    <!-- T3stimonial 4 -->
                    <div class="swiper-slide">
                        <div class="c@rd bg-gr@y-800 rounded-lg shadow-lg p-6 text-center">
                            <img src="/images/user4.png" alt="Usuario 4"
                                class="responsive-img rounded-circle mx-auto mb-4"
                                style="width:100px; height:100px; object-fit:cover;">
                            <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Diego Torres"
                                data-lang-en="Diego Torres">Diego Torres</h3>
                            <p class="text-gr@y-400 mt-2"
                                data-lang-es='"Con Auron, gestionar nuestras comunidades es más sencillo. Ofrecemos experiencias más enriquecedoras a nuestros miembros."'
                                data-lang-en='"With Auron, managing our communities is easier. We offer more enriching experiences to our members."'>
                                "Con Auron, gestionar nuestras comunidades es más sencillo. Ofrecemos experiencias más
                                enriquecedoras a nuestros miembros."</p>
                        </div>
                    </div>
                    <!-- T3stimonial 5 -->
                    <div class="swiper-slide">
                        <div class="c@rd bg-gr@y-800 rounded-lg shadow-lg p-6 text-center">
                            <img src="/images/user5.png" alt="Usuario 5"
                                class="responsive-img rounded-circle mx-auto mb-4"
                                style="width:100px; height:100px; object-fit:cover;">
                            <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Sofía Ramírez"
                                data-lang-en="Sofia Ramirez">Sofía Ramírez</h3>
                            <p class="text-gr@y-400 mt-2"
                                data-lang-es='"El soporte de Auron es excepcional. Siempre disponibles para ayudarnos y resolver cualquier problema."'
                                data-lang-en='"Auron\' s support is exceptional. Always available to help us and resolve
                                any issues."'>"El soporte de Auron es excepcional. Siempre disponibles para ayudarnos y
                                resolver cualquier problema."</p>
                        </div>
                    </div>
                    <!-- T3stimonial 6 -->
                    <div class="swiper-slide">
                        <div class="c@rd bg-gr@y-800 rounded-lg shadow-lg p-6 text-center">
                            <img src="/images/user6.png" alt="Usuario 6"
                                class="responsive-img rounded-circle mx-auto mb-4"
                                style="width:100px; height:100px; object-fit:cover;">
                            <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Pedro Sánchez"
                                data-lang-en="Pedro Sanchez">Pedro Sánchez</h3>
                            <p class="text-gr@y-400 mt-2"
                                data-lang-es='"Auron es indispensable para el crecimiento eficiente de nuestro servidor. Una herramienta insustituible."'
                                data-lang-en='"Auron is indispensable for the efficient growth of our server. An irreplaceable tool."'>
                                "Auron es indispensable para el crecimiento eficiente de nuestro servidor. Una
                                herramienta insustituible."</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-p@gination mt-6"></div>
            </div>
        </div>
    </section>

    <!-- T3@M -->
    <section id="t3@m" class="py-20">
        <div class="container px-6">
            <div class="text-center mb-12" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-g0ld" data-lang-es="Nuestro Equipo" data-lang-en="Our Team">Nuestro
                    Equipo</h2>
                <p class="mt-4 text-white" data-lang-es="Conoce a las mentes brillantes detrás de Auron."
                    data-lang-en="Meet the brilliant minds behind Auron.">
                    Conoce a las mentes brillantes detrás de Auron.
                </p>
            </div>
            <div class="row g-4">
                <!-- Team Member 1 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="c@rd bg-gr@y-800 rounded-lg shadow-lg p-6 text-center">
                        <img src="/images/team1.png" alt="Miembro 1" class="responsive-img rounded-circle mx-auto mb-4"
                            style="width:150px; height:150px; object-fit:cover;">
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Juan Pérez"
                            data-lang-en="Juan Perez">Juan Pérez</h3>
                        <p class="text-gr@y-400" data-lang-es="CEO & Fundador" data-lang-en="CEO & Founder">CEO &
                            Fundador</p>
                        <div class="mt-4">
                            <a href="#" class="text-g0ld hover:text-white me-2"><i
                                    class="fab fa-linkedin fa-lg"></i></a>
                            <a href="#" class="text-g0ld hover:text-white"><i class="fab fa-twitter fa-lg"></i></a>
                        </div>
                    </div>
                </div>
                <!-- Team Member 2 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="c@rd bg-gr@y-800 rounded-lg shadow-lg p-6 text-center">
                        <img src="/images/team2.png" alt="Miembro 2" class="responsive-img rounded-circle mx-auto mb-4"
                            style="width:150px; height:150px; object-fit:cover;">
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Ana García"
                            data-lang-en="Ana Garcia">Ana García</h3>
                        <p class="text-gr@y-400" data-lang-es="CTO & Desarrolladora Principal"
                            data-lang-en="CTO & Lead Developer">CTO & Desarrolladora Principal</p>
                        <div class="mt-4">
                            <a href="#" class="text-g0ld hover:text-white me-2"><i
                                    class="fab fa-linkedin fa-lg"></i></a>
                            <a href="#" class="text-g0ld hover:text-white"><i class="fab fa-twitter fa-lg"></i></a>
                        </div>
                    </div>
                </div>
                <!-- Team Member 3 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="c@rd bg-gr@y-800 rounded-lg shadow-lg p-6 text-center">
                        <img src="/images/team3.png" alt="Miembro 3" class="responsive-img rounded-circle mx-auto mb-4"
                            style="width:150px; height:150px; object-fit:cover;">
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Luis Rodríguez"
                            data-lang-en="Luis Rodriguez">Luis Rodríguez</h3>
                        <p class="text-gr@y-400" data-lang-es="Especialista en IA" data-lang-en="AI Specialist">
                            Especialista en IA</p>
                        <div class="mt-4">
                            <a href="#" class="text-g0ld hover:text-white me-2"><i
                                    class="fab fa-linkedin fa-lg"></i></a>
                            <a href="#" class="text-g0ld hover:text-white"><i class="fab fa-twitter fa-lg"></i></a>
                        </div>
                    </div>
                </div>
                <!-- Team Member 4 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="400">
                    <div class="c@rd bg-gr@y-800 rounded-lg shadow-lg p-6 text-center">
                        <img src="/images/team4.png" alt="Miembro 4" class="responsive-img rounded-circle mx-auto mb-4"
                            style="width:150px; height:150px; object-fit:cover;">
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Elena Martínez"
                            data-lang-en="Elena Martinez">Elena Martínez</h3>
                        <p class="text-gr@y-400" data-lang-es="Directora de Marketing"
                            data-lang-en="Marketing Director">Directora de Marketing</p>
                        <div class="mt-4">
                            <a href="#" class="text-g0ld hover:text-white me-2"><i
                                    class="fab fa-linkedin fa-lg"></i></a>
                            <a href="#" class="text-g0ld hover:text-white"><i class="fab fa-twitter fa-lg"></i></a>
                        </div>
                    </div>
                </div>
                <!-- Team Member 5 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="500">
                    <div class="c@rd bg-gr@y-800 rounded-lg shadow-lg p-6 text-center">
                        <img src="/images/team5.png" alt="Miembro 5" class="responsive-img rounded-circle mx-auto mb-4"
                            style="width:150px; height:150px; object-fit:cover;">
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Miguel Ángel"
                            data-lang-en="Miguel Angel">Miguel Ángel</h3>
                        <p class="text-gr@y-400" data-lang-es="Ingeniero de Software" data-lang-en="Software Engineer">
                            Ingeniero de Software</p>
                        <div class="mt-4">
                            <a href="#" class="text-g0ld hover:text-white me-2"><i
                                    class="fab fa-linkedin fa-lg"></i></a>
                            <a href="#" class="text-g0ld hover:text-white"><i class="fab fa-twitter fa-lg"></i></a>
                        </div>
                    </div>
                </div>
                <!-- Team Member 6 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="600">
                    <div class="c@rd bg-gr@y-800 rounded-lg shadow-lg p-6 text-center">
                        <img src="/images/team6.png" alt="Miembro 6" class="responsive-img rounded-circle mx-auto mb-4"
                            style="width:150px; height:150px; object-fit:cover;">
                        <h3 class="text-xl font-semibold text-white mb-2" data-lang-es="Carla Gómez"
                            data-lang-en="Carla Gomez">Carla Gómez</h3>
                        <p class="text-gr@y-400" data-lang-es="Diseñadora UX/UI" data-lang-en="UX/UI Designer">
                            Diseñadora UX/UI</p>
                        <div class="mt-4">
                            <a href="#" class="text-g0ld hover:text-white me-2"><i
                                    class="fab fa-linkedin fa-lg"></i></a>
                            <a href="#" class="text-g0ld hover:text-white"><i class="fab fa-twitter fa-lg"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <section id="faq" class="py-20">
        <div class="container px-6">
            <div class="text-center mb-12" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-g0ld" data-lang-es="FAQ" data-lang-en="FAQ">FAQ</h2>
                <p class="mt-4 text-white" data-lang-es="Resuelve tus dudas sobre Auron y sus funcionalidades."
                    data-lang-en="Resolve your doubts about Auron and its functionalities.">
                    Resuelve tus dudas sobre Auron y sus funcionalidades.
                </p>
            </div>
            <div class="max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
                <div class="accordion" id="faqAccordion">
                    <!-- FAQ 1 -->
                    <div class="accordion-item bg-gr@y-800 rounded mb-4">
                        <h2 class="accordion-header" id="headingOne">
                            <button
                                class="accordion-button collapsed flex items-center w-full py-4 px-5 text-base text-left text-g0ld bg-gr@y-800 border-0"
                                type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                aria-expanded="false" aria-controls="collapseOne"
                                data-lang-es="¿Cómo puedo agregar Auron a mi servidor de Discord?"
                                data-lang-en="How can I add Auron to my Discord server?">
                                ¿Cómo puedo agregar Auron a mi servidor de Discord?
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                            data-bs-parent="#faqAccordion">
                            <div class="accordion-body py-4 px-5 bg-gr@y-700 text-white"
                                data-lang-es="Puedes agregar Auron haciendo clic en 'Agregar a Discord' en nuestro sitio web y siguiendo las instrucciones."
                                data-lang-en="You can add Auron by clicking on 'Add to Discord' on our website and following the instructions.">
                                Puedes agregar Auron haciendo clic en 'Agregar a Discord' en nuestro sitio web y
                                siguiendo las instrucciones.
                            </div>
                        </div>
                    </div>
                    <!-- FAQ 2 -->
                    <div class="accordion-item bg-gr@y-800 rounded mb-4">
                        <h2 class="accordion-header" id="headingTwo">
                            <button
                                class="accordion-button collapsed flex items-center w-full py-4 px-5 text-base text-left text-g0ld bg-gr@y-800 border-0"
                                type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
                                aria-expanded="false" aria-controls="collapseTwo" data-lang-es="¿Es Auron gratuito?"
                                data-lang-en="Is Auron free?">
                                ¿Es Auron gratuito?
                            </button>
                        </h2>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                            data-bs-parent="#faqAccordion">
                            <div class="accordion-body py-4 px-5 bg-gr@y-700 text-white"
                                data-lang-es="Auron ofrece una versión básica gratuita con funcionalidades esenciales. También contamos con planes premium con características avanzadas."
                                data-lang-en="Auron offers a basic free version with essential features. We also have premium plans with advanced features.">
                                Auron ofrece una versión básica gratuita con funcionalidades esenciales. También
                                contamos con planes premium con características avanzadas.
                            </div>
                        </div>
                    </div>
                    <!-- FAQ 3 -->
                    <div class="accordion-item bg-gr@y-800 rounded mb-4">
                        <h2 class="accordion-header" id="headingThree">
                            <button
                                class="accordion-button collapsed flex items-center w-full py-4 px-5 text-base text-left text-g0ld bg-gr@y-800 border-0"
                                type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"
                                aria-expanded="false" aria-controls="collapseThree"
                                data-lang-es="¿Qué métodos de pago aceptan?"
                                data-lang-en="What payment methods do you accept?">
                                ¿Qué métodos de pago aceptan?
                            </button>
                        </h2>
                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                            data-bs-parent="#faqAccordion">
                            <div class="accordion-body py-4 px-5 bg-gr@y-700 text-white"
                                data-lang-es="Aceptamos Visa, Mastercard, Stripe y otros métodos de pago populares."
                                data-lang-en="We accept Visa, Mastercard, Stripe, and other popular payment methods.">
                                Aceptamos Visa, Mastercard, Stripe y otros métodos de pago populares.
                            </div>
                        </div>
                    </div>
                    <!-- FAQ 4 -->
                    <div class="accordion-item bg-gr@y-800 rounded mb-4">
                        <h2 class="accordion-header" id="headingFour">
                            <button
                                class="accordion-button collapsed flex items-center w-full py-4 px-5 text-base text-left text-g0ld bg-gr@y-800 border-0"
                                type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour"
                                aria-expanded="false" aria-controls="collapseFour"
                                data-lang-es="¿Cómo puedo contactar al soporte técnico?"
                                data-lang-en="How can I contact technical support?">
                                ¿Cómo puedo contactar al soporte técnico?
                            </button>
                        </h2>
                        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
                            data-bs-parent="#faqAccordion">
                            <div class="accordion-body py-4 px-5 bg-gr@y-700 text-white"
                                data-lang-es="Puedes contactar al soporte técnico a través del formulario de contacto en nuestra sección de 'Contacto' o enviando un correo a soporte@auron.com."
                                data-lang-en="You can contact technical support through the contact form in our 'Contact' section or by sending an email to soporte@auron.com.">
                                Puedes contactar al soporte técnico a través del formulario de contacto en nuestra
                                sección de 'Contacto' o enviando un correo a soporte@auron.com.
                            </div>
                        </div>
                    </div>
                    <!-- FAQ 5 -->
                    <div class="accordion-item bg-gr@y-800 rounded mb-4">
                        <h2 class="accordion-header" id="headingFive">
                            <button
                                class="accordion-button collapsed flex items-center w-full py-4 px-5 text-base text-left text-g0ld bg-gr@y-800 border-0"
                                type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive"
                                aria-expanded="false" aria-controls="collapseFive"
                                data-lang-es="¿Auron es compatible con otras plataformas además de Discord?"
                                data-lang-en="Is Auron compatible with other platforms besides Discord?">
                                ¿Auron es compatible con otras plataformas además de Discord?
                            </button>
                        </h2>
                        <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
                            data-bs-parent="#faqAccordion">
                            <div class="accordion-body py-4 px-5 bg-gr@y-700 text-white"
                                data-lang-es="Actualmente, Auron está diseñado específicamente para Discord, pero estamos trabajando en integraciones con otras plataformas en el futuro."
                                data-lang-en="Currently, Auron is specifically designed for Discord, but we are working on integrations with other platforms in the future.">
                                Actualmente, Auron está diseñado específicamente para Discord, pero estamos trabajando
                                en integraciones con otras plataformas en el futuro.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- BLOG -->
    <section id="blog" class="py-20">
        <div class="container px-6">
            <div class="text-center mb-12" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-g0ld" data-lang-es="Blog" data-lang-en="Blog">Blog</h2>
                <p class="mt-4 text-white"
                    data-lang-es="Mantente informado con las últimas noticias y actualizaciones de Auron."
                    data-lang-en="Stay informed with the latest news and updates from Auron.">
                    Mantente informado con las últimas noticias y actualizaciones de Auron.
                </p>
            </div>
            <div class="row g-4">
                <!-- Blog Post 1 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="c@rd bg-gr@y-800 rounded-lg p-6 text-center hover:bg-gr@y-700 transition">
                        <h5 class="text-g0ld fw-bold mb-3" data-lang-es="Introducción a las Predicciones con IA"
                            data-lang-en="Introduction to AI Predictions">Introducción a las Predicciones con IA</h5>
                        <p class="text-gr@y-400 mb-4"
                            data-lang-es="Descubre cómo la IA está revolucionando las predicciones en Discord."
                            data-lang-en="Discover how AI is revolutionizing predictions on Discord.">
                            Descubre cómo la IA está revolucionando las predicciones en Discord.
                        </p>
                        <a href="#" class="text-g0ld hover:text-white" data-lang-es="Leer más"
                            data-lang-en="Read More">Leer más</a>
                    </div>
                </div>
                <!-- Blog Post 2 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="c@rd bg-gr@y-800 rounded-lg p-6 text-center hover:bg-gr@y-700 transition">
                        <h5 class="text-g0ld fw-bold mb-3" data-lang-es="Optimización de Servidores con Auron"
                            data-lang-en="Server Optimization with Auron">Optimización de Servidores con Auron</h5>
                        <p class="text-gr@y-400 mb-4"
                            data-lang-es="Aprende cómo Auron puede ayudarte a optimizar tu comunidad."
                            data-lang-en="Learn how Auron can help you optimize your community.">
                            Aprende cómo Auron puede ayudarte a optimizar tu comunidad.
                        </p>
                        <a href="#" class="text-g0ld hover:text-white" data-lang-es="Leer más"
                            data-lang-en="Read More">Leer más</a>
                    </div>
                </div>
                <!-- Blog Post 3 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="c@rd bg-gr@y-800 rounded-lg p-6 text-center hover:bg-gr@y-700 transition">
                        <h5 class="text-g0ld fw-bold mb-3" data-lang-es="Integraciones Destacadas de Auron"
                            data-lang-en="Highlighted Integrations of Auron">Integraciones Destacadas de Auron</h5>
                        <p class="text-gr@y-400 mb-4"
                            data-lang-es="Explora las integraciones más útiles que Auron ofrece."
                            data-lang-en="Explore the most useful integrations that Auron offers.">
                            Explora las integraciones más útiles que Auron ofrece.
                        </p>
                        <a href="#" class="text-g0ld hover:text-white" data-lang-es="Leer más"
                            data-lang-en="Read More">Leer más</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- PR3c!0s -->
    <section id="pr3c!0s" class="py-20 bg-light text-dark">
        <div class="container px-6">
            <div class="text-center mb-12" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-dark" data-lang-es="Conoce Nuestros Planes"
                    data-lang-en="Discover Our Plans">Conoce Nuestros Planes</h2>
                <p class="mt-4 text-muted" data-lang-es="Encuentra el plan perfecto para impulsar tu servidor."
                    data-lang-en="Find the perfect plan to boost your server.">
                    Encuentra el plan perfecto para impulsar tu servidor.
                </p>
            </div>
            <div class="row text-center">
                <!-- Basic Plan -->
                <div class="col-md-4 mb-5" data-aos="zoom-in" data-aos-delay="100">
                    <div class="c@rd p-5 bg-white rounded shadow-lg position-relative">
                        <h3 class="text-uppercase font-bold text-dark mb-3" data-lang-es="Básico" data-lang-en="Basic">
                            Básico</h3>
                        <p class="text-muted mb-4" data-lang-es="Funciones esenciales para empezar."
                            data-lang-en="Essential features to get started.">
                            Funciones esenciales para empezar.
                        </p>
                        <h2 class="text-g0ld text-3xl mb-3"
                            data-lang-es-html="$5<span class='text-muted text-base'>/mes</span>"
                            data-lang-en-html="$5<span class='text-muted text-base'>/month</span>">
                            $5<span class="text-muted text-base">/mes</span>
                        </h2>
                        <a href="#c0nt@cto" class="btn btn-warning btn-lg px-5 py-2 r0und3d-p!ll" data-lang-es="Elegir"
                            data-lang-en="Choose">Elegir</a>
                    </div>
                </div>
                <!-- Advanced Plan -->
                <div class="col-md-4 mb-5" data-aos="zoom-in" data-aos-delay="200">
                    <div class="c@rd p-5 bg-white rounded shadow-lg position-relative">
                        <span class="badge bg-g0ld text-black position-absolute top-0 end-0" data-lang-es="Popular"
                            data-lang-en="Popular">Popular</span>
                        <h3 class="text-uppercase font-bold text-dark mb-3" data-lang-es="Avanzado"
                            data-lang-en="Advanced">Avanzado</h3>
                        <p class="text-muted mb-4" data-lang-es="Funciones avanzadas y mayor personalización."
                            data-lang-en="Advanced features and more customization.">
                            Funciones avanzadas y mayor personalización.
                        </p>
                        <h2 class="text-g0ld text-3xl mb-3"
                            data-lang-es-html="$10<span class='text-muted text-base'>/mes</span>"
                            data-lang-en-html="$10<span class='text-muted text-base'>/month</span>">
                            $10<span class="text-muted text-base">/mes</span>
                        </h2>
                        <a href="#c0nt@cto" class="btn btn-warning btn-lg px-5 py-2 r0und3d-p!ll" data-lang-es="Elegir"
                            data-lang-en="Choose">Elegir</a>
                    </div>
                </div>
                <!-- Premium Plan -->
                <div class="col-md-4 mb-5" data-aos="zoom-in" data-aos-delay="300">
                    <div class="c@rd p-5 bg-white rounded shadow-lg position-relative">
                        <h3 class="text-uppercase font-bold text-dark mb-3" data-lang-es="Premium"
                            data-lang-en="Premium">Premium</h3>
                        <p class="text-muted mb-4" data-lang-es="Todas las funciones con soporte prioritario."
                            data-lang-en="All features with priority support.">
                            Todas las funciones con soporte prioritario.
                        </p>
                        <h2 class="text-g0ld text-3xl mb-3"
                            data-lang-es-html="$20<span class='text-muted text-base'>/mes</span>"
                            data-lang-en-html="$20<span class='text-muted text-base'>/month</span>">
                            $20<span class="text-muted text-base">/mes</span>
                        </h2>
                        <a href="#c0nt@cto" class="btn btn-warning btn-lg px-5 py-2 r0und3d-p!ll" data-lang-es="Elegir"
                            data-lang-en="Choose">Elegir</a>
                    </div>
                </div>
            </div>
            <div class="text-center mt-5">
                <p class="lead text-dark font-bold mb-3"
                    data-lang-es="Aceptamos los siguientes métodos de pago y muchos más..."
                    data-lang-en="We accept the following payment methods and many more...">
                    Aceptamos los siguientes métodos de pago y muchos más...
                </p>
                <div class="d-flex justify-content-center align-items-center mt-4 flex-wrap">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Visa_2021.svg/1920px-Visa_2021.svg.png"
                        alt="Visa" style="max-height:40px; margin-right:15px;">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Mastercard_2019_logo.svg"
                        alt="Mastercard" style="max-height:40px; margin-right:15px;">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Stripe_Logo%2C_revised_2016.svg/1920px-Stripe_Logo%2C_revised_2016.svg.png"
                        alt="Stripe" style="max-height:40px;">
                </div>
            </div>
        </div>
    </section>

    <!-- C0nt@cto -->
    <section id="c0nt@cto" class="py-20">
        <div class="container px-6">
            <div class="max-w-3xl mx-auto text-center mb-12" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-g0ld" data-lang-es="Contacto" data-lang-en="Contact">Contacto</h2>
                <p class="mt-4 text-white"
                    data-lang-es="¿Tienes alguna pregunta o necesitas ayuda? Estamos aquí para ayudarte."
                    data-lang-en="Do you have any questions or need help? We are here to assist you.">
                    ¿Tienes alguna pregunta o necesitas ayuda? Estamos aquí para ayudarte.
                </p>
            </div>
            <div class="max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
                <form id="c0nt@ctF0rm" class="bg-gr@y-800 rounded-lg shadow-lg p-8">
                    <div class="mb-4">
                        <label for="n@me" class="block text-g0ld" data-lang-es="Nombre"
                            data-lang-en="Name">Nombre</label>
                        <input type="text" id="n@me" name="name" class="f0rm-c0ntrol" placeholder=""
                            data-lang-es-placeholder="Tu nombre" data-lang-en-placeholder="Your name" required>
                    </div>
                    <div class="mb-4">
                        <label for="em@il" class="block text-g0ld" data-lang-es="Correo Electrónico"
                            data-lang-en="Email Address">Correo Electrónico</label>
                        <input type="email" id="em@il" name="email" class="f0rm-c0ntrol" placeholder=""
                            data-lang-es-placeholder="Tu correo electrónico"
                            data-lang-en-placeholder="Your email address" required>
                    </div>
                    <div class="mb-4">
                        <label for="m3ss@ge" class="block text-g0ld" data-lang-es="Mensaje"
                            data-lang-en="Message">Mensaje</label>
                        <textarea id="m3ss@ge" name="message" rows="5" class="f0rm-c0ntrol" placeholder=""
                            data-lang-es-placeholder="Tu mensaje" data-lang-en-placeholder="Your message"
                            required></textarea>
                    </div>
                    <button type="submit" class="btn-g0ld w-100 fw-semibold" data-lang-es="Enviar Mensaje"
                        data-lang-en="Send Message">Enviar Mensaje</button>
                </form>
            </div>
        </div>
    </section>

    <!-- N3wsletter -->
    <section id="n3wsletter" class="py-20">
        <div class="container px-6">
            <div class="max-w-3xl mx-auto text-center" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-g0ld mb-4" data-lang-es="Suscríbete a nuestro Newsletter"
                    data-lang-en="Subscribe to our Newsletter">Suscríbete a nuestro Newsletter</h2>
                <p class="text-gr@y-400 mb-6"
                    data-lang-es="Mantente al día con las últimas actualizaciones, noticias y ofertas exclusivas de Auron."
                    data-lang-en="Stay up-to-date with the latest updates, news, and exclusive offers from Auron.">
                    Mantente al día con las últimas actualizaciones, noticias y ofertas exclusivas de Auron.
                </p>
                <form id="n3wsletterF0rm"
                    class="d-flex flex-column flex-md-row justify-content-center align-items-center">
                    <input type="email" id="n3wsletterEmail" name="email" class="f0rm-c0ntrol me-md-2 mb-3 mb-md-0"
                        placeholder="" data-lang-es-placeholder="Tu correo electrónico"
                        data-lang-en-placeholder="Your email address" required>
                    <button type="submit" class="btn-g0ld r0und3d-p!ll px-4 py-2 fw-semibold" data-lang-es="Suscribirse"
                        data-lang-en="Subscribe">Suscribirse</button>
                </form>
            </div>
        </div>
    </section>

    <!-- D0cument@t!0n -->
    <section id="d0cument@t!0n" class="py-20">
        <div class="container px-6">
            <div class="text-center mb-12" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-g0ld" data-lang-es="Documentación" data-lang-en="Documentation">
                    Documentación</h2>
                <p class="mt-4 text-white"
                    data-lang-es="Aprende a sacar el máximo provecho de Auron con nuestras guías."
                    data-lang-en="Learn how to make the most out of Auron with our guides.">
                    Aprende a sacar el máximo provecho de Auron con nuestras guías.
                </p>
            </div>
            <div class="row g-4">
                <!-- D0cument@t!0n 1 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="c@rd bg-gr@y-800 p-6 text-center hover:bg-gr@y-700 transition">
                        <h3 class="text-xl font-semibold text-g0ld mb-2" data-lang-es="Guía de Inicio Rápido"
                            data-lang-en="Quick Start Guide">Guía de Inicio Rápido</h3>
                        <p class="text-gr@y-400 mb-4" data-lang-es="Configura Auron en tu servidor en pocos minutos."
                            data-lang-en="Set up Auron on your server in minutes.">
                            Configura Auron en tu servidor en pocos minutos.
                        </p>
                        <a href="#" class="text-g0ld hover:text-white" data-lang-es="Leer más"
                            data-lang-en="Read More">Leer más</a>
                    </div>
                </div>
                <!-- D0cument@t!0n 2 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="c@rd bg-gr@y-800 p-6 text-center hover:bg-gr@y-700 transition">
                        <h3 class="text-xl font-semibold text-g0ld mb-2" data-lang-es="Configuración de Predicciones"
                            data-lang-en="Prediction Configuration">Configuración de Predicciones</h3>
                        <p class="text-gr@y-400 mb-4"
                            data-lang-es="Aprende a configurar las predicciones avanzadas para maximizar el rendimiento de Auron."
                            data-lang-en="Learn how to configure advanced predictions to maximize Auron's performance.">
                            Aprende a configurar las predicciones avanzadas para maximizar el rendimiento de Auron.
                        </p>
                        <a href="#" class="text-g0ld hover:text-white" data-lang-es="Leer más"
                            data-lang-en="Read More">Leer más</a>
                    </div>
                </div>
                <!-- D0cument@t!0n 3 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="c@rd bg-gr@y-800 p-6 text-center hover:bg-gr@y-700 transition">
                        <h3 class="text-xl font-semibold text-g0ld mb-2" data-lang-es="Integraciones con APIs"
                            data-lang-en="API Integrations">Integraciones con APIs</h3>
                        <p class="text-gr@y-400 mb-4"
                            data-lang-es="Descubre cómo conectar Auron con otras APIs para extender sus funcionalidades."
                            data-lang-en="Discover how to connect Auron with other APIs to extend its functionalities.">
                            Descubre cómo conectar Auron con otras APIs para extender sus funcionalidades.
                        </p>
                        <a href="#" class="text-g0ld hover:text-white" data-lang-es="Leer más"
                            data-lang-en="Read More">Leer más</a>
                    </div>
                </div>
                <!-- D0cument@t!0n 4 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="400">
                    <div class="c@rd bg-gr@y-800 p-6 text-center hover:bg-gr@y-700 transition">
                        <h3 class="text-xl font-semibold text-g0ld mb-2" data-lang-es="Solución de Problemas"
                            data-lang-en="Troubleshooting">Solución de Problemas</h3>
                        <p class="text-gr@y-400 mb-4"
                            data-lang-es="Guía para resolver los problemas más comunes que podrías encontrar al usar Auron."
                            data-lang-en="Guide to solving the most common issues you might encounter while using Auron.">
                            Guía para resolver los problemas más comunes que podrías encontrar al usar Auron.
                        </p>
                        <a href="#" class="text-g0ld hover:text-white" data-lang-es="Leer más"
                            data-lang-en="Read More">Leer más</a>
                    </div>
                </div>
                <!-- D0cument@t!0n 5 -->
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="500">
                    <div class="c@rd bg-gr@y-800 p-6 text-center hover:bg-gr@y-700 transition">
                        <h3 class="text-xl font-semibold text-g0ld mb-2" data-lang-es="Personalización de Roles"
                            data-lang-en="Role Customization">Personalización de Roles</h3>
                        <p class="text-gr@y-400 mb-4"
                            data-lang-es="Aprende a personalizar y administrar los roles en tu servidor usando Auron."
                            data-lang-en="Learn how to customize and manage roles on your server using Auron.">
                            Aprende a personalizar y administrar los roles en tu servidor usando Auron.
                        </p>
                        <a href="#" class="text-g0ld hover:text-white" data-lang-es="Leer más"
                            data-lang-en="Read More">Leer más</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- D@shb0ard -->
    <section id="d@shb0ard" class="py-20">
        <div class="container px-6">
            <div class="text-center mb-12" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-g0ld" data-lang-es="Accede al Dashboard"
                    data-lang-en="Access the Dashboard">Accede al Dashboard</h2>
                <p class="mt-4 text-white"
                    data-lang-es="Gestiona y visualiza las estadísticas de tu servidor con nuestro intuitivo dashboard."
                    data-lang-en="Manage and view your server's statistics with our intuitive dashboard.">
                    Gestiona y visualiza las estadísticas de tu servidor con nuestro intuitivo dashboard.
                </p>
            </div>
            <div class="text-center" data-aos="fade-up" data-aos-delay="100">
                <img src="/images/dashboard-screenshot.png" alt="Dashboard de Auron"
                    class="img-fluid rounded-lg shadow-lg responsive-img">
            </div>
            <div class="text-center mt-4" data-aos="fade-up" data-aos-delay="200">
                <a href="https://www.xelviora.com/dashboard"
                    class="btn-g0ld px-6 py-3 r0und3d-full font-semibold hover:bg-yellow-500 transition duration-300"
                    data-lang-es="Acceder al Dashboard" data-lang-en="Access Dashboard">Acceder al Dashboard</a>
            </div>
        </div>
    </section>

    <!-- Pr!v@cy -->
    <section id="pr!v@cy" class="py-20">
        <div class="container px-6">
            <div class="text-center mb-12" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-g0ld" data-lang-es="Política de Privacidad"
                    data-lang-en="Privacy Policy">Política de Privacidad</h2>
                <p class="mt-4 text-white"
                    data-lang-es="Tu privacidad es importante para nosotros. Lee nuestra política de privacidad para entender cómo manejamos tus datos."
                    data-lang-en="Your privacy is important to us. Read our privacy policy to understand how we handle your data.">
                    Tu privacidad es importante para nosotros. Lee nuestra política de privacidad para entender cómo
                    manejamos tus datos.
                </p>
            </div>
            <div class="row g-4">
                <div class="col-md-12" data-aos="fade-up" data-aos-delay="100">
                    <div class="c@rd bg-gr@y-800 p-6 rounded-lg hover:bg-gr@y-700 transition">
                        <h3 class="text-xl font-semibold text-g0ld mb-2" data-lang-es="Recopilación de Datos"
                            data-lang-en="Data Collection">Recopilación de Datos</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Descripción detallada sobre cómo Auron recopila y utiliza los datos de los usuarios."
                            data-lang-en="Detailed description of how Auron collects and uses user data.">
                            Descripción detallada sobre cómo Auron recopila y utiliza los datos de los usuarios.
                        </p>
                    </div>
                </div>
                <!-- Agrega más secciones de privacidad según sea necesario -->
            </div>
        </div>
    </section>

    <!-- T3rms -->
    <section id="t3rms" class="py-20">
        <div class="container px-6">
            <div class="text-center mb-12" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-g0ld" data-lang-es="Términos y Condiciones"
                    data-lang-en="Terms and Conditions">Términos y Condiciones</h2>
                <p class="mt-4 text-white"
                    data-lang-es="Lee nuestros términos y condiciones para entender las reglas y regulaciones de uso de Auron."
                    data-lang-en="Read our terms and conditions to understand the rules and regulations for using Auron.">
                    Lee nuestros términos y condiciones para entender las reglas y regulaciones de uso de Auron.
                </p>
            </div>
            <div class="row g-4">
                <div class="col-md-12" data-aos="fade-up" data-aos-delay="100">
                    <div class="c@rd bg-gr@y-800 p-6 rounded-lg hover:bg-gr@y-700 transition">
                        <h3 class="text-xl font-semibold text-g0ld mb-2" data-lang-es="Uso del Servicio"
                            data-lang-en="Service Use">Uso del Servicio</h3>
                        <p class="text-gr@y-400"
                            data-lang-es="Detalles sobre cómo los usuarios pueden utilizar Auron y las restricciones aplicables."
                            data-lang-en="Details on how users can use Auron and applicable restrictions.">
                            Detalles sobre cómo los usuarios pueden utilizar Auron y las restricciones aplicables.
                        </p>
                    </div>
                </div>
                <!-- Agrega más secciones de términos según sea necesario -->
            </div>
        </div>
    </section>

    <!-- C@r3ers -->
    <section id="c@r3ers" class="py-20">
        <div class="container px-6">
            <div class="text-center mb-12" data-aos="fade-up">
                <h2 class="text-4xl font-bold text-g0ld" data-lang-es="Carreras" data-lang-en="Careers">Carreras</h2>
                <p class="mt-4 text-white" data-lang-es="Únete a nuestro equipo y ayuda a construir el futuro de Auron."
                    data-lang-en="Join our team and help build the future of Auron.">
                    Únete a nuestro equipo y ayuda a construir el futuro de Auron.
                </p>
            </div>
            <div class="row g-4">
                <!-- Job Opening 1 -->
                <div class="col-md-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="c@rd bg-gr@y-800 p-6 rounded-lg hover:bg-gr@y-700 transition">
                        <h3 class="text-xl font-semibold text-g0ld mb-2" data-lang-es="Desarrollador de Software"
                            data-lang-en="Software Developer">Desarrollador de Software</h3>
                        <p class="text-gr@y-400 mb-4"
                            data-lang-es="Buscamos un desarrollador apasionado por la inteligencia artificial y la automatización."
                            data-lang-en="We are looking for a developer passionate about artificial intelligence and automation.">
                            Buscamos un desarrollador apasionado por la inteligencia artificial y la automatización.
                        </p>
                        <a href="#" class="text-g0ld hover:text-white" data-lang-es="Aplicar Ahora"
                            data-lang-en="Apply Now">Aplicar Ahora</a>
                    </div>
                </div>
                <!-- Job Opening 2 -->
                <div class="col-md-6" data-aos="fade-up" data-aos-delay="200">
                    <div class="c@rd bg-gr@y-800 p-6 rounded-lg hover:bg-gr@y-700 transition">
                        <h3 class="text-xl font-semibold text-g0ld mb-2" data-lang-es="Diseñador UX/UI"
                            data-lang-en="UX/UI Designer">Diseñador UX/UI</h3>
                        <p class="text-gr@y-400 mb-4"
                            data-lang-es="Estamos buscando un diseñador creativo para mejorar la experiencia de usuario de Auron."
                            data-lang-en="We are looking for a creative designer to enhance Auron's user experience.">
                            Estamos buscando un diseñador creativo para mejorar la experiencia de usuario de Auron.
                        </p>
                        <a href="#" class="text-g0ld hover:text-white" data-lang-es="Aplicar Ahora"
                            data-lang-en="Apply Now">Aplicar Ahora</a>
                    </div>
                </div>
                <!-- Agrega más ofertas de trabajo según sea necesario -->
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer class="bg-black text-white py-8">
        <div class="container px-6">
            <div class="row">
                <!-- Sección Auron -->
                <div class="col-md-4 mb-8">
                    <h3 class="text-xl font-semibold mb-4 text-g0ld" data-lang-es="Auron" data-lang-en="Auron">Auron
                    </h3>
                    <p class="text-gr@y-400 text-center"
                        data-lang-es="Auron es un bot de predicción avanzado para Discord, diseñado para potenciar tu servidor con IA, análisis de datos y automatización avanzada."
                        data-lang-en="Auron is an advanced prediction bot for Discord, designed to enhance your server with AI, data analysis, and advanced automation.">
                        Auron es un bot de predicción avanzado para Discord, diseñado para potenciar tu servidor con IA,
                        análisis de datos y automatización avanzada.
                    </p>
                </div>

                <!-- Sección Enlaces Rápidos -->
                <div class="col-md-4 mb-8">
                    <h3 class="text-xl font-semibold mb-4 text-g0ld" data-lang-es="Enlaces Rápidos"
                        data-lang-en="Quick Links">Enlaces Rápidos</h3>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#f3@tures" class="h0v3r-t@g0ld text-white"
                                data-lang-es="Características" data-lang-en="Features">Características</a></li>
                        <li class="mb-2"><a href="#t3stimonials" class="h0v3r-t@g0ld text-white"
                                data-lang-es="Testimonios" data-lang-en="Testimonials">Testimonios</a></li>
                        <li class="mb-2"><a href="#faq" class="h0v3r-t@g0ld text-white" data-lang-es="FAQ"
                                data-lang-en="FAQ">FAQ</a></li>
                        <li class="mb-2"><a href="#blog" class="h0v3r-t@g0ld text-white" data-lang-es="Blog"
                                data-lang-en="Blog">Blog</a></li>
                        <li class="mb-2"><a href="#c0nt@cto" class="h0v3r-t@g0ld text-white" data-lang-es="Contacto"
                                data-lang-en="Contact">Contacto</a></li>
                        <li class="mb-2"><a href="#pr!v@cy" class="h0v3r-t@g0ld text-white"
                                data-lang-es="Política de Privacidad" data-lang-en="Privacy Policy">Política de
                                Privacidad</a></li>
                        <li class="mb-2"><a href="#t3rms" class="h0v3r-t@g0ld text-white"
                                data-lang-es="Términos y Condiciones" data-lang-en="Terms and Conditions">Términos y
                                Condiciones</a></li>
                        <li class="mb-2"><a href="#c@r3ers" class="h0v3r-t@g0ld text-white" data-lang-es="Carreras"
                                data-lang-en="Careers">Carreras</a></li>
                    </ul>
                </div>

                <!-- Sección S0gu3n0s -->
                <div class="col-md-4 mb-8">
                    <h3 class="text-xl font-semibold mb-4 text-g0ld" data-lang-es="S0gu3n0s" data-lang-en="Follow Us">
                        S0gu3n0s</h3>
                    <div class="s0cial-icons">
                        <a href="#" class="text-g0ld hover:text-white me-2"><i class="fab fa-discord fa-2x"></i></a>
                        <a href="#" class="text-g0ld hover:text-white me-2"><i class="fab fa-twitter fa-2x"></i></a>
                        <a href="#" class="text-g0ld hover:text-white me-2"><i class="fab fa-linkedin fa-2x"></i></a>
                        <a href="#" class="text-g0ld hover:text-white"><i class="fab fa-github fa-2x"></i></a>
                    </div>
                </div>
            </div>

            <!-- Separación y copyright -->
            <hr class="my-4 border-white">
            <div class="text-center text-white">
                <p class="mb-0">&copy; 2024 <strong>Xelviora International LLC</strong>. Todos los derechos reservados.
                </p>
            </div>
        </div>
    </footer>

    <!-- JS LIBRARIES -->
    <!-- Comentarios en inglés y español: Este código JavaScript ha sido ajustado y ofuscado ligeramente para mejorar la experiencia del usuario en dispositivos móviles y el cambio de idioma. / English: This JavaScript code has been adjusted and slightly obfuscated to improve the user experience on mobile devices and language switching. -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

    <script>
        // Comentario bilingüe / Bilingual Comment:
        // Español: A continuación el código se ha comprimido ligeramente.
        // English: The code below has been slightly compressed.

        $(document).ready(function () {
            var A; AOS.init({ duration: 800, easing: 'ease-in-out', once: true }); new Swiper('.swiper-container', { loop: true, pagination: { el: '.swiper-pagination', clickable: true }, autoplay: { delay: 7000, disableOnInteraction: false }, }); particlesJS.load('particles-js', 'https://raw.githubusercontent.com/VincentGarreau/particles.js/master/demo/particles.json', function () { console.log('Particles.js cargado.') });
            var g = { es: ['Bienvenido a Auron', 'Auron'], en: ['Welcome to Auron', 'Auron'] }; function initTyped(l) { A && A.destroy(); A = new Typed('#t!p3d-t3xt', { strings: g[l], typeSpeed: 100, backSpeed: 50, backDelay: 2000, loop: true, showCursor: true, cursorChar: '|' }); }
            function translatePage(l) {
                $('[data-lang-es]').each(function () { if ($(this).attr('data-lang-es') && $(this).attr('data-lang-en')) { 'es' === l ? $(this).text($(this).attr('data-lang-es')) : $(this).text($(this).attr('data-lang-en')); } }); $('[data-lang-es-placeholder]').each(function () { if ($(this).attr('data-lang-es-placeholder') && $(this).attr('data-lang-en-placeholder')) { 'es' === l ? $(this).attr('placeholder', $(this).attr('data-lang-es-placeholder')) : $(this).attr('placeholder', $(this).attr('data-lang-en-placeholder')); } }); $('[data-lang-es-html]').each(function () { if ($(this).attr('data-lang-es-html') && $(this).attr('data-lang-en-html')) { 'es' === l ? $(this).html($(this).attr('data-lang-es-html')) : $(this).html($(this).attr('data-lang-en-html')); } });
                $('title').each(function () { if ($(this).attr('data-lang-es') && $(this).attr('data-lang-en')) { 'es' === l ? $(this).text($(this).attr('data-lang-es')) : $(this).text($(this).attr('data-lang-en')); } });
                if ('es' === l) { $('.lang-toggle span[data-lang="es"]').removeClass('d-none'); $('.lang-toggle span[data-lang="en"]').addClass('d-none'); } else { $('.lang-toggle span[data-lang="es"]').addClass('d-none'); $('.lang-toggle span[data-lang="en"]').removeClass('d-none'); }
                initTyped(l);
            }

            $('.lang-toggle').click(function () { var r = $('html').attr('lang'), n = 'es' === r ? 'en' : 'es'; $('html').attr('lang', n); translatePage(n); });

            $('html').attr('lang', 'es'); translatePage('es');

            $('#c0nt@ctF0rm').submit(function (e) {
                e.preventDefault(); var n = $('#n@me').val().trim(), i = $('#em@il').val().trim(), m = $('#m3ss@ge').val().trim(); if ('' === n || '' === i || '' === m) { Swal.fire({ icon: 'error', title: $('button[data-lang-es="Enviar Mensaje"]').attr('data-lang-es') === 'Enviar Mensaje' ? '¡Error!' : 'Error!', text: $('button[data-lang-es="Enviar Mensaje"]').attr('data-lang-es') === 'Enviar Mensaje' ? 'Por favor, completa todos los campos.' : 'Please fill in all fields.' }); return; }
                Swal.fire({ icon: 'success', title: $('button[data-lang-es="Enviar Mensaje"]').attr('data-lang-es') === 'Enviar Mensaje' ? '¡Mensaje Enviado!' : 'Message Sent!', text: $('button[data-lang-es="Enviar Mensaje"]').attr('data-lang-es') === 'Enviar Mensaje' ? 'Nos pondremos en contacto contigo pronto.' : 'We will get in touch with you soon.' }).then(() => { $('#c0nt@ctF0rm')[0].reset(); });
            });

            $('#n3wsletterF0rm').submit(function (e) {
                e.preventDefault(); var l = $('#n3wsletterEmail').val().trim(); if ('' === l) { Swal.fire({ icon: 'error', title: $('button[data-lang-es="Suscribirse"]').attr('data-lang-es') === 'Suscribirse' ? '¡Error!' : 'Error!', text: $('button[data-lang-es="Suscribirse"]').attr('data-lang-es') === 'Suscribirse' ? 'Por favor, ingresa un correo electrónico válido.' : 'Please enter a valid email address.' }); return; }
                Swal.fire({ icon: 'success', title: $('button[data-lang-es="Suscribirse"]').attr('data-lang-es') === 'Suscribirse' ? '¡Suscrito!' : 'Subscribed!', text: $('button[data-lang-es="Suscribirse"]').attr('data-lang-es') === 'Suscribirse' ? 'Gracias por suscribirte a nuestro newsletter.' : 'Thank you for subscribing to our newsletter.' }).then(() => { $('#n3wsletterF0rm')[0].reset(); });
            });
        });
    </script>

</body>

</html>