{"id":1136,"date":"2020-03-03T08:45:24","date_gmt":"2020-03-03T08:45:24","guid":{"rendered":"https:\/\/ld-wp73.template-help.com\/wordpress\/prod_11340\/v3\/?page_id=16"},"modified":"2026-07-14T09:03:48","modified_gmt":"2026-07-14T15:03:48","slug":"productos","status":"publish","type":"page","link":"https:\/\/fundacioncovelo.hn\/master\/productos\/","title":{"rendered":"Nuestros Productos"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1136\" class=\"elementor elementor-1136\">\n\t\t\t\t<div class=\"elementor-element elementor-element-434527d e-con-full e-flex e-con e-parent\" data-id=\"434527d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c1a8a95 elementor-widget elementor-widget-html\" data-id=\"c1a8a95\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"covelo-ecosystem-app\" class=\"cov-eco-app\">\r\n    <style>\r\n        \/* ==========================================================================\r\n           TIPOGRAF\u00cdA Y VARIABLES GLOBALES\r\n           ========================================================================== *\/\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700&display=swap');\r\n\r\n        .cov-eco-app {\r\n            --font-family: 'Montserrat', sans-serif;\r\n            --cov-eco-node-motion-duration: 800ms;\r\n            --cov-eco-node-motion-easing: cubic-bezier(0.34, 1.56, 0.64, 1);\r\n\r\n            \/* ponytail: factor de overshoot m\u00e1ximo de la curva back-ease-out.\r\n               cubic-bezier(0.34, 1.56, 0.64, 1) tiene y(t) m\u00e1ximo \u2248 1.098 en t\u22480.6\r\n               (calculado num\u00e9ricamente: y(t) = 3t(1-t)\u00b2\u00b71.56 + 3t\u00b2(1-t) + t\u00b3).\r\n               Esto equivale a ~9.8% de overshoot sobre el valor final.\r\n               Usamos 0.10 (10%) como margen conservador para cubrir variaciones de subpixel. *\/\r\n            --cov-eco-node-overshoot-factor: 0.10;\r\n\r\n            \/* Colores Institucionales *\/\r\n            --color-primary: #1C0E66;\r\n            --color-primary-rgb: 28, 14, 102;\r\n            --color-secondary: #199178;\r\n            --color-secondary-rgb: 25, 145, 120;\r\n            --color-accent: #E39F1E;\r\n            --color-white: #FFFFFF;\r\n            \r\n            \/* Colores de Fondo y Texto *\/\r\n            --color-bg-light: #F8F9FA;\r\n            --color-text-main: #2D3748;\r\n            --color-text-muted: #718096;\r\n            \r\n            \/* Dimensiones y Espaciado *\/\r\n            \/* ponytail: orbit-size aumentado de 700px a 860px para absorber el overshoot\r\n               de la curva back-ease-out (~10%) sin causar scrollbars.\r\n               C\u00e1lculo: RADIUS_ACTIVE \u00d7 (1 + overshoot) + \u00bdnode + label + margen\r\n               = 260\u00d71.10 + 57.5 + 12 + 50(2 l\u00edneas texto) + 20(margen) \u2248 425px \u00d7 2 = 850px \u2192 860px *\/\r\n            --orbit-size: 860px;\r\n            --logo-size: 160px;\r\n            --node-size: 115px;\r\n            --mobile-card-width: 280px;\r\n\r\n            \/* Sombras Premium *\/\r\n            --shadow-soft: 0 10px 30px rgba(28, 14, 102, 0.08);\r\n            --shadow-hover: 0 20px 40px rgba(28, 14, 102, 0.15);\r\n            --shadow-panel: 0 20px 60px rgba(0, 0, 0, 0.2);\r\n\r\n            font-family: var(--font-family);\r\n            color: var(--color-text-main);\r\n            background-color: var(--color-white);\r\n            width: 100%;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 40px 20px;\r\n            box-sizing: border-box;\r\n            position: relative;\r\n            overflow-x: hidden;\r\n            overflow-y: visible;\r\n        }\r\n\r\n        .cov-eco-app * {\r\n            box-sizing: inherit;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           ENCABEZADO\r\n           ========================================================================== *\/\r\n        .cov-eco-header {\r\n            text-align: center;\r\n            max-width: 800px;\r\n            margin: 0 auto 50px auto;\r\n        }\r\n\r\n        .cov-eco-title {\r\n            font-size: 2rem;\r\n            font-weight: 700;\r\n            color: var(--color-primary);\r\n            letter-spacing: 1px;\r\n            margin-bottom: 16px;\r\n            text-transform: uppercase;\r\n        }\r\n\r\n        .cov-eco-subtitle {\r\n            font-size: 1.1rem;\r\n            font-weight: 400;\r\n            line-height: 1.6;\r\n            color: var(--color-text-muted);\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           INTRODUCCI\u00d3N\r\n           ========================================================================== *\/\r\n        .cov-eco-intro {\r\n            text-align: center;\r\n            max-width: 850px;\r\n            margin: 0 auto 80px auto;\r\n        }\r\n\r\n        .cov-eco-intro-title {\r\n            font-size: 1.5rem;\r\n            font-weight: 700;\r\n            color: var(--color-primary);\r\n            margin: 0 0 20px 0;\r\n            line-height: 1.3;\r\n        }\r\n\r\n        .cov-eco-intro-text {\r\n            font-size: 1.05rem;\r\n            font-weight: 400;\r\n            line-height: 1.7;\r\n            color: var(--color-text-muted);\r\n            \/* max-width: 700px; *\/\r\n            margin: 0 auto;\r\n            text-align: justify;\r\n        }\r\n\r\n        .cov-eco-intro-text strong {\r\n            color: var(--color-text-main);\r\n            font-weight: 600;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           TARJETAS DE MODELOS DE NEGOCIO\r\n           ========================================================================== *\/\r\n        .cov-eco-models {\r\n            margin: 0 auto 80px auto;\r\n            max-width: 900px;\r\n        }\r\n\r\n        .cov-eco-models-title {\r\n            font-size: 1.2rem;\r\n            font-weight: 600;\r\n            color: var(--color-text-muted);\r\n            text-transform: uppercase;\r\n            letter-spacing: 1.5px;\r\n            text-align: center;\r\n            margin: 0 0 32px 0;\r\n        }\r\n\r\n        .cov-eco-models-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 28px;\r\n        }\r\n\r\n        .cov-eco-model-card {\r\n            background: var(--color-white);\r\n            border-radius: 16px;\r\n            padding: 36px 32px 32px 32px;\r\n            border-top: 4px solid transparent;\r\n            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);\r\n            transition: transform 0.35s ease, box-shadow 0.35s ease;\r\n            position: relative;\r\n        }\r\n\r\n        .cov-eco-model-card:hover {\r\n            transform: translateY(-4px);\r\n            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 14px 36px rgba(0, 0, 0, 0.07);\r\n        }\r\n\r\n        \/* .cov-eco-model-card--tradicional {\r\n            border-top-color: #1C0E66;\r\n        }\r\n\r\n        .cov-eco-model-card--sostenible {\r\n            border-top-color: #199178;\r\n        } *\/\r\n\r\n        .cov-eco-model-card-icon {\r\n            font-size: 2rem;\r\n            margin-bottom: 16px;\r\n            display: block;\r\n        }\r\n\r\n        .cov-eco-model-card-title {\r\n            font-size: 1.15rem;\r\n            font-weight: 700;\r\n            color: var(--color-text-main);\r\n            margin: 0 0 12px 0;\r\n        }\r\n\r\n        .cov-eco-model-card-text {\r\n            font-size: 0.95rem;\r\n            font-weight: 400;\r\n            line-height: 1.6;\r\n            color: var(--color-text-muted);\r\n            margin: 0;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .cov-eco-models-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            .cov-eco-intro {\r\n                margin-bottom: 56px;\r\n            }\r\n            .cov-eco-models {\r\n                margin-bottom: 56px;\r\n            }\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           ETIQUETA DEL SELECTOR\r\n           ========================================================================== *\/\r\n        .cov-eco-selector-label {\r\n            font-family: var(--font-family);\r\n            font-size: 1.1rem;\r\n            font-weight: 500;\r\n            color: var(--color-text-muted);\r\n            text-align: center;\r\n            margin: 0 0 16px 0;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           ENCABEZADO DE TABLA COMPARATIVA\r\n           ========================================================================== *\/\r\n        .cov-eco-comparison-header {\r\n            text-align: center;\r\n            max-width: 700px;\r\n            margin: 0 auto 32px auto;\r\n        }\r\n\r\n        .cov-eco-comparison-header-title {\r\n            font-size: 1.35rem;\r\n            font-weight: 700;\r\n            color: var(--color-primary);\r\n            margin: 0 0 12px 0;\r\n            line-height: 1.3;\r\n        }\r\n\r\n        .cov-eco-comparison-header-subtitle {\r\n            font-size: 1rem;\r\n            font-weight: 400;\r\n            color: var(--color-text-muted);\r\n            line-height: 1.5;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           SELECTOR DE MODELO\r\n           ========================================================================== *\/\r\n        .cov-eco-controls {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            margin-bottom: 60px;\r\n            z-index: 10;\r\n            position: relative;\r\n        }\r\n\r\n        .cov-eco-segment-control {\r\n            display: inline-flex;\r\n            background: rgba(28, 14, 102, 0.05);\r\n            padding: 6px;\r\n            border-radius: 40px;\r\n            position: relative;\r\n            margin-bottom: 24px;\r\n        }\r\n\r\n        .cov-eco-segment-btn {\r\n            background: transparent;\r\n            border: 0;\r\n            padding: 12px 32px;\r\n            font-family: var(--font-family);\r\n            font-size: 0.9rem;\r\n            font-weight: 600;\r\n            color: var(--color-text-muted);\r\n            cursor: pointer;\r\n            border-radius: 30px;\r\n            position: relative;\r\n            z-index: 2;\r\n            transition: color 0.4s ease, box-shadow 0.4s ease;\r\n            letter-spacing: 0.5px;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .cov-eco-segment-btn.active {\r\n            color: var(--color-white);\r\n        }\r\n\r\n            .cov-eco-segment-btn:hover {\r\n    background: rgba(28, 14, 102, 0.1);\r\n    box-shadow: none;\r\n    outline: none;\r\n    color: var(--color-text-main);\r\n}\r\n\r\n.cov-eco-segment-btn.active:hover {\r\n    background: transparent;\r\n    color: var(--color-white);\r\n}\r\n\r\n        .cov-eco-segment-indicator {\r\n            position: absolute;\r\n            top: 6px;\r\n            bottom: 6px;\r\n            left: 6px;\r\n            width: 120px; \/* Din\u00e1mico v\u00eda JS *\/\r\n            background: var(--color-primary);\r\n            border-radius: 30px;\r\n            z-index: 1;\r\n            transition: background-color 0.2s ease;\r\n            will-change: transform, width;\r\n            box-shadow: 0 4px 15px rgba(28, 14, 102, 0.2);\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           TABLA COMPARATIVA EST\u00c1TICA\r\n           ========================================================================== *\/\r\n        .cov-eco-comparison {\r\n            width: 100%;\r\n            max-width: 620px;\r\n            margin: 48px auto 56px auto;\r\n            border-collapse: separate;\r\n            border-spacing: 0;\r\n            font-size: 1rem;\r\n            line-height: 1.5;\r\n            border-radius: 14px;\r\n            overflow: hidden;\r\n            box-shadow: var(--shadow-soft);\r\n        }\r\n\r\n        .cov-eco-comparison thead th {\r\n            padding: 14px 18px;\r\n            font-weight: 700;\r\n            font-size: 1rem;\r\n            letter-spacing: 0.4px;\r\n            text-align: center;\r\n            color: var(--color-white);\r\n        }\r\n\r\n        .cov-eco-comparison thead th:first-child {\r\n            background: #E39F1E;\r\n        }\r\n\r\n        .cov-eco-comparison thead th.trad-col {\r\n            background: var(--color-primary);\r\n            \/* border-radius: 14px 0 0 0; *\/\r\n        }\r\n\r\n        .cov-eco-comparison thead th.sost-col {\r\n            background: var(--color-secondary);\r\n            border-radius: 0 14px 0 0;\r\n        }\r\n\r\n        .cov-eco-comparison tbody td {\r\n            padding: 14px 18px;\r\n            vertical-align: top;\r\n            border-bottom: 1px solid rgba(0,0,0,0.05);\r\n            color: var(--color-text-main);\r\n            text-align: left;\r\n        }\r\n\r\n        .cov-eco-comparison tbody td:first-child {\r\n            font-weight: 600;\r\n            color: var(--color-text-muted);\r\n            background: rgba(28, 14, 102, 0.03);\r\n            text-align: center;\r\n            padding-right: 16px;\r\n        }\r\n\r\n        .cov-eco-comparison tbody tr:last-child td:first-child {\r\n            border-radius: 0 0 0 14px;\r\n        }\r\n\r\n        .cov-eco-comparison tbody tr:last-child td:last-child {\r\n            border-radius: 0 0 14px 0;\r\n        }\r\n\r\n        .cov-eco-comparison tbody tr:last-child td {\r\n            border-bottom: none;\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            .cov-eco-comparison {\r\n                font-size: 0.72rem;\r\n            }\r\n            .cov-eco-comparison thead th {\r\n                padding: 10px 10px;\r\n                font-size: 0.75rem;\r\n            }\r\n            .cov-eco-comparison tbody td {\r\n                padding: 8px 10px;\r\n            }\r\n            .cov-eco-comparison tbody td:first-child {\r\n                padding-right: 8px;\r\n            }\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           ECOSISTEMA ORBITAL (DESKTOP \/ TABLET)\r\n           ========================================================================== *\/\r\n        .cov-eco-orbit-wrapper {\r\n            position: relative;\r\n            width: 100%;\r\n            height: var(--orbit-size);\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* L\u00edneas de conexi\u00f3n SVG *\/\r\n        .cov-eco-svg-container {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: var(--orbit-size);\r\n            height: var(--orbit-size);\r\n            transform: translate(-50%, -50%);\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .cov-eco-line-group {\r\n            transform-origin: 0 0;\r\n            transition: transform var(--cov-eco-node-motion-duration) var(--cov-eco-node-motion-easing);\r\n        }\r\n\r\n        .cov-eco-connection-line {\r\n            stroke: rgba(28, 14, 102, 0.15);\r\n            stroke-width: 1.5px;\r\n            stroke-dasharray: 4 4;\r\n            transition: stroke 0.4s ease, stroke-width 0.4s ease, x2 var(--cov-eco-node-motion-duration) var(--cov-eco-node-motion-easing), y2 var(--cov-eco-node-motion-duration) var(--cov-eco-node-motion-easing), opacity var(--cov-eco-node-motion-duration) ease;\r\n        }\r\n\r\n        .cov-eco-line-group.active .cov-eco-connection-line {\r\n            stroke-width: 3px;\r\n            stroke-dasharray: none;\r\n        }\r\n\r\n        \/* Logo Central *\/\r\n        .cov-eco-center-logo {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            width: var(--logo-size);\r\n            height: var(--logo-size);\r\n            background: rgba(255, 255, 255, 0.8);\r\n            backdrop-filter: blur(10px);\r\n            border-radius: 50%;\r\n            z-index: 2;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            box-shadow: 0 0 40px rgba(28, 14, 102, 0.1);\r\n            animation: breathe 6s infinite ease-in-out;\r\n        }\r\n\r\n        @keyframes breathe {\r\n            0%, 100% { box-shadow: 0 0 40px rgba(28, 14, 102, 0.1); }\r\n            50% { box-shadow: 0 0 60px rgba(28, 14, 102, 0.2); }\r\n        }\r\n\r\n        .cov-eco-center-logo img {\r\n            width: 70%;\r\n            height: auto;\r\n            border-radius: 50%;\r\n            object-fit: contain;\r\n        }\r\n\r\n        .cov-eco-center-ring {\r\n            position: absolute;\r\n            top: -15px;\r\n            left: -15px;\r\n            right: -15px;\r\n            bottom: -15px;\r\n            border: 1px solid rgba(28, 14, 102, 0.1);\r\n            border-radius: 50%;\r\n            \/* La rotaci\u00f3n ahora es controlada por JS para sincronizar el efecto de brillo *\/\r\n            z-index: 1;\r\n        }\r\n        \r\n        .cov-eco-center-ring::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -4px; \/* Centrado exactamente sobre la l\u00ednea *\/\r\n            left: 50%;\r\n            width: 8px;\r\n            height: 8px;\r\n            background: var(--color-primary);\r\n            border-radius: 50%;\r\n            transform: translateX(-50%);\r\n            box-shadow: 0 0 10px var(--color-primary);\r\n        }\r\n\r\n        \/* Nodos de Productos *\/\r\n        .cov-eco-node {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: var(--node-size);\r\n            height: var(--node-size);\r\n            margin-top: calc(var(--node-size) \/ -2);\r\n            margin-left: calc(var(--node-size) \/ -2);\r\n            z-index: 3;\r\n            cursor: pointer;\r\n            transition: transform var(--cov-eco-node-motion-duration) var(--cov-eco-node-motion-easing), opacity 0.6s ease;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n\r\n        .cov-eco-node-icon-wrapper {\r\n            width: 100%;\r\n            height: 100%;\r\n            border-radius: 50%;\r\n            background: var(--color-white);\r\n            box-shadow: var(--shadow-soft);\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            position: relative;\r\n            transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;\r\n            border: 2px solid transparent;\r\n            overflow: hidden;\r\n            z-index: 2;\r\n        }\r\n\r\n        \/* Elemento pseudo para el efecto de brillo de barrido animado por JS *\/\r\n        .cov-eco-node-icon-wrapper::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -2px; left: -2px; right: -2px; bottom: -2px;\r\n            border-radius: 50%;\r\n            border: 2px solid var(--color-primary);\r\n            box-shadow: 0 0 25px var(--color-primary);\r\n            opacity: var(--glow-intensity, 0);\r\n            pointer-events: none;\r\n            z-index: -1;\r\n        }\r\n\r\n        .cov-eco-node[data-type=\"sostenible\"] .cov-eco-node-icon-wrapper::after {\r\n            border-color: var(--color-secondary);\r\n            box-shadow: 0 0 25px var(--color-secondary);\r\n        }\r\n\r\n        .cov-eco-node:hover .cov-eco-node-icon-wrapper {\r\n            transform: scale(1.15) !important;\r\n            box-shadow: var(--shadow-hover), 0 0 20px rgba(28, 14, 102, 0.4) !important;\r\n            border-color: var(--color-primary) !important;\r\n        }\r\n\r\n        .cov-eco-node[data-type=\"sostenible\"]:hover .cov-eco-node-icon-wrapper {\r\n            box-shadow: var(--shadow-hover), 0 0 20px rgba(25, 145, 120, 0.4) !important;\r\n            border-color: var(--color-secondary) !important;\r\n        }\r\n\r\n        \/* Pulse de entrada \u2014 sugiere interactividad al llegar a posici\u00f3n *\/\r\n        @keyframes cov-eco-node-pulse {\r\n            0%   { transform: scale(1); }\r\n            40%  { transform: scale(1.08); }\r\n            100% { transform: scale(1); }\r\n        }\r\n\r\n        .cov-eco-node--entered .cov-eco-node-icon-wrapper {\r\n            animation: cov-eco-node-pulse 500ms ease-out forwards;\r\n        }\r\n\r\n        \/* \u00cdcono \"+\" en hover \u2014 refuerza \"esto abre algo\" *\/\r\n        .cov-eco-node-icon-wrapper::before {\r\n            content: '+';\r\n            position: absolute;\r\n            bottom: 4px;\r\n            right: 10px;\r\n            font-size: 1.2rem;\r\n            font-weight: 700;\r\n            color: var(--color-primary);\r\n            opacity: 0;\r\n            transition: opacity 0.25s ease;\r\n            z-index: 3;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .cov-eco-node[data-type=\"sostenible\"] .cov-eco-node-icon-wrapper::before {\r\n            color: var(--color-secondary);\r\n        }\r\n\r\n        .cov-eco-node:hover .cov-eco-node-icon-wrapper::before {\r\n            opacity: 0.7;\r\n        }\r\n\r\n        .cov-eco-node-icon-wrapper img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n        }\r\n\r\n        .cov-eco-node-label {\r\n            position: absolute;\r\n            top: calc(100% + 12px);\r\n            width: 150px;\r\n            text-align: center;\r\n            font-size: 0.9rem;\r\n            font-weight: 600;\r\n            color: var(--color-text-main);\r\n            pointer-events: none;\r\n            transition: opacity 0.3s ease;\r\n            word-break: keep-all;\r\n            overflow-wrap: normal;\r\n            hyphens: none;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           TOOLTIP PREMIUM\r\n           ========================================================================== *\/\r\n        .cov-eco-tooltip {\r\n            position: fixed;\r\n            background: rgba(255, 255, 255, 0.95);\r\n            backdrop-filter: blur(15px);\r\n            border: 1px solid rgba(255, 255, 255, 0.5);\r\n            border-radius: 12px;\r\n            padding: 16px 20px;\r\n            width: 260px;\r\n            box-shadow: var(--shadow-hover);\r\n            pointer-events: none;\r\n            opacity: 0;\r\n            transform: translateY(10px);\r\n            transition: opacity 0.3s ease, transform 0.3s ease;\r\n            z-index: 100;\r\n            margin-top: -15px; \/* Offset to place above node *\/\r\n        }\r\n\r\n        .cov-eco-tooltip.show {\r\n            opacity: 1;\r\n            transform: translateY(-100%);\r\n        }\r\n\r\n        .cov-eco-tooltip-title {\r\n            font-size: 0.9rem;\r\n            font-weight: 700;\r\n            margin-bottom: 6px;\r\n        }\r\n\r\n        .cov-eco-tooltip[data-type=\"tradicional\"] .cov-eco-tooltip-title {\r\n            color: var(--color-primary);\r\n        }\r\n\r\n        .cov-eco-tooltip[data-type=\"sostenible\"] .cov-eco-tooltip-title {\r\n            color: var(--color-secondary);\r\n        }\r\n\r\n        .cov-eco-tooltip-desc {\r\n            font-size: 0.8rem;\r\n            color: var(--color-text-muted);\r\n            line-height: 1.4;\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           CARRUSEL M\u00d3VIL (Oculto en Desktop)\r\n           ========================================================================== *\/\r\n        .cov-eco-mobile-carousel {\r\n            display: none;\r\n            width: 100%;\r\n            padding: 20px 0;\r\n            overflow-x: auto;\r\n            scroll-snap-type: x mandatory;\r\n            scrollbar-width: none; \/* Firefox *\/\r\n        }\r\n\r\n        .cov-eco-mobile-carousel::-webkit-scrollbar {\r\n            display: none; \/* Chrome\/Safari *\/\r\n        }\r\n\r\n        .cov-eco-mobile-track {\r\n            display: flex;\r\n            gap: 16px;\r\n            \/* peek: padding lateral \u2248 (100vw - cardWidth) \/ 2 para que la primera\r\n               y \u00faltima card puedan hacer snap al centro *\/\r\n            padding: 0 11vw;\r\n        }\r\n\r\n        \/* ponytail: card con ancho relativo al viewport para efecto peek.\r\n           78vw deja ~11vw de la card vecina visible a cada lado. *\/\r\n        .cov-eco-mobile-card {\r\n            flex: 0 0 78vw;\r\n            max-width: 320px;\r\n            scroll-snap-align: center;\r\n            background: var(--color-white);\r\n            border-radius: 16px;\r\n            box-shadow: var(--shadow-soft);\r\n            border: 1px solid rgba(0,0,0,0.05);\r\n            cursor: pointer;\r\n            transition: transform 0.3s ease;\r\n            overflow: hidden;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .cov-eco-mobile-card:active {\r\n            transform: scale(0.98);\r\n        }\r\n\r\n        \/* ponytail: imagen banner full-width en la parte superior de la card *\/\r\n        .cov-eco-mobile-card-image {\r\n            width: 100%;\r\n            height: 160px;\r\n            object-fit: cover;\r\n            display: block;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .cov-eco-mobile-card-body {\r\n            padding: 20px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            flex-grow: 1;\r\n        }\r\n\r\n        .cov-eco-mobile-card-title {\r\n            font-size: 1rem;\r\n            font-weight: 700;\r\n            color: var(--color-primary);\r\n            margin-bottom: 8px;\r\n            line-height: 1.3;\r\n        }\r\n\r\n        .cov-eco-mobile-card-desc {\r\n            font-size: 0.85rem;\r\n            color: var(--color-text-muted);\r\n            line-height: 1.5;\r\n            margin-bottom: 16px;\r\n            flex-grow: 1;\r\n        }\r\n\r\n        \/* ponytail: indicador \"Ver m\u00e1s\" con flecha, sutil pero visible *\/\r\n        .cov-eco-mobile-card-more {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            color: var(--color-accent);\r\n            margin-top: auto;\r\n            transition: gap 0.3s ease;\r\n        }\r\n\r\n        .cov-eco-mobile-card-more::after {\r\n            content: '\u2192';\r\n            font-size: 1rem;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .cov-eco-mobile-card:hover .cov-eco-mobile-card-more {\r\n            gap: 10px;\r\n        }\r\n\r\n        .cov-eco-mobile-card:hover .cov-eco-mobile-card-more::after {\r\n            transform: translateX(2px);\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           MODAL (Detalle del Producto) \u2014 Spring Effect\r\n           ========================================================================== *\/\r\n        .cov-eco-panel-overlay {\r\n            position: fixed;\r\n            inset: 0;\r\n            background: rgba(28, 14, 102, 0.4);\r\n            backdrop-filter: blur(4px);\r\n            z-index: 999;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            opacity: 0;\r\n            visibility: hidden;\r\n            transition: opacity 0.5s ease, visibility 0.5s ease;\r\n        }\r\n\r\n        .cov-eco-panel-overlay.active {\r\n            opacity: 1;\r\n            visibility: visible;\r\n        }\r\n\r\n        .cov-eco-segment-btn[data-target=\"todos\"].active {\r\n            color: var(--color-white);\r\n        }\r\n\r\n        .cov-eco-side-panel {\r\n            background: var(--color-white);\r\n            border-radius: 24px;\r\n            max-width: 500px;\r\n            width: 90%;\r\n            max-height: 90vh;\r\n            box-shadow: var(--shadow-panel);\r\n            z-index: 1000;\r\n            display: flex;\r\n            flex-direction: column;\r\n            overflow-y: auto;\r\n            position: relative;\r\n            \/* Spring: scale(0) \u2192 scale(1) con bounce *\/\r\n            transform: scale(0);\r\n            transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n        }\r\n\r\n        .cov-eco-side-panel.active {\r\n            transform: scale(1);\r\n        }\r\n\r\n        .cov-eco-panel-header {\r\n            position: relative;\r\n            height: 200px;\r\n            background: var(--color-bg-light);\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Spinner de carga para imagen del modal *\/\r\n        .cov-eco-panel-spinner {\r\n            position: absolute;\r\n            width: 40px;\r\n            height: 40px;\r\n            z-index: 2;\r\n            pointer-events: none;\r\n            opacity: 0;\r\n            transition: opacity 0.2s ease;\r\n        }\r\n\r\n        .cov-eco-panel-spinner.active {\r\n            opacity: 1;\r\n        }\r\n\r\n        .cov-eco-panel-spinner::after {\r\n            content: '';\r\n            display: block;\r\n            width: 32px;\r\n            height: 32px;\r\n            margin: 4px;\r\n            border: 3px solid rgba(28, 14, 102, 0.15);\r\n            border-top-color: var(--color-primary);\r\n            border-radius: 50%;\r\n            animation: cov-eco-spin 0.7s linear infinite;\r\n        }\r\n\r\n        @keyframes cov-eco-spin {\r\n            to { transform: rotate(360deg); }\r\n        }\r\n\r\n        .cov-eco-panel-header-bg {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            opacity: 1;\r\n            filter: none;\r\n        }\r\n\r\n        .cov-eco-panel-header-icon {\r\n            display: none;\r\n        }\r\n\r\n        .cov-eco-panel-close {\r\n            position: absolute;\r\n            top: 20px;\r\n            right: 20px;\r\n            width: 36px;\r\n            height: 36px;\r\n            background: var(--color-white);\r\n            border: none;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            cursor: pointer;\r\n            box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n            z-index: 3;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .cov-eco-panel-close:hover {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        .cov-eco-panel-close svg {\r\n            width: 14px;\r\n            height: 14px;\r\n            fill: var(--color-text-main);\r\n        }\r\n\r\n        .cov-eco-panel-body {\r\n            padding: 40px 30px;\r\n            flex-grow: 1;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .cov-eco-panel-category {\r\n            font-size: 0.75rem;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            margin-bottom: 8px;\r\n            display: inline-block;\r\n        }\r\n\r\n        .cov-eco-panel-title {\r\n            font-size: 1.8rem;\r\n            font-weight: 700;\r\n            margin-bottom: 20px;\r\n            line-height: 1.2;\r\n        }\r\n\r\n        .cov-eco-panel-desc {\r\n            font-size: 1rem;\r\n            color: var(--color-text-muted);\r\n            line-height: 1.7;\r\n            margin-bottom: 40px;\r\n            text-align: justify;\r\n            hyphens: none;\r\n            -webkit-hyphens: none;\r\n        }\r\n\r\n        .cov-eco-panel-cta {\r\n            margin-top: auto;\r\n            display: inline-block;\r\n            text-align: center;\r\n            text-decoration: none;\r\n            background: var(--color-accent);\r\n            color: var(--color-white);\r\n            border: none;\r\n            padding: 16px 24px;\r\n            font-family: var(--font-family);\r\n            font-size: 1rem;\r\n            font-weight: 600;\r\n            border-radius: 8px;\r\n            cursor: pointer;\r\n            transition: background 0.3s ease, transform 0.3s ease;\r\n            box-shadow: 0 8px 20px rgba(227, 159, 30, 0.3);\r\n        }\r\n\r\n        .cov-eco-panel-cta:hover {\r\n            background: #cc8d19;\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        \/* ==========================================================================\r\n           RESPONSIVE\r\n           ========================================================================== *\/\r\n        \/* ponytail: defensa en profundidad \u2014 reserva espacio para scrollbar\r\n           aunque el overshoot real nunca deber\u00eda desbordar. Previene saltos\r\n           de layout residuales en navegadores que oscilan con scrollbar-gutter. *\/\r\n        html {\r\n            scrollbar-gutter: stable;\r\n        }\r\n\r\n        \/* ponytail: con --orbit-size=860px, el wrapper es m\u00e1s grande.\r\n           Ajustamos m\u00e1rgenes negativos proporcionalmente para mantener\r\n           el equilibrio visual sin crear espacio vac\u00edo excesivo. *\/\r\n        @media (min-width: 992px) {\r\n            .cov-eco-orbit-wrapper {\r\n                margin-top: -160px;\r\n                margin-bottom: 40px;\r\n            }\r\n        }\r\n\r\n        \/* ponytail: scale(0.85) sobre 860px = 731px visual.\r\n           Margen ajustado para compensar la altura extra del wrapper. *\/\r\n        @media (max-width: 992px) {\r\n            .cov-eco-orbit-wrapper {\r\n                transform: scale(0.85);\r\n                margin-top: -210px;\r\n                margin-bottom: 20px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .cov-eco-orbit-wrapper {\r\n                display: none; \/* Ocultar \u00f3rbita en m\u00f3viles *\/\r\n            }\r\n            .cov-eco-mobile-carousel {\r\n                display: block; \/* Mostrar carrusel *\/\r\n            }\r\n            .cov-eco-title {\r\n                font-size: 1.5rem;\r\n            }\r\n            .cov-eco-segment-btn {\r\n                padding: 10px 20px;\r\n                font-size: 0.8rem;\r\n            }\r\n            .cov-eco-controls {\r\n                margin-bottom: 20px;\r\n            }\r\n            \/* Logo est\u00e1tico centrado superior para m\u00f3vil *\/\r\n            .cov-eco-mobile-logo-wrapper {\r\n                display: flex;\r\n                justify-content: center;\r\n                margin-bottom: 30px;\r\n            }\r\n            .cov-eco-mobile-logo {\r\n                width: 120px;\r\n                height: 120px;\r\n                border-radius: 50%;\r\n                box-shadow: var(--shadow-soft);\r\n                padding: 15px;\r\n                background: var(--color-white);\r\n            }\r\n        }\r\n        @media (min-width: 769px) {\r\n            .cov-eco-mobile-logo-wrapper {\r\n                display: none;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- \u2500\u2500 Introducci\u00f3n \u2500\u2500 -->\r\n    <section class=\"cov-eco-intro\">\r\n        <!-- <h2 class=\"cov-eco-intro-title\">Nuestro compromiso con el desarrollo financiero<\/h2> -->\r\n        <p class=\"cov-eco-intro-text\">\r\n            En Fundaci\u00f3n Covelo desarrollamos soluciones financieras que fortalecen a las instituciones que impulsan el crecimiento de miles de emprendedores, microempresarios y peque\u00f1as empresas en Honduras y la regi\u00f3n.\r\n        <\/p>\r\n        <br>\r\n        <p class=\"cov-eco-intro-text\">\r\n            \r\n            Nuestro portafolio se organiza en dos modelos de negocio, dise\u00f1ados para responder a diferentes necesidades estrat\u00e9gicas de las instituciones beneficiarias.\r\n                \r\n        <\/p>\r\n    <\/section>\r\n\r\n    <!-- \u2500\u2500 Tarjetas de Modelos de Negocio \u2500\u2500 -->\r\n    <section class=\"cov-eco-models\">\r\n        <h3 class=\"cov-eco-models-title\">Nuestros modelos de negocio<\/h3>\r\n        <div class=\"cov-eco-models-grid\">\r\n            <div class=\"cov-eco-model-card cov-eco-model-card--tradicional\">\r\n                <span class=\"cov-eco-model-card-icon\">\ud83c\udfdb<\/span>\r\n                <h4 class=\"cov-eco-model-card-title\">Modelo Tradicional<\/h4>\r\n                <p class=\"cov-eco-model-card-text\">Soluciones financieras orientadas al fortalecimiento institucional y empresarial, facilitando liquidez, crecimiento y consolidaci\u00f3n de las operaciones de las instituciones beneficiarias.<\/p>\r\n            <\/div>\r\n            <div class=\"cov-eco-model-card cov-eco-model-card--sostenible\">\r\n                <span class=\"cov-eco-model-card-icon\">\ud83c\udf31<\/span>\r\n                <h4 class=\"cov-eco-model-card-title\">Modelo Sostenible<\/h4>\r\n                <p class=\"cov-eco-model-card-text\">Soluciones financieras enfocadas en impulsar iniciativas con impacto econ\u00f3mico, social y ambiental, promoviendo un desarrollo sostenible e inclusivo.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- LOGO M\u00d3VIL (Solo visible < 768px) -->\r\n    <div class=\"cov-eco-mobile-logo-wrapper\">\r\n        <img src=\"https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/IMG_0565.png\" alt=\"Covelo Centro\" class=\"cov-eco-mobile-logo\" width=\"120\" height=\"120\" loading=\"eager\" decoding=\"async\">\r\n    <\/div>\r\n\r\n    <!-- SELECTOR -->\r\n    <div class=\"cov-eco-controls\">\r\n        <p class=\"cov-eco-selector-label\">Seleccione un modelo para explorar sus productos<\/p>\r\n\r\n        <div class=\"cov-eco-segment-control\" id=\"eco-segment-control\">\r\n            <div class=\"cov-eco-segment-indicator\" id=\"eco-indicator\"><\/div>\r\n            <button class=\"cov-eco-segment-btn active\" data-target=\"todos\">TODOS<\/button>\r\n            <button class=\"cov-eco-segment-btn\" data-target=\"tradicional\">TRADICIONAL<\/button>\r\n            <button class=\"cov-eco-segment-btn\" data-target=\"sostenible\">SOSTENIBLE<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ECOSISTEMA ORBITAL (Desktop\/Tablet) -->\r\n    <div class=\"cov-eco-orbit-wrapper\" id=\"eco-orbit\">\r\n        <!-- SVG Canvas para l\u00edneas -->\r\n        <!-- ponytail: viewBox ajustado para coincidir con --orbit-size=860px. Mitad = 430. -->\r\n        <svg class=\"cov-eco-svg-container\" viewBox=\"-430 -430 860 860\" id=\"eco-svg-canvas\">\r\n            <!-- Las l\u00edneas se inyectan mediante JS -->\r\n        <\/svg>\r\n\r\n        <!-- Centro -->\r\n        <div class=\"cov-eco-center-logo\">\r\n            <div class=\"cov-eco-center-ring\"><\/div>\r\n            <!-- ponytail: el logo central tiene width=70% del contenedor de 160px \u2192 ~112px efectivo -->\r\n            <img src=\"https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/IMG_0565.png\" alt=\"Logo Covelo\" width=\"112\" height=\"112\" loading=\"eager\" decoding=\"async\">\r\n        <\/div>\r\n\r\n        <!-- Contenedor de Nodos -->\r\n        <div id=\"eco-nodes-container\">\r\n            <!-- Los nodos se inyectan mediante JS -->\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- CARRUSEL M\u00d3VIL (< 768px) -->\r\n    <div class=\"cov-eco-mobile-carousel\">\r\n        <div class=\"cov-eco-mobile-track\" id=\"eco-mobile-track\">\r\n            <!-- Tarjetas m\u00f3viles generadas por JS -->\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2500\u2500 Tabla Comparativa \u2500\u2500 -->\r\n    <section class=\"cov-eco-comparison-header\">\r\n        <h2 class=\"cov-eco-comparison-header-title\">\u00bfCu\u00e1l es la diferencia entre ambos modelos?<\/h2>\r\n        <p class=\"cov-eco-comparison-header-subtitle\">Conozca de forma r\u00e1pida las principales caracter\u00edsticas de cada modelo de negocio.<\/p>\r\n    <\/section>\r\n\r\n    <table class=\"cov-eco-comparison\">\r\n        <thead>\r\n            <tr>\r\n                <th><\/th>\r\n                <th class=\"trad-col\">\ud83c\udfdb\ufe0f Tradicional<\/th>\r\n                <th class=\"sost-col\">\ud83c\udf31 Sostenible<\/th>\r\n            <\/tr>\r\n        <\/thead>\r\n        <tbody>\r\n            <tr>\r\n                <td><strong>\u00bfQu\u00e9 es?<\/strong><\/td>\r\n                <td>Soluciones financieras orientadas al fortalecimiento empresarial e institucional.<\/td>\r\n                <td>Soluciones financieras enfocadas en impulsar proyectos con impacto social, ambiental y de innovaci\u00f3n.<\/td>\r\n            <\/tr>\r\n            <tr>\r\n                <td><strong>\u00bfPara qui\u00e9n?<\/strong><\/td>\r\n                <td>Instituciones que buscan fortalecer su operaci\u00f3n, ampliar su cartera de productos financieros o mejorar su liquidez.<\/td>\r\n                <td>Instituciones interesadas en impulsar iniciativas con enfoque social, ambiental, energ\u00e9tico o de inclusi\u00f3n financiera.<\/td>\r\n            <\/tr>\r\n            <tr>\r\n                <td><strong>\u00bfQu\u00e9 busca lograr?<\/strong><\/td>\r\n                <td>Fortalecer la capacidad financiera y operativa de las instituciones beneficiarias mediante soluciones sostenibles y de largo plazo.<\/td>\r\n                <td>Promover el desarrollo sostenible mediante inversiones con impacto econ\u00f3mico, social y ambiental.<\/td>\r\n            <\/tr>\r\n        <\/tbody>\r\n    <\/table>\r\n\r\n    <!-- TOOLTIP HOVER -->\r\n    <div class=\"cov-eco-tooltip\" id=\"eco-tooltip\">\r\n        <div class=\"cov-eco-tooltip-title\" id=\"eco-tooltip-title\">Producto<\/div>\r\n        <div class=\"cov-eco-tooltip-desc\" id=\"eco-tooltip-desc\">Descripci\u00f3n corta del producto.<\/div>\r\n    <\/div>\r\n\r\n    <!-- MODAL (Detalle del Producto) \u2014 Spring Effect -->\r\n    <div class=\"cov-eco-panel-overlay\" id=\"eco-panel-overlay\">\r\n        <div class=\"cov-eco-side-panel\" id=\"eco-panel\">\r\n            <button class=\"cov-eco-panel-close\" id=\"eco-panel-close\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\/><\/svg>\r\n            <\/button>\r\n            <div class=\"cov-eco-panel-header\">\r\n                <div class=\"cov-eco-panel-spinner\" id=\"eco-panel-spinner\"><\/div>\r\n                <img fetchpriority=\"high\" src=\"\" alt=\"Background\" class=\"cov-eco-panel-header-bg\" id=\"eco-panel-bg\" width=\"500\" height=\"200\" loading=\"eager\" decoding=\"async\">\r\n                <img decoding=\"async\" src=\"\" alt=\"Icon\" class=\"cov-eco-panel-header-icon\" id=\"eco-panel-icon\">\r\n            <\/div>\r\n            <div class=\"cov-eco-panel-body\">\r\n                <span class=\"cov-eco-panel-category\" id=\"eco-panel-cat\">Categor\u00eda<\/span>\r\n                <h3 class=\"cov-eco-panel-title\" id=\"eco-panel-title\">T\u00edtulo del Producto<\/h3>\r\n                <p class=\"cov-eco-panel-desc\" id=\"eco-panel-desc\">Descripci\u00f3n extendida que detalla los beneficios y caracter\u00edsticas de este producto financiero corporativo premium.<\/p>\r\n                <a href=\"\/master\/usuario-financiero\" class=\"cov-eco-panel-cta\">Solicitar Informaci\u00f3n<\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        (function() {\r\n            \/* ==========================================================================\r\n               DATOS DE LOS PRODUCTOS\r\n               Cada producto ahora tiene:\r\n               - thumb: miniatura 150x150 o 300x300 (WordPress) para nodos y carrusel\r\n               - full:  imagen completa para el modal de detalle\r\n               Reemplazar 'URL_DE_LA_MINIATURA_150x150' por las URLs reales de WordPress.\r\n               ========================================================================== *\/\r\n            const products = [\r\n                \/\/ TRADICIONALES (0-3)\r\n                {\r\n                    id: 'prod-1',\r\n                    title: 'L\u00ednea de Cr\u00e9dito para Capital de Trabajo',\r\n                    type: 'tradicional',\r\n                    descShort: 'Optimiza la disponibilidad de recursos de manera \u00e1gil y reutilizable.',\r\n                    descLong: 'Es un producto dise\u00f1ado para optimizar la disponibilidad de Capital de Trabajo de las instituciones clientes, debido que se pueden reutilizar los recursos hasta un l\u00edmite aprobado, considerando el an\u00e1lisis institucional realizado.',\r\n                    \/\/ thumb: reemplazar con URL de miniatura 150x150 o 300x300 generada por WordPress\r\n                    thumb: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/Imagen35-150x150.png',\r\n                    cardImage: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/Imagen35-400x400.png',\r\n                    full: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/Imagen35-scaled.png'\r\n                },\r\n                {\r\n                    id: 'prod-2',\r\n                    title: 'Fortalecimiento Institucional',\r\n                    type: 'tradicional',\r\n                    descShort: 'Financiamiento para instalaciones, tecnolog\u00eda y proyectos de desarrollo.',\r\n                    descLong: 'Es una operaci\u00f3n otorgada a una instituci\u00f3n cliente, para atender proyectos que beneficien su fin principal, tales como compra\/mejoras de instalaciones propias, compra de software\/hardware, flotas de veh\u00edculos, entre otras.',\r\n                    \/\/ thumb: reemplazar con URL de miniatura 150x150 o 300x300 generada por WordPress\r\n                    thumb: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/07\/Fortalecimiento-150x150.webp',\r\n                    cardImage: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/07\/Fortalecimiento-400x400.webp',\r\n                    full: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/07\/Fortalecimiento.webp'\r\n                },\r\n                {\r\n                    id: 'prod-3',\r\n                    title: 'Inversi\u00f3n de Capital o Cuasi Capital',\r\n                    type: 'tradicional',\r\n                    descShort: 'Mejora la estructura patrimonial y capacidad de endeudamiento institucional.',\r\n                    descLong: 'Es una operaci\u00f3n financiera otorgada para fortalecer la estructura patrimonial de una instituci\u00f3n cliente, con el objetivo de mejorar su capacidad de endeudamiento para impulsar el crecimiento de la cartera de cr\u00e9ditos.',\r\n                    \/\/ thumb: reemplazar con URL de miniatura 150x150 o 300x300 generada por WordPress\r\n                    thumb: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/07\/inversion-150x150.webp',\r\n                    cardImage: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/07\/inversion-400x400.webp',\r\n                    full: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/07\/inversion.webp'\r\n                },\r\n                {\r\n                    id: 'prod-4',\r\n                    title: 'Financiamiento Regional para Emergencias (FREC)',\r\n                    type: 'tradicional',\r\n                    descShort: 'Mecanismo de liquidez inmediata frente a desastres naturales o crisis.',\r\n                    descLong: 'Veh\u00edculo financiero permanente y sostenible para proveer financiamiento y liquidez a las instituciones intermediarias de servicios financieros inclusivos. Dicho mecanismo puede ser activado en cualquier momento frente a un desastre natural u otro tipo de crisis; como podr\u00edan ser, crisis sanitaria y pol\u00edticas entre otras.',\r\n                    \/\/ thumb: reemplazar con URL de miniatura 150x150 o 300x300 generada por WordPress\r\n                    thumb: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/Imagen45-150x150.png',\r\n                    cardImage: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/Imagen45-400x400.png',\r\n                    full: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/Imagen45.png'\r\n                },\r\n                \/\/ SOSTENIBLES (4-7)\r\n                {\r\n                    id: 'prod-5',\r\n                    title: 'Covelo Mujer',\r\n                    type: 'sostenible',\r\n                    descShort: 'Financiaci\u00f3n con enfoque de g\u00e9nero para el empoderamiento econ\u00f3mico.',\r\n                    descLong: 'Cr\u00e9dito especializado con enfoque de g\u00e9nero, para mujeres con el fin de empoderarlas econ\u00f3mica y socialmente, mediante la financiaci\u00f3n de actividades productivas o negocios existentes. Especialmente a mujeres propietarias de empresas, peque\u00f1as y medianas, las cuales sean madres solteras y mujeres cabeza de hogar.',\r\n                    \/\/ thumb: reemplazar con URL de miniatura 150x150 o 300x300 generada por WordPress\r\n                    thumb: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/Imagen23-150x150.png',\r\n                    cardImage: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/Imagen23-400x400.png',\r\n                    full: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/Imagen23-scaled.png'\r\n                },\r\n                {\r\n                    id: 'prod-6',\r\n                    title: 'Covelo Energy',\r\n                    type: 'sostenible',\r\n                    descShort: 'Fomento de inversiones en energ\u00eda renovable y eficiencia energ\u00e9tica.',\r\n                    descLong: 'Son los cr\u00e9ditos destinados a realizar inversiones que permitan un uso eficiente de la energ\u00eda, a trav\u00e9s de sistemas innovadores de: Autogeneraci\u00f3n, Iluminaci\u00f3n, Refrigeraci\u00f3n y climatizaci\u00f3n, Motores, Equipos de riego, entre otros. El objetivo principal es fomentar la implementaci\u00f3n de las energ\u00edas renovables y eficiencia energ\u00e9tica, contribuyendo a disminuir el consumo y facturaci\u00f3n de energ\u00eda el\u00e9ctrica del usuario.',\r\n                    \/\/ thumb: reemplazar con URL de miniatura 150x150 o 300x300 generada por WordPress\r\n                    thumb: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/Imagen29-150x150.png',\r\n                    cardImage: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/Imagen29-400x400.png',\r\n                    full: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/06\/Imagen29.png'\r\n                },\r\n                {\r\n                    id: 'prod-7',\r\n                    title: 'Covelo Academy',\r\n                    type: 'sostenible',\r\n                    descShort: 'Plataforma digital para fortalecer habilidades y optimizar procesos internos.',\r\n                    descLong: 'Covelo Academy es una plataforma digital, moderna y segura para fortalecer las habilidades del personal de las IMF clientes en Honduras y la regi\u00f3n centroamericana, ofreciendo una variedad de metodolog\u00edas y capacitaciones dise\u00f1adas para optimizar los procesos internos de cada instituci\u00f3n y alineado al sector con las nuevas tendencias empresariales.',\r\n                    \/\/ thumb: reemplazar con URL de miniatura 150x150 o 300x300 generada por WordPress\r\n                    thumb: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/07\/academy-150x150.webp',\r\n                    cardImage: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/07\/academy-400x400.webp',\r\n                    full: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/07\/academy.webp'\r\n                },\r\n                {\r\n                    id: 'prod-8',\r\n                    title: 'Herramientas Multiriesgo',\r\n                    type: 'sostenible',\r\n                    descShort: 'An\u00e1lisis, control y mitigaci\u00f3n digital de m\u00faltiples riesgos orientados a cr\u00e9dito.',\r\n                    descLong: 'El FC Multi \u2013 Riesgo es una herramienta de transformaci\u00f3n digital para el an\u00e1lisis de m\u00faltiples riesgos como: Fen\u00f3menos clim\u00e1ticos, geol\u00f3gicos, naturales, probabilidades de impago, mapa de calor, montos en riesgo, c\u00e1lculo de reservas, p\u00e9rdidas probables, control y mitigaci\u00f3n orientado a cr\u00e9dito.',\r\n                    \/\/ thumb: reemplazar con URL de miniatura 150x150 o 300x300 generada por WordPress\r\n                    thumb: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/07\/herramienta-150x150.webp',\r\n                    cardImage: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/07\/herramienta-400x400.webp',\r\n                    full: 'https:\/\/fundacioncovelo.hn\/master\/wp-content\/uploads\/2026\/07\/herramienta.webp'\r\n                }\r\n            ];\r\n\r\n            \/* ==========================================================================\r\n               CONFIGURACI\u00d3N ORBITAL\r\n               ========================================================================== *\/\r\n            const RADIUS_ACTIVE = 260; \/\/ Radio cuando est\u00e1 en \u00f3rbita\r\n            const RADIUS_HIDDEN = 0;   \/\/ Radio cuando est\u00e1 oculto en el centro\r\n            const ORBIT_CENTER = { x: 0, y: 0 }; \/\/ SVG y Nodos usan centro 0,0 por CSS translate\r\n\r\n            \/\/ \u00c1ngulos est\u00e9ticos definidos (en grados)\r\n            \/\/ 8 posiciones para vista 'todos'\r\n            const anglesTodos = [-90, -45, 0, 45, 90, 135, 180, 225];\r\n            \/\/ 4 posiciones cruzadas para vistas filtradas\r\n            const anglesFiltered = [-90, 0, 90, 180];\r\n\r\n            \/* ==========================================================================\r\n               ELEMENTOS DEL DOM\r\n               ========================================================================== *\/\r\n            const dom = {\r\n                segmentBtns: document.querySelectorAll('.cov-eco-segment-btn'),\r\n                indicator: document.getElementById('eco-indicator'),\r\n                svgCanvas: document.getElementById('eco-svg-canvas'),\r\n                nodesContainer: document.getElementById('eco-nodes-container'),\r\n                mobileTrack: document.getElementById('eco-mobile-track'),\r\n                tooltip: document.getElementById('eco-tooltip'),\r\n                tooltipTitle: document.getElementById('eco-tooltip-title'),\r\n                tooltipDesc: document.getElementById('eco-tooltip-desc'),\r\n                panelOverlay: document.getElementById('eco-panel-overlay'),\r\n                panel: document.getElementById('eco-panel'),\r\n                panelClose: document.getElementById('eco-panel-close'),\r\n                panelSpinner: document.getElementById('eco-panel-spinner'),\r\n                panelBg: document.getElementById('eco-panel-bg'),\r\n                panelIcon: document.getElementById('eco-panel-icon'),\r\n                panelCat: document.getElementById('eco-panel-cat'),\r\n                panelTitle: document.getElementById('eco-panel-title'),\r\n                panelDesc: document.getElementById('eco-panel-desc'),\r\n                app: document.getElementById('covelo-ecosystem-app')\r\n            };\r\n\r\n            let currentMode = 'todos';\r\n            let isAnimating = false;\r\n            let orbitAngle = -90; \/\/ \u00c1ngulo inicial del sat\u00e9lite animado\r\n            let lastAnimTime = 0;\r\n            const ORBIT_SPEED = 18; \/\/ Grados por segundo\r\n            const nodeAngles = {}; \/\/ Almacena el \u00e1ngulo actual de cada nodo\r\n            const TRANSITION_TIMING = {\r\n                nodeDurationMs: 800,\r\n                nodeMotionEasing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\r\n                phase2StartMs: 370,\r\n                staggerDelayMs: 45\r\n            };\r\n            const selectorIndicatorState = {\r\n                left: 0,\r\n                width: 0\r\n            };\r\n\r\n            function applyTransitionTimingVars() {\r\n                if (!dom.app) return;\r\n                dom.app.style.setProperty('--cov-eco-node-motion-duration', TRANSITION_TIMING.nodeDurationMs + 'ms');\r\n                dom.app.style.setProperty('--cov-eco-node-motion-easing', TRANSITION_TIMING.nodeMotionEasing);\r\n            }\r\n\r\n            \/* ==========================================================================\r\n               INICIALIZACI\u00d3N Y RENDERIZADO\r\n               ========================================================================== *\/\r\n            function init() {\r\n                if (init.hasRun) return;\r\n                init.hasRun = true;\r\n                applyTransitionTimingVars();\r\n                renderNodesAndLines();\r\n                renderMobileCards();\r\n                setupEventListeners();\r\n                updateSelectorUI(dom.segmentBtns[0], true); \/\/ Seleccionar \"TODOS\" por defecto\r\n                updatePositions('todos'); \/\/ Posicionar inicial\r\n                requestAnimationFrame(animateEcosystem); \/\/ Iniciar bucle de iluminaci\u00f3n\r\n            }\r\n\r\n            function renderNodesAndLines() {\r\n                let svgHTML = '';\r\n                let nodesHTML = '';\r\n\r\n                products.forEach((prod, index) => {\r\n                    \/\/ 1. Crear l\u00ednea SVG (Un <g> con rotaci\u00f3n y un <line> interno)\r\n                    \/\/ Iniciamos ocultos en el centro\r\n                    svgHTML += `\r\n                        <g id=\"line-group-${prod.id}\" class=\"cov-eco-line-group\" style=\"transform: rotate(0deg)\">\r\n                            <line id=\"line-${prod.id}\" class=\"cov-eco-connection-line\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\" \/>\r\n                        <\/g>\r\n                    `;\r\n\r\n                    \/\/ 2. Crear Nodo HTML\r\n                    \/\/ ponytail: nodos usan thumb (miniatura ~15KB) en lugar de image (~6MB) para nodos de 76px\r\n                    nodesHTML += `\r\n                        <div class=\"cov-eco-node\" id=\"node-${prod.id}\" data-id=\"${prod.id}\" data-type=\"${prod.type}\" style=\"transform: translate(0px, 0px); opacity: 0;\">\r\n                            <div class=\"cov-eco-node-icon-wrapper\">\r\n                                <img src=\"${prod.thumb}\" alt=\"${prod.title}\" width=\"76\" height=\"76\" loading=\"eager\" decoding=\"async\">\r\n                            <\/div>\r\n                            <div class=\"cov-eco-node-label\">${prod.title}<\/div>\r\n                        <\/div>\r\n                    `;\r\n                });\r\n\r\n                dom.svgCanvas.innerHTML = svgHTML;\r\n                dom.nodesContainer.innerHTML = nodesHTML;\r\n            }\r\n\r\n            function renderMobileCards() {\r\n                let cardsHTML = '';\r\n                const filteredProducts = currentMode === 'todos' ? products : products.filter(p => p.type === currentMode);\r\n\r\n                filteredProducts.forEach(prod => {\r\n                    \/* ponytail: cardImage (400x400) para banner n\u00edtido en cards de 280-320px.\r\n                       Fallback a full si cardImage no existe. *\/\r\n                    var imgSrc = prod.cardImage || prod.full;\r\n                    cardsHTML += `\r\n                        <div class=\"cov-eco-mobile-card\" data-id=\"${prod.id}\">\r\n                            <img loading=\"lazy\" src=\"${imgSrc}\" alt=\"${prod.title}\" class=\"cov-eco-mobile-card-image\" width=\"320\" height=\"200\" loading=\"lazy\" decoding=\"async\">\r\n                            <div class=\"cov-eco-mobile-card-body\">\r\n                                <h4 class=\"cov-eco-mobile-card-title\">${prod.title}<\/h4>\r\n                                <p class=\"cov-eco-mobile-card-desc\">${prod.descShort}<\/p>\r\n                                <span class=\"cov-eco-mobile-card-more\">Ver m\u00e1s<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    `;\r\n                });\r\n\r\n                dom.mobileTrack.innerHTML = cardsHTML;\r\n\r\n                \/\/ Re-vincular eventos para las nuevas tarjetas m\u00f3viles\r\n                document.querySelectorAll('.cov-eco-mobile-card').forEach(card => {\r\n                    card.addEventListener('click', () => openSidePanel(card.getAttribute('data-id')));\r\n                });\r\n            }\r\n\r\n            \/* ==========================================================================\r\n               L\u00d3GICA MATEM\u00c1TICA Y ACTUALIZACI\u00d3N DE ESTADOS\r\n               ========================================================================== *\/\r\n            function getCoordinates(angle, radius) {\r\n                const rad = (angle * Math.PI) \/ 180;\r\n                return {\r\n                    x: radius * Math.cos(rad),\r\n                    y: radius * Math.sin(rad)\r\n                };\r\n            }\r\n\r\n            \/\/ ponytail: calcula todas las posiciones sin aplicarlas al DOM \u2014 reusable\r\n            function getPositionData(mode) {\r\n                var tradCount = 0;\r\n                var sostCount = 0;\r\n                var data = {};\r\n\r\n                products.forEach(function(prod, index) {\r\n                    var targetAngle = 0;\r\n                    var targetRadius = 0;\r\n                    var isVisible = false;\r\n\r\n                    if (mode === 'todos') {\r\n                        isVisible = true;\r\n                        targetRadius = RADIUS_ACTIVE;\r\n                        targetAngle = anglesTodos[index];\r\n                    } else if (mode === 'tradicional') {\r\n                        if (prod.type === 'tradicional') {\r\n                            isVisible = true;\r\n                            targetRadius = RADIUS_ACTIVE;\r\n                            targetAngle = anglesFiltered[tradCount];\r\n                            tradCount++;\r\n                        } else {\r\n                            isVisible = false;\r\n                            targetRadius = RADIUS_HIDDEN;\r\n                            var lineGroupEl = document.getElementById('line-group-' + prod.id);\r\n                            var currentTransform = lineGroupEl.style.transform;\r\n                            var match = currentTransform.match(\/rotate\\(([-\\d.]+)deg\\)\/);\r\n                            targetAngle = match ? parseFloat(match[1]) : 0;\r\n                        }\r\n                    } else if (mode === 'sostenible') {\r\n                        if (prod.type === 'sostenible') {\r\n                            isVisible = true;\r\n                            targetRadius = RADIUS_ACTIVE;\r\n                            targetAngle = anglesFiltered[sostCount];\r\n                            sostCount++;\r\n                        } else {\r\n                            isVisible = false;\r\n                            targetRadius = RADIUS_HIDDEN;\r\n                            var lineGroupEl = document.getElementById('line-group-' + prod.id);\r\n                            var currentTransform = lineGroupEl.style.transform;\r\n                            var match = currentTransform.match(\/rotate\\(([-\\d.]+)deg\\)\/);\r\n                            targetAngle = match ? parseFloat(match[1]) : 0;\r\n                        }\r\n                    }\r\n\r\n                    var coords = getCoordinates(targetAngle, targetRadius);\r\n                    data[prod.id] = { coords: coords, isVisible: isVisible, targetAngle: targetAngle, targetRadius: targetRadius };\r\n                });\r\n\r\n                return data;\r\n            }\r\n\r\n            \/\/ ponytail: aplica estado visual a un solo nodo con retardo opcional\r\n            function applyNodeState(nodeEl, coords, isVisible, transitionDelay) {\r\n                nodeEl.style.transitionDelay = (transitionDelay || 0) + 'ms';\r\n                nodeEl.style.transform = 'translate(' + coords.x + 'px, ' + coords.y + 'px)';\r\n                nodeEl.style.opacity = isVisible ? '1' : '0';\r\n                nodeEl.style.pointerEvents = isVisible ? 'auto' : 'none';\r\n\r\n                \/\/ Quitar clase de pulse anterior si existe\r\n                nodeEl.classList.remove('cov-eco-node--entered');\r\n\r\n                if (isVisible) {\r\n                    \/\/ Disparar pulse cuando termine la transici\u00f3n de entrada\r\n                    var pulseDelay = (transitionDelay || 0) + TRANSITION_TIMING.nodeDurationMs;\r\n                    setTimeout(function() {\r\n                        nodeEl.classList.add('cov-eco-node--entered');\r\n                        \/\/ Limpiar despu\u00e9s de que termine la animaci\u00f3n\r\n                        setTimeout(function() {\r\n                            nodeEl.classList.remove('cov-eco-node--entered');\r\n                        }, 500);\r\n                    }, pulseDelay);\r\n                }\r\n            }\r\n\r\n            \/\/ ponytail: aplica estado visual a una sola l\u00ednea con retardo opcional\r\n            function applyLineState(prod, lineGroupEl, lineEl, targetAngle, targetRadius, isVisible, mode, transitionDelay) {\r\n                lineGroupEl.style.transitionDelay = (transitionDelay || 0) + 'ms';\r\n                lineGroupEl.style.transform = 'rotate(' + targetAngle + 'deg)';\r\n\r\n                var innerRadius = 90;\r\n                var outerRadius = targetRadius > 0 ? targetRadius - 40 : 0;\r\n\r\n                if (targetRadius > 0) {\r\n                    lineEl.setAttribute('x1', innerRadius);\r\n                    lineEl.setAttribute('x2', outerRadius);\r\n                    if (mode === 'tradicional') {\r\n                        lineEl.style.stroke = 'rgba(28, 14, 102, 0.4)';\r\n                    } else if (mode === 'sostenible') {\r\n                        lineEl.style.stroke = 'rgba(25, 145, 120, 0.4)';\r\n                    } else {\r\n                        lineEl.style.stroke = 'rgba(28, 14, 102, 0.15)';\r\n                    }\r\n                    lineEl.style.opacity = '1';\r\n                } else {\r\n                    lineEl.setAttribute('x1', 0);\r\n                    lineEl.setAttribute('x2', 0);\r\n                    lineEl.style.opacity = '0';\r\n                }\r\n            }\r\n\r\n            \/\/ ponytail: actualizaci\u00f3n directa (inicializaci\u00f3n) usando helpers\r\n            function updatePositions(mode) {\r\n                var posData = getPositionData(mode);\r\n\r\n                products.forEach(function(prod) {\r\n                    var nodeEl = document.getElementById('node-' + prod.id);\r\n                    var lineGroupEl = document.getElementById('line-group-' + prod.id);\r\n                    var lineEl = document.getElementById('line-' + prod.id);\r\n                    var pd = posData[prod.id];\r\n\r\n                    nodeAngles[prod.id] = pd.isVisible ? pd.targetAngle : null;\r\n                    \/\/ Inicializaci\u00f3n: sin retardo\r\n                    applyNodeState(nodeEl, pd.coords, pd.isVisible, 0);\r\n                    applyLineState(prod, lineGroupEl, lineEl, pd.targetAngle, pd.targetRadius, pd.isVisible, mode, 0);\r\n                });\r\n\r\n                renderMobileCards();\r\n            }\r\n\r\n            \/* ==========================================================================\r\n               ANIMACI\u00d3N DE BRILLO Y SAT\u00c9LITE\r\n               ========================================================================== *\/\r\n            function animateEcosystem(timestamp) {\r\n                if (!lastAnimTime) lastAnimTime = timestamp;\r\n                const deltaTime = (timestamp - lastAnimTime) \/ 1000;\r\n                lastAnimTime = timestamp;\r\n\r\n                if (!isAnimating) {\r\n                    orbitAngle += ORBIT_SPEED * deltaTime;\r\n                    if (orbitAngle >= 270) orbitAngle -= 360;\r\n                }\r\n\r\n                \/\/ Rotar el anillo central\r\n                const ring = document.querySelector('.cov-eco-center-ring');\r\n                if (ring) {\r\n                    ring.style.transform = `rotate(${orbitAngle + 90}deg)`;\r\n                }\r\n\r\n                \/\/ Calcular proximidad de la \u00f3rbita a cada nodo para encenderlos\r\n                products.forEach(prod => {\r\n                    const nodeAngle = nodeAngles[prod.id];\r\n                    const nodeEl = document.getElementById(`node-${prod.id}`);\r\n                    const lineEl = document.getElementById(`line-${prod.id}`);\r\n                    const lineGroup = document.getElementById(`line-group-${prod.id}`);\r\n\r\n                    if (nodeAngle !== null && nodeAngle !== undefined && nodeEl && nodeEl.style.opacity === '1') {\r\n                        \/\/ Distancia angular m\u00e1s corta\r\n                        let diff = Math.abs((orbitAngle - nodeAngle) % 360);\r\n                        if (diff > 180) diff = 360 - diff;\r\n                        \r\n                        \/\/ Si est\u00e1 a menos de 45 grados, calcular intensidad (0 a 1)\r\n                        let intensity = Math.max(0, 1 - (diff \/ 45));\r\n                        intensity = Math.sin(intensity * Math.PI \/ 2); \/\/ Transici\u00f3n suave (Easing)\r\n\r\n                        \/\/ Asignar variable CSS que controla la opacidad del brillo\r\n                        nodeEl.style.setProperty('--glow-intensity', intensity.toFixed(3));\r\n                        \r\n                        \/\/ Iluminar la l\u00ednea conectora si el usuario no tiene el mouse sobre ella (hover)\r\n                        if (lineEl && lineGroup && !lineGroup.classList.contains('active')) {\r\n                            const isSost = prod.type === 'sostenible';\r\n                            const baseColor = isSost ? '25, 145, 120' : '28, 14, 102';\r\n                            const currentAlpha = 0.15 + (0.65 * intensity);\r\n                            const currentWidth = 1.5 + (1.5 * intensity);\r\n                            \r\n                            lineEl.style.stroke = `rgba(${baseColor}, ${currentAlpha})`;\r\n                            lineEl.style.strokeWidth = `${currentWidth}px`;\r\n                        }\r\n                    } else if (nodeEl) {\r\n                        \/\/ Apagar nodos invisibles\r\n                        nodeEl.style.setProperty('--glow-intensity', 0);\r\n                        if (lineEl && lineGroup && !lineGroup.classList.contains('active')) {\r\n                            lineEl.style.stroke = '';\r\n                            lineEl.style.strokeWidth = '';\r\n                        }\r\n                    }\r\n                });\r\n\r\n                requestAnimationFrame(animateEcosystem);\r\n            }\r\n\r\n            \/* ==========================================================================\r\n               INTERACCIONES DE UI (SELECTOR, HOVER, PANEL)\r\n               ========================================================================== *\/\r\n\r\n            \/\/ ponytail: easing compartido por el scroll de la transici\u00f3n\r\n            function easeInOutQuint(t) {\r\n                return t < 0.5 ? 16 * t * t * t * t * t : 1 - Math.pow(-2 * t + 2, 5) \/ 2;\r\n            }\r\n\r\n            function getTransitionScrollTarget() {\r\n                \/* ponytail: en m\u00f3vil no hacemos autoscroll al cambiar categor\u00eda.\r\n                   El carrusel ya es visible sin necesidad de mover el viewport. *\/\r\n                if (window.matchMedia('(max-width: 768px)').matches) {\r\n                    return null;\r\n                }\r\n                return document.getElementById('eco-orbit');\r\n            }\r\n\r\n            \/* ponytail: centra el elemento verticalmente en el viewport\r\n               para que el logo orbital quede al centro de la pantalla tras el scroll. *\/\r\n            function measureScrollTargetY(targetEl) {\r\n                if (!targetEl) return window.pageYOffset;\r\n                var rect = targetEl.getBoundingClientRect();\r\n                var elementCenterY = window.pageYOffset + rect.top + (rect.height \/ 2);\r\n                var viewportCenterY = window.innerHeight \/ 2;\r\n                return Math.max(0, elementCenterY - viewportCenterY);\r\n            }\r\n\r\n            function measureIndicatorTarget(activeBtn) {\r\n                var btnRect = activeBtn.getBoundingClientRect();\r\n                var parentRect = activeBtn.parentElement.getBoundingClientRect();\r\n\r\n                return {\r\n                    left: btnRect.left - parentRect.left,\r\n                    width: btnRect.width\r\n                };\r\n            }\r\n\r\n            \/\/ ponytail: el indicador ya no anima por CSS propio; lo conduce el mismo rAF que el scroll\r\n            function applyIndicatorState(left, width) {\r\n                selectorIndicatorState.left = left;\r\n                selectorIndicatorState.width = width;\r\n                dom.indicator.style.transform = 'translateX(' + left + 'px)';\r\n                dom.indicator.style.width = width + 'px';\r\n            }\r\n\r\n            \/\/ ponytail: neutraliza el scroll suave global del tema mientras dura la transici\u00f3n manual\r\n            function setTransitionScrollBehavior() {\r\n                return {\r\n                    html: document.documentElement.style.scrollBehavior,\r\n                    body: document.body ? document.body.style.scrollBehavior : ''\r\n                };\r\n            }\r\n\r\n            function applyAutoScrollBehavior() {\r\n                document.documentElement.style.scrollBehavior = 'auto';\r\n                if (document.body) {\r\n                    document.body.style.scrollBehavior = 'auto';\r\n                }\r\n            }\r\n\r\n            function restoreScrollBehavior(behaviorState) {\r\n                if (!behaviorState) return;\r\n                document.documentElement.style.scrollBehavior = behaviorState.html;\r\n                if (document.body) {\r\n                    document.body.style.scrollBehavior = behaviorState.body;\r\n                }\r\n            }\r\n\r\n            var activeTransition = null;\r\n\r\n            function cleanupTransition(plan) {\r\n                if (!plan || plan.cleanedUp) return;\r\n\r\n                plan.cleanedUp = true;\r\n                restoreScrollBehavior(plan.scrollBehavior);\r\n                products.forEach(function(prod) {\r\n                    var nodeEl = document.getElementById('node-' + prod.id);\r\n                    var lineGroupEl = document.getElementById('line-group-' + prod.id);\r\n                    if (nodeEl) nodeEl.style.transitionDelay = '';\r\n                    if (lineGroupEl) lineGroupEl.style.transitionDelay = '';\r\n                });\r\n\r\n                if (plan.indicatorTarget) {\r\n                    applyIndicatorState(plan.indicatorTarget.left, plan.indicatorTarget.width);\r\n                }\r\n\r\n                isAnimating = false;\r\n                activeTransition = null;\r\n            }\r\n\r\n            function runTransitionFrame(timestamp) {\r\n                var plan = activeTransition;\r\n                if (!plan) return;\r\n\r\n                if (plan.startTime === null) {\r\n                    plan.startTime = timestamp;\r\n                }\r\n\r\n                var elapsed = timestamp - plan.startTime;\r\n\r\n                if (!plan.phase1Started) {\r\n                    plan.phase1Started = true;\r\n                    plan.disappearingNodes.forEach(function(item, i) {\r\n                        var delay = i * plan.staggerDelay;\r\n                        applyNodeState(item.nodeEl, { x: 0, y: 0 }, false, delay);\r\n                        applyLineState(item.prod, item.lineGroupEl, item.lineEl, item.next.targetAngle, 0, false, plan.targetMode, delay);\r\n                    });\r\n                }\r\n\r\n                if (!plan.phase2Started && elapsed >= plan.phase2Start) {\r\n                    plan.phase2Started = true;\r\n                    plan.advancingNodes.forEach(function(item, i) {\r\n                        var delay = i * plan.staggerDelay;\r\n                        applyNodeState(item.nodeEl, item.next.coords, true, delay);\r\n                        applyLineState(item.prod, item.lineGroupEl, item.lineEl, item.next.targetAngle, item.next.targetRadius, true, plan.targetMode, delay);\r\n                    });\r\n                }\r\n\r\n                if (plan.indicatorTarget && plan.indicatorDuration > 0) {\r\n                    var indicatorProgress = Math.min(elapsed \/ plan.indicatorDuration, 1);\r\n                    var indicatorEase = easeInOutQuint(indicatorProgress);\r\n                    var currentLeft = plan.indicatorStart.left + ((plan.indicatorTarget.left - plan.indicatorStart.left) * indicatorEase);\r\n                    var currentWidth = plan.indicatorStart.width + ((plan.indicatorTarget.width - plan.indicatorStart.width) * indicatorEase);\r\n                    applyIndicatorState(currentLeft, currentWidth);\r\n                }\r\n\r\n                if (plan.scrollDuration > 0) {\r\n                    var scrollProgress = Math.min(elapsed \/ plan.scrollDuration, 1);\r\n                    var scrollY = plan.scrollStartY + ((plan.scrollTargetY - plan.scrollStartY) * easeInOutQuint(scrollProgress));\r\n                    window.scrollTo(0, scrollY);\r\n                }\r\n\r\n                if (elapsed >= plan.cleanupAt) {\r\n                    cleanupTransition(plan);\r\n                    return;\r\n                }\r\n\r\n                plan.rafId = requestAnimationFrame(runTransitionFrame);\r\n            }\r\n\r\n            function startModeTransition(prevMode, targetMode, activeBtn) {\r\n                var targetEl = getTransitionScrollTarget();\r\n                var targetScrollY = measureScrollTargetY(targetEl);\r\n                var prevData = getPositionData(prevMode);\r\n                var nextData = getPositionData(targetMode);\r\n                var indicatorTarget = measureIndicatorTarget(activeBtn);\r\n\r\n                var disappearingNodes = [];\r\n                var appearingNodes = [];\r\n                var movingNodes = [];\r\n\r\n                products.forEach(function(prod) {\r\n                    var nodeEl = document.getElementById('node-' + prod.id);\r\n                    var lineGroupEl = document.getElementById('line-group-' + prod.id);\r\n                    var lineEl = document.getElementById('line-' + prod.id);\r\n                    var prev = prevData[prod.id];\r\n                    var next = nextData[prod.id];\r\n\r\n                    nodeAngles[prod.id] = next.isVisible ? next.targetAngle : null;\r\n\r\n                    if (prev.isVisible && !next.isVisible) {\r\n                        disappearingNodes.push({\r\n                            prod: prod, nodeEl: nodeEl, lineGroupEl: lineGroupEl, lineEl: lineEl, next: next\r\n                        });\r\n                    } else if (!prev.isVisible && next.isVisible) {\r\n                        appearingNodes.push({\r\n                            prod: prod, nodeEl: nodeEl, lineGroupEl: lineGroupEl, lineEl: lineEl, next: next\r\n                        });\r\n                    } else if (prev.isVisible && next.isVisible) {\r\n                        var dx = prev.coords.x - next.coords.x;\r\n                        var dy = prev.coords.y - next.coords.y;\r\n                        if (Math.abs(dx) > 0.1 || Math.abs(dy) > 0.1) {\r\n                            movingNodes.push({\r\n                                prod: prod, nodeEl: nodeEl, lineGroupEl: lineGroupEl, lineEl: lineEl, next: next\r\n                            });\r\n                        } else {\r\n                            applyLineState(prod, lineGroupEl, lineEl, next.targetAngle, next.targetRadius, true, targetMode, 0);\r\n                        }\r\n                    }\r\n                });\r\n\r\n                renderMobileCards();\r\n\r\n                var phase1Last = disappearingNodes.length > 0\r\n                    ? ((disappearingNodes.length - 1) * TRANSITION_TIMING.staggerDelayMs) + TRANSITION_TIMING.nodeDurationMs\r\n                    : 0;\r\n                var advancingNodes = appearingNodes.concat(movingNodes);\r\n                var phase2Last = advancingNodes.length > 0\r\n                    ? TRANSITION_TIMING.phase2StartMs + ((advancingNodes.length - 1) * TRANSITION_TIMING.staggerDelayMs) + TRANSITION_TIMING.nodeDurationMs\r\n                    : 0;\r\n                var totalDuration = Math.max(phase1Last, phase2Last);\r\n\r\n                activeTransition = {\r\n                    startTime: null,\r\n                    rafId: 0,\r\n                    targetMode: targetMode,\r\n                    scrollStartY: window.pageYOffset,\r\n                    scrollTargetY: targetScrollY,\r\n                    scrollDuration: totalDuration,\r\n                    staggerDelay: TRANSITION_TIMING.staggerDelayMs,\r\n                    phase2Start: TRANSITION_TIMING.phase2StartMs,\r\n                    phase1Started: false,\r\n                    phase2Started: false,\r\n                    cleanedUp: false,\r\n                    disappearingNodes: disappearingNodes,\r\n                    advancingNodes: advancingNodes,\r\n                    cleanupAt: totalDuration,\r\n                    indicatorTarget: indicatorTarget,\r\n                    indicatorStart: {\r\n                        left: selectorIndicatorState.left,\r\n                        width: selectorIndicatorState.width\r\n                    },\r\n                    indicatorDuration: totalDuration,\r\n                    scrollBehavior: setTransitionScrollBehavior()\r\n                };\r\n\r\n                applyAutoScrollBehavior();\r\n                activeTransition.rafId = requestAnimationFrame(runTransitionFrame);\r\n            }\r\n\r\n            function updateSelectorUI(activeBtn, immediateIndicator) {\r\n                \/\/ Quitar activo de todos\r\n                dom.segmentBtns.forEach(btn => btn.classList.remove('active'));\r\n                \r\n                \/\/ A\u00f1adir activo al clickeado\r\n                activeBtn.classList.add('active');\r\n\r\n                \/\/ Cambiar color del indicador seg\u00fan categor\u00eda\r\n                const mode = activeBtn.getAttribute('data-target');\r\n                if (mode === 'tradicional') {\r\n                    dom.indicator.style.backgroundColor = 'var(--color-primary)';\r\n                } else if (mode === 'sostenible') {\r\n                    dom.indicator.style.backgroundColor = 'var(--color-secondary)';\r\n                } else {\r\n                    dom.indicator.style.backgroundColor = 'var(--color-accent)';\r\n                }\r\n\r\n                if (immediateIndicator) {\r\n                    var indicatorTarget = measureIndicatorTarget(activeBtn);\r\n                    applyIndicatorState(indicatorTarget.left, indicatorTarget.width);\r\n                }\r\n\r\n            }\r\n\r\n            function showTooltip(prod, nodeEl) {\r\n                \/\/ Rellenar datos\r\n                dom.tooltip.setAttribute('data-type', prod.type);\r\n                dom.tooltipTitle.textContent = prod.title;\r\n                dom.tooltipDesc.textContent = prod.descShort;\r\n                \r\n                \/\/ Posicionar tooltip (relativo a la ventana)\r\n                const rect = nodeEl.getBoundingClientRect();\r\n                \/\/ Calcular para centrar sobre el nodo\r\n                const top = rect.top;\r\n                const left = rect.left + (rect.width \/ 2) - 130; \/\/ 130 = mitad de ancho de tooltip (260\/2)\r\n\r\n                dom.tooltip.style.top = `${top}px`;\r\n                dom.tooltip.style.left = `${left}px`;\r\n                dom.tooltip.classList.add('show');\r\n            }\r\n\r\n            function hideTooltip() {\r\n                dom.tooltip.classList.remove('show');\r\n            }\r\n\r\n            \/\/ ponytail: token para evitar condiciones de carrera al cambiar r\u00e1pido de producto\r\n            let pendingImageToken = 0;\r\n\r\n            \/\/ ponytail: cache para no duplicar descargas de im\u00e1genes full\r\n            var imageCache = {};\r\n\r\n            \/\/ ponytail: funci\u00f3n reutilizable \u2014 precarga una imagen al cach\u00e9 sin mostrarla\r\n            function preloadImage(url) {\r\n                if (!url || imageCache[url]) return; \/\/ ya descargada o en progreso\r\n                var img = new Image();\r\n                imageCache[url] = img; \/\/ marcar inmediatamente para no duplicar\r\n                img.src = url;\r\n            }\r\n\r\n            \/\/ ponytail: aplica la imagen al modal con fade-in; si falla full, usa thumb\r\n            function applyModalImage(prod, loadToken) {\r\n                var img = new Image();\r\n                img.onload = function() {\r\n                    if (loadToken !== pendingImageToken) return;\r\n                    dom.panelSpinner.classList.remove('active');\r\n                    dom.panelBg.src = prod.full;\r\n                    dom.panelIcon.src = prod.full;\r\n                    dom.panelBg.style.transition = 'opacity 0.35s ease';\r\n                    dom.panelBg.style.opacity = '1';\r\n                };\r\n                img.onerror = function() {\r\n                    \/\/ ponytail: si full falla (404, etc.), mostrar thumb como fallback\r\n                    if (loadToken !== pendingImageToken) return;\r\n                    dom.panelSpinner.classList.remove('active');\r\n                    dom.panelBg.src = prod.thumb;\r\n                    dom.panelIcon.src = prod.thumb;\r\n                    dom.panelBg.style.transition = 'opacity 0.35s ease';\r\n                    dom.panelBg.style.opacity = '1';\r\n                };\r\n                img.src = prod.full;\r\n            }\r\n\r\n            function openSidePanel(productId) {\r\n                var prod = products.find(function(p) { return p.id === productId; });\r\n                if (!prod) return;\r\n\r\n                \/\/ Incrementar token \u2014 cualquier carga anterior se descarta\r\n                var loadToken = ++pendingImageToken;\r\n\r\n                \/\/ Mostrar el modal inmediatamente (animaci\u00f3n spring) con imagen oculta\r\n                dom.panelOverlay.classList.add('active');\r\n                dom.panel.classList.add('active');\r\n                document.body.style.overflow = 'hidden';\r\n\r\n                \/\/ Ocultar imagen actual y mostrar spinner\r\n                dom.panelBg.style.transition = 'opacity 0.15s ease';\r\n                dom.panelBg.style.opacity = '0';\r\n                dom.panelSpinner.classList.add('active');\r\n\r\n                \/\/ Texto se actualiza inmediatamente (no depende de carga)\r\n                dom.panelCat.textContent = 'Modelo ' + prod.type;\r\n                dom.panelCat.style.color = prod.type === 'tradicional' ? 'var(--color-primary)' : 'var(--color-secondary)';\r\n                dom.panelTitle.textContent = prod.title;\r\n                dom.panelDesc.textContent = prod.descLong;\r\n\r\n                \/\/ ponytail: asegurar que full est\u00e9 en cache (\u00fatil en m\u00f3vil donde no hay hover previo)\r\n                preloadImage(prod.full);\r\n\r\n                \/\/ Intentar mostrar full; si falla, usar\u00e1 thumb autom\u00e1ticamente\r\n                applyModalImage(prod, loadToken);\r\n            }\r\n\r\n            function closeSidePanel() {\r\n                dom.panelOverlay.classList.remove('active');\r\n                dom.panel.classList.remove('active');\r\n                document.body.style.overflow = '';\r\n            }\r\n\r\n            \/* ==========================================================================\r\n               EVENT LISTENERS\r\n               ========================================================================== *\/\r\n            function setupEventListeners() {\r\n                \/\/ Selector: scroll y reorganizaci\u00f3n corren en paralelo como una sola animaci\u00f3n continua\r\n                dom.segmentBtns.forEach(function(btn) {\r\n                    btn.addEventListener('click', function(e) {\r\n                        if (isAnimating) return;\r\n                        var activeBtn = e.currentTarget;\r\n                        var targetMode = activeBtn.getAttribute('data-target');\r\n                        if (targetMode === currentMode) return;\r\n\r\n                        isAnimating = true;\r\n                        var prevMode = currentMode;\r\n                        currentMode = targetMode;\r\n\r\n                        \/\/ El scroll y la reorganizaci\u00f3n arrancan dentro del mismo reloj de animaci\u00f3n.\r\n                        updateSelectorUI(activeBtn, false);\r\n                        startModeTransition(prevMode, targetMode, activeBtn);\r\n                    });\r\n                });\r\n\r\n                \/\/ Hover en Nodos (Desktop)\r\n                document.querySelectorAll('.cov-eco-node').forEach(node => {\r\n                    node.addEventListener('mouseenter', (e) => {\r\n                        const id = node.getAttribute('data-id');\r\n                        const prod = products.find(p => p.id === id);\r\n                        \r\n                        \/\/ Resaltar l\u00ednea SVG\r\n                        const lineGroup = document.getElementById(`line-group-${id}`);\r\n                        if (lineGroup) lineGroup.classList.add('active');\r\n                        \r\n                        \/\/ ponytail: al hacer hover, precargar imagen full silenciosamente\r\n                        if (prod) preloadImage(prod.full);\r\n\r\n                        \/\/ Mostrar Tooltip\r\n                        showTooltip(prod, node);\r\n                    });\r\n\r\n                    node.addEventListener('mouseleave', (e) => {\r\n                        const id = node.getAttribute('data-id');\r\n                        const lineGroup = document.getElementById(`line-group-${id}`);\r\n                        if (lineGroup) lineGroup.classList.remove('active');\r\n                        hideTooltip();\r\n                        \r\n                        \/\/ Al quitar el hover, limpiamos los estilos en l\u00ednea para que la animaci\u00f3n orbital los retome inmediatamente\r\n                        const lineEl = document.getElementById(`line-${id}`);\r\n                        if (lineEl) {\r\n                            lineEl.style.stroke = '';\r\n                            lineEl.style.strokeWidth = '';\r\n                        }\r\n                    });\r\n\r\n                    \/\/ Click para Panel\r\n                    node.addEventListener('click', () => {\r\n                        const id = node.getAttribute('data-id');\r\n                        openSidePanel(id);\r\n                    });\r\n                });\r\n\r\n                \/\/ Eventos de Cierre Panel\r\n                dom.panelClose.addEventListener('click', closeSidePanel);\r\n                dom.panel.addEventListener('click', (e) => e.stopPropagation());\r\n                dom.panelOverlay.addEventListener('click', (e) => {\r\n                    if (e.target === dom.panelOverlay) closeSidePanel();\r\n                });\r\n                \r\n                \/\/ Manejar redimensionamiento para reposicionar cosas si es necesario\r\n                window.addEventListener('resize', () => {\r\n                    if (dom.tooltip.classList.contains('show')) {\r\n                        hideTooltip(); \/\/ Ocultar para evitar desalineaci\u00f3n\r\n                    }\r\n                    \/\/ Refrescar selector en redimensionamiento para evitar desajustes del indicador\r\n                    const activeBtn = document.querySelector('.cov-eco-segment-btn.active');\r\n                    if (activeBtn && !isAnimating) updateSelectorUI(activeBtn, true);\r\n                });\r\n            }\r\n\r\n            \/\/ Arrancar la app al cargar\r\n            window.addEventListener('DOMContentLoaded', init);\r\n\r\n            \/\/ Si se carga din\u00e1micamente o ya pas\u00f3 DOMContentLoaded\r\n            if (document.readyState === 'complete' || document.readyState === 'interactive') {\r\n                setTimeout(init, 1);\r\n            }\r\n\r\n        })();\r\n    <\/script>\r\n<\/div>\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>En Fundaci\u00f3n Covelo desarrollamos soluciones financieras que fortalecen a las instituciones que impulsan el crecimiento de miles de emprendedores, microempresarios y peque\u00f1as empresas en Honduras y la regi\u00f3n. Nuestro portafolio se organiza en dos modelos de negocio, dise\u00f1ados para responder a diferentes necesidades estrat\u00e9gicas de las instituciones beneficiarias. Nuestros modelos de negocio \ud83c\udfdb Modelo Tradicional [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-1136","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fundacioncovelo.hn\/master\/wp-json\/wp\/v2\/pages\/1136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fundacioncovelo.hn\/master\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fundacioncovelo.hn\/master\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fundacioncovelo.hn\/master\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fundacioncovelo.hn\/master\/wp-json\/wp\/v2\/comments?post=1136"}],"version-history":[{"count":5,"href":"https:\/\/fundacioncovelo.hn\/master\/wp-json\/wp\/v2\/pages\/1136\/revisions"}],"predecessor-version":[{"id":3554,"href":"https:\/\/fundacioncovelo.hn\/master\/wp-json\/wp\/v2\/pages\/1136\/revisions\/3554"}],"wp:attachment":[{"href":"https:\/\/fundacioncovelo.hn\/master\/wp-json\/wp\/v2\/media?parent=1136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}