<!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">
© 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 © Esri — 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>