<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale-1.0">
    
    <title>Iglesia [Nombre de tu Iglesia] | Un lugar para la familia</title>
    <meta name="description" content="Bienvenidos a la Iglesia [Nombre]. Una comunidad de fe, esperanza y amor en [Tu Ciudad]. Horarios de servicios, actividades para niños y mensajes inspiradores.">
    <meta name="keywords" content="iglesia, fe, dios, comunidad, [Tu Ciudad], cristianos, familia, domingos">
    <meta name="author" content="Iglesia [Nombre]">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://www.tu-dominio.com">

    <meta property="og:title" content="Iglesia [Nombre] | Bienvenidos a Casa">
    <meta property="og:description" content="Únete a nosotros este domingo. Somos una familia unida por la fe.">
    <meta property="og:image" content="https://images.unsplash.com/photo-1510936111840-65e151ad71bb?q=80&w=2090">
    <meta property="og:url" content="https://www.tu-dominio.com">
    <meta property="og:type" content="website">

    <link rel="icon" type="image/png" href="https://cdn-icons-png.flaticon.com/512/2663/2663067.png">

    <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@400;700;900&family=Barlow:wght@400;500;700&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
    
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://cdn.tailwindcss.com"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: {
                            primary: '#0f172a',   /* Azul Oscuro */
                            secondary: '#fbbf24', /* Dorado */
                            accent: '#d97706',    
                            light: '#f8fafc',       
                        }
                    },
                    fontFamily: {
                        sans: ['Barlow', 'sans-serif'],
                        display: ['Inter', 'sans-serif'],
                        handwriting: ['Dancing Script', 'cursive'], /* Nueva fuente para firma */
                    }
                }
            }
        }
    </script>

    <style>
        body { font-family: 'Barlow', sans-serif; }
        
        /* ESTILO DE TÍTULOS UNIFICADO */
        .title-display {
            font-family: 'Inter', sans-serif;
            font-weight: 900; 
            letter-spacing: -0.02em;
            line-height: 1;
            text-transform: uppercase;
        }
        
        .subtitle-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem; /* Espacio entre icono y texto */
            color: #fbbf24; /* brand-secondary */
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            font-size: 0.875rem; /* text-sm */
            margin-bottom: 0.5rem;
        }

        /* Estilos Player */
        input[type=range] { -webkit-appearance: none; background: transparent; }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none; height: 16px; width: 16px;
            border-radius: 50%; background: #fbbf24; margin-top: -6px; cursor: pointer;
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%; height: 4px; cursor: pointer; background: #334155; border-radius: 2px;
        }
    </style>
</head>

<body class="text-slate-800 bg-brand-light antialiased">

    <header class="fixed w-full z-50 top-0 bg-brand-primary/95 backdrop-blur-md border-b border-white/10 shadow-lg">
        <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
            <a href="#" class="flex items-center gap-2 group" aria-label="Volver al inicio">
                <div class="bg-brand-secondary text-brand-primary p-2 rounded-lg">
                    <i data-lucide="church" class="w-6 h-6"></i>
                </div>
                <span class="font-black text-lg md:text-xl tracking-tighter text-white uppercase">
                    IGLESIA <span class="text-brand-secondary">[NOMBRE]</span>
                </span>
            </a>

            <nav class="hidden lg:flex items-center gap-6 font-bold text-xs tracking-wider text-slate-300">
                <a href="#inicio" class="hover:text-brand-secondary transition-colors">INICIO</a>
                <a href="#bienvenida" class="hover:text-brand-secondary transition-colors">PASTOR</a>
                <a href="#horarios" class="hover:text-brand-secondary transition-colors">VISÍTANOS</a>
                <a href="#actividades" class="hover:text-brand-secondary transition-colors">ACTIVIDADES</a>
                <a href="#predicaciones" class="hover:text-brand-secondary transition-colors">MENSAJES</a>
                <a href="#ofrendas" class="hover:text-brand-secondary transition-colors">DAR</a>
                <a href="#oracion" class="bg-brand-secondary text-brand-primary px-5 py-2 rounded-full hover:brightness-110 transition-all font-bold flex items-center gap-2">
                    <i data-lucide="heart-handshake" class="w-4 h-4"></i> ORACIÓN
                </a>
            </nav>

            <button id="mobileMenuBtn" class="lg:hidden text-white" aria-label="Abrir menú"><i data-lucide="menu" class="w-8 h-8"></i></button>
        </div>
    </header>

    <div id="mobileMenu" class="fixed inset-0 z-[60] bg-brand-primary transform translate-x-full transition-transform duration-300 flex flex-col h-full">
        
        <div class="flex items-center justify-between p-6 border-b border-white/10">
            <div class="flex items-center gap-2">
                <div class="bg-brand-secondary text-brand-primary p-1.5 rounded">
                    <i data-lucide="church" class="w-5 h-5"></i>
                </div>
                <span class="font-black text-lg text-white uppercase tracking-tighter">
                    IGLESIA [NOMBRE]
                </span>
            </div>
            <button id="closeMobileMenuBtn" class="text-slate-400 hover:text-white p-2 transition-colors bg-white/5 rounded-lg" aria-label="Cerrar menú">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>
        </div>

        <nav class="flex-1 overflow-y-auto py-8 px-6 flex flex-col gap-2">
            <a href="#inicio" class="mobile-link flex items-center gap-4 text-white text-lg font-bold p-4 rounded-xl hover:bg-white/5 transition-all border border-transparent hover:border-white/10 group">
                <i data-lucide="home" class="w-5 h-5 text-brand-secondary group-hover:scale-110 transition-transform"></i>
                INICIO
            </a>
            <a href="#bienvenida" class="mobile-link flex items-center gap-4 text-white text-lg font-bold p-4 rounded-xl hover:bg-white/5 transition-all border border-transparent hover:border-white/10 group">
                <i data-lucide="user" class="w-5 h-5 text-brand-secondary group-hover:scale-110 transition-transform"></i>
                BIENVENIDA
            </a>
            <a href="#horarios" class="mobile-link flex items-center gap-4 text-white text-lg font-bold p-4 rounded-xl hover:bg-white/5 transition-all border border-transparent hover:border-white/10 group">
                <i data-lucide="map-pin" class="w-5 h-5 text-brand-secondary group-hover:scale-110 transition-transform"></i>
                UBICACIÓN
            </a>
            <a href="#actividades" class="mobile-link flex items-center gap-4 text-white text-lg font-bold p-4 rounded-xl hover:bg-white/5 transition-all border border-transparent hover:border-white/10 group">
                <i data-lucide="users" class="w-5 h-5 text-brand-secondary group-hover:scale-110 transition-transform"></i>
                ACTIVIDADES
            </a>
            <a href="#predicaciones" class="mobile-link flex items-center gap-4 text-white text-lg font-bold p-4 rounded-xl hover:bg-white/5 transition-all border border-transparent hover:border-white/10 group">
                <i data-lucide="mic" class="w-5 h-5 text-brand-secondary group-hover:scale-110 transition-transform"></i>
                PREDICACIONES
            </a>
            <a href="#ofrendas" class="mobile-link flex items-center gap-4 text-white text-lg font-bold p-4 rounded-xl hover:bg-white/5 transition-all border border-transparent hover:border-white/10 group">
                <i data-lucide="heart" class="w-5 h-5 text-brand-secondary group-hover:scale-110 transition-transform"></i>
                OFRENDAS
            </a>
        </nav>

        <div class="p-6 bg-slate-900/50 border-t border-white/10 mt-auto">
            <div class="flex items-start gap-3 mb-6">
                <i data-lucide="map-pin" class="w-5 h-5 text-brand-secondary shrink-0 mt-1"></i>
                <p class="text-slate-400 text-sm leading-relaxed">
                    Av. Principal #123,<br>Colonia La Fe, Tu Ciudad.
                </p>
            </div>
            
            <div class="flex justify-between items-center">
                <div class="flex gap-3">
                    <a href="#" class="w-10 h-10 bg-white/5 rounded-full flex items-center justify-center text-white hover:bg-brand-secondary hover:text-brand-primary transition-all">
                        <i data-lucide="facebook" class="w-4 h-4"></i>
                    </a>
                    <a href="#" class="w-10 h-10 bg-white/5 rounded-full flex items-center justify-center text-white hover:bg-brand-secondary hover:text-brand-primary transition-all">
                        <i data-lucide="instagram" class="w-4 h-4"></i>
                    </a>
                </div>
                
                <a href="#oracion" class="mobile-link px-4 py-2 bg-brand-secondary text-brand-primary text-xs font-black rounded-lg uppercase tracking-wide">
                    Pedir Oración
                </a>
            </div>
        </div>
    </div>

    <main>

