{"id":45,"date":"2026-02-13T19:16:42","date_gmt":"2026-02-13T18:16:42","guid":{"rendered":"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/?page_id=45"},"modified":"2026-02-24T18:12:07","modified_gmt":"2026-02-24T17:12:07","slug":"ambiensa","status":"publish","type":"page","link":"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/ambiensa\/","title":{"rendered":"AMBIENSA"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"45\" class=\"elementor elementor-45\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb977e0 e-flex e-con-boxed e-con e-parent\" data-id=\"bb977e0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b098a3e elementor-widget elementor-widget-html\" data-id=\"b098a3e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- 1. Cargamos las librer\u00edas necesarias (Tailwind CSS y Lucide Icons) -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n<!-- 2. Estilos para forzar pantalla completa sobre WordPress -->\r\n<style>\r\n    \/* Bloquear el scroll del body del tema de WP para evitar doble barra *\/\r\n    body { overflow: hidden !important; }\r\n    \r\n    \/* Forzar que la app ocupe toda la pantalla sobre el tema *\/\r\n    #intellect-landing-root {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100vw;\r\n      height: 100vh;\r\n      z-index: 99999; \/* Por encima de todo *\/\r\n      background-color: white;\r\n      overflow-y: auto; \/* Scroll interno *\/\r\n      -webkit-overflow-scrolling: touch;\r\n      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n    }\r\n\r\n    \/* Respetar la barra de admin de WP si el usuario est\u00e1 logueado *\/\r\n    body.admin-bar #intellect-landing-root {\r\n      top: 32px;\r\n      height: calc(100vh - 32px);\r\n    }\r\n    @media screen and (max-width: 782px) {\r\n      body.admin-bar #intellect-landing-root {\r\n        top: 46px;\r\n        height: calc(100vh - 46px);\r\n      }\r\n    }\r\n\r\n    \/* REGLA DE SEGURIDAD PARA IMAGENES EN ELEMENTOR *\/\r\n    #intellect-landing-root img {\r\n        max-width: none !important; \r\n        display: inline-block !important;\r\n    }\r\n<\/style>\r\n\r\n<!-- 3. Estructura Principal -->\r\n<div id=\"intellect-landing-root\" class=\"text-slate-800 antialiased selection:bg-amber-200\">\r\n\r\n    <!-- CONFIDENTIALITY BANNER -->\r\n    <div class=\"bg-red-900 text-white text-[10px] md:text-xs font-mono uppercase tracking-[0.2em] py-2 text-center border-b border-red-800 sticky top-0 z-[60]\">\r\n        <span class=\"flex items-center justify-center gap-2\">\r\n            <i data-lucide=\"lock\" class=\"w-3 h-3\"><\/i> Documento Confidencial \u2022 Solo para Presidencia Ambiensa S.A.\r\n        <\/span>\r\n    <\/div>\r\n\r\n    <!-- NAVIGATION -->\r\n    <nav class=\"sticky top-[33px] w-full z-50 bg-white\/95 backdrop-blur-md border-b border-slate-200 shadow-sm\">\r\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n            <div class=\"flex justify-between h-16 items-center\">\r\n                \r\n                <!-- Logo Area: Alliance -->\r\n                <div class=\"flex items-center gap-4\">\r\n                    <!-- Intellect Systems Logo -->\r\n                    <img decoding=\"async\" \r\n                        src=\"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-content\/uploads\/2026\/02\/intellect.png\" \r\n                        alt=\"Intellect Systems\" \r\n                        class=\"object-contain\"\r\n                        style=\"height: 24px !important; width: auto !important;\"\r\n                    \/>\r\n                    \r\n                    <!-- Divider -->\r\n                    <div class=\"h-6 w-px bg-slate-300 hidden sm:block\"><\/div>\r\n                    \r\n                    <!-- Ambiensa Logo -->\r\n                    <div class=\"hidden sm:flex flex-col opacity-90\">\r\n                        <span class=\"text-[8px] uppercase tracking-widest text-slate-400 font-semibold mb-0.5\">Propuesta para:<\/span>\r\n                        <img decoding=\"async\" \r\n                            src=\"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-content\/uploads\/2026\/02\/download-2.jpeg\"\r\n                            alt=\"Mundo Ambiensa\" \r\n                            class=\"object-contain mix-blend-multiply\"\r\n                            style=\"height: 28px !important; width: auto !important;\"\r\n                        \/>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Desktop Menu -->\r\n                <div class=\"hidden md:flex items-center space-x-6\">\r\n                    <div class=\"flex space-x-6 text-sm font-medium text-slate-600\">\r\n                        <a href=\"#vision\" class=\"hover:text-blue-900 transition\">Visi\u00f3n<\/a>\r\n                        <a href=\"#solucion\" class=\"hover:text-blue-900 transition\">Estrategia<\/a>\r\n                        <a href=\"#diferencia\" class=\"hover:text-blue-900 transition\">Diferenciadores<\/a>\r\n                    <\/div>\r\n                    <!-- BOT\u00d3N HEADER -->\r\n                    <button \r\n                        onclick=\"openPardotForm()\"\r\n                        class=\"bg-slate-900 text-white px-5 py-2 rounded-full text-xs font-semibold hover:bg-slate-800 transition shadow-lg shadow-slate-900\/20 flex items-center gap-2 border border-slate-700\"\r\n                    >\r\n                        <i data-lucide=\"mouse-pointer-2\" class=\"w-4 h-4\"><\/i>\r\n                        Me interesa\r\n                    <\/button>\r\n                <\/div>\r\n\r\n                <!-- Mobile Menu Icon -->\r\n                <div class=\"md:hidden text-slate-600\">\r\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-8 h-8\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" \/>\r\n                    <\/svg>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/nav>\r\n\r\n    <!-- SECTION 1: HERO -->\r\n    <header id=\"vision\" class=\"relative pt-16 pb-16 lg:pt-24 lg:pb-20 overflow-hidden bg-slate-900\">\r\n        <!-- Background Image -->\r\n        <div class=\"absolute inset-0 z-0\">\r\n            <img decoding=\"async\" \r\n                src=\"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop\" \r\n                alt=\"Modern Urban Architecture\" \r\n                class=\"w-full h-full object-cover opacity-60 mix-blend-overlay\"\r\n            \/>\r\n            <div class=\"absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-900\/90 to-blue-950\/80\"><\/div>\r\n            <div class=\"absolute top-0 right-0 w-1\/2 h-full bg-gradient-to-l from-amber-500\/10 to-transparent\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\r\n                \r\n                <!-- Left Column -->\r\n                <div class=\"space-y-6\">\r\n                    <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-500\/10 border border-amber-500\/30 text-amber-400 text-xs font-bold uppercase tracking-wider shadow-[0_0_15px_rgba(245,158,11,0.2)]\">\r\n                        <i data-lucide=\"building-2\" class=\"w-3 h-3\"><\/i>\r\n                        Infraestructura Digital 2025\r\n                    <\/div>\r\n                    \r\n                    <h1 class=\"text-4xl lg:text-5xl font-extrabold text-white leading-[1.15]\">\r\n                        De la Vivienda Digna a la <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-amber-500\">Ciudad Inteligente<\/span>\r\n                    <\/h1>\r\n                    \r\n                    <h2 class=\"text-lg lg:text-xl text-slate-300 font-light leading-relaxed max-w-lg\">\r\n                        El sistema nervioso digital para gobernar <strong class=\"text-white font-medium\">Mundo Ambiensa<\/strong>. Una experiencia \"Premium\" para 180,000 habitantes, sin reemplazar a Kipit.\r\n                    <\/h2>\r\n                    \r\n                    <div class=\"pt-6 flex flex-col sm:flex-row gap-4\">\r\n                        <button class=\"bg-amber-500 text-slate-900 px-8 py-4 rounded-lg font-bold text-lg hover:bg-amber-400 transition-all duration-300 shadow-[0_0_20px_rgba(245,158,11,0.4)] flex items-center justify-center gap-2\">\r\n                            Ver Estrategia de Escala\r\n                            <i data-lucide=\"arrow-right\" class=\"w-5 h-5\"><\/i>\r\n                        <\/button>\r\n                        <div class=\"flex items-center gap-4 px-4 py-2 opacity-80\">\r\n                            <div class=\"bg-white\/10 p-1 rounded\">\r\n                                <!-- AUMENTADO: Intellect a 28px -->\r\n                                <img decoding=\"async\" \r\n                                    src=\"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-content\/uploads\/2026\/02\/intellect.png\" \r\n                                    class=\"w-auto\" \r\n                                    alt=\"Intellect\"\r\n                                    style=\"height: 28px !important;\"\r\n                                \/>\r\n                            <\/div>\r\n                            <span class=\"text-slate-500 text-2xl font-thin\">\/<\/span>\r\n                            <!-- AUMENTADO: Salesforce a 32px -->\r\n                            <img decoding=\"async\" \r\n                                src=\"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-content\/uploads\/2026\/02\/download-1.png\" \r\n                                alt=\"Salesforce\"\r\n                                class=\"w-auto object-contain\"\r\n                                style=\"height: 32px !important;\"\r\n                            \/>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Right Column: Video de YouTube -->\r\n                <div class=\"relative group w-full pt-[56.25%] rounded-2xl overflow-hidden shadow-2xl border border-slate-800 bg-slate-900\">\r\n                    <!-- Glow Border Effect -->\r\n                    <div class=\"absolute -inset-[2px] bg-gradient-to-tr from-amber-500 via-slate-500 to-blue-600 rounded-2xl blur-sm opacity-40 group-hover:opacity-100 transition duration-1000 z-0\"><\/div>\r\n                    \r\n                    <!-- YouTube Iframe -->\r\n                    <iframe \r\n                        class=\"absolute top-0 left-0 w-full h-full z-10 rounded-2xl\"\r\n                        src=\"https:\/\/www.youtube.com\/embed\/6xxays2S3Rc?autoplay=0&controls=1&rel=0\" \r\n                        title=\"Mensaje para la Directiva\" \r\n                        frameborder=\"0\" \r\n                        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" \r\n                        allowfullscreen>\r\n                    <\/iframe>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <!-- SECTION 2: EMPATHY -->\r\n    <section class=\"py-24 bg-white\">\r\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\r\n                \r\n                <!-- Left: Image -->\r\n                <div class=\"relative order-2 lg:order-1\">\r\n                    <div class=\"relative rounded-2xl overflow-hidden shadow-2xl border border-slate-100\">\r\n                        <img decoding=\"async\" \r\n                            src=\"https:\/\/images.unsplash.com\/photo-1545324418-cc1a3fa10c00?q=80&w=2070&auto=format&fit=crop\" \r\n                            alt=\"Render Gran Ciudad Ambiensa\" \r\n                            class=\"w-full h-full object-cover transform hover:scale-105 transition duration-700\"\r\n                        \/>\r\n                        <div class=\"absolute top-4 left-4\">\r\n                            <div class=\"bg-white\/95 backdrop-blur-sm px-6 py-3 rounded-lg shadow-lg\">\r\n                                <!-- AUMENTADO: Ambiensa Overlay a 60px -->\r\n                                <img decoding=\"async\" \r\n                                    src=\"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-content\/uploads\/2026\/02\/download-2.jpeg\" \r\n                                    alt=\"Ambiensa Logo\" \r\n                                    class=\"mix-blend-multiply\"\r\n                                    style=\"height: 60px !important; width: auto !important;\"\r\n                                \/>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"absolute -bottom-8 -right-8 bg-slate-900 p-8 rounded-xl shadow-[0_20px_50px_rgba(15,23,42,0.3)] border-t-4 border-amber-500 hidden md:block max-w-xs\">\r\n                        <div class=\"flex items-start gap-4\">\r\n                            <div class=\"p-3 bg-white\/10 rounded-lg text-amber-400\">\r\n                                <i data-lucide=\"users\" class=\"w-6 h-6\"><\/i>\r\n                            <\/div>\r\n                            <div>\r\n                                <div class=\"text-3xl font-bold text-white mb-1\">180,000<\/div>\r\n                                <div class=\"text-xs text-slate-400 uppercase tracking-wider font-semibold\">Residentes Proyectados<\/div>\r\n                                <div class=\"mt-3 text-[10px] text-slate-500 leading-tight\">\r\n                                    El equivalente a administrar una ciudad mediana completa.\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Right: Copy -->\r\n                <div class=\"order-1 lg:order-2\">\r\n                    <h2 class=\"text-amber-600 font-bold uppercase tracking-widest text-xs mb-3 flex items-center gap-2\">\r\n                        <span class=\"w-8 h-px bg-amber-600\"><\/span>\r\n                        El Contexto Operativo\r\n                    <\/h2>\r\n                    <h3 class=\"text-3xl lg:text-4xl font-bold text-slate-900 mb-6 leading-tight\">\r\n                        El Reto: Gestionar una <br\/><span class=\"italic text-slate-500 font-serif\">Metr\u00f3polis Privada<\/span>\r\n                    <\/h3>\r\n                    \r\n                    <p class=\"text-lg text-slate-600 mb-8 leading-relaxed\">\r\n                        Con el \u00e9xito del programa <span class=\"font-bold text-slate-800\">\"Miti Miti\"<\/span> y la entrega de 10,000 nuevas viviendas, el desaf\u00edo operativo cambia dr\u00e1sticamente. Las herramientas actuales son excelentes para construir, pero \u00bfson suficientes para gobernar?\r\n                    <\/p>\r\n\r\n                    <div class=\"space-y-4 mb-8\">\r\n                        <div class=\"flex gap-4 p-5 bg-slate-50 rounded-xl border border-slate-100 hover:border-amber-200 transition-colors group\">\r\n                            <div class=\"flex-shrink-0 mt-1\">\r\n                                <div class=\"w-5 h-5 rounded-full border-2 border-slate-300 text-slate-400 flex items-center justify-center text-xs font-bold group-hover:border-amber-500 group-hover:text-amber-500 transition-colors\">?<\/div>\r\n                            <\/div>\r\n                            <p class=\"text-slate-700 font-medium\">\u00bfC\u00f3mo atender miles de consultas por WhatsApp sin perder la calidez?<\/p>\r\n                        <\/div>\r\n                        <div class=\"flex gap-4 p-5 bg-slate-50 rounded-xl border border-slate-100 hover:border-amber-200 transition-colors group\">\r\n                            <div class=\"flex-shrink-0 mt-1\">\r\n                                <div class=\"w-5 h-5 rounded-full border-2 border-slate-300 text-slate-400 flex items-center justify-center text-xs font-bold group-hover:border-amber-500 group-hover:text-amber-500 transition-colors\">?<\/div>\r\n                            <\/div>\r\n                            <p class=\"text-slate-700 font-medium\">\u00bfC\u00f3mo gestionar garant\u00edas con la misma velocidad que las bombas CIFA?<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3: SOLUTION -->\r\n    <section id=\"solucion\" class=\"py-24 bg-slate-50 relative overflow-hidden\">\r\n        <div class=\"absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-slate-300 to-transparent\"><\/div>\r\n        <div class=\"absolute -left-20 top-40 w-64 h-64 bg-blue-100 rounded-full blur-3xl opacity-50\"><\/div>\r\n        <div class=\"absolute -right-20 bottom-40 w-64 h-64 bg-amber-100 rounded-full blur-3xl opacity-50\"><\/div>\r\n\r\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\r\n            <div class=\"text-center max-w-3xl mx-auto mb-20\">\r\n                <div class=\"flex justify-center items-center gap-8 mb-8\">\r\n                   <div class=\"flex items-center gap-4 bg-white px-6 py-3 rounded-full shadow-sm border border-slate-200\">\r\n                      <!-- AUMENTADO: Intellect a 32px -->\r\n                      <img decoding=\"async\" \r\n                        src=\"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-content\/uploads\/2026\/02\/intellect.png\" \r\n                        class=\"opacity-90 w-auto\" \r\n                        alt=\"Intellect\"\r\n                        style=\"height: 32px !important;\"\r\n                      \/>\r\n                      <span class=\"text-slate-300 text-xl font-light\">+<\/span>\r\n                      <!-- AUMENTADO: Salesforce a 40px -->\r\n                      <img decoding=\"async\" \r\n                        src=\"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-content\/uploads\/2026\/02\/download-1.png\"\r\n                        class=\"w-auto\"\r\n                        alt=\"Salesforce\"\r\n                        style=\"height: 40px !important;\"\r\n                      \/>\r\n                   <\/div>\r\n                <\/div>\r\n                <h2 class=\"text-3xl font-bold text-slate-900 mb-4\">Su \"Capa de Inteligencia\" de Servicio al Cliente<\/h2>\r\n                <p class=\"text-slate-600 text-lg\">\r\n                  Implementamos <span class=\"font-semibold text-slate-900\">Salesforce Service Cloud<\/span> como el cerebro que orquesta la comunicaci\u00f3n, integrado perfectamente con su Data Center y Kipit.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n                <!-- Card 1 -->\r\n                <div class=\"bg-white p-8 rounded-2xl shadow-sm hover:shadow-xl transition-shadow border-t-4 border-green-500 group relative overflow-hidden\">\r\n                  <div class=\"absolute top-0 right-0 w-24 h-24 bg-green-50 rounded-bl-full -mr-4 -mt-4 z-0 transition-transform group-hover:scale-110\"><\/div>\r\n                  <div class=\"relative z-10\">\r\n                    <div class=\"w-12 h-12 bg-green-100 text-green-700 rounded-xl flex items-center justify-center mb-6 shadow-sm\">\r\n                      <i data-lucide=\"message-circle\" class=\"w-6 h-6\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"text-xl font-bold text-slate-900 mb-3\">Atenci\u00f3n Omnicanal <br\/>(WhatsApp First)<\/h3>\r\n                    <p class=\"text-slate-600 text-sm leading-relaxed\">\r\n                      Centralice el 100% de las interacciones. Un sistema que prioriza autom\u00e1ticamente los casos urgentes para que su equipo resuelva lo importante, no lo repetitivo.\r\n                    <\/p>\r\n                  <\/div>\r\n                <\/div>\r\n\r\n                <!-- Card 2 -->\r\n                <div class=\"bg-white p-8 rounded-2xl shadow-sm hover:shadow-xl transition-shadow border-t-4 border-amber-500 group relative overflow-hidden\">\r\n                  <div class=\"absolute top-0 right-0 w-24 h-24 bg-amber-50 rounded-bl-full -mr-4 -mt-4 z-0 transition-transform group-hover:scale-110\"><\/div>\r\n                  <div class=\"relative z-10\">\r\n                    <div class=\"w-12 h-12 bg-amber-100 text-amber-600 rounded-xl flex items-center justify-center mb-6 shadow-sm\">\r\n                      <i data-lucide=\"check-circle-2\" class=\"w-6 h-6\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"text-xl font-bold text-slate-900 mb-3\">Trazabilidad Total <br\/>de la Post-Venta<\/h3>\r\n                    <p class=\"text-slate-600 text-sm leading-relaxed\">\r\n                      Elimine la fricci\u00f3n en la entrega. Convierta las quejas (PQR) en lealtad. Cada residente tendr\u00e1 visibilidad del estado de su solicitud en tiempo real.\r\n                    <\/p>\r\n                  <\/div>\r\n                <\/div>\r\n\r\n                <!-- Card 3 -->\r\n                <div class=\"bg-white p-8 rounded-2xl shadow-sm hover:shadow-xl transition-shadow border-t-4 border-blue-600 group relative overflow-hidden\">\r\n                  <div class=\"absolute top-0 right-0 w-24 h-24 bg-blue-50 rounded-bl-full -mr-4 -mt-4 z-0 transition-transform group-hover:scale-110\"><\/div>\r\n                  <div class=\"relative z-10\">\r\n                    <div class=\"w-12 h-12 bg-blue-100 text-blue-700 rounded-xl flex items-center justify-center mb-6 shadow-sm\">\r\n                      <i data-lucide=\"bar-chart-3\" class=\"w-6 h-6\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"text-xl font-bold text-slate-900 mb-3\">Gobernanza de Datos <br\/>\"Ciudad 15 Minutos\"<\/h3>\r\n                    <p class=\"text-slate-600 text-sm leading-relaxed\">\r\n                      Stefano, su visi\u00f3n requiere datos. Obtenga tableros en tiempo real sobre satisfacci\u00f3n, tiempos de respuesta y salud de la comunidad.\r\n                    <\/p>\r\n                  <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 4: DIFFERENTIATION -->\r\n    <section id=\"diferencia\" class=\"py-24 bg-white\">\r\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\r\n                \r\n                <div>\r\n                    <h2 class=\"text-3xl font-bold text-slate-900 mb-6\">La Diferencia Intellect<\/h2>\r\n                    <p class=\"text-slate-600 mb-10 text-lg\">\r\n                        No somos solo implementadores de software. Somos arquitectos de soluciones que entienden la idiosincrasia del mercado inmobiliario ecuatoriano.\r\n                    <\/p>\r\n                    \r\n                    <div class=\"space-y-8\">\r\n                        <div class=\"flex gap-5\">\r\n                            <div class=\"flex-shrink-0\">\r\n                                <div class=\"w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center border border-slate-200\">\r\n                                    <i data-lucide=\"server\" class=\"w-5 h-5 text-slate-600\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div>\r\n                                <h4 class=\"font-bold text-slate-900 text-lg\">Integraci\u00f3n con Kipit (No Reemplazo)<\/h4>\r\n                                <p class=\"text-slate-600 mt-2 leading-relaxed\">\r\n                                    Respetamos su ecosistema. Salesforce maneja la relaci\u00f3n (Front-end), mientras <span class=\"font-semibold text-slate-800\">Kipit y SoftExpert<\/span> gestionan los procesos documentales (Back-end).\r\n                                <\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"flex gap-5\">\r\n                            <div class=\"flex-shrink-0\">\r\n                                <div class=\"w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center border border-slate-200\">\r\n                                    <i data-lucide=\"shield-check\" class=\"w-5 h-5 text-slate-600\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div>\r\n                                <h4 class=\"font-bold text-slate-900 text-lg\">Seguridad Bancaria para su Data Center<\/h4>\r\n                                <p class=\"text-slate-600 mt-2 leading-relaxed\">\r\n                                    Respetamos la soberan\u00eda de sus datos con est\u00e1ndares globales de ciberseguridad, protegiendo la informaci\u00f3n de sus <span class=\"font-semibold text-slate-800\">35,000 familias<\/span>.\r\n                                <\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"flex gap-5\">\r\n                            <div class=\"flex-shrink-0\">\r\n                                <div class=\"w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center border border-slate-200\">\r\n                                    <i data-lucide=\"building-2\" class=\"w-5 h-5 text-slate-600\"><\/i>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div>\r\n                                <h4 class=\"font-bold text-slate-900 text-lg\">Patriotismo Econ\u00f3mico<\/h4>\r\n                                <p class=\"text-slate-600 mt-2 leading-relaxed\">\r\n                                    Somos una firma global con ra\u00edces ecuatorianas. Entendemos el IESS, el BIESS y la realidad del cliente guayaquile\u00f1o.\r\n                                <\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Badges -->\r\n                <div class=\"bg-slate-50 rounded-2xl p-10 border border-slate-100 text-center\">\r\n                   <h3 class=\"font-bold text-slate-800 mb-2\">Tecnolog\u00eda Auditada<\/h3>\r\n                   <p class=\"text-sm text-slate-500 mb-8 max-w-sm mx-auto\">\r\n                     Su servicio al cliente ser\u00e1 un activo certificable ante inversores, al mismo nivel que sus certificaciones de construcci\u00f3n.\r\n                   <\/p>\r\n                   \r\n                   <div class=\"flex flex-wrap justify-center gap-6 opacity-60 grayscale hover:grayscale-0 transition-all duration-500 mb-10\">\r\n                     <div class=\"flex flex-col items-center gap-2\">\r\n                       <div class=\"h-12 w-12 bg-slate-200 rounded-full flex items-center justify-center font-bold text-xs text-slate-500\">EDGE<\/div>\r\n                       <span class=\"text-[10px] font-bold text-slate-400\">Certificado<\/span>\r\n                     <\/div>\r\n                     <div class=\"h-12 w-px bg-slate-300\"><\/div>\r\n                     <div class=\"flex flex-col items-center gap-2\">\r\n                       <div class=\"h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center font-bold text-xs text-blue-600\">CRM<\/div>\r\n                       <span class=\"text-[10px] font-bold text-blue-400\">Auditado<\/span>\r\n                     <\/div>\r\n                     <div class=\"h-12 w-px bg-slate-300\"><\/div>\r\n                     <div class=\"flex flex-col items-center gap-2\">\r\n                       <div class=\"h-12 w-12 bg-slate-200 rounded-full flex items-center justify-center font-bold text-xs text-slate-500\">ECO<\/div>\r\n                       <span class=\"text-[10px] font-bold text-slate-400\">Holcim<\/span>\r\n                     <\/div>\r\n                   <\/div>\r\n\r\n                   <div class=\"bg-white p-6 rounded-xl shadow-lg border-l-4 border-slate-900 relative\">\r\n                     <div class=\"text-4xl text-slate-200 absolute top-2 left-2 font-serif\">\"<\/div>\r\n                     <p class=\"text-lg font-serif italic text-slate-800 relative z-10 px-4\">\r\n                       La tecnolog\u00eda no es un gasto, es el sistema nervioso de la nueva ciudad.\r\n                     <\/p>\r\n                   <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- FOOTER -->\r\n    <footer class=\"bg-slate-900 text-white py-24 border-t border-slate-800 relative overflow-hidden\">\r\n        <div class=\"absolute bottom-0 left-1\/2 -translate-x-1\/2 w-[800px] h-[400px] bg-blue-900\/20 rounded-full blur-[100px] pointer-events-none\"><\/div>\r\n\r\n        <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10\">\r\n            \r\n            <h2 class=\"text-3xl lg:text-5xl font-extrabold mb-8 tracking-tight\">Hablemos de Gobernanza,<br\/>no de Software.<\/h2>\r\n            <p class=\"text-slate-400 text-lg mb-12 max-w-2xl mx-auto font-light\">\r\n                Estimado Stefano, la tecnolog\u00eda para gestionar una ciudad de 180,000 personas ya existe. Perm\u00edtanos mostr\u00e1rsela en una sesi\u00f3n ejecutiva.\r\n            <\/p>\r\n\r\n            <div class=\"bg-slate-800\/50 backdrop-blur-sm p-1 rounded-2xl border border-slate-700 max-w-md mx-auto hover:bg-slate-800\/80 transition-colors inline-block w-full\">\r\n                 <!-- BOT\u00d3N FOOTER MODIFICADO -->\r\n                 <button \r\n                   onclick=\"openPardotForm()\"\r\n                   class=\"w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-5 px-8 rounded-xl transition-all shadow-lg hover:shadow-blue-500\/20 flex items-center justify-center gap-3\"\r\n                 >\r\n                   <i data-lucide=\"mouse-pointer-2\" class=\"w-6 h-6\"><\/i>\r\n                   Me interesa\r\n                 <\/button>\r\n            <\/div>\r\n            <p class=\"mt-6 text-sm text-slate-500\">\r\n                 Propuesta directa a la Direcci\u00f3n de Intellect Systems\r\n            <\/p>\r\n\r\n            <div class=\"mt-20 pt-8 border-t border-slate-800\/50 flex flex-col md:flex-row justify-between items-center gap-6\">\r\n                <div class=\"flex items-center gap-4 transition-all\">\r\n                    <!-- SMALL FOOTER LOGOS -->\r\n                    <div class=\"bg-white rounded p-1\">\r\n                      <!-- AUMENTADO: Intellect a 24px -->\r\n                      <img decoding=\"async\" \r\n                        src=\"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-content\/uploads\/2026\/02\/intellect.png\" \r\n                        class=\"w-auto\" \r\n                        alt=\"Intellect\"\r\n                        style=\"height: 24px !important;\"\r\n                      \/>\r\n                    <\/div>\r\n                    <div class=\"h-4 w-px bg-slate-600\"><\/div>\r\n                    <div class=\"bg-white rounded p-1\">\r\n                      <!-- AUMENTADO: Ambiensa a 24px -->\r\n                      <img decoding=\"async\" \r\n                        src=\"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-content\/uploads\/2026\/02\/download-2.jpeg\" \r\n                        class=\"w-auto\" \r\n                        alt=\"Ambiensa\"\r\n                        style=\"height: 24px !important;\"\r\n                      \/>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"flex items-center gap-2 text-xs text-slate-500 bg-black\/20 px-3 py-1 rounded-full border border-white\/5\">\r\n                  <i data-lucide=\"lock\" class=\"w-3 h-3\"><\/i>\r\n                  <span>CONFIDENCIAL: Documento interno para Presidencia<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/footer>\r\n\r\n    <!-- ============================================== -->\r\n    <!-- MODALES Y L\u00d3GICA DE FORMULARIO PARDOT\/FORMSUBMIT -->\r\n    <!-- ============================================== -->\r\n\r\n    <!-- FORMULARIO MODAL DE PARDOT -->\r\n    <div id=\"leadFormModal\" class=\"fixed inset-0 z-[100000] hidden\" aria-labelledby=\"modal-title\" role=\"dialog\" aria-modal=\"true\">\r\n      <!-- Backdrop -->\r\n      <div class=\"fixed inset-0 bg-slate-900\/80 transition-opacity backdrop-blur-sm\" onclick=\"closePardotForm()\"><\/div>\r\n\r\n      <div class=\"fixed inset-0 z-10 w-screen overflow-y-auto\">\r\n        <div class=\"flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0\">\r\n          \r\n          <!-- Modal Panel -->\r\n          <div class=\"relative transform overflow-hidden rounded-2xl bg-white text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-lg border border-slate-200\">\r\n            \r\n            <div class=\"bg-white px-6 pb-6 pt-6 sm:p-8\">\r\n              <div class=\"sm:flex sm:items-start\">\r\n                <div class=\"w-full\">\r\n                  <div class=\"flex items-center justify-between mb-2\">\r\n                      <h3 class=\"text-2xl font-bold leading-6 text-slate-900\" id=\"modal-title\">Solicitar Contacto<\/h3>\r\n                      <button onclick=\"closePardotForm()\" class=\"text-slate-400 hover:text-slate-600 transition\">\r\n                          <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\r\n                      <\/button>\r\n                  <\/div>\r\n                  <p class=\"text-sm text-slate-500 mb-6\">\r\n                    D\u00e9janos tus datos para coordinar la sesi\u00f3n ejecutiva con la direcci\u00f3n de Intellect Systems.\r\n                  <\/p>\r\n                  \r\n                  <!-- IFRAME OCULTO PARDOT -->\r\n                  <iframe name=\"pardot-hidden-frame\" style=\"display:none;\" title=\"pardot-hidden\"><\/iframe>\r\n\r\n                  <!-- PARDOT FORM -->\r\n                  <form id=\"pardot-form\" action=\"https:\/\/www2.intellectsystem.net\/l\/874111\/2026-02-20\/j7875t\" method=\"POST\" target=\"pardot-hidden-frame\" class=\"space-y-5\">\r\n                    \r\n                    <div>\r\n                      <label for=\"first_name\" class=\"block text-sm font-semibold text-slate-700 mb-1\">Nombre<\/label>\r\n                      <input type=\"text\" name=\"first_name\" id=\"first_name\" class=\"block w-full rounded-lg border-slate-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-3 border bg-slate-50 outline-none\" placeholder=\"Ej. Stefano Amador\">\r\n                    <\/div>\r\n\r\n                    <div>\r\n                      <label for=\"email\" class=\"block text-sm font-semibold text-slate-700 mb-1\">Email Corporativo <span class=\"text-red-500\">*<\/span><\/label>\r\n                      <input type=\"email\" name=\"email\" id=\"email\" required class=\"block w-full rounded-lg border-slate-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-3 border bg-slate-50 outline-none\" placeholder=\"Ej. gerencia@ambiensa.com\">\r\n                    <\/div>\r\n\r\n                    <div>\r\n                      <label for=\"phone\" class=\"block text-sm font-semibold text-slate-700 mb-1\">Tel\u00e9fono<\/label>\r\n                      <input type=\"text\" name=\"phone\" id=\"phone\" class=\"block w-full rounded-lg border-slate-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-3 border bg-slate-50 outline-none\" placeholder=\"Ej. 099...\">\r\n                    <\/div>\r\n\r\n                    <div class=\"pt-2\">\r\n                      <button type=\"submit\" id=\"btn-submit-pardot\" class=\"inline-flex w-full justify-center items-center gap-2 rounded-lg bg-slate-900 px-4 py-4 text-base font-bold text-white shadow-lg hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900 transition-all disabled:opacity-75\">\r\n                        Enviar Solicitud\r\n                      <\/button>\r\n                    <\/div>\r\n\r\n                  <\/form>\r\n\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"bg-slate-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 border-t border-slate-100\">\r\n               <div class=\"flex items-center justify-center w-full gap-2 text-xs text-slate-400\">\r\n                   <i data-lucide=\"shield-check\" class=\"w-3 h-3\"><\/i>\r\n                   Sus datos est\u00e1n protegidos bajo estricta confidencialidad.\r\n               <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- MODAL \u00c9XITO -->\r\n    <div id=\"success-modal\" class=\"fixed inset-0 z-[200000] hidden items-center justify-center\">\r\n        <div class=\"absolute inset-0 bg-slate-900\/90 backdrop-blur-sm\" onclick=\"closeSuccessModal()\"><\/div>\r\n        \r\n        <div class=\"relative bg-white rounded-xl shadow-2xl p-8 max-w-md mx-4 text-center border-t-4 border-emerald-500 z-10 w-full transform transition-all\">\r\n            <button onclick=\"closeSuccessModal()\" class=\"absolute top-4 right-4 text-slate-400 hover:text-slate-600 cursor-pointer\">\r\n                <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\r\n            <\/button>\r\n            \r\n            <div class=\"w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-6\">\r\n                <i data-lucide=\"check\" class=\"w-8 h-8 text-emerald-600\"><\/i>\r\n            <\/div>\r\n            \r\n            <h3 class=\"text-2xl font-bold text-slate-900 mb-4\">\u00a1Gracias por el inter\u00e9s!<\/h3>\r\n            <p class=\"text-slate-600 text-base leading-relaxed mb-8\">\r\n                Hemos recibido tus datos. Nos pondremos en contacto contigo por el mismo medio para coordinar la reuni\u00f3n ejecutiva.\r\n            <\/p>\r\n            \r\n            <button onclick=\"closeSuccessModal()\" class=\"w-full bg-slate-900 text-white py-3.5 rounded-lg font-bold hover:bg-slate-800 transition-colors shadow-md cursor-pointer\">\r\n                Entendido\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- 4. Inicializar Iconos y Funciones -->\r\n<script>\r\n    lucide.createIcons();\r\n\r\n    function openPardotForm() {\r\n        document.getElementById('leadFormModal').classList.remove('hidden');\r\n    }\r\n    \r\n    function closePardotForm() {\r\n        document.getElementById('leadFormModal').classList.add('hidden');\r\n    }\r\n\r\n    function closeSuccessModal() {\r\n        document.getElementById('success-modal').classList.add('hidden');\r\n        document.getElementById('success-modal').classList.remove('flex');\r\n    }\r\n\r\n    \/\/ L\u00f3gica de Env\u00edo Doble (Pardot + FormSubmit Backup)\r\n    document.getElementById('pardot-form').addEventListener('submit', async function(e) {\r\n        e.preventDefault();\r\n        \r\n        const form = this;\r\n        const submitBtn = document.getElementById('btn-submit-pardot');\r\n        submitBtn.disabled = true;\r\n        submitBtn.innerHTML = '<i data-lucide=\"loader-2\" class=\"w-5 h-5 animate-spin\"><\/i> Enviando...';\r\n        lucide.createIcons(); \/\/ Recargar el \u00edcono de carga\r\n\r\n        const formData = new FormData(form);\r\n        const backupUrl = \"https:\/\/formsubmit.co\/ajax\/fernando.cajaraville@intellectsystem.net\";\r\n\r\n        try {\r\n            \/\/ 1. Env\u00edo de Respaldo a FormSubmit (Para no perder el Lead si Pardot falla)\r\n            await fetch(backupUrl, {\r\n                method: 'POST',\r\n                headers: {\r\n                    'Content-Type': 'application\/json',\r\n                    'Accept': 'application\/json'\r\n                },\r\n                body: JSON.stringify({\r\n                    _subject: \"\u00a1Nuevo Lead! (Ambiensa - Intellect Systems)\",\r\n                    Nombre: formData.get('first_name') || 'No especificado',\r\n                    Email: formData.get('email'),\r\n                    Tel\u00e9fono: formData.get('phone') || 'No especificado',\r\n                    _template: \"table\"\r\n                })\r\n            });\r\n        } catch (error) {\r\n            console.error(\"Error en respaldo:\", error);\r\n        } finally {\r\n            \/\/ 2. Env\u00edo a Pardot (Iframe oculto)\r\n            form.submit();\r\n            \r\n            \/\/ 3. UI Updates (Cerrar form, abrir modal de \u00e9xito)\r\n            setTimeout(() => {\r\n                form.reset();\r\n                submitBtn.disabled = false;\r\n                submitBtn.innerText = 'Enviar Solicitud';\r\n                \r\n                closePardotForm();\r\n                \r\n                const successModal = document.getElementById('success-modal');\r\n                successModal.classList.remove('hidden');\r\n                successModal.classList.add('flex'); \/\/ Se usa flex para centrar el contenido\r\n            }, 800);\r\n        }\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Documento Confidencial \u2022 Solo para Presidencia Ambiensa S.A. Propuesta para: Visi\u00f3n Estrategia Diferenciadores Me interesa Infraestructura Digital 2025 De la Vivienda Digna a la Ciudad Inteligente El sistema nervioso digital para gobernar Mundo Ambiensa. Una experiencia \u00abPremium\u00bb para 180,000 habitantes, sin reemplazar a Kipit. Ver Estrategia de Escala \/ 180,000 Residentes Proyectados El equivalente a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-45","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-json\/wp\/v2\/pages\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":10,"href":"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-json\/wp\/v2\/pages\/45\/revisions"}],"predecessor-version":[{"id":150,"href":"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-json\/wp\/v2\/pages\/45\/revisions\/150"}],"wp:attachment":[{"href":"https:\/\/intellectsystem.net\/propuesta.intellectsystem.net\/wp-json\/wp\/v2\/media?parent=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}