{"id":106,"date":"2025-07-03T13:58:42","date_gmt":"2025-07-03T13:58:42","guid":{"rendered":"https:\/\/dipgis.umsa.bo\/interaccion_social\/?page_id=106"},"modified":"2026-06-12T17:34:11","modified_gmt":"2026-06-12T17:34:11","slug":"programa-suyana","status":"publish","type":"page","link":"https:\/\/dipgis.umsa.bo\/interaccion_social\/programa-suyana\/","title":{"rendered":"SUYANA"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* ===================================================== *\/\n\/* ESTILOS PROGRAMA SUYANA UMSA (Optimizado para M\u00f3viles)*\/\n\/* ===================================================== *\/\n\n\/* ---------- 1 \u00b7 Variables y paleta (VERDE SUYANA) ---- *\/\n#interaction-social,\n#slim-appbar {\n    \/* Tonos Verde Suyana (Extra\u00eddos del logo oficial) *\/\n    --color-primary: #00422c;\n    \/* Verde oscuro principal *\/\n    --color-primary-light: #007a5e;\n    \/* Verde medio brillante *\/\n    --color-text: #242424;\n    --color-muted: #6a6a6a;\n    --color-bg-section: #f2fcf7;\n    \/* Fondo muy claro verdoso *\/\n    --color-accent: #eab308;\n    \/* Amarillo\/\u00c1mbar para contrastar los checks *\/\n\n    --shadow-sm: 0 4px 12px rgba(0, 0, 0, .08);\n    --shadow-lg: 0 12px 28px rgba(0, 0, 0, .14);\n}\n\n\/* ---------- 2 \u00b7 Barra superior propia ---------------- *\/\n#slim-appbar {\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: 1000;\n    width: 100%;\n    margin: 0;\n    border-radius: 0;\n    background: #fff;\n    box-shadow: var(--shadow-sm);\n    transition: background .3s;\n}\n\n#slim-appbar.scrolled {\n    background: rgba(255, 255, 255, .92);\n    backdrop-filter: blur(6px);\n}\n\n#slim-appbar .container {\n    width: 100%;\n    max-width: none;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 1rem clamp(1rem, 4vw, 2.5rem);\n}\n\n#slim-appbar .nav {\n    display: flex;\n    gap: 1rem;\n    font-weight: 600;\n}\n\n#slim-appbar .nav a {\n    display: flex;\n    align-items: center;\n    gap: .4rem;\n    padding: .45rem .9rem;\n    border-radius: .55rem;\n    transition: background .3s, transform .3s;\n}\n\n#slim-appbar .nav a:hover {\n    background: var(--color-bg-section);\n    transform: translateY(-2px);\n}\n\n\/* ---------- 3 \u00b7 Contenedor principal ----------------- *\/\n#interaction-social {\n    max-width: 1240px;\n    margin: 4rem auto;\n    padding: 0.5rem clamp(1rem, 4vw, 2.5rem);\n    background: #fff;\n    border-radius: 1.25rem;\n    box-shadow: var(--shadow-lg);\n    font-family: \"Inter\", Arial, sans-serif;\n    color: var(--color-text);\n    line-height: 1.7;\n    \/* Prevenci\u00f3n contra desbordes por palabras muy largas *\/\n    overflow-wrap: break-word; \n}\n\n#interaction-social * {\n    box-sizing: border-box;\n}\n\n#interaction-social p {\n    margin-bottom: 1.4rem;\n    font-size: 1.06rem;\n    text-align: justify;\n}\n\n#interaction-social p.lead {\n    font-style: italic;\n    color: var(--color-muted);\n    text-align: center;\n    font-size: 1.2rem;\n    margin-bottom: 2rem;\n}\n\n#interaction-social p.download-info {\n    text-align: center;\n    margin-bottom: 2rem;\n}\n\n#interaction-social ul {\n    list-style: none;\n    margin: 0 0 2rem;\n    padding: 0;\n}\n\n#interaction-social ul li {\n    position: relative;\n    padding-left: 1.4rem;\n    text-align: justify;\n    margin-bottom: 0.5rem;\n}\n\n#interaction-social ul li::before {\n    content: \"\u2022\";\n    position: absolute;\n    left: 0;\n    top: .2rem;\n    color: var(--color-primary);\n    font-weight: 700;\n    font-size: 1.1rem;\n}\n\n\/* ---------- 4 \u00b7 H\u00e9roe con banner de fondo (Efecto Bokeh) ------------ *\/\n.hero-banner {\n    color: #fff;\n    text-align: center;\n    padding: 6.5rem 0 5.5rem;\n    position: relative;\n    overflow: hidden;\n}\n\n\/* Capa 1: La imagen con el efecto Bokeh (desenfoque) *\/\n.hero-banner::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: var(--hero-img) center\/cover no-repeat;\n    filter: blur(6px);\n    transform: scale(1.1);\n    z-index: 1;\n}\n\n\/* Capa 2: El filtro verde oscuro por encima de la imagen desenfocada *\/\n.hero-banner__overlay {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: rgba(0, 66, 44, 0.65);\n    mix-blend-mode: multiply;\n    z-index: 2;\n}\n\n\/* Capa 3: El contenedor del texto (para que quede arriba de todo) *\/\n.hero-banner .container {\n    position: relative;\n    z-index: 3;\n    padding: 0 1rem;\n}\n\n.hero-banner .section-title {\n    position: relative;\n    font-family: \"Merriweather\", serif;\n    \/* Ajustado para no desbordar en m\u00f3viles *\/\n    font-size: clamp(1.8rem, 5vw, 3rem);\n    font-weight: 700;\n    letter-spacing: -.6px;\n    line-height: 1.25;\n    margin: 0;\n    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n}\n\n\/* ---------- 5 \u00b7 Banner-grid (botones) ---------------- *\/\n#interaction-social .banner-grid {\n    display: grid;\n    gap: 1.8rem;\n    margin: 0.5rem 0 3rem;\n    \/* Correcci\u00f3n: min(100%, 280px) *\/\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));\n}\n\n#interaction-social .banner-btn {\n    position: relative;\n    overflow: hidden;\n    border-radius: 1.25rem;\n    box-shadow: var(--shadow-sm);\n    display: block;\n    transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s;\n    aspect-ratio: 4\/3;\n}\n\n#interaction-social .banner-btn:hover {\n    transform: translateY(-8px);\n    box-shadow: var(--shadow-lg);\n}\n\n#interaction-social .banner-btn img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    transition: transform 0.5s ease;\n}\n\n#interaction-social .banner-btn::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    padding: 2px;\n    background: var(--color-primary-light);\n    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: xor;\n    mask-composite: exclude;\n    pointer-events: none;\n    opacity: .6;\n    transition: opacity .35s;\n}\n\n#interaction-social .banner-btn:hover::before {\n    opacity: 1;\n}\n\n#interaction-social .banner-btn:hover img {\n    transform: scale(1.05);\n}\n\n\/* ---------- 6 \u00b7 Acordeones (card) -------------------- *\/\n#interaction-social details.card {\n    background: var(--color-bg-section);\n    border-radius: 1.25rem;\n    \/* Uso de clamp para un margen interno inteligente *\/\n    padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 4vw, 2.2rem);\n    margin: 3rem 0;\n    box-shadow: var(--shadow-sm);\n    transition: box-shadow .35s, transform .35s;\n    overflow: hidden;\n}\n\n#interaction-social details.card:hover {\n    transform: translateY(-6px);\n    box-shadow: var(--shadow-lg);\n}\n\n#interaction-social details.card[open] {\n    border: 1px solid var(--color-primary);\n}\n\n#interaction-social details.card summary {\n    cursor: pointer;\n    list-style: none;\n    position: relative;\n    padding-right: 2rem;\n    user-select: none;\n}\n\n#interaction-social details.card summary::-webkit-details-marker {\n    display: none;\n}\n\n#interaction-social details.card summary::after {\n    content: \"\u25b8\";\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%) rotate(0deg);\n    transition: transform .35s cubic-bezier(.4, 0, .2, 1);\n    font-size: 1.5rem;\n    color: var(--color-primary-light);\n}\n\n#interaction-social details.card[open] summary::after {\n    transform: translateY(-50%) rotate(90deg);\n}\n\n\/* Cuerpo del acorde\u00f3n animado *\/\n@keyframes fadeSlide {\n    from {\n        opacity: 0;\n        transform: translateY(-6px);\n    }\n    to {\n        opacity: 1;\n        transform: none;\n    }\n}\n\n#interaction-social details.card[open] summary~* {\n    animation: fadeSlide .35s ease .02s both;\n}\n\n\/* ---------- 7 \u00b7 Decoraci\u00f3n interior ------------------ *\/\n#interaction-social details.card h2 {\n    font-family: \"Merriweather\", serif;\n    \/* Ajustado para m\u00f3viles *\/\n    font-size: clamp(1.4rem, 4vw, 1.6rem);\n    color: var(--color-primary);\n    margin: 0;\n}\n\n#interaction-social details.card h3 {\n    position: relative;\n    font-family: \"Merriweather\", serif;\n    font-weight: 700;\n    font-size: 1.3rem;\n    margin: 2rem 0 1rem;\n    padding-left: 1rem;\n    color: var(--color-text);\n}\n\n#interaction-social details.card h3::before {\n    content: \"\";\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 4px;\n    height: 100%;\n    background: linear-gradient(var(--color-primary), var(--color-primary-light));\n    border-radius: 2px;\n}\n\n#interaction-social details.card .callout {\n    background: #fff;\n    border: 1px solid rgba(0, 0, 0, .05);\n    border-left: 4px solid var(--color-primary-light);\n    \/* Margen interno flexible *\/\n    padding: clamp(1rem, 3vw, 1.2rem) clamp(1rem, 3vw, 1.5rem);\n    border-radius: .65rem;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, .04);\n    margin: 1.8rem 0;\n}\n\n#interaction-social details.card .callout a {\n    color: var(--color-primary);\n    font-weight: 600;\n    text-decoration: none;\n}\n\n#interaction-social details.card .callout a:hover {\n    text-decoration: underline;\n}\n\n\/* ---------- 8 \u00b7 Grillas reutilizables (M\u00f3viles Fix) -- *\/\n.grid-cards {\n    display: grid;\n    \/* Correcci\u00f3n: min(100%, 200px) *\/\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));\n    gap: 1.5rem;\n    margin-top: 1.5rem;\n}\n\n.pillars-grid {\n    display: grid;\n    \/* Correcci\u00f3n: min(100%, 200px) *\/\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));\n    gap: 1.5rem;\n    background: #f8fafc;\n    padding: clamp(1rem, 4vw, 2rem);\n    border-radius: 12px;\n    margin-top: 1.5rem;\n}\n\n\/* ---------- 9 \u00b7 Tarjetas de objetivos y pilares --- *\/\n.obj-card,\n.pilar-card {\n    text-align: center;\n    padding: 1.5rem;\n    background: #fff;\n    border-radius: 8px;\n    box-shadow: var(--shadow-sm);\n    transition: all .3s ease;\n}\n\n.obj-card {\n    border-left: 4px solid var(--color-primary);\n}\n\n.pilar-card {\n    border-top: 4px solid var(--color-primary);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n}\n\n.obj-card:hover,\n.pilar-card:hover {\n    transform: translateY(-4px);\n    box-shadow: var(--shadow-lg);\n}\n\n.obj-icon,\n.pilar-icon {\n    font-size: 2rem;\n    margin-bottom: 0.5rem;\n    display: block;\n}\n\n.obj-card strong,\n.pilar-card strong {\n    display: block;\n    color: var(--color-primary);\n    font-size: 0.95rem;\n    margin-top: 0.5rem;\n}\n\n\/* ---------- 10 \u00b7 Contenedor de esquema -------- *\/\n.schema-container {\n    text-align: center;\n    margin-top: 3rem;\n    padding-top: 2rem;\n    border-top: 1px solid #e2e8f0;\n}\n\n.schema-container h3 {\n    color: var(--color-primary-light);\n    margin-bottom: 1.5rem;\n    font-size: 1.3rem;\n}\n\n.schema-container img {\n    max-width: 100%;\n    height: auto;\n    border-radius: 8px;\n    border: 1px solid #ccc;\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);\n    display: block;\n    margin: 0 auto;\n}\n\n\/* ---------- 11 \u00b7 Contenedor de descarga ------- *\/\n.download-btn-container {\n    text-align: center;\n    padding: 1.5rem 0;\n}\n\n.download-btn {\n    background-color: var(--color-primary-light);\n    color: #fff;\n    padding: 14px 28px;\n    text-decoration: none;\n    border-radius: 8px;\n    font-weight: bold;\n    display: inline-block;\n    box-shadow: 0 4px 10px rgba(0, 107, 84, 0.3);\n    transition: transform .3s ease, box-shadow .3s ease;\n}\n\n.download-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 6px 14px rgba(0, 107, 84, 0.4);\n}\n\n\/* ---------- 12 \u00b7 Heading secundario -------- *\/\n.section-subheading {\n    text-align: center;\n    margin: 2.5rem 0 1.5rem;\n    color: var(--color-primary);\n    font-size: 1.3rem;\n}\n\n\/* ---------- 13 \u00b7 Animaciones y Extras ----------- *\/\n@keyframes fadeUp {\n    from {\n        opacity: 0;\n        transform: translateY(20px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.fade-up {\n    animation: fadeUp 0.6s ease-out;\n}\n\n.accordion-body {\n    overflow: hidden;\n    transition: height .35s cubic-bezier(.4, 0, .2, 1);\n}\n\n@keyframes fadeWord {\n    from {\n        opacity: 0;\n        filter: blur(4px);\n    }\n    to {\n        opacity: 1;\n        filter: none;\n    }\n}\n\n#interaction-social details.card[open] p,\n#interaction-social details.card[open] ul,\n#interaction-social details.card[open] .callout,\n#interaction-social details.card[open] .obj-card,\n#interaction-social details.card[open] .pilar-card {\n    animation: fadeWord .65s ease both;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    \n    \/* ---------- 1. BARRA SUPERIOR TRANSPARENTE A S\u00d3LIDA ---------- *\/\n    const appbar = document.querySelector('#slim-appbar');\n    if (appbar) {\n        window.addEventListener('scroll', () => {\n            if (window.scrollY > 10) {\n                appbar.classList.add('scrolled');\n            } else {\n                appbar.classList.remove('scrolled');\n            }\n        });\n    }\n\n    \/* ---------- 2. ANIMACI\u00d3N FADE-UP AL HACER SCROLL ---------- *\/\n    \/\/ Observador para detectar cu\u00e1ndo los elementos entran en pantalla\n    const observerOptions = { root: null, rootMargin: '0px', threshold: 0.15 };\n    const io = new IntersectionObserver((entries, observer) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                \/\/ A\u00f1adimos una clase activa para detonar la animaci\u00f3n CSS\n                entry.target.classList.add('fade-in-active');\n                entry.target.style.animationPlayState = 'running';\n                \n                \/\/ Dejamos de observar el elemento una vez que ya se anim\u00f3\n                observer.unobserve(entry.target);\n            }\n        });\n    }, observerOptions);\n\n    \/\/ Seleccionamos todos los elementos que queremos animar\n    const elementsToAnimate = document.querySelectorAll('.card, .hero-banner, .banner-grid, .fade-up');\n    elementsToAnimate.forEach(el => io.observe(el));\n\n    \/* ---------- 3. ACORDEONES CON SLIDE-DOWN SUAVE ---------- *\/\n    const detailCards = document.querySelectorAll('#interaction-social details.card');\n    \n    detailCards.forEach(det => {\n        const summary = det.querySelector('summary');\n        if (!summary) return;\n\n        \/\/ Crear un contenedor envolvente para poder medir y animar la altura\n        const wrapper = document.createElement('div');\n        wrapper.className = 'accordion-body';\n        wrapper.style.overflow = 'hidden';\n        wrapper.style.transition = 'height 0.35s cubic-bezier(0.4, 0, 0.2, 1)';\n        \n        \/\/ Mover todo el contenido (excepto el summary) dentro del nuevo wrapper\n        while (summary.nextSibling) {\n            wrapper.appendChild(summary.nextSibling);\n        }\n        det.appendChild(wrapper);\n\n        \/\/ Establecer el estado inicial correcto\n        wrapper.style.height = det.hasAttribute('open') ? 'auto' : '0px';\n\n        \/\/ Interceptar el clic manual\n        summary.addEventListener('click', e => {\n            e.preventDefault(); \/\/ Evitamos el comportamiento brusco por defecto\n\n            if (det.hasAttribute('open')) {\n                \/\/ L\u00d3GICA PARA CERRAR\n                \/\/ 1. Fijar la altura actual exacta en p\u00edxeles\n                wrapper.style.height = wrapper.scrollHeight + 'px';\n                \/\/ 2. Forzar al navegador a recalcular (reflow)\n                wrapper.offsetHeight; \n                \/\/ 3. Reducir la altura a 0\n                wrapper.style.height = '0px';\n                \n                \/\/ 4. Quitar el atributo 'open' solo cuando termine la transici\u00f3n\n                setTimeout(() => {\n                    det.removeAttribute('open');\n                }, 350); \n            } else {\n                \/\/ L\u00d3GICA PARA ABRIR\n                \/\/ 1. A\u00f1adir el atributo 'open' primero para que el display deje de ser 'none'\n                det.setAttribute('open', '');\n                \/\/ 2. Animar hasta la altura real del contenido\n                wrapper.style.height = wrapper.scrollHeight + 'px';\n                \n                \/\/ 3. Dejar la altura en 'auto' al terminar, por si la pantalla cambia de tama\u00f1o\n                setTimeout(() => {\n                    wrapper.style.height = 'auto';\n                }, 350);\n            }\n        });\n    });\n});\n<\/script>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&amp;family=Merriweather:wght@700&amp;display=swap\" rel=\"stylesheet\">\n\n<div id=\"suyana-programa-main\">\n    <section class=\"hero hero-banner fade-up\" style=\"--hero-img:url('https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-content\/uploads\/2026\/03\/Picture3.jpg');\">\n        <span class=\"hero-banner__overlay\" aria-hidden=\"true\"><\/span>\n        <div class=\"container\">\n            <h1 class=\"section-title\">\n                Programa Municipio Saludable (PMS)<br>\n                SUYANA UMSA\n            <\/h1>\n        <\/div>\n    <\/section>\n\n    <main id=\"interaction-social\">\n\n        <div class=\"banner-grid\">\n\n            <a href=\"https:\/\/dipgis.umsa.bo\/interaccion_social\/carreras-y-o-unidades-suyana\/\" class=\"banner-btn\">\n                <img decoding=\"async\" src=\"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-content\/uploads\/2026\/06\/13-scaled.png\" alt=\"Estudiantes y carreras universitarias\">\n            <\/a>\n\n            <a href=\"https:\/\/dipgis.umsa.bo\/interaccion_social\/videos-suyana\/\" class=\"banner-btn\">\n                <img decoding=\"async\" src=\"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-content\/uploads\/2026\/06\/12-scaled.png\" alt=\"C\u00e1mara de grabaci\u00f3n de videos\">\n            <\/a>\n\n            <a href=\"https:\/\/dipgis.umsa.bo\/interaccion_social\/notas-de-prensa-suyana\/\" class=\"banner-btn\">\n                <img decoding=\"async\" src=\"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-content\/uploads\/2026\/06\/11-scaled.png\" alt=\"M\u00e1quina de escribir y prensa\">\n            <\/a>\n\n        <\/div>\n\n        <details id=\"sobre\" class=\"card\" open=\"\">\n            <summary>\n                <h2 class=\"section-subtitle\">SUYANA UMSA<\/h2>\n            <\/summary>\n\n            <p>Fundaci\u00f3n Suyana tiene como prop\u00f3sito prestar asistencia integral para el desarrollo humano y social,\n                cultural y educativo, en las comunidades rurales vulnerables.<\/p>\n\n            <p>Suyana y la UMSA dentro del Convenio se enmarca el Programa Municipio Saludable (PMS) con el apoyo de\n                diversas carreras universitarias, como Medicina, Arquitectura Odontolog\u00eda, Administraci\u00f3n de Empresas,\n                Ciencias de la Educaci\u00f3n, Comunicaci\u00f3n Social y Agronom\u00eda.<\/p>\n\n            <p>Asimismo, se beneficiaron 20 estudiantes de la UMSA con becas para culminar satisfactoriamente sus\n                estudios.<\/p>\n\n            <p>Esta fundaci\u00f3n cuenta con el financiamiento Suizo.<\/p>\n        <\/details>\n\n        <details id=\"objetivo\" class=\"card\">\n            <summary>\n                <h2 class=\"section-subtitle\">Objetivo<\/h2>\n            <\/summary>\n\n            <p class=\"lead\">\n                Empoderar a las comunidades rurales:\n            <\/p>\n\n            <div class=\"grid-cards\">\n                <div class=\"obj-card\">\n                    <div class=\"obj-icon\">\ud83d\udcc8<\/div>\n                    <strong>Aumentando los ingresos<\/strong>\n                <\/div>\n                <div class=\"obj-card\">\n                    <div class=\"obj-icon\">\u2695\ufe0f<\/div>\n                    <strong>Mejorando la atenci\u00f3n m\u00e9dica<\/strong>\n                <\/div>\n                <div class=\"obj-card\">\n                    <div class=\"obj-icon\">\ud83d\udcda<\/div>\n                    <strong>Enriqueciendo la educaci\u00f3n<\/strong>\n                <\/div>\n            <\/div>\n        <\/details>\n\n        <details id=\"programa\" class=\"card\">\n            <summary>\n                <h2 class=\"section-subtitle\">Programa Municipio Saludable<\/h2>\n            <\/summary>\n\n            <p>El Programa Municipios Saludables (PMS), es una iniciativa de dise\u00f1o e implementaci\u00f3n propia de Suyana,\n                que lleva 13 a\u00f1os transformando la vida de comunidades remotas del altiplano del Per\u00fa y Bolivia.<\/p>\n\n            <p>Con el esfuerzo de empoderar a las personas para romper el ciclo de la pobreza y crear un cambio\n                sostenible en la regi\u00f3n, el proyecto se ejecuta en ciclos de 3 a\u00f1os y evoluciona continuamente para\n                abordar las necesidades locales.<\/p>\n\n            <h3 class=\"section-subheading\">\u00c1reas de Intervenci\u00f3n<\/h3>\n\n            <div class=\"pillars-grid\">\n                <div class=\"pilar-card\">\n                    <div class=\"pilar-icon\">\ud83c\udfe5<\/div>\n                    <strong>SALUD<\/strong>\n                <\/div>\n                <div class=\"pilar-card\">\n                    <div class=\"pilar-icon\">\ud83c\udf93<\/div>\n                    <strong>EDUCACI\u00d3N<\/strong>\n                <\/div>\n                <div class=\"pilar-card\">\n                    <div class=\"pilar-icon\">\ud83e\udd1d<\/div>\n                    <strong>DESARROLLO ECON\u00d3MICO SOSTENIBLE<\/strong>\n                <\/div>\n                <div class=\"pilar-card\">\n                    <div class=\"pilar-icon\">\ud83c\udf3f<\/div>\n                    <strong>MEDIO AMBIENTE<\/strong>\n                <\/div>\n            <\/div>\n\n            <div class=\"schema-container\">\n                <h3 class=\"section-subheading\">Desarrollo Humano Sostenible<\/h3>\n                <img decoding=\"async\" src=\"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-content\/uploads\/2026\/03\/Picture2-1.png\" alt=\"Esquema del Programa Municipio Saludable\">\n            <\/div>\n        <\/details>\n\n        <details id=\"convenio\" class=\"card\">\n            <summary>\n                <h2 class=\"section-subtitle\">Documento Convenio<\/h2>\n            <\/summary>\n\n            <p class=\"download-info\">Descarga el documento oficial de nuestra alianza\n                interinstitucional para conocer a detalle los acuerdos y alcances.<\/p>\n\n            <div class=\"download-btn-container\">\n                <a href=\"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-content\/uploads\/2026\/03\/Convenio-firmado-SUYANA.pdf\" target=\"_blank\" class=\"download-btn\">\n                    \ud83d\udcc4 (DOCUMENTO CONVENIO)\n                <\/a>\n            <\/div>\n        <\/details>\n\n    <\/main>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Programa Municipio Saludable (PMS) SUYANA UMSA SUYANA UMSA Fundaci\u00f3n Suyana tiene como prop\u00f3sito prestar asistencia integral para el desarrollo humano y social, cultural y educativo, en las comunidades rurales vulnerables. Suyana y la UMSA dentro del Convenio se enmarca el Programa Municipio Saludable (PMS) con el apoyo de diversas carreras universitarias, como Medicina, Arquitectura Odontolog\u00eda, &#8230; <a title=\"SUYANA\" class=\"read-more\" href=\"https:\/\/dipgis.umsa.bo\/interaccion_social\/programa-suyana\/\" aria-label=\"Read more about SUYANA\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-106","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/pages\/106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":8,"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/pages\/106\/revisions"}],"predecessor-version":[{"id":1073,"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/pages\/106\/revisions\/1073"}],"wp:attachment":[{"href":"https:\/\/dipgis.umsa.bo\/interaccion_social\/wp-json\/wp\/v2\/media?parent=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}