Patrimonio | Melilla Monumental<\/title>\n <meta name=\"description\" content=\"Explora el patrimonio de Melilla a trav\u00e9s de categor\u00edas tem\u00e1ticas y accede a sus entradas hist\u00f3ricas, culturales y monumentales.\" \/>\n <style>\n :root{\n --bg: #f7f2e9;\n --bg-soft: #fbf8f2;\n --surface: rgba(255,255,255,.72);\n --surface-strong: rgba(255,255,255,.9);\n --border: rgba(125, 94, 35, 0.14);\n --text: #1d1814;\n --text-soft: #60564b;\n --gold: #a47a22;\n --gold-2: #c49a3c;\n --gold-3: #e7d3a4;\n --accent: #6c4f1c;\n --shadow: 0 20px 50px rgba(39, 28, 10, .10);\n --shadow-hover: 0 24px 60px rgba(39, 28, 10, .16);\n --radius-xl: 28px;\n --radius-lg: 20px;\n --radius-md: 16px;\n --max: 1360px;\n --blur: blur(16px);\n --transition: .35s cubic-bezier(.2,.8,.2,1);\n }\n\n *{box-sizing:border-box}\n html{scroll-behavior:smooth}\n body{\n margin:0;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif;\n color:var(--text);\n background:\n radial-gradient(circle at top left, rgba(196,154,60,.18), transparent 30%),\n radial-gradient(circle at top right, rgba(164,122,34,.10), transparent 26%),\n linear-gradient(180deg, #f4efe5 0%, #f8f4ed 35%, #f7f2e9 100%);\n }\n\n img{max-width:100%;display:block}\n a{text-decoration:none;color:inherit}\n\n .mm-shell{\n width:min(100% - 32px, var(--max));\n margin-inline:auto;\n }\n\n .mm-page{\n position:relative;\n overflow:hidden;\n padding:32px 0 80px;\n }\n\n .mm-orb{\n position:absolute;\n border-radius:999px;\n pointer-events:none;\n filter: blur(60px);\n opacity:.38;\n z-index:0;\n }\n\n .mm-orb--1{\n width:320px;height:320px;\n background:rgba(196,154,60,.22);\n top:-80px;left:-120px;\n }\n\n .mm-orb--2{\n width:280px;height:280px;\n background:rgba(164,122,34,.15);\n right:-80px;top:180px;\n }\n\n .mm-hero{\n position:relative;\n z-index:1;\n display:grid;\n grid-template-columns: 1.15fr .85fr;\n gap:28px;\n align-items:stretch;\n margin-bottom:34px;\n }\n\n .mm-hero__main,\n .mm-hero__side{\n position:relative;\n overflow:hidden;\n border:1px solid var(--border);\n border-radius:32px;\n box-shadow:var(--shadow);\n backdrop-filter:var(--blur);\n -webkit-backdrop-filter:var(--blur);\n background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.58));\n }\n\n .mm-hero__main{\n min-height:430px;\n padding:clamp(28px,4vw,52px);\n isolation:isolate;\n display:flex;\n flex-direction:column;\n justify-content:center;\n background:\n linear-gradient(135deg, rgba(31,24,16,.48), rgba(31,24,16,.20)),\n linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),\n url(\"https:\/\/melillamonumental.es\/wp-content\/uploads\/2020\/05\/C\u00e1mara-de-Comercio-02.jpg\") center\/cover no-repeat;\n color:#fff;\n }\n\n .mm-hero__main::before{\n content:\"\";\n position:absolute;\n inset:auto -70px -70px auto;\n width:260px;height:260px;\n border-radius:999px;\n background:radial-gradient(circle, rgba(231,211,164,.45), rgba(231,211,164,0));\n z-index:-1;\n }\n\n .mm-kicker{\n display:inline-flex;\n width:max-content;\n align-items:center;\n gap:10px;\n padding:10px 14px;\n border-radius:999px;\n background:rgba(255,255,255,.12);\n border:1px solid rgba(255,255,255,.18);\n backdrop-filter: blur(8px);\n font-size:.82rem;\n font-weight:700;\n letter-spacing:.12em;\n text-transform:uppercase;\n margin:0 0 18px;\n }\n\n .mm-kicker::before{\n content:\"\";\n width:8px;height:8px;border-radius:999px;\n background:var(--gold-3);\n box-shadow:0 0 0 8px rgba(231,211,164,.14);\n }\n\n .mm-title{\n margin:0 0 16px;\n font-size:clamp(2.3rem, 5vw, 4.4rem);\n line-height:.98;\n letter-spacing:-.03em;\n max-width:10ch;\n color:#ffffff;\n text-shadow:0 4px 14px rgba(0,0,0,0.35);\n }\n\n .mm-intro{\n margin:0;\n max-width:62ch;\n font-size:1.05rem;\n line-height:1.8;\n color:rgba(255,255,255,.90);\n }\n\n .mm-hero__meta{\n display:flex;\n flex-wrap:wrap;\n gap:12px;\n margin-top:26px;\n }\n\n .mm-chip{\n padding:12px 16px;\n border-radius:999px;\n background:rgba(255,255,255,.14);\n border:1px solid rgba(255,255,255,.16);\n font-size:.95rem;\n font-weight:600;\n color:#fff;\n }\n\n .mm-hero__side{\n padding:22px;\n display:grid;\n gap:16px;\n background:\n linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.84));\n }\n\n .mm-side-card{\n position:relative;\n overflow:hidden;\n border-radius:22px;\n border:1px solid rgba(164,122,34,.10);\n background:\n linear-gradient(180deg, rgba(255,255,255,.9), rgba(247,242,233,.85));\n padding:22px 20px;\n min-height:120px;\n }\n\n .mm-side-card::after{\n content:\"\";\n position:absolute;\n inset:auto -20px -20px auto;\n width:90px;height:90px;border-radius:999px;\n background:radial-gradient(circle, rgba(196,154,60,.18), transparent 70%);\n }\n\n .mm-side-card__label{\n margin:0 0 8px;\n color:var(--gold);\n text-transform:uppercase;\n letter-spacing:.08em;\n font-size:.78rem;\n font-weight:800;\n }\n\n .mm-side-card__title{\n margin:0 0 8px;\n font-size:1.22rem;\n line-height:1.25;\n }\n\n .mm-side-card__text{\n margin:0;\n color:var(--text-soft);\n line-height:1.65;\n font-size:.95rem;\n }\n\n .mm-panel{\n position:relative;\n z-index:1;\n border:1px solid var(--border);\n border-radius:30px;\n background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.68));\n backdrop-filter:var(--blur);\n -webkit-backdrop-filter:var(--blur);\n box-shadow:var(--shadow);\n padding:26px;\n }\n\n .mm-panel__top{\n display:flex;\n align-items:end;\n justify-content:space-between;\n gap:16px;\n flex-wrap:wrap;\n margin-bottom:18px;\n }\n\n .mm-panel__title-wrap h2{\n margin:0 0 8px;\n font-size:clamp(1.55rem, 2.5vw, 2.2rem);\n line-height:1.1;\n }\n\n .mm-panel__title-wrap p{\n margin:0;\n color:var(--text-soft);\n line-height:1.7;\n }\n\n .mm-count{\n display:inline-flex;\n align-items:center;\n gap:10px;\n padding:12px 16px;\n border-radius:999px;\n background:rgba(164,122,34,.08);\n border:1px solid rgba(164,122,34,.12);\n color:var(--accent);\n font-weight:700;\n white-space:nowrap;\n }\n\n .mm-count .dot{\n width:8px;height:8px;border-radius:999px;\n background:var(--gold);\n box-shadow:0 0 0 8px rgba(164,122,34,.10);\n }\n\n .mm-cats{\n display:flex;\n flex-wrap:wrap;\n gap:12px;\n margin-bottom:26px;\n }\n\n .mm-cat{\n position:relative;\n border:none;\n cursor:pointer;\n border-radius:999px;\n padding:14px 18px;\n font-size:.97rem;\n font-weight:700;\n color:var(--text);\n background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,242,233,.85));\n border:1px solid rgba(125, 94, 35, .10);\n transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);\n box-shadow:0 10px 20px rgba(46, 34, 12, .04);\n }\n\n .mm-cat:hover,\n .mm-cat:focus-visible{\n transform:translateY(-2px);\n box-shadow:0 14px 26px rgba(46, 34, 12, .08);\n outline:none;\n }\n\n .mm-cat.is-active{\n color:#fff;\n background:linear-gradient(135deg, var(--gold-2), var(--gold));\n box-shadow:0 18px 30px rgba(164,122,34,.20);\n }\n\n .mm-toolbar{\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:16px;\n flex-wrap:wrap;\n margin-bottom:16px;\n }\n\n .mm-current{\n display:flex;\n align-items:center;\n gap:12px;\n min-width:0;\n }\n\n .mm-current__badge{\n width:42px;height:42px;border-radius:14px;\n display:grid;place-items:center;\n background:linear-gradient(135deg, rgba(196,154,60,.18), rgba(164,122,34,.10));\n color:var(--gold);\n font-weight:800;\n font-size:1rem;\n flex-shrink:0;\n }\n\n .mm-current__text h3{\n margin:0 0 4px;\n font-size:1.18rem;\n line-height:1.2;\n }\n\n .mm-current__text p{\n margin:0;\n color:var(--text-soft);\n font-size:.96rem;\n line-height:1.6;\n }\n\n .mm-status{\n min-height:28px;\n margin-bottom:18px;\n color:var(--text-soft);\n font-size:.96rem;\n line-height:1.5;\n }\n\n .mm-grid{\n display:grid;\n grid-template-columns:repeat(3, minmax(0, 1fr));\n gap:22px;\n }\n\n .mm-card{\n position:relative;\n overflow:hidden;\n display:flex;\n flex-direction:column;\n min-height:100%;\n border-radius:24px;\n border:1px solid rgba(125, 94, 35, .10);\n background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84));\n box-shadow:0 14px 30px rgba(46, 34, 12, .07);\n transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);\n isolation:isolate;\n }\n\n .mm-card:hover,\n .mm-card:focus-visible{\n transform:translateY(-8px);\n box-shadow:var(--shadow-hover);\n border-color:rgba(164,122,34,.24);\n outline:none;\n }\n\n .mm-card__media{\n position:relative;\n aspect-ratio: 16 \/ 10;\n overflow:hidden;\n background:\n linear-gradient(135deg, #d8c29b 0%, #bc954b 48%, #8e6a2a 100%);\n }\n\n .mm-card__media::after{\n content:\"\";\n position:absolute;\n inset:0;\n background:linear-gradient(180deg, rgba(31,24,16,.02), rgba(31,24,16,.18));\n }\n\n .mm-card__media img{\n width:100%;\n height:100%;\n object-fit:cover;\n transition:transform .7s ease;\n }\n\n .mm-card:hover .mm-card__media img{\n transform:scale(1.06);\n }\n\n .mm-card__tag{\n position:absolute;\n top:14px;\n left:14px;\n z-index:2;\n padding:8px 12px;\n border-radius:999px;\n background:rgba(255,255,255,.84);\n backdrop-filter:blur(10px);\n border:1px solid rgba(255,255,255,.35);\n color:var(--accent);\n font-size:.76rem;\n font-weight:800;\n text-transform:uppercase;\n letter-spacing:.08em;\n }\n\n .mm-card__body{\n display:flex;\n flex-direction:column;\n flex:1;\n padding:20px 20px 22px;\n }\n\n .mm-card__title{\n margin:0 0 12px;\n font-size:1.24rem;\n line-height:1.25;\n letter-spacing:-.01em;\n }\n\n .mm-card__excerpt{\n margin:0 0 18px;\n color:var(--text-soft);\n font-size:.97rem;\n line-height:1.72;\n flex:1;\n }\n\n .mm-card__footer{\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:12px;\n margin-top:auto;\n }\n\n .mm-card__cta{\n display:inline-flex;\n align-items:center;\n gap:10px;\n color:var(--gold);\n font-weight:800;\n letter-spacing:-.01em;\n }\n\n .mm-card__cta::after{\n content:\"\u2192\";\n transition:transform .25s ease;\n }\n\n .mm-card:hover .mm-card__cta::after{\n transform:translateX(4px);\n }\n\n .mm-card__pulse{\n width:12px;height:12px;border-radius:999px;\n background:var(--gold-2);\n box-shadow:0 0 0 10px rgba(196,154,60,.12);\n flex-shrink:0;\n }\n\n .mm-empty{\n grid-column:1 \/ -1;\n border-radius:24px;\n padding:30px 24px;\n background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,242,233,.86));\n border:1px solid rgba(125, 94, 35, .10);\n text-align:center;\n color:var(--text-soft);\n box-shadow:0 10px 26px rgba(46, 34, 12, .05);\n }\n\n .mm-empty strong{\n display:block;\n color:var(--text);\n font-size:1.08rem;\n margin-bottom:8px;\n }\n\n .mm-skeleton{\n overflow:hidden;\n position:relative;\n min-height:360px;\n border-radius:24px;\n background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(247,242,233,.78));\n border:1px solid rgba(125, 94, 35, .08);\n }\n\n .mm-skeleton::before{\n content:\"\";\n position:absolute;\n inset:0;\n transform:translateX(-100%);\n background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);\n animation:mmShimmer 1.4s infinite;\n }\n\n @keyframes mmShimmer{\n 100%{transform:translateX(100%)}\n }\n\n .mm-fade-up{\n animation:mmFadeUp .45s ease both;\n }\n\n @keyframes mmFadeUp{\n from{opacity:0;transform:translateY(12px)}\n to{opacity:1;transform:translateY(0)}\n }\n\n @media (max-width: 1120px){\n .mm-hero{\n grid-template-columns:1fr;\n }\n\n .mm-grid{\n grid-template-columns:repeat(2, minmax(0, 1fr));\n }\n }\n\n @media (max-width: 720px){\n .mm-page{\n padding:18px 0 54px;\n }\n\n .mm-shell{\n width:min(100% - 20px, var(--max));\n }\n\n .mm-hero__main{\n min-height:360px;\n padding:26px 22px;\n }\n\n .mm-title{\n max-width:unset;\n }\n\n .mm-panel{\n padding:18px;\n border-radius:24px;\n }\n\n .mm-cats{\n gap:10px;\n }\n\n .mm-cat{\n width:100%;\n text-align:center;\n }\n\n .mm-grid{\n grid-template-columns:1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <main class=\"mm-page\">\n <div class=\"mm-orb mm-orb--1\"><\/div>\n <div class=\"mm-orb mm-orb--2\"><\/div>\n\n <div class=\"mm-shell\">\n <section class=\"mm-hero\" aria-label=\"Cabecera de la p\u00e1gina Patrimonio\">\n <div class=\"mm-hero__main\">\n <p class=\"mm-kicker\">Patrimonio cultural de Melilla<\/p>\n <h1 class=\"mm-title\">Descubre el patrimonio de la ciudad<\/h1>\n <p class=\"mm-intro\">\n Recorre edificios, monumentos, espacios religiosos, personajes y contenidos hist\u00f3ricos relevantes de Melilla a trav\u00e9s de una navegaci\u00f3n visual, clara y din\u00e1mica.\n <\/p>\n\n <div class=\"mm-hero__meta\">\n <span class=\"mm-chip\">Consulta por categor\u00edas<\/span>\n <span class=\"mm-chip\">Acceso a entradas individuales<\/span>\n <span class=\"mm-chip\">Dise\u00f1o visual e institucional<\/span>\n <\/div>\n <\/div>\n\n <aside class=\"mm-hero__side\" aria-label=\"\u00c1mbitos del patrimonio de Melilla\">\n <article class=\"mm-side-card\">\n <p class=\"mm-side-card__label\">Arquitectura y ciudad<\/p>\n <h2 class=\"mm-side-card__title\">Edificaciones y patrimonio construido<\/h2>\n <p class=\"mm-side-card__text\">\n Recorre inmuebles, espacios emblem\u00e1ticos y elementos arquitect\u00f3nicos que forman parte de la identidad hist\u00f3rica y urbana de Melilla.\n <\/p>\n <\/article>\n\n <article class=\"mm-side-card\">\n <p class=\"mm-side-card__label\">Memoria monumental<\/p>\n <h2 class=\"mm-side-card__title\">Monumentos, patrimonio religioso y legado simb\u00f3lico<\/h2>\n <p class=\"mm-side-card__text\">\n Consulta contenidos dedicados a monumentos, esculturas, espacios religiosos y otros bienes de especial valor hist\u00f3rico, art\u00edstico y cultural.\n <\/p>\n <\/article>\n\n <article class=\"mm-side-card\">\n <p class=\"mm-side-card__label\">Historia y protagonistas<\/p>\n <h2 class=\"mm-side-card__title\">Historia general, personajes y actividades<\/h2>\n <p class=\"mm-side-card__text\">\n Accede a entradas relacionadas con la historia de la ciudad, sus protagonistas, noticias y actividades vinculadas a la difusi\u00f3n del patrimonio.\n <\/p>\n <\/article>\n <\/aside>\n <\/section>\n\n <section class=\"mm-panel\" aria-labelledby=\"mm-panel-title\">\n <div class=\"mm-panel__top\">\n <div class=\"mm-panel__title-wrap\">\n <h2 id=\"mm-panel-title\">Explorar por categor\u00edas<\/h2>\n <p>\n Pulsa sobre una categor\u00eda para visualizar las entradas asociadas y acceder a cada contenido desde su tarjeta.\n <\/p>\n <\/div>\n\n <div class=\"mm-count\" id=\"mm-count-pill\">\n <span class=\"dot\"><\/span>\n <span id=\"mm-count-text\">Preparando contenido\u2026<\/span>\n <\/div>\n <\/div>\n\n <nav class=\"mm-cats\" aria-label=\"Men\u00fa de categor\u00edas de patrimonio\">\n <button class=\"mm-cat is-active\" data-category=\"historia\">Descubre nuestra historia<\/button>\n <button class=\"mm-cat\" data-category=\"edificaciones\">Edificaciones<\/button>\n <button class=\"mm-cat\" data-category=\"noticias\">Noticias<\/button>\n <button class=\"mm-cat\" data-category=\"religioso\">Religioso<\/button>\n <button class=\"mm-cat\" data-category=\"personajes_historicos\">Personajes hist\u00f3ricos<\/button>\n <button class=\"mm-cat\" data-category=\"historia_general\">Historia general<\/button>\n <button class=\"mm-cat\" data-category=\"actividades\">Actividades<\/button>\n <button class=\"mm-cat\" data-category=\"monumentos\">Monumentos<\/button>\n <\/nav>\n\n <div class=\"mm-toolbar\">\n <div class=\"mm-current\">\n <div class=\"mm-current__badge\" id=\"mm-current-badge\" aria-hidden=\"true\">D<\/div>\n <div class=\"mm-current__text\">\n <h3 id=\"mm-current-category\">Descubre nuestra historia<\/h3>\n <p>Visualiza las entradas publicadas dentro de esta categor\u00eda.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mm-status\" id=\"mm-status\" aria-live=\"polite\">Cargando contenidos\u2026<\/div>\n\n <div class=\"mm-grid\" id=\"mm-grid\" role=\"list\"><\/div>\n <\/section>\n <\/div>\n <\/main>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", () => {\n const buttons = document.querySelectorAll(\".mm-cat\");\n const grid = document.getElementById(\"mm-grid\");\n const status = document.getElementById(\"mm-status\");\n const currentCategory = document.getElementById(\"mm-current-category\");\n const currentBadge = document.getElementById(\"mm-current-badge\");\n const countText = document.getElementById(\"mm-count-text\");\n\n const WP_API_BASE = `${window.location.origin}\/wp-json\/wp\/v2`;\n\n const categoryLabels = {\n \"historia\": \"Descubre nuestra historia\",\n \"edificaciones\": \"Edificaciones\",\n \"noticias\": \"Noticias\",\n \"religioso\": \"Religioso\",\n \"personajes_historicos\": \"Personajes hist\u00f3ricos\",\n \"historia_general\": \"Historia general\",\n \"actividades\": \"Actividades\",\n \"monumentos\": \"Monumentos\"\n };\n\n function stripHTML(html) {\n const temp = document.createElement(\"div\");\n temp.innerHTML = html || \"\";\n return temp.textContent || temp.innerText || \"\";\n }\n\n function truncateText(text, maxLength = 165) {\n const clean = (text || \"\").trim();\n if (clean.length <= maxLength) return clean;\n return clean.slice(0, maxLength).trim() + \"\u2026\";\n }\n\n function renderSkeletons(count = 6) {\n grid.innerHTML = \"\";\n for (let i = 0; i < count; i++) {\n const sk = document.createElement(\"div\");\n sk.className = \"mm-skeleton\";\n grid.appendChild(sk);\n }\n }\n\n async function getCategoryIdBySlug(slug) {\n const res = await fetch(`${WP_API_BASE}\/categories?slug=${encodeURIComponent(slug)}`);\n if (!res.ok) throw new Error(\"No se ha podido consultar la categor\u00eda.\");\n const data = await res.json();\n if (!Array.isArray(data) || !data.length) {\n throw new Error(`No existe ninguna categor\u00eda con el slug \"${slug}\".`);\n }\n return data[0].id;\n }\n\n function fallbackInitial(text) {\n return (text || \"P\").charAt(0).toUpperCase();\n }\n\n function buildCard(post, categoryName) {\n const title = stripHTML(post?.title?.rendered || \"Sin t\u00edtulo\");\n const excerptRaw = stripHTML(post?.excerpt?.rendered || \"\");\n const excerpt = truncateText(excerptRaw || \"Accede a esta entrada para consultar toda la informaci\u00f3n disponible.\");\n const link = post?.link || \"#\";\n\n let mediaHTML = `\n <div class=\"mm-card__media\">\n <span class=\"mm-card__tag\">${categoryName}<\/span>\n <\/div>\n `;\n\n if (post._embedded && post._embedded[\"wp:featuredmedia\"] && post._embedded[\"wp:featuredmedia\"][0]) {\n const media = post._embedded[\"wp:featuredmedia\"][0];\n const imageUrl = media?.source_url || \"\";\n const altText = media?.alt_text ? stripHTML(media.alt_text) : title;\n\n if (imageUrl) {\n mediaHTML = `\n <div class=\"mm-card__media\">\n <span class=\"mm-card__tag\">${categoryName}<\/span>\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${altText}\">\n <\/div>\n `;\n }\n }\n\n const article = document.createElement(\"a\");\n article.className = \"mm-card mm-fade-up\";\n article.href = link;\n article.setAttribute(\"role\", \"listitem\");\n article.innerHTML = `\n ${mediaHTML}\n <div class=\"mm-card__body\">\n <h3 class=\"mm-card__title\">${title}<\/h3>\n <p class=\"mm-card__excerpt\">${excerpt}<\/p>\n <div class=\"mm-card__footer\">\n <span class=\"mm-card__cta\">Ver contenido<\/span>\n <span class=\"mm-card__pulse\" aria-hidden=\"true\"><\/span>\n <\/div>\n <\/div>\n `;\n return article;\n }\n\n function renderPosts(posts, categorySlug) {\n const categoryName = categoryLabels[categorySlug] || \"Patrimonio\";\n grid.innerHTML = \"\";\n\n if (!posts.length) {\n grid.innerHTML = `\n <div class=\"mm-empty mm-fade-up\">\n <strong>No hay entradas publicadas en esta categor\u00eda<\/strong>\n Todav\u00eda no existen contenidos visibles dentro de <em>${categoryName}<\/em>.\n <\/div>\n `;\n return;\n }\n\n posts.forEach(post => {\n grid.appendChild(buildCard(post, categoryName));\n });\n }\n\n async function loadPostsByCategory(slug) {\n const categoryName = categoryLabels[slug] || \"Categor\u00eda\";\n\n currentCategory.textContent = categoryName;\n currentBadge.textContent = fallbackInitial(categoryName);\n countText.textContent = \"Cargando\u2026\";\n status.textContent = `Consultando contenidos de ${categoryName}\u2026`;\n\n renderSkeletons();\n\n try {\n const categoryId = await getCategoryIdBySlug(slug);\n\n const res = await fetch(\n `${WP_API_BASE}\/posts?categories=${categoryId}&per_page=100&_embed&orderby=date&order=desc`\n );\n\n if (!res.ok) {\n throw new Error(\"No se han podido cargar las entradas.\");\n }\n\n const posts = await res.json();\n renderPosts(posts, slug);\n\n const total = posts.length;\n status.textContent = total === 1\n ? `Se ha encontrado 1 entrada en ${categoryName}.`\n : `Se han encontrado ${total} entradas en ${categoryName}.`;\n\n countText.textContent = total === 1 ? \"1 entrada\" : `${total} entradas`;\n } catch (error) {\n console.error(error);\n grid.innerHTML = `\n <div class=\"mm-empty mm-fade-up\">\n <strong>Error al cargar los contenidos<\/strong>\n Revisa que las categor\u00edas existan en WordPress y que sus slugs coincidan exactamente con los usados en esta p\u00e1gina.\n <\/div>\n `;\n status.textContent = \"No ha sido posible cargar las entradas de esta categor\u00eda.\";\n countText.textContent = \"Sin datos\";\n }\n }\n\n buttons.forEach(button => {\n button.addEventListener(\"click\", () => {\n buttons.forEach(btn => btn.classList.remove(\"is-active\"));\n button.classList.add(\"is-active\");\n loadPostsByCategory(button.dataset.category);\n });\n });\n\n loadPostsByCategory(\"historia\");\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Patrimonio | Melilla Monumental Patrimonio cultural de Melilla Descubre el patrimonio de la ciudad Recorre edificios, monumentos, espacios religiosos, personajes […]<\/p>\n","protected":false},"author":161,"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-9993","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":"Ricardo Romero","author_link":"https:\/\/melillamonumental.es\/ja\/author\/rrvadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"Patrimonio | Melilla Monumental Patrimonio cultural de Melilla Descubre el patrimonio de la ciudad Recorre edificios, monumentos, espacios religiosos, personajes […]","_links":{"self":[{"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/pages\/9993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/users\/161"}],"replies":[{"embeddable":true,"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/comments?post=9993"}],"version-history":[{"count":5,"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/pages\/9993\/revisions"}],"predecessor-version":[{"id":10030,"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/pages\/9993\/revisions\/10030"}],"wp:attachment":[{"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/media?parent=9993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":9993,"date":"2026-03-06T22:18:17","date_gmt":"2026-03-06T21:18:17","guid":{"rendered":"https:\/\/melillamonumental.es\/?page_id=9993"},"modified":"2026-03-17T09:35:51","modified_gmt":"2026-03-17T08:35:51","slug":"patrimonio","status":"publish","type":"page","link":"https:\/\/melillamonumental.es\/ja\/patrimonio\/","title":{"rendered":"patrimonio"},"content":{"rendered":"\n\n\n\n \n \n Patrimonio | Melilla Monumental<\/title>\n <meta name=\"description\" content=\"Explora el patrimonio de Melilla a trav\u00e9s de categor\u00edas tem\u00e1ticas y accede a sus entradas hist\u00f3ricas, culturales y monumentales.\" \/>\n <style>\n :root{\n --bg: #f7f2e9;\n --bg-soft: #fbf8f2;\n --surface: rgba(255,255,255,.72);\n --surface-strong: rgba(255,255,255,.9);\n --border: rgba(125, 94, 35, 0.14);\n --text: #1d1814;\n --text-soft: #60564b;\n --gold: #a47a22;\n --gold-2: #c49a3c;\n --gold-3: #e7d3a4;\n --accent: #6c4f1c;\n --shadow: 0 20px 50px rgba(39, 28, 10, .10);\n --shadow-hover: 0 24px 60px rgba(39, 28, 10, .16);\n --radius-xl: 28px;\n --radius-lg: 20px;\n --radius-md: 16px;\n --max: 1360px;\n --blur: blur(16px);\n --transition: .35s cubic-bezier(.2,.8,.2,1);\n }\n\n *{box-sizing:border-box}\n html{scroll-behavior:smooth}\n body{\n margin:0;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif;\n color:var(--text);\n background:\n radial-gradient(circle at top left, rgba(196,154,60,.18), transparent 30%),\n radial-gradient(circle at top right, rgba(164,122,34,.10), transparent 26%),\n linear-gradient(180deg, #f4efe5 0%, #f8f4ed 35%, #f7f2e9 100%);\n }\n\n img{max-width:100%;display:block}\n a{text-decoration:none;color:inherit}\n\n .mm-shell{\n width:min(100% - 32px, var(--max));\n margin-inline:auto;\n }\n\n .mm-page{\n position:relative;\n overflow:hidden;\n padding:32px 0 80px;\n }\n\n .mm-orb{\n position:absolute;\n border-radius:999px;\n pointer-events:none;\n filter: blur(60px);\n opacity:.38;\n z-index:0;\n }\n\n .mm-orb--1{\n width:320px;height:320px;\n background:rgba(196,154,60,.22);\n top:-80px;left:-120px;\n }\n\n .mm-orb--2{\n width:280px;height:280px;\n background:rgba(164,122,34,.15);\n right:-80px;top:180px;\n }\n\n .mm-hero{\n position:relative;\n z-index:1;\n display:grid;\n grid-template-columns: 1.15fr .85fr;\n gap:28px;\n align-items:stretch;\n margin-bottom:34px;\n }\n\n .mm-hero__main,\n .mm-hero__side{\n position:relative;\n overflow:hidden;\n border:1px solid var(--border);\n border-radius:32px;\n box-shadow:var(--shadow);\n backdrop-filter:var(--blur);\n -webkit-backdrop-filter:var(--blur);\n background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.58));\n }\n\n .mm-hero__main{\n min-height:430px;\n padding:clamp(28px,4vw,52px);\n isolation:isolate;\n display:flex;\n flex-direction:column;\n justify-content:center;\n background:\n linear-gradient(135deg, rgba(31,24,16,.48), rgba(31,24,16,.20)),\n linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),\n url(\"https:\/\/melillamonumental.es\/wp-content\/uploads\/2020\/05\/C\u00e1mara-de-Comercio-02.jpg\") center\/cover no-repeat;\n color:#fff;\n }\n\n .mm-hero__main::before{\n content:\"\";\n position:absolute;\n inset:auto -70px -70px auto;\n width:260px;height:260px;\n border-radius:999px;\n background:radial-gradient(circle, rgba(231,211,164,.45), rgba(231,211,164,0));\n z-index:-1;\n }\n\n .mm-kicker{\n display:inline-flex;\n width:max-content;\n align-items:center;\n gap:10px;\n padding:10px 14px;\n border-radius:999px;\n background:rgba(255,255,255,.12);\n border:1px solid rgba(255,255,255,.18);\n backdrop-filter: blur(8px);\n font-size:.82rem;\n font-weight:700;\n letter-spacing:.12em;\n text-transform:uppercase;\n margin:0 0 18px;\n }\n\n .mm-kicker::before{\n content:\"\";\n width:8px;height:8px;border-radius:999px;\n background:var(--gold-3);\n box-shadow:0 0 0 8px rgba(231,211,164,.14);\n }\n\n .mm-title{\n margin:0 0 16px;\n font-size:clamp(2.3rem, 5vw, 4.4rem);\n line-height:.98;\n letter-spacing:-.03em;\n max-width:10ch;\n color:#ffffff;\n text-shadow:0 4px 14px rgba(0,0,0,0.35);\n }\n\n .mm-intro{\n margin:0;\n max-width:62ch;\n font-size:1.05rem;\n line-height:1.8;\n color:rgba(255,255,255,.90);\n }\n\n .mm-hero__meta{\n display:flex;\n flex-wrap:wrap;\n gap:12px;\n margin-top:26px;\n }\n\n .mm-chip{\n padding:12px 16px;\n border-radius:999px;\n background:rgba(255,255,255,.14);\n border:1px solid rgba(255,255,255,.16);\n font-size:.95rem;\n font-weight:600;\n color:#fff;\n }\n\n .mm-hero__side{\n padding:22px;\n display:grid;\n gap:16px;\n background:\n linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.84));\n }\n\n .mm-side-card{\n position:relative;\n overflow:hidden;\n border-radius:22px;\n border:1px solid rgba(164,122,34,.10);\n background:\n linear-gradient(180deg, rgba(255,255,255,.9), rgba(247,242,233,.85));\n padding:22px 20px;\n min-height:120px;\n }\n\n .mm-side-card::after{\n content:\"\";\n position:absolute;\n inset:auto -20px -20px auto;\n width:90px;height:90px;border-radius:999px;\n background:radial-gradient(circle, rgba(196,154,60,.18), transparent 70%);\n }\n\n .mm-side-card__label{\n margin:0 0 8px;\n color:var(--gold);\n text-transform:uppercase;\n letter-spacing:.08em;\n font-size:.78rem;\n font-weight:800;\n }\n\n .mm-side-card__title{\n margin:0 0 8px;\n font-size:1.22rem;\n line-height:1.25;\n }\n\n .mm-side-card__text{\n margin:0;\n color:var(--text-soft);\n line-height:1.65;\n font-size:.95rem;\n }\n\n .mm-panel{\n position:relative;\n z-index:1;\n border:1px solid var(--border);\n border-radius:30px;\n background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.68));\n backdrop-filter:var(--blur);\n -webkit-backdrop-filter:var(--blur);\n box-shadow:var(--shadow);\n padding:26px;\n }\n\n .mm-panel__top{\n display:flex;\n align-items:end;\n justify-content:space-between;\n gap:16px;\n flex-wrap:wrap;\n margin-bottom:18px;\n }\n\n .mm-panel__title-wrap h2{\n margin:0 0 8px;\n font-size:clamp(1.55rem, 2.5vw, 2.2rem);\n line-height:1.1;\n }\n\n .mm-panel__title-wrap p{\n margin:0;\n color:var(--text-soft);\n line-height:1.7;\n }\n\n .mm-count{\n display:inline-flex;\n align-items:center;\n gap:10px;\n padding:12px 16px;\n border-radius:999px;\n background:rgba(164,122,34,.08);\n border:1px solid rgba(164,122,34,.12);\n color:var(--accent);\n font-weight:700;\n white-space:nowrap;\n }\n\n .mm-count .dot{\n width:8px;height:8px;border-radius:999px;\n background:var(--gold);\n box-shadow:0 0 0 8px rgba(164,122,34,.10);\n }\n\n .mm-cats{\n display:flex;\n flex-wrap:wrap;\n gap:12px;\n margin-bottom:26px;\n }\n\n .mm-cat{\n position:relative;\n border:none;\n cursor:pointer;\n border-radius:999px;\n padding:14px 18px;\n font-size:.97rem;\n font-weight:700;\n color:var(--text);\n background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,242,233,.85));\n border:1px solid rgba(125, 94, 35, .10);\n transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);\n box-shadow:0 10px 20px rgba(46, 34, 12, .04);\n }\n\n .mm-cat:hover,\n .mm-cat:focus-visible{\n transform:translateY(-2px);\n box-shadow:0 14px 26px rgba(46, 34, 12, .08);\n outline:none;\n }\n\n .mm-cat.is-active{\n color:#fff;\n background:linear-gradient(135deg, var(--gold-2), var(--gold));\n box-shadow:0 18px 30px rgba(164,122,34,.20);\n }\n\n .mm-toolbar{\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:16px;\n flex-wrap:wrap;\n margin-bottom:16px;\n }\n\n .mm-current{\n display:flex;\n align-items:center;\n gap:12px;\n min-width:0;\n }\n\n .mm-current__badge{\n width:42px;height:42px;border-radius:14px;\n display:grid;place-items:center;\n background:linear-gradient(135deg, rgba(196,154,60,.18), rgba(164,122,34,.10));\n color:var(--gold);\n font-weight:800;\n font-size:1rem;\n flex-shrink:0;\n }\n\n .mm-current__text h3{\n margin:0 0 4px;\n font-size:1.18rem;\n line-height:1.2;\n }\n\n .mm-current__text p{\n margin:0;\n color:var(--text-soft);\n font-size:.96rem;\n line-height:1.6;\n }\n\n .mm-status{\n min-height:28px;\n margin-bottom:18px;\n color:var(--text-soft);\n font-size:.96rem;\n line-height:1.5;\n }\n\n .mm-grid{\n display:grid;\n grid-template-columns:repeat(3, minmax(0, 1fr));\n gap:22px;\n }\n\n .mm-card{\n position:relative;\n overflow:hidden;\n display:flex;\n flex-direction:column;\n min-height:100%;\n border-radius:24px;\n border:1px solid rgba(125, 94, 35, .10);\n background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84));\n box-shadow:0 14px 30px rgba(46, 34, 12, .07);\n transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);\n isolation:isolate;\n }\n\n .mm-card:hover,\n .mm-card:focus-visible{\n transform:translateY(-8px);\n box-shadow:var(--shadow-hover);\n border-color:rgba(164,122,34,.24);\n outline:none;\n }\n\n .mm-card__media{\n position:relative;\n aspect-ratio: 16 \/ 10;\n overflow:hidden;\n background:\n linear-gradient(135deg, #d8c29b 0%, #bc954b 48%, #8e6a2a 100%);\n }\n\n .mm-card__media::after{\n content:\"\";\n position:absolute;\n inset:0;\n background:linear-gradient(180deg, rgba(31,24,16,.02), rgba(31,24,16,.18));\n }\n\n .mm-card__media img{\n width:100%;\n height:100%;\n object-fit:cover;\n transition:transform .7s ease;\n }\n\n .mm-card:hover .mm-card__media img{\n transform:scale(1.06);\n }\n\n .mm-card__tag{\n position:absolute;\n top:14px;\n left:14px;\n z-index:2;\n padding:8px 12px;\n border-radius:999px;\n background:rgba(255,255,255,.84);\n backdrop-filter:blur(10px);\n border:1px solid rgba(255,255,255,.35);\n color:var(--accent);\n font-size:.76rem;\n font-weight:800;\n text-transform:uppercase;\n letter-spacing:.08em;\n }\n\n .mm-card__body{\n display:flex;\n flex-direction:column;\n flex:1;\n padding:20px 20px 22px;\n }\n\n .mm-card__title{\n margin:0 0 12px;\n font-size:1.24rem;\n line-height:1.25;\n letter-spacing:-.01em;\n }\n\n .mm-card__excerpt{\n margin:0 0 18px;\n color:var(--text-soft);\n font-size:.97rem;\n line-height:1.72;\n flex:1;\n }\n\n .mm-card__footer{\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:12px;\n margin-top:auto;\n }\n\n .mm-card__cta{\n display:inline-flex;\n align-items:center;\n gap:10px;\n color:var(--gold);\n font-weight:800;\n letter-spacing:-.01em;\n }\n\n .mm-card__cta::after{\n content:\"\u2192\";\n transition:transform .25s ease;\n }\n\n .mm-card:hover .mm-card__cta::after{\n transform:translateX(4px);\n }\n\n .mm-card__pulse{\n width:12px;height:12px;border-radius:999px;\n background:var(--gold-2);\n box-shadow:0 0 0 10px rgba(196,154,60,.12);\n flex-shrink:0;\n }\n\n .mm-empty{\n grid-column:1 \/ -1;\n border-radius:24px;\n padding:30px 24px;\n background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,242,233,.86));\n border:1px solid rgba(125, 94, 35, .10);\n text-align:center;\n color:var(--text-soft);\n box-shadow:0 10px 26px rgba(46, 34, 12, .05);\n }\n\n .mm-empty strong{\n display:block;\n color:var(--text);\n font-size:1.08rem;\n margin-bottom:8px;\n }\n\n .mm-skeleton{\n overflow:hidden;\n position:relative;\n min-height:360px;\n border-radius:24px;\n background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(247,242,233,.78));\n border:1px solid rgba(125, 94, 35, .08);\n }\n\n .mm-skeleton::before{\n content:\"\";\n position:absolute;\n inset:0;\n transform:translateX(-100%);\n background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);\n animation:mmShimmer 1.4s infinite;\n }\n\n @keyframes mmShimmer{\n 100%{transform:translateX(100%)}\n }\n\n .mm-fade-up{\n animation:mmFadeUp .45s ease both;\n }\n\n @keyframes mmFadeUp{\n from{opacity:0;transform:translateY(12px)}\n to{opacity:1;transform:translateY(0)}\n }\n\n @media (max-width: 1120px){\n .mm-hero{\n grid-template-columns:1fr;\n }\n\n .mm-grid{\n grid-template-columns:repeat(2, minmax(0, 1fr));\n }\n }\n\n @media (max-width: 720px){\n .mm-page{\n padding:18px 0 54px;\n }\n\n .mm-shell{\n width:min(100% - 20px, var(--max));\n }\n\n .mm-hero__main{\n min-height:360px;\n padding:26px 22px;\n }\n\n .mm-title{\n max-width:unset;\n }\n\n .mm-panel{\n padding:18px;\n border-radius:24px;\n }\n\n .mm-cats{\n gap:10px;\n }\n\n .mm-cat{\n width:100%;\n text-align:center;\n }\n\n .mm-grid{\n grid-template-columns:1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <main class=\"mm-page\">\n <div class=\"mm-orb mm-orb--1\"><\/div>\n <div class=\"mm-orb mm-orb--2\"><\/div>\n\n <div class=\"mm-shell\">\n <section class=\"mm-hero\" aria-label=\"Cabecera de la p\u00e1gina Patrimonio\">\n <div class=\"mm-hero__main\">\n <p class=\"mm-kicker\">Patrimonio cultural de Melilla<\/p>\n <h1 class=\"mm-title\">Descubre el patrimonio de la ciudad<\/h1>\n <p class=\"mm-intro\">\n Recorre edificios, monumentos, espacios religiosos, personajes y contenidos hist\u00f3ricos relevantes de Melilla a trav\u00e9s de una navegaci\u00f3n visual, clara y din\u00e1mica.\n <\/p>\n\n <div class=\"mm-hero__meta\">\n <span class=\"mm-chip\">Consulta por categor\u00edas<\/span>\n <span class=\"mm-chip\">Acceso a entradas individuales<\/span>\n <span class=\"mm-chip\">Dise\u00f1o visual e institucional<\/span>\n <\/div>\n <\/div>\n\n <aside class=\"mm-hero__side\" aria-label=\"\u00c1mbitos del patrimonio de Melilla\">\n <article class=\"mm-side-card\">\n <p class=\"mm-side-card__label\">Arquitectura y ciudad<\/p>\n <h2 class=\"mm-side-card__title\">Edificaciones y patrimonio construido<\/h2>\n <p class=\"mm-side-card__text\">\n Recorre inmuebles, espacios emblem\u00e1ticos y elementos arquitect\u00f3nicos que forman parte de la identidad hist\u00f3rica y urbana de Melilla.\n <\/p>\n <\/article>\n\n <article class=\"mm-side-card\">\n <p class=\"mm-side-card__label\">Memoria monumental<\/p>\n <h2 class=\"mm-side-card__title\">Monumentos, patrimonio religioso y legado simb\u00f3lico<\/h2>\n <p class=\"mm-side-card__text\">\n Consulta contenidos dedicados a monumentos, esculturas, espacios religiosos y otros bienes de especial valor hist\u00f3rico, art\u00edstico y cultural.\n <\/p>\n <\/article>\n\n <article class=\"mm-side-card\">\n <p class=\"mm-side-card__label\">Historia y protagonistas<\/p>\n <h2 class=\"mm-side-card__title\">Historia general, personajes y actividades<\/h2>\n <p class=\"mm-side-card__text\">\n Accede a entradas relacionadas con la historia de la ciudad, sus protagonistas, noticias y actividades vinculadas a la difusi\u00f3n del patrimonio.\n <\/p>\n <\/article>\n <\/aside>\n <\/section>\n\n <section class=\"mm-panel\" aria-labelledby=\"mm-panel-title\">\n <div class=\"mm-panel__top\">\n <div class=\"mm-panel__title-wrap\">\n <h2 id=\"mm-panel-title\">Explorar por categor\u00edas<\/h2>\n <p>\n Pulsa sobre una categor\u00eda para visualizar las entradas asociadas y acceder a cada contenido desde su tarjeta.\n <\/p>\n <\/div>\n\n <div class=\"mm-count\" id=\"mm-count-pill\">\n <span class=\"dot\"><\/span>\n <span id=\"mm-count-text\">Preparando contenido\u2026<\/span>\n <\/div>\n <\/div>\n\n <nav class=\"mm-cats\" aria-label=\"Men\u00fa de categor\u00edas de patrimonio\">\n <button class=\"mm-cat is-active\" data-category=\"historia\">Descubre nuestra historia<\/button>\n <button class=\"mm-cat\" data-category=\"edificaciones\">Edificaciones<\/button>\n <button class=\"mm-cat\" data-category=\"noticias\">Noticias<\/button>\n <button class=\"mm-cat\" data-category=\"religioso\">Religioso<\/button>\n <button class=\"mm-cat\" data-category=\"personajes_historicos\">Personajes hist\u00f3ricos<\/button>\n <button class=\"mm-cat\" data-category=\"historia_general\">Historia general<\/button>\n <button class=\"mm-cat\" data-category=\"actividades\">Actividades<\/button>\n <button class=\"mm-cat\" data-category=\"monumentos\">Monumentos<\/button>\n <\/nav>\n\n <div class=\"mm-toolbar\">\n <div class=\"mm-current\">\n <div class=\"mm-current__badge\" id=\"mm-current-badge\" aria-hidden=\"true\">D<\/div>\n <div class=\"mm-current__text\">\n <h3 id=\"mm-current-category\">Descubre nuestra historia<\/h3>\n <p>Visualiza las entradas publicadas dentro de esta categor\u00eda.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mm-status\" id=\"mm-status\" aria-live=\"polite\">Cargando contenidos\u2026<\/div>\n\n <div class=\"mm-grid\" id=\"mm-grid\" role=\"list\"><\/div>\n <\/section>\n <\/div>\n <\/main>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", () => {\n const buttons = document.querySelectorAll(\".mm-cat\");\n const grid = document.getElementById(\"mm-grid\");\n const status = document.getElementById(\"mm-status\");\n const currentCategory = document.getElementById(\"mm-current-category\");\n const currentBadge = document.getElementById(\"mm-current-badge\");\n const countText = document.getElementById(\"mm-count-text\");\n\n const WP_API_BASE = `${window.location.origin}\/wp-json\/wp\/v2`;\n\n const categoryLabels = {\n \"historia\": \"Descubre nuestra historia\",\n \"edificaciones\": \"Edificaciones\",\n \"noticias\": \"Noticias\",\n \"religioso\": \"Religioso\",\n \"personajes_historicos\": \"Personajes hist\u00f3ricos\",\n \"historia_general\": \"Historia general\",\n \"actividades\": \"Actividades\",\n \"monumentos\": \"Monumentos\"\n };\n\n function stripHTML(html) {\n const temp = document.createElement(\"div\");\n temp.innerHTML = html || \"\";\n return temp.textContent || temp.innerText || \"\";\n }\n\n function truncateText(text, maxLength = 165) {\n const clean = (text || \"\").trim();\n if (clean.length <= maxLength) return clean;\n return clean.slice(0, maxLength).trim() + \"\u2026\";\n }\n\n function renderSkeletons(count = 6) {\n grid.innerHTML = \"\";\n for (let i = 0; i < count; i++) {\n const sk = document.createElement(\"div\");\n sk.className = \"mm-skeleton\";\n grid.appendChild(sk);\n }\n }\n\n async function getCategoryIdBySlug(slug) {\n const res = await fetch(`${WP_API_BASE}\/categories?slug=${encodeURIComponent(slug)}`);\n if (!res.ok) throw new Error(\"No se ha podido consultar la categor\u00eda.\");\n const data = await res.json();\n if (!Array.isArray(data) || !data.length) {\n throw new Error(`No existe ninguna categor\u00eda con el slug \"${slug}\".`);\n }\n return data[0].id;\n }\n\n function fallbackInitial(text) {\n return (text || \"P\").charAt(0).toUpperCase();\n }\n\n function buildCard(post, categoryName) {\n const title = stripHTML(post?.title?.rendered || \"Sin t\u00edtulo\");\n const excerptRaw = stripHTML(post?.excerpt?.rendered || \"\");\n const excerpt = truncateText(excerptRaw || \"Accede a esta entrada para consultar toda la informaci\u00f3n disponible.\");\n const link = post?.link || \"#\";\n\n let mediaHTML = `\n <div class=\"mm-card__media\">\n <span class=\"mm-card__tag\">${categoryName}<\/span>\n <\/div>\n `;\n\n if (post._embedded && post._embedded[\"wp:featuredmedia\"] && post._embedded[\"wp:featuredmedia\"][0]) {\n const media = post._embedded[\"wp:featuredmedia\"][0];\n const imageUrl = media?.source_url || \"\";\n const altText = media?.alt_text ? stripHTML(media.alt_text) : title;\n\n if (imageUrl) {\n mediaHTML = `\n <div class=\"mm-card__media\">\n <span class=\"mm-card__tag\">${categoryName}<\/span>\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${altText}\">\n <\/div>\n `;\n }\n }\n\n const article = document.createElement(\"a\");\n article.className = \"mm-card mm-fade-up\";\n article.href = link;\n article.setAttribute(\"role\", \"listitem\");\n article.innerHTML = `\n ${mediaHTML}\n <div class=\"mm-card__body\">\n <h3 class=\"mm-card__title\">${title}<\/h3>\n <p class=\"mm-card__excerpt\">${excerpt}<\/p>\n <div class=\"mm-card__footer\">\n <span class=\"mm-card__cta\">Ver contenido<\/span>\n <span class=\"mm-card__pulse\" aria-hidden=\"true\"><\/span>\n <\/div>\n <\/div>\n `;\n return article;\n }\n\n function renderPosts(posts, categorySlug) {\n const categoryName = categoryLabels[categorySlug] || \"Patrimonio\";\n grid.innerHTML = \"\";\n\n if (!posts.length) {\n grid.innerHTML = `\n <div class=\"mm-empty mm-fade-up\">\n <strong>No hay entradas publicadas en esta categor\u00eda<\/strong>\n Todav\u00eda no existen contenidos visibles dentro de <em>${categoryName}<\/em>.\n <\/div>\n `;\n return;\n }\n\n posts.forEach(post => {\n grid.appendChild(buildCard(post, categoryName));\n });\n }\n\n async function loadPostsByCategory(slug) {\n const categoryName = categoryLabels[slug] || \"Categor\u00eda\";\n\n currentCategory.textContent = categoryName;\n currentBadge.textContent = fallbackInitial(categoryName);\n countText.textContent = \"Cargando\u2026\";\n status.textContent = `Consultando contenidos de ${categoryName}\u2026`;\n\n renderSkeletons();\n\n try {\n const categoryId = await getCategoryIdBySlug(slug);\n\n const res = await fetch(\n `${WP_API_BASE}\/posts?categories=${categoryId}&per_page=100&_embed&orderby=date&order=desc`\n );\n\n if (!res.ok) {\n throw new Error(\"No se han podido cargar las entradas.\");\n }\n\n const posts = await res.json();\n renderPosts(posts, slug);\n\n const total = posts.length;\n status.textContent = total === 1\n ? `Se ha encontrado 1 entrada en ${categoryName}.`\n : `Se han encontrado ${total} entradas en ${categoryName}.`;\n\n countText.textContent = total === 1 ? \"1 entrada\" : `${total} entradas`;\n } catch (error) {\n console.error(error);\n grid.innerHTML = `\n <div class=\"mm-empty mm-fade-up\">\n <strong>Error al cargar los contenidos<\/strong>\n Revisa que las categor\u00edas existan en WordPress y que sus slugs coincidan exactamente con los usados en esta p\u00e1gina.\n <\/div>\n `;\n status.textContent = \"No ha sido posible cargar las entradas de esta categor\u00eda.\";\n countText.textContent = \"Sin datos\";\n }\n }\n\n buttons.forEach(button => {\n button.addEventListener(\"click\", () => {\n buttons.forEach(btn => btn.classList.remove(\"is-active\"));\n button.classList.add(\"is-active\");\n loadPostsByCategory(button.dataset.category);\n });\n });\n\n loadPostsByCategory(\"historia\");\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Patrimonio | Melilla Monumental Patrimonio cultural de Melilla Descubre el patrimonio de la ciudad Recorre edificios, monumentos, espacios religiosos, personajes […]<\/p>\n","protected":false},"author":161,"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-9993","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":"Ricardo Romero","author_link":"https:\/\/melillamonumental.es\/ja\/author\/rrvadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"Patrimonio | Melilla Monumental Patrimonio cultural de Melilla Descubre el patrimonio de la ciudad Recorre edificios, monumentos, espacios religiosos, personajes […]","_links":{"self":[{"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/pages\/9993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/users\/161"}],"replies":[{"embeddable":true,"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/comments?post=9993"}],"version-history":[{"count":5,"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/pages\/9993\/revisions"}],"predecessor-version":[{"id":10030,"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/pages\/9993\/revisions\/10030"}],"wp:attachment":[{"href":"https:\/\/melillamonumental.es\/ja\/wp-json\/wp\/v2\/media?parent=9993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}