<section id="inicio" class="relative min-h-screen flex items-center overflow-hidden bg-brand-primary pt-20 lg:pt-0">
            
            <div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0">
                <div class="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] bg-brand-secondary/20 rounded-full blur-[100px] animate-pulse"></div>
                <div class="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-blue-600/20 rounded-full blur-[120px]"></div>
                <div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 30px 30px;"></div>
            </div>

            <div class="max-w-7xl mx-auto px-6 w-full relative z-10 grid lg:grid-cols-2 gap-12 items-center">
                
                <div data-aos="fade-right" data-aos-delay="100">
                    
                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 text-brand-secondary font-bold text-xs tracking-widest uppercase mb-8 backdrop-blur-sm hover:bg-white/10 transition cursor-default">
                        <span class="relative flex h-2 w-2">
                          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-secondary opacity-75"></span>
                          <span class="relative inline-flex rounded-full h-2 w-2 bg-brand-secondary"></span>
                        </span>
                        Bienvenidos a Casa
                    </div>

                    <h1 class="title-display text-5xl sm:text-6xl lg:text-5xl text-white leading-[1.1] mb-6">
                        No fuiste creado para caminar 
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-secondary to-orange-400">solo.</span>
                    </h1>

                    <p class="text-slate-300 text-lg leading-relaxed mb-8 max-w-lg">
                        Somos una comunidad auténtica donde puedes descubrir tu propósito, fortalecer tu fe y encontrar amigos para toda la vida. Aquí, tu historia importa.
                    </p>

                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#horarios" class="px-8 py-4 bg-brand-secondary text-brand-primary font-black rounded-xl hover:scale-105 hover:shadow-[0_0_20px_rgba(251,191,36,0.4)] transition-all inline-flex items-center justify-center gap-2 uppercase tracking-wide">
                            <i data-lucide="map-pin" class="w-5 h-5"></i> Planear mi Visita
                        </a>
                        <a href="#predicaciones" class="px-8 py-4 bg-white/5 text-white border border-white/10 font-bold rounded-xl hover:bg-white/10 transition-all inline-flex items-center justify-center gap-2 uppercase tracking-wide">
                            <i data-lucide="play-circle" class="w-5 h-5"></i> Ver último mensaje
                        </a>
                    </div>
                </div>

                <div class="relative hidden lg:block h-[600px]" data-aos="fade-left" data-aos-delay="300">
                    <div class="absolute top-0 right-0 w-11/12 h-full rounded-[2rem] overflow-hidden shadow-2xl border border-white/10 group">
                        <img src="https://images.unsplash.com/photo-1438232992991-995b7058bbb3?q=80&w=2073" alt="Adoración Jovenes" class="w-full h-full object-cover opacity-80 group-hover:scale-105 transition duration-700">
                        <div class="absolute inset-0 bg-gradient-to-t from-brand-primary/80 to-transparent"></div>
                    </div>

                    <div class="absolute bottom-10 left-0 bg-white/10 backdrop-blur-md border border-white/20 p-5 rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] animate-[bounce_3s_infinite]">
                        <div class="flex items-center gap-4">
                            <div class="bg-brand-secondary text-brand-primary p-3 rounded-xl">
                                <i data-lucide="calendar-clock" class="w-8 h-8"></i>
                            </div>
                            <div>
                                <p class="text-slate-300 text-xs font-bold uppercase tracking-wider">Próxima Reunión</p>
                                <p class="text-white font-black text-xl">Este Domingo</p>
                                <p class="text-brand-secondary font-bold">10:00 AM</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce hidden md:block">
                <a href="#bienvenida" class="text-slate-500 hover:text-white transition">
                    <i data-lucide="chevrons-down" class="w-8 h-8"></i>
                </a>
            </div>
        </section>

        <section id="bienvenida" class="py-20 bg-white">
            <div class="max-w-7xl mx-auto px-6 lg:px-8">
                <div class="flex flex-col lg:flex-row items-center gap-12">
                    
                    <div class="w-full lg:w-1/2" data-aos="fade-right">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=988" 
                             alt="Pastores Principales de Iglesia [Nombre]" 
                             class="rounded-2xl shadow-2xl w-full h-[500px] object-cover grayscale hover:grayscale-0 transition duration-700">
                    </div>

                    <div class="w-full lg:w-1/2" data-aos="fade-left">
                        <div class="mb-8">
                            <span class="subtitle-tag">
                                <i data-lucide="user-check" class="w-4 h-4"></i> Nuestro Pastor
                            </span>
                            <h2 class="title-display text-4xl md:text-5xl text-brand-primary">
                                Mensaje de <br><span class="text-brand-secondary">Bienvenida</span>
                            </h2>
                        </div>
                        
                        <div class="prose prose-lg text-slate-600 mb-8">
                            <p class="text-xl font-medium text-brand-primary/80 italic mb-6">
                                "Creemos que la iglesia no es un edificio, sino una comunidad de personas."
                            </p>
                            <p>
                                ¡Hola! Soy el Pastor <strong>[Tu Nombre]</strong>. Quiero darte personalmente la bienvenida. En [Nombre de la Iglesia], nos apasiona crear un ambiente donde las personas puedan tener un encuentro auténtico con Jesús.
                            </p>
                        </div>

                        <div class="mt-8">
                            <p class="text-brand-secondary font-handwriting text-4xl -rotate-2">
                                Pastor [Tu Nombre]
                            </p>
                            <p class="text-slate-400 text-xs uppercase tracking-widest font-bold mt-2 ml-2">Pastor General</p>
                        </div>
                    </div>

                </div>
            </div>
        </section>

