Prueba

<!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>Dängo Cervecería | Cooperativa Cervecera</title>
    
    <!-- Google Fonts -->
    <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=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
    
    <!-- FontAwesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Leaflet CSS for Map -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        amber: {
                            400: '#fbbf24',
                            500: '#d97706',
                            600: '#b45309',
                        },
                        dark: {
                            800: '#1f2937',
                            900: '#111827',
                            950: '#030712',
                        },
                        forest: {
                            800: '#166534',
                            900: '#14532d',
                        }
                    },
                    fontFamily: {
                        sans: ['Montserrat', 'sans-serif'],
                        serif: ['Playfair Display', 'serif'],
                    }
                }
            }
        }
    </script>

    <style>
        /* Custom Styles & Animations */
        body {
            background-color: #030712;
            color: #f3f4f6;
        }
        
        .glass-nav {
            background: rgba(3, 7, 18, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(217, 119, 6, 0.2);
        }

        .hero-bg {
            background-image: url('https://placehold.co/1920x1080/111827/d97706?text=Foto+Cerveza+Sirviendose');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        /* Hide scrollbar for clean look in galleries if needed */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .beer-card:hover .beer-img {
            transform: scale(1.05);
        }
    </style>
</head>
<body class="font-sans antialiased overflow-x-hidden">

    <!-- Age Gate Modal -->
    <div id="age-gate" class="fixed inset-0 bg-dark-950/95 z-[100] flex items-center justify-center px-4 transition-opacity duration-500">
        <div class="bg-dark-900 border border-amber-500/30 p-8 rounded-2xl shadow-2xl shadow-amber-500/10 max-w-md w-full text-center">
            <i class="fa-solid fa-beer-mug-empty text-5xl text-amber-500 mb-6"></i>
            <h2 class="font-serif text-3xl font-bold text-white mb-4">¿Eres mayor de edad?</h2>
            <p class="text-gray-400 mb-8">Debes tener 18 años o más para ingresar a este sitio web.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button onclick="acceptAge()" class="bg-amber-600 hover:bg-amber-500 text-white font-semibold py-3 px-6 rounded-full transition duration-300">
                    Sí, tengo más de 18
                </button>
                <button onclick="rejectAge()" class="bg-dark-800 hover:bg-dark-800/70 border border-gray-600 text-gray-300 font-semibold py-3 px-6 rounded-full transition duration-300">
                    No, soy menor
                </button>
            </div>
            <p id="age-error" class="text-red-400 mt-4 text-sm hidden">Lo sentimos, no puedes acceder a este sitio.</p>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="fixed w-full z-50 glass-nav transition-all duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-20">
                <!-- Logo -->
                <div class="flex-shrink-0 flex items-center">
                    <a href="#" class="font-serif text-2xl font-bold text-white tracking-wider flex items-center gap-2">
                        <span class="text-amber-500">DÄNGO</span> <span class="text-sm font-sans font-light tracking-widest hidden sm:block pt-1">CERVECERÍA</span>
                    </a>
                </div>
                
                <!-- Desktop Menu -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#cooperativa" class="text-gray-300 hover:text-amber-400 transition-colors">La Cooperativa</a>
                    <a href="#estilos" class="text-gray-300 hover:text-amber-400 transition-colors">Nuestros Estilos</a>
                    <a href="#servicios" class="text-gray-300 hover:text-amber-400 transition-colors">Barriles y Cursos</a>
                    <a href="#puntos-venta" class="text-gray-300 hover:text-amber-400 transition-colors">Puntos de Venta</a>
                    <a href="#contacto" class="text-gray-300 hover:text-amber-400 transition-colors">Contacto</a>
                </div>

                <!-- Mobile Menu Button -->
                <div class="md:hidden flex items-center">
                    <button id="mobile-menu-btn" class="text-gray-300 hover:text-white focus:outline-none">
                        <i class="fa-solid fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Mobile Menu (Hidden by default) -->
        <div id="mobile-menu" class="hidden md:hidden bg-dark-900 border-t border-gray-800">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#cooperativa" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-amber-400 hover:bg-dark-800 rounded-md">La Cooperativa</a>
                <a href="#estilos" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-amber-400 hover:bg-dark-800 rounded-md">Nuestros Estilos</a>
                <a href="#servicios" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-amber-400 hover:bg-dark-800 rounded-md">Barriles y Cursos</a>
                <a href="#puntos-venta" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-amber-400 hover:bg-dark-800 rounded-md">Puntos de Venta</a>
                <a href="#contacto" class="block px-3 py-2 text-base font-medium text-gray-300 hover:text-amber-400 hover:bg-dark-800 rounded-md">Contacto</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="relative h-screen flex items-center justify-center hero-bg">
        <div class="absolute inset-0 bg-gradient-to-b from-dark-950/80 via-dark-950/60 to-dark-950"></div>
        
        <div class="relative z-10 text-center px-4 max-w-4xl mx-auto mt-16">
            <span class="block text-amber-500 font-semibold tracking-widest uppercase text-sm mb-4">Cooperativa Procesos Artesanales Vivos</span>
            <h1 class="font-serif text-5xl sm:text-6xl md:text-7xl font-bold text-white mb-6 leading-tight">
                Arte, Ciencia y Naturaleza <br><span class="italic text-amber-400">en cada gota.</span>
            </h1>
            <p class="mt-4 text-lg sm:text-xl text-gray-300 mb-10 max-w-2xl mx-auto font-light">
                Una aventura colectiva sobre la teoría y el arte de convertir el agua, maltas, lúpulo y levadura en una experiencia inolvidable.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="#estilos" class="bg-amber-600 hover:bg-amber-500 text-white font-semibold py-4 px-8 rounded-full transition duration-300 shadow-lg shadow-amber-600/30">
                    Ver Nuestros Estilos
                </a>
                <a href="#servicios" class="bg-transparent border border-white hover:border-amber-500 hover:text-amber-500 text-white font-semibold py-4 px-8 rounded-full transition duration-300">
                    Pide tu Barril
                </a>
            </div>
        </div>
    </section>

    <!-- La Cooperativa Section -->
    <section id="cooperativa" class="py-24 bg-dark-950">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <!-- Imagen -->
                <div class="relative rounded-2xl overflow-hidden shadow-2xl shadow-forest-900/20 group">
                    <img src="https://placehold.co/800x1000/14532d/fbbf24?text=El+Equipo+Dango+Trabajando" alt="Equipo Cooperativa" class="w-full h-auto object-cover transform transition duration-700 group-hover:scale-105">
                    <div class="absolute inset-0 border-4 border-amber-500/20 rounded-2xl z-10 pointer-events-none"></div>
                </div>
                
                <!-- Texto -->
                <div>
                    <h2 class="font-serif text-4xl font-bold text-white mb-6">Nuestra Historia</h2>
                    <div class="w-20 h-1 bg-amber-500 mb-8"></div>
                    <p class="text-gray-300 mb-6 leading-relaxed">
                        La Cerveza Dängo es producida por la <strong class="text-white">Cooperativa Procesos Artesanales Vivos</strong> de la Ciudad de México. Nos constituimos en 2015 con el objetivo de materializar nuestro talento y gusto por la cocina, la ciencia y el aprovechamiento sostenible de los recursos naturales.
                    </p>
                    <p class="text-gray-300 mb-8 leading-relaxed">
                        Creemos en el comercio justo, la calidad de los ingredientes y el trabajo en equipo. Cada estilo de cerveza que producimos refleja nuestra pasión por la alquimia cervecera.
                    </p>
                    <ul class="space-y-4">
                        <li class="flex items-center text-gray-200">
                            <i class="fa-solid fa-leaf text-forest-500 text-amber-500 mr-4 text-xl"></i>
                            Procesos Sostenibles
                        </li>
                        <li class="flex items-center text-gray-200">
                            <i class="fa-solid fa-flask text-amber-500 mr-4 text-xl"></i>
                            Ciencia Aplicada
                        </li>
                        <li class="flex items-center text-gray-200">
                            <i class="fa-solid fa-people-group text-amber-500 mr-4 text-xl"></i>
                            Trabajo Cooperativo
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Nuestros Estilos Section -->
    <section id="estilos" class="py-24 bg-dark-900 relative">
        <!-- Decoración de fondo -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none opacity-5">
            <i class="fa-solid fa-wheat-awn absolute top-10 left-10 text-9xl"></i>
            <i class="fa-solid fa-beer-mug-empty absolute bottom-10 right-10 text-9xl"></i>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="text-center mb-16">
                <h2 class="font-serif text-4xl font-bold text-white mb-4">Nuestros Estilos</h2>
                <div class="w-20 h-1 bg-amber-500 mx-auto mb-6"></div>
                <p class="text-gray-400 max-w-2xl mx-auto">Conoce nuestra variedad de cervezas, diseñadas con precisión científica y elaboradas con pasión artesanal.</p>
            </div>

            <!-- Grid de Estilos -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Estilo 1 -->
                <div class="beer-card bg-dark-950 rounded-2xl overflow-hidden border border-gray-800 transition duration-300 hover:border-amber-500/50">
                    <div class="h-64 overflow-hidden relative">
                        <img src="https://placehold.co/400x300/111827/fbbf24?text=Blonde+Ale" alt="Blonde Ale" class="beer-img w-full h-full object-cover transition-transform duration-500">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark-950 to-transparent"></div>
                    </div>
                    <div class="p-6 relative">
                        <h3 class="font-serif text-2xl font-bold text-amber-400 mb-2">Blonde Ale</h3>
                        <p class="text-gray-400 text-sm mb-4">Ligera, refrescante y con un sutil toque maltoso. Ideal para cualquier ocasión.</p>
                    </div>
                </div>

                <!-- Estilo 2 -->
                <div class="beer-card bg-dark-950 rounded-2xl overflow-hidden border border-gray-800 transition duration-300 hover:border-amber-500/50">
                    <div class="h-64 overflow-hidden relative">
                        <img src="https://placehold.co/400x300/111827/fbbf24?text=Tropical+Stout" alt="Tropical Stout" class="beer-img w-full h-full object-cover transition-transform duration-500">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark-950 to-transparent"></div>
                    </div>
                    <div class="p-6 relative">
                        <h3 class="font-serif text-2xl font-bold text-amber-400 mb-2">Tropical Stout</h3>
                        <p class="text-gray-400 text-sm mb-4">Oscura, robusta, con notas a café, chocolate y un final ligeramente dulce y frutal.</p>
                    </div>
                </div>

                <!-- Estilo 3 -->
                <div class="beer-card bg-dark-950 rounded-2xl overflow-hidden border border-gray-800 transition duration-300 hover:border-amber-500/50">
                    <div class="h-64 overflow-hidden relative">
                        <img src="https://placehold.co/400x300/111827/fbbf24?text=India+Pale+Ale" alt="India Pale Ale" class="beer-img w-full h-full object-cover transition-transform duration-500">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark-950 to-transparent"></div>
                    </div>
                    <div class="p-6 relative">
                        <h3 class="font-serif text-2xl font-bold text-amber-400 mb-2">India Pale Ale (IPA)</h3>
                        <p class="text-gray-400 text-sm mb-4">Amargor pronunciado, aromas cítricos y florales cortesía de nuestra selección de lúpulos.</p>
                    </div>
                </div>
                
                <!-- Otros Estilos (Lista rápida) -->
                <div class="col-span-1 sm:col-span-2 lg:col-span-3 bg-dark-800/30 rounded-2xl p-8 border border-gray-800 mt-4 text-center">
                    <h4 class="font-serif text-xl text-white mb-4">También disfruta de nuestras otras creaciones:</h4>
                    <div class="flex flex-wrap justify-center gap-3">
                        <span class="px-4 py-2 bg-dark-950 text-gray-300 rounded-full text-sm border border-gray-700">Kolch</span>
                        <span class="px-4 py-2 bg-dark-950 text-gray-300 rounded-full text-sm border border-gray-700">Ginger Ale</span>
                        <span class="px-4 py-2 bg-dark-950 text-gray-300 rounded-full text-sm border border-gray-700">Cream Ale</span>
                        <span class="px-4 py-2 bg-dark-950 text-gray-300 rounded-full text-sm border border-gray-700">White IPA</span>
                        <span class="px-4 py-2 bg-dark-950 text-gray-300 rounded-full text-sm border border-gray-700">Red Ale</span>
                        <span class="px-4 py-2 bg-dark-950 text-gray-300 rounded-full text-sm border border-gray-700">Gren IPA</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Barriles y Cursos Section -->
    <section id="servicios" class="py-24 bg-dark-950">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            <div class="text-center mb-16">
                <h2 class="font-serif text-4xl font-bold text-white mb-4">Servicios Dängo</h2>
                <div class="w-20 h-1 bg-amber-500 mx-auto mb-6"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                
                <!-- Tarjeta Barriles -->
                <div class="bg-gradient-to-br from-dark-900 to-dark-950 rounded-3xl p-8 border border-amber-500/20 shadow-2xl relative overflow-hidden group">
                    <div class="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
                        <i class="fa-solid fa-beer-mug-empty text-8xl text-amber-500"></i>
                    </div>
                    <div class="relative z-10">
                        <h3 class="font-serif text-3xl font-bold text-white mb-2">Cerveza de Barril</h3>
                        <p class="text-amber-400 font-semibold mb-6">Para tus reuniones, fiestas y eventos.</p>
                        
                        <p class="text-gray-300 mb-6">Venta de cerveza de todos nuestros estilos. Llámanos y te la llevamos directamente a tu evento.</p>
                        
                        <div class="bg-dark-950 rounded-xl p-4 mb-6 border border-gray-800">
                            <h4 class="text-white font-semibold mb-2">Capacidades disponibles:</h4>
                            <div class="flex gap-2 mb-4">
                                <span class="bg-gray-800 text-xs px-3 py-1 rounded-md text-gray-300">10 Litros</span>
                                <span class="bg-gray-800 text-xs px-3 py-1 rounded-md text-gray-300">20 Litros</span>
                                <span class="bg-gray-800 text-xs px-3 py-1 rounded-md text-gray-300">30 Litros</span>
                                <span class="bg-gray-800 text-xs px-3 py-1 rounded-md text-gray-300">60 Litros</span>
                            </div>
                            <div class="text-3xl font-bold text-white">
                                $80 <span class="text-lg font-normal text-gray-400">/ Litro</span>
                            </div>
                        </div>
                        
                        <a href="https://wa.me/525515032863" target="_blank" class="inline-block w-full text-center bg-amber-600 hover:bg-amber-500 text-white font-semibold py-3 px-6 rounded-xl transition duration-300">
                            Cotizar Barril por WhatsApp
                        </a>
                    </div>
                </div>

                <!-- Tarjeta Cursos -->
                <div class="bg-gradient-to-br from-forest-900/40 to-dark-950 rounded-3xl p-8 border border-forest-800/50 shadow-2xl relative overflow-hidden group">
                    <div class="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
                        <i class="fa-solid fa-graduation-cap text-8xl text-forest-500"></i>
                    </div>
                    <div class="relative z-10">
                        <h3 class="font-serif text-3xl font-bold text-white mb-2">Cursos de Elaboración</h3>
                        <p class="text-forest-400 font-semibold mb-6">Aprende a hacer cerveza casera.</p>
                        
                        <p class="text-gray-300 mb-6">Curso diseñado para el fácil aprendizaje del proceso productivo. Te enseñamos paso a paso a producir cerveza en tu propia casa.</p>
                        
                        <div class="bg-dark-950 rounded-xl p-4 mb-6 border border-gray-800">
                            <ul class="text-sm text-gray-300 space-y-2 mb-4">
                                <li><i class="fa-solid fa-check text-amber-500 mr-2"></i> Grupos de más de 5 personas por sesión.</li>
                                <li><i class="fa-solid fa-check text-amber-500 mr-2"></i> Incluye todos los materiales necesarios.</li>
                                <li><i class="fa-solid fa-check text-amber-500 mr-2"></i> <strong>2 Cervezas Dängo de regalo.</strong></li>
                            </ul>
                            <div class="text-3xl font-bold text-white">
                                $1,250 <span class="text-lg font-normal text-gray-400">/ Persona</span>
                            </div>
                        </div>
                        
                        <a href="https://wa.me/525515032863" target="_blank" class="inline-block w-full text-center bg-forest-800 hover:bg-forest-700 text-white font-semibold py-3 px-6 rounded-xl transition duration-300">
                            Inscribirme al Próximo Curso
                        </a>
                    </div>
                </div>

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

    <!-- Puntos de Venta (Mapa) Section -->
    <section id="puntos-venta" class="py-24 bg-dark-900 border-t border-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="font-serif text-4xl font-bold text-white mb-4">¿Dónde Encontrarnos?</h2>
                <div class="w-20 h-1 bg-amber-500 mx-auto mb-6"></div>
                <p class="text-gray-400 max-w-2xl mx-auto">Encuentra tu Cerveza Dängo más cercana. Busca por nombre del bar, colonia o alcaldía.</p>
            </div>

            <!-- Buscador -->
            <div class="max-w-3xl mx-auto mb-8 relative">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <i class="fa-solid fa-location-dot text-amber-500"></i>
                </div>
                <input type="text" id="buscador-mapa" class="w-full bg-dark-950 text-white rounded-full py-4 pl-12 pr-4 border border-gray-700 focus:border-amber-500 focus:ring-2 focus:ring-amber-500/50 outline-none transition-all" placeholder="Ej. Roma Norte, Cuauhtémoc, El Depósito...">
            </div>

            <!-- Contenedor del Mapa -->
            <!-- z-10 asegura que no se superponga al menú superior (z-50) -->
            <div id="map" class="w-full h-[500px] md:h-[600px] rounded-2xl border border-gray-700 shadow-2xl z-10 relative"></div>
        </div>
    </section>

    <!-- Footer -->
    <footer id="contacto" class="bg-dark-900 border-t border-gray-800 pt-16 pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
                
                <!-- Brand -->
                <div>
                    <a href="#" class="font-serif text-3xl font-bold text-white tracking-wider flex items-center gap-2 mb-6">
                        <span class="text-amber-500">DÄNGO</span>
                    </a>
                    <p class="text-gray-400 text-sm mb-6 leading-relaxed">
                        Cooperativa Procesos Artesanales Vivos.<br>
                        Arte, Ciencia y Naturaleza en cada gota.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-dark-800 flex items-center justify-center text-gray-400 hover:bg-amber-600 hover:text-white transition-colors">
                            <i class="fa-brands fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark-800 flex items-center justify-center text-gray-400 hover:bg-amber-600 hover:text-white transition-colors">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                    </div>
                </div>

                <!-- Contacto -->
                <div>
                    <h4 class="font-serif text-xl font-semibold text-white mb-6">Contacto</h4>
                    <ul class="space-y-4">
                        <li class="flex items-start text-gray-400 text-sm">
                            <i class="fa-solid fa-phone mt-1 mr-3 text-amber-500"></i>
                            <div>
                                <p>(01 55) 5554 2015</p>
                                <p>(01 55) 1503 2863</p>
                            </div>
                        </li>
                        <li class="flex items-center text-gray-400 text-sm">
                            <i class="fa-solid fa-envelope mr-3 text-amber-500"></i>
                            <a href="mailto:[email protected]" class="hover:text-amber-400">[email protected]</a>
                        </li>
                        <li class="flex items-center text-gray-400 text-sm">
                            <i class="fa-solid fa-location-dot mr-3 text-amber-500"></i>
                            <span>Ciudad de México, México.</span>
                        </li>
                    </ul>
                </div>

                <!-- Enlaces Rápidos -->
                <div>
                    <h4 class="font-serif text-xl font-semibold text-white mb-6">Enlaces</h4>
                    <ul class="space-y-2">
                        <li><a href="#cooperativa" class="text-gray-400 text-sm hover:text-amber-400 transition-colors">La Cooperativa</a></li>
                        <li><a href="#estilos" class="text-gray-400 text-sm hover:text-amber-400 transition-colors">Nuestros Estilos</a></li>
                        <li><a href="#servicios" class="text-gray-400 text-sm hover:text-amber-400 transition-colors">Cerveza de Barril</a></li>
                        <li><a href="#servicios" class="text-gray-400 text-sm hover:text-amber-400 transition-colors">Cursos</a></li>
                        <li><a href="#puntos-venta" class="text-gray-400 text-sm hover:text-amber-400 transition-colors">Puntos de Venta</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 text-sm text-center md:text-left mb-4 md:mb-0">
                    &copy; 2026 Dängo Cervecería. Todos los derechos reservados.
                </p>
                <p class="text-gray-500 text-sm">
                    Bebe con moderación. Prohibida su venta a menores.
                </p>
            </div>
        </div>
    </footer>

    <!-- Floating WhatsApp Button -->
    <a href="https://wa.me/525515032863" target="_blank" class="fixed bottom-6 right-6 w-14 h-14 bg-green-500 text-white rounded-full flex items-center justify-center text-3xl shadow-lg shadow-green-500/30 hover:bg-green-400 hover:scale-110 transition-transform duration-300 z-50">
        <i class="fa-brands fa-whatsapp"></i>
    </a>

    <!-- Leaflet JS for Map -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    
    <!-- PapaParse JS para leer CSV de forma segura -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>

    <!-- Scripts -->
    <script>
        // Mobile Menu Toggle
        const btn = document.getElementById('mobile-menu-btn');
        const menu = document.getElementById('mobile-menu');

        btn.addEventListener('click', () => {
            menu.classList.toggle('hidden');
        });

        // Close mobile menu when clicking a link
        document.querySelectorAll('#mobile-menu a').forEach(link => {
            link.addEventListener('click', () => {
                menu.classList.add('hidden');
            });
        });

        // Navbar Background change on scroll
        window.addEventListener('scroll', () => {
            const nav = document.querySelector('nav');
            if (window.scrollY > 50) {
                nav.classList.add('shadow-md');
                nav.classList.replace('bg-transparent', 'glass-nav');
            } else {
                nav.classList.remove('shadow-md');
                // Mantener el glass effect pero más sutil arriba
            }
        });

        // Age Gate Logic
        function checkAge() {
            // Check if user has already verified age in this session
            const ageVerified = sessionStorage.getItem('dangoAgeVerified');
            if (ageVerified === 'true') {
                document.getElementById('age-gate').style.display = 'none';
            }
        }

        function acceptAge() {
            sessionStorage.setItem('dangoAgeVerified', 'true');
            const ageGate = document.getElementById('age-gate');
            ageGate.classList.add('opacity-0');
            setTimeout(() => {
                ageGate.style.display = 'none';
                document.body.classList.remove('overflow-hidden');
            }, 500);
        }

        function rejectAge() {
            const errorMsg = document.getElementById('age-error');
            errorMsg.classList.remove('hidden');
        }

        // Initialize
        window.onload = () => {
            // Prevent scrolling while age gate is open
            if (!sessionStorage.getItem('dangoAgeVerified')) {
                document.body.classList.add('overflow-hidden');
            }
            checkAge();
        }

        // ==========================================
        // LÓGICA DEL MAPA (Leaflet.js)
        // ==========================================
        
        let puntosDeVenta = [];

        // Inicializar el mapa centrado en CDMX
        const map = L.map('map').setView([19.4326, -99.1332], 12);

        // Añadir capa de Esri (Estilo Dark Gray, NO requiere API Key)
        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
            maxZoom: 16
        }).addTo(map);

        // Crear un icono personalizado (Color Ambar)
        const dangoIcon = L.divIcon({
            html: '<i class="fa-solid fa-beer-mug-empty text-3xl" style="color: #fbbf24; filter: drop-shadow(0px 0px 5px rgba(217, 119, 6, 0.8));"></i>',
            iconSize: [30, 30],
            iconAnchor: [15, 30],
            popupAnchor: [0, -30],
            className: 'custom-leaflet-icon'
        });

        // Grupo de marcadores para poder borrarlos al buscar
        let markerGroup = L.featureGroup().addTo(map);

        // Función para renderizar los pines
        function renderMarkers(data) {
            markerGroup.clearLayers(); // Limpiar pines anteriores
            
            data.forEach(punto => {
                // Verificar que las coordenadas existan y sean válidas
                if(isNaN(punto.lat) || isNaN(punto.lng)) return;

                const marker = L.marker([punto.lat, punto.lng], {icon: dangoIcon});
                
                // Construir el Tooltip (Popup) usando las columnas
                let popupContent = `
                    <div class="text-center" style="color: #1f2937; font-family: 'Montserrat', sans-serif;">
                        <h3 class="font-bold text-lg text-amber-600 mb-1" style="font-family: 'Playfair Display', serif;">${punto.nombre || 'Punto de Venta'}</h3>
                        <p class="text-sm text-gray-700 mb-1">${punto.direccion || ''}</p>
                        <p class="text-xs text-gray-500 mb-2">${punto.colonia || ''}, ${punto.alcaldia || ''}</p>
                `;
                
                if (punto.website && punto.website.trim() !== '') {
                    popupContent += `<a href="${punto.website}" target="_blank" class="inline-block bg-dark-900 text-white text-xs px-3 py-1 rounded-full mt-2 no-underline hover:bg-amber-600 transition-colors">Visitar Web</a>`;
                }
                
                popupContent += `</div>`;
                
                marker.bindPopup(popupContent);
                markerGroup.addLayer(marker);
            });

            // Ajustar el zoom para que se vean todos los pines (si hay resultados)
            if (data.length > 0 && markerGroup.getLayers().length > 0) {
                map.fitBounds(markerGroup.getBounds(), { padding: [50, 50], maxZoom: 15 });
            }
        }

        // Función para leer el archivo CSV usando PapaParse
        function cargarDatosCSV() {
            // URL completa y absoluta para que funcione en cualquier entorno
            const urlCSV = 'https://cervezadango.mx/wp-content/uploads/2026/10/Donde-estamos-28-oct.csv'; 
            
            Papa.parse(urlCSV, {
                download: true,
                header: true, // Usa la primera fila como nombres de columna
                skipEmptyLines: true,
                // Esta función "limpia" los encabezados: quita acentos, mayúsculas y espacios invisibles (BOM)
                transformHeader: function(header) {
                    return header.trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); 
                },
                complete: function(results) {
                    const data = results.data;
                    
                    // Ahora sabemos con seguridad que los encabezados son limpios: nombre, direccion, colonia, ciudad, lat, lng
                    puntosDeVenta = data.map(row => {
                        return {
                            nombre: row.nombre || 'Punto de Venta',
                            direccion: row.direccion || '', 
                            colonia: row.colonia || '',
                            alcaldia: row.ciudad || '', // Tu archivo dice "ciudad"
                            lat: parseFloat(row.lat),
                            lng: parseFloat(row.lng),
                            website: row.website || ''
                        };
                    }).filter(punto => !isNaN(punto.lat) && !isNaN(punto.lng)); // Ignorar filas sin coordenadas
                    
                    renderMarkers(puntosDeVenta);
                },
                error: function(err) {
                    console.error("Error al leer el CSV: ", err);
                }
            });
        }

        // Ejecutar carga de datos
        cargarDatosCSV();

        // Lógica de búsqueda
        const searchInput = document.getElementById('buscador-mapa');
        
        searchInput.addEventListener('input', (e) => {
            const term = e.target.value.toLowerCase().trim();
            
            const filteredData = puntosDeVenta.filter(punto => {
                const searchStr = `${punto.nombre || ''} ${punto.colonia || ''} ${punto.alcaldia || ''} ${punto.ciudad || ''}`.toLowerCase();
                return searchStr.includes(term);
            });
            
            renderMarkers(filteredData);
        });

        // Corregir tamaño del mapa si inicia en display:none (por si acaso)
        setTimeout(() => { map.invalidateSize(); }, 500);

    </script>
</body>
</html>