{"id":2117,"date":"2026-04-21T19:33:16","date_gmt":"2026-04-21T17:33:16","guid":{"rendered":"https:\/\/cocteleriamontana.com\/?page_id=2117"},"modified":"2026-10-08T13:21:46","modified_gmt":"2026-10-08T11:21:46","slug":"%e8%8f%9c%e5%8d%95","status":"publish","type":"page","link":"https:\/\/cocteleriamontana.com\/zh\/carta\/","title":{"rendered":"\u83dc\u5355"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2117\" class=\"elementor elementor-2117\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-71323ac e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"71323ac\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b333508 e-con-full e-flex parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"b333508\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89f74aa elementor-widget elementor-widget-html\" data-id=\"89f74aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =====================================================\n     M\u00d3DULO: LEYENDAS DE SEVILLA - Cocteler\u00eda Montana\n     Archivo: cm-carta-leyendas-v1.6.html\n     Fecha: 21 abril 2026\n     \n     Cambios v1.5 \u2192 v1.6 (08-10-2026, sesi\u00f3n de optimizaci\u00f3n):\n     - El t\u00edtulo pasa de h2 a h1 y dice \u00abCarta de c\u00f3cteles: Leyendas de\n       Sevilla\u00bb (= title de la p\u00e1gina). \/carta\/ no ten\u00eda ning\u00fan H1. Misma\n       clase .cml__title e id cml-title: aspecto y aria-labelledby intactos.\n\n     Cambios v1.4 \u2192 v1.5:\n     === FIX: t\u00edtulo pisaba el men\u00fa sticky del sitio ===\n     - Padding-top del widget subido de 100px a 160px (desktop),\n       120px (tablet), 100px (mobile). Marcado con !important para\n       que nada heredado lo pueda anular.\n     === FIX: info peque\u00f1a vs video desproporcionadamente grande ===\n     - Video iframe limitado a max-width 340px (antes llegaba a 420px).\n       Con aspect 9:16 pasa de 747px de alto a 604px, m\u00e1s razonable.\n     - Grid del panel: columna del video ahora minmax(300px, 360px)\n       (antes minmax(280px, 420px)), dejando m\u00e1s espacio a la info.\n     - Thumbnail de la ilustraci\u00f3n en info: 140x180 (antes 96x120).\n     - T\u00edtulo de la leyenda: clamp(32px, 3.8vw, 44px) (antes 28-38).\n     - Subt\u00edtulo: clamp(17px, 1.9vw, 21px) (antes 16-19).\n     - Quote: clamp(18px, 2vw, 22px) (antes 17-20).\n     - Story: clamp(17px, 1.8vw, 19px) (antes 16-18).\n     - Localizaci\u00f3n: 15px (antes 14px).\n     - Gap entre columnas: 48px (antes 40px).\n===================================================== -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ===== BASE WIDGET ===== *\/\n.cml{\n  --bg:#0a0a0a;--bg-card:#141414;\n  --gold:#d4af37;--gold-soft:rgba(212,175,55,0.08);--gold-light:#f4e7a1;\n  --w:#fff;--w95:rgba(255,255,255,0.95);--w90:rgba(255,255,255,0.9);--w80:rgba(255,255,255,0.8);\n  --w70:rgba(255,255,255,0.7);--w60:rgba(255,255,255,0.6);--w50:rgba(255,255,255,0.5);\n  --w10:rgba(255,255,255,0.1);--w06:rgba(255,255,255,0.06);\n  --azulejo:#1e4d8c;--azulejo-light:#3a7bd5;\n  --serif:'Playfair Display',Georgia,serif;\n  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;\n  --accent:'Cormorant Garamond',Georgia,serif;\n  --ease:0.35s cubic-bezier(0.25,0.46,0.45,0.94);\n\n  \/* FIX v1.3: ocupa todo el ancho + padding-top para no solaparse con header *\/\n  \/* v1.5: padding-top 160px con !important (el men\u00fa sticky del sitio es alto) *\/\n  display:block;\n  width:100%;\n  max-width:100%;\n  margin:0;\n  padding:160px 0 60px !important;\n  background:var(--bg);\n  font-family:var(--sans);\n  color:var(--w70);\n  font-size:16px;\n  line-height:1.6;\n  -webkit-font-smoothing:antialiased;\n  box-sizing:border-box;\n}\n.cml,.cml *,.cml *::before,.cml *::after{margin:0;padding:0;box-sizing:border-box;}\n\n\/* Contenedor interno centrado *\/\n.cml__container{\n  width:100%;\n  max-width:1400px;\n  margin:0 auto;\n  padding:0 24px;\n}\n\n\/* Focus visibility *\/\n.cml__pin:focus-visible,.cml__key-btn:focus-visible,.cml__close:focus-visible,\n.cml__nav-btn:focus-visible,.cml__filter-btn:focus-visible,.cml__reset-btn:focus-visible{\n  outline:3px solid var(--gold-light);outline-offset:3px;\n}\n\n\/* ===== HEADER ===== *\/\n.cml__title{\n  font-family:var(--serif);\n  font-size:clamp(32px,4vw,48px);\n  font-weight:400;\n  color:var(--gold);\n  margin-bottom:20px;\n  text-align:center;\n  line-height:1.2;\n}\n.cml__intro{\n  font-family:var(--accent);\n  font-size:clamp(17px,1.9vw,20px);\n  font-weight:300;\n  font-style:italic;\n  color:var(--w70);\n  line-height:1.65;\n  max-width:780px;\n  margin:0 auto 48px;\n  text-align:center;\n}\n\n\/* ===== MAPA FULL-WIDTH ===== *\/\n.cml__map-wrap{\n  position:relative;\n  width:100%;\n  overflow:hidden;\n  border-radius:16px;\n  border:2px solid var(--azulejo);\n  box-shadow:0 0 60px rgba(30,77,140,0.12);\n  background:#000;\n}\n.cml__map-img{\n  width:100%;\n  height:auto;\n  display:block;\n  filter:sepia(0.15) brightness(0.92) contrast(1.05);\n}\n.cml__pins{position:absolute;inset:0;}\n\n\/* Pins *\/\n.cml__pin{\n  position:absolute;\n  transform:translate(-50%,-50%);\n  cursor:pointer;\n  background:none;border:none;padding:0;z-index:5;\n  -webkit-tap-highlight-color:transparent;outline:none;\n}\n\/* Hit area invisible 44x44 para cumplir WCAG 2.5.5 target size *\/\n.cml__pin::before{\n  content:'';\n  position:absolute;top:50%;left:50%;\n  width:44px;height:44px;\n  transform:translate(-50%,-50%);\n  border-radius:50%;\n}\n.cml__pin-glow{\n  position:absolute;top:50%;left:50%;\n  width:50px;height:50px;\n  transform:translate(-50%,-50%);\n  border-radius:50%;\n  border:2px solid var(--gold);\n  opacity:0;\n  animation:cml-pulse 2.5s ease-in-out infinite;\n  pointer-events:none;\n}\n.cml__pin:nth-child(odd) .cml__pin-glow{animation-delay:0s;}\n.cml__pin:nth-child(even) .cml__pin-glow{animation-delay:1.25s;}\n@keyframes cml-pulse{\n  0%,100%{opacity:0;transform:translate(-50%,-50%) scale(0.8);}\n  50%{opacity:0.6;transform:translate(-50%,-50%) scale(1.4);}\n}\n.cml__pin-dot{\n  display:flex;align-items:center;justify-content:center;\n  width:36px;height:36px;border-radius:50%;\n  background:var(--azulejo);\n  border:2.5px solid var(--w);\n  color:var(--w);\n  font-family:var(--serif);\n  font-size:15px;font-weight:600;\n  box-shadow:0 2px 12px rgba(0,0,0,0.5),0 0 0 4px rgba(30,77,140,0.3);\n  transition:all 0.3s;\n  position:relative;z-index:2;\n}\n.cml__pin:hover .cml__pin-dot,\n.cml__pin[aria-expanded=\"true\"] .cml__pin-dot{\n  background:var(--gold);border-color:var(--w);color:#1a1512;\n  transform:scale(1.18);\n  box-shadow:0 2px 22px rgba(212,175,55,0.55),0 0 0 5px rgba(212,175,55,0.3);\n}\n.cml__pin.is-found .cml__pin-dot{background:var(--gold);color:#1a1512;}\n.cml__pin.is-dimmed{opacity:0.3;pointer-events:none;}\n.cml__pin-label{\n  position:absolute;top:100%;left:50%;\n  transform:translateX(-50%);margin-top:6px;\n  font-family:var(--serif);font-size:13px;font-weight:600;color:var(--w);\n  white-space:nowrap;\n  text-shadow:0 1px 4px rgba(0,0,0,1),0 0 8px rgba(0,0,0,0.9),0 0 16px rgba(0,0,0,0.7);\n  pointer-events:none;\n}\n\n\/* ===== PANEL DESPLEGABLE ===== *\/\n.cml__panel{\n  width:100%;\n  max-height:0;\n  overflow:hidden;\n  background:#0f1218;\n  border-radius:16px;\n  margin-top:0;\n  border:2px solid transparent;\n  transition:max-height 0.6s cubic-bezier(0.25,0.46,0.45,0.94),\n             margin-top 0.4s ease,\n             border-color 0.4s ease;\n  position:relative;\n}\n.cml__panel.is-open{\n  max-height:2400px;\n  margin-top:20px;\n  border-color:var(--azulejo);\n  box-shadow:0 20px 60px rgba(0,0,0,0.4);\n}\n\n\/* Accent top band *\/\n.cml__panel::before{\n  content:'';\n  display:block;\n  height:4px;\n  background:linear-gradient(90deg,transparent 0%,var(--azulejo) 20%,var(--azulejo-light) 50%,var(--azulejo) 80%,transparent 100%);\n}\n\n\/* Close button *\/\n.cml__close{\n  position:absolute;\n  top:20px;right:20px;\n  width:44px;height:44px;\n  background:rgba(255,255,255,0.08);\n  border:1px solid rgba(255,255,255,0.15);\n  border-radius:50%;\n  color:var(--w80);\n  font-size:22px;cursor:pointer;\n  display:flex;align-items:center;justify-content:center;\n  transition:all 0.3s;\n  z-index:10;\n}\n.cml__close:hover{\n  background:rgba(212,175,55,0.2);\n  border-color:var(--gold);\n  color:var(--gold);\n  transform:rotate(90deg);\n}\n\n\/* Inner 2-column layout *\/\n.cml__panel-inner{\n  display:grid;\n  grid-template-columns:minmax(300px,360px) 1fr;\n  gap:48px;\n  padding:56px 48px;\n  align-items:start;\n  transition:opacity 0.25s ease;\n}\n.cml__panel-inner.is-changing{opacity:0.3;}\n\n\/* ===== MEDIA COLUMN (video or illustration) ===== *\/\n.cml__media{\n  width:100%;\n  max-width:360px;\n  margin:0 auto;\n  border-radius:14px;\n  overflow:hidden;\n  background:#000;\n  position:relative;\n}\n.cml__media iframe{\n  display:block;\n  width:100%;\n  aspect-ratio:9\/16;\n  border:0;\n  background:#000;\n}\n.cml__media-img{\n  display:block;\n  width:100%;\n  height:auto;\n  aspect-ratio:4\/5;\n  object-fit:cover;\n}\n\n\/* ===== INFO COLUMN ===== *\/\n.cml__info{\n  color:var(--w80);\n  min-width:0; \/* prevent overflow in grid *\/\n}\n.cml__info-header{\n  display:flex;\n  align-items:flex-start;\n  gap:24px;\n  margin-bottom:28px;\n}\n.cml__info-thumb{\n  flex-shrink:0;\n  width:140px;height:180px;\n  border-radius:12px;\n  overflow:hidden;\n  background:#222;\n  border:1px solid var(--w10);\n  box-shadow:0 8px 24px rgba(0,0,0,0.4);\n}\n.cml__info-thumb img{\n  display:block;width:100%;height:100%;object-fit:cover;\n}\n.cml__info-title-wrap{flex:1;min-width:0;}\n.cml__num{\n  display:inline-flex;align-items:center;justify-content:center;\n  width:38px;height:38px;border-radius:50%;\n  background:var(--azulejo);color:var(--w);\n  font-family:var(--serif);font-size:16px;font-weight:600;\n  margin-bottom:14px;\n}\n.cml__name{\n  font-family:var(--serif);\n  font-size:clamp(32px,3.8vw,46px);\n  font-weight:500;\n  color:var(--w95);\n  line-height:1.12;\n  margin-bottom:8px;\n}\n.cml__sub{\n  font-family:var(--accent);\n  font-size:clamp(18px,2vw,22px);\n  font-style:italic;\n  color:var(--w80);\n}\n.cml__quote{\n  font-family:var(--accent);\n  font-size:clamp(19px,2.1vw,23px);\n  font-weight:400;font-style:italic;\n  color:var(--gold-light);\n  line-height:1.5;\n  margin-bottom:26px;\n  padding:0 0 20px;\n  border-bottom:1px solid var(--w10);\n}\n.cml__meta-row{\n  display:flex;\n  flex-wrap:wrap;\n  gap:12px;\n  align-items:center;\n  margin-bottom:20px;\n}\n.cml__ing{\n  display:inline-flex;align-items:center;gap:10px;\n  padding:10px 16px;\n  background:var(--gold-soft);\n  border-radius:12px;\n  border:1px solid rgba(212,175,55,0.18);\n  font-family:var(--sans);\n  font-size:14px;font-weight:500;\n  color:var(--w90);\n}\n.cml__ing svg{flex-shrink:0;color:var(--gold);}\n.cml__ing-tbd{font-style:italic;color:var(--w70);font-weight:400;}\n.cml__price{\n  display:inline-block;\n  font-family:var(--sans);\n  font-size:15px;font-weight:700;\n  color:var(--w);\n  background:var(--azulejo);\n  padding:6px 14px;\n  border-radius:20px;\n}\n.cml__serving{\n  display:inline-block;\n  padding:5px 12px;\n  font-family:var(--sans);\n  font-size:12px;font-weight:500;\n  color:var(--gold-light);\n  background:rgba(212,175,55,0.1);\n  border:1px solid rgba(212,175,55,0.22);\n  border-radius:14px;\n}\n.cml__story-label{\n  font-family:var(--sans);\n  font-size:13px;font-weight:600;\n  text-transform:uppercase;letter-spacing:0.14em;\n  color:var(--azulejo-light);\n  margin-bottom:12px;\n}\n.cml__story{\n  font-family:var(--accent);\n  font-size:clamp(17px,1.8vw,20px);\n  color:var(--w85,rgba(255,255,255,0.85));\n  line-height:1.75;\n  margin-bottom:24px;\n}\n.cml__loc{\n  padding-top:18px;\n  border-top:1px solid var(--w10);\n  display:flex;align-items:center;gap:10px;\n  font-family:var(--sans);\n  font-size:15px;color:var(--w80);\n}\n.cml__loc svg{flex-shrink:0;color:var(--azulejo-light);}\n\n\/* Prev\/Next navigation *\/\n.cml__nav{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  margin-top:24px;\n  padding-top:20px;\n  border-top:1px solid var(--w06);\n}\n.cml__nav-btn{\n  display:flex;align-items:center;gap:8px;\n  padding:10px 18px;\n  background:var(--w06);\n  border:1px solid var(--w10);\n  border-radius:8px;\n  color:var(--w80);\n  font-family:var(--sans);\n  font-size:14px;font-weight:500;\n  cursor:pointer;\n  transition:all 0.25s;\n}\n.cml__nav-btn:hover{\n  background:var(--gold-soft);\n  border-color:rgba(212,175,55,0.25);\n  color:var(--gold);\n}\n.cml__nav-count{\n  font-family:var(--sans);\n  font-size:13px;color:var(--w70);\n}\n\n\/* ===== PROGRESS \/ FILTERS \/ KEY ===== *\/\n.cml__progress{\n  text-align:center;\n  margin-top:32px;\n  font-family:var(--sans);\n  font-size:15px;color:var(--w70);\n}\n.cml__progress-count{color:var(--gold);font-weight:700;font-size:17px;}\n.cml__hint{\n  text-align:center;margin-top:12px;\n  font-family:var(--accent);\n  font-size:16px;font-style:italic;\n  color:var(--w70);\n}\n.cml__completion{\n  margin:20px auto 0;\n  max-width:520px;\n  padding:16px 22px;text-align:center;\n  background:linear-gradient(135deg,rgba(212,175,55,0.14),rgba(212,175,55,0.04));\n  border:1px solid rgba(212,175,55,0.25);\n  border-radius:14px;\n  color:var(--gold-light);\n}\n.cml__completion strong{\n  display:block;margin-bottom:6px;\n  font-family:var(--serif);font-size:20px;font-weight:500;\n}\n.cml__completion span{color:var(--w90);font-size:14px;}\n.cml__reset-btn{\n  display:inline-block;margin-top:14px;\n  min-height:44px;\n  padding:11px 24px;\n  background:transparent;\n  border:1px solid rgba(212,175,55,0.35);\n  border-radius:22px;\n  color:var(--gold-light);\n  font-family:var(--sans);\n  font-size:14px;font-weight:500;\n  cursor:pointer;transition:all 0.25s;\n}\n.cml__reset-btn:hover{background:var(--gold-soft);border-color:var(--gold);}\n\n.cml__filters{\n  display:flex;justify-content:center;\n  gap:8px;margin-top:24px;flex-wrap:wrap;\n}\n.cml__filter-btn{\n  min-height:44px;\n  padding:10px 22px;border-radius:22px;\n  background:var(--w06);\n  border:1px solid transparent;\n  font-family:var(--sans);\n  font-size:14px;font-weight:500;\n  color:var(--w70);cursor:pointer;transition:all 0.25s;\n}\n.cml__filter-btn:hover{background:var(--gold-soft);color:var(--gold);}\n.cml__filter-btn.is-active{\n  background:var(--gold-soft);\n  border-color:rgba(212,175,55,0.3);\n  color:var(--gold);\n}\n\n.cml__filter-empty{\n  margin-top:16px;padding:14px 18px;\n  text-align:center;\n  font-family:var(--accent);\n  font-size:15px;font-style:italic;\n  color:var(--w70);\n  background:var(--w06);border-radius:10px;\n  max-width:520px;margin-left:auto;margin-right:auto;\n}\n\n.cml__keys{\n  display:flex;flex-wrap:wrap;\n  justify-content:center;gap:8px;\n  margin-top:28px;\n}\n.cml__key-btn{\n  display:flex;align-items:center;gap:8px;cursor:pointer;\n  min-height:40px;\n  padding:9px 18px;border-radius:22px;\n  background:var(--w06);border:1px solid transparent;\n  transition:all var(--ease);\n  font-family:var(--sans);\n  font-size:14px;color:var(--w80);\n}\n.cml__key-btn:hover{\n  background:var(--gold-soft);\n  border-color:rgba(212,175,55,0.18);\n  color:var(--gold);\n}\n.cml__key-btn.is-found{\n  color:var(--gold);\n  background:var(--gold-soft);\n  border-color:rgba(212,175,55,0.22);\n}\n.cml__key-btn[aria-pressed=\"true\"]{\n  color:var(--gold);\n  background:var(--gold-soft);\n  border-color:rgba(212,175,55,0.32);\n}\n.cml__key-btn.is-hidden{display:none;}\n.cml__key-dot{\n  width:10px;height:10px;border-radius:50%;\n  background:var(--azulejo);\n  flex-shrink:0;transition:background 0.3s;\n}\n.cml__key-btn.is-found .cml__key-dot{background:var(--gold);}\n\n\/* Hover link pin <-> key *\/\n.cml__key-btn.is-linked{\n  background:var(--gold-soft);\n  border-color:rgba(212,175,55,0.18);\n  color:var(--gold);\n}\n.cml__pin.is-linked .cml__pin-dot{\n  background:var(--gold);color:#1a1512;transform:scale(1.12);\n  box-shadow:0 2px 18px rgba(212,175,55,0.45);\n}\n\n\/* Discovery animations *\/\n@keyframes cml-discovered{\n  0%{transform:scale(1);}\n  30%{transform:scale(1.4);}\n  60%{transform:scale(0.9);}\n  100%{transform:scale(1);}\n}\n.cml__pin-dot.is-just-found{animation:cml-discovered 0.5s ease-out;}\n@keyframes cml-key-flash{\n  0%{box-shadow:0 0 0 0 rgba(212,175,55,0.5);}\n  100%{box-shadow:0 0 0 14px rgba(212,175,55,0);}\n}\n.cml__key-btn.is-just-found{animation:cml-key-flash 0.6s ease-out;}\n\n\/* ===== RESPONSIVE ===== *\/\n@media(max-width:960px){\n  .cml{padding:120px 0 48px !important;}\n  .cml__panel-inner{\n    grid-template-columns:1fr;\n    gap:32px;\n    padding:40px 28px;\n  }\n  .cml__media{max-width:360px;}\n  .cml__media iframe{aspect-ratio:9\/16;max-width:360px;margin:0 auto;}\n  .cml__media-img{aspect-ratio:4\/5;max-width:360px;margin:0 auto;}\n}\n@media(max-width:640px){\n  .cml{padding:100px 0 40px !important;}\n  .cml__container{padding:0 16px;}\n  .cml__pin-dot{width:32px;height:32px;font-size:13px;border-width:2px;}\n  .cml__pin-label{font-size:12px;margin-top:4px;}\n  .cml__keys{gap:6px;}\n  .cml__key-btn{font-size:13px;padding:9px 14px;}\n  .cml__filter-btn{font-size:13px;padding:10px 18px;}\n  .cml__info-header{gap:18px;}\n  .cml__info-thumb{width:110px;height:140px;}\n  .cml__close{top:12px;right:12px;}\n  .cml__panel-inner{padding:32px 20px;}\n}\n@media(max-width:480px){\n  .cml__pin-dot{width:30px;height:30px;font-size:12px;}\n  .cml__pin-label{font-size:11px;}\n  .cml__pin-glow{width:42px;height:42px;}\n  .cml__info-header{flex-direction:column;}\n  .cml__info-thumb{width:140px;height:180px;}\n}\n@media(prefers-reduced-motion:reduce){\n  .cml__pin-glow,.cml__pin-dot.is-just-found,.cml__key-btn.is-just-found{animation:none !important;}\n  .cml__panel,.cml__pin-dot,.cml__close,.cml__panel-inner{transition:none !important;}\n}\n@media(forced-colors:active){\n  .cml__pin-dot{border:2px solid ButtonText;}\n  .cml__panel,.cml__map-wrap{border:2px solid ButtonText;}\n}\n@media print{\n  .cml__panel,.cml__keys,.cml__hint,.cml__progress,.cml__filters,.cml__completion,.cml__filter-empty{display:none;}\n}\n<\/style>\n\n<!-- =========================================\n     SECCI\u00d3N LEYENDAS DE SEVILLA\n========================================= -->\n<section class=\"cml\" id=\"cm-leyendas\" lang=\"es\" aria-labelledby=\"cml-title\">\n  <div class=\"cml__container\">\n\n    <h1 class=\"cml__title\" id=\"cml-title\">Carta de c\u00f3cteles: Leyendas de Sevilla<\/h1>\n    <p class=\"cml__intro\">\n      Cada c\u00f3ctel esconde una leyenda que habita en las calles de Sevilla. \n      Explora el mapa, descubre sus historias de amor, traici\u00f3n y misterio, \n      y d\u00e9jate seducir por los sabores que las acompa\u00f1an.\n    <\/p>\n\n    <!-- MAPA FULL-WIDTH -->\n    <div class=\"cml__map-wrap\">\n      <img loading=\"lazy\" class=\"cml__map-img\" src=\"https:\/\/cocteleriamontana.com\/wp-content\/uploads\/2026\/04\/mapa-sevilla-ok.jpeg\" alt=\"Mapa ilustrado de Sevilla con las ubicaciones de las 11 leyendas\" loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"910\" title=\"\">\n      <div class=\"cml__pins\" id=\"cml-pins\"><\/div>\n    <\/div>\n\n    <!-- PANEL DESPLEGABLE -->\n    <div class=\"cml__panel\" id=\"cml-panel\" role=\"region\" aria-label=\"Detalle de la leyenda seleccionada\" aria-live=\"polite\">\n      <button type=\"button\" class=\"cml__close\" id=\"cml-close\" aria-label=\"Cerrar leyenda\" title=\"Cerrar\">&times;<\/button>\n      <div class=\"cml__panel-inner\" id=\"cml-panel-inner\">\n        <!-- Content injected by JS -->\n      <\/div>\n    <\/div>\n\n    <!-- PROGRESS -->\n    <div class=\"cml__progress\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n      Has descubierto <span class=\"cml__progress-count\" id=\"cml-found\">0<\/span> \n      de <span id=\"cml-total\">11<\/span> leyendas\n    <\/div>\n    <p class=\"cml__hint\">Pulsa sobre cada punto del mapa para descubrir la leyenda y su c\u00f3ctel<\/p>\n\n    <div class=\"cml__completion\" id=\"cml-completion\" hidden>\n      <strong>Ya has descubierto las 11 leyendas.<\/strong>\n      <span>Ahora el mapa s\u00ed se siente completo.<\/span>\n      <br>\n      <button type=\"button\" class=\"cml__reset-btn\" id=\"cml-reset\">Reiniciar exploraci\u00f3n<\/button>\n    <\/div>\n\n    <!-- FILTERS -->\n    <div class=\"cml__filters\" aria-label=\"Filtrar leyendas\">\n      <button type=\"button\" class=\"cml__filter-btn is-active\" data-filter=\"all\" aria-pressed=\"true\">Todas<\/button>\n      <button type=\"button\" class=\"cml__filter-btn\" data-filter=\"pending\" aria-pressed=\"false\">Pendientes<\/button>\n      <button type=\"button\" class=\"cml__filter-btn\" data-filter=\"found\" aria-pressed=\"false\">Descubiertas<\/button>\n    <\/div>\n\n    <div class=\"cml__filter-empty\" id=\"cml-filter-empty\" hidden><\/div>\n\n    <!-- KEY (list of legends) -->\n    <div class=\"cml__keys\" id=\"cml-keys\" aria-label=\"Lista de leyendas\"><\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function() {\n  'use strict';\n\n  var root = document.getElementById('cm-leyendas');\n  if (!root || root.dataset.cmlInit) return;\n  root.dataset.cmlInit = '1';\n\n  function q(s) { return root.querySelector(s); }\n  function qa(s) { return root.querySelectorAll(s); }\n\n  \/* =====================================================\n     DATOS DE LAS LEYENDAS\n     ===================================================== *\/\n  var legends = [\n    {\n      num: 1, name: \"Antinoo\", sub: \"El Emperador Errante\",\n      quote: \"Como noche en tus brazos, breve fue nuestra dicha.\",\n      ing: \"Ron \u00b7 Pi\u00f1a \u00b7 Coco\", serving: \"Pi\u00f1a Colada Clarificada\", price: \"10 \u20ac\",\n      img: \"https:\/\/cocteleriamontana.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-16-at-20.36.06.jpeg\",\n      story: \"Adriano se enamora del efebo adolescente Antinoo. Este muere ahogado. Obsesionado, llena el imperio de bustos con su rostro, lo eleva a divinidad y crea ciudades con su nombre, en su eterno duelo.\",\n      loc: \"Antiquarium \u2014 Plaza de la Encarnaci\u00f3n\",\n      x: 47, y: 25,\n      video: { type: \"youtube\", id: \"azyw_sgTfGw\", title: \"El emperador romano que am\u00f3 a un esclavo: Adriano y Ant\u00ednoo\" }\n    },\n    {\n      num: 2, name: \"Justa y Rufina\", sub: \"Las Alfareras M\u00e1rtires\",\n      quote: \"Torres fort\u00edsimas.\",\n      ing: \"Hoja de higo \u00b7 Granada \u00b7 Miel\", serving: \"Sin alcohol \u2014 vaso de cer\u00e1mica\", price: \"10 \u20ac\",\n      img: \"https:\/\/cocteleriamontana.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-16-at-20.36.06-1.jpeg\",\n      story: \"Eran dos hermanas alfareras de Triana, en la \u00e9poca romana. Fueron condenadas a prisi\u00f3n, martirio y muerte por practicar la religi\u00f3n cristiana. Entre sus milagros se cuenta que aguantaron la Giralda en pie durante el terremoto de Lisboa.\",\n      loc: \"La Giralda \u2014 Catedral de Sevilla\",\n      x: 74, y: 70, video: null\n    },\n    {\n      num: 3, name: \"Rumaykkyya\", sub: \"Itimad\",\n      quote: \"El coraz\u00f3n persiste y no cesa.\",\n      ing: \"T\u00e9 de jazm\u00edn \u00b7 Azahar \u00b7 Frutas\", serving: \"Sin alcohol \u2014 copa c\u00e1liz dorada\", price: \"10 \u20ac\",\n      img: \"https:\/\/cocteleriamontana.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-16-at-21.11.25.jpeg\",\n      story: \"Al-Mutamid, el \u00faltimo rey moro de Sevilla, se prenda de la esclava Itimad y la hace su \u00fanica esposa. Permaneciendo por siempre a su lado, hizo sembrar miles de almendros para emular un paisaje nevado y mitigar la nostalgia de su esposa por Granada.\",\n      loc: \"Real Alc\u00e1zar de Sevilla\",\n      x: 57, y: 38,\n      video: { type: \"tiktok\", id: \"7557287506023025942\", title: \"La leyenda de Rumaykyya\" }\n    },\n    {\n      num: 4, name: \"Don Fadrique\", sub: \"La Torre del Amor\",\n      quote: \"En un t\u00e1lamo de piedra se consumar\u00e1 el amor.\",\n      ing: \"Gin infusionado \u00b7 Bitter \u00b7 Vermut casero\", serving: \"Negroni \u2014 vaso vidriado\", price: \"10 \u20ac\",\n      img: \"https:\/\/cocteleriamontana.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-16-at-20.36.06-2.jpeg\",\n      story: \"El Infante Don Fadrique tiene amores en secreto en la torre con su madrastra, la Reina Juana. Es descubierto y muerto por decapitaci\u00f3n.\",\n      loc: \"Torre de Don Fadrique \u2014 Santa Clara\",\n      x: 10, y: 33,\n      video: { type: \"youtube\", id: \"1mmwTFLG6yg\", title: \"Torre de Don Fadrique\" }\n    },\n    {\n      num: 5, name: \"Do\u00f1a Mar\u00eda Coronel\", sub: \"La Belleza Maldita\",\n      quote: \"La belleza maldita.\",\n      ing: \"Amaretto \u00b7 Whiskey \u00b7 Especias\", serving: \"Whiskey Sour \/ Old Fashioned Fat Wash\", price: \"10 \u20ac\",\n      img: \"https:\/\/cocteleriamontana.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-16-at-20.36.06-3.jpeg\",\n      story: \"Su marido es ajusticiado por el rey Pedro I, quien la persigue por su gran hermosura. Para escapar de las manos del monarca, vierte sobre su rostro una sart\u00e9n de aceite hirviendo, quedando desfigurada para siempre, perdiendo el rey todo inter\u00e9s por ella.\",\n      loc: \"Convento de Santa In\u00e9s \u2014 C\/ Do\u00f1a Mar\u00eda Coronel\",\n      x: 22, y: 16,\n      video: { type: \"youtube\", id: \"vwOtcutXqH8\", title: \"La leyenda de Do\u00f1a Mar\u00eda Coronel\" }\n    },\n    {\n      num: 6, name: \"Cabeza del Rey\", sub: \"Don Pedro I\",\n      quote: \"Nos vemos donde nadie nos ve.\",\n      ing: \"Vodka \u00b7 Ginger beer \u00b7 Lima\", serving: \"Horse Neck \/ Moscow Mule \u2014 vaso alto\", price: \"10 \u20ac\",\n      img: \"https:\/\/cocteleriamontana.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-16-at-20.36.06-4.jpeg\",\n      story: \"El Rey da muerte a un joven noble que sorprende saliendo de la casa de una doncella con la que tiene amores secretos. Es visto por una anciana que prend\u00eda un candil. Sentencia colocar in situ la cabeza del culpable, prendiendo su propia cabeza, esculpida en piedra, tap\u00e1ndola con una cortina.\",\n      loc: \"Calle Cabeza del Rey Don Pedro\",\n      x: 38, y: 10,\n      video: { type: \"youtube\", id: \"Xdwg1R5xiWk\", title: \"La leyenda de la cabeza del Rey Don Pedro\" }\n    },\n    {\n      num: 7, name: \"La Susona\", sub: \"Amor y traici\u00f3n\",\n      quote: \"Amor y traici\u00f3n.\",\n      ing: \"Vino tinto \u00b7 Vermut \u00b7 Frutas\", serving: \"Sangr\u00eda \u2014 calavera\", price: \"10 \u20ac\",\n      img: \"https:\/\/cocteleriamontana.com\/wp-content\/uploads\/2026\/04\/Susona.jpeg\",\n      story: \"La hermosa joven jud\u00eda conversa se enamora de un noble cristiano, al que cuenta que su padre conspira en secreto. Al enterarse, toda su familia es ajusticiada. Queda ella atormentada por la culpa, disponiendo en testamento que su cabeza permanezca por siempre en el dintel de su casa, como s\u00edmbolo de arrepentimiento.\",\n      loc: \"Calle Susona \u2014 Barrio de Santa Cruz\",\n      x: 67, y: 24,\n      video: { type: \"youtube\", id: \"Ld73KGfpmPM\", title: \"La leyenda de Susona\" }\n    },\n    {\n      num: 8, name: \"Guaran\u00ed\", sub: \"Amor protector\",\n      quote: \"Amor protector.\",\n      ing: \"Papaya \u00b7 Mango \u00b7 Tequila\", serving: \"Inspiraci\u00f3n Guaran\u00ed \u2014 cabeza del esclavo\", price: \"10 \u20ac\",\n      img: \"https:\/\/cocteleriamontana.com\/wp-content\/uploads\/2026\/04\/Guarani.jpeg\",\n      story: \"Se dice que los esp\u00edritus ancestrales representados en estas cabezas esculpidas por los guaran\u00edes en el Paraguay, m\u00e1s all\u00e1 de las cataratas de Iguaz\u00fa, son un amuleto protector contra todo mal que quisiera adentrarse dentro del Convento de San Pablo.\",\n      loc: \"Convento de San Pablo \u2014 Plaza de la Encarnaci\u00f3n\",\n      x: 32, y: 48,\n      video: { type: \"youtube\", id: \"eLtZ7EWafgU\", title: \"El Pueblo que Habla con los Dioses: Secretos de los Guaran\u00edes\" }\n    },\n    {\n      num: 9, name: \"Don Juan Tenorio\", sub: \"El Burlador de Sevilla\",\n      quote: \"No es verdad, \u00e1ngel de amor, que en esta apartada orilla, m\u00e1s pura la luna brilla.\",\n      ing: \"Jerez \u00b7 Vermut \u00b7 Naranja amarga\", serving: \"Adonis \u2014 100% vino de Jerez\", price: \"10 \u20ac\",\n      img: \"https:\/\/cocteleriamontana.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-16-at-20.36.06-5.jpeg\",\n      story: \"Don Juan se da cita en la taberna del Laurel de Sevilla con su amigo Don Luis para comparar las fechor\u00edas del \u00faltimo a\u00f1o. Apuesta seducir a una novicia, Do\u00f1a In\u00e9s, hija del comendador. Enga\u00f1a, seduce y da muerte. Al regresar, encuentra a Do\u00f1a In\u00e9s muerta de pena. Su espectro intercede y Don Juan es perdonado, subiendo al cielo con ella.\",\n      loc: \"Hoster\u00eda del Laurel \u2014 Barrio de Santa Cruz\",\n      x: 72, y: 8,\n      video: { type: \"youtube\", id: \"opdImBv6hk0\", title: \"Don Juan Tenorio \u2014 Resumen\" }\n    },\n    {\n      num: 10, name: \"Carmen\", sub: \"La Cigarrera Ind\u00f3mita\",\n      quote: \"El amor es un p\u00e1jaro rebelde que nadie puede enjaular.\",\n      ing: \"Mezcal \u00b7 Fruta de la pasi\u00f3n \u00b7 Hibisco\", serving: \"Carmen Porn Star Martini \u2014 copa coupe\", price: \"10 \u20ac\",\n      img: \"https:\/\/cocteleriamontana.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-16-at-21.11.25-1.jpeg\",\n      story: \"La legendaria cigarrera que desafi\u00f3 Sevilla y la historia. Protagonista inmortal de M\u00e9rim\u00e9e y Bizet, Carmen encarn\u00f3 la pasi\u00f3n y la libertad en la antigua Real F\u00e1brica de Tabacos, donde miles de mujeres enrollaban cigarros con las manos y cantaban a coro. Su car\u00e1cter indomable y su final tr\u00e1gico la convirtieron en mito universal.\",\n      loc: \"Real F\u00e1brica de Tabacos \u2014 Universidad de Sevilla\",\n      x: 75, y: 65,\n      video: { type: \"youtube\", id: \"UHHgDmz_vg8\", title: \"Carmen, la cigarrera ind\u00f3mita que desafi\u00f3 Sevilla\" }\n    },\n    {\n      num: 11, name: \"B\u00e9cquer\", sub: \"Deseo, gozo, ausencia\",\n      quote: \"Los invisibles \u00e1tomos del aire en derredor palpitan y se inflaman.\",\n      ing: \"Agua de manzana \u00b7 Rosas \u00b7 Cava\", serving: \"French 75 sin alcohol \u2014 con CO2\", price: \"10 \u20ac\",\n      img: \"https:\/\/cocteleriamontana.com\/wp-content\/uploads\/2026\/04\/WhatsApp-Image-2026-04-16-at-21.11.25-2.jpeg\",\n      story: \"Los invisibles \u00e1tomos del aire en derredor palpitan y se inflaman, el cielo se deshace en rayos de oro, la tierra se estremece alborozada. Oigo flotando en olas de armon\u00edas, rumor de besos y batir de alas; mis p\u00e1rpados se cierran\u2026 \u00bfQu\u00e9 sucede? \u00a1Silencio! \u00a1Es el amor que pasa!\",\n      loc: \"Glorieta de B\u00e9cquer \u2014 Parque de Mar\u00eda Luisa\",\n      x: 86, y: 48,\n      video: { type: \"tiktok\", id: \"7504338094133382422\", title: \"B\u00e9cquer\" }\n    }\n  ];\n\n  \/* ===== STATE ===== *\/\n  var STORAGE_KEY = 'cml-legends-found-v1';\n  var currentIdx = -1;\n  var currentFilter = 'all';\n  var lastTrigger = null;\n\n  var pinsContainer = document.getElementById('cml-pins');\n  var keysContainer = document.getElementById('cml-keys');\n  var filterEmptyEl = document.getElementById('cml-filter-empty');\n  var panel = document.getElementById('cml-panel');\n  var panelInner = document.getElementById('cml-panel-inner');\n  var closeBtn = document.getElementById('cml-close');\n  var foundEl = document.getElementById('cml-found');\n  var totalEl = document.getElementById('cml-total');\n  var completionEl = document.getElementById('cml-completion');\n  var filterBtns = [];\n  var resetBtn = document.getElementById('cml-reset');\n\n  if (totalEl) totalEl.textContent = String(legends.length);\n\n  \/* ===== HELPERS ===== *\/\n  function esc(s) {\n    return String(s || '')\n      .replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;').replace(\/\"\/g,'&quot;');\n  }\n  function loadFound() {\n    try {\n      var r = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');\n      return r.filter(function(v){ return Number.isInteger(v) && v >= 0 && v < legends.length; });\n    } catch(e) { return []; }\n  }\n  function saveFound() {\n    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(found))); } catch(e) {}\n  }\n  var found = new Set(loadFound());\n\n  function gi(el) { return parseInt(el.getAttribute('data-idx'), 10); }\n\n  \/* ===== BUILD PINS + KEYS ===== *\/\n  legends.forEach(function(l, i) {\n    var pin = document.createElement('button');\n    pin.type = 'button';\n    pin.className = 'cml__pin';\n    pin.dataset.idx = String(i);\n    pin.style.left = l.x + '%';\n    pin.style.top = l.y + '%';\n    pin.setAttribute('aria-label', 'Leyenda ' + l.num + ': ' + l.name + ' (pendiente)');\n    pin.setAttribute('aria-controls', 'cml-panel');\n    pin.setAttribute('aria-expanded', 'false');\n    pin.innerHTML = '<span class=\"cml__pin-glow\" aria-hidden=\"true\"><\/span>' +\n                    '<span class=\"cml__pin-dot\" aria-hidden=\"true\">' + l.num + '<\/span>' +\n                    '<span class=\"cml__pin-label\" aria-hidden=\"true\">' + esc(l.name) + '<\/span>';\n    pinsContainer.appendChild(pin);\n\n    var key = document.createElement('button');\n    key.type = 'button';\n    key.className = 'cml__key-btn';\n    key.dataset.idx = String(i);\n    key.setAttribute('aria-label', l.name + ' (pendiente)');\n    key.setAttribute('aria-pressed', 'false');\n    key.innerHTML = '<span class=\"cml__key-dot\" aria-hidden=\"true\"><\/span>' + esc(l.name);\n    keysContainer.appendChild(key);\n  });\n\n  var pins = Array.prototype.slice.call(qa('.cml__pin'));\n  var keyBtns = Array.prototype.slice.call(qa('.cml__key-btn'));\n  filterBtns = Array.prototype.slice.call(qa('.cml__filter-btn'));\n\n  \/* ===== SYNC UI ===== *\/\n  function updateProgress() {\n    if (foundEl) foundEl.textContent = String(found.size);\n    if (completionEl) completionEl.hidden = (found.size !== legends.length);\n  }\n  function syncUI() {\n    pins.forEach(function(pin) {\n      var idx = gi(pin);\n      var l = legends[idx];\n      var isFound = found.has(idx);\n      var isActive = currentIdx === idx;\n      pin.classList.toggle('is-found', isFound);\n      pin.setAttribute('aria-expanded', isActive ? 'true' : 'false');\n      pin.setAttribute('aria-label',\n        'Leyenda ' + l.num + ': ' + l.name +\n        (isFound ? ' (descubierta)' : ' (pendiente)') +\n        (isActive ? ', mostrando detalle' : ''));\n    });\n    keyBtns.forEach(function(btn) {\n      var idx = gi(btn);\n      var l = legends[idx];\n      var isFound = found.has(idx);\n      var isActive = currentIdx === idx;\n      btn.classList.toggle('is-found', isFound);\n      btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');\n      btn.setAttribute('aria-label',\n        l.name +\n        (isFound ? ' (descubierta)' : ' (pendiente)') +\n        (isActive ? ', mostrando detalle' : ''));\n    });\n    updateProgress();\n  }\n\n  \/* ===== BUILD MEDIA + INFO HTML ===== *\/\n  function buildVideoIframe(video) {\n    if (!video) return '';\n    if (video.type === 'youtube') {\n      return '<iframe src=\"https:\/\/www.youtube.com\/embed\/' + video.id + '?rel=0\" ' +\n             'title=\"' + esc(video.title) + '\" ' +\n             'allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" ' +\n             'referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen loading=\"lazy\"><\/iframe>';\n    }\n    if (video.type === 'tiktok') {\n      return '<iframe src=\"https:\/\/www.tiktok.com\/embed\/v2\/' + video.id + '\" ' +\n             'title=\"' + esc(video.title) + '\" ' +\n             'allow=\"encrypted-media\" allowfullscreen loading=\"lazy\"><\/iframe>';\n    }\n    return '';\n  }\n\n  function buildPanelContent(l) {\n    \/* Media column: video if available, else illustration *\/\n    var mediaH = '<div class=\"cml__media\">';\n    if (l.video) {\n      mediaH += buildVideoIframe(l.video);\n    } else {\n      mediaH += '<img decoding=\"async\" class=\"cml__media-img\" src=\"' + esc(l.img) + '\" alt=\"Ilustraci\u00f3n de ' + esc(l.name) + '\" loading=\"lazy\">';\n    }\n    mediaH += '<\/div>';\n\n    \/* Info column *\/\n    var thumbH = '';\n    if (l.video && l.img) {\n      \/* Show small illustration thumbnail only when video is primary *\/\n      thumbH = '<div class=\"cml__info-thumb\"><img decoding=\"async\" src=\"' + esc(l.img) + '\" alt=\"Ilustraci\u00f3n de ' + esc(l.name) + '\" loading=\"lazy\"><\/div>';\n    }\n\n    var subH = l.sub ? '<p class=\"cml__sub\">' + esc(l.sub) + '<\/p>' : '';\n    var ingH = l.ing\n      ? '<span class=\"cml__ing\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M8 2v4M16 2v4\"\/><path d=\"M5 10h14l-1.5 10a2 2 0 01-2 2h-7a2 2 0 01-2-2L5 10z\"\/><\/svg>' + esc(l.ing) + '<\/span>'\n      : '<span class=\"cml__ing\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M8 2v4M16 2v4\"\/><path d=\"M5 10h14l-1.5 10a2 2 0 01-2 2h-7a2 2 0 01-2-2L5 10z\"\/><\/svg><span class=\"cml__ing-tbd\">Ingredientes pr\u00f3ximamente<\/span><\/span>';\n    var servingH = l.serving ? '<span class=\"cml__serving\">' + esc(l.serving) + '<\/span>' : '';\n\n    var infoH = '<div class=\"cml__info\">' +\n      '<div class=\"cml__info-header\">' +\n        thumbH +\n        '<div class=\"cml__info-title-wrap\">' +\n          '<div class=\"cml__num\">' + l.num + '<\/div>' +\n          '<h3 class=\"cml__name\">' + esc(l.name) + '<\/h3>' +\n          subH +\n        '<\/div>' +\n      '<\/div>' +\n      '<blockquote class=\"cml__quote\">' + esc(l.quote) + '<\/blockquote>' +\n      '<div class=\"cml__meta-row\">' +\n        ingH +\n        '<span class=\"cml__price\">' + esc(l.price) + '<\/span>' +\n        servingH +\n      '<\/div>' +\n      '<p class=\"cml__story-label\">La leyenda<\/p>' +\n      '<p class=\"cml__story\">' + esc(l.story) + '<\/p>' +\n      '<div class=\"cml__loc\">' +\n        '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>' +\n        esc(l.loc) +\n      '<\/div>' +\n      '<div class=\"cml__nav\">' +\n        '<button type=\"button\" class=\"cml__nav-btn\" data-dir=\"-1\" aria-label=\"Leyenda anterior\">' +\n          '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>Anterior' +\n        '<\/button>' +\n        '<span class=\"cml__nav-count\">' + l.num + ' \/ ' + legends.length + '<\/span>' +\n        '<button type=\"button\" class=\"cml__nav-btn\" data-dir=\"1\" aria-label=\"Leyenda siguiente\">Siguiente' +\n          '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>' +\n        '<\/button>' +\n      '<\/div>' +\n    '<\/div>';\n\n    return mediaH + infoH;\n  }\n\n  \/* ===== OPEN \/ CLOSE PANEL ===== *\/\n  function scrollPanelIntoView() {\n    var rect = panel.getBoundingClientRect();\n    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    \/* Offset de 80px para dejar hueco al header sticky del sitio *\/\n    var offset = window.pageYOffset + rect.top - 80;\n    if (prefersReduced) {\n      window.scrollTo(0, offset);\n    } else {\n      window.scrollTo({ top: offset, behavior: 'smooth' });\n    }\n  }\n\n  function openLegend(idx, triggerEl) {\n    var l = legends[idx];\n    if (!l) return;\n\n    var wasNew = !found.has(idx);\n    var wasOpen = panel.classList.contains('is-open');\n    var prevIdx = currentIdx;\n    currentIdx = idx;\n    if (triggerEl) lastTrigger = triggerEl;\n\n    found.add(idx);\n    saveFound();\n\n    if (wasOpen && prevIdx !== idx) {\n      \/* Panel already open but different legend: fade transition *\/\n      panelInner.classList.add('is-changing');\n      setTimeout(function() {\n        panelInner.innerHTML = buildPanelContent(l);\n        panelInner.classList.remove('is-changing');\n      }, 200);\n      \/* Scroll tambi\u00e9n al cambiar de leyenda (puede estar desplazado) *\/\n      setTimeout(scrollPanelIntoView, 80);\n    } else {\n      \/* First open or same legend: just render *\/\n      panelInner.innerHTML = buildPanelContent(l);\n      if (!wasOpen) {\n        panel.classList.add('is-open');\n        \/* Scroll siempre al abrir para que el usuario vea el desplegable.\n           Peque\u00f1o delay (300ms) para que el scroll coincida con la\n           animaci\u00f3n de apertura del panel. *\/\n        setTimeout(scrollPanelIntoView, 300);\n      } else {\n        \/* Same legend clicked again: scroll by si el usuario estaba lejos *\/\n        setTimeout(scrollPanelIntoView, 80);\n      }\n    }\n\n    syncUI();\n    applyFilter(currentFilter);\n\n    \/* Discovery animation *\/\n    if (wasNew) {\n      var pin = q('.cml__pin[data-idx=\"' + idx + '\"]');\n      var key = q('.cml__key-btn[data-idx=\"' + idx + '\"]');\n      if (pin) {\n        var dot = pin.querySelector('.cml__pin-dot');\n        if (dot) {\n          dot.classList.add('is-just-found');\n          dot.addEventListener('animationend', function() { dot.classList.remove('is-just-found'); }, { once: true });\n        }\n      }\n      if (key) {\n        key.classList.add('is-just-found');\n        key.addEventListener('animationend', function() { key.classList.remove('is-just-found'); }, { once: true });\n      }\n    }\n  }\n\n  function closePanel() {\n    panel.classList.remove('is-open');\n    currentIdx = -1;\n    syncUI();\n    \/* Clear inner after transition to stop video playback *\/\n    setTimeout(function() {\n      if (!panel.classList.contains('is-open')) {\n        panelInner.innerHTML = '';\n      }\n    }, 650);\n    if (lastTrigger && typeof lastTrigger.focus === 'function') {\n      lastTrigger.focus();\n    }\n  }\n\n  closeBtn.addEventListener('click', closePanel);\n  document.addEventListener('keydown', function(e) {\n    if (e.key === 'Escape' && panel.classList.contains('is-open')) {\n      e.preventDefault();\n      closePanel();\n    }\n  });\n\n  \/* ===== PIN + KEY EVENTS ===== *\/\n  function movePinFocus(fromIdx, delta) {\n    var attempts = pins.length;\n    var idx = fromIdx;\n    while (attempts-- > 0) {\n      idx = (idx + delta + pins.length) % pins.length;\n      if (!pins[idx].classList.contains('is-dimmed')) {\n        pins[idx].focus();\n        return;\n      }\n    }\n  }\n  pins.forEach(function(pin) {\n    pin.addEventListener('click', function() { openLegend(gi(pin), pin); });\n    pin.addEventListener('keydown', function(e) {\n      var idx = gi(pin);\n      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openLegend(idx, pin); return; }\n      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); movePinFocus(idx, 1); }\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); movePinFocus(idx, -1); }\n    });\n  });\n  keyBtns.forEach(function(btn) {\n    btn.addEventListener('click', function() { openLegend(gi(btn), btn); });\n  });\n\n  \/* ===== PREV\/NEXT NAV (delegated) ===== *\/\n  panelInner.addEventListener('click', function(e) {\n    var navBtn = e.target.closest('.cml__nav-btn');\n    if (!navBtn || currentIdx < 0) return;\n    var dir = parseInt(navBtn.getAttribute('data-dir'), 10);\n    var next = (currentIdx + dir + legends.length) % legends.length;\n    openLegend(next, lastTrigger);\n  });\n\n  \/* ===== HOVER LINK pin <-> key ===== *\/\n  function linkIdx(targetIdx) {\n    pins.forEach(function(p) { p.classList.toggle('is-linked', gi(p) === targetIdx); });\n    keyBtns.forEach(function(b) { b.classList.toggle('is-linked', gi(b) === targetIdx); });\n  }\n  function unlinkAll() {\n    pins.forEach(function(p) { p.classList.remove('is-linked'); });\n    keyBtns.forEach(function(b) { b.classList.remove('is-linked'); });\n  }\n  if (window.matchMedia('(hover:hover) and (pointer:fine)').matches) {\n    pins.forEach(function(pin) {\n      pin.addEventListener('mouseenter', function() { linkIdx(gi(pin)); });\n      pin.addEventListener('mouseleave', unlinkAll);\n    });\n    keyBtns.forEach(function(btn) {\n      btn.addEventListener('mouseenter', function() { linkIdx(gi(btn)); });\n      btn.addEventListener('mouseleave', unlinkAll);\n    });\n  }\n\n  \/* ===== FILTER ===== *\/\n  function applyFilter(filter) {\n    currentFilter = filter;\n    filterBtns.forEach(function(b) {\n      var isActive = b.getAttribute('data-filter') === filter;\n      b.classList.toggle('is-active', isActive);\n      b.setAttribute('aria-pressed', isActive ? 'true' : 'false');\n    });\n    keyBtns.forEach(function(btn) {\n      var idx = gi(btn);\n      var isFound = found.has(idx);\n      var show = (filter === 'all') || (filter === 'found' && isFound) || (filter === 'pending' && !isFound);\n      btn.classList.toggle('is-hidden', !show);\n    });\n    pins.forEach(function(pin) {\n      var idx = gi(pin);\n      var isFound = found.has(idx);\n      var dim = (filter === 'found' && !isFound) || (filter === 'pending' && isFound);\n      pin.classList.toggle('is-dimmed', dim);\n      pin.setAttribute('tabindex', dim ? '-1' : '0');\n    });\n    if (filterEmptyEl) {\n      var visibleKeys = keyBtns.filter(function(b) { return !b.classList.contains('is-hidden'); });\n      if (visibleKeys.length === 0) {\n        filterEmptyEl.hidden = false;\n        filterEmptyEl.textContent = filter === 'found'\n          ? 'Todav\u00eda no has descubierto ninguna leyenda'\n          : 'Ya no quedan leyendas pendientes';\n      } else {\n        filterEmptyEl.hidden = true;\n      }\n    }\n  }\n  filterBtns.forEach(function(btn) {\n    btn.addEventListener('click', function() { applyFilter(this.getAttribute('data-filter')); });\n  });\n\n  \/* ===== RESET ===== *\/\n  if (resetBtn) {\n    resetBtn.addEventListener('click', function() {\n      found.clear();\n      saveFound();\n      closePanel();\n      syncUI();\n      applyFilter('all');\n    });\n  }\n\n  \/* ===== INIT ===== *\/\n  syncUI();\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Carta de c\u00f3cteles: Leyendas de Sevilla Cada c\u00f3ctel esconde una leyenda que habita en las calles de Sevilla. Explora el mapa, descubre sus historias de amor, traici\u00f3n y misterio, y d\u00e9jate seducir por los sabores que las acompa\u00f1an. &times; Has descubierto 0 de 11 leyendas&#8230;<\/p>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2117","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cocteleriamontana.com\/zh\/wp-json\/wp\/v2\/pages\/2117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cocteleriamontana.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cocteleriamontana.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cocteleriamontana.com\/zh\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/cocteleriamontana.com\/zh\/wp-json\/wp\/v2\/comments?post=2117"}],"version-history":[{"count":11,"href":"https:\/\/cocteleriamontana.com\/zh\/wp-json\/wp\/v2\/pages\/2117\/revisions"}],"predecessor-version":[{"id":4070,"href":"https:\/\/cocteleriamontana.com\/zh\/wp-json\/wp\/v2\/pages\/2117\/revisions\/4070"}],"wp:attachment":[{"href":"https:\/\/cocteleriamontana.com\/zh\/wp-json\/wp\/v2\/media?parent=2117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}