Rutas e itinerarios guiados | Melilla Monumental<\/title>\n <meta name=\"description\" content=\"Consulta el cat\u00e1logo de rutas e itinerarios disponibles para visitas guiadas en Melilla Monumental: recintos, duraci\u00f3n, modalidad de acceso y aforo orientativo.\" \/>\n <style>\n :root {\n --bg: #f7f2e8;\n --bg-soft: #fbf8f2;\n --surface: rgba(255,255,255,.84);\n --surface-strong: rgba(255,255,255,.94);\n --border: rgba(110, 82, 32, 0.16);\n --text: #1b1916;\n --text-soft: #63584c;\n --navy: #17324f;\n --navy-2: #234b73;\n --gold: #a97d2f;\n --gold-2: #cba35a;\n --gold-soft: #efe2c7;\n --shadow: 0 22px 70px rgba(24, 26, 32, 0.12);\n --radius-xl: 28px;\n --radius-lg: 22px;\n --radius-md: 16px;\n --maxw: 1320px;\n }\n\n * { box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n\n body {\n margin: 0;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n color: var(--text);\n background:\n radial-gradient(circle at top left, rgba(201,163,87,.16), transparent 30%),\n radial-gradient(circle at top right, rgba(31,66,109,.10), transparent 28%),\n linear-gradient(180deg, #f8f3eb 0%, #f5efe4 100%);\n line-height: 1.55;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n .container {\n width: min(calc(100% - 32px), var(--maxw));\n margin: 0 auto;\n }\n\n .hero {\n position: relative;\n padding: 92px 0 48px;\n overflow: hidden;\n }\n\n .hero::before,\n .hero::after {\n content: \"\";\n position: absolute;\n inset: auto;\n border-radius: 999px;\n filter: blur(10px);\n pointer-events: none;\n }\n\n .hero::before {\n width: 420px;\n height: 420px;\n background: radial-gradient(circle, rgba(201,163,87,.22), rgba(201,163,87,0));\n top: -120px;\n left: -120px;\n }\n\n .hero::after {\n width: 520px;\n height: 520px;\n background: radial-gradient(circle, rgba(27,50,79,.18), rgba(27,50,79,0));\n right: -180px;\n top: -120px;\n }\n\n .hero-panel {\n position: relative;\n display: grid;\n grid-template-columns: 1.35fr .9fr;\n gap: 28px;\n align-items: stretch;\n z-index: 1;\n }\n\n .hero-copy {\n background:\n linear-gradient(135deg, rgba(23,50,79,.96), rgba(35,75,115,.92)),\n linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.01));\n color: #fff;\n border-radius: 34px;\n padding: 42px 40px;\n box-shadow: var(--shadow);\n border: 1px solid rgba(255,255,255,.10);\n min-height: 100%;\n }\n\n .eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 8px 14px;\n border-radius: 999px;\n background: rgba(255,255,255,.10);\n border: 1px solid rgba(255,255,255,.16);\n font-size: .86rem;\n letter-spacing: .08em;\n text-transform: uppercase;\n color: rgba(255,255,255,.88);\n margin-bottom: 18px;\n }\n\n .hero h1 {\n margin: 0 0 16px;\n font-family: Georgia, \"Times New Roman\", serif;\n font-size: clamp(2.3rem, 4vw, 4.25rem);\n line-height: 1.03;\n letter-spacing: -.03em;\n }\n\n .hero p {\n margin: 0;\n max-width: 720px;\n color: rgba(255,255,255,.86);\n font-size: 1.05rem;\n }\n\n .hero-meta {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n margin-top: 26px;\n }\n\n .hero-chip {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: rgba(255,255,255,.11);\n border: 1px solid rgba(255,255,255,.12);\n padding: 10px 14px;\n border-radius: 999px;\n color: #fff;\n font-size: .95rem;\n }\n\n .hero-aside {\n display: grid;\n gap: 18px;\n }\n\n .stat-card {\n background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));\n border-radius: 28px;\n border: 1px solid rgba(255,255,255,.7);\n box-shadow: var(--shadow);\n padding: 24px;\n position: relative;\n overflow: hidden;\n }\n\n .stat-card::before {\n content: \"\";\n position: absolute;\n inset: 0 auto auto 0;\n width: 100%;\n height: 4px;\n background: linear-gradient(90deg, var(--gold), var(--gold-2));\n }\n\n .stat-top {\n color: var(--text-soft);\n font-size: .9rem;\n text-transform: uppercase;\n letter-spacing: .08em;\n }\n\n .stat-main {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 16px;\n margin-top: 8px;\n }\n\n .stat-main strong {\n font-size: 2.3rem;\n line-height: 1;\n color: var(--navy);\n letter-spacing: -.04em;\n }\n\n .stat-main span {\n color: var(--text-soft);\n max-width: 160px;\n text-align: right;\n font-size: .96rem;\n }\n\n .section {\n padding: 20px 0 34px;\n }\n\n .intro-grid {\n display: grid;\n grid-template-columns: 1.2fr .8fr;\n gap: 24px;\n align-items: start;\n }\n\n .panel {\n background: var(--surface);\n backdrop-filter: blur(8px);\n border-radius: var(--radius-xl);\n border: 1px solid var(--border);\n box-shadow: var(--shadow);\n }\n\n .panel-inner {\n padding: 30px;\n }\n\n h2.section-title {\n margin: 0 0 12px;\n font-size: clamp(1.5rem, 2vw, 2rem);\n color: var(--navy);\n font-family: Georgia, \"Times New Roman\", serif;\n letter-spacing: -.02em;\n }\n\n .lead {\n margin: 0;\n color: var(--text-soft);\n font-size: 1.02rem;\n }\n\n .legend {\n display: grid;\n gap: 12px;\n }\n\n .legend-item {\n display: flex;\n gap: 12px;\n align-items: flex-start;\n padding: 14px 16px;\n border-radius: 18px;\n background: rgba(255,255,255,.55);\n border: 1px solid rgba(169,125,47,.12);\n }\n\n .legend-dot {\n width: 13px;\n height: 13px;\n border-radius: 999px;\n margin-top: 6px;\n flex: 0 0 auto;\n }\n\n .legend-item strong {\n display: block;\n color: var(--navy);\n margin-bottom: 2px;\n }\n\n .legend-item p {\n margin: 0;\n color: var(--text-soft);\n font-size: .95rem;\n }\n\n .filters {\n position: sticky;\n top: 12px;\n z-index: 10;\n margin-top: 20px;\n }\n\n .filters-wrap {\n display: grid;\n grid-template-columns: 1.2fr repeat(3, minmax(160px, 220px)) auto;\n gap: 14px;\n padding: 18px;\n align-items: center;\n }\n\n .field {\n display: grid;\n gap: 8px;\n }\n\n .field label {\n font-size: .84rem;\n text-transform: uppercase;\n letter-spacing: .08em;\n color: var(--text-soft);\n }\n\n .control {\n width: 100%;\n appearance: none;\n border: 1px solid rgba(23,50,79,.10);\n background: rgba(255,255,255,.92);\n color: var(--text);\n border-radius: 14px;\n padding: 13px 14px;\n font: inherit;\n min-height: 48px;\n outline: none;\n }\n\n .control:focus {\n border-color: rgba(169,125,47,.6);\n box-shadow: 0 0 0 4px rgba(203,163,90,.14);\n }\n\n .btn {\n border: 0;\n cursor: pointer;\n min-height: 48px;\n border-radius: 14px;\n padding: 0 18px;\n font: inherit;\n font-weight: 700;\n color: #fff;\n background: linear-gradient(135deg, var(--gold), var(--gold-2));\n box-shadow: 0 14px 34px rgba(169,125,47,.22);\n transition: transform .18s ease, box-shadow .18s ease;\n }\n\n .btn:hover {\n transform: translateY(-1px);\n box-shadow: 0 18px 38px rgba(169,125,47,.28);\n }\n\n .summary-bar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: 14px;\n margin-top: 20px;\n }\n\n .summary-pill {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n border-radius: 999px;\n background: rgba(255,255,255,.7);\n border: 1px solid rgba(23,50,79,.09);\n color: var(--navy);\n font-weight: 600;\n }\n\n .tag-list {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n }\n\n .tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 9px 12px;\n border-radius: 999px;\n background: rgba(201,163,87,.12);\n color: #7b5920;\n font-size: .9rem;\n border: 1px solid rgba(169,125,47,.14);\n }\n\n .cards {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 20px;\n margin-top: 22px;\n }\n\n .route-card {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 18px;\n padding: 22px;\n border-radius: 24px;\n background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));\n border: 1px solid rgba(23,50,79,.08);\n box-shadow: 0 18px 50px rgba(19,25,34,.08);\n transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;\n }\n\n .route-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 24px 60px rgba(19,25,34,.12);\n border-color: rgba(169,125,47,.28);\n }\n\n .route-top {\n display: flex;\n align-items: start;\n justify-content: space-between;\n gap: 14px;\n }\n\n .route-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 42px;\n height: 42px;\n padding: 0 12px;\n border-radius: 999px;\n background: linear-gradient(135deg, rgba(169,125,47,.14), rgba(203,163,90,.22));\n color: var(--gold);\n font-weight: 800;\n letter-spacing: -.02em;\n }\n\n .status {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: 999px;\n font-size: .84rem;\n font-weight: 700;\n letter-spacing: .02em;\n white-space: nowrap;\n }\n\n .status.gratuito { background: rgba(36,130,82,.12); color: #1b7a4b; }\n .status.subvencionado { background: rgba(32,94,166,.12); color: #205ea6; }\n .status.privado { background: rgba(103,57,183,.12); color: #6739b7; }\n .status.proximamente { background: rgba(196,125,17,.14); color: #a15e06; }\n .status.teatralizada { background: rgba(156,54,73,.13); color: #8d2338; }\n\n .route-card h3 {\n margin: 0;\n font-size: 1.2rem;\n line-height: 1.2;\n color: var(--navy);\n }\n\n .route-subtitle {\n margin: 8px 0 0;\n color: var(--text-soft);\n font-size: .98rem;\n }\n\n .meta-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0,1fr));\n gap: 12px;\n }\n\n .meta-item {\n padding: 12px 13px;\n border-radius: 16px;\n background: rgba(247,242,232,.88);\n border: 1px solid rgba(169,125,47,.08);\n }\n\n .meta-label {\n display: block;\n color: var(--text-soft);\n font-size: .78rem;\n text-transform: uppercase;\n letter-spacing: .08em;\n margin-bottom: 4px;\n }\n\n .meta-value {\n display: block;\n color: var(--text);\n font-weight: 600;\n font-size: .96rem;\n }\n\n .route-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-top: auto;\n padding-top: 4px;\n }\n\n .guide {\n color: var(--text-soft);\n font-size: .94rem;\n }\n\n .route-link {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n border-radius: 999px;\n background: rgba(23,50,79,.06);\n color: var(--navy);\n font-weight: 700;\n }\n\n .empty {\n display: none;\n margin-top: 24px;\n padding: 28px;\n border-radius: 24px;\n background: rgba(255,255,255,.78);\n border: 1px dashed rgba(169,125,47,.30);\n color: var(--text-soft);\n text-align: center;\n }\n\n footer {\n padding: 18px 0 60px;\n color: var(--text-soft);\n font-size: .94rem;\n }\n\n @media (max-width: 1180px) {\n .hero-panel,\n .intro-grid {\n grid-template-columns: 1fr;\n }\n\n .filters-wrap {\n grid-template-columns: repeat(2, minmax(0,1fr));\n }\n\n .cards {\n grid-template-columns: repeat(2, minmax(0,1fr));\n }\n }\n\n @media (max-width: 760px) {\n .hero {\n padding-top: 72px;\n }\n\n .hero-copy,\n .panel-inner {\n padding: 24px;\n }\n\n .filters-wrap {\n grid-template-columns: 1fr;\n }\n\n .cards {\n grid-template-columns: 1fr;\n }\n\n .meta-grid {\n grid-template-columns: 1fr;\n }\n\n .summary-bar {\n align-items: stretch;\n }\n\n .route-footer {\n flex-direction: column;\n align-items: stretch;\n }\n\n .route-link {\n justify-content: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <header class=\"hero\">\n <div class=\"container hero-panel\">\n <section class=\"hero-copy\">\n <div class=\"eyebrow\">Melilla Monumental \u00b7 visitas guiadas<\/div>\n <h1>Rutas e itinerarios para descubrir el patrimonio de Melilla<\/h1>\n <p>\n P\u00e1gina dise\u00f1ada para presentar de forma clara y visual el cat\u00e1logo de itinerarios disponibles:\n visitas en recintos hist\u00f3ricos, recorridos tem\u00e1ticos, rutas modernistas, experiencias culturales,\n propuestas exteriores y opciones especiales.\n <\/p>\n <div class=\"hero-meta\">\n <span class=\"hero-chip\">45 itinerarios recogidos en el cat\u00e1logo<\/span>\n <span class=\"hero-chip\">Filtros por recinto, modalidad y duraci\u00f3n<\/span>\n <span class=\"hero-chip\">Dise\u00f1o adaptado al estilo institucional<\/span>\n <\/div>\n <\/section>\n\n <aside class=\"hero-aside\">\n <article class=\"stat-card\">\n <div class=\"stat-top\">Itinerarios gratuitos<\/div>\n <div class=\"stat-main\">\n <strong>21<\/strong>\n <span>Visitas de acceso gratuito dentro del cat\u00e1logo<\/span>\n <\/div>\n <\/article>\n\n <article class=\"stat-card\">\n <div class=\"stat-top\">Rutas por recintos hist\u00f3ricos<\/div>\n <div class=\"stat-main\">\n <strong>32<\/strong>\n <span>Entre I, II, III y IV Recinto<\/span>\n <\/div>\n <\/article>\n\n <article class=\"stat-card\">\n <div class=\"stat-top\">Propuestas especiales<\/div>\n <div class=\"stat-main\">\n <strong>13<\/strong>\n <span>Modernismo, exteriores, experiencias privadas y tem\u00e1ticas<\/span>\n <\/div>\n <\/article>\n <\/aside>\n <\/div>\n <\/header>\n\n <main>\n <section class=\"section\">\n <div class=\"container intro-grid\">\n <article class=\"panel\">\n <div class=\"panel-inner\">\n <h2 class=\"section-title\">Cat\u00e1logo de visitas guiadas<\/h2>\n <p class=\"lead\">\n Este dise\u00f1o organiza el contenido del cat\u00e1logo en formato de tarjetas para facilitar la consulta,\n mejorar la lectura y permitir b\u00fasquedas r\u00e1pidas por nombre, lugar, modalidad de acceso y recinto.\n <\/p>\n <\/div>\n <\/article>\n\n <aside class=\"panel\">\n <div class=\"panel-inner\">\n <div class=\"legend\">\n <div class=\"legend-item\">\n <span class=\"legend-dot\" style=\"background:#1b7a4b\"><\/span>\n <div>\n <strong>Gratuito<\/strong>\n <p>Visitas de acceso libre o incluidas sin coste directo.<\/p>\n <\/div>\n <\/div>\n <div class=\"legend-item\">\n <span class=\"legend-dot\" style=\"background:#205ea6\"><\/span>\n <div>\n <strong>Subvencionado<\/strong>\n <p>Recorridos con apoyo institucional o gesti\u00f3n externa subvencionada.<\/p>\n <\/div>\n <\/div>\n <div class=\"legend-item\">\n <span class=\"legend-dot\" style=\"background:#6739b7\"><\/span>\n <div>\n <strong>Privado \/ especial<\/strong>\n <p>Experiencias gestionadas por entidades externas o bajo reserva espec\u00edfica.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/aside>\n <\/div>\n\n <div class=\"container filters\">\n <div class=\"panel filters-wrap\">\n <div class=\"field\">\n <label for=\"search\">Buscar itinerario o lugar<\/label>\n <input id=\"search\" class=\"control\" type=\"search\" placeholder=\"Ej. modernismo, conventico, plaza de toros...\" \/>\n <\/div>\n\n <div class=\"field\">\n <label for=\"category\">Recinto o categor\u00eda<\/label>\n <select id=\"category\" class=\"control\">\n <option value=\"\">Todas<\/option>\n <\/select>\n <\/div>\n\n <div class=\"field\">\n <label for=\"price\">Modalidad<\/label>\n <select id=\"price\" class=\"control\">\n <option value=\"\">Todas<\/option>\n <\/select>\n <\/div>\n\n <div class=\"field\">\n <label for=\"duration\">Duraci\u00f3n<\/label>\n <select id=\"duration\" class=\"control\">\n <option value=\"\">Todas<\/option>\n <\/select>\n <\/div>\n\n <button id=\"resetBtn\" class=\"btn\" type=\"button\">Limpiar<\/button>\n <\/div>\n <\/div>\n\n <div class=\"container\">\n <div class=\"summary-bar\">\n <span id=\"resultsCount\" class=\"summary-pill\">Mostrando 45 itinerarios<\/span>\n <div class=\"tag-list\" id=\"activeTags\"><\/div>\n <\/div>\n\n <div class=\"cards\" id=\"cards\"><\/div>\n\n <div class=\"empty\" id=\"emptyState\">\n No hay itinerarios que coincidan con los filtros aplicados. Prueba con otra combinaci\u00f3n.\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer>\n <div class=\"container\">\n Propuesta de maquetaci\u00f3n basada en el cat\u00e1logo de itinerarios facilitado para su adaptaci\u00f3n al portal de Melilla Monumental.\n <\/div>\n <\/footer>\n\n <script>\n const routes = [\n { num: 1, title: \"Aljibes\", site: \"Plaza de la Maestranza\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 2, title: \"Museos Pe\u00f1uelas\", site: \"Plaza de la Maestranza\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 3, title: \"T\u00fanel de Santa Ana y Capilla de Santiago\", site: \"Plaza de la Maestranza\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 4, title: \"Melilla Fenicia\", site: \"Plaza de Estopi\u00f1\u00e1n\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 5, title: \"Museo Casa del Reloj\", site: \"Plaza de Estopi\u00f1\u00e1n\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 6, title: \"Iglesia Pur\u00edsima\", site: \"Calle Miguel Acosta\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 7, title: \"Museo de Arte Sacro\", site: \"Calle Miguel Acosta\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 8, title: \"Cuevas del Conventico\", site: \"Calle Miguel Acosta\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 9, title: \"Faro Torre del Bonete\", site: \"Grande\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 10, title: \"CIMLaV\", site: \"Torre\u00f3n de los Cabestrantes\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 11, title: \"Memoria y Pluma\", site: \"Torre\u00f3n de los Cabestrantes\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Gratuito\", guide: \"Blog externo\", capacity: \"<30\", url: \"https:\/\/bibliotecamacondojaf.blogspot.com\/2019\/04\/memoria-y-pluma-encarna-leon-itinerario.html\" },\n { num: 12, title: \"Plaza de Armas\", site: \"T\u00fanel de las Victorias\", category: \"II Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 13, title: \"Foso del Hornabeque\", site: \"Plaza de las Culturas\", category: \"III Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 14, title: \"Galer\u00eda de Minas\", site: \"Cerro del Cubo\", category: \"IV Recinto\", duration: \"1 hora\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<20\" },\n { num: 15, title: \"Torre\u00f3n de las 5 Palabras\", site: \"Zona media Alcazaba\", category: \"III Recinto\", duration: \"30 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<30\" },\n { num: 16, title: \"Mina de San Jos\u00e9\", site: \"Bajo Murallas Mantelete\", category: \"III Recinto\", duration: \"30 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<15\" },\n { num: 17, title: \"Puerta de Santiago\", site: \"Capilla Santiago\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<15\" },\n { num: 18, title: \"Hospital del Rey\", site: \"Hospital del Rey\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<30\" },\n { num: 19, title: \"Puerta del Socorro\", site: \"Hospital del Rey\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<15\" },\n { num: 20, title: \"Museo de la Imprenta\", site: \"Hospital del Rey\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<30\" },\n { num: 21, title: \"Antigua Farmacia Militar\", site: \"Calle Miguel Acosta\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<30\" },\n { num: 22, title: \"Descubriendo Melilla la Vieja de mano del Mariscal Sherlock\", site: \"Plaza de las Culturas\", category: \"III Recinto\", duration: \"1 hora\", price: \"Teatralizada\", guide: \"Sibila Teatros\", capacity: \"<30\" },\n { num: 23, title: \"La Melilla Sefard\u00ed\", site: \"Plaza de la Maestranza\", category: \"I Recinto\", duration: \"2 horas\", price: \"Subvencionado\", guide: \"Mem Gu\u00edmel\", capacity: \"<30\" },\n { num: 24, title: \"Melilla Modernista Caminando\", site: \"Tri\u00e1ngulo de Oro\", category: \"Modernismo\", duration: \"45 minutos\", price: \"Subvencionado\", guide: \"Mem Gu\u00edmel\", capacity: \"-\" },\n { num: 25, title: \"Melilla Modernista VIP (en bus 7 pax)\", site: \"Tri\u00e1ngulo de Oro\", category: \"Modernismo\", duration: \"2 horas\", price: \"Subvencionado\", guide: \"Mem Gu\u00edmel\", capacity: \"<7\" },\n { num: 26, title: \"Fuertes del Cubo\", site: \"Cerro del Cubo\", category: \"IV Recinto\", duration: \"1 hora\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<50\" },\n { num: 27, title: \"Fuerte de Victoria Grande\", site: \"Cerro del Cubo\", category: \"IV Recinto\", duration: \"45 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<50\" },\n { num: 28, title: \"Fuerte de Victoria Chica\", site: \"Cerro del Cubo\", category: \"IV Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"\", capacity: \"-\" },\n { num: 29, title: \"Fuerte del Rosario\", site: \"Cerro del Cubo\", category: \"IV Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"\", capacity: \"-\" },\n { num: 30, title: \"Galer\u00eda Victoria Grande - Victoria Chica\", site: \"Cerro del Cubo\", category: \"IV Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"\", capacity: \"<20\" },\n { num: 31, title: \"Plaza de Toros\", site: \"Cerro de San Lorenzo\", category: \"Exteriores\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"\", capacity: \"<50\" },\n { num: 32, title: \"Plaza de Toros Completa\", site: \"Cerro de San Lorenzo\", category: \"Exteriores\", duration: \"1 hora\", price: \"Gratuito\", guide: \"\", capacity: \"<50\" },\n { num: 33, title: \"Cementerio H\u00e9roes\", site: \"Cementerio de la Pur\u00edsima\", category: \"Exteriores\", duration: \"1 hora\", price: \"Subvencionado\", guide: \"Ox\u00edgeno Laboratorio Cultural\", capacity: \"-\" },\n { num: 34, title: \"Cementerio Noche\", site: \"Cementerio de la Pur\u00edsima\", category: \"Exteriores\", duration: \"1 hora\", price: \"Privado\", guide: \"\", capacity: \"-\" },\n { num: 35, title: \"Melilla la Vieja, el origen\", site: \"Plaza de las Culturas\", category: \"III Recinto\", duration: \"2 horas\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 36, title: \"Secretos del Modernismo\", site: \"Tri\u00e1ngulo de Oro\", category: \"Modernismo\", duration: \"90 minutos\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 37, title: \"Misterios y Leyendas\", site: \"Cementerio de la Pur\u00edsima\", category: \"Semblanza hist\u00f3rica\", duration: \"90 minutos\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 38, title: \"Sende Ruta de Melilla\", site: \"Explanada Cuartel de la Legi\u00f3n\", category: \"-\", duration: \"3 horas\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 39, title: \"Ellas, mujeres en la historia de Melilla\", site: \"Hospital de la Cruz Roja\", category: \"-\", duration: \"90 minutos\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 40, title: \"Tour privado Melilla esencial\", site: \"Plaza de las Culturas\", category: \"-\", duration: \"3 horas\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 41, title: \"Sabores de la ciudad\", site: \"Plaza de Espa\u00f1a\", category: \"Tour gastron\u00f3mico\", duration: \"3 horas\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 42, title: \"Melilla en bicicleta\", site: \"Plaza de Toros\", category: \"Tour en bicicleta\", duration: \"2 horas\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 43, title: \"Melilla en paddle surf\", site: \"Puerto Deportivo\", category: \"Tour en paddle surf\", duration: \"3 horas\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 44, title: \"Tour virtual\", site: \"Online\", category: \"Virtual\", duration: \"50 minutos\", price: \"Gratuito\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 45, title: \"Excursi\u00f3n a Marruecos. Monte Gurug\u00fa y Nador\", site: \"Rotonda Frontera de Beni Ensar\", category: \"Internacional\", duration: \"Medio d\u00eda\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" }\n ];\n\n const els = {\n cards: document.getElementById('cards'),\n search: document.getElementById('search'),\n category: document.getElementById('category'),\n price: document.getElementById('price'),\n duration: document.getElementById('duration'),\n resetBtn: document.getElementById('resetBtn'),\n resultsCount: document.getElementById('resultsCount'),\n activeTags: document.getElementById('activeTags'),\n emptyState: document.getElementById('emptyState')\n };\n\n const statusClass = (value) => (value || '')\n .toLowerCase()\n .normalize('NFD')\n .replace(\/[\\u0300-\\u036f]\/g, '')\n .replace(\/[^a-z0-9]+\/g, '-')\n .replace(\/(^-|-$)\/g, '');\n\n function uniqueValues(key) {\n return [...new Set(routes.map(item => item[key]).filter(Boolean))]\n .sort((a, b) => a.localeCompare(b, 'es'));\n }\n\n function fillSelect(select, values) {\n values.forEach(value => {\n const opt = document.createElement('option');\n opt.value = value;\n opt.textContent = value;\n select.appendChild(opt);\n });\n }\n\n fillSelect(els.category, uniqueValues('category'));\n fillSelect(els.price, uniqueValues('price'));\n fillSelect(els.duration, uniqueValues('duration'));\n\n function buildCard(route) {\n const hasLink = Boolean(route.url);\n\n return `\n <article class=\"route-card\">\n <div class=\"route-top\">\n <span class=\"route-num\">#${route.num}<\/span>\n <span class=\"status ${statusClass(route.price)}\">${route.price || 'Consultar'}<\/span>\n <\/div>\n\n <div>\n <h3>${route.title}<\/h3>\n <p class=\"route-subtitle\">${route.site || 'Ubicaci\u00f3n por confirmar'} \u00b7 ${route.category || 'Categor\u00eda general'}<\/p>\n <\/div>\n\n <div class=\"meta-grid\">\n <div class=\"meta-item\">\n <span class=\"meta-label\">Duraci\u00f3n<\/span>\n <span class=\"meta-value\">${route.duration || 'Consultar'}<\/span>\n <\/div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Aforo orientativo<\/span>\n <span class=\"meta-value\">${route.capacity || 'Consultar'}<\/span>\n <\/div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Punto o zona<\/span>\n <span class=\"meta-value\">${route.site || 'Consultar'}<\/span>\n <\/div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Tipo de recorrido<\/span>\n <span class=\"meta-value\">${route.category || 'General'}<\/span>\n <\/div>\n <\/div>\n\n ${\n hasLink\n ? `\n <div class=\"route-footer\">\n <span class=\"guide\">Gu\u00eda \/ gesti\u00f3n: <strong>${route.guide || 'Por concretar'}<\/strong><\/span>\n <a class=\"route-link\" href=\"${route.url}\" target=\"_blank\" rel=\"noopener noreferrer\">M\u00e1s informaci\u00f3n<\/a>\n <\/div>\n `\n : `\n <div class=\"route-footer\">\n <span class=\"guide\">Gu\u00eda \/ gesti\u00f3n: <strong>${route.guide || 'Por concretar'}<\/strong><\/span>\n <\/div>\n `\n }\n <\/article>\n `;\n }\n\n function renderTags(filters) {\n const tags = [];\n if (filters.search) tags.push(`B\u00fasqueda: \"${filters.search}\"`);\n if (filters.category) tags.push(filters.category);\n if (filters.price) tags.push(filters.price);\n if (filters.duration) tags.push(filters.duration);\n\n els.activeTags.innerHTML = tags.map(tag => `<span class=\"tag\">${tag}<\/span>`).join('');\n }\n\n function getFilters() {\n return {\n search: els.search.value.trim().toLowerCase(),\n category: els.category.value,\n price: els.price.value,\n duration: els.duration.value\n };\n }\n\n function applyFilters() {\n const filters = getFilters();\n\n const filtered = routes.filter(route => {\n const haystack = [route.title, route.site, route.category, route.price, route.guide]\n .filter(Boolean)\n .join(' ')\n .toLowerCase();\n\n return (!filters.search || haystack.includes(filters.search))\n && (!filters.category || route.category === filters.category)\n && (!filters.price || route.price === filters.price)\n && (!filters.duration || route.duration === filters.duration);\n });\n\n els.cards.innerHTML = filtered.map(buildCard).join('');\n els.resultsCount.textContent = `Mostrando ${filtered.length} itinerario${filtered.length === 1 ? '' : 's'}`;\n renderTags(filters);\n els.emptyState.style.display = filtered.length ? 'none' : 'block';\n }\n\n [els.search, els.category, els.price, els.duration].forEach(el => {\n el.addEventListener('input', applyFilters);\n el.addEventListener('change', applyFilters);\n });\n\n els.resetBtn.addEventListener('click', () => {\n els.search.value = '';\n els.category.value = '';\n els.price.value = '';\n els.duration.value = '';\n applyFilters();\n });\n\n applyFilters();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Rutas e itinerarios guiados | Melilla Monumental Melilla Monumental \u00b7 visitas guiadas Rutas e itinerarios para descubrir el patrimonio de […]<\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5756","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Melilla Monumental","author_link":"https:\/\/melillamonumental.es\/pt\/author\/melilla\/"},"uagb_comment_info":0,"uagb_excerpt":"Rutas e itinerarios guiados | Melilla Monumental Melilla Monumental \u00b7 visitas guiadas Rutas e itinerarios para descubrir el patrimonio de […]","_links":{"self":[{"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/pages\/5756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/comments?post=5756"}],"version-history":[{"count":16,"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/pages\/5756\/revisions"}],"predecessor-version":[{"id":10097,"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/pages\/5756\/revisions\/10097"}],"wp:attachment":[{"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/media?parent=5756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5756,"date":"2019-03-26T08:26:21","date_gmt":"2019-03-26T07:26:21","guid":{"rendered":"https:\/\/melillamonumental.es\/?page_id=5756"},"modified":"2026-03-20T00:23:36","modified_gmt":"2026-03-19T23:23:36","slug":"rutas-y-visitas","status":"publish","type":"page","link":"https:\/\/melillamonumental.es\/pt\/rutas-y-visitas\/","title":{"rendered":"Rotas e visitas"},"content":{"rendered":"\n\n\n\n \n \n Rutas e itinerarios guiados | Melilla Monumental<\/title>\n <meta name=\"description\" content=\"Consulta el cat\u00e1logo de rutas e itinerarios disponibles para visitas guiadas en Melilla Monumental: recintos, duraci\u00f3n, modalidad de acceso y aforo orientativo.\" \/>\n <style>\n :root {\n --bg: #f7f2e8;\n --bg-soft: #fbf8f2;\n --surface: rgba(255,255,255,.84);\n --surface-strong: rgba(255,255,255,.94);\n --border: rgba(110, 82, 32, 0.16);\n --text: #1b1916;\n --text-soft: #63584c;\n --navy: #17324f;\n --navy-2: #234b73;\n --gold: #a97d2f;\n --gold-2: #cba35a;\n --gold-soft: #efe2c7;\n --shadow: 0 22px 70px rgba(24, 26, 32, 0.12);\n --radius-xl: 28px;\n --radius-lg: 22px;\n --radius-md: 16px;\n --maxw: 1320px;\n }\n\n * { box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n\n body {\n margin: 0;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n color: var(--text);\n background:\n radial-gradient(circle at top left, rgba(201,163,87,.16), transparent 30%),\n radial-gradient(circle at top right, rgba(31,66,109,.10), transparent 28%),\n linear-gradient(180deg, #f8f3eb 0%, #f5efe4 100%);\n line-height: 1.55;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n .container {\n width: min(calc(100% - 32px), var(--maxw));\n margin: 0 auto;\n }\n\n .hero {\n position: relative;\n padding: 92px 0 48px;\n overflow: hidden;\n }\n\n .hero::before,\n .hero::after {\n content: \"\";\n position: absolute;\n inset: auto;\n border-radius: 999px;\n filter: blur(10px);\n pointer-events: none;\n }\n\n .hero::before {\n width: 420px;\n height: 420px;\n background: radial-gradient(circle, rgba(201,163,87,.22), rgba(201,163,87,0));\n top: -120px;\n left: -120px;\n }\n\n .hero::after {\n width: 520px;\n height: 520px;\n background: radial-gradient(circle, rgba(27,50,79,.18), rgba(27,50,79,0));\n right: -180px;\n top: -120px;\n }\n\n .hero-panel {\n position: relative;\n display: grid;\n grid-template-columns: 1.35fr .9fr;\n gap: 28px;\n align-items: stretch;\n z-index: 1;\n }\n\n .hero-copy {\n background:\n linear-gradient(135deg, rgba(23,50,79,.96), rgba(35,75,115,.92)),\n linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.01));\n color: #fff;\n border-radius: 34px;\n padding: 42px 40px;\n box-shadow: var(--shadow);\n border: 1px solid rgba(255,255,255,.10);\n min-height: 100%;\n }\n\n .eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 8px 14px;\n border-radius: 999px;\n background: rgba(255,255,255,.10);\n border: 1px solid rgba(255,255,255,.16);\n font-size: .86rem;\n letter-spacing: .08em;\n text-transform: uppercase;\n color: rgba(255,255,255,.88);\n margin-bottom: 18px;\n }\n\n .hero h1 {\n margin: 0 0 16px;\n font-family: Georgia, \"Times New Roman\", serif;\n font-size: clamp(2.3rem, 4vw, 4.25rem);\n line-height: 1.03;\n letter-spacing: -.03em;\n }\n\n .hero p {\n margin: 0;\n max-width: 720px;\n color: rgba(255,255,255,.86);\n font-size: 1.05rem;\n }\n\n .hero-meta {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n margin-top: 26px;\n }\n\n .hero-chip {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: rgba(255,255,255,.11);\n border: 1px solid rgba(255,255,255,.12);\n padding: 10px 14px;\n border-radius: 999px;\n color: #fff;\n font-size: .95rem;\n }\n\n .hero-aside {\n display: grid;\n gap: 18px;\n }\n\n .stat-card {\n background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));\n border-radius: 28px;\n border: 1px solid rgba(255,255,255,.7);\n box-shadow: var(--shadow);\n padding: 24px;\n position: relative;\n overflow: hidden;\n }\n\n .stat-card::before {\n content: \"\";\n position: absolute;\n inset: 0 auto auto 0;\n width: 100%;\n height: 4px;\n background: linear-gradient(90deg, var(--gold), var(--gold-2));\n }\n\n .stat-top {\n color: var(--text-soft);\n font-size: .9rem;\n text-transform: uppercase;\n letter-spacing: .08em;\n }\n\n .stat-main {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 16px;\n margin-top: 8px;\n }\n\n .stat-main strong {\n font-size: 2.3rem;\n line-height: 1;\n color: var(--navy);\n letter-spacing: -.04em;\n }\n\n .stat-main span {\n color: var(--text-soft);\n max-width: 160px;\n text-align: right;\n font-size: .96rem;\n }\n\n .section {\n padding: 20px 0 34px;\n }\n\n .intro-grid {\n display: grid;\n grid-template-columns: 1.2fr .8fr;\n gap: 24px;\n align-items: start;\n }\n\n .panel {\n background: var(--surface);\n backdrop-filter: blur(8px);\n border-radius: var(--radius-xl);\n border: 1px solid var(--border);\n box-shadow: var(--shadow);\n }\n\n .panel-inner {\n padding: 30px;\n }\n\n h2.section-title {\n margin: 0 0 12px;\n font-size: clamp(1.5rem, 2vw, 2rem);\n color: var(--navy);\n font-family: Georgia, \"Times New Roman\", serif;\n letter-spacing: -.02em;\n }\n\n .lead {\n margin: 0;\n color: var(--text-soft);\n font-size: 1.02rem;\n }\n\n .legend {\n display: grid;\n gap: 12px;\n }\n\n .legend-item {\n display: flex;\n gap: 12px;\n align-items: flex-start;\n padding: 14px 16px;\n border-radius: 18px;\n background: rgba(255,255,255,.55);\n border: 1px solid rgba(169,125,47,.12);\n }\n\n .legend-dot {\n width: 13px;\n height: 13px;\n border-radius: 999px;\n margin-top: 6px;\n flex: 0 0 auto;\n }\n\n .legend-item strong {\n display: block;\n color: var(--navy);\n margin-bottom: 2px;\n }\n\n .legend-item p {\n margin: 0;\n color: var(--text-soft);\n font-size: .95rem;\n }\n\n .filters {\n position: sticky;\n top: 12px;\n z-index: 10;\n margin-top: 20px;\n }\n\n .filters-wrap {\n display: grid;\n grid-template-columns: 1.2fr repeat(3, minmax(160px, 220px)) auto;\n gap: 14px;\n padding: 18px;\n align-items: center;\n }\n\n .field {\n display: grid;\n gap: 8px;\n }\n\n .field label {\n font-size: .84rem;\n text-transform: uppercase;\n letter-spacing: .08em;\n color: var(--text-soft);\n }\n\n .control {\n width: 100%;\n appearance: none;\n border: 1px solid rgba(23,50,79,.10);\n background: rgba(255,255,255,.92);\n color: var(--text);\n border-radius: 14px;\n padding: 13px 14px;\n font: inherit;\n min-height: 48px;\n outline: none;\n }\n\n .control:focus {\n border-color: rgba(169,125,47,.6);\n box-shadow: 0 0 0 4px rgba(203,163,90,.14);\n }\n\n .btn {\n border: 0;\n cursor: pointer;\n min-height: 48px;\n border-radius: 14px;\n padding: 0 18px;\n font: inherit;\n font-weight: 700;\n color: #fff;\n background: linear-gradient(135deg, var(--gold), var(--gold-2));\n box-shadow: 0 14px 34px rgba(169,125,47,.22);\n transition: transform .18s ease, box-shadow .18s ease;\n }\n\n .btn:hover {\n transform: translateY(-1px);\n box-shadow: 0 18px 38px rgba(169,125,47,.28);\n }\n\n .summary-bar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: 14px;\n margin-top: 20px;\n }\n\n .summary-pill {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n border-radius: 999px;\n background: rgba(255,255,255,.7);\n border: 1px solid rgba(23,50,79,.09);\n color: var(--navy);\n font-weight: 600;\n }\n\n .tag-list {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n }\n\n .tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 9px 12px;\n border-radius: 999px;\n background: rgba(201,163,87,.12);\n color: #7b5920;\n font-size: .9rem;\n border: 1px solid rgba(169,125,47,.14);\n }\n\n .cards {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 20px;\n margin-top: 22px;\n }\n\n .route-card {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 18px;\n padding: 22px;\n border-radius: 24px;\n background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));\n border: 1px solid rgba(23,50,79,.08);\n box-shadow: 0 18px 50px rgba(19,25,34,.08);\n transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;\n }\n\n .route-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 24px 60px rgba(19,25,34,.12);\n border-color: rgba(169,125,47,.28);\n }\n\n .route-top {\n display: flex;\n align-items: start;\n justify-content: space-between;\n gap: 14px;\n }\n\n .route-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 42px;\n height: 42px;\n padding: 0 12px;\n border-radius: 999px;\n background: linear-gradient(135deg, rgba(169,125,47,.14), rgba(203,163,90,.22));\n color: var(--gold);\n font-weight: 800;\n letter-spacing: -.02em;\n }\n\n .status {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: 999px;\n font-size: .84rem;\n font-weight: 700;\n letter-spacing: .02em;\n white-space: nowrap;\n }\n\n .status.gratuito { background: rgba(36,130,82,.12); color: #1b7a4b; }\n .status.subvencionado { background: rgba(32,94,166,.12); color: #205ea6; }\n .status.privado { background: rgba(103,57,183,.12); color: #6739b7; }\n .status.proximamente { background: rgba(196,125,17,.14); color: #a15e06; }\n .status.teatralizada { background: rgba(156,54,73,.13); color: #8d2338; }\n\n .route-card h3 {\n margin: 0;\n font-size: 1.2rem;\n line-height: 1.2;\n color: var(--navy);\n }\n\n .route-subtitle {\n margin: 8px 0 0;\n color: var(--text-soft);\n font-size: .98rem;\n }\n\n .meta-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0,1fr));\n gap: 12px;\n }\n\n .meta-item {\n padding: 12px 13px;\n border-radius: 16px;\n background: rgba(247,242,232,.88);\n border: 1px solid rgba(169,125,47,.08);\n }\n\n .meta-label {\n display: block;\n color: var(--text-soft);\n font-size: .78rem;\n text-transform: uppercase;\n letter-spacing: .08em;\n margin-bottom: 4px;\n }\n\n .meta-value {\n display: block;\n color: var(--text);\n font-weight: 600;\n font-size: .96rem;\n }\n\n .route-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-top: auto;\n padding-top: 4px;\n }\n\n .guide {\n color: var(--text-soft);\n font-size: .94rem;\n }\n\n .route-link {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n border-radius: 999px;\n background: rgba(23,50,79,.06);\n color: var(--navy);\n font-weight: 700;\n }\n\n .empty {\n display: none;\n margin-top: 24px;\n padding: 28px;\n border-radius: 24px;\n background: rgba(255,255,255,.78);\n border: 1px dashed rgba(169,125,47,.30);\n color: var(--text-soft);\n text-align: center;\n }\n\n footer {\n padding: 18px 0 60px;\n color: var(--text-soft);\n font-size: .94rem;\n }\n\n @media (max-width: 1180px) {\n .hero-panel,\n .intro-grid {\n grid-template-columns: 1fr;\n }\n\n .filters-wrap {\n grid-template-columns: repeat(2, minmax(0,1fr));\n }\n\n .cards {\n grid-template-columns: repeat(2, minmax(0,1fr));\n }\n }\n\n @media (max-width: 760px) {\n .hero {\n padding-top: 72px;\n }\n\n .hero-copy,\n .panel-inner {\n padding: 24px;\n }\n\n .filters-wrap {\n grid-template-columns: 1fr;\n }\n\n .cards {\n grid-template-columns: 1fr;\n }\n\n .meta-grid {\n grid-template-columns: 1fr;\n }\n\n .summary-bar {\n align-items: stretch;\n }\n\n .route-footer {\n flex-direction: column;\n align-items: stretch;\n }\n\n .route-link {\n justify-content: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <header class=\"hero\">\n <div class=\"container hero-panel\">\n <section class=\"hero-copy\">\n <div class=\"eyebrow\">Melilla Monumental \u00b7 visitas guiadas<\/div>\n <h1>Rutas e itinerarios para descubrir el patrimonio de Melilla<\/h1>\n <p>\n P\u00e1gina dise\u00f1ada para presentar de forma clara y visual el cat\u00e1logo de itinerarios disponibles:\n visitas en recintos hist\u00f3ricos, recorridos tem\u00e1ticos, rutas modernistas, experiencias culturales,\n propuestas exteriores y opciones especiales.\n <\/p>\n <div class=\"hero-meta\">\n <span class=\"hero-chip\">45 itinerarios recogidos en el cat\u00e1logo<\/span>\n <span class=\"hero-chip\">Filtros por recinto, modalidad y duraci\u00f3n<\/span>\n <span class=\"hero-chip\">Dise\u00f1o adaptado al estilo institucional<\/span>\n <\/div>\n <\/section>\n\n <aside class=\"hero-aside\">\n <article class=\"stat-card\">\n <div class=\"stat-top\">Itinerarios gratuitos<\/div>\n <div class=\"stat-main\">\n <strong>21<\/strong>\n <span>Visitas de acceso gratuito dentro del cat\u00e1logo<\/span>\n <\/div>\n <\/article>\n\n <article class=\"stat-card\">\n <div class=\"stat-top\">Rutas por recintos hist\u00f3ricos<\/div>\n <div class=\"stat-main\">\n <strong>32<\/strong>\n <span>Entre I, II, III y IV Recinto<\/span>\n <\/div>\n <\/article>\n\n <article class=\"stat-card\">\n <div class=\"stat-top\">Propuestas especiales<\/div>\n <div class=\"stat-main\">\n <strong>13<\/strong>\n <span>Modernismo, exteriores, experiencias privadas y tem\u00e1ticas<\/span>\n <\/div>\n <\/article>\n <\/aside>\n <\/div>\n <\/header>\n\n <main>\n <section class=\"section\">\n <div class=\"container intro-grid\">\n <article class=\"panel\">\n <div class=\"panel-inner\">\n <h2 class=\"section-title\">Cat\u00e1logo de visitas guiadas<\/h2>\n <p class=\"lead\">\n Este dise\u00f1o organiza el contenido del cat\u00e1logo en formato de tarjetas para facilitar la consulta,\n mejorar la lectura y permitir b\u00fasquedas r\u00e1pidas por nombre, lugar, modalidad de acceso y recinto.\n <\/p>\n <\/div>\n <\/article>\n\n <aside class=\"panel\">\n <div class=\"panel-inner\">\n <div class=\"legend\">\n <div class=\"legend-item\">\n <span class=\"legend-dot\" style=\"background:#1b7a4b\"><\/span>\n <div>\n <strong>Gratuito<\/strong>\n <p>Visitas de acceso libre o incluidas sin coste directo.<\/p>\n <\/div>\n <\/div>\n <div class=\"legend-item\">\n <span class=\"legend-dot\" style=\"background:#205ea6\"><\/span>\n <div>\n <strong>Subvencionado<\/strong>\n <p>Recorridos con apoyo institucional o gesti\u00f3n externa subvencionada.<\/p>\n <\/div>\n <\/div>\n <div class=\"legend-item\">\n <span class=\"legend-dot\" style=\"background:#6739b7\"><\/span>\n <div>\n <strong>Privado \/ especial<\/strong>\n <p>Experiencias gestionadas por entidades externas o bajo reserva espec\u00edfica.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/aside>\n <\/div>\n\n <div class=\"container filters\">\n <div class=\"panel filters-wrap\">\n <div class=\"field\">\n <label for=\"search\">Buscar itinerario o lugar<\/label>\n <input id=\"search\" class=\"control\" type=\"search\" placeholder=\"Ej. modernismo, conventico, plaza de toros...\" \/>\n <\/div>\n\n <div class=\"field\">\n <label for=\"category\">Recinto o categor\u00eda<\/label>\n <select id=\"category\" class=\"control\">\n <option value=\"\">Todas<\/option>\n <\/select>\n <\/div>\n\n <div class=\"field\">\n <label for=\"price\">Modalidad<\/label>\n <select id=\"price\" class=\"control\">\n <option value=\"\">Todas<\/option>\n <\/select>\n <\/div>\n\n <div class=\"field\">\n <label for=\"duration\">Duraci\u00f3n<\/label>\n <select id=\"duration\" class=\"control\">\n <option value=\"\">Todas<\/option>\n <\/select>\n <\/div>\n\n <button id=\"resetBtn\" class=\"btn\" type=\"button\">Limpiar<\/button>\n <\/div>\n <\/div>\n\n <div class=\"container\">\n <div class=\"summary-bar\">\n <span id=\"resultsCount\" class=\"summary-pill\">Mostrando 45 itinerarios<\/span>\n <div class=\"tag-list\" id=\"activeTags\"><\/div>\n <\/div>\n\n <div class=\"cards\" id=\"cards\"><\/div>\n\n <div class=\"empty\" id=\"emptyState\">\n No hay itinerarios que coincidan con los filtros aplicados. Prueba con otra combinaci\u00f3n.\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer>\n <div class=\"container\">\n Propuesta de maquetaci\u00f3n basada en el cat\u00e1logo de itinerarios facilitado para su adaptaci\u00f3n al portal de Melilla Monumental.\n <\/div>\n <\/footer>\n\n <script>\n const routes = [\n { num: 1, title: \"Aljibes\", site: \"Plaza de la Maestranza\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 2, title: \"Museos Pe\u00f1uelas\", site: \"Plaza de la Maestranza\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 3, title: \"T\u00fanel de Santa Ana y Capilla de Santiago\", site: \"Plaza de la Maestranza\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 4, title: \"Melilla Fenicia\", site: \"Plaza de Estopi\u00f1\u00e1n\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 5, title: \"Museo Casa del Reloj\", site: \"Plaza de Estopi\u00f1\u00e1n\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 6, title: \"Iglesia Pur\u00edsima\", site: \"Calle Miguel Acosta\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 7, title: \"Museo de Arte Sacro\", site: \"Calle Miguel Acosta\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 8, title: \"Cuevas del Conventico\", site: \"Calle Miguel Acosta\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 9, title: \"Faro Torre del Bonete\", site: \"Grande\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 10, title: \"CIMLaV\", site: \"Torre\u00f3n de los Cabestrantes\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 11, title: \"Memoria y Pluma\", site: \"Torre\u00f3n de los Cabestrantes\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Gratuito\", guide: \"Blog externo\", capacity: \"<30\", url: \"https:\/\/bibliotecamacondojaf.blogspot.com\/2019\/04\/memoria-y-pluma-encarna-leon-itinerario.html\" },\n { num: 12, title: \"Plaza de Armas\", site: \"T\u00fanel de las Victorias\", category: \"II Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 13, title: \"Foso del Hornabeque\", site: \"Plaza de las Culturas\", category: \"III Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<30\" },\n { num: 14, title: \"Galer\u00eda de Minas\", site: \"Cerro del Cubo\", category: \"IV Recinto\", duration: \"1 hora\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<20\" },\n { num: 15, title: \"Torre\u00f3n de las 5 Palabras\", site: \"Zona media Alcazaba\", category: \"III Recinto\", duration: \"30 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<30\" },\n { num: 16, title: \"Mina de San Jos\u00e9\", site: \"Bajo Murallas Mantelete\", category: \"III Recinto\", duration: \"30 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<15\" },\n { num: 17, title: \"Puerta de Santiago\", site: \"Capilla Santiago\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<15\" },\n { num: 18, title: \"Hospital del Rey\", site: \"Hospital del Rey\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<30\" },\n { num: 19, title: \"Puerta del Socorro\", site: \"Hospital del Rey\", category: \"I Recinto\", duration: \"30 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<15\" },\n { num: 20, title: \"Museo de la Imprenta\", site: \"Hospital del Rey\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<30\" },\n { num: 21, title: \"Antigua Farmacia Militar\", site: \"Calle Miguel Acosta\", category: \"I Recinto\", duration: \"45 minutos\", price: \"Pr\u00f3ximamente\", guide: \"\", capacity: \"<30\" },\n { num: 22, title: \"Descubriendo Melilla la Vieja de mano del Mariscal Sherlock\", site: \"Plaza de las Culturas\", category: \"III Recinto\", duration: \"1 hora\", price: \"Teatralizada\", guide: \"Sibila Teatros\", capacity: \"<30\" },\n { num: 23, title: \"La Melilla Sefard\u00ed\", site: \"Plaza de la Maestranza\", category: \"I Recinto\", duration: \"2 horas\", price: \"Subvencionado\", guide: \"Mem Gu\u00edmel\", capacity: \"<30\" },\n { num: 24, title: \"Melilla Modernista Caminando\", site: \"Tri\u00e1ngulo de Oro\", category: \"Modernismo\", duration: \"45 minutos\", price: \"Subvencionado\", guide: \"Mem Gu\u00edmel\", capacity: \"-\" },\n { num: 25, title: \"Melilla Modernista VIP (en bus 7 pax)\", site: \"Tri\u00e1ngulo de Oro\", category: \"Modernismo\", duration: \"2 horas\", price: \"Subvencionado\", guide: \"Mem Gu\u00edmel\", capacity: \"<7\" },\n { num: 26, title: \"Fuertes del Cubo\", site: \"Cerro del Cubo\", category: \"IV Recinto\", duration: \"1 hora\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<50\" },\n { num: 27, title: \"Fuerte de Victoria Grande\", site: \"Cerro del Cubo\", category: \"IV Recinto\", duration: \"45 minutos\", price: \"Gratuito\", guide: \"Propio\", capacity: \"<50\" },\n { num: 28, title: \"Fuerte de Victoria Chica\", site: \"Cerro del Cubo\", category: \"IV Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"\", capacity: \"-\" },\n { num: 29, title: \"Fuerte del Rosario\", site: \"Cerro del Cubo\", category: \"IV Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"\", capacity: \"-\" },\n { num: 30, title: \"Galer\u00eda Victoria Grande - Victoria Chica\", site: \"Cerro del Cubo\", category: \"IV Recinto\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"\", capacity: \"<20\" },\n { num: 31, title: \"Plaza de Toros\", site: \"Cerro de San Lorenzo\", category: \"Exteriores\", duration: \"30 minutos\", price: \"Gratuito\", guide: \"\", capacity: \"<50\" },\n { num: 32, title: \"Plaza de Toros Completa\", site: \"Cerro de San Lorenzo\", category: \"Exteriores\", duration: \"1 hora\", price: \"Gratuito\", guide: \"\", capacity: \"<50\" },\n { num: 33, title: \"Cementerio H\u00e9roes\", site: \"Cementerio de la Pur\u00edsima\", category: \"Exteriores\", duration: \"1 hora\", price: \"Subvencionado\", guide: \"Ox\u00edgeno Laboratorio Cultural\", capacity: \"-\" },\n { num: 34, title: \"Cementerio Noche\", site: \"Cementerio de la Pur\u00edsima\", category: \"Exteriores\", duration: \"1 hora\", price: \"Privado\", guide: \"\", capacity: \"-\" },\n { num: 35, title: \"Melilla la Vieja, el origen\", site: \"Plaza de las Culturas\", category: \"III Recinto\", duration: \"2 horas\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 36, title: \"Secretos del Modernismo\", site: \"Tri\u00e1ngulo de Oro\", category: \"Modernismo\", duration: \"90 minutos\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 37, title: \"Misterios y Leyendas\", site: \"Cementerio de la Pur\u00edsima\", category: \"Semblanza hist\u00f3rica\", duration: \"90 minutos\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 38, title: \"Sende Ruta de Melilla\", site: \"Explanada Cuartel de la Legi\u00f3n\", category: \"-\", duration: \"3 horas\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 39, title: \"Ellas, mujeres en la historia de Melilla\", site: \"Hospital de la Cruz Roja\", category: \"-\", duration: \"90 minutos\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 40, title: \"Tour privado Melilla esencial\", site: \"Plaza de las Culturas\", category: \"-\", duration: \"3 horas\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 41, title: \"Sabores de la ciudad\", site: \"Plaza de Espa\u00f1a\", category: \"Tour gastron\u00f3mico\", duration: \"3 horas\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 42, title: \"Melilla en bicicleta\", site: \"Plaza de Toros\", category: \"Tour en bicicleta\", duration: \"2 horas\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 43, title: \"Melilla en paddle surf\", site: \"Puerto Deportivo\", category: \"Tour en paddle surf\", duration: \"3 horas\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 44, title: \"Tour virtual\", site: \"Online\", category: \"Virtual\", duration: \"50 minutos\", price: \"Gratuito\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" },\n { num: 45, title: \"Excursi\u00f3n a Marruecos. Monte Gurug\u00fa y Nador\", site: \"Rotonda Frontera de Beni Ensar\", category: \"Internacional\", duration: \"Medio d\u00eda\", price: \"Privado\", guide: \"Tu Gu\u00eda en Melilla\", capacity: \"-\", url: \"https:\/\/tuguiaenmelilla.com\/\" }\n ];\n\n const els = {\n cards: document.getElementById('cards'),\n search: document.getElementById('search'),\n category: document.getElementById('category'),\n price: document.getElementById('price'),\n duration: document.getElementById('duration'),\n resetBtn: document.getElementById('resetBtn'),\n resultsCount: document.getElementById('resultsCount'),\n activeTags: document.getElementById('activeTags'),\n emptyState: document.getElementById('emptyState')\n };\n\n const statusClass = (value) => (value || '')\n .toLowerCase()\n .normalize('NFD')\n .replace(\/[\\u0300-\\u036f]\/g, '')\n .replace(\/[^a-z0-9]+\/g, '-')\n .replace(\/(^-|-$)\/g, '');\n\n function uniqueValues(key) {\n return [...new Set(routes.map(item => item[key]).filter(Boolean))]\n .sort((a, b) => a.localeCompare(b, 'es'));\n }\n\n function fillSelect(select, values) {\n values.forEach(value => {\n const opt = document.createElement('option');\n opt.value = value;\n opt.textContent = value;\n select.appendChild(opt);\n });\n }\n\n fillSelect(els.category, uniqueValues('category'));\n fillSelect(els.price, uniqueValues('price'));\n fillSelect(els.duration, uniqueValues('duration'));\n\n function buildCard(route) {\n const hasLink = Boolean(route.url);\n\n return `\n <article class=\"route-card\">\n <div class=\"route-top\">\n <span class=\"route-num\">#${route.num}<\/span>\n <span class=\"status ${statusClass(route.price)}\">${route.price || 'Consultar'}<\/span>\n <\/div>\n\n <div>\n <h3>${route.title}<\/h3>\n <p class=\"route-subtitle\">${route.site || 'Ubicaci\u00f3n por confirmar'} \u00b7 ${route.category || 'Categor\u00eda general'}<\/p>\n <\/div>\n\n <div class=\"meta-grid\">\n <div class=\"meta-item\">\n <span class=\"meta-label\">Duraci\u00f3n<\/span>\n <span class=\"meta-value\">${route.duration || 'Consultar'}<\/span>\n <\/div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Aforo orientativo<\/span>\n <span class=\"meta-value\">${route.capacity || 'Consultar'}<\/span>\n <\/div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Punto o zona<\/span>\n <span class=\"meta-value\">${route.site || 'Consultar'}<\/span>\n <\/div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Tipo de recorrido<\/span>\n <span class=\"meta-value\">${route.category || 'General'}<\/span>\n <\/div>\n <\/div>\n\n ${\n hasLink\n ? `\n <div class=\"route-footer\">\n <span class=\"guide\">Gu\u00eda \/ gesti\u00f3n: <strong>${route.guide || 'Por concretar'}<\/strong><\/span>\n <a class=\"route-link\" href=\"${route.url}\" target=\"_blank\" rel=\"noopener noreferrer\">M\u00e1s informaci\u00f3n<\/a>\n <\/div>\n `\n : `\n <div class=\"route-footer\">\n <span class=\"guide\">Gu\u00eda \/ gesti\u00f3n: <strong>${route.guide || 'Por concretar'}<\/strong><\/span>\n <\/div>\n `\n }\n <\/article>\n `;\n }\n\n function renderTags(filters) {\n const tags = [];\n if (filters.search) tags.push(`B\u00fasqueda: \"${filters.search}\"`);\n if (filters.category) tags.push(filters.category);\n if (filters.price) tags.push(filters.price);\n if (filters.duration) tags.push(filters.duration);\n\n els.activeTags.innerHTML = tags.map(tag => `<span class=\"tag\">${tag}<\/span>`).join('');\n }\n\n function getFilters() {\n return {\n search: els.search.value.trim().toLowerCase(),\n category: els.category.value,\n price: els.price.value,\n duration: els.duration.value\n };\n }\n\n function applyFilters() {\n const filters = getFilters();\n\n const filtered = routes.filter(route => {\n const haystack = [route.title, route.site, route.category, route.price, route.guide]\n .filter(Boolean)\n .join(' ')\n .toLowerCase();\n\n return (!filters.search || haystack.includes(filters.search))\n && (!filters.category || route.category === filters.category)\n && (!filters.price || route.price === filters.price)\n && (!filters.duration || route.duration === filters.duration);\n });\n\n els.cards.innerHTML = filtered.map(buildCard).join('');\n els.resultsCount.textContent = `Mostrando ${filtered.length} itinerario${filtered.length === 1 ? '' : 's'}`;\n renderTags(filters);\n els.emptyState.style.display = filtered.length ? 'none' : 'block';\n }\n\n [els.search, els.category, els.price, els.duration].forEach(el => {\n el.addEventListener('input', applyFilters);\n el.addEventListener('change', applyFilters);\n });\n\n els.resetBtn.addEventListener('click', () => {\n els.search.value = '';\n els.category.value = '';\n els.price.value = '';\n els.duration.value = '';\n applyFilters();\n });\n\n applyFilters();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Rutas e itinerarios guiados | Melilla Monumental Melilla Monumental \u00b7 visitas guiadas Rutas e itinerarios para descubrir el patrimonio de […]<\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5756","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Melilla Monumental","author_link":"https:\/\/melillamonumental.es\/pt\/author\/melilla\/"},"uagb_comment_info":0,"uagb_excerpt":"Rutas e itinerarios guiados | Melilla Monumental Melilla Monumental \u00b7 visitas guiadas Rutas e itinerarios para descubrir el patrimonio de […]","_links":{"self":[{"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/pages\/5756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/comments?post=5756"}],"version-history":[{"count":16,"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/pages\/5756\/revisions"}],"predecessor-version":[{"id":10097,"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/pages\/5756\/revisions\/10097"}],"wp:attachment":[{"href":"https:\/\/melillamonumental.es\/pt\/wp-json\/wp\/v2\/media?parent=5756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}