<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>Bienvenido a Organice su Evento</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Outfit:wght@700;800&display=swap" rel="stylesheet">
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <style>
        :root {
            --clr-primary: #7b5cf5;
            --clr-accent: #a855f7;
            /* Degradado Moderno y Profundo */
            --bg-gradient: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
            --glass: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body, html { 
            height: 100dvh; /* Altura dinámica para celulares largos */
            font-family: 'Inter', sans-serif; 
            background: var(--bg-gradient); 
            background-attachment: fixed;
            color: white; 
            overflow: hidden; 
        }
        
        .swiper { width: 100%; height: 100dvh; }
        
        .swiper-slide { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; /* Centrar todo verticalmente */
            padding: 1.5rem; 
            gap: 15px; /* Espacio controlado entre elementos */
        }
        
        .image-container { 
            width: 100%; 
            max-width: 280px; 
            height: 50dvh; /* Limitamos la imagen al 50% de la pantalla */
            display: flex; 
            align-items: center; 
            justify-content: center; 
            flex-shrink: 0; /* Que no se achique más de lo necesario */
        }

        .image-container img { 
            max-width: 100%; 
            max-height: 100%; 
            border-radius: 20px; 
            box-shadow: 0 15px 35px rgba(0,0,0,0.5); 
            object-fit: contain; /* Asegura que se vea toda la captura */
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .text-container { 
            width: 100%;
            max-width: 400px; 
            background: var(--glass);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid var(--glass-border);
            padding: 18px; /* Padding más compacto */
            border-radius: 20px;
            text-align: center;
            flex-shrink: 1;
        }

        h2 { 
            font-family: 'Outfit', sans-serif; 
            font-size: 1.3rem; /* Texto un poco más pequeño */
            margin-bottom: 0.5rem; 
            line-height: 1.2; 
            background: linear-gradient(to right, #fff, #a5b4fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        p { 
            font-size: 0.9rem; /* Fuente más compacta */
            line-height: 1.4; 
            color: #94a3b8; 
        }
        
        .footer-nav { 
            position: fixed; 
            bottom: 25px; 
            left: 0; 
            width: 100%; 
            z-index: 100; 
            padding: 0 1.5rem; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            gap: 12px; 
        }
        
        .btn-start { 
            background: white; 
            color: #0f172a; 
            width: 100%;
            max-width: 280px;
            padding: 0.9rem; 
            border-radius: 14px; 
            font-weight: 800; 
            font-size: 0.9rem; 
            cursor: pointer; 
            display: none; 
            text-decoration: none; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
            transition: 0.3s; 
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .btn-start.visible { display: block; animation: fadeIn 0.5s ease; }
        
        .skip-link { 
            color: rgba(255,255,255,0.5); 
            text-decoration: none; 
            font-weight: 600; 
            font-size: 0.85rem; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            padding: 10px;
        }
        
        /* Estilo para los puntitos */
        .swiper-pagination-bullet { background: rgba(255,255,255,0.2); opacity: 1; }
        .swiper-pagination-bullet-active { 
            background: white; 
            width: 25px; 
            border-radius: 5px; 
            transition: 0.3s; 
        }

        /* Animación de la Manito */
        .swipe-hint {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            z-index: 1000;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0.8;
            animation: swipeHand 2s infinite;
        }
        .swipe-hint svg { width: 40px; height: 40px; fill: white; filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); }
        .swipe-hint span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; margin-top: 5px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

        @keyframes swipeHand {
            0% { transform: translate(0, -50%); opacity: 0; }
            20% { opacity: 1; }
            80% { transform: translate(-60px, -50%); opacity: 0; }
            100% { opacity: 0; }
        }

        .hide-hint { display: none !important; }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Pantalla de carga si no hay slides */
        .empty-state { height: 100dvh; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 2rem; }
    </style>
</head>
<body>

    <div class="swipe-hint" id="swipeHint">
        <svg viewBox="0 0 24 24"><path d="M19.5,12C18.67,12 18,12.67 18,13.5V17.5L14.3,13.8C14,13.5 13.5,13.5 13.2,13.8L12.5,14.5L16.2,18.2C16.5,18.5 16.5,19 16.2,19.3L15.5,20L10.8,15.3C10.5,15 10,15 9.7,15.3L9,16L13.7,20.7C14,21 14.5,21 14.8,20.7L19.5,16C19.8,15.7 20,15.2 20,14.7V13.5C20,12.67 19.33,12 19.5,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
        <span>Desliza</span>
    </div>

            <div class="swiper">
            <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                        <div class="image-container">
                            <img src="usuarios/usuario001.jpg" alt="Imagen Onboarding">
                        </div>
                        <div class="text-container">
                            <h2>¡Bienvenido a Organice su Evento!</h2>
                            <p>Soy tu asistente virtual. Te ayudaré paso a paso a planificar la fiesta de tus sueños en Uruguay.</p>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="image-container">
                            <img src="usuarios/usuario002.jpg" alt="Imagen Onboarding">
                        </div>
                        <div class="text-container">
                            <h2>Encuentra los Mejores Proveedores</h2>
                            <p>Explora opciones exclusivas, mira sus videos y contáctalos directamente por WhatsApp o mail con un clic.</p>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="image-container">
                            <img src="usuarios/usuario003.jpg" alt="Imagen Onboarding">
                        </div>
                        <div class="text-container">
                            <h2>Promociones y eventos</h2>
                            <p>Conoce lo que los proveedores tienen para vos</p>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="image-container">
                            <img src="usuarios/usuario004.jpg" alt="Imagen Onboarding">
                        </div>
                        <div class="text-container">
                            <h2>Perfiles Directos</h2>
                            <p>Solo lo que necesitas: video presentación, descripción de sus servicios y contacto directo sin intermediarios.</p>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="image-container">
                            <img src="usuarios/usuario005.jpg" alt="Imagen Onboarding">
                        </div>
                        <div class="text-container">
                            <h2>Herramientas</h2>
                            <p>Organiza tu presupuesto, lista de tareas, Tarjetas Digitales!! </p>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="image-container">
                            <img src="usuarios/usuario007.jpg" alt="Imagen Onboarding">
                        </div>
                        <div class="text-container">
                            <h2>Invitaciones Digitales Premium</h2>
                            <p>Crea una invitación espectacular que tus invitados podrán ver desde su móvil y confirmar al instante.</p>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="image-container">
                            <img src="usuarios/usuario012.jpg" alt="Imagen Onboarding">
                        </div>
                        <div class="text-container">
                            <h2>Gestión de Invitados</h2>
                            <p>Controla quién asistirá, qué menú eligieron y visualiza estadísticas en tiempo real para tu catering.</p>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="image-container">
                            <img src="usuarios/usuario014.jpg" alt="Imagen Onboarding">
                        </div>
                        <div class="text-container">
                            <h2>Presupuesto Bajo Control</h2>
                            <p>Registra cada gasto, controla tus pagos y asegúrate de no excederte del monto dispuesto.</p>
                        </div>
                    </div>
                            </div>
            
            <div class="swiper-pagination"></div>
        </div>

        <div class="footer-nav">
            <a href="https://www.organicesuevento.com/bot/" class="btn-start" id="btnStart" onclick="setTourSeen()">EMPEZAR</a>
            <a href="https://www.organicesuevento.com/bot/" class="skip-link" id="btnSkip" onclick="setTourSeen()">Saltar tour</a>
        </div>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        function setTourSeen() {
            // Creamos una cookie que expire en 365 días y sea válida para todo el dominio
            document.cookie = "tour_seen=true; path=/; max-age=" + (60*60*24*365);
        }

        const swiper = new Swiper('.swiper', {
            speed: 600,
            parallax: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on: {
                touchStart: function() {
                    const hint = document.getElementById('swipeHint');
                    if(hint) hint.classList.add('hide-hint');
                },
                slideChange: function () {
                    const btnStart = document.getElementById('btnStart');
                    const btnSkip = document.getElementById('btnSkip');
                    const hint = document.getElementById('swipeHint');
                    
                    if (hint) hint.classList.add('hide-hint');

                    if (this.isEnd) {
                        btnStart.classList.add('visible');
                        btnSkip.style.display = 'none';
                    } else {
                        btnStart.classList.remove('visible');
                        btnSkip.style.display = 'block';
                    }
                }
            }
        });
    </script>
</body>
</html>