<section id="horarios" class="py-20 bg-brand-primary text-white relative overflow-hidden">
            <div class="max-w-7xl mx-auto px-6 relative z-10">
                <div class="text-center mb-16" data-aos="fade-up">
                    <span class="subtitle-tag">
                        <i data-lucide="calendar-days" class="w-4 h-4"></i> Agenda Semanal
                    </span>
                    <h2 class="title-display text-4xl md:text-5xl text-white">
                        Nuestros <span class="text-brand-secondary">Horarios</span>
                    </h2>
                </div>

                <div class="grid lg:grid-cols-2 gap-12">
                    
                    <div class="grid gap-4 h-full" data-aos="fade-right">
                        <div class="bg-white/5 p-6 rounded-xl border-l-4 border-brand-secondary hover:bg-white/10 transition">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h3 class="font-bold text-xl text-white mb-1">Domingo - Servicio General</h3>
                                    <p class="text-slate-400">Alabanza y Palabra para toda la familia.</p>
                                </div>
                                <span class="text-2xl font-black text-brand-secondary">10:00 AM</span>
                            </div>
                        </div>
                        
                        <div class="bg-white/5 p-6 rounded-xl border-l-4 border-brand-accent hover:bg-white/10 transition">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h3 class="font-bold text-xl text-white mb-1">Miércoles - Estudio Bíblico</h3>
                                    <p class="text-slate-400">Profundizando en las escrituras.</p>
                                </div>
                                <span class="text-2xl font-black text-brand-accent">7:00 PM</span>
                            </div>
                        </div>

                        <div class="bg-white/5 p-6 rounded-xl border-l-4 border-blue-500 hover:bg-white/10 transition">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h3 class="font-bold text-xl text-white mb-1">Viernes - Noche de Jóvenes</h3>
                                    <p class="text-slate-400">Música, amigos y fe.</p>
                                </div>
                                <span class="text-2xl font-black text-blue-400">7:30 PM</span>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-col gap-6 h-full" data-aos="fade-left">
                        
                        <div class="bg-white/10 border border-white/10 p-6 rounded-2xl backdrop-blur-sm flex items-start gap-4 shrink-0">
                            <div class="bg-brand-secondary p-3 rounded-lg shrink-0 mt-1">
                                <i data-lucide="map-pin" class="w-8 h-8 text-brand-primary"></i>
                            </div>
                            <div>
                                <h3 class="text-brand-secondary font-bold uppercase tracking-widest text-xs mb-2">Nuestra Ubicación</h3>
                                <p class="text-2xl md:text-3xl font-black text-white leading-tight">
                                    Av. Principal #123, <br>
                                    Colonia La Fe, Tu Ciudad.
                                </p>
                                <p class="text-slate-400 text-sm mt-2">Frente al parque central, edificio azul.</p>
                            </div>
                        </div>

                        <div class="flex-1 w-full min-h-[300px] rounded-2xl overflow-hidden border border-white/10 shadow-2xl relative">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799160891!2d-74.25987584510573!3d40.69767006338158!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1635857502960!5m2!1sen!2s" 
                                    class="absolute inset-0 w-full h-full"
                                    style="border:0;" allowfullscreen="" loading="lazy" title="Mapa de ubicación"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="actividades" class="py-24 bg-slate-50 relative overflow-hidden">
            
            <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-30 pointer-events-none">
                 <div class="absolute -right-20 top-40 w-96 h-96 bg-brand-secondary/10 rounded-full blur-3xl"></div>
                 <div class="absolute -left-20 bottom-20 w-72 h-72 bg-brand-primary/5 rounded-full blur-3xl"></div>
            </div>

            <div class="max-w-7xl mx-auto px-6 relative z-10">
                <div class="text-center mb-16" data-aos="fade-up">
                    <span class="subtitle-tag justify-center">
                        <i data-lucide="users" class="w-4 h-4"></i> Para toda la familia
                    </span>
                    <h2 class="title-display text-4xl md:text-5xl text-brand-primary">
                        Nuestros <span class="text-brand-secondary">Ministerios</span>
                    </h2>
                    <p class="text-slate-500 mt-4 max-w-2xl mx-auto text-lg">
                        Tenemos un lugar especial diseñado para cada etapa de tu vida, donde podrás crecer y conectar con otros.
                    </p>
                </div>

                <div class="grid md:grid-cols-3 gap-8">
                    
                    <div class="bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 group border border-slate-100" data-aos="fade-up" data-aos-delay="100">
                        <div class="h-64 overflow-hidden relative">
                            <img src="https://images.unsplash.com/photo-1502086223501-6e3f1b2b6720?q=80&w=2000" alt="Niños" class="w-full h-full object-cover group-hover:scale-110 transition duration-700">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-60"></div>
                            
                            <div class="absolute top-4 right-4 bg-white p-3 rounded-2xl shadow-lg">
                                <i data-lucide="baby" class="w-6 h-6 text-orange-500"></i>
                            </div>
                            
                            <div class="absolute bottom-4 left-4 bg-brand-secondary text-brand-primary text-xs font-black px-3 py-1.5 rounded-lg uppercase tracking-wider">
                                Edades 3 - 12 Años
                            </div>
                        </div>
                        
                        <div class="p-8">
                            <h3 class="font-black text-2xl text-brand-primary mb-3 group-hover:text-orange-500 transition-colors">Iglesia de Niños</h3>
                            <p class="text-slate-600 mb-6 leading-relaxed">Un ambiente seguro, divertido y lleno de creatividad donde tus hijos aprenderán sobre Jesús a su propio nivel.</p>
                            
                            <a href="#" class="inline-flex items-center gap-2 text-sm font-bold text-brand-primary border-b-2 border-brand-secondary/30 hover:border-brand-secondary pb-1 transition-all group/btn">
                                Conocer el programa <i data-lucide="arrow-right" class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 group border border-slate-100" data-aos="fade-up" data-aos-delay="200">
                        <div class="h-64 overflow-hidden relative">
                            <img src="https://images.unsplash.com/photo-1529070538774-1843cb3265df?q=80&w=2000" alt="Jóvenes" class="w-full h-full object-cover group-hover:scale-110 transition duration-700">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-60"></div>
                            
                            <div class="absolute top-4 right-4 bg-white p-3 rounded-2xl shadow-lg">
                                <i data-lucide="flame" class="w-6 h-6 text-red-500"></i>
                            </div>

                            <div class="absolute bottom-4 left-4 bg-red-500 text-white text-xs font-black px-3 py-1.5 rounded-lg uppercase tracking-wider">
                                Viernes 7:30 PM
                            </div>
                        </div>
                        
                        <div class="p-8">
                            <h3 class="font-black text-2xl text-brand-primary mb-3 group-hover:text-red-500 transition-colors">Jóvenes Radicales</h3>
                            <p class="text-slate-600 mb-6 leading-relaxed">Conectando a la nueva generación con su propósito divino a través de música, amistad y desafíos relevantes.</p>
                            
                            <a href="#" class="inline-flex items-center gap-2 text-sm font-bold text-brand-primary border-b-2 border-red-500/30 hover:border-red-500 pb-1 transition-all group/btn">
                                Unirme al grupo <i data-lucide="arrow-right" class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform"></i>
                            </a>
                        </div>
                    </div>

                    <div class="bg-white rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 group border border-slate-100" data-aos="fade-up" data-aos-delay="300">
                        <div class="h-64 overflow-hidden relative">
                            <img src="https://images.unsplash.com/photo-1543269865-cbf427effbad?q=80&w=2000" alt="Grupos" class="w-full h-full object-cover group-hover:scale-110 transition duration-700">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-60"></div>
                            
                            <div class="absolute top-4 right-4 bg-white p-3 rounded-2xl shadow-lg">
                                <i data-lucide="coffee" class="w-6 h-6 text-blue-500"></i>
                            </div>

                            <div class="absolute bottom-4 left-4 bg-blue-500 text-white text-xs font-black px-3 py-1.5 rounded-lg uppercase tracking-wider">
                                Entre Semana
                            </div>
                        </div>
                        
                        <div class="p-8">
                            <h3 class="font-black text-2xl text-brand-primary mb-3 group-hover:text-blue-500 transition-colors">Grupos de Conexión</h3>
                            <p class="text-slate-600 mb-6 leading-relaxed">La vida es mejor acompañada. Reúnete en hogares pequeños para compartir café, orar y estudiar la Biblia.</p>
                            
                            <a href="#" class="inline-flex items-center gap-2 text-sm font-bold text-brand-primary border-b-2 border-blue-500/30 hover:border-blue-500 pb-1 transition-all group/btn">
                                Buscar un grupo <i data-lucide="arrow-right" class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform"></i>
                            </a>
                        </div>
                    </div>
                    
                </div>
            </div>
        </section>

