<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NextGen Corp | Innovación sin límites</title>
    <meta name="description" content="Descubre nuestras metodologías, visión y promociones exclusivas.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- HEADER -->
    <header id="header">
        <div class="container header-container">
            <a href="#" class="logo">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2L2 22H22L12 2Z" fill="white"/>
                </svg>
                NextGen
            </a>
            <nav>
                <ul class="nav-links">
                    <li><a href="#hero">Home</a></li>
                    <li><a href="#acerca-de">Acerca de nosotros</a></li>
                    <li><a href="#casos-exito">Casos de Éxito</a></li>
                    <li><a href="#clientes">Clientes</a></li>
                    <li><a href="#promociones">Promociones</a></li>
                </ul>
            </nav>
            <a href="#contacto" class="btn btn-primary nav-cta">Contacto</a>
            <button class="mobile-menu-btn" aria-label="Abrir menú">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 12H21M3 6H21M3 18H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>
    </header>

    <main>
        <!-- HERO -->
        <section id="hero" class="hero">
            <div class="hero-bg-glow"></div>
            <div class="container hero-content">
                <h1 class="hero-title">
                    Construyendo el futuro <br>
                    <span class="text-gradient">con cada línea de código.</span>
                </h1>
                <p class="hero-subtitle">
                    Transformamos ideas audaces en soluciones digitales escalables. Únete a la revolución tecnológica hoy mismo.
                </p>
                <div class="hero-ctas">
                    <a href="#promociones" class="btn btn-primary btn-lg">Ver Promociones</a>
                    <a href="#contacto" class="btn btn-secondary btn-lg">Contactar Ventas</a>
                </div>
            </div>
        </section>

        <!-- ACERCA DE -->
        <section id="acerca-de" class="section">
            <div class="container">
                <div class="section-header text-center">
                    <h2 class="section-title">Acerca de Nosotros</h2>
                    <p class="section-description">Impulsados por la innovación, definimos los estándares del mañana.</p>
                </div>
                
                <div class="grid grid-2 about-grid">
                    <div class="card about-card glass">
                        <div class="card-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 2L2 7L12 12L22 7L12 2Z"></path>
                                <path d="M2 17L12 22L22 17"></path>
                                <path d="M2 12L12 17L22 12"></path>
                            </svg>
                        </div>
                        <h3>Nuestra Metodología</h3>
                        <p>Aplicamos prácticas ágiles y un enfoque DevOps centrado en la integración y entrega continua. Iteramos rápido, medimos el impacto y escalamos las soluciones de manera eficiente sin comprometer la calidad ni la seguridad.</p>
                    </div>
                    
                    <div class="card about-card glass">
                        <div class="card-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"></circle>
                                <path d="M12 2V12L16 16"></path>
                            </svg>
                        </div>
                        <h3>Nuestra Visión</h3>
                        <p>Visualizamos un ecosistema digital donde la tecnología sea un habilitador invisible. Buscamos democratizar el acceso a infraestructuras de alto rendimiento para que las empresas se enfoquen en lo que realmente importa: crear valor.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- CASOS DE EXITO -->
        <section id="casos-exito" class="section bg-darker">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">Casos de Éxito</h2>
                    <p class="section-description">Experiencias reales, resultados medibles. Descubre cómo ayudamos a transformar negocios.</p>
                </div>
                
                <div class="carousel-container glass">
                    <div class="carousel-track" id="cases-track">
                        <!-- Slide 1 -->
                        <div class="carousel-slide">
                            <div class="case-content">
                                <span class="case-tag">E-Commerce</span>
                                <h3>TechStore Inc.</h3>
                                <p>Aumentamos su tasa de conversión en un 45% mediante una reestructuración de su frontend usando arquitecturas Edge y SSR.</p>
                            </div>
                            <div class="case-image bg-gradient-1"></div>
                        </div>
                        <!-- Slide 2 -->
                        <div class="carousel-slide">
                            <div class="case-content">
                                <span class="case-tag">Fintech</span>
                                <h3>PayFlow Global</h3>
                                <p>Redujimos la latencia de sus transacciones en un 80% migrando su infraestructura a servidores sin servidor (Serverless).</p>
                            </div>
                            <div class="case-image bg-gradient-2"></div>
                        </div>
                        <!-- Slide 3 -->
                        <div class="carousel-slide">
                            <div class="case-content">
                                <span class="case-tag">SaaS</span>
                                <h3>CloudMetrics</h3>
                                <p>Diseñamos un dashboard interactivo en tiempo real que les permitió escalar a más de 100k usuarios concurrentes sin caídas.</p>
                            </div>
                            <div class="case-image bg-gradient-3"></div>
                        </div>
                    </div>
                    
                    <div class="carousel-controls">
                        <button id="prev-btn" class="btn-icon" aria-label="Anterior">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
                        </button>
                        <div class="carousel-indicators" id="indicators"></div>
                        <button id="next-btn" class="btn-icon" aria-label="Siguiente">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- CLIENTES -->
        <section id="clientes" class="section section-sm border-y">
            <div class="container text-center">
                <p class="text-sm text-muted mb-4">EMPRESAS INNOVADORAS QUE CONFÍAN EN NOSOTROS</p>
            </div>
            <div class="marquee">
                <div class="marquee-content">
                    <!-- Logos (SVGs o texto estilizado) -->
                    <span class="client-logo">Acme Corp</span>
                    <span class="client-logo">Globex</span>
                    <span class="client-logo">Soylent</span>
                    <span class="client-logo">Initech</span>
                    <span class="client-logo">Umbrella</span>
                    <span class="client-logo">Stark Ind.</span>
                    <span class="client-logo">Wayne Ent.</span>
                    <!-- Duplicado para loop infinito suave -->
                    <span class="client-logo">Acme Corp</span>
                    <span class="client-logo">Globex</span>
                    <span class="client-logo">Soylent</span>
                    <span class="client-logo">Initech</span>
                    <span class="client-logo">Umbrella</span>
                    <span class="client-logo">Stark Ind.</span>
                    <span class="client-logo">Wayne Ent.</span>
                </div>
            </div>
        </section>

        <!-- PROMOCIONES -->
        <section id="promociones" class="section">
            <div class="container">
                <div class="section-header text-center">
                    <h2 class="section-title">Nuestras Promociones</h2>
                    <p class="section-description">Planes optimizados para acelerar tu crecimiento.</p>
                </div>
                
                <div class="grid grid-3 promo-grid">
                    <!-- Promo 1 -->
                    <div class="card promo-card glass">
                        <div class="promo-header">
                            <h3 class="promo-title">Starter</h3>
                            <p class="promo-price">$99<span>/mes</span></p>
                        </div>
                        <ul class="promo-features">
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Hosting básico</li>
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Soporte por email</li>
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> 1 Base de datos</li>
                            <li class="disabled"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg> Analíticas avanzadas</li>
                        </ul>
                        <button class="btn btn-secondary w-full mt-auto">Elegir Starter</button>
                    </div>
                    
                    <!-- Promo 2 -->
                    <div class="card promo-card promo-popular glass highlight">
                        <div class="popular-badge">Más Elegido</div>
                        <div class="promo-header">
                            <h3 class="promo-title">Pro</h3>
                            <p class="promo-price">$199<span>/mes</span></p>
                        </div>
                        <ul class="promo-features">
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Hosting avanzado Edge</li>
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Soporte prioritario 24/7</li>
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Bases de datos ilimitadas</li>
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Analíticas avanzadas</li>
                        </ul>
                        <button class="btn btn-primary w-full mt-auto">Elegir Pro</button>
                    </div>

                    <!-- Promo 3 -->
                    <div class="card promo-card glass">
                        <div class="promo-header">
                            <h3 class="promo-title">Enterprise</h3>
                            <p class="promo-price">Custom</p>
                        </div>
                        <ul class="promo-features">
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Infraestructura dedicada</li>
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> SLA del 99.99%</li>
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Arquitecto de soluciones</li>
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Seguridad SOC2</li>
                        </ul>
                        <button class="btn btn-secondary w-full mt-auto">Contactar Ventas</button>
                    </div>
                </div>
            </div>
        </section>

        <!-- CONTACTO -->
        <section id="contacto" class="section bg-darker">
            <div class="container">
                <div class="grid grid-2 align-start">
                    <div class="contact-info">
                        <h2 class="section-title">Hablemos de tu proyecto</h2>
                        <p class="section-description mb-8">Estamos listos para llevar tu idea al siguiente nivel. Completa el formulario o contáctanos directamente.</p>
                        
                        <div class="contact-details">
                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                                </div>
                                <div>
                                    <h4 class="text-white">Email</h4>
                                    <p class="text-muted">hello@nextgencorp.com</p>
                                </div>
                            </div>
                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                                </div>
                                <div>
                                    <h4 class="text-white">Teléfono</h4>
                                    <p class="text-muted">+1 (555) 123-4567</p>
                                </div>
                            </div>
                            <div class="contact-item">
                                <div class="contact-icon">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                                </div>
                                <div>
                                    <h4 class="text-white">Oficina</h4>
                                    <p class="text-muted">123 Innovation Dr, Tech City, TC 90210</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="contact-form-container glass">
                        <form id="contact-form" class="form">
                            <div class="form-group">
                                <label for="name">Nombre completo</label>
                                <input type="text" id="name" name="name" required placeholder="Ej. Jane Doe">
                            </div>
                            <div class="form-group">
                                <label for="email">Correo electrónico</label>
                                <input type="email" id="email" name="email" required placeholder="ejemplo@empresa.com">
                            </div>
                            <div class="form-group">
                                <label for="message">Mensaje</label>
                                <textarea id="message" name="message" rows="4" required placeholder="¿En qué podemos ayudarte?"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary w-full">Enviar Mensaje</button>
                            <p class="form-status text-sm mt-4 text-center hidden" id="form-status"></p>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- FOOTER -->
    <footer class="footer">
        <div class="container footer-container">
            <div class="footer-brand">
                <a href="#" class="logo footer-logo">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2L2 22H22L12 2Z" fill="white"/>
                    </svg>
                    NextGen
                </a>
                <p class="text-sm text-muted mt-2">© 2026 NextGen Corp. Todos los derechos reservados.</p>
            </div>
            
            <div class="footer-contact">
                <a href="mailto:hello@nextgencorp.com" class="text-sm text-muted hover-white">hello@nextgencorp.com</a>
                <span class="text-muted mx-2">•</span>
                <a href="tel:+15551234567" class="text-sm text-muted hover-white">+1 (555) 123-4567</a>
            </div>
            
            <div class="footer-socials">
                <a href="#" aria-label="Twitter" class="social-link">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
                </a>
                <a href="#" aria-label="LinkedIn" class="social-link">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
                </a>
                <a href="#" aria-label="GitHub" class="social-link">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
                </a>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>
