<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SDV – Secretos de Viajero | Puerto Rico</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--pr-green: #006847;
--pr-red: #EF3340;
--pr-gold: #F5A623;
--pr-blue: #002868;
--pr-light: #F5F0E8;
--pr-dark: #1a1a2e;
--pr-sand: #FDF6EC;
--pr-teal: #00A89C;
--text-main: #1a1a2e;
--text-muted: #5a5a7a;
--card-bg: #ffffff;
--shadow: 0 4px 24px rgba(0,40,104,0.10);
--radius: 16px;
--radius-sm: 8px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Outfit', sans-serif;
background: var(--pr-sand);
color: var(--text-main);
min-height: 100vh;
overflow-x: hidden;
}
/* ===== HEADER ===== */
.sdv-header {
background: linear-gradient(135deg, var(--pr-blue) 0%, #003580 50%, var(--pr-green) 100%);
padding: 0;
position: relative;
overflow: hidden;
}
.sdv-header::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 300px; height: 300px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
}
.sdv-header::after {
content: '';
position: absolute;
bottom: -40px; left: -40px;
width: 200px; height: 200px;
border-radius: 50%;
background: rgba(245,166,35,0.10);
}
.header-inner {
position: relative; z-index: 2;
max-width: 1100px;
margin: 0 auto;
padding: 32px 24px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.sdv-logo {
display: flex;
align-items: center;
gap: 14px;
}
.sdv-emblem {
width: 64px; height: 64px;
background: var(--pr-gold);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 22px;
color: var(--pr-blue);
letter-spacing: -1px;
box-shadow: 0 0 0 4px rgba(255,255,255,0.15);
}
.sdv-title-block h1 {
font-family: 'Playfair Display', serif;
font-size: 28px;
font-weight: 900;
color: #fff;
line-height: 1.1;
letter-spacing: -0.5px;
}
.sdv-title-block p {
font-size: 13px;
color: rgba(255,255,255,0.65);
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 4px;
}
.lang-toggle {
display: flex;
gap: 8px;
background: rgba(255,255,255,0.10);
border-radius: 40px;
padding: 4px;
}
.lang-btn {
padding: 8px 20px;
border-radius: 36px;
border: none;
cursor: pointer;
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 14px;
transition: all 0.25s;
background: transparent;
color: rgba(255,255,255,0.7);
}
.lang-btn.active {
background: var(--pr-gold);
color: var(--pr-blue);
}
/* ===== NAV TABS ===== */
.sdv-nav {
background: var(--pr-blue);
border-bottom: 3px solid var(--pr-gold);
}
.nav-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
display: flex;
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
.nav-tab {
padding: 14px 22px;
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 13px;
color: rgba(255,255,255,0.6);
border: none;
background: transparent;
cursor: pointer;
letter-spacing: 0.5px;
white-space: nowrap;
transition: all 0.2s;
border-bottom: 3px solid transparent;
margin-bottom: -3px;
display: flex;
align-items: center;
gap: 6px;
}
.nav-tab .icon { font-size: 16px; }
.nav-tab:hover { color: rgba(255,255,255,0.9); }
.nav-tab.active {
color: var(--pr-gold);
border-bottom-color: var(--pr-gold);
}
/* ===== MAIN CONTENT ===== */
.sdv-main {
max-width: 1100px;
margin: 0 auto;
padding: 32px 24px 64px;
}
.section { display: none; }
.section.active { display: block; }
/* ===== MAP SECTION ===== */
.map-header {
text-align: center;
margin-bottom: 28px;
}
.map-header h2 {
font-family: 'Playfair Display', serif;
font-size: 32px;
font-weight: 700;
color: var(--pr-blue);
margin-bottom: 8px;
}
.map-header p {
color: var(--text-muted);
font-size: 16px;
}
.map-container {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
border: 1px solid rgba(0,40,104,0.08);
}
.map-wrap {
position: relative;
padding: 24px;
background: linear-gradient(160deg, #e8f4fd 0%, #f0f8f5 100%);
}
.map-svg-container {
width: 100%;
max-width: 900px;
margin: 0 auto;
display: block;
position: relative;
}
#pr-map {
width: 100%;
height: auto;
cursor: pointer;
}
.muni-path {
fill: #6DB8D4;
stroke: #fff;
stroke-width: 1.5;
transition: fill 0.18s, transform 0.18s;
transform-origin: center;
}
.muni-path:hover {
fill: var(--pr-gold);
filter: drop-shadow(0 2px 8px rgba(245,166,35,0.5));
}
.muni-path.highlighted { fill: var(--pr-green); }
.muni-path.selected { fill: var(--pr-red); }
/* Island shapes (Vieques, Culebra) */
.island-path {
fill: #4AABB8;
stroke: #fff;
stroke-width: 1.5;
transition: fill 0.18s;
cursor: pointer;
}
.island-path:hover { fill: var(--pr-gold); }
/* Tooltip */
#map-tooltip {
position: absolute;
background: var(--pr-blue);
color: #fff;
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
white-space: nowrap;
z-index: 10;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
#map-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--pr-blue);
}
/* Municipality panel */
.muni-panel {
padding: 24px;
border-top: 1px solid rgba(0,40,104,0.08);
min-height: 80px;
display: flex;
align-items: center;
gap: 20px;
}
.muni-panel-empty {
color: var(--text-muted);
font-size: 15px;
text-align: center;
width: 100%;
}
.muni-panel-content {
display: none;
width: 100%;
}
.muni-panel-content.visible { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.muni-info h3 {
font-family: 'Playfair Display', serif;
font-size: 22px;
color: var(--pr-blue);
margin-bottom: 4px;
}
.muni-info p {
color: var(--text-muted);
font-size: 14px;
line-height: 1.6;
max-width: 380px;
}
.muni-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
}
.muni-btn {
padding: 8px 16px;
border-radius: 8px;
border: none;
cursor: pointer;
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s;
text-decoration: none;
}
.btn-youtube {
background: #FF0000;
color: #fff;
}
.btn-youtube:hover { background: #cc0000; }
.btn-info {
background: var(--pr-blue);
color: #fff;
}
.btn-info:hover { background: #003a8c; }
.btn-map {
background: var(--pr-green);
color: #fff;
}
.btn-map:hover { background: #005236; }
/* Municipality list */
.muni-search-bar {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.muni-search {
flex: 1;
min-width: 200px;
padding: 10px 16px;
border: 1.5px solid rgba(0,40,104,0.15);
border-radius: var(--radius-sm);
font-family: 'Outfit', sans-serif;
font-size: 14px;
color: var(--text-main);
background: var(--card-bg);
outline: none;
transition: border-color 0.2s;
}
.muni-search:focus { border-color: var(--pr-blue); }
.region-filter {
padding: 10px 16px;
border: 1.5px solid rgba(0,40,104,0.15);
border-radius: var(--radius-sm);
font-family: 'Outfit', sans-serif;
font-size: 14px;
color: var(--text-main);
background: var(--card-bg);
outline: none;
cursor: pointer;
}
.muni-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.muni-card {
background: var(--card-bg);
border: 1.5px solid rgba(0,40,104,0.08);
border-radius: var(--radius-sm);
padding: 14px 16px;
cursor: pointer;
transition: all 0.2s;
}
.muni-card:hover {
border-color: var(--pr-blue);
box-shadow: 0 4px 16px rgba(0,40,104,0.12);
transform: translateY(-2px);
}
.muni-card-name {
font-weight: 600;
font-size: 14px;
color: var(--pr-blue);
margin-bottom: 2px;
}
.muni-card-region {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.muni-card-tag {
display: inline-block;
margin-top: 6px;
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
background: rgba(0,104,71,0.10);
color: var(--pr-green);
}
/* ===== PLACES CARDS ===== */
.places-intro {
text-align: center;
margin-bottom: 32px;
}
.places-intro h2 {
font-family: 'Playfair Display', serif;
font-size: 32px;
color: var(--pr-blue);
margin-bottom: 8px;
}
.category-filters {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 28px;
}
.cat-btn {
padding: 9px 20px;
border-radius: 40px;
border: 1.5px solid rgba(0,40,104,0.15);
background: var(--card-bg);
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
}
.cat-btn:hover { border-color: var(--pr-blue); color: var(--pr-blue); }
.cat-btn.active {
background: var(--pr-blue);
border-color: var(--pr-blue);
color: #fff;
}
.places-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.place-card {
background: var(--card-bg);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid rgba(0,40,104,0.07);
transition: all 0.25s;
cursor: pointer;
}
.place-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,40,104,0.15);
}
.place-img {
width: 100%;
height: 180px;
object-fit: cover;
display: flex;
align-items: center;
justify-content: center;
font-size: 56px;
background: linear-gradient(135deg, #e8f4fd, #f0f8f5);
}
.place-body {
padding: 18px;
}
.place-tags {
display: flex;
gap: 6px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.place-tag {
padding: 3px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tag-beach { background: rgba(0,168,156,0.12); color: var(--pr-teal); }
.tag-nature { background: rgba(0,104,71,0.12); color: var(--pr-green); }
.tag-history { background: rgba(0,40,104,0.12); color: var(--pr-blue); }
.tag-food { background: rgba(245,166,35,0.15); color: #b37400; }
.tag-adventure { background: rgba(239,51,64,0.10); color: var(--pr-red); }
.tag-culture { background: rgba(130,50,180,0.10); color: #8232b4; }
.place-name {
font-family: 'Playfair Display', serif;
font-size: 18px;
font-weight: 700;
color: var(--pr-blue);
margin-bottom: 6px;
}
.place-location {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 4px;
}
.place-desc {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 14px;
}
.place-actions {
display: flex;
gap: 8px;
}
.place-btn {
flex: 1;
padding: 9px 12px;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 12px;
transition: all 0.2s;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.place-btn-yt {
background: #FF0000;
color: #fff;
}
.place-btn-yt:hover { background: #cc0000; }
.place-btn-map {
background: var(--pr-green);
color: #fff;
}
.place-btn-map:hover { background: #005236; }
/* ===== ADS ZONE ===== */
.ads-zone {
background: var(--card-bg);
border: 2px dashed rgba(0,40,104,0.12);
border-radius: var(--radius);
padding: 24px;
text-align: center;
margin: 28px 0;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.ads-zone p {
color: var(--text-muted);
font-size: 12px;
margin-bottom: 4px;
}
.ads-placeholder {
font-size: 13px;
color: var(--text-muted);
font-style: italic;
}
/* ===== ABOUT SECTION ===== */
.about-hero {
background: linear-gradient(135deg, var(--pr-blue), var(--pr-green));
border-radius: var(--radius);
padding: 48px 40px;
color: #fff;
margin-bottom: 32px;
position: relative;
overflow: hidden;
}
.about-hero::before {
content: '🇵🇷';
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
font-size: 120px;
opacity: 0.15;
}
.about-hero h2 {
font-family: 'Playfair Display', serif;
font-size: 36px;
margin-bottom: 12px;
}
.about-hero p {
font-size: 16px;
line-height: 1.7;
opacity: 0.9;
max-width: 500px;
}
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
.stat-card {
background: var(--card-bg);
border-radius: var(--radius-sm);
padding: 20px;
text-align: center;
box-shadow: var(--shadow);
}
.stat-number {
font-family: 'Playfair Display', serif;
font-size: 36px;
font-weight: 700;
color: var(--pr-blue);
}
.stat-label {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
}
/* ===== MODAL ===== */
.modal-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }
.modal-box {
background: var(--card-bg);
border-radius: var(--radius);
max-width: 600px;
width: 100%;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 24px 80px rgba(0,0,0,0.3);
}
.modal-header {
background: linear-gradient(135deg, var(--pr-blue), #003580);
padding: 28px;
color: #fff;
position: relative;
}
.modal-header h3 {
font-family: 'Playfair Display', serif;
font-size: 26px;
}
.modal-close {
position: absolute;
top: 16px; right: 16px;
background: rgba(255,255,255,0.15);
border: none;
color: #fff;
width: 32px; height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.modal-body { padding: 24px; }
.modal-yt-frame {
width: 100%;
aspect-ratio: 16/9;
border-radius: var(--radius-sm);
overflow: hidden;
margin-bottom: 20px;
background: #000;
}
.modal-yt-frame iframe {
width: 100%; height: 100%;
border: none;
}
.modal-yt-placeholder {
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(135deg, #0a0a1a, #1a1a3e);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.6);
margin-bottom: 20px;
cursor: pointer;
transition: opacity 0.2s;
}
.modal-yt-placeholder:hover { opacity: 0.85; }
.yt-play-icon {
width: 64px; height: 64px;
background: #FF0000;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
font-size: 28px;
}
/* ===== FOOTER ===== */
.sdv-footer {
background: var(--pr-dark);
color: rgba(255,255,255,0.6);
padding: 32px 24px;
text-align: center;
font-size: 13px;
}
.sdv-footer strong {
color: var(--pr-gold);
font-family: 'Playfair Display', serif;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
.sdv-title-block h1 { font-size: 20px; }
.sdv-emblem { width: 50px; height: 50px; font-size: 17px; }
.map-header h2 { font-size: 24px; }
.places-intro h2 { font-size: 24px; }
.about-hero { padding: 32px 24px; }
.about-hero h2 { font-size: 26px; }
.about-hero::before { display: none; }
.muni-panel-content.visible { flex-direction: column; }
}
/* ===== WELCOME LANGUAGE SCREEN ===== */
#welcome-screen {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(135deg, var(--pr-blue) 0%, #003580 50%, var(--pr-green) 100%);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 32px;
}
.welcome-logo {
text-align: center;
color: #fff;
}
.welcome-emblem {
width: 100px; height: 100px;
background: var(--pr-gold);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 34px;
color: var(--pr-blue);
margin: 0 auto 20px;
box-shadow: 0 0 0 8px rgba(255,255,255,0.15);
}
.welcome-logo h1 {
font-family: 'Playfair Display', serif;
font-size: 42px;
font-weight: 900;
margin-bottom: 6px;
}
.welcome-logo p {
font-size: 14px;
opacity: 0.7;
letter-spacing: 3px;
text-transform: uppercase;
}
.welcome-lang-select {
text-align: center;
color: rgba(255,255,255,0.8);
}
.welcome-lang-select p {
font-size: 16px;
margin-bottom: 20px;
}
.welcome-lang-btns {
display: flex;
gap: 16px;
}
.welcome-lang-btn {
padding: 16px 40px;
border-radius: 12px;
border: 2px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.12);
color: #fff;
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 18px;
cursor: pointer;
transition: all 0.25s;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.welcome-lang-btn:hover {
background: rgba(255,255,255,0.22);
border-color: var(--pr-gold);
transform: scale(1.04);
}
.welcome-lang-btn .flag {
font-size: 32px;
}
.welcome-fade-out {
animation: fadeOut 0.5s ease forwards;
}
@keyframes fadeOut {
to { opacity: 0; pointer-events: none; }
}
.ad-banner-container {
background: var(--card-bg);
border: 1px solid rgba(0,40,104,0.08);
border-radius: var(--radius-sm);
padding: 16px;
text-align: center;
margin: 20px 0;
min-height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.ad-label {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 6px;
display: block;
}
</style>
</head>
<body>
<!-- WELCOME / LANGUAGE SCREEN -->
<div id="welcome-screen">
<div class="welcome-logo">
<div class="welcome-emblem">SDV</div>
<h1>Secretos de Viajero</h1>
<p>Tu guía definitiva de Puerto Rico</p>
</div>
<div class="welcome-lang-select">
<p id="lang-prompt">Selecciona tu idioma / Select your language</p>
<div class="welcome-lang-btns">
<button class="welcome-lang-btn" onclick="selectLang('es')">
<span class="flag">🇵🇷</span>
Español
</button>
<button class="welcome-lang-btn" onclick="selectLang('en')">
<span class="flag">🇺🇸</span>
English
</button>
</div>
</div>
</div>
<!-- HEADER -->
<header class="sdv-header">
<div class="header-inner">
<div class="sdv-logo">
<div class="sdv-emblem">SDV</div>
<div class="sdv-title-block">
<h1>Secretos de Viajero</h1>
<p id="header-sub">Puerto Rico Interactivo</p>
</div>
</div>
<div class="lang-toggle">
<button class="lang-btn active" id="btn-es" onclick="setLang('es')">ES</button>
<button class="lang-btn" id="btn-en" onclick="setLang('en')">EN</button>
</div>
</div>
</header>
<!-- NAV -->
<nav class="sdv-nav">
<div class="nav-inner">
<button class="nav-tab active" onclick="showSection('map')" id="tab-map">
<span class="icon">🗺️</span>
<span data-es="Mapa Interactivo" data-en="Interactive Map">Mapa Interactivo</span>
</button>
<button class="nav-tab" onclick="showSection('places')" id="tab-places">
<span class="icon">🌊</span>
<span data-es="Mejores Lugares" data-en="Best Places">Mejores Lugares</span>
</button>
<button class="nav-tab" onclick="showSection('municipios')" id="tab-municipios">
<span class="icon">🏘️</span>
<span data-es="Los 81 Municipios" data-en="All 81 Municipalities">Los 81 Municipios</span>
</button>
<button class="nav-tab" onclick="showSection('about')" id="tab-about">
<span class="icon">ℹ️</span>
<span data-es="Sobre SDV" data-en="About SDV">Sobre SDV</span>
</button>
</div>
</nav>
<!-- MAIN -->
<main class="sdv-main">
<!-- AD BANNER TOP -->
<div class="ad-banner-container">
<div>
<span class="ad-label">Publicidad / Advertisement</span>
<!-- Pega tu código de Google AdSense aquí -->
<!-- Paste your Google AdSense code here -->
<div style="color:var(--text-muted);font-size:13px;" id="ad-placeholder-text">
📢 Espacio para anuncio de Google Ads (728×90)
</div>
</div>
</div>
<!-- ===== MAP SECTION ===== -->
<section class="section active" id="section-map">
<div class="map-header">
<h2 data-es="Mapa Interactivo de Puerto Rico" data-en="Interactive Map of Puerto Rico">Mapa Interactivo de Puerto Rico</h2>
<p data-es="Toca cualquier municipio para descubrir sus secretos" data-en="Tap any municipality to discover its secrets">Toca cualquier municipio para descubrir sus secretos</p>
</div>
<div class="map-container">
<div class="map-wrap">
<div class="map-svg-container">
<div id="map-tooltip"></div>
<!-- MAPA SVG DE PUERTO RICO con todos los municipios -->
<svg id="pr-map" viewBox="0 0 900 400" xmlns="http://www.w3.org/2000/svg">
<!-- Isla Principal - shapes simplificadas para todos los municipios -->
<!-- NORTE -->
<path class="muni-path" data-muni="San Juan" d="M480,80 L520,75 L530,95 L510,105 L480,100 Z" />
<path class="muni-path" data-muni="Bayamón" d="M440,90 L480,80 L480,100 L465,115 L440,110 Z" />
<path class="muni-path" data-muni="Carolina" d="M520,75 L565,70 L570,90 L530,95 Z" />
<path class="muni-path" data-muni="Guaynabo" d="M440,110 L465,115 L470,130 L445,135 Z" />
<path class="muni-path" data-muni="Trujillo Alto" d="M480,100 L510,105 L515,125 L485,130 Z" />
<path class="muni-path" data-muni="Cataño" d="M415,95 L440,90 L440,110 L418,112 Z" />
<path class="muni-path" data-muni="Toa Baja" d="M380,88 L415,85 L415,95 L418,112 L395,115 L375,105 Z" />
<path class="muni-path" data-muni="Toa Alta" d="M375,105 L395,115 L400,135 L375,140 L355,125 Z" />
<path class="muni-path" data-muni="Dorado" d="M330,80 L380,75 L380,88 L375,105 L355,100 L325,92 Z" />
<path class="muni-path" data-muni="Vega Alta" d="M285,85 L330,80 L325,92 L310,110 L285,105 Z" />
<path class="muni-path" data-muni="Vega Baja" d="M245,80 L285,75 L285,85 L285,105 L260,108 L240,95 Z" />
<path class="muni-path" data-muni="Manatí" d="M200,78 L245,73 L245,80 L240,95 L215,100 L195,90 Z" />
<path class="muni-path" data-muni="Barceloneta" d="M165,78 L200,75 L200,78 L195,90 L175,95 L160,88 Z" />
<path class="muni-path" data-muni="Arecibo" d="M120,72 L165,68 L165,78 L160,88 L135,95 L115,85 Z" />
<path class="muni-path" data-muni="Hatillo" d="M80,70 L120,66 L120,72 L115,85 L95,90 L75,82 Z" />
<path class="muni-path" data-muni="Camuy" d="M55,72 L80,68 L80,70 L75,82 L60,88 L50,80 Z" />
<path class="muni-path" data-muni="Quebradillas" d="M30,74 L55,70 L55,72 L50,80 L40,85 L25,80 Z" />
<path class="muni-path" data-muni="Isabela" d="M30,74 L25,80 L40,85 L35,100 L20,95 L15,85 L15,74 Z" />
<path class="muni-path" data-muni="Aguadilla" d="M15,74 L15,85 L20,95 L12,105 L8,90 L8,74 Z" />
<!-- ESTE -->
<path class="muni-path" data-muni="Loíza" d="M565,70 L600,65 L605,85 L570,90 Z" />
<path class="muni-path" data-muni="Canóvanas" d="M530,95 L570,90 L575,115 L535,118 Z" />
<path class="muni-path" data-muni="Río Grande" d="M535,118 L575,115 L580,140 L540,145 Z" />
<path class="muni-path" data-muni="Luquillo" d="M575,115 L605,110 L608,135 L580,140 Z" />
<path class="muni-path" data-muni="Fajardo" d="M608,135 L640,130 L645,160 L610,165 Z" />
<path class="muni-path" data-muni="Ceiba" d="M610,165 L645,160 L648,185 L612,188 Z" />
<path class="muni-path" data-muni="Humacao" d="M612,188 L648,185 L650,215 L614,218 Z" />
<path class="muni-path" data-muni="Yabucoa" d="M614,218 L650,215 L652,245 L616,248 Z" />
<path class="muni-path" data-muni="Maunabo" d="M616,248 L652,245 L650,270 L618,272 Z" />
<path class="muni-path" data-muni="Patillas" d="M580,255 L616,248 L618,272 L582,275 Z" />
<path class="muni-path" data-muni="Arroyo" d="M548,258 L580,255 L582,275 L550,278 Z" />
<path class="muni-path" data-muni="Guayama" d="M510,250 L548,248 L548,258 L550,278 L514,278 Z" />
<path class="muni-path" data-muni="Salinas" d="M468,248 L510,245 L510,250 L514,278 L472,280 Z" />
<!-- SUR -->
<path class="muni-path" data-muni="Santa Isabel" d="M428,252 L468,248 L472,280 L432,282 Z" />
<path class="muni-path" data-muni="Juana Díaz" d="M388,248 L428,245 L428,252 L432,282 L390,282 Z" />
<path class="muni-path" data-muni="Ponce" d="M330,245 L388,240 L388,248 L390,282 L332,282 Z" />
<path class="muni-path" data-muni="Peñuelas" d="M295,248 L330,245 L332,282 L298,282 Z" />
<path class="muni-path" data-muni="Guayanilla" d="M260,252 L295,248 L298,282 L262,282 Z" />
<path class="muni-path" data-muni="Yauco" d="M225,248 L260,245 L260,252 L262,282 L228,282 Z" />
<path class="muni-path" data-muni="Guánica" d="M195,255 L225,248 L228,282 L198,282 Z" />
<path class="muni-path" data-muni="Lajas" d="M155,258 L195,252 L195,255 L198,282 L158,282 Z" />
<path class="muni-path" data-muni="San Germán" d="M118,252 L155,248 L155,258 L158,282 L120,280 Z" />
<path class="muni-path" data-muni="Sabana Grande" d="M85,248 L118,245 L118,252 L120,280 L88,278 Z" />
<path class="muni-path" data-muni="Cabo Rojo" d="M40,258 L85,252 L85,248 L88,278 L42,278 L30,270 L25,260 Z" />
<path class="muni-path" data-muni="Hormigueros" d="M85,245 L115,238 L118,245 L85,248 Z" />
<path class="muni-path" data-muni="Mayagüez" d="M15,210 L55,200 L60,240 L20,245 L12,228 Z" />
<!-- NOROESTE -->
<path class="muni-path" data-muni="Aguada" d="M8,105 L35,100 L40,130 L15,135 L8,118 Z" />
<path class="muni-path" data-muni="Moca" d="M35,100 L60,95 L65,128 L40,130 Z" />
<path class="muni-path" data-muni="San Sebastián" d="M60,95 L95,92 L100,128 L65,128 Z" />
<path class="muni-path" data-muni="Lares" d="M95,92 L135,95 L140,128 L100,128 Z" />
<path class="muni-path" data-muni="Utuado" d="M135,95 L180,98 L185,138 L140,138 Z" />
<path class="muni-path" data-muni="Ciales" d="M180,98 L215,100 L220,135 L185,138 Z" />
<path class="muni-path" data-muni="Morovis" d="M215,100 L260,108 L262,140 L220,138 Z" />
<path class="muni-path" data-muni="Florida" d="M165,88 L200,78 L200,98 L175,98 Z" />
<!-- INTERIOR -->
<path class="muni-path" data-muni="Naranjito" d="M355,125 L400,135 L398,158 L355,155 Z" />
<path class="muni-path" data-muni="Aguas Buenas" d="M400,135 L445,135 L445,158 L398,158 Z" />
<path class="muni-path" data-muni="Comerío" d="M355,155 L398,158 L396,180 L355,178 Z" />
<path class="muni-path" data-muni="Cidra" d="M445,135 L490,138 L488,165 L445,162 Z" />
<path class="muni-path" data-muni="Cayey" d="M488,165 L525,168 L523,198 L488,195 Z" />
<path class="muni-path" data-muni="Caguas" d="M445,158 L488,158 L488,182 L445,180 Z" />
<path class="muni-path" data-muni="Gurabo" d="M488,140 L540,145 L538,170 L488,168 Z" />
<path class="muni-path" data-muni="San Lorenzo" d="M488,168 L538,170 L536,198 L488,195 Z" />
<path class="muni-path" data-muni="Las Piedras" d="M540,145 L578,148 L578,172 L538,170 Z" />
<path class="muni-path" data-muni="Juncos" d="M515,125 L555,128 L555,150 L515,148 Z" />
<path class="muni-path" data-muni="Naguabo" d="M578,172 L612,175 L612,198 L578,198 Z" />
<path class="muni-path" data-muni="Las Marías" d="M40,130 L65,128 L68,160 L42,162 Z" />
<path class="muni-path" data-muni="Maricao" d="M42,162 L68,160 L70,192 L45,195 L38,178 Z" />
<path class="muni-path" data-muni="Adjuntas" d="M140,138 L185,138 L183,175 L142,172 Z" />
<path class="muni-path" data-muni="Jayuya" d="M185,138 L225,138 L222,172 L183,172 Z" />
<path class="muni-path" data-muni="Villalba" d="M290,198 L330,195 L330,228 L290,228 Z" />
<path class="muni-path" data-muni="Coamo" d="M330,195 L380,192 L380,228 L330,228 Z" />
<path class="muni-path" data-muni="Aibonito" d="M380,175 L420,175 L420,200 L380,200 Z" />
<path class="muni-path" data-muni="Barranquitas" d="M340,158 L380,158 L380,178 L340,178 Z" />
<path class="muni-path" data-muni="Orocovis" d="M260,138 L310,135 L312,168 L260,168 Z" />
<path class="muni-path" data-muni="Comerio" d="M310,168 L352,165 L352,192 L310,192 Z" />
<path class="muni-path" data-muni="Santa Catalina" d="M420,200 L465,198 L465,228 L420,228 Z" />
<path class="muni-path" data-muni="Guayama" d="M465,228 L510,225 L510,250 L465,248 Z" />
<path class="muni-path" data-muni="Maunabo" d="M540,220 L580,218 L580,248 L540,248 Z" />
<path class="muni-path" data-muni="San Germán" d="M90,192 L130,188 L132,225 L92,225 Z" />
<path class="muni-path" data-muni="Guánica" d="M55,215 L90,210 L90,248 L58,248 Z" />
<!-- Labels (solo principales) -->
<text x="498" y="92" font-size="7" fill="#003" font-weight="bold" pointer-events="none" text-anchor="middle">San Juan</text>
<text x="337" y="265" font-size="8" fill="#003" font-weight="bold" pointer-events="none" text-anchor="middle">Ponce</text>
<text x="627" y="152" font-size="6.5" fill="#003" pointer-events="none" text-anchor="middle">Fajardo</text>
<text x="30" y="228" font-size="6.5" fill="#003" pointer-events="none" text-anchor="middle">Mayagüez</text>
<text x="466" y="170" font-size="6.5" fill="#003" pointer-events="none" text-anchor="middle">Caguas</text>
<!-- VIEQUES -->
<g onclick="selectMuni('Vieques')">
<ellipse class="island-path" data-muni="Vieques" cx="740" cy="175" rx="70" ry="28" />
<text x="740" y="179" font-size="9" fill="#003" font-weight="bold" pointer-events="none" text-anchor="middle">Vieques</text>
</g>
<!-- CULEBRA -->
<g onclick="selectMuni('Culebra')">
<ellipse class="island-path" data-muni="Culebra" cx="720" cy="110" rx="35" ry="16" />
<text x="720" y="114" font-size="8" fill="#003" font-weight="bold" pointer-events="none" text-anchor="middle">Culebra</text>
</g>
<!-- Compass -->
<g transform="translate(848,50)">
<circle cx="0" cy="0" r="22" fill="white" fill-opacity="0.8" stroke="#002868" stroke-width="1"/>
<text x="0" y="-12" font-size="9" text-anchor="middle" font-weight="bold" fill="#002868">N</text>
<text x="0" y="17" font-size="8" text-anchor="middle" fill="#666">S</text>
<text x="-14" y="4" font-size="8" text-anchor="middle" fill="#666">O</text>
<text x="14" y="4" font-size="8" text-anchor="middle" fill="#666">E</text>
<polygon points="0,-8 3,2 0,0 -3,2" fill="#EF3340"/>
<polygon points="0,8 3,-2 0,0 -3,-2" fill="#002868"/>
</g>
<!-- Scale bar -->
<g transform="translate(30,305)">
<rect x="0" y="0" width="60" height="4" fill="#002868" rx="2"/>
<rect x="60" y="0" width="60" height="4" fill="white" stroke="#002868" stroke-width="0.5" rx="2"/>
<text x="0" y="16" font-size="7" fill="#555">0</text>
<text x="55" y="16" font-size="7" fill="#555">25km</text>
<text x="110" y="16" font-size="7" fill="#555">50km</text>
</g>
<!-- Legend -->
<g transform="translate(680,320)">
<rect x="0" y="-14" width="160" height="52" fill="white" fill-opacity="0.88" rx="6" stroke="#ccc" stroke-width="0.5"/>
<rect x="8" y="-4" width="12" height="12" fill="#6DB8D4" rx="2"/>
<text x="26" y="7" font-size="8" fill="#333" data-es="Municipio" data-en="Municipality">Municipio</text>
<rect x="8" y="16" width="12" height="12" fill="#F5A623" rx="2"/>
<text x="26" y="27" font-size="8" fill="#333" data-es="Seleccionado" data-en="Selected">Seleccionado</text>
</g>
</svg>
</div>
</div>
<!-- Info panel below map -->
<div class="muni-panel">
<div class="muni-panel-empty" id="map-empty-msg">
👆 <span data-es="Toca un municipio en el mapa para ver información" data-en="Tap a municipality on the map to see information">Toca un municipio en el mapa para ver información</span>
</div>
<div class="muni-panel-content" id="map-info-panel">
<div class="muni-info">
<h3 id="panel-muni-name">—</h3>
<p id="panel-muni-desc">—</p>
<div class="muni-actions" id="panel-actions"></div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== PLACES SECTION ===== -->
<section class="section" id="section-places">
<div class="places-intro">
<h2 data-es="Los Mejores Lugares de Puerto Rico" data-en="Best Places in Puerto Rico">Los Mejores Lugares de Puerto Rico</h2>
<p style="color:var(--text-muted)" data-es="Descubre las joyas que hacen única a la Isla del Encanto" data-en="Discover the gems that make the Island of Enchantment unique">Descubre las joyas que hacen única a la Isla del Encanto</p>
</div>
<div class="category-filters">
<button class="cat-btn active" data-cat="all" onclick="filterPlaces('all', this)">
🌟 <span data-es="Todos" data-en="All">Todos</span>
</button>
<button class="cat-btn" data-cat="beach" onclick="filterPlaces('beach', this)">
🏖️ <span data-es="Playas" data-en="Beaches">Playas</span>
</button>
<button class="cat-btn" data-cat="nature" onclick="filterPlaces('nature', this)">
🌿 <span data-es="Naturaleza" data-en="Nature">Naturaleza</span>
</button>
<button class="cat-btn" data-cat="history" onclick="filterPlaces('history', this)">
🏰 <span data-es="Historia" data-en="History">Historia</span>
</button>
<button class="cat-btn" data-cat="food" onclick="filterPlaces('food', this)">
🍽️ <span data-es="Gastronomía" data-en="Food">Gastronomía</span>
</button>
<button class="cat-btn" data-cat="adventure" onclick="filterPlaces('adventure', this)">
🧗 <span data-es="Aventura" data-en="Adventure">Aventura</span>
</button>
</div>
<!-- AD BETWEEN FILTERS AND GRID -->
<div class="ad-banner-container" style="margin-bottom:24px;">
<div>
<span class="ad-label">Patrocinado / Sponsored</span>
<!-- Google AdSense 728x90 aquí / here -->
<div style="color:var(--text-muted);font-size:13px;">📢 Banner publicitario 728×90</div>
</div>
</div>
<div class="places-grid" id="places-grid"></div>
</section>
<!-- ===== MUNICIPIOS LIST SECTION ===== -->
<section class="section" id="section-municipios">
<h2 style="font-family:'Playfair Display',serif;font-size:30px;color:var(--pr-blue);margin-bottom:8px;" data-es="Los 81 Municipios de Puerto Rico" data-en="All 81 Municipalities of Puerto Rico">Los 81 Municipios de Puerto Rico</h2>
<p style="color:var(--text-muted);margin-bottom:24px;" data-es="79 municipios + Vieques y Culebra" data-en="79 municipalities + Vieques and Culebra">79 municipios + Vieques y Culebra</p>
<div class="muni-search-bar">
<input class="muni-search" type="text" id="muni-search-input"
placeholder="Buscar municipio... / Search municipality..."
oninput="filterMunis()" />
<select class="region-filter" id="region-filter-select" onchange="filterMunis()">
<option value="all" data-es="Todas las regiones" data-en="All regions">Todas las regiones</option>
<option value="norte" data-es="Norte" data-en="North">Norte</option>
<option value="este" data-es="Este" data-en="East">Este</option>
<option value="sur" data-es="Sur" data-en="South">Sur</option>
<option value="oeste" data-es="Oeste" data-en="West">Oeste</option>
<option value="interior" data-es="Interior" data-en="Interior">Interior</option>
<option value="islas" data-es="Islas Municipio" data-en="Island Municipalities">Islas Municipio</option>
</select>
</div>
<div class="muni-grid" id="muni-list-grid"></div>
</section>
<!-- ===== ABOUT SECTION ===== -->
<section class="section" id="section-about">
<div class="about-hero">
<h2 data-es="Bienvenido a SDV" data-en="Welcome to SDV">Bienvenido a SDV</h2>
<p data-es="Secretos de Viajero es tu guía gratuita e interactiva para descubrir todo lo que Puerto Rico tiene para ofrecerte. Desde las playas más secretas hasta los pueblos con más historia, aquí encontrarás todo lo que necesitas para tu próxima aventura boricua." data-en="Secretos de Viajero is your free, interactive guide to discovering everything Puerto Rico has to offer. From the most hidden beaches to the towns with the most history, here you'll find everything you need for your next Puerto Rican adventure.">
Secretos de Viajero es tu guía gratuita e interactiva para descubrir todo lo que Puerto Rico tiene para ofrecerte. Desde las playas más secretas hasta los pueblos con más historia, aquí encontrarás todo lo que necesitas para tu próxima aventura boricua.
</p>
</div>
<div class="stats-row">
<div class="stat-card">
<div class="stat-number">81</div>
<div class="stat-label" data-es="Municipios" data-en="Municipalities">Municipios</div>
</div>
<div class="stat-card">
<div class="stat-number">100+</div>
<div class="stat-label" data-es="Lugares destacados" data-en="Featured places">Lugares destacados</div>
</div>
<div class="stat-card">
<div class="stat-number">270mi</div>
<div class="stat-label" data-es="De costas hermosas" data-en="Of beautiful coastline">De costas hermosas</div>
</div>
<div class="stat-card">
<div class="stat-number">3.3M</div>
<div class="stat-label" data-es="Boricuas en la isla" data-en="Puerto Ricans on the island">Boricuas en la isla</div>
</div>
</div>
<div style="background:var(--card-bg);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);margin-bottom:24px;">
<h3 style="font-family:'Playfair Display',serif;font-size:22px;color:var(--pr-blue);margin-bottom:16px;" data-es="¿Cómo usar SDV?" data-en="How to use SDV?">¿Cómo usar SDV?</h3>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;">
<div style="display:flex;gap:14px;align-items:flex-start;">
<div style="font-size:32px;">🗺️</div>
<div>
<strong style="color:var(--pr-blue);display:block;margin-bottom:4px;" data-es="Explora el mapa" data-en="Explore the map">Explora el mapa</strong>
<p style="font-size:14px;color:var(--text-muted);" data-es="Toca cualquier municipio para descubrir información, videos y más." data-en="Tap any municipality to discover info, videos and more.">Toca cualquier municipio para descubrir información, videos y más.</p>
</div>
</div>
<div style="display:flex;gap:14px;align-items:flex-start;">
<div style="font-size:32px;">🎬</div>
<div>
<strong style="color:var(--pr-blue);display:block;margin-bottom:4px;" data-es="Ve los videos" data-en="Watch the videos">Ve los videos</strong>
<p style="font-size:14px;color:var(--text-muted);" data-es="Cada lugar tiene su video de YouTube para que lo vivas antes de ir." data-en="Each place has its YouTube video so you can experience it before going.">Cada lugar tiene su video de YouTube para que lo vivas antes de ir.</p>
</div>
</div>
<div style="display:flex;gap:14px;align-items:flex-start;">
<div style="font-size:32px;">📍</div>
<div>
<strong style="color:var(--pr-blue);display:block;margin-bottom:4px;" data-es="Encuentra los secretos" data-en="Find the secrets">Encuentra los secretos</strong>
<p style="font-size:14px;color:var(--text-muted);" data-es="Descubre lugares que los turistas no conocen pero los locales adoran." data-en="Discover places tourists don't know but locals love.">Descubre lugares que los turistas no conocen pero los locales adoran.</p>
</div>
</div>
</div>
</div>
<!-- Contact / Ysinmiedo link -->
<div style="background:linear-gradient(135deg,var(--pr-red),#c0001a);border-radius:var(--radius);padding:28px;color:#fff;text-align:center;">
<h3 style="font-family:'Playfair Display',serif;font-size:22px;margin-bottom:8px;" data-es="Visita Ysinmiedo" data-en="Visit Ysinmiedo">Visita Ysinmiedo</h3>
<p style="opacity:0.85;margin-bottom:18px;font-size:15px;" data-es="El hogar de SDV y mucho más contenido de viajes" data-en="The home of SDV and much more travel content">El hogar de SDV y mucho más contenido de viajes</p>
<a href="https://ysinmiedo.com" target="_blank" style="display:inline-block;background:#fff;color:var(--pr-red);font-weight:700;padding:12px 32px;border-radius:8px;text-decoration:none;font-family:'Outfit',sans-serif;">
ysinmiedo.com →
</a>
</div>
</section>
</main>
<!-- MODAL -->
<div class="modal-overlay" id="modal">
<div class="modal-box">
<div class="modal-header">
<h3 id="modal-title">Municipio</h3>
<p id="modal-subtitle" style="opacity:0.7;font-size:13px;margin-top:4px;"></p>
<button class="modal-close" onclick="closeModal()">✕</button>
</div>
<div class="modal-body">
<div id="modal-video-area"></div>
<p id="modal-description" style="color:var(--text-muted);font-size:15px;line-height:1.7;margin-bottom:20px;"></p>
<div style="display:flex;gap:10px;flex-wrap:wrap;" id="modal-buttons"></div>
<!-- Ad inside modal -->
<div class="ad-banner-container" style="margin-top:24px;">
<div>
<span class="ad-label">Anuncio / Ad</span>
<!-- Google AdSense aquí / here -->
<div style="color:var(--text-muted);font-size:12px;">📢 300×250 Google Ad Unit</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer class="sdv-footer">
<p><strong>SDV – Secretos de Viajero</strong> | Parte de <strong>Ysinmiedo</strong></p>
<p style="margin-top:8px;font-size:11px;">Puerto Rico 🇵🇷 • Todos los derechos reservados</p>
</footer>
<script>
// ===== DATA =====
let currentLang = 'es';
const MUNI_DATA = {
// Norte
'San Juan': { region:'norte', emoji:'🏙️', tags:['historia','playa'], desc_es:'Capital y ciudad más grande. Hogar del Viejo San Juan, El Morro, la Condado y playas famosas. El corazón cultural de Puerto Rico.', desc_en:'Capital and largest city. Home of Old San Juan, El Morro, La Condado and famous beaches. The cultural heart of Puerto Rico.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=San+Juan+Puerto+Rico' },
'Bayamón': { region:'norte', emoji:'🌆', tags:[], desc_es:'Segunda ciudad más grande. Centro comercial y residencial con el Parque de las Ciencias de Puerto Rico.', desc_en:'Second largest city. Commercial and residential center with the Puerto Rico Science Park.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Bayamon+Puerto+Rico' },
'Carolina': { region:'norte', emoji:'✈️', tags:['playa'], desc_es:'Hogar del Aeropuerto Internacional Luis Muñoz Marín y bellas playas como Isla Verde.', desc_en:'Home of Luis Muñoz Marín International Airport and beautiful beaches like Isla Verde.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Carolina+Puerto+Rico' },
'Ponce': { region:'sur', emoji:'🦁', tags:['historia','cultura'], desc_es:'La "Perla del Sur". Segunda ciudad más importante, famosa por su arquitectura, el Carnaval y el Museo de Arte de Ponce.', desc_en:'The "Pearl of the South". Second most important city, famous for its architecture, Carnival and Ponce Art Museum.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Ponce+Puerto+Rico' },
'Mayagüez': { region:'oeste', emoji:'🐬', tags:[], desc_es:'La "Sultana del Oeste". Conocida por las atarrayas, el Zoológico de Puerto Rico y hermosas playas del oeste.', desc_en:'The "Sultana of the West". Known for fisheries, Puerto Rico Zoo and beautiful western beaches.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Mayaguez+Puerto+Rico' },
'Caguas': { region:'interior', emoji:'🌺', tags:[], desc_es:'El "Corazón del País". Centro comercial e industrial con gran cultura y eventos anuales.', desc_en:'The "Heart of the Country". Commercial and industrial center with great culture and annual events.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Caguas+Puerto+Rico' },
'Fajardo': { region:'este', emoji:'⛵', tags:['playa','aventura'], desc_es:'Puerta al Caribe. Punto de salida para Culebra y Vieques. Hogar de la bioluminiscente Laguna Grande y Las Cabezas de San Juan.', desc_en:'Gateway to the Caribbean. Departure point for Culebra and Vieques. Home to the bioluminescent Laguna Grande and Las Cabezas de San Juan.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Fajardo+Puerto+Rico' },
'Arecibo': { region:'norte', emoji:'🔭', tags:['naturaleza'], desc_es:'Famosa por el antiguo Observatorio de Arecibo (ahora el SETI site), sus cuevas y la desembocadura del Río Grande de Arecibo.', desc_en:'Famous for the former Arecibo Observatory (now SETI site), its caves and the mouth of Río Grande de Arecibo.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Arecibo+Puerto+Rico' },
'Luquillo': { region:'este', emoji:'🌴', tags:['playa','naturaleza'], desc_es:'Hogar de la famosa Playa de Luquillo y las Kioscos. Cerca del Bosque Nacional El Yunque. Una de las playas más hermosas de la isla.', desc_en:'Home of the famous Luquillo Beach and Kioscos. Near El Yunque National Forest. One of the most beautiful beaches on the island.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Luquillo+Puerto+Rico' },
'Rincón': { region:'noroeste', emoji:'🏄', tags:['playa','aventura'], desc_es:'La capital del surf en Puerto Rico. Playas épicas para surfistas de todo el mundo, puestas de sol increíbles y ambiente hippie-chic.', desc_en:'Puerto Rico\'s surf capital. Epic beaches for surfers worldwide, incredible sunsets and hippie-chic vibes.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Rincon+Puerto+Rico' },
'Vieques': { region:'islas', emoji:'🐴', tags:['playa','naturaleza','aventura'], desc_es:'Isla municipio con la bahía bioluminiscente más brillante del mundo (Mosquito Bay). Playas vírgenes, caballos salvajes y tranquilidad absoluta.', desc_en:'Island municipality with the world\'s brightest bioluminescent bay (Mosquito Bay). Pristine beaches, wild horses and absolute tranquility.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Vieques+Puerto+Rico' },
'Culebra': { region:'islas', emoji:'🐢', tags:['playa','naturaleza'], desc_es:'Hogar de Flamenco Beach, votada entre las mejores playas del mundo. Tortugas marinas, buceo espectacular y ambiente relajado sin multitudes.', desc_en:'Home of Flamenco Beach, voted among the world\'s best beaches. Sea turtles, spectacular diving and a relaxed vibe without crowds.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Culebra+Puerto+Rico' },
'Guánica': { region:'sur', emoji:'🦎', tags:['naturaleza'], desc_es:'El Bosque Seco de Guánica, Reserva de la Biosfera de la UNESCO. Ecosistema único con más de 700 especies de plantas y 130 de aves.', desc_en:'The Guánica Dry Forest, UNESCO Biosphere Reserve. Unique ecosystem with over 700 plant and 130 bird species.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Guanica+Puerto+Rico' },
'Humacao': { region:'este', emoji:'🦋', tags:['naturaleza','playa'], desc_es:'Reserva Natural de Humacao con manatíes, pelícanos y flamencos. Playas tranquilas y el Palmas del Mar resort community.', desc_en:'Humacao Natural Reserve with manatees, pelicans and flamingos. Quiet beaches and the Palmas del Mar resort community.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Humacao+Puerto+Rico' },
'Loíza': { region:'este', emoji:'🥁', tags:['cultura'], desc_es:'La cuna de la cultura afropuertorriqueña. Famosa por las Fiestas de Santiago Apóstol, la bomba y plena, y sus artesanos de máscaras.', desc_en:'The cradle of Afro-Puerto Rican culture. Famous for the Fiestas de Santiago Apóstol, bomba and plena music, and mask artisans.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Loiza+Puerto+Rico' },
'Utuado': { region:'interior', emoji:'⛏️', tags:['historia','naturaleza','aventura'], desc_es:'El Parque Ceremonial Indígena de Caguana, las cuevas del Río Tanamá y actividades de aventura en las montañas del centro.', desc_en:'The Caguana Indigenous Ceremonial Park, Río Tanamá caves and adventure activities in the central mountains.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Utuado+Puerto+Rico' },
'Adjuntas': { region:'interior', emoji:'☕', tags:['naturaleza'], desc_es:'El "Pueblo del Gigante Dormido". Famosa por el café de montaña, la Reserva Forestal Toro Negro y sus frías temperaturas.', desc_en:'The "Town of the Sleeping Giant". Famous for mountain coffee, Toro Negro Forest Reserve and its cool temperatures.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Adjuntas+Puerto+Rico' },
'Río Grande': { region:'este', emoji:'🌳', tags:['naturaleza','aventura'], desc_es:'Puerta al Bosque Nacional El Yunque, el único bosque tropical nacional de los EE.UU. Cataratas, senderos y biodiversidad incomparable.', desc_en:'Gateway to El Yunque National Forest, the only national tropical forest in the USA. Waterfalls, trails and incomparable biodiversity.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Rio+Grande+Puerto+Rico' },
'Cabo Rojo': { region:'sur', emoji:'🦩', tags:['playa','naturaleza'], desc_es:'El Faro de Cabo Rojo, Las Salinas, Playa Sucia y los flamencos. Uno de los paisajes más dramáticos y bellos de Puerto Rico.', desc_en:'Cabo Rojo Lighthouse, Las Salinas, Playa Sucia and flamingos. One of the most dramatic and beautiful landscapes in Puerto Rico.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Cabo+Rojo+Puerto+Rico' },
'Isabela': { region:'noroeste', emoji:'🌊', tags:['playa','aventura'], desc_es:'Playas salvajes de la costa noroeste, surf, playa Jobos y Guajataca. Naturaleza pura y costas sin multitudes.', desc_en:'Wild beaches of the northwest coast, surf, Jobos and Guajataca beaches. Pure nature and uncrowded coasts.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Isabela+Puerto+Rico' },
};
// Municipios adicionales sin data específica (para completar los 81)
const ALL_MUNIS = [
{name:'San Juan',region:'norte'},{name:'Bayamón',region:'norte'},{name:'Carolina',region:'norte'},{name:'Guaynabo',region:'norte'},{name:'Toa Baja',region:'norte'},{name:'Toa Alta',region:'norte'},{name:'Dorado',region:'norte'},{name:'Vega Alta',region:'norte'},{name:'Vega Baja',region:'norte'},{name:'Manatí',region:'norte'},{name:'Barceloneta',region:'norte'},{name:'Arecibo',region:'norte'},{name:'Hatillo',region:'norte'},{name:'Camuy',region:'norte'},{name:'Quebradillas',region:'norte'},{name:'Isabela',region:'noroeste'},{name:'Aguadilla',region:'noroeste'},{name:'Moca',region:'noroeste'},{name:'Aguada',region:'noroeste'},{name:'Rincón',region:'noroeste'},{name:'Añasco',region:'noroeste'},{name:'Mayagüez',region:'oeste'},{name:'Hormigueros',region:'oeste'},{name:'San Germán',region:'sur'},{name:'Sabana Grande',region:'sur'},{name:'Yauco',region:'sur'},{name:'Guánica',region:'sur'},{name:'Lajas',region:'sur'},{name:'Cabo Rojo',region:'sur'},{name:'Guayanilla',region:'sur'},{name:'Peñuelas',region:'sur'},{name:'Ponce',region:'sur'},{name:'Juana Díaz',region:'sur'},{name:'Santa Isabel',region:'sur'},{name:'Coamo',region:'sur'},{name:'Salinas',region:'sur'},{name:'Guayama',region:'sur'},{name:'Arroyo',region:'sur'},{name:'Patillas',region:'sur'},{name:'Maunabo',region:'sur'},{name:'Yabucoa',region:'este'},{name:'Humacao',region:'este'},{name:'Naguabo',region:'este'},{name:'Ceiba',region:'este'},{name:'Fajardo',region:'este'},{name:'Luquillo',region:'este'},{name:'Río Grande',region:'este'},{name:'Canóvanas',region:'este'},{name:'Loíza',region:'este'},{name:'Trujillo Alto',region:'norte'},{name:'Caguas',region:'interior'},{name:'Gurabo',region:'interior'},{name:'San Lorenzo',region:'interior'},{name:'Las Piedras',region:'interior'},{name:'Juncos',region:'interior'},{name:'Cidra',region:'interior'},{name:'Cayey',region:'interior'},{name:'Aibonito',region:'interior'},{name:'Barranquitas',region:'interior'},{name:'Orocovis',region:'interior'},{name:'Morovis',region:'interior'},{name:'Ciales',region:'interior'},{name:'Utuado',region:'interior'},{name:'Adjuntas',region:'interior'},{name:'Jayuya',region:'interior'},{name:'Lares',region:'interior'},{name:'San Sebastián',region:'noroeste'},{name:'Las Marías',region:'interior'},{name:'Maricao',region:'interior'},{name:'Villalba',region:'interior'},{name:'Aguas Buenas',region:'interior'},{name:'Comerío',region:'interior'},{name:'Naranjito',region:'interior'},{name:'Florida',region:'norte'},{name:'Cataño',region:'norte'},{name:'Guaynabo',region:'norte'},{name:'Vieques',region:'islas'},{name:'Culebra',region:'islas'}
];
// Dedup
const uniqueMunis = [...new Map(ALL_MUNIS.map(m=>[m.name,m])).values()];
const PLACES_DATA = [
{ name_es:'Playa Flamenco', name_en:'Flamenco Beach', location:'Culebra', cat:'beach', emoji:'🏖️', desc_es:'Considerada una de las mejores playas del mundo. Aguas cristalinas turquesa, arena blanca perfecta y tranquilidad sin igual.', desc_en:'Considered one of the best beaches in the world. Crystal clear turquoise waters, perfect white sand and unmatched tranquility.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Flamenco+Beach+Culebra+Puerto+Rico' },
{ name_es:'Viejo San Juan', name_en:'Old San Juan', location:'San Juan', cat:'history', emoji:'🏰', desc_es:'Ciudad colonial española con 500 años de historia. Calles adoquinadas azules, El Morro, La Fortaleza y arquitectura colonial perfectamente preservada.', desc_en:'Spanish colonial city with 500 years of history. Blue cobblestone streets, El Morro, La Fortaleza and perfectly preserved colonial architecture.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Old+San+Juan+Puerto+Rico' },
{ name_es:'El Yunque', name_en:'El Yunque', location:'Río Grande', cat:'nature', emoji:'🌿', desc_es:'El único bosque tropical nacional de Estados Unidos. Cataratas como La Coca, coquíes, heliconias y una biodiversidad increíble.', desc_en:'The only national tropical forest in the United States. Waterfalls like La Coca, coquí frogs, heliconias and incredible biodiversity.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=El+Yunque+Puerto+Rico' },
{ name_es:'Bahía Bioluminiscente', name_en:'Bioluminescent Bay', location:'Vieques', cat:'nature', emoji:'✨', desc_es:'La Mosquito Bay de Vieques es la bahía bioluminiscente más brillante del mundo. El agua brilla con luz azul mágica al moverse.', desc_en:'Mosquito Bay in Vieques is the world\'s brightest bioluminescent bay. The water glows with magical blue light when moved.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Mosquito+Bay+Vieques+Puerto+Rico' },
{ name_es:'Faro de Cabo Rojo', name_en:'Cabo Rojo Lighthouse', location:'Cabo Rojo', cat:'nature', emoji:'🦩', desc_es:'Uno de los paisajes más dramáticos de Puerto Rico. Acantilados rojos, salinas rosadas con flamencos y vistas al Caribe.', desc_en:'One of Puerto Rico\'s most dramatic landscapes. Red cliffs, pink salt flats with flamingos and Caribbean views.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Cabo+Rojo+Lighthouse+Puerto+Rico' },
{ name_es:'Playa Luquillo', name_en:'Luquillo Beach', location:'Luquillo', cat:'beach', emoji:'🌴', desc_es:'La "Playa del Pueblo" con sus famosos kioscos de comida típica. Aguas tranquilas, palmeras y el ambiente más puertorriqueño.', desc_en:'The "People\'s Beach" with its famous typical food kiosks. Calm waters, palm trees and the most Puerto Rican atmosphere.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Luquillo+Beach+Puerto+Rico' },
{ name_es:'Castillo San Felipe del Morro', name_en:'El Morro Castle', location:'San Juan', cat:'history', emoji:'🏰', desc_es:'Fortaleza española del siglo XVI, Patrimonio de la Humanidad UNESCO. Garitas icónicas, cañones y vistas al Atlántico impresionantes.', desc_en:'16th-century Spanish fortress, UNESCO World Heritage. Iconic sentinels, cannons and impressive Atlantic views.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=El+Morro+Puerto+Rico' },
{ name_es:'Playas de Rincón', name_en:'Rincón Beaches', location:'Rincón', cat:'beach', emoji:'🏄', desc_es:'El paraíso del surf caribeño. Puestas de sol espectaculares, ballenas jorobadas en invierno y olas épicas para surfistas de todo el mundo.', desc_en:'Caribbean surf paradise. Spectacular sunsets, humpback whales in winter and epic waves for surfers worldwide.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Rincon+Puerto+Rico+beaches' },
{ name_es:'Bosque Seco de Guánica', name_en:'Guánica Dry Forest', location:'Guánica', cat:'nature', emoji:'🦎', desc_es:'Reserva de la Biosfera de la UNESCO. El bosque seco tropical mejor preservado del Hemisferio Occidental con 700+ especies de plantas.', desc_en:'UNESCO Biosphere Reserve. The best preserved tropical dry forest in the Western Hemisphere with 700+ plant species.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Guanica+Dry+Forest+Puerto+Rico' },
{ name_es:'Cuevas de Camuy', name_en:'Camuy Caves', location:'Camuy', cat:'adventure', emoji:'🦇', desc_es:'El tercer sistema de cuevas subterráneas más grande del mundo. Estalactitas monumentales, el río subterráneo y formaciones naturales extraordinarias.', desc_en:'The third largest underground cave system in the world. Monumental stalactites, underground river and extraordinary natural formations.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Rio+Camuy+Cave+Park+Puerto+Rico' },
{ name_es:'Parque Ceremonial Caguana', name_en:'Caguana Ceremonial Park', location:'Utuado', cat:'history', emoji:'🗿', desc_es:'El sitio ceremonial taíno más importante del Caribe. Bateyes de piedra con petroglifos del pueblo que habitó Puerto Rico hace 1,000 años.', desc_en:'The most important Taíno ceremonial site in the Caribbean. Stone plazas with petroglyphs from the people who inhabited Puerto Rico 1,000 years ago.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Caguana+Ceremonial+Park+Puerto+Rico' },
{ name_es:'Kioscos de Luquillo', name_en:'Luquillo Kiosks', location:'Luquillo', cat:'food', emoji:'🍽️', desc_es:'La feria gastronómica más famosa de la isla. Bacalaítos, alcapurrias, mofongo y piña coladas con vista al mar. La esencia de la comida boricua.', desc_en:'The island\'s most famous food fair. Bacalaítos, alcapurrias, mofongo and piña coladas with ocean view. The essence of Puerto Rican food.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Luquillo+Kiosks+Puerto+Rico' },
{ name_es:'Isla Verde', name_en:'Isla Verde', location:'Carolina', cat:'beach', emoji:'🌊', desc_es:'La franja hotelera más famosa de Puerto Rico. Playa de arena blanca, hoteles de lujo, casinos y la mejor vida nocturna del Caribe.', desc_en:'Puerto Rico\'s most famous hotel strip. White sand beach, luxury hotels, casinos and the best nightlife in the Caribbean.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Isla+Verde+Puerto+Rico' },
{ name_es:'La Parguera', name_en:'La Parguera', location:'Lajas', cat:'nature', emoji:'🚤', desc_es:'Pueblo de pescadores con bahía bioluminiscente, manglares y cayos para explorar en lancha. Ambiente auténtico y noches mágicas.', desc_en:'Fishing village with bioluminescent bay, mangroves and cays to explore by boat. Authentic atmosphere and magical nights.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=La+Parguera+Puerto+Rico' },
{ name_es:'Laguna Grande (Fajardo)', name_en:'Laguna Grande (Fajardo)', location:'Fajardo', cat:'nature', emoji:'💙', desc_es:'Kayak nocturno en la bahía bioluminiscente de Fajardo. El agua brilla al remar, creando una experiencia mágica e irrepetible.', desc_en:'Night kayaking in Fajardo\'s bioluminescent bay. The water glows as you paddle, creating a magical and unrepeatable experience.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Laguna+Grande+Fajardo+Puerto+Rico' },
{ name_es:'Fiestas de Santiago (Loíza)', name_en:'Santiago Festivities (Loíza)', location:'Loíza', cat:'culture', emoji:'🎭', desc_es:'Las fiestas patronales más africanas de Puerto Rico. Máscaras de vejigantes, bomba y plena, y la rica cultura afroboricua en todo su esplendor.', desc_en:'Puerto Rico\'s most African patron festivities. Vejigante masks, bomba and plena, and rich Afro-Boricua culture in all its splendor.', yt:'https://youtube.com/@ysinmiedo', maps:'https://maps.google.com/?q=Loiza+Puerto+Rico' },
];
// ===== LANGUAGE SYSTEM =====
function selectLang(lang) {
currentLang = lang;
const ws = document.getElementById('welcome-screen');
ws.classList.add('welcome-fade-out');
setTimeout(() => ws.style.display = 'none', 500);
updateLang();
initMuniGrid();
initPlaces();
setupMapInteractions();
}
function setLang(lang) {
currentLang = lang;
document.getElementById('btn-es').classList.toggle('active', lang === 'es');
document.getElementById('btn-en').classList.toggle('active', lang === 'en');
updateLang();
}
function updateLang() {
document.querySelectorAll('[data-es]').forEach(el => {
if (el.tagName === 'INPUT' || el.tagName === 'SELECT') {
el.placeholder = el.getAttribute('data-' + currentLang) || el.placeholder;
} else {
el.textContent = el.getAttribute('data-' + currentLang) || el.textContent;
}
});
document.getElementById('header-sub').textContent = currentLang === 'es' ? 'Puerto Rico Interactivo' : 'Interactive Puerto Rico';
}
// ===== MAP INTERACTIONS =====
function setupMapInteractions() {
const tooltip = document.getElementById('map-tooltip');
const mapEl = document.getElementById('pr-map');
document.querySelectorAll('.muni-path, .island-path').forEach(path => {
const muni = path.dataset.muni;
if (!muni) return;
path.addEventListener('mouseenter', (e) => {
tooltip.textContent = muni;
tooltip.style.opacity = '1';
});
path.addEventListener('mousemove', (e) => {
const rect = mapEl.parentElement.getBoundingClientRect();
const svgRect = mapEl.getBoundingClientRect();
const x = e.clientX - svgRect.left;
const y = e.clientY - svgRect.top;
tooltip.style.left = (x - tooltip.offsetWidth/2) + 'px';
tooltip.style.top = (y - 44) + 'px';
});
path.addEventListener('mouseleave', () => {
tooltip.style.opacity = '0';
});
path.addEventListener('click', () => selectMuni(muni));
});
}
function selectMuni(name) {
// Reset previous
document.querySelectorAll('.muni-path, .island-path').forEach(p => p.classList.remove('selected'));
// Highlight selected
document.querySelectorAll(`[data-muni="${name}"]`).forEach(p => p.classList.add('selected'));
const data = MUNI_DATA[name];
const emptyMsg = document.getElementById('map-empty-msg');
const infoPanel = document.getElementById('map-info-panel');
emptyMsg.style.display = 'none';
infoPanel.classList.add('visible');
document.getElementById('panel-muni-name').textContent = name;
document.getElementById('panel-muni-desc').textContent = data
? (currentLang === 'es' ? data.desc_es : data.desc_en)
: (currentLang === 'es' ? 'Municipio de Puerto Rico. Explora sus lugares únicos y secretos.' : 'Municipality of Puerto Rico. Explore its unique places and secrets.');
const actions = document.getElementById('panel-actions');
if (data) {
actions.innerHTML = `
<a href="${data.yt}" target="_blank" class="muni-btn btn-youtube">▶ ${currentLang === 'es' ? 'Ver Video' : 'Watch Video'}</a>
<a href="${data.maps}" target="_blank" class="muni-btn btn-map">📍 ${currentLang === 'es' ? 'Ver en Mapa' : 'View on Map'}</a>
<button class="muni-btn btn-info" onclick="openMuniModal('${name}')">ℹ️ ${currentLang === 'es' ? 'Más Info' : 'More Info'}</button>
`;
} else {
actions.innerHTML = `
<a href="https://maps.google.com/?q=${encodeURIComponent(name + ' Puerto Rico')}" target="_blank" class="muni-btn btn-map">📍 ${currentLang === 'es' ? 'Ver en Mapa' : 'View on Map'}</a>
`;
}
}
// ===== MODAL =====
function openMuniModal(name) {
const data = MUNI_DATA[name];
if (!data) return;
document.getElementById('modal-title').textContent = name;
document.getElementById('modal-subtitle').textContent = data.emoji + ' ' + (currentLang === 'es' ? 'Municipio de Puerto Rico' : 'Municipality of Puerto Rico');
document.getElementById('modal-description').textContent = currentLang === 'es' ? data.desc_es : data.desc_en;
const vidArea = document.getElementById('modal-video-area');
vidArea.innerHTML = `
<div class="modal-yt-placeholder" onclick="window.open('${data.yt}', '_blank')">
<div class="yt-play-icon">▶</div>
<p style="font-size:15px;margin-bottom:4px;font-weight:600;">${currentLang === 'es' ? 'Ver video en YouTube' : 'Watch on YouTube'}</p>
<p style="font-size:12px;color:rgba(255,255,255,0.5)">SDV – Secretos de Viajero</p>
</div>
`;
const btns = document.getElementById('modal-buttons');
btns.innerHTML = `
<a href="${data.yt}" target="_blank" class="place-btn place-btn-yt">▶ YouTube</a>
<a href="${data.maps}" target="_blank" class="place-btn place-btn-map">📍 Google Maps</a>
`;
document.getElementById('modal').classList.add('open');
}
function closeModal() {
document.getElementById('modal').classList.remove('open');
}
document.getElementById('modal').addEventListener('click', function(e) {
if (e.target === this) closeModal();
});
// ===== PLACES =====
function initPlaces() {
renderPlaces(PLACES_DATA);
}
function filterPlaces(cat, btn) {
document.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const filtered = cat === 'all' ? PLACES_DATA : PLACES_DATA.filter(p => p.cat === cat);
renderPlaces(filtered);
}
function renderPlaces(data) {
const grid = document.getElementById('places-grid');
grid.innerHTML = data.map(p => {
const name = currentLang === 'es' ? p.name_es : p.name_en;
const desc = currentLang === 'es' ? p.desc_es : p.desc_en;
const tagClass = `tag-${p.cat}`;
const tagLabel = {
beach: currentLang==='es'?'Playa':'Beach',
nature: currentLang==='es'?'Naturaleza':'Nature',
history: currentLang==='es'?'Historia':'History',
food: currentLang==='es'?'Gastronomía':'Food',
adventure: currentLang==='es'?'Aventura':'Adventure',
culture: currentLang==='es'?'Cultura':'Culture',
}[p.cat] || p.cat;
return `
<div class="place-card">
<div class="place-img">${p.emoji}</div>
<div class="place-body">
<div class="place-tags">
<span class="place-tag ${tagClass}">${tagLabel}</span>
</div>
<div class="place-name">${name}</div>
<div class="place-location">📍 ${p.location}</div>
<p class="place-desc">${desc}</p>
<div class="place-actions">
<a href="${p.yt}" target="_blank" class="place-btn place-btn-yt">▶ ${currentLang==='es'?'Video':'Video'}</a>
<a href="${p.maps}" target="_blank" class="place-btn place-btn-map">📍 ${currentLang==='es'?'Mapa':'Map'}</a>
</div>
</div>
</div>
`;
}).join('');
}
// ===== MUNI LIST =====
function initMuniGrid() {
renderMunis(uniqueMunis);
}
function filterMunis() {
const query = document.getElementById('muni-search-input').value.toLowerCase();
const region = document.getElementById('region-filter-select').value;
const filtered = uniqueMunis.filter(m => {
const matchName = m.name.toLowerCase().includes(query);
const matchRegion = region === 'all' || m.region === region;
return matchName && matchRegion;
});
renderMunis(filtered);
}
function renderMunis(list) {
const regionNames = {
norte: currentLang==='es'?'Norte':'North',
este: currentLang==='es'?'Este':'East',
sur: currentLang==='es'?'Sur':'South',
oeste: currentLang==='es'?'Oeste':'West',
interior: currentLang==='es'?'Interior':'Interior',
noroeste: currentLang==='es'?'Noroeste':'Northwest',
islas: currentLang==='es'?'Isla Municipio':'Island Municipality',
};
const grid = document.getElementById('muni-list-grid');
grid.innerHTML = list.map(m => {
const data = MUNI_DATA[m.name];
const tagHtml = data ? `<span class="muni-card-tag">${currentLang==='es'?'Info disponible':'Info available'}</span>` : '';
return `
<div class="muni-card" onclick="goToMuni('${m.name}')">
<div class="muni-card-name">${data ? data.emoji + ' ' : '📍 '}${m.name}</div>
<div class="muni-card-region">${regionNames[m.region] || m.region}</div>
${tagHtml}
</div>
`;
}).join('');
}
function goToMuni(name) {
showSection('map');
setTimeout(() => selectMuni(name), 100);
}
// ===== SECTIONS =====
function showSection(id) {
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
document.getElementById('section-' + id).classList.add('active');
document.getElementById('tab-' + id).classList.add('active');
window.scrollTo({top: 0, behavior: 'smooth'});
}
// ===== INIT =====
window.addEventListener('load', () => {
setupMapInteractions();
});
</script>
</body>
</html>