<section id="oracion" class="py-20 bg-brand-primary">
            <div class="max-w-6xl mx-auto px-6">
                
                <div class="bg-brand-primary border border-white/10 rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row" data-aos="fade-up">
                    
                    <div class="relative w-full md:w-5/12 min-h-[300px] md:min-h-full group">
                        <img src="https://images.unsplash.com/photo-1542042179-03efeb269b35?q=80&w=2070" 
                             alt="Manos orando" 
                             class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition duration-700 ease-in-out">
                        
                        <div class="absolute inset-0 bg-gradient-to-t from-brand-primary via-brand-primary/60 to-transparent opacity-90"></div>
                        
                        <div class="relative z-10 h-full flex flex-col justify-end p-8 md:p-10">
                            <i data-lucide="quote" class="text-brand-secondary w-8 h-8 mb-4 opacity-80"></i>
                            <blockquote class="text-xl md:text-2xl font-serif italic text-white mb-4 leading-relaxed">
                                "Clama a mí, y yo te responderé, y te enseñaré cosas grandes y ocultas que tú no conoces."
                            </blockquote>
                            <cite class="text-brand-secondary font-bold tracking-widest uppercase text-xs not-italic flex items-center gap-2">
                                <span class="w-8 h-[1px] bg-brand-secondary"></span>
                                Jeremías 33:3
                            </cite>
                        </div>
                    </div>

                    <div class="w-full md:w-7/12 p-8 md:p-12 bg-white/5 backdrop-blur-sm">
                        <div class="mb-8">
                            <div class="flex items-center gap-3 mb-3">
                                <div class="bg-brand-secondary/20 p-2 rounded-lg text-brand-secondary">
                                    <i data-lucide="heart-handshake" class="w-5 h-5"></i>
                                </div>
                                <span class="text-brand-secondary font-bold tracking-widest text-xs uppercase">Estamos contigo</span>
                            </div>
                            <h2 class="title-display text-3xl md:text-4xl text-white mb-3">¿Podemos orar por ti?</h2>
                            <p class="text-slate-400 text-sm leading-relaxed">
                                No tienes que llevar tus cargas solo. Tenemos un equipo de intercesión listo para ponerse de acuerdo contigo en fe. Todo lo que compartas es confidencial.
                            </p>
                        </div>
                        
                        <form class="flex flex-col gap-5">
                            <div>
                                <label class="block text-white text-xs font-bold uppercase tracking-wider mb-2 ml-1">Tu Nombre</label>
                                <div class="relative">
                                    <i data-lucide="user" class="absolute left-4 top-3.5 w-5 h-5 text-slate-500"></i>
                                    <input type="text" placeholder="Escribe tu nombre completo" 
                                           class="w-full pl-12 pr-4 py-3 rounded-xl bg-brand-primary/50 border border-white/10 text-white placeholder-slate-500 focus:outline-none focus:border-brand-secondary focus:ring-1 focus:ring-brand-secondary transition-all" 
                                           aria-label="Tu nombre">
                                </div>
                            </div>

                            <div>
                                <label class="block text-white text-xs font-bold uppercase tracking-wider mb-2 ml-1">Tu Petición</label>
                                <textarea placeholder="Cuéntanos cómo podemos orar por ti hoy..." rows="4" 
                                          class="w-full px-4 py-3 rounded-xl bg-brand-primary/50 border border-white/10 text-white placeholder-slate-500 focus:outline-none focus:border-brand-secondary focus:ring-1 focus:ring-brand-secondary transition-all resize-none" 
                                          aria-label="Petición de oración"></textarea>
                            </div>

                            <button type="button" class="w-full py-4 bg-brand-secondary text-brand-primary font-black rounded-xl hover:scale-[1.02] active:scale-95 transition-all shadow-lg shadow-brand-secondary/20 flex items-center justify-center gap-2 uppercase tracking-wider mt-2">
                                <i data-lucide="send" class="w-4 h-4"></i> Enviar Petición
                            </button>
                        </form>
                    </div>

                </div>
            </div>
        </section>

