{"id":2841,"date":"2025-10-15T21:48:53","date_gmt":"2025-10-15T21:48:53","guid":{"rendered":"https:\/\/narino.gov.co\/lamejortaza\/?page_id=2841"},"modified":"2025-10-15T22:37:11","modified_gmt":"2025-10-15T22:37:11","slug":"datos-clave","status":"publish","type":"page","link":"https:\/\/narino.gov.co\/lamejortaza\/datos-clave\/","title":{"rendered":"Datos Clave"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2841\" class=\"elementor elementor-2841\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dd9fc8c e-con-full e-flex e-con e-parent\" data-id=\"dd9fc8c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2743f2c elementor-widget elementor-widget-html\" data-id=\"2743f2c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Infograf\u00eda Caf\u00e9 Nari\u00f1o - La Mejor Taza<\/title>\r\n    <script type=\"text\/javascript\" src=\"https:\/\/www.gstatic.com\/charts\/loader.js\"><\/script>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700;900&display=swap');\r\n        \r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        body {\r\n            font-family: 'Poppins', sans-serif;\r\n            color: #333;\r\n            overflow-x: hidden;\r\n        }\r\n        \r\n        \/* SECCI\u00d3N 1 - HERO FULL *\/\r\n        .section-hero {\r\n            width: 100%;\r\n            height: 90vh;\r\n            background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #db2777 100%);\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            position: relative;\r\n            overflow: hidden;\r\n            padding: 30px 20px;\r\n        }\r\n        \r\n        .hero-background {\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 100%;\r\n            opacity: 0.1;\r\n        }\r\n        \r\n        .coffee-bean {\r\n            position: absolute;\r\n            font-size: 5em;\r\n            animation: float 6s ease-in-out infinite;\r\n        }\r\n        \r\n        .bean1 { top: 10%; left: 10%; animation-delay: 0s; }\r\n        .bean2 { top: 20%; right: 15%; animation-delay: 1s; }\r\n        .bean3 { bottom: 15%; left: 20%; animation-delay: 2s; }\r\n        .bean4 { bottom: 25%; right: 10%; animation-delay: 3s; }\r\n        \r\n        @keyframes float {\r\n            0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n            50% { transform: translateY(-20px) rotate(10deg); }\r\n        }\r\n        \r\n        .hero-content {\r\n            z-index: 10;\r\n            text-align: center;\r\n            color: white;\r\n        }\r\n        \r\n        .hero-icon {\r\n            font-size: 6em;\r\n            margin-bottom: 15px;\r\n            animation: pulse 2s ease-in-out infinite;\r\n        }\r\n        \r\n        @keyframes pulse {\r\n            0%, 100% { transform: scale(1); }\r\n            50% { transform: scale(1.1); }\r\n        }\r\n        \r\n        .hero-title {\r\n            font-size: 4em;\r\n            font-weight: 900;\r\n            text-shadow: 4px 4px 8px rgba(0,0,0,0.3);\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .hero-subtitle {\r\n            font-size: 1.5em;\r\n            font-weight: 300;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .stats-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            gap: 20px;\r\n            max-width: 1200px;\r\n            margin-top: 30px;\r\n        }\r\n        \r\n        .stat-card {\r\n            background: rgba(255,255,255,0.15);\r\n            backdrop-filter: blur(10px);\r\n            padding: 20px;\r\n            border-radius: 20px;\r\n            border: 2px solid rgba(255,255,255,0.3);\r\n            transition: transform 0.3s;\r\n        }\r\n        \r\n        .stat-card:hover {\r\n            transform: translateY(-10px);\r\n        }\r\n        \r\n        .stat-icon {\r\n            font-size: 2.5em;\r\n            margin-bottom: 10px;\r\n        }\r\n        \r\n        .stat-number {\r\n            font-size: 2em;\r\n            font-weight: 900;\r\n            margin-bottom: 8px;\r\n        }\r\n        \r\n        .stat-label {\r\n            font-size: 0.85em;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n        }\r\n        \r\n        \/* SECCI\u00d3N 2 - LAYOUT ZIGZAG *\/\r\n        .section-zigzag {\r\n            width: 100%;\r\n            height: 90vh;\r\n            background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);\r\n            display: flex;\r\n            align-items: center;\r\n            padding: 40px;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .zigzag-container {\r\n            display: flex;\r\n            gap: 30px;\r\n            align-items: center;\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .zigzag-text {\r\n            flex: 0 0 38%;\r\n            color: white;\r\n        }\r\n        \r\n        .section-title {\r\n            font-size: 2.5em;\r\n            font-weight: 900;\r\n            margin-bottom: 15px;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 15px;\r\n        }\r\n        \r\n        .title-icon {\r\n            font-size: 1.2em;\r\n            background: rgba(255,255,255,0.2);\r\n            padding: 15px;\r\n            border-radius: 50%;\r\n        }\r\n        \r\n        .ranking-list {\r\n            list-style: none;\r\n            margin-top: 20px;\r\n        }\r\n        \r\n        .ranking-item {\r\n            background: rgba(255,255,255,0.2);\r\n            backdrop-filter: blur(10px);\r\n            padding: 15px 20px;\r\n            margin-bottom: 10px;\r\n            border-radius: 15px;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            font-size: 1.1em;\r\n            font-weight: 600;\r\n            border-left: 5px solid white;\r\n            transition: all 0.3s;\r\n        }\r\n        \r\n        .ranking-item:hover {\r\n            transform: translateX(10px);\r\n            background: rgba(255,255,255,0.3);\r\n        }\r\n        \r\n        .ranking-number {\r\n            font-size: 1.6em;\r\n            font-weight: 900;\r\n            background: white;\r\n            color: #ec4899;\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin-right: 15px;\r\n        }\r\n        \r\n        .zigzag-chart {\r\n            flex: 1;\r\n            background: white;\r\n            border-radius: 30px;\r\n            padding: 20px;\r\n            box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n            height: 70vh;\r\n        }\r\n        \r\n        \/* SECCI\u00d3N 3 - CIRCULAR *\/\r\n        .section-circular {\r\n            width: 100%;\r\n            height: 90vh;\r\n            background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 40px;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .circular-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 30px;\r\n            max-width: 1400px;\r\n            align-items: center;\r\n        }\r\n        \r\n        .export-stats {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 15px;\r\n        }\r\n        \r\n        .export-card {\r\n            background: rgba(255,255,255,0.25);\r\n            backdrop-filter: blur(10px);\r\n            padding: 20px;\r\n            border-radius: 20px;\r\n            text-align: center;\r\n            color: white;\r\n            border: 2px solid rgba(255,255,255,0.4);\r\n            transition: transform 0.3s;\r\n        }\r\n        \r\n        .export-card:hover {\r\n            transform: scale(1.05);\r\n        }\r\n        \r\n        .export-icon {\r\n            font-size: 2.5em;\r\n            margin-bottom: 10px;\r\n        }\r\n        \r\n        .export-value {\r\n            font-size: 2em;\r\n            font-weight: 900;\r\n            margin-bottom: 8px;\r\n            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\r\n        }\r\n        \r\n        .export-desc {\r\n            font-size: 0.9em;\r\n            opacity: 0.9;\r\n        }\r\n        \r\n        .circular-chart {\r\n            background: white;\r\n            border-radius: 30px;\r\n            padding: 20px;\r\n            box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n            height: 70vh;\r\n        }\r\n        \r\n        \/* SECCI\u00d3N 4 - MOSAICO *\/\r\n        .section-mosaic {\r\n            width: 100%;\r\n            height: 90vh;\r\n            background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);\r\n            padding: 40px;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .mosaic-header {\r\n            text-align: center;\r\n            color: white;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .mosaic-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr 2fr;\r\n            gap: 20px;\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .regions-cards {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 15px;\r\n        }\r\n        \r\n        .region-card {\r\n            background: rgba(255,255,255,0.2);\r\n            backdrop-filter: blur(10px);\r\n            padding: 15px;\r\n            border-radius: 20px;\r\n            color: white;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            border: 2px solid rgba(255,255,255,0.3);\r\n            transition: all 0.3s;\r\n        }\r\n        \r\n        .region-card:hover {\r\n            background: rgba(255,255,255,0.3);\r\n            transform: translateX(10px);\r\n        }\r\n        \r\n        .region-icon {\r\n            font-size: 2.5em;\r\n            background: rgba(255,255,255,0.2);\r\n            padding: 15px;\r\n            border-radius: 50%;\r\n            width: 70px;\r\n            height: 70px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n        \r\n        .region-info h3 {\r\n            font-size: 1.3em;\r\n            font-weight: 700;\r\n            margin-bottom: 5px;\r\n        }\r\n        \r\n        .region-info p {\r\n            font-size: 0.85em;\r\n            opacity: 0.9;\r\n        }\r\n        \r\n        .mosaic-chart {\r\n            background: white;\r\n            border-radius: 30px;\r\n            padding: 20px;\r\n            box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n            height: 60vh;\r\n        }\r\n        \r\n        \/* SECCI\u00d3N 5 - SPLIT DIAGONAL *\/\r\n        .section-diagonal {\r\n            width: 100%;\r\n            height: 90vh;\r\n            background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);\r\n            display: flex;\r\n            align-items: center;\r\n            padding: 40px;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .diagonal-container {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 30px;\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            align-items: center;\r\n        }\r\n        \r\n        .cacao-info {\r\n            color: white;\r\n        }\r\n        \r\n        .cacao-stats {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 15px;\r\n            margin-top: 20px;\r\n        }\r\n        \r\n        .cacao-stat {\r\n            background: rgba(255,255,255,0.2);\r\n            backdrop-filter: blur(10px);\r\n            padding: 20px;\r\n            border-radius: 20px;\r\n            text-align: center;\r\n            border: 2px solid rgba(255,255,255,0.3);\r\n        }\r\n        \r\n        .cacao-stat-icon {\r\n            font-size: 2.5em;\r\n            margin-bottom: 10px;\r\n        }\r\n        \r\n        .cacao-stat-value {\r\n            font-size: 1.8em;\r\n            font-weight: 900;\r\n            margin-bottom: 8px;\r\n        }\r\n        \r\n        .cacao-stat-label {\r\n            font-size: 0.85em;\r\n            opacity: 0.9;\r\n        }\r\n        \r\n        .award-badge {\r\n            background: rgba(255,215,0,0.3);\r\n            backdrop-filter: blur(10px);\r\n            padding: 20px;\r\n            border-radius: 20px;\r\n            margin-top: 20px;\r\n            border: 3px solid gold;\r\n            text-align: center;\r\n        }\r\n        \r\n        .award-icon {\r\n            font-size: 3em;\r\n            color: gold;\r\n            margin-bottom: 10px;\r\n        }\r\n        \r\n        .award-text {\r\n            font-size: 1.1em;\r\n            font-weight: 700;\r\n        }\r\n        \r\n        .diagonal-chart {\r\n            background: white;\r\n            border-radius: 30px;\r\n            padding: 20px;\r\n            box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n            height: 70vh;\r\n        }\r\n        \r\n        .chart-div {\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n        \r\n        \/* RESPONSIVE *\/\r\n        @media (max-width: 1024px) {\r\n            .hero-title { font-size: 3em; }\r\n            .stats-grid { grid-template-columns: repeat(2, 1fr); }\r\n            .section-title { font-size: 2.5em; }\r\n            .zigzag-container,\r\n            .circular-grid,\r\n            .mosaic-grid,\r\n            .diagonal-container {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            .zigzag-chart,\r\n            .circular-chart,\r\n            .mosaic-chart,\r\n            .diagonal-chart {\r\n                height: 50vh;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <!-- SECCI\u00d3N 1: HERO IMPACTANTE -->\r\n    <div class=\"section-hero\">\r\n        <div class=\"hero-background\">\r\n            <div class=\"coffee-bean bean1\">\u2615<\/div>\r\n            <div class=\"coffee-bean bean2\">\u2615<\/div>\r\n            <div class=\"coffee-bean bean3\">\u2615<\/div>\r\n            <div class=\"coffee-bean bean4\">\u2615<\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"hero-content\">\r\n            <div class=\"hero-icon\">\ud83c\udfc6<\/div>\r\n            <h1 class=\"hero-title\">LA MEJOR TAZA<\/h1>\r\n            <p class=\"hero-subtitle\">Caf\u00e9 Nari\u00f1o - Datos Clave 2024-2025<\/p>\r\n            \r\n            <div class=\"stats-grid\">\r\n                <div class=\"stat-card\">\r\n                    <div class=\"stat-icon\">\ud83d\udc68\u200d\ud83c\udf3e<\/div>\r\n                    <div class=\"stat-number\">40,412<\/div>\r\n                    <div class=\"stat-label\">Familias Caficultoras<\/div>\r\n                <\/div>\r\n                <div class=\"stat-card\">\r\n                    <div class=\"stat-icon\">\ud83d\udcbc<\/div>\r\n                    <div class=\"stat-number\">+53,000<\/div>\r\n                    <div class=\"stat-label\">Empleos Directos<\/div>\r\n                <\/div>\r\n                <div class=\"stat-card\">\r\n                    <div class=\"stat-icon\">\ud83d\udce6<\/div>\r\n                    <div class=\"stat-number\">34,000<\/div>\r\n                    <div class=\"stat-label\">Toneladas 2025<\/div>\r\n                <\/div>\r\n                <div class=\"stat-card\">\r\n                    <div class=\"stat-icon\">\ud83d\udcb0<\/div>\r\n                    <div class=\"stat-number\">$550B<\/div>\r\n                    <div class=\"stat-label\">Valor Estimado<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- SECCI\u00d3N 2: MUNICIPIOS ZIGZAG -->\r\n    <div class=\"section-zigzag\">\r\n        <div class=\"zigzag-container\">\r\n            <div class=\"zigzag-text\">\r\n                <h2 class=\"section-title\">\r\n                    <span class=\"title-icon\">\ud83c\udfd4\ufe0f<\/span>\r\n                    Top 5 Productores\r\n                <\/h2>\r\n                <p style=\"font-size: 1.1em; line-height: 1.5; margin-bottom: 15px;\">\r\n                    Los municipios l\u00edderes en producci\u00f3n cafetera de Nari\u00f1o representan \r\n                    el <strong>43%<\/strong> del total departamental.\r\n                <\/p>\r\n                \r\n                <ul class=\"ranking-list\">\r\n                    <li class=\"ranking-item\">\r\n                        <div style=\"display: flex; align-items: center;\">\r\n                            <span class=\"ranking-number\">1<\/span>\r\n                            <span>La Uni\u00f3n<\/span>\r\n                        <\/div>\r\n                        <strong>3,519.8 t<\/strong>\r\n                    <\/li>\r\n                    <li class=\"ranking-item\">\r\n                        <div style=\"display: flex; align-items: center;\">\r\n                            <span class=\"ranking-number\">2<\/span>\r\n                            <span>Buesaco<\/span>\r\n                        <\/div>\r\n                        <strong>3,223.3 t<\/strong>\r\n                    <\/li>\r\n                    <li class=\"ranking-item\">\r\n                        <div style=\"display: flex; align-items: center;\">\r\n                            <span class=\"ranking-number\">3<\/span>\r\n                            <span>San Lorenzo<\/span>\r\n                        <\/div>\r\n                        <strong>3,048.2 t<\/strong>\r\n                    <\/li>\r\n                    <li class=\"ranking-item\">\r\n                        <div style=\"display: flex; align-items: center;\">\r\n                            <span class=\"ranking-number\">4<\/span>\r\n                            <span>Col\u00f3n<\/span>\r\n                        <\/div>\r\n                        <strong>2,769.6 t<\/strong>\r\n                    <\/li>\r\n                    <li class=\"ranking-item\">\r\n                        <div style=\"display: flex; align-items: center;\">\r\n                            <span class=\"ranking-number\">5<\/span>\r\n                            <span>El Tabl\u00f3n de G\u00f3mez<\/span>\r\n                        <\/div>\r\n                        <strong>1,956.6 t<\/strong>\r\n                    <\/li>\r\n                <\/ul>\r\n            <\/div>\r\n            \r\n            <div class=\"zigzag-chart\">\r\n                <div id=\"chart1\" class=\"chart-div\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- SECCI\u00d3N 3: EXPORTACIONES CIRCULAR -->\r\n    <div class=\"section-circular\">\r\n        <div class=\"circular-grid\">\r\n            <div>\r\n                <h2 class=\"section-title\" style=\"color: white;\">\r\n                    <span class=\"title-icon\">\ud83c\udf0e<\/span>\r\n                    Exportaciones\r\n                <\/h2>\r\n                <div class=\"export-stats\">\r\n                    <div class=\"export-card\">\r\n                        <div class=\"export-icon\">\ud83d\udcb5<\/div>\r\n                        <div class=\"export-value\">$377.4M<\/div>\r\n                        <div class=\"export-desc\">USD en Exportaciones<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"export-card\">\r\n                        <div class=\"export-icon\">\ud83d\udcc8<\/div>\r\n                        <div class=\"export-value\">+8.1%<\/div>\r\n                        <div class=\"export-desc\">Crecimiento 2024<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"export-card\">\r\n                        <div class=\"export-icon\">\u2b50<\/div>\r\n                        <div class=\"export-value\">$100<\/div>\r\n                        <div class=\"export-desc\">USD\/Libra R\u00e9cord<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"export-card\">\r\n                        <div class=\"export-icon\">\ud83c\udfc5<\/div>\r\n                        <div class=\"export-value\">+90<\/div>\r\n                        <div class=\"export-desc\">Puntos SCAA<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"export-card\" style=\"grid-column: span 2;\">\r\n                        <div class=\"export-icon\">\ud83d\udce6<\/div>\r\n                        <div class=\"export-value\">1,193,949<\/div>\r\n                        <div class=\"export-desc\">Sacos de 60kg exportados en Diciembre 2024<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"circular-chart\">\r\n                <div id=\"chart2\" class=\"chart-div\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- SECCI\u00d3N 4: PAZ Y DESARROLLO MOSAICO -->\r\n    <div class=\"section-mosaic\">\r\n        <div class=\"mosaic-header\">\r\n            <h2 class=\"section-title\" style=\"justify-content: center;\">\r\n                <span class=\"title-icon\">\ud83d\udd4a\ufe0f<\/span>\r\n                Paz y Desarrollo\r\n            <\/h2>\r\n            <p style=\"font-size: 1.1em; max-width: 800px; margin: 0 auto;\">\r\n                5 mundos, 6 subregiones, una sola pasi\u00f3n por el caf\u00e9 de calidad\r\n            <\/p>\r\n        <\/div>\r\n        \r\n        <div class=\"mosaic-grid\">\r\n            <div class=\"regions-cards\">\r\n                <div class=\"region-card\">\r\n                    <div class=\"region-icon\">\ud83c\udf0a<\/div>\r\n                    <div class=\"region-info\">\r\n                        <h3>Marino<\/h3>\r\n                        <p>Regi\u00f3n costera del Pac\u00edfico<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"region-card\">\r\n                    <div class=\"region-icon\">\ud83c\udfd6\ufe0f<\/div>\r\n                    <div class=\"region-info\">\r\n                        <h3>Litoral<\/h3>\r\n                        <p>Zona litoral pac\u00edfica<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"region-card\">\r\n                    <div class=\"region-icon\">\ud83c\udf3f<\/div>\r\n                    <div class=\"region-info\">\r\n                        <h3>Choc\u00f3 Biogeogr\u00e1fico<\/h3>\r\n                        <p>Biodiversidad \u00fanica<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"region-card\">\r\n                    <div class=\"region-icon\">\u26f0\ufe0f<\/div>\r\n                    <div class=\"region-info\">\r\n                        <h3>Andino<\/h3>\r\n                        <p>Monta\u00f1as cafeteras<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"region-card\">\r\n                    <div class=\"region-icon\">\ud83c\udf33<\/div>\r\n                    <div class=\"region-info\">\r\n                        <h3>Amaz\u00f3nico<\/h3>\r\n                        <p>Piedemonte amaz\u00f3nico<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"mosaic-chart\">\r\n                <div id=\"chart3\" class=\"chart-div\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- SECCI\u00d3N 5: CACAO DIAGONAL -->\r\n    <div class=\"section-diagonal\">\r\n        <div class=\"diagonal-container\">\r\n            <div class=\"cacao-info\">\r\n                <h2 class=\"section-title\">\r\n                    <span class=\"title-icon\">\ud83c\udf6b<\/span>\r\n                    Cacao de Clase Mundial\r\n                <\/h2>\r\n                \r\n                <div class=\"cacao-stats\">\r\n                    <div class=\"cacao-stat\">\r\n                        <div class=\"cacao-stat-icon\">\ud83c\udfd8\ufe0f<\/div>\r\n                        <div class=\"cacao-stat-value\">21<\/div>\r\n                        <div class=\"cacao-stat-label\">Municipios Cacaoteros<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"cacao-stat\">\r\n                        <div class=\"cacao-stat-icon\">\ud83c\udf31<\/div>\r\n                        <div class=\"cacao-stat-value\">19,744<\/div>\r\n                        <div class=\"cacao-stat-label\">Hect\u00e1reas Sembradas<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"cacao-stat\">\r\n                        <div class=\"cacao-stat-icon\">\ud83d\udce6<\/div>\r\n                        <div class=\"cacao-stat-value\">8,819<\/div>\r\n                        <div class=\"cacao-stat-label\">Toneladas Producidas<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"cacao-stat\">\r\n                        <div class=\"cacao-stat-icon\">\u2b50<\/div>\r\n                        <div class=\"cacao-stat-value\">84%<\/div>\r\n                        <div class=\"cacao-stat-label\">Producci\u00f3n de Tumaco<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"award-badge\">\r\n                    <div class=\"award-icon\">\ud83c\udfc6<\/div>\r\n                    <div class=\"award-text\">\r\n                        \"Mejor Cacao del Mundo\"<br>\r\n                        Par\u00eds 2015\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"diagonal-chart\">\r\n                <div id=\"chart4\" class=\"chart-div\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script type=\"text\/javascript\">\r\n        google.charts.load('current', {'packages':['corechart']});\r\n        google.charts.setOnLoadCallback(drawAllCharts);\r\n\r\n        function drawAllCharts() {\r\n            drawChart1();\r\n            drawChart2();\r\n            drawChart3();\r\n            drawChart4();\r\n        }\r\n\r\n        \/\/ GR\u00c1FICO 1: Producci\u00f3n Municipios (Combo Chart)\r\n        function drawChart1() {\r\n            var data = google.visualization.arrayToDataTable([\r\n                ['Municipio', 'Toneladas', 'Promedio Regional'],\r\n                ['La Uni\u00f3n', 3519.8, 2800],\r\n                ['Buesaco', 3223.3, 2800],\r\n                ['San Lorenzo', 3048.2, 2800],\r\n                ['Col\u00f3n', 2769.6, 2800],\r\n                ['El Tabl\u00f3n', 1956.6, 2800]\r\n            ]);\r\n\r\n            var options = {\r\n                title: 'Top 5 Municipios Productores',\r\n                titleTextStyle: { fontSize: 20, bold: true },\r\n                seriesType: 'bars',\r\n                series: {1: {type: 'line', color: '#ec4899', lineWidth: 3}},\r\n                colors: ['#10b981'],\r\n                vAxis: { \r\n                    title: 'Toneladas',\r\n                    minValue: 0 \r\n                },\r\n                hAxis: {\r\n                    textStyle: { fontSize: 11 }\r\n                },\r\n                legend: { position: 'top', textStyle: {fontSize: 12} },\r\n                chartArea: {width: '85%', height: '75%', left: 80, top: 80},\r\n                animation: { startup: true, duration: 1000, easing: 'out' },\r\n                bar: { groupWidth: '70%' }\r\n            };\r\n\r\n            var chart = new google.visualization.ComboChart(document.getElementById('chart1'));\r\n            chart.draw(data, options);\r\n        }\r\n\r\n        \/\/ GR\u00c1FICO 2: Exportaciones (Combo)\r\n        function drawChart2() {\r\n            var data = google.visualization.arrayToDataTable([\r\n                ['Tipo', 'Porcentaje', 'Millones USD'],\r\n                ['Verde Excelso', 84.5, 318.8],\r\n                ['Industrializado', 15.5, 58.6]\r\n            ]);\r\n\r\n            var options = {\r\n                title: 'Composici\u00f3n de Exportaciones 2024',\r\n                titleTextStyle: { fontSize: 20, bold: true },\r\n                seriesType: 'bars',\r\n                series: {1: {type: 'line', color: '#06b6d4', lineWidth: 4}},\r\n                colors: ['#0ea5e9', '#06b6d4'],\r\n                vAxis: { title: 'Porcentaje (%)' },\r\n                legend: { position: 'top' },\r\n                chartArea: {width: '85%', height: '75%', left: 80, top: 80},\r\n                animation: { startup: true, duration: 1200, easing: 'out' }\r\n            };\r\n\r\n            var chart = new google.visualization.ComboChart(document.getElementById('chart2'));\r\n            chart.draw(data, options);\r\n        }\r\n\r\n        \/\/ GR\u00c1FICO 3: Paz y Desarrollo (Bubble)\r\n        function drawChart3() {\r\n            var data = google.visualization.arrayToDataTable([\r\n                ['ID', 'X', 'Y', 'Mundo', 'Lotes'],\r\n                ['Marino', 20, 25, 'Marino', 20],\r\n                ['Litoral', 40, 35, 'Litoral', 25],\r\n                ['Choc\u00f3 Bio', 60, 30, 'Choc\u00f3 Biogeogr\u00e1fico', 22],\r\n                ['Andino', 80, 45, 'Andino', 30],\r\n                ['Amaz\u00f3nico', 30, 55, 'Amaz\u00f3nico', 18]\r\n            ]);\r\n\r\n            var options = {\r\n                title: '5 Mundos del Caf\u00e9 Nari\u00f1ense',\r\n                titleTextStyle: { fontSize: 20, bold: true },\r\n                hAxis: { title: 'Diversidad', minValue: 0, maxValue: 100 },\r\n                vAxis: { title: 'Impacto Social', minValue: 0, maxValue: 60 },\r\n                bubble: { textStyle: {fontSize: 11, color: 'white', bold: true} },\r\n                colors: ['#10b981', '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6'],\r\n                legend: { position: 'top' },\r\n                chartArea: {width: '85%', height: '75%', left: 80, top: 80},\r\n                animation: { startup: true, duration: 1200, easing: 'out' }\r\n            };\r\n\r\n            var chart = new google.visualization.BubbleChart(document.getElementById('chart3'));\r\n            chart.draw(data, options);\r\n        }\r\n\r\n        \/\/ GR\u00c1FICO 4: Cacao (Bubble Chart)\r\n        function drawChart4() {\r\n            var data = google.visualization.arrayToDataTable([\r\n                ['ID', 'Hect\u00e1reas', 'Producci\u00f3n (t)', 'Municipio', 'Valor'],\r\n                ['Tumaco', 16610, 7655, 'Tumaco', 85],\r\n                ['Barbacoas', 1200, 450, 'Barbacoas', 40],\r\n                ['Roberto Pay\u00e1n', 800, 320, 'Roberto Pay\u00e1n', 35],\r\n                ['Mag\u00fc\u00ed Pay\u00e1n', 600, 250, 'Mag\u00fc\u00ed Pay\u00e1n', 30],\r\n                ['Otros 17', 534, 144, 'Otros Municipios', 15]\r\n            ]);\r\n\r\n            var options = {\r\n                title: 'Producci\u00f3n de Cacao por Municipio',\r\n                titleTextStyle: { fontSize: 20, bold: true },\r\n                hAxis: { \r\n                    title: 'Hect\u00e1reas Sembradas',\r\n                    minValue: 0\r\n                },\r\n                vAxis: { \r\n                    title: 'Producci\u00f3n (Toneladas)',\r\n                    minValue: 0\r\n                },\r\n                bubble: { \r\n                    textStyle: {fontSize: 11, color: 'white', bold: true},\r\n                    stroke: 'white'\r\n                },\r\n                colors: ['#f59e0b', '#fb923c', '#fdba74', '#fed7aa', '#fef3c7'],\r\n                legend: { position: 'top' },\r\n                chartArea: {width: '85%', height: '75%', left: 100, top: 80},\r\n                animation: { startup: true, duration: 1200, easing: 'out' },\r\n                sizeAxis: {minSize: 10, maxSize: 40}\r\n            };\r\n\r\n            var chart = new google.visualization.BubbleChart(document.getElementById('chart4'));\r\n            chart.draw(data, options);\r\n        }\r\n\r\n        window.addEventListener('resize', drawAllCharts);\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Infograf\u00eda Caf\u00e9 Nari\u00f1o &#8211; La Mejor Taza \u2615 \u2615 \u2615 \u2615 \ud83c\udfc6 LA MEJOR TAZA Caf\u00e9 Nari\u00f1o &#8211; Datos Clave [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","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":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","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-2841","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/pages\/2841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/comments?post=2841"}],"version-history":[{"count":25,"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/pages\/2841\/revisions"}],"predecessor-version":[{"id":2872,"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/pages\/2841\/revisions\/2872"}],"wp:attachment":[{"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/media?parent=2841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}