<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Faslip - Control de Fatiga y Sueño para tu Bienestar Laboral</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- Header -->
    <header class="header">
        <nav class="nav">
            <div class="nav-container">
                <div class="nav-logo">
                    <i class="fas fa-heartbeat"></i>
                    <span>Faslip</span>
                </div>
                <ul class="nav-menu">
                    <li><a href="#inicio">Inicio</a></li>
                    <li><a href="#caracteristicas">Características</a></li>
                    <li><a href="#beneficios">Beneficios</a></li>
                    <li><a href="#contacto">Contacto</a></li>
                </ul>
                <div class="nav-toggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </nav>
    </header>

    <!-- Hero Section -->
    <section id="inicio" class="hero">
        <div class="hero-container">
            <div class="hero-content">
                <h1 class="hero-title">
                    Controla tu <span class="highlight">fatiga y sueño</span> para un mejor rendimiento laboral
                </h1>
                <p class="hero-description">
                    Faslip analiza los datos de tu smartband para evaluar tu estado de salud y determinar si estás apto para realizar tus actividades laborales de manera segura y eficiente.
                </p>
                <div class="hero-buttons">
                    <button class="btn btn-primary">
                        <a href="app-release.apk" download style="text-decoration: none; color: inherit;">
                            <i class="fas fa-download"></i>
                            Descargar App
                        </a>
                    </button>
                    <button class="btn btn-secondary">
                        <i class="fas fa-play"></i>
                        Ver Demo
                    </button>
                </div>
                <div class="hero-stats">
                    <div class="stat">
                        <span class="stat-number">10K+</span>
                        <span class="stat-label">Usuarios activos</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">95%</span>
                        <span class="stat-label">Precisión</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">24/7</span>
                        <span class="stat-label">Monitoreo</span>
                    </div>
                </div>
            </div>
            <div class="hero-image">
                <div class="phone-mockup">
                    <div class="phone-screen">
                        <div class="app-interface">
                            <div class="status-indicator">
                                <div class="status-dot apto"></div>
                                <span>Estado: APTO</span>
                            </div>
                            <div class="metrics">
                                <div class="metric">
                                    <i class="fas fa-bed"></i>
                                    <span>7.5h sueño</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-heart"></i>
                                    <span>72 bpm</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-battery-three-quarters"></i>
                                    <span>85% energía</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="caracteristicas" class="features">
        <div class="container">
            <div class="section-header">
                <h2>Características Principales</h2>
                <p>Faslip utiliza tecnología avanzada para monitorear tu bienestar</p>
            </div>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-watch"></i>
                    </div>
                    <h3>Compatibilidad Universal</h3>
                    <p>Conecta con cualquier smartband del mercado. No importa la marca, Faslip procesa todos los datos de salud.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3>Análisis Inteligente</h3>
                    <p>Algoritmos avanzados que analizan patrones de sueño, frecuencia cardíaca y niveles de fatiga para evaluar tu estado.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <h3>Evaluación Laboral</h3>
                    <p>Determina si estás en condiciones óptimas para realizar tus actividades laborales de manera segura y productiva.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3>Reportes Detallados</h3>
                    <p>Recibe informes completos sobre tu estado de salud, patrones de sueño y recomendaciones personalizadas.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-bell"></i>
                    </div>
                    <h3>Alertas Inteligentes</h3>
                    <p>Notificaciones cuando detecta que necesitas descansar o cuando tu estado de salud requiere atención.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>Privacidad Garantizada</h3>
                    <p>Tus datos de salud están protegidos con encriptación de grado médico y cumplimos con todas las normativas de privacidad.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefits Section -->
    <section id="beneficios" class="benefits">
        <div class="container">
            <div class="benefits-content">
                <div class="benefits-text">
                    <h2>¿Por qué elegir Faslip?</h2>
                    <div class="benefit-item">
                        <div class="benefit-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="benefit-content">
                            <h3>Mayor Productividad</h3>
                            <p>Trabaja en tus mejores momentos. Faslip te ayuda a identificar cuándo estás en tu pico de rendimiento.</p>
                        </div>
                    </div>
                    <div class="benefit-item">
                        <div class="benefit-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="benefit-content">
                            <h3>Prevención de Accidentes</h3>
                            <p>Reduce el riesgo de errores y accidentes laborales al trabajar solo cuando estás en condiciones óptimas.</p>
                        </div>
                    </div>
                    <div class="benefit-item">
                        <div class="benefit-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="benefit-content">
                            <h3>Bienestar Integral</h3>
                            <p>Mejora tu calidad de vida al mantener un equilibrio saludable entre trabajo y descanso.</p>
                        </div>
                    </div>
                    <div class="benefit-item">
                        <div class="benefit-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="benefit-content">
                            <h3>Datos Accionables</h3>
                            <p>Recibe recomendaciones específicas basadas en tus patrones de salud para optimizar tu rutina diaria.</p>
                        </div>
                    </div>
                </div>
                <div class="benefits-visual">
                    <div class="dashboard-mockup">
                        <div class="dashboard-header">
                            <h4>Dashboard Faslip</h4>
                            <div class="status-badge apto">APTO PARA TRABAJAR</div>
                        </div>
                        <div class="dashboard-metrics">
                            <div class="metric-card">
                                <div class="metric-value">8.2</div>
                                <div class="metric-label">Horas de sueño</div>
                                <div class="metric-trend positive">+0.5h</div>
                            </div>
                            <div class="metric-card">
                                <div class="metric-value">68</div>
                                <div class="metric-label">BPM promedio</div>
                                <div class="metric-trend stable">Estable</div>
                            </div>
                            <div class="metric-card">
                                <div class="metric-value">92%</div>
                                <div class="metric-label">Nivel de energía</div>
                                <div class="metric-trend positive">+3%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta">
        <div class="container">
            <div class="cta-content">
                <h2>Comienza a monitorear tu bienestar hoy</h2>
                <p>Únete a miles de usuarios que ya están mejorando su calidad de vida y rendimiento laboral con Faslip.</p>
                <div class="cta-buttons">
                    <button class="btn btn-primary btn-large">
                        <a href="app-release.apk" download style="text-decoration: none; color: inherit;">
                            <i class="fas fa-download"></i>
                            Descargar Ahora
                        </a>
                    </button>
                    <button class="btn btn-outline btn-large">
                        <i class="fas fa-info-circle"></i>
                        Más Información
                    </button>
                </div>
                <div class="cta-features">
                    <span><i class="fas fa-check"></i> Gratis para empezar</span>
                    <span><i class="fas fa-check"></i> Sin compromiso</span>
                    <span><i class="fas fa-check"></i> Soporte 24/7</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer id="contacto" class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <div class="footer-logo">
                        <i class="fas fa-heartbeat"></i>
                        <span>Faslip</span>
                    </div>
                    <p>Tu compañero inteligente para el control de fatiga y sueño, diseñado para mejorar tu bienestar laboral.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
                <div class="footer-section">
                    <h4>Producto</h4>
                    <ul>
                        <li><a href="#">Características</a></li>
                        <li><a href="#">Precios</a></li>
                        <li><a href="app-release.apk" download>Descargar</a></li>
                        <li><a href="#">Actualizaciones</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Soporte</h4>
                    <ul>
                        <li><a href="#">Centro de Ayuda</a></li>
                        <li><a href="#">Contacto</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Estado del Servicio</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Legal</h4>
                    <ul>
                        <li><a href="privacidad.html">Privacidad</a></li>
                        <li><a href="terminos.html">Términos</a></li>
                        <li><a href="#">Cookies</a></li>
                        <li><a href="#">GDPR</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 Faslip. Todos los derechos reservados.</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9a9f66b9b9bdc010',t:'MTc2NTA2MjA0NS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