<section id="predicaciones" class="py-24 bg-slate-50 relative overflow-hidden">
            
            <div class="absolute inset-0 opacity-30 pointer-events-none">
                <div class="absolute -right-20 top-0 w-96 h-96 bg-brand-secondary/5 rounded-full blur-3xl"></div>
                <div class="absolute -left-20 bottom-0 w-72 h-72 bg-brand-primary/5 rounded-full blur-3xl"></div>
            </div>

            <div class="max-w-7xl mx-auto px-6 relative z-10">
                <div class="text-center mb-12" data-aos="fade-up">
                    <span class="subtitle-tag justify-center">
                        <i data-lucide="mic" class="w-4 h-4"></i> Escucha la Palabra
                    </span>
                    <h2 class="title-display text-4xl md:text-5xl text-brand-primary">
                        Mensajes <span class="text-brand-secondary">Recientes</span>
                    </h2>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
                    <script>
                        const sermons = [
                            { title: "Venciendo el Temor", date: "19 Nov 2024", speaker: "Pastor Juan Pérez", duration: "45:20" },
                            { title: "Fe Inquebrantable", date: "12 Nov 2024", speaker: "Pastor Juan Pérez", duration: "38:15" },
                            { title: "El Poder del Perdón", date: "05 Nov 2024", speaker: "Invitado Especial", duration: "52:00" },
                            { title: "Caminando en Luz", date: "29 Oct 2024", speaker: "Pastor Juan Pérez", duration: "41:30" },
                            { title: "Identidad Real en Cristo", date: "22 Oct 2024", speaker: "Pastora María", duration: "35:45" },
                            { title: "La Gran Comisión Hoy", date: "15 Oct 2024", speaker: "Pastor Juan Pérez", duration: "48:10" },
                            { title: "Derribando Gigantes", date: "08 Oct 2024", speaker: "Líder de Jóvenes", duration: "40:20" },
                            { title: "Amor Inagotable", date: "01 Oct 2024", speaker: "Pastor Juan Pérez", duration: "39:50" }
                        ];
    
                        sermons.forEach((sermon, index) => {
                            const demoAudio = `https://www.soundhelix.com/examples/mp3/SoundHelix-Song-${(index % 5) + 1}.mp3`;
                            
                            // Tarjetas Blancas con texto oscuro
                            document.write(`
                                <div class="bg-white border border-slate-200 rounded-xl p-4 flex items-center gap-4 hover:shadow-lg hover:border-brand-secondary/50 transition-all group cursor-pointer"
                                     data-aos="fade-up" data-aos-delay="${index * 50}">
                                    
                                    <button 
                                        onclick="loadTrack('${demoAudio}', '${sermon.title}', '${sermon.speaker}')"
                                        class="shrink-0 w-14 h-14 bg-brand-primary rounded-full flex items-center justify-center text-brand-secondary shadow-md group-hover:scale-110 transition-transform" 
                                        aria-label="Reproducir">
                                        <i data-lucide="play" class="w-6 h-6 fill-current ml-1"></i>
                                    </button>
    
                                    <div class="flex-1 min-w-0">
                                        <div class="flex justify-between items-start">
                                            <p class="text-brand-secondary text-[10px] font-black uppercase tracking-widest mb-1">${sermon.speaker}</p>
                                            <span class="text-slate-400 text-xs font-mono bg-slate-100 px-2 py-0.5 rounded hidden sm:inline-block">${sermon.duration}</span>
                                        </div>
                                        <h3 class="font-bold text-brand-primary text-lg leading-tight truncate group-hover:text-brand-accent transition-colors">${sermon.title}</h3>
                                        <p class="text-slate-500 text-xs mt-1 flex items-center gap-1">
                                            <i data-lucide="calendar" class="w-3 h-3"></i> ${sermon.date}
                                        </p>
                                    </div>
    
                                    <button class="shrink-0 text-slate-300 hover:text-brand-primary transition px-2">
                                        <i data-lucide="download" class="w-5 h-5"></i>
                                    </button>
                                </div>
                            `);
                        });
                    </script>
                </div>

                <div class="text-center mt-12">
                    <a href="#" class="inline-flex items-center gap-2 px-8 py-3 bg-white border border-slate-200 text-brand-primary font-bold rounded-full hover:bg-brand-primary hover:text-white transition-all shadow-sm hover:shadow-lg uppercase tracking-wide text-sm group">
                        <i data-lucide="list-music" class="w-5 h-5 group-hover:text-brand-secondary"></i> Ver todos los mensajes
                    </a>
                </div>
            </div>
        </section>
        
        <section id="ofrendas" class="py-24 bg-brand-primary relative overflow-hidden">
            
            <div class="absolute inset-0 opacity-10" 
                 style="background-image: radial-gradient(#fbbf24 1px, transparent 1px); background-size: 40px 40px;">
            </div>

            <div class="max-w-7xl mx-auto px-6 relative z-10">
                
                <div class="grid lg:grid-cols-2 gap-16 items-center">
                    
                    <div data-aos="fade-right">
                        <span class="subtitle-tag mb-4">
                            <i data-lucide="heart" class="w-4 h-4"></i> Generosidad
                        </span>
                        <h2 class="title-display text-4xl md:text-5xl text-white mb-6">
                            Tu generosidad <br>
                            <span class="text-brand-secondary">Transforma Vidas</span>
                        </h2>
                        
                        <blockquote class="border-l-4 border-brand-secondary pl-6 py-2 mb-8 bg-white/5 rounded-r-xl">
                            <p class="text-slate-300 italic text-lg font-serif">
                                "Cada uno debe dar según lo que haya decidido en su corazón, no de mala gana ni por obligación, porque Dios ama al que da con alegría."
                            </p>
                            <footer class="text-brand-secondary text-sm font-bold mt-2 uppercase tracking-widest">— 2 Corintios 9:7</footer>
                        </blockquote>

                        <div class="space-y-6">
                            <p class="text-white font-bold mb-2">Tus aportes hacen posible:</p>
                            
                            <div class="flex items-center gap-4 text-slate-300">
                                <div class="bg-brand-secondary/20 p-2 rounded-lg text-brand-secondary">
                                    <i data-lucide="baby" class="w-5 h-5"></i>
                                </div>
                                <div>
                                    <strong class="text-white block">Ministerio de Niños</strong>
                                    <span class="text-xs">Materiales y meriendas semanales</span>
                                </div>
                            </div>

                            <div class="flex items-center gap-4 text-slate-300">
                                <div class="bg-brand-secondary/20 p-2 rounded-lg text-brand-secondary">
                                    <i data-lucide="globe" class="w-5 h-5"></i>
                                </div>
                                <div>
                                    <strong class="text-white block">Misiones y Ayuda Social</strong>
                                    <span class="text-xs">Apoyo a comedores y obras misioneras</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-col gap-6" data-aos="fade-left">
                        
                        <div class="bg-gradient-to-br from-white to-slate-100 p-8 rounded-2xl shadow-2xl border border-white/20 relative overflow-hidden group">
                            <div class="absolute top-0 right-0 bg-green-500 text-white text-[10px] font-bold px-3 py-1 rounded-bl-xl uppercase tracking-wider">
                                Recomendado
                            </div>

                            <div class="flex items-start justify-between mb-6">
                                <div>
                                    <h3 class="font-black text-2xl text-brand-primary">Dar en Línea</h3>
                                    <p class="text-slate-500 text-sm">Seguro, rápido y sencillo.</p>
                                </div>
                                <div class="bg-blue-100 p-3 rounded-full text-blue-600">
                                    <i data-lucide="credit-card" class="w-6 h-6"></i>
                                </div>
                            </div>

                            <div class="flex gap-3 opacity-60 grayscale hover:grayscale-0 transition-all mb-6">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Mastercard_2019_logo.svg" alt="Mastercard" class="h-6">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" alt="Visa" class="h-6">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/PayPal.svg" alt="Paypal" class="h-6">
                            </div>

                            <button class="w-full py-4 bg-brand-primary text-white font-bold rounded-xl hover:bg-brand-secondary hover:text-brand-primary transition-all shadow-lg flex items-center justify-center gap-2 group-hover:scale-[1.02]">
                                DAR AHORA <i data-lucide="arrow-right" class="w-4 h-4"></i>
                            </button>
                            
                            <div class="mt-4 flex items-center justify-center gap-2 text-xs text-slate-400">
                                <i data-lucide="lock" class="w-3 h-3"></i> Transacción Encriptada SSL
                            </div>
                        </div>

                        <div class="bg-white/10 backdrop-blur-md p-6 rounded-2xl border border-white/10 hover:bg-white/15 transition">
                            <div class="flex items-center gap-4 mb-4">
                                <div class="bg-brand-secondary p-2 rounded-lg text-brand-primary">
                                    <i data-lucide="landmark" class="w-5 h-5"></i>
                                </div>
                                <h3 class="font-bold text-white text-lg">Transferencia Bancaria</h3>
                            </div>

                            <div class="bg-brand-primary/50 p-4 rounded-xl border border-white/10 flex flex-col sm:flex-row items-center justify-between gap-4 group">
                                <div>
                                    <p class="text-xs text-slate-400 uppercase tracking-widest mb-1">Cuenta Monetaria</p>
                                    <p class="text-white font-mono text-xl tracking-wider select-all" id="accountNumber">000-000000-0</p>
                                    <p class="text-xs text-brand-secondary mt-1">Banco [Nombre]</p>
                                </div>
                                <button onclick="copyToClipboard()" class="text-xs bg-white/10 hover:bg-white/20 text-white px-3 py-2 rounded-lg transition flex items-center gap-2">
                                    <i data-lucide="copy" class="w-3 h-3"></i> Copiar
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>


    </main>

   <footer id="mainFooter" class="bg-white pt-20 pb-10 border-t-4 border-brand-secondary transition-all duration-500 ease-in-out">
        <div class="max-w-7xl mx-auto px-6">
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
                
                <div class="space-y-6">
                    <a href="#" class="flex items-center gap-2 group">
                        <div class="bg-brand-primary text-white p-2 rounded-lg group-hover:bg-brand-secondary group-hover:text-brand-primary transition-colors">
                            <i data-lucide="church" class="w-6 h-6"></i>
                        </div>
                        <span class="font-black text-xl tracking-tighter text-brand-primary uppercase">
                            IGLESIA [NOMBRE]
                        </span>
                    </a>
                    <p class="text-slate-500 leading-relaxed text-sm">
                        Somos una comunidad apasionada por Jesús. Nuestra misión es amar a Dios, amar a las personas y servir al mundo.
                    </p>
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-brand-primary hover:text-white transition-all">
                            <i data-lucide="facebook" class="w-5 h-5"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-brand-primary hover:text-white transition-all">
                            <i data-lucide="instagram" class="w-5 h-5"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-brand-primary hover:text-white transition-all">
                            <i data-lucide="youtube" class="w-5 h-5"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h4 class="font-black text-brand-primary uppercase tracking-widest text-sm mb-6">Explorar</h4>
                    <ul class="space-y-4 text-sm text-slate-600">
                        <li><a href="#inicio" class="hover:text-brand-secondary transition-colors flex items-center gap-2"><i data-lucide="chevron-right" class="w-3 h-3"></i> Inicio</a></li>
                        <li><a href="#bienvenida" class="hover:text-brand-secondary transition-colors flex items-center gap-2"><i data-lucide="chevron-right" class="w-3 h-3"></i> Sobre Nosotros</a></li>
                        <li><a href="#actividades" class="hover:text-brand-secondary transition-colors flex items-center gap-2"><i data-lucide="chevron-right" class="w-3 h-3"></i> Ministerios</a></li>
                        <li><a href="#predicaciones" class="hover:text-brand-secondary transition-colors flex items-center gap-2"><i data-lucide="chevron-right" class="w-3 h-3"></i> Mensajes</a></li>
                        <li><a href="#ofrendas" class="hover:text-brand-secondary transition-colors flex items-center gap-2"><i data-lucide="chevron-right" class="w-3 h-3"></i> Donaciones</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="font-black text-brand-primary uppercase tracking-widest text-sm mb-6">Contacto</h4>
                    <ul class="space-y-4 text-sm text-slate-600">
                        <li class="flex items-start gap-3">
                            <i data-lucide="map-pin" class="w-5 h-5 text-brand-secondary shrink-0 mt-0.5"></i>
                            <span>Av. Principal #123, Colonia La Fe, Tu Ciudad.</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i data-lucide="phone" class="w-5 h-5 text-brand-secondary shrink-0"></i>
                            <span>(555) 123-4567</span>
                        </li>
                        <li class="flex items-center gap-3">
                            <i data-lucide="mail" class="w-5 h-5 text-brand-secondary shrink-0"></i>
                            <span>contacto@iglesia.com</span>
                        </li>
                    </ul>
                </div>

                <div class="bg-brand-light p-6 rounded-2xl border border-slate-200">
                    <h4 class="font-black text-brand-primary uppercase tracking-widest text-sm mb-4 flex items-center gap-2">
                        <i data-lucide="clock" class="w-4 h-4"></i> Te Esperamos
                    </h4>
                    <div class="space-y-3">
                        <div class="flex justify-between text-sm border-b border-slate-200 pb-2">
                            <span class="text-slate-600">Domingo</span>
                            <span class="font-bold text-brand-primary">10:00 AM</span>
                        </div>
                        <div class="flex justify-between text-sm border-b border-slate-200 pb-2">
                            <span class="text-slate-600">Miércoles</span>
                            <span class="font-bold text-brand-primary">7:00 PM</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-slate-600">Viernes</span>
                            <span class="font-bold text-brand-primary">7:30 PM</span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="border-t border-slate-100 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <div class="text-xs text-slate-400">
                    © 2024 Iglesia [Nombre]. Todos los derechos reservados.
                </div>
                <div class="flex gap-6 text-xs font-bold text-slate-400 uppercase tracking-wider">
                    <a href="#" class="hover:text-brand-primary">Privacidad</a>
                    <a href="#" class="hover:text-brand-primary">Términos</a>
                </div>
            </div>
        </div>
    </footer>

    <div id="audioPlayerBar" class="fixed bottom-0 left-0 w-full bg-brand-primary text-white border-t border-white/10 transform translate-y-full transition-transform duration-500 z-[100] shadow-[0_-10px_40px_rgba(0,0,0,0.5)]">
        <div class="max-w-7xl mx-auto px-4 py-3 flex flex-col md:flex-row items-center justify-between gap-4">
            
            <div class="flex items-center gap-4 w-full md:w-1/4">
                <div class="w-12 h-12 bg-brand-secondary rounded-lg flex items-center justify-center flex-shrink-0 animate-pulse">
                    <i data-lucide="music" class="text-brand-primary w-6 h-6"></i>
                </div>
                <div class="overflow-hidden">
                    <h4 id="playerTitle" class="font-bold text-sm truncate text-brand-secondary">Selecciona un mensaje</h4>
                    <p id="playerSpeaker" class="text-xs text-slate-400 truncate">...</p>
                </div>
            </div>

            <div class="flex flex-col items-center w-full md:w-2/4">
                <div class="flex items-center gap-6 mb-1">
                    <button onclick="seekAudio(-10)" class="text-slate-400 hover:text-white transition" title="-10s"><i data-lucide="rotate-ccw" class="w-5 h-5"></i></button>
                    
                    <button id="playPauseBtn" onclick="togglePlay()" class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-brand-primary hover:scale-105 transition shadow-lg shadow-white/20">
                        <i data-lucide="play" class="w-5 h-5 fill-current ml-1"></i>
                    </button>
                    
                    <button onclick="seekAudio(10)" class="text-slate-400 hover:text-white transition" title="+10s"><i data-lucide="rotate-cw" class="w-5 h-5"></i></button>
                </div>
                
                <div class="w-full flex items-center gap-3 text-xs font-mono text-slate-400">
                    <span id="currentTime">0:00</span>
                    <input type="range" id="progressBar" value="0" max="100" class="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer hover:h-1.5 transition-all">
                    <span id="durationTime">0:00</span>
                </div>
            </div>

            <div class="hidden md:flex items-center justify-end gap-3 w-1/4">
                <button onclick="toggleMute()" id="volIcon"><i data-lucide="volume-2" class="w-5 h-5 text-slate-400 hover:text-white"></i></button>
                <input type="range" id="volumeBar" value="100" max="100" class="w-24 h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer">
                
                <button onclick="closePlayer()" class="ml-4 text-slate-500 hover:text-red-400"><i data-lucide="x" class="w-5 h-5"></i></button>
            </div>
        </div>
        
        <audio id="mainAudio"></audio>
    </div>

        <script>
            function copyToClipboard() {
                const number = document.getElementById('accountNumber').innerText;
                navigator.clipboard.writeText(number).then(() => {
                    alert("¡Número de cuenta copiado!");
                });
            }
        </script>
        
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        // INICIALIZAR ICONOS
        // Esto buscará todas las etiquetas <i data-lucide="..."> y las transformará en SVGs
        lucide.createIcons();

        AOS.init({
            duration: 800,
            once: true
        });

        const audio = document.getElementById('mainAudio');
        const playerBar = document.getElementById('audioPlayerBar');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const progressBar = document.getElementById('progressBar');
        const volumeBar = document.getElementById('volumeBar');
        const currentTimeEl = document.getElementById('currentTime');
        const durationTimeEl = document.getElementById('durationTime');
        const titleEl = document.getElementById('playerTitle');
        const speakerEl = document.getElementById('playerSpeaker');
        const footerEl = document.getElementById('mainFooter');

        function loadTrack(url, title, speaker) {
            audio.src = url;
            titleEl.textContent = title;
            speakerEl.textContent = speaker;
            
            playerBar.classList.remove('translate-y-full');
            footerEl.classList.add('pb-32'); 
            
            audio.play();
            updatePlayIcon(true);
        }

        function closePlayer() {
            audio.pause();
            playerBar.classList.add('translate-y-full');
            footerEl.classList.remove('pb-32');
        }

        function togglePlay() {
            if (audio.paused) {
                audio.play();
                updatePlayIcon(true);
            } else {
                audio.pause();
                updatePlayIcon(false);
            }
        }

        function updatePlayIcon(isPlaying) {
            if (isPlaying) {
                playPauseBtn.innerHTML = '<i data-lucide="pause" class="w-5 h-5 fill-current"></i>';
            } else {
                playPauseBtn.innerHTML = '<i data-lucide="play" class="w-5 h-5 fill-current ml-1"></i>';
            }
            // IMPORTANTE: Volver a crear iconos después de cambiar el HTML interno
            lucide.createIcons();
        }

        audio.addEventListener('timeupdate', () => {
            const percent = (audio.currentTime / audio.duration) * 100;
            progressBar.value = percent || 0;
            currentTimeEl.textContent = formatTime(audio.currentTime);
            durationTimeEl.textContent = formatTime(audio.duration);
        });

        progressBar.addEventListener('input', () => {
            const seekTime = (progressBar.value / 100) * audio.duration;
            audio.currentTime = seekTime;
        });

        volumeBar.addEventListener('input', (e) => { audio.volume = e.target.value / 100; });

        function seekAudio(seconds) { audio.currentTime += seconds; }

        function formatTime(seconds) {
            if(isNaN(seconds)) return "0:00";
            const min = Math.floor(seconds / 60);
            const sec = Math.floor(seconds % 60);
            return `${min}:${sec < 10 ? '0' + sec : sec}`;
        }

        // MENÚ MÓVIL
        const mobileBtn = document.getElementById('mobileMenuBtn');
        const closeBtn = document.getElementById('closeMobileMenuBtn');
        const menu = document.getElementById('mobileMenu');
        const menuLinks = document.querySelectorAll('.mobile-link');

        const toggleMenu = () => menu.classList.toggle('translate-x-full');
        
        mobileBtn.addEventListener('click', toggleMenu);
        closeBtn.addEventListener('click', toggleMenu);
        
        menuLinks.forEach(link => {
            link.addEventListener('click', toggleMenu);
        });
    </script>

</body>
</html>