{"id":82,"date":"2026-02-14T16:51:05","date_gmt":"2026-02-14T16:51:05","guid":{"rendered":"https:\/\/eduambiental.nuvoll.com\/?page_id=82"},"modified":"2026-06-14T17:29:52","modified_gmt":"2026-06-14T17:29:52","slug":"procedas","status":"publish","type":"page","link":"https:\/\/eduambientalcorpochivor.gov.co\/index.php\/procedas\/","title":{"rendered":"PROCEDAS"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n.proceda-game{\n    max-width:1400px;\n    margin:auto;\n    font-family:Arial, sans-serif;\n}\n\n.proceda-topbar{\n    display:flex;\n    gap:15px;\n    align-items:center;\n    margin-bottom:20px;\n    flex-wrap:wrap;\n}\n\n.box-dado,\n.box-info{\n    background:#fff;\n    border-radius:12px;\n    padding:15px;\n    box-shadow:0 2px 8px rgba(0,0,0,.1);\n}\n\n#dado{\n    width:90px;\n    height:90px;\n    border:4px solid #2E7D32;\n    border-radius:15px;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    font-size:50px;\n    margin-bottom:10px;\n}\n\n#btnDado,\n#btnReiniciar{\n    background:#2E7D32;\n    color:white;\n    border:none;\n    padding:12px 20px;\n    border-radius:8px;\n    cursor:pointer;\n    font-weight:bold;\n}\n\n#btnDado:hover,\n#btnReiniciar:hover{\n    background:#1B5E20;\n}\n\n.proceda-layout{\n    display:flex;\n    gap:20px;\n    align-items:flex-start;\n}\n\n.tablero-wrapper{\n    position:relative;\n    width:70%;\n}\n\n#tablero{\n    width:100%;\n    display:block;\n}\n\n#ficha{\n\n    position:absolute;\n\n    width:24px;\n    height:24px;\n\n    background:#ff5722;\n\n    border:3px solid white;\n\n    border-radius:50%;\n\n    box-shadow:0 0 10px rgba(0,0,0,.5);\n\n    transition:all .8s ease;\n\n    z-index:100;\n\n    left:40px;\n    bottom:40px;\n\n}\n\/* Casilla inicial *\/\n#ficha{\n    left:40px;\n    bottom:40px;\n}\n\n#panelInfo{\n    width:30%;\n    background:white;\n    border-radius:15px;\n    padding:20px;\n    box-shadow:0 2px 10px rgba(0,0,0,.1);\n    min-height:500px;\n}\n\n#panelInfo img{\n    width:100%;\n    border-radius:10px;\n}\n\n#modalProceda{\n    display:none;\n    position:fixed;\n    top:0;\n    left:0;\n    width:100%;\n    height:100%;\n    background:rgba(0,0,0,.8);\n    z-index:9999;\n}\n\n.modal-contenido{\n    background:white;\n    width:90%;\n    max-width:800px;\n    margin:40px auto;\n    padding:20px;\n    border-radius:15px;\n    position:relative;\n}\n\n#cerrarModal{\n    position:absolute;\n    right:15px;\n    top:10px;\n    font-size:24px;\n    cursor:pointer;\n}\n\n#modalBody img{\n    width:100%;\n}\n\n.agitar{\n    animation:shake .1s infinite;\n}\n\n@keyframes shake{\n\n    0%{transform:rotate(0deg);}\n    25%{transform:rotate(8deg);}\n    50%{transform:rotate(-8deg);}\n    75%{transform:rotate(8deg);}\n    100%{transform:rotate(0deg);}\n}\n\n@media(max-width:991px){\n\n    .proceda-layout{\n        flex-direction:column;\n    }\n\n    .tablero-wrapper{\n        width:100%;\n    }\n\n    #panelInfo{\n        display:none;\n    }\n\n}\n\n#dado.agitando{\n\n    animation:\n        vibrar .1s infinite,\n        girar .5s linear infinite;\n\n}\n\n@keyframes vibrar{\n\n    0%{transform:translateX(-2px);}\n    50%{transform:translateX(2px);}\n    100%{transform:translateX(-2px);}\n\n}\n\n@keyframes girar{\n\n    from{\n        transform:rotate(0deg);\n    }\n\n    to{\n        transform:rotate(360deg);\n    }\n\n}\n\n.panel-imagen{\n    cursor:pointer;\n    transition:0.3s;\n}\n\n.panel-imagen:hover{\n    transform:scale(1.03);\n}\n\n#visorImagen{\n    display:none;\n    position:fixed;\n    top:0;\n    left:0;\n    width:100%;\n    height:100%;\n    background:rgba(0,0,0,.85);\n    z-index:9999;\n}\n\n#visorImagen img{\n\n    max-width:90%;\n    max-height:90%;\n\n    position:absolute;\n\n    top:50%;\n    left:50%;\n\n    transform:\n        translate(-50%,-50%);\n\n    border-radius:15px;\n}\n\n#visorImagen{\n\n    display:none;\n\n    position:fixed;\n\n    top:0;\n    left:0;\n\n    width:100%;\n    height:100%;\n\n    background:rgba(0,0,0,.85);\n\n    z-index:99999;\n\n    justify-content:center;\n    align-items:center;\n\n}\n\n#imagenGrande{\n\n    max-width:90%;\n    max-height:90%;\n\n    border-radius:15px;\n\n    box-shadow:0 0 25px rgba(255,255,255,.4);\n\n}\n\n.panel-imagen{\n\n    transition:.3s;\n}\n\n.panel-imagen:hover{\n\n    transform:scale(1.02);\n\n    cursor:pointer;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\nlet posicionActual = 1;\nlet tiradas = 0;\nlet esperandoTobogan = false;\n\nconst posiciones = {\n\n    1:{x:40,y:400},\n    2:{x:230,y:400},\n    3:{x:430,y:400},\n    4:{x:620,y:400},\n\n    5:{x:635,y:260},\n    6:{x:435,y:260},\n    7:{x:235,y:260},\n    8:{x:35,y:260},\n\n    9:{x:35,y:120},\n    10:{x:235,y:120},\n    11:{x:435,y:120},\n    12:{x:635,y:120}\n\n};\n\nconst contenido = {\n\n    2:{\n        titulo:\"\u00bfQu\u00e9 es un PROCEDA?\",\n        imagen:\"https:\/\/eduambientalcorpochivor.gov.co\/wp-content\/uploads\/2026\/06\/Que-es-el-proceda.png\"\n    },\n\n    4:{\n        titulo:\"Lineamientos de los PROCEDA\",\n        imagen:\"https:\/\/eduambientalcorpochivor.gov.co\/wp-content\/uploads\/2026\/06\/Lineamientos-de-los-proceda.png\"\n    },\n\n    6:{\n        titulo:\"PROCEDA Garagoa\",\n        imagen:\"https:\/\/eduambientalcorpochivor.gov.co\/wp-content\/uploads\/2026\/06\/Proceda-Garagoa.png\"\n    },\n\n    7:{\n        titulo:\"Aprende a elaborar abonos org\u00e1nicos\",\n        imagen:\"https:\/\/eduambientalcorpochivor.gov.co\/wp-content\/uploads\/2026\/06\/Aprende-a-Elaborar-Abonos-Organicos.png\"\n    },\n\n    9:{\n        titulo:\"PROCEDA Ci\u00e9nega\",\n        imagen:\"https:\/\/eduambientalcorpochivor.gov.co\/wp-content\/uploads\/2026\/06\/Proceda-Cienega.png\"\n    },\n\n    10:{\n        titulo:\"Separaci\u00f3n de residuos\",\n        imagen:\"https:\/\/eduambientalcorpochivor.gov.co\/wp-content\/uploads\/2026\/06\/Jueguemos-a-separar-los-Residuos.png\"\n    }\n\n};\n\nfunction moverFicha(){\n\n    const ficha = document.getElementById(\"ficha\");\n\n    if(!ficha) return;\n\n    ficha.style.left =\n        posiciones[posicionActual].x + \"px\";\n\n    ficha.style.top =\n        posiciones[posicionActual].y + \"px\";\n\n    document.getElementById(\n        \"casillaActual\"\n    ).innerText = posicionActual;\n\n}\n\nfunction mostrarContenido(casilla){\n\n    if(!contenido[casilla]) return;\n\n    document.getElementById(\n        \"panelInfo\"\n    ).innerHTML = `\n        <h2>${contenido[casilla].titulo}<\/h2>\n\n        <img decoding=\"async\"\n            class=\"panel-imagen\"\n            onclick=\"abrirImagen('${contenido[casilla].imagen}')\"\n            src=\"${contenido[casilla].imagen}\"\n            style=\"width:100%;border-radius:10px;cursor:pointer;\">\n    `;\n\n    \/\/ Abrir autom\u00e1ticamente en grande\n    setTimeout(()=>{\n\n        abrirImagen(\n            contenido[casilla].imagen\n        );\n\n    },500);\n\n}\n\nfunction procesarCasilla(resultado){\n\n    switch(posicionActual){\n\n        case 2:\n\n            mostrarContenido(2);\n\n        break;\n\n        case 3:\n\n            document.getElementById(\n                \"panelInfo\"\n            ).innerHTML = `\n                <h2>Casilla 3<\/h2>\n                <p>Retrocedes una casilla.<\/p>\n            `;\n\n            setTimeout(()=>{\n\n                posicionActual = 2;\n\n                moverFicha();\n\n                mostrarContenido(2);\n\n            },1500);\n\n            return;\n\n        case 4:\n\n            mostrarContenido(4);\n\n        break;\n\n        case 5:\n\n            if(resultado % 2 === 0){\n\n                document.getElementById(\n                    \"panelInfo\"\n                ).innerHTML = `\n                    <h2>Casilla 5<\/h2>\n                    <p>N\u00famero PAR. Regresas a la casilla 2.<\/p>\n                `;\n\n                setTimeout(()=>{\n\n                    posicionActual = 2;\n\n                    moverFicha();\n\n                    setTimeout(()=>{\n\n                        mostrarContenido(2);\n\n                    },1000);\n\n                },1500);\n\n            }else{\n\n                document.getElementById(\n                    \"panelInfo\"\n                ).innerHTML = `\n                    <h2>Casilla 5<\/h2>\n                    <p>N\u00famero IMPAR. Avanzas a la casilla 8.<\/p>\n                `;\n\n                setTimeout(()=>{\n\n                    posicionActual = 8;\n\n                    moverFicha();\n\n                    setTimeout(()=>{\n\n                        procesarCasilla(resultado);\n\n                    },1000);\n\n                },1500);\n\n            }\n\n            return;\n\n        case 6:\n\n            mostrarContenido(6);\n\n            setTimeout(()=>{\n\n                document.getElementById(\n                    \"panelInfo\"\n                ).innerHTML = `\n                    <h2>PROCEDA Garagoa<\/h2>\n                    <p>\n                        Escalera: avanzas a la casilla 10.\n                    <\/p>\n\n                    <img decoding=\"async\"\n                        class=\"panel-imagen\"\n                        onclick=\"abrirImagen('${contenido[6].imagen}')\"\n                        src=\"${contenido[6].imagen}\"\n                        style=\"width:100%;border-radius:10px;\">\n                `;\n\n                setTimeout(()=>{\n\n                    posicionActual = 10;\n\n                    moverFicha();\n\n                    setTimeout(()=>{\n\n                        mostrarContenido(10);\n\n                    },1000);\n\n                },1500);\n\n            },1000);\n\n            return;\n\n        case 7:\n\n            mostrarContenido(7);\n\n        break;\n\n        case 8:\n\n            document.getElementById(\n                \"panelInfo\"\n            ).innerHTML = `\n                <h2>Casilla 8<\/h2>\n                <p>\n                    Avanzas una casilla.\n                <\/p>\n            `;\n\n            setTimeout(()=>{\n\n                posicionActual = 9;\n\n                moverFicha();\n\n                procesarCasilla(resultado);\n\n            },1500);\n\n            return;\n\n        case 9:\n\n            esperandoTobogan = true;\n\n            mostrarContenido(9);\n\n            abrirImagen(\n                contenido[9].imagen\n            );\n\n            return;\n\n        case 10:\n\n            mostrarContenido(10);\n\n        break;\n\n        case 11:\n\n            document.getElementById(\n                \"panelInfo\"\n            ).innerHTML = `\n                <h2>Casilla 11<\/h2>\n                <p>\n                    Retrocedes dos casillas.\n                <\/p>\n            `;\n\n            setTimeout(()=>{\n\n                posicionActual = 9;\n\n                moverFicha();\n\n                procesarCasilla(resultado);\n\n            },2000);\n\n            return;\n\n        case 12:\n\n            document.getElementById(\n                \"btnDado\"\n            ).disabled = true;\n\n            document.getElementById(\n                \"panelInfo\"\n            ).innerHTML = `\n                <h2>\ud83c\udfc6 Felicitaciones<\/h2>\n\n                <p>\n                    Has completado la\n                    Aventura PROCEDA.\n                <\/p>\n            `;\n\n        break;\n\n    }\n\n}\n\nfunction lanzarDado(){\n\nif(posicionActual >= 12){\n    return;\n}\n\nconst dado =\n    document.getElementById(\"dado\");\n\nconst caras = {\n\n    1:'\u2680',\n    2:'\u2681',\n    3:'\u2682',\n    4:'\u2683',\n    5:'\u2684',\n    6:'\u2685'\n\n};\n\ndado.classList.add(\"agitando\");\n\nlet vueltas = 0;\n\nconst animacion = setInterval(()=>{\n\n    let temporal =\n        Math.floor(Math.random()*6)+1;\n\n    dado.innerHTML =\n        caras[temporal];\n\n    vueltas++;\n\n    if(vueltas >= 15){\n\n        clearInterval(animacion);\n\n        dado.classList.remove(\n            \"agitando\"\n        );\n\n        const posibilidades = [\n\n            1,1,1,1,\n            2,2,2,2,\n            3,3,3,\n            4,4,\n            5,\n            6\n\n        ];\n\n        let resultado =\n\n            posibilidades[\n                Math.floor(\n                    Math.random() *\n                    posibilidades.length\n                )\n            ];\n\n        dado.innerHTML =\n            caras[resultado];\n\n        posicionActual += resultado;\n\n        if(posicionActual > 12){\n\n            posicionActual = 12;\n\n        }\n\n        moverFicha();\n\n        setTimeout(()=>{\n\n            procesarCasilla(resultado);\n\n        },400);\n\n    }\n\n},80);\n}\n\nfunction reiniciarJuego(){\n\n    posicionActual = 1;\n    tiradas = 0;\n\n    document.getElementById(\n        \"btnDado\"\n    ).disabled = false;\n\n    document.getElementById(\n        \"dado\"\n    ).innerHTML = \"?\";\n\n    document.getElementById(\n        \"panelInfo\"\n    ).innerHTML = `\n        <h2>Bienvenido<\/h2>\n\n        <p>\n            Lanza el dado para comenzar\n            la aventura PROCEDA.\n        <\/p>\n    `;\n\n    moverFicha();\n\n}\n\nwindow.onload = function(){\n\n    document\n    .getElementById(\"btnDado\")\n    .addEventListener(\n        \"click\",\n        lanzarDado\n    );\n\n    document\n    .getElementById(\"btnReiniciar\")\n    .addEventListener(\n        \"click\",\n        reiniciarJuego\n    );\n\n    moverFicha();\n\n};\n\nfunction abrirImagen(url){\n\n    const visor =\n        document.getElementById(\n            \"visorImagen\"\n        );\n\n    visor.style.display = \"flex\";\n\n    document.getElementById(\n        \"imagenGrande\"\n    ).src = url;\n\n}\n\ndocument.addEventListener(\n    \"click\",\n    function(e){\n\n        if(\n            e.target.id === \"visorImagen\"\n        ){\n\n            document.getElementById(\n                \"visorImagen\"\n            ).style.display = \"none\";\n\n            if(esperandoTobogan){\n\n                esperandoTobogan = false;\n\n                document.getElementById(\n                    \"panelInfo\"\n                ).innerHTML = `\n                    <h2>PROCEDA Ci\u00e9nega<\/h2>\n                    <p>\n                        Tobog\u00e1n:\n                        bajas a la casilla 7.\n                    <\/p>\n                `;\n\n                setTimeout(()=>{\n\n                    posicionActual = 7;\n\n                    moverFicha();\n\n                    mostrarContenido(7);\n\n                },1500);\n\n            }\n\n        }\n\n    }\n);\n<\/script>\n\n<div class=\"proceda-game\">\n\n    <!-- CABECERA -->\n\n    <div class=\"proceda-topbar\">\n\n        <div class=\"box-dado\">\n\n            <div id=\"dado\">?<\/div>\n\n            <button id=\"btnDado\">\n                \ud83c\udfb2 Lanzar Dado\n            <\/button>\n\n        <\/div>\n\n        <div class=\"box-info\">\n\n            <strong>Casilla<\/strong>\n\n            <span id=\"casillaActual\">\n                1\n            <\/span>\n\n        <\/div>\n\n        <div class=\"box-info\">\n\n            <strong>Puntos<\/strong>\n\n            <span id=\"puntos\">\n                0\n            <\/span>\n\n        <\/div>\n\n        <div class=\"box-info\">\n\n            <button id=\"btnReiniciar\">\n                \ud83d\udd04 Reiniciar\n            <\/button>\n\n        <\/div>\n\n    <\/div>\n\n    <!-- CONTENIDO -->\n\n    <div class=\"proceda-layout\">\n\n        <!-- TABLERO -->\n\n        <div class=\"tablero-wrapper\">\n\n            <img decoding=\"async\" id=\"tablero\" src=\"https:\/\/eduambientalcorpochivor.gov.co\/wp-content\/uploads\/2026\/06\/Juego-Procedas.png\" alt=\"Tablero PROCEDA\">\n\n            <div id=\"ficha\"><\/div>\n\n        <\/div>\n\n        <!-- PANEL LATERAL -->\n\n        <div id=\"panelInfo\">\n\n            <h2>\n                Bienvenido\n            <\/h2>\n\n            <p>\n                Lanza el dado para comenzar la aventura PROCEDA.\n            <\/p>\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n<!-- MODAL MOVIL -->\n\n<div id=\"modalProceda\">\n\n    <div class=\"modal-contenido\">\n\n        <span id=\"cerrarModal\">\n            \u2716\n        <\/span>\n\n        <div id=\"modalBody\">\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n<div id=\"visorImagen\">\n\n    <img decoding=\"async\" id=\"imagenGrande\" src=\"\">\n\n<\/div>\n\n<div id=\"visorImagen\">\n\n    <img decoding=\"async\" id=\"imagenGrande\" src=\"\">\n\n<\/div>\n\n\n\n<style>\n\/* =============================== *\/\n\/* ===== BOTONES TIPO CIDEAS ===== *\/\n\/* =============================== *\/\n\n\/* Contenedor (como la 1ra imagen: en columna) *\/\n.procedas-grid{\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 28px;\n  margin: 40px 0;\n}\n\n\/* Bot\u00f3n base *\/\n.cideas-btn{\n  padding: 12px 35px;\n  border-radius: 8px;\n  text-decoration: none;\n  font-size: 13px;\n  letter-spacing: .4em;\n  font-weight: 500;\n  display: inline-block;\n  transition: all .25s ease;\n  border: 1px solid rgba(0,0,0,0.10);\n  color: #4a4a4a;\n}\n\n\/* Colores EXACTOS (ajustados a tu imagen) *\/\n.cideas-btn.verde{ background: #B4E0A1; }\n.cideas-btn.azul{  background: #B3CDDA; }\n\n\/* Hover suave *\/\n.cideas-btn:hover{\n  transform: translateY(-3px);\n  box-shadow: 0 6px 16px rgba(0,0,0,0.12);\n}\n\n\/* (Opcional) que el 2do bot\u00f3n sea m\u00e1s largo como en la imagen *\/\n.cideas-btn.largo{\n  min-width: 520px;\n}\n\n@media (max-width: 650px){\n  .cideas-btn.largo{ min-width: 0; width: 100%; }\n}\n<\/style>\n\n<div class=\"procedas-grid\">\n\n  <a href=\"https:\/\/eduambientalcorpochivor.gov.co\/index.php\/municipio-de-garagoa-procedas\/\" class=\"cideas-btn verde\">\n    GARAGOA\n  <\/a>\n\n<a href=\"https:\/\/eduambientalcorpochivor.gov.co\/index.php\/municipio-de-cienega-procedas\/\" class=\"cideas-btn azul\">\n    CI\u00c9NEGA\n  <\/a>\n\n<\/div>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"175\" src=\"https:\/\/eduambiental.nuvoll.com\/wp-content\/uploads\/2026\/02\/1-Cenefa-WEB-1024x175.png\" alt=\"Cenefa inferior\" class=\"wp-image-110\" style=\"width:1180px;height:auto\" srcset=\"https:\/\/eduambientalcorpochivor.gov.co\/wp-content\/uploads\/2026\/02\/1-Cenefa-WEB-1024x175.png 1024w, https:\/\/eduambientalcorpochivor.gov.co\/wp-content\/uploads\/2026\/02\/1-Cenefa-WEB-300x51.png 300w, https:\/\/eduambientalcorpochivor.gov.co\/wp-content\/uploads\/2026\/02\/1-Cenefa-WEB-768x132.png 768w, https:\/\/eduambientalcorpochivor.gov.co\/wp-content\/uploads\/2026\/02\/1-Cenefa-WEB-1536x263.png 1536w, https:\/\/eduambientalcorpochivor.gov.co\/wp-content\/uploads\/2026\/02\/1-Cenefa-WEB-2048x351.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>? \ud83c\udfb2 Lanzar Dado Casilla 1 Puntos 0 \ud83d\udd04 Reiniciar Bienvenido Lanza el dado para comenzar la aventura PROCEDA. \u2716 GARAGOA CI\u00c9NEGA<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"normal","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-82","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eduambientalcorpochivor.gov.co\/index.php\/wp-json\/wp\/v2\/pages\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eduambientalcorpochivor.gov.co\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eduambientalcorpochivor.gov.co\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eduambientalcorpochivor.gov.co\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eduambientalcorpochivor.gov.co\/index.php\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":59,"href":"https:\/\/eduambientalcorpochivor.gov.co\/index.php\/wp-json\/wp\/v2\/pages\/82\/revisions"}],"predecessor-version":[{"id":1041,"href":"https:\/\/eduambientalcorpochivor.gov.co\/index.php\/wp-json\/wp\/v2\/pages\/82\/revisions\/1041"}],"wp:attachment":[{"href":"https:\/\/eduambientalcorpochivor.gov.co\/index.php\/wp-json\/wp\/v2\/media?parent=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}