{"id":320,"date":"2026-04-18T20:27:32","date_gmt":"2026-04-18T23:27:32","guid":{"rendered":"https:\/\/cafearte.art\/home\/?page_id=320"},"modified":"2026-04-18T20:47:50","modified_gmt":"2026-04-18T23:47:50","slug":"cafes-por-origen","status":"publish","type":"page","link":"https:\/\/cafearte.art\/home\/cafes-por-origen\/","title":{"rendered":"Caf\u00e9s por origen"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"320\" class=\"elementor elementor-320\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79fb9e2 e-flex e-con-boxed e-con e-parent\" data-id=\"79fb9e2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c99ab9 elementor-widget elementor-widget-html\" data-id=\"0c99ab9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- GLOBO TERR\u00c1QUEO 3D INTERACTIVO - OR\u00cdGENES DEL CAF\u00c9 -->\r\n<div id=\"coffee-globe-container\" style=\"\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    box-shadow: 0 20px 60px rgba(0,0,0,0.5);\r\n    position: relative;\r\n\">\r\n    <!-- Header -->\r\n    <div style=\"\r\n        padding: 30px;\r\n        text-align: center;\r\n        background: rgba(255,255,255,0.05);\r\n        backdrop-filter: blur(10px);\r\n    \">\r\n        <h2 style=\"\r\n            color: #fff;\r\n            font-size: 36px;\r\n            font-weight: 700;\r\n            margin: 0 0 10px 0;\r\n            text-shadow: 2px 2px 10px rgba(0,0,0,0.5);\r\n        \">\ud83c\udf0d Nuestros Or\u00edgenes<\/h2>\r\n        <p style=\"\r\n            color: #b8c5d6;\r\n            font-size: 16px;\r\n            margin: 0;\r\n        \">Explora los mejores caf\u00e9s del mundo. Rota el globo y haz clic en cada regi\u00f3n.<\/p>\r\n    <\/div>\r\n\r\n    <!-- Canvas del globo -->\r\n    <div id=\"globe-canvas\" style=\"\r\n        width: 100%;\r\n        height: 600px;\r\n        position: relative;\r\n        cursor: grab;\r\n    \"><\/div>\r\n\r\n    <!-- Panel de informaci\u00f3n -->\r\n    <div id=\"info-panel\" style=\"\r\n        position: absolute;\r\n        bottom: 30px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        background: rgba(0,0,0,0.85);\r\n        backdrop-filter: blur(20px);\r\n        border: 2px solid rgba(255,255,255,0.2);\r\n        border-radius: 15px;\r\n        padding: 20px 30px;\r\n        min-width: 300px;\r\n        max-width: 400px;\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n        pointer-events: none;\r\n    \">\r\n        <h3 id=\"region-name\" style=\"\r\n            color: #fff;\r\n            font-size: 24px;\r\n            font-weight: 700;\r\n            margin: 0 0 10px 0;\r\n        \"><\/h3>\r\n        <p id=\"region-description\" style=\"\r\n            color: #b8c5d6;\r\n            font-size: 14px;\r\n            line-height: 1.6;\r\n            margin: 0 0 15px 0;\r\n        \"><\/p>\r\n        <a id=\"region-link\" href=\"#\" style=\"\r\n            display: inline-block;\r\n            background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);\r\n            color: #fff;\r\n            padding: 10px 25px;\r\n            border-radius: 20px;\r\n            text-decoration: none;\r\n            font-weight: 600;\r\n            font-size: 14px;\r\n            transition: all 0.3s ease;\r\n        \">Explorar Caf\u00e9s \u2192<\/a>\r\n    <\/div>\r\n\r\n    <!-- Controles -->\r\n    <div style=\"\r\n        padding: 20px;\r\n        text-align: center;\r\n        background: rgba(255,255,255,0.03);\r\n        border-top: 1px solid rgba(255,255,255,0.1);\r\n    \">\r\n        <p style=\"\r\n            color: #7a8aa3;\r\n            font-size: 13px;\r\n            margin: 0;\r\n        \">\ud83d\udca1 Arrastra para rotar | Scroll para zoom | Clic en los marcadores para m\u00e1s informaci\u00f3n<\/p>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n\r\n<script>\r\n\/\/ Configuraci\u00f3n del globo\r\nconst container = document.getElementById('globe-canvas');\r\nconst infoPanel = document.getElementById('info-panel');\r\nconst regionName = document.getElementById('region-name');\r\nconst regionDescription = document.getElementById('region-description');\r\nconst regionLink = document.getElementById('region-link');\r\n\r\n\/\/ Datos de las regiones\r\nconst coffeeRegions = [\r\n    {\r\n        name: 'Colombia',\r\n        lat: 4.5709,\r\n        lon: -74.2973,\r\n        title: '\ud83c\udde8\ud83c\uddf4 Colombia',\r\n        description: 'Caf\u00e9s de altura con notas achocolatadas, florales y afrutadas. Reconocidos mundialmente por su balance perfecto.',\r\n        color: 0xffd700,\r\n        url: 'URL_CATEGORIA_COLOMBIA'\r\n    },\r\n    {\r\n        name: 'Antioquia',\r\n        lat: 6.2476,\r\n        lon: -75.5658,\r\n        title: '\u2615 Antioquia',\r\n        description: 'Cuerpo medio, notas achocolatadas y dulzor natural. El coraz\u00f3n cafetero de Colombia.',\r\n        color: 0x8b4513,\r\n        url: 'https:\/\/cafearte.art\/home\/bolivar-y-antioquia\/'\r\n    },\r\n    {\r\n        name: 'Huila',\r\n        lat: 2.5359,\r\n        lon: -75.5277,\r\n        title: '\ud83c\udf38 Huila',\r\n        description: 'Balanceado, floral y afrutado. La regi\u00f3n m\u00e1s premiada de Colombia.',\r\n        color: 0x32cd32,\r\n        url: 'https:\/\/cafearte.art\/home\/huila\/'\r\n    },\r\n    {\r\n        name: 'Nari\u00f1o',\r\n        lat: 1.2136,\r\n        lon: -77.2811,\r\n        title: '\u2728 Nari\u00f1o',\r\n        description: 'Dulce, brillante y complejo. Caf\u00e9s de altura extrema con perfiles \u00fanicos.',\r\n        color: 0xff1493,\r\n        url: 'https:\/\/cafearte.art\/home\/narino\/'\r\n    },\r\n    {\r\n        name: 'Brasil',\r\n        lat: -15.7975,\r\n        lon: -47.8919,\r\n        title: '\ud83c\udde7\ud83c\uddf7 Brasil',\r\n        description: 'El mayor productor mundial. Caf\u00e9s con cuerpo denso, notas de nuez y chocolate.',\r\n        color: 0x00ff00,\r\n        url: 'https:\/\/cafearte.art\/home\/brazil\/'\r\n    },\r\n    {\r\n        name: 'Italia',\r\n        lat: 41.9028,\r\n        lon: 12.4964,\r\n        title: '\ud83c\uddee\ud83c\uddf9 Italia',\r\n        description: 'Maestros del espresso. Blends perfectos para una experiencia italiana aut\u00e9ntica.',\r\n        color: 0xff0000,\r\n        url: 'https:\/\/cafearte.art\/home\/italia\/'\r\n    }\r\n];\r\n\r\n\/\/ Configurar escena\r\nconst scene = new THREE.Scene();\r\nconst camera = new THREE.PerspectiveCamera(\r\n    45,\r\n    container.clientWidth \/ container.clientHeight,\r\n    0.1,\r\n    1000\r\n);\r\ncamera.position.z = 300;\r\n\r\nconst renderer = new THREE.WebGLRenderer({ \r\n    antialias: true, \r\n    alpha: true \r\n});\r\nrenderer.setSize(container.clientWidth, container.clientHeight);\r\nrenderer.setClearColor(0x0a0e27, 1);\r\ncontainer.appendChild(renderer.domElement);\r\n\r\n\/\/ Crear el globo terr\u00e1queo\r\nconst geometry = new THREE.SphereGeometry(100, 64, 64);\r\n\r\n\/\/ Textura de la Tierra\r\nconst textureLoader = new THREE.TextureLoader();\r\nconst earthTexture = textureLoader.load(\r\n    'https:\/\/raw.githubusercontent.com\/turban\/webgl-earth\/master\/images\/2_no_clouds_4k.jpg',\r\n    () => { animate(); }\r\n);\r\n\r\nconst material = new THREE.MeshPhongMaterial({\r\n    map: earthTexture,\r\n    bumpScale: 0.3,\r\n    shininess: 15\r\n});\r\n\r\nconst globe = new THREE.Mesh(geometry, material);\r\nscene.add(globe);\r\n\r\n\/\/ Iluminaci\u00f3n\r\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.6);\r\nscene.add(ambientLight);\r\n\r\nconst directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\r\ndirectionalLight.position.set(5, 3, 5);\r\nscene.add(directionalLight);\r\n\r\n\/\/ Luz de punto para brillo\r\nconst pointLight = new THREE.PointLight(0xffffff, 0.5);\r\npointLight.position.set(-50, 50, 50);\r\nscene.add(pointLight);\r\n\r\n\/\/ Crear marcadores\r\nconst markers = [];\r\nconst markerGroup = new THREE.Group();\r\nscene.add(markerGroup);\r\n\r\ncoffeeRegions.forEach(region => {\r\n    \/\/ Convertir coordenadas geogr\u00e1ficas a 3D\r\n    const phi = (90 - region.lat) * (Math.PI \/ 180);\r\n    const theta = (region.lon + 180) * (Math.PI \/ 180);\r\n    const radius = 100;\r\n\r\n    const x = -(radius * Math.sin(phi) * Math.cos(theta));\r\n    const y = radius * Math.cos(phi);\r\n    const z = radius * Math.sin(phi) * Math.sin(theta);\r\n\r\n    \/\/ Crear marcador (pin)\r\n    const markerGeometry = new THREE.SphereGeometry(3, 16, 16);\r\n    const markerMaterial = new THREE.MeshBasicMaterial({ \r\n        color: region.color,\r\n        emissive: region.color,\r\n        emissiveIntensity: 0.5\r\n    });\r\n    const marker = new THREE.Mesh(markerGeometry, markerMaterial);\r\n    marker.position.set(x, y, z);\r\n    marker.userData = region;\r\n    \r\n    \/\/ Anillo alrededor del marcador\r\n    const ringGeometry = new THREE.RingGeometry(4, 5, 32);\r\n    const ringMaterial = new THREE.MeshBasicMaterial({ \r\n        color: region.color, \r\n        side: THREE.DoubleSide,\r\n        transparent: true,\r\n        opacity: 0.6\r\n    });\r\n    const ring = new THREE.Mesh(ringGeometry, ringMaterial);\r\n    ring.position.set(x, y, z);\r\n    ring.lookAt(0, 0, 0);\r\n    \r\n    markerGroup.add(marker);\r\n    markerGroup.add(ring);\r\n    markers.push({ marker, ring, data: region });\r\n    \r\n    \/\/ Animaci\u00f3n de pulso\r\n    marker.userData.pulseDirection = 1;\r\n});\r\n\r\n\/\/ Control de rotaci\u00f3n con mouse\r\nlet isDragging = false;\r\nlet previousMousePosition = { x: 0, y: 0 };\r\nlet rotation = { x: 0, y: 0 };\r\nlet targetRotation = { x: 0, y: 0 };\r\n\r\ncontainer.addEventListener('mousedown', (e) => {\r\n    isDragging = true;\r\n    container.style.cursor = 'grabbing';\r\n});\r\n\r\ncontainer.addEventListener('mousemove', (e) => {\r\n    if (isDragging) {\r\n        const deltaMove = {\r\n            x: e.offsetX - previousMousePosition.x,\r\n            y: e.offsetY - previousMousePosition.y\r\n        };\r\n        \r\n        targetRotation.y += deltaMove.x * 0.005;\r\n        targetRotation.x += deltaMove.y * 0.005;\r\n    }\r\n    previousMousePosition = { x: e.offsetX, y: e.offsetY };\r\n});\r\n\r\ncontainer.addEventListener('mouseup', () => {\r\n    isDragging = false;\r\n    container.style.cursor = 'grab';\r\n});\r\n\r\n\/\/ Zoom con scroll\r\ncontainer.addEventListener('wheel', (e) => {\r\n    e.preventDefault();\r\n    camera.position.z += e.deltaY * 0.1;\r\n    camera.position.z = Math.max(150, Math.min(400, camera.position.z));\r\n});\r\n\r\n\/\/ Click en marcadores\r\nconst raycaster = new THREE.Raycaster();\r\nconst mouse = new THREE.Vector2();\r\n\r\ncontainer.addEventListener('click', (e) => {\r\n    const rect = container.getBoundingClientRect();\r\n    mouse.x = ((e.clientX - rect.left) \/ container.clientWidth) * 2 - 1;\r\n    mouse.y = -((e.clientY - rect.top) \/ container.clientHeight) * 2 + 1;\r\n\r\n    raycaster.setFromCamera(mouse, camera);\r\n    const intersects = raycaster.intersectObjects(\r\n        markers.map(m => m.marker)\r\n    );\r\n\r\n    if (intersects.length > 0) {\r\n        const region = intersects[0].object.userData;\r\n        showRegionInfo(region);\r\n    }\r\n});\r\n\r\n\/\/ Mostrar informaci\u00f3n de regi\u00f3n\r\nfunction showRegionInfo(region) {\r\n    regionName.textContent = region.title;\r\n    regionDescription.textContent = region.description;\r\n    regionLink.href = region.url;\r\n    infoPanel.style.opacity = '1';\r\n    infoPanel.style.pointerEvents = 'auto';\r\n    \r\n    setTimeout(() => {\r\n        infoPanel.style.opacity = '0';\r\n        infoPanel.style.pointerEvents = 'none';\r\n    }, 5000);\r\n}\r\n\r\n\/\/ Auto-rotaci\u00f3n suave\r\nlet autoRotate = true;\r\ncontainer.addEventListener('mouseenter', () => autoRotate = false);\r\ncontainer.addEventListener('mouseleave', () => autoRotate = true);\r\n\r\n\/\/ Animaci\u00f3n\r\nfunction animate() {\r\n    requestAnimationFrame(animate);\r\n\r\n    \/\/ Rotaci\u00f3n suave\r\n    if (autoRotate && !isDragging) {\r\n        targetRotation.y += 0.001;\r\n    }\r\n    \r\n    rotation.x += (targetRotation.x - rotation.x) * 0.05;\r\n    rotation.y += (targetRotation.y - rotation.y) * 0.05;\r\n    \r\n    globe.rotation.x = rotation.x;\r\n    globe.rotation.y = rotation.y;\r\n    markerGroup.rotation.x = rotation.x;\r\n    markerGroup.rotation.y = rotation.y;\r\n\r\n    \/\/ Animaci\u00f3n de pulso en marcadores\r\n    markers.forEach(({ marker, ring }) => {\r\n        const scale = marker.scale.x;\r\n        if (scale > 1.3) marker.userData.pulseDirection = -1;\r\n        if (scale < 1.0) marker.userData.pulseDirection = 1;\r\n        \r\n        marker.scale.x += 0.01 * marker.userData.pulseDirection;\r\n        marker.scale.y += 0.01 * marker.userData.pulseDirection;\r\n        marker.scale.z += 0.01 * marker.userData.pulseDirection;\r\n        \r\n        ring.scale.x += 0.008 * marker.userData.pulseDirection;\r\n        ring.scale.y += 0.008 * marker.userData.pulseDirection;\r\n    });\r\n\r\n    renderer.render(scene, camera);\r\n}\r\n\r\n\/\/ Responsive\r\nwindow.addEventListener('resize', () => {\r\n    camera.aspect = container.clientWidth \/ container.clientHeight;\r\n    camera.updateProjectionMatrix();\r\n    renderer.setSize(container.clientWidth, container.clientHeight);\r\n});\r\n\r\n\/\/ Iniciar animaci\u00f3n\r\nanimate();\r\n<\/script>\r\n\r\n<style>\r\n#coffee-globe-container canvas {\r\n    display: block;\r\n    width: 100% !important;\r\n    height: 100% !important;\r\n}\r\n\r\n#region-link:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 5px 20px rgba(139,69,19,0.4);\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 768px) {\r\n    #globe-canvas {\r\n        height: 400px !important;\r\n    }\r\n    \r\n    #info-panel {\r\n        bottom: 10px;\r\n        left: 10px;\r\n        right: 10px;\r\n        transform: none;\r\n        min-width: auto;\r\n    }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fb41657 e-flex e-con-boxed e-con e-parent\" data-id=\"fb41657\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t\t\t<h2 \n\t\tdata-interaction-id=\"92133cd\" \n\t\tclass=\"e-heading-base\" \n\t\t \n\t\t\n\t>\n\t\n\t\t\tColombia\n\t\t<\/h2>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b63188d e-grid e-con-boxed e-con e-parent\" data-id=\"b63188d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ca8fe3b elementor-widget elementor-widget-html\" data-id=\"ca8fe3b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- TARJETA 1: BOL\u00cdVAR Y ANTIOQUIA -->\r\n<div class=\"region-card\" style=\"\r\n    background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%);\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.3);\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    cursor: pointer;\r\n    position: relative;\r\n\">\r\n    <div class=\"card-image\" style=\"\r\n        height: 250px;\r\n        background: url('URL_IMAGEN_BOLIVAR_ANTIOQUIA') center\/cover;\r\n        position: relative;\r\n    \">\r\n        <div style=\"\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%);\r\n        \"><\/div>\r\n        <div style=\"\r\n            position: absolute;\r\n            bottom: 20px;\r\n            left: 20px;\r\n            z-index: 2;\r\n        \">\r\n            <h3 style=\"\r\n                color: #fff;\r\n                font-size: 28px;\r\n                font-weight: 700;\r\n                margin: 0 0 5px 0;\r\n                text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\r\n            \">Bol\u00edvar & Antioquia<\/h3>\r\n            <p style=\"\r\n                color: #f4d03f;\r\n                font-size: 14px;\r\n                margin: 0;\r\n                font-weight: 500;\r\n                text-transform: uppercase;\r\n                letter-spacing: 1px;\r\n            \">\ud83d\uddfa\ufe0f Regi\u00f3n Norte<\/p>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"card-content\" style=\"\r\n        padding: 25px;\r\n        background: #fff;\r\n    \">\r\n        <div style=\"\r\n            display: flex;\r\n            gap: 10px;\r\n            margin-bottom: 15px;\r\n            flex-wrap: wrap;\r\n        \">\r\n            <span style=\"\r\n                background: #8b4513;\r\n                color: #fff;\r\n                padding: 5px 12px;\r\n                border-radius: 20px;\r\n                font-size: 12px;\r\n                font-weight: 600;\r\n            \">\ud83c\udf6b Achocolatado<\/span>\r\n            <span style=\"\r\n                background: #d4a574;\r\n                color: #2c1810;\r\n                padding: 5px 12px;\r\n                border-radius: 20px;\r\n                font-size: 12px;\r\n                font-weight: 600;\r\n            \">\u2696\ufe0f Cuerpo Medio<\/span>\r\n        <\/div>\r\n        \r\n        <p style=\"\r\n            color: #555;\r\n            font-size: 15px;\r\n            line-height: 1.6;\r\n            margin-bottom: 20px;\r\n        \">\r\n            Caf\u00e9s con <strong>cuerpo medio<\/strong> y deliciosas <strong>notas achocolatadas<\/strong>. \r\n            Perfectos para quienes buscan un caf\u00e9 equilibrado con dulzor natural.\r\n        <\/p>\r\n        \r\n        <a href=\"https:\/\/cafearte.art\/home\/bolivar-y-antioquia\/\" style=\"\r\n            display: inline-block;\r\n            background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);\r\n            color: #fff;\r\n            padding: 12px 30px;\r\n            border-radius: 25px;\r\n            text-decoration: none;\r\n            font-weight: 600;\r\n            font-size: 14px;\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 4px 15px rgba(139,69,19,0.3);\r\n        \" onmouseover=\"this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(139,69,19,0.4)'\" \r\n           onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(139,69,19,0.3)'\">\r\n            Explorar Caf\u00e9s \u2192\r\n        <\/a>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.region-card:hover {\r\n    transform: translateY(-10px);\r\n    box-shadow: 0 15px 40px rgba(0,0,0,0.4);\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4cf6c83 elementor-widget elementor-widget-html\" data-id=\"4cf6c83\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- TARJETA 2: HUILA -->\r\n<div class=\"region-card\" style=\"\r\n    background: linear-gradient(135deg, #1a472a 0%, #2d5a3d 100%);\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.3);\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    cursor: pointer;\r\n    position: relative;\r\n\">\r\n    <div class=\"card-image\" style=\"\r\n        height: 250px;\r\n        background: url('URL_IMAGEN_HUILA') center\/cover;\r\n        position: relative;\r\n    \">\r\n        <div style=\"\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%);\r\n        \"><\/div>\r\n        <div style=\"\r\n            position: absolute;\r\n            bottom: 20px;\r\n            left: 20px;\r\n            z-index: 2;\r\n        \">\r\n            <h3 style=\"\r\n                color: #fff;\r\n                font-size: 28px;\r\n                font-weight: 700;\r\n                margin: 0 0 5px 0;\r\n                text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\r\n            \">Huila<\/h3>\r\n            <p style=\"\r\n                color: #90ee90;\r\n                font-size: 14px;\r\n                margin: 0;\r\n                font-weight: 500;\r\n                text-transform: uppercase;\r\n                letter-spacing: 1px;\r\n            \">\ud83d\uddfa\ufe0f Regi\u00f3n Sur<\/p>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"card-content\" style=\"\r\n        padding: 25px;\r\n        background: #fff;\r\n    \">\r\n        <div style=\"\r\n            display: flex;\r\n            gap: 10px;\r\n            margin-bottom: 15px;\r\n            flex-wrap: wrap;\r\n        \">\r\n            <span style=\"\r\n                background: #228b22;\r\n                color: #fff;\r\n                padding: 5px 12px;\r\n                border-radius: 20px;\r\n                font-size: 12px;\r\n                font-weight: 600;\r\n            \">\ud83c\udf38 Floral<\/span>\r\n            <span style=\"\r\n                background: #ff6b6b;\r\n                color: #fff;\r\n                padding: 5px 12px;\r\n                border-radius: 20px;\r\n                font-size: 12px;\r\n                font-weight: 600;\r\n            \">\ud83c\udf52 Afrutado<\/span>\r\n            <span style=\"\r\n                background: #ffd93d;\r\n                color: #2c1810;\r\n                padding: 5px 12px;\r\n                border-radius: 20px;\r\n                font-size: 12px;\r\n                font-weight: 600;\r\n            \">\u2696\ufe0f Balanceado<\/span>\r\n        <\/div>\r\n        \r\n        <p style=\"\r\n            color: #555;\r\n            font-size: 15px;\r\n            line-height: 1.6;\r\n            margin-bottom: 20px;\r\n        \">\r\n            Caf\u00e9s <strong>balanceados<\/strong> con perfiles <strong>florales y afrutados<\/strong>. \r\n            La regi\u00f3n m\u00e1s reconocida de Colombia por su calidad consistente.\r\n        <\/p>\r\n        \r\n        <a href=\"https:\/\/cafearte.art\/home\/huila\/\" style=\"\r\n            display: inline-block;\r\n            background: linear-gradient(135deg, #228b22 0%, #32cd32 100%);\r\n            color: #fff;\r\n            padding: 12px 30px;\r\n            border-radius: 25px;\r\n            text-decoration: none;\r\n            font-weight: 600;\r\n            font-size: 14px;\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 4px 15px rgba(34,139,34,0.3);\r\n        \" onmouseover=\"this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(34,139,34,0.4)'\" \r\n           onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(34,139,34,0.3)'\">\r\n            Explorar Caf\u00e9s \u2192\r\n        <\/a>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.region-card:hover {\r\n    transform: translateY(-10px);\r\n    box-shadow: 0 15px 40px rgba(0,0,0,0.4);\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-041522d elementor-widget elementor-widget-html\" data-id=\"041522d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- TARJETA 3: NARI\u00d1O -->\r\n<div class=\"region-card\" style=\"\r\n    background: linear-gradient(135deg, #6a1b4d 0%, #8e2566 100%);\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.3);\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    cursor: pointer;\r\n    position: relative;\r\n\">\r\n    <div class=\"card-image\" style=\"\r\n        height: 250px;\r\n        background: url('URL_IMAGEN_NARINO') center\/cover;\r\n        position: relative;\r\n    \">\r\n        <div style=\"\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%);\r\n        \"><\/div>\r\n        <div style=\"\r\n            position: absolute;\r\n            bottom: 20px;\r\n            left: 20px;\r\n            z-index: 2;\r\n        \">\r\n            <h3 style=\"\r\n                color: #fff;\r\n                font-size: 28px;\r\n                font-weight: 700;\r\n                margin: 0 0 5px 0;\r\n                text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\r\n            \">Nari\u00f1o<\/h3>\r\n            <p style=\"\r\n                color: #ff69b4;\r\n                font-size: 14px;\r\n                margin: 0;\r\n                font-weight: 500;\r\n                text-transform: uppercase;\r\n                letter-spacing: 1px;\r\n            \">\ud83d\uddfa\ufe0f Regi\u00f3n Suroeste<\/p>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"card-content\" style=\"\r\n        padding: 25px;\r\n        background: #fff;\r\n    \">\r\n        <div style=\"\r\n            display: flex;\r\n            gap: 10px;\r\n            margin-bottom: 15px;\r\n            flex-wrap: wrap;\r\n        \">\r\n            <span style=\"\r\n                background: #ff1493;\r\n                color: #fff;\r\n                padding: 5px 12px;\r\n                border-radius: 20px;\r\n                font-size: 12px;\r\n                font-weight: 600;\r\n            \">\ud83c\udf6f Dulce<\/span>\r\n            <span style=\"\r\n                background: #ffa500;\r\n                color: #fff;\r\n                padding: 5px 12px;\r\n                border-radius: 20px;\r\n                font-size: 12px;\r\n                font-weight: 600;\r\n            \">\u2728 Brillante<\/span>\r\n            <span style=\"\r\n                background: #9370db;\r\n                color: #fff;\r\n                padding: 5px 12px;\r\n                border-radius: 20px;\r\n                font-size: 12px;\r\n                font-weight: 600;\r\n            \">\ud83c\udfad Complejo<\/span>\r\n        <\/div>\r\n        \r\n        <p style=\"\r\n            color: #555;\r\n            font-size: 15px;\r\n            line-height: 1.6;\r\n            margin-bottom: 20px;\r\n        \">\r\n            Caf\u00e9s de <strong>altura extrema<\/strong> con perfiles <strong>dulces, brillantes y complejos<\/strong>. \r\n            Para paladares exigentes que buscan experiencias \u00fanicas.\r\n        <\/p>\r\n        \r\n        <a href=\"https:\/\/cafearte.art\/home\/narino\/\" style=\"\r\n            display: inline-block;\r\n            background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);\r\n            color: #fff;\r\n            padding: 12px 30px;\r\n            border-radius: 25px;\r\n            text-decoration: none;\r\n            font-weight: 600;\r\n            font-size: 14px;\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 4px 15px rgba(255,20,147,0.3);\r\n        \" onmouseover=\"this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(255,20,147,0.4)'\" \r\n           onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(255,20,147,0.3)'\">\r\n            Explorar Caf\u00e9s \u2192\r\n        <\/a>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.region-card:hover {\r\n    transform: translateY(-10px);\r\n    box-shadow: 0 15px 40px rgba(0,0,0,0.4);\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-52526c8 e-flex e-con-boxed e-con e-parent\" data-id=\"52526c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t\t\t<h2 \n\t\tdata-interaction-id=\"c7abd40\" \n\t\tclass=\"e-heading-base\" \n\t\t \n\t\t\n\t>\n\t\n\t\t\tBrazil\n\t\t<\/h2>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dbb52e7 e-flex e-con-boxed e-con e-parent\" data-id=\"dbb52e7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-09a0b5d e-grid e-con-boxed e-con e-parent\" data-id=\"09a0b5d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\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>\ud83c\udf0d Nuestros Or\u00edgenes Explora los mejores caf\u00e9s del mundo. Rota el globo y haz clic en cada regi\u00f3n. Explorar Caf\u00e9s \u2192 \ud83d\udca1 Arrastra para rotar | Scroll para zoom | Clic en los marcadores para m\u00e1s informaci\u00f3n Colombia Bol\u00edvar &#038; Antioquia \ud83d\uddfa\ufe0f Regi\u00f3n Norte \ud83c\udf6b Achocolatado \u2696\ufe0f Cuerpo Medio Caf\u00e9s con cuerpo medio y deliciosas [&hellip;]<\/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-320","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Caf\u00e9s por origen - Cafe Arte<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cafearte.art\/home\/cafes-por-origen\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Caf\u00e9s por origen - Cafe Arte\" \/>\n<meta property=\"og:description\" content=\"\ud83c\udf0d Nuestros Or\u00edgenes Explora los mejores caf\u00e9s del mundo. Rota el globo y haz clic en cada regi\u00f3n. Explorar Caf\u00e9s \u2192 \ud83d\udca1 Arrastra para rotar | Scroll para zoom | Clic en los marcadores para m\u00e1s informaci\u00f3n Colombia Bol\u00edvar &#038; Antioquia \ud83d\uddfa\ufe0f Regi\u00f3n Norte \ud83c\udf6b Achocolatado \u2696\ufe0f Cuerpo Medio Caf\u00e9s con cuerpo medio y deliciosas [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cafearte.art\/home\/cafes-por-origen\/\" \/>\n<meta property=\"og:site_name\" content=\"Cafe Arte\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-18T23:47:50+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo estimado de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/cafes-por-origen\\\/\",\"url\":\"https:\\\/\\\/cafearte.art\\\/home\\\/cafes-por-origen\\\/\",\"name\":\"Caf\u00e9s por origen - Cafe Arte\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#website\"},\"datePublished\":\"2026-04-18T23:27:32+00:00\",\"dateModified\":\"2026-04-18T23:47:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/cafes-por-origen\\\/#breadcrumb\"},\"inLanguage\":\"es-CL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cafearte.art\\\/home\\\/cafes-por-origen\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/cafes-por-origen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/cafearte.art\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Caf\u00e9s por origen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#website\",\"url\":\"https:\\\/\\\/cafearte.art\\\/home\\\/\",\"name\":\"Cafe Arte\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cafearte.art\\\/home\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-CL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#organization\",\"name\":\"Cafe Arte\",\"url\":\"https:\\\/\\\/cafearte.art\\\/home\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-CL\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cafearte.art\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-LOGO.png\",\"contentUrl\":\"https:\\\/\\\/cafearte.art\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-LOGO.png\",\"width\":512,\"height\":512,\"caption\":\"Cafe Arte\"},\"image\":{\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/cafe.arte396\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Caf\u00e9s por origen - Cafe Arte","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cafearte.art\/home\/cafes-por-origen\/","og_locale":"es_ES","og_type":"article","og_title":"Caf\u00e9s por origen - Cafe Arte","og_description":"\ud83c\udf0d Nuestros Or\u00edgenes Explora los mejores caf\u00e9s del mundo. Rota el globo y haz clic en cada regi\u00f3n. Explorar Caf\u00e9s \u2192 \ud83d\udca1 Arrastra para rotar | Scroll para zoom | Clic en los marcadores para m\u00e1s informaci\u00f3n Colombia Bol\u00edvar &#038; Antioquia \ud83d\uddfa\ufe0f Regi\u00f3n Norte \ud83c\udf6b Achocolatado \u2696\ufe0f Cuerpo Medio Caf\u00e9s con cuerpo medio y deliciosas [&hellip;]","og_url":"https:\/\/cafearte.art\/home\/cafes-por-origen\/","og_site_name":"Cafe Arte","article_modified_time":"2026-04-18T23:47:50+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo estimado de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cafearte.art\/home\/cafes-por-origen\/","url":"https:\/\/cafearte.art\/home\/cafes-por-origen\/","name":"Caf\u00e9s por origen - Cafe Arte","isPartOf":{"@id":"https:\/\/cafearte.art\/home\/#website"},"datePublished":"2026-04-18T23:27:32+00:00","dateModified":"2026-04-18T23:47:50+00:00","breadcrumb":{"@id":"https:\/\/cafearte.art\/home\/cafes-por-origen\/#breadcrumb"},"inLanguage":"es-CL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cafearte.art\/home\/cafes-por-origen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cafearte.art\/home\/cafes-por-origen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/cafearte.art\/home\/"},{"@type":"ListItem","position":2,"name":"Caf\u00e9s por origen"}]},{"@type":"WebSite","@id":"https:\/\/cafearte.art\/home\/#website","url":"https:\/\/cafearte.art\/home\/","name":"Cafe Arte","description":"","publisher":{"@id":"https:\/\/cafearte.art\/home\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cafearte.art\/home\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-CL"},{"@type":"Organization","@id":"https:\/\/cafearte.art\/home\/#organization","name":"Cafe Arte","url":"https:\/\/cafearte.art\/home\/","logo":{"@type":"ImageObject","inLanguage":"es-CL","@id":"https:\/\/cafearte.art\/home\/#\/schema\/logo\/image\/","url":"https:\/\/cafearte.art\/wp-content\/uploads\/2026\/04\/cropped-LOGO.png","contentUrl":"https:\/\/cafearte.art\/wp-content\/uploads\/2026\/04\/cropped-LOGO.png","width":512,"height":512,"caption":"Cafe Arte"},"image":{"@id":"https:\/\/cafearte.art\/home\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/cafe.arte396\/"]}]}},"_links":{"self":[{"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/pages\/320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/comments?post=320"}],"version-history":[{"count":7,"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/pages\/320\/revisions"}],"predecessor-version":[{"id":362,"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/pages\/320\/revisions\/362"}],"wp:attachment":[{"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/media?parent=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}