rf-v4.14 - site ready - demo upload

css/styles.css

@@ -366,7 +366,63 @@ p, li, .lead-text, .text-body, .text-muted {
       rgba(44,109,140, 0.2) 70%,
       rgba(44,109,140, 0.05) 100%
     ),
-    url('../assets/img/hero/hero_017.png');
+    url('../assets/img/hero/hablemos.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.herobg-2a{
+    background-image: 
+    linear-gradient(
+      to right,
+      rgba(44,109,140, 1) 0%,
+      rgba(44,109,140, 0.5) 40%,
+      rgba(44,109,140, 0.2) 70%,
+      rgba(44,109,140, 0.05) 100%
+    ),
+    url('../assets/img/hero/8.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.herobg-2b{
+    background-image: 
+    linear-gradient(
+      to right,
+      rgba(44,109,140, 1) 0%,
+      rgba(44,109,140, 0.5) 40%,
+      rgba(44,109,140, 0.2) 70%,
+      rgba(44,109,140, 0.05) 100%
+    ),
+    url('../assets/img/hero/9.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.herobg-2c{
+    background-image: 
+    linear-gradient(
+      to right,
+      rgba(44,109,140, 1) 0%,
+      rgba(44,109,140, 0.5) 40%,
+      rgba(44,109,140, 0.2) 70%,
+      rgba(44,109,140, 0.05) 100%
+    ),
+    url('../assets/img/hero/hablemos\ claro.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.herobg-2d{
+    background-image: 
+    linear-gradient(
+      to right,
+      rgba(44,109,140, 1) 0%,
+      rgba(44,109,140, 0.5) 40%,
+      rgba(44,109,140, 0.2) 70%,
+      rgba(44,109,140, 0.05) 100%
+    ),
+    url('../assets/img/hero/8_1.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -469,6 +525,20 @@ p, li, .lead-text, .text-body, .text-muted {
   background-position: center;
   background-repeat: no-repeat;
 }
+.herobg-10{
+    background-image: 
+    linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0.8) 0%,
+      rgba(0, 0, 0, 0.6) 20%,
+      rgba(0, 0, 0, 0.3) 70%,
+      rgba(0, 0, 0, 0.0) 100%
+    ),
+    url('../assets/img/hero/hero_009.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
 
 
 /* --- 5. Componentes: Header & Navbar --- */

desafios.html

@@ -55,7 +55,7 @@
           <!-- Desafío 1 -->
           <div class="desafio-card" data-open-modal="modal-desafio-1" tabindex="0" role="button" aria-label="Ver más sobre ordenar la gestión">
             <div class="desafio-card__image">
-              <img src="assets/img/desafios/t1.png" alt="Gestión organizacional" loading="lazy">
+              <img src="assets/img/desafios/d1.jpg" alt="Gestión organizacional" loading="lazy">
               <div class="desafio-card__overlay"></div>
             </div>
             <div class="desafio-card__content">
@@ -70,7 +70,7 @@
           <!-- Desafío 2 -->
           <div class="desafio-card" data-open-modal="modal-desafio-2" tabindex="0" role="button" aria-label="Ver más sobre convertir iniciativas en resultados">
             <div class="desafio-card__image">
-              <img src="assets/img/desafios/t2.png" alt="Gestión de proyectos" loading="lazy">
+              <img src="assets/img/desafios/desafio2.jpg" alt="Gestión de proyectos" loading="lazy">
               <div class="desafio-card__overlay"></div>
             </div>
             <div class="desafio-card__content">
@@ -85,7 +85,7 @@
           <!-- Desafío 3 -->
           <div class="desafio-card" data-open-modal="modal-desafio-3" tabindex="0" role="button" aria-label="Ver más sobre implementar cambios">
             <div class="desafio-card__image">
-              <img src="assets/img/desafios/t3.png" alt="Gestión del cambio" loading="lazy">
+              <img src="assets/img/desafios/d3.jpg" alt="Gestión del cambio" loading="lazy">
               <div class="desafio-card__overlay"></div>
             </div>
             <div class="desafio-card__content">
@@ -100,7 +100,7 @@
           <!-- Desafío 4 -->
           <div class="desafio-card" data-open-modal="modal-desafio-4" tabindex="0" role="button" aria-label="Ver más sobre tecnología e IA">
             <div class="desafio-card__image">
-              <img src="assets/img/desafios/t4.png" alt="Tecnología e inteligencia artificial" loading="lazy">
+              <img src="assets/img/desafios/digital.jpg" alt="Tecnología e inteligencia artificial" loading="lazy">
               <div class="desafio-card__overlay"></div>
             </div>
             <div class="desafio-card__content">
@@ -115,7 +115,7 @@
           <!-- Desafío 5 -->
           <div class="desafio-card" data-open-modal="modal-desafio-5" tabindex="0" role="button" aria-label="Ver más sobre cumplimiento normativo">
             <div class="desafio-card__image">
-              <img src="assets/img/desafios/t5.png" alt="Cumplimiento normativo" loading="lazy">
+              <img src="assets/img/desafios/d5.jpg" alt="Cumplimiento normativo" loading="lazy">
               <div class="desafio-card__overlay"></div>
             </div>
             <div class="desafio-card__content">
@@ -130,7 +130,7 @@
           <!-- Desafío 6: Brújula IDE -->
           <div class="desafio-card" data-open-modal="modal-desafio-6" tabindex="0" role="button" aria-label="Ver más sobre brújula IDE">
             <div class="desafio-card__image">
-              <img src="assets/img/desafios/t6.png" alt="Brújula IDE" loading="lazy">
+              <img src="assets/img/desafios/brujula.jpg" alt="Brújula IDE" loading="lazy">
               <div class="desafio-card__overlay"></div>
             </div>
             <div class="desafio-card__content">
@@ -161,14 +161,14 @@
             </p>
           </div>
           <div class="hero-visual">
-            <img src="assets/img/Infinito ecosistema.png" alt="Ilustración de desafíos organizacionales" style="width: 100%; max-width: 500px;">
+            <img src="assets/img/hero/infinito sin fondo.png" alt="Ilustración de desafíos organizacionales" style="width: 100%; max-width: 500px; margin-left: 5rem;">
           </div>
         </div>
       </div>
     </section>
 
     <!-- Sección 4 -->
-     <section class="section-padding-sm herobg-2">
+     <section class="section-padding-xs herobg-2a">
       <div class="container container-wide">
         <div class="hero-grid">
           <div>
@@ -196,7 +196,7 @@
           </div>
 
           <div class="hero-visual"
-            style="width: 100%; height: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
+            style="width: 100%; height: 400px; position: relative; display: flex; justify-content: center; align-items: center;">
           </div>
 
         </div>

ecosistema.html

@@ -20,7 +20,7 @@
   <main>
 
     <!-- Seccion 1:Header Ecosistema -->
-    <section class="section-padding-md bg1">
+    <section class="section-padding-md herobg-9">
       <div class="container container-wide">
         <div class="hero-grid">
           <div>
@@ -397,7 +397,7 @@
         <div class="faq-accordion-container">
           
           <!-- FAQ 1 -->
-          <details class="faq-item" name="faq-group">
+          <details class="faq-item" name="faq-group" open>
             <summary class="faq-header">
               <span class="faq-question">¿Necesito contratar las cuatro capacidades del Ecosistema?</span>
               <span class="faq-icon" aria-hidden="true">
@@ -486,7 +486,7 @@
     </section>
 
     <!-- Sección 4: CTA -->
-     <section class="section-padding-xs herobg-5">
+     <section class="section-padding-xs herobg-2b">
       <div class="container container-wide">
         <div class="hero-grid">
           <div>
@@ -514,7 +514,7 @@
           </div>
 
           <div class="hero-visual"
-            style="width: 100%; height: 300px; position: relative; display: flex; justify-content: center; align-items: center;">
+            style="width: 100%; height: 400px; position: relative; display: flex; justify-content: center; align-items: center;">
           </div>
 
         </div>

index.html

@@ -779,7 +779,7 @@
           </div>
 
           <div class="hero-visual"
-            style="width: 100%; height: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
+            style="width: 100%; height: 400px; position: relative; display: flex; justify-content: center; align-items: center;">
           </div>
 
         </div>

insights.html

@@ -17,51 +17,37 @@
 
   <main>
 
-    <!-- Header Academy -->
+    <!-- Seccion 1: Hero -->
-    <section class="section-padding hero-video-section" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color); position: relative; overflow: hidden; min-height: 400px;">
+    <section class="section-padding herobg-10">
-      <!-- Video de fondo -->
+      <div class="container">
-      <video id="hero-bg-video" muted loop playsinline style="
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
-        position: absolute;
+          <div>
-        top: 0;
+            <span class="eyebrow" style="text-transform: uppercase;">CONOCIMIENTO & PERSPECTIVAS</span>
-        left: 0;
+            <h1 style="margin-bottom: 1.25rem; color:white">
-        width: 100%;
+              Ideas para comprender, conectar y transformar.
-        height: 100%;
+            </h1>
-        object-fit: cover;
+            <p class="lead-text" style="color:white">
-        opacity: 0.2;
+              Explorar nuevas perspectivas también es una forma de transformar.
-        z-index: 0;
+En IDE Insights compartimos tendencias, conexiones, herramientas y opiniones para ampliar la mirada sobre la gestión, generar nuevos criterios y tomar decisiones con mayor fundamento.
-        pointer-events: none;
+            </p>
-      ">
+            <a href="https://blog.ideconsultores.com.ar" class="btn btn-cta-unificado"
-        <source src="./assets/video/paper.mp4" type="video/mp4">
+                style="border-radius: 50px; align-items: center; gap: 0.5rem; margin-top: 1.5rem; display: inline-flex;">
-        Tu navegador no soporta videos.
+                Explorar Insigth
-      </video>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-
+                  stroke-linecap="round" stroke-linejoin="round">
-      <!-- Overlay oscuro opcional para mejor contraste -->
+                  <circle cx="12" cy="12" r="10"></circle>
-      <div style="
+                  <polyline points="12 16 16 12 12 8"></polyline>
-        position: absolute;
+                  <line x1="8" y1="12" x2="16" y2="12"></line>
-        top: 0;
+                </svg>
-        left: 0;
+              </a>
-        width: 100%;
+          </div>
-        height: 100%;
-        background: rgba(19, 167, 138, 0.5);
-        z-index: 1;">
-      </div>
-      <div class="container container-narrow text-center" style="position: relative; z-index: 2;">
-        <span class="eyebrow" style="color: var(--text-main);">CONOCIMIENTO & PERSPECTIVAS</span>
-        <h1 style="margin-bottom: 1.25rem;">Ideas para comprender, conectar <br>y transformar</h1>
-        <p class="lead-text" style="color: var(--text-main); margin-bottom: 1.5rem;">
-          Explorar nuevas perspectivas también es una forma de transformar. <br>En IDE Insights compartimos tendencias, conexiones, herramientas y opiniones para ampliar la mirada sobre la gestión, generar nuevos criterios y tomar decisiones con mayor fundamento.
-        </p>
-        <div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
-          <a href="https://blog.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer" class="btn btn-outline-cta btn-sm">
-          EXPLORAR IDE INSIGHTS <!--en WordPress--> ↗
-          </a>
         </div>
       </div>
     </section>
     
 
-    <!-- Feed Dinámico de las 3 Últimas Publicaciones -->
+    <!-- Seccion 2: Feed Dinámico de las 3 Últimas Publicaciones -->
-    <section class="section-padding">
+    <section class="section-padding bg2">
       <div class="container">
         
         <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem;">
@@ -81,33 +67,44 @@
             <p style="color: var(--text-muted);">Cargando artículos de Insights...</p>
           </div>
         </div>
+      </div>
+    </section>
+
+    <!-- Sección 3: CTA -->
+     <section class="section-padding-sm herobg-2">
+      <div class="container container-wide">
+        <div class="hero-grid">
+          <div>
+
+            <h2 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
+              Una única solución no siempre <br>encaja para todos los desafíos.
+            </h2>
+            <p class="lead-text" style="margin-bottom: 2.5rem; color: white;">
+              Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto.
+            </p>
+
+            <div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
+              <a href="contacto.html" class="btn btn-cta-unificado"
+                style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
+                HABLEMOS
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                  stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <polyline points="12 16 16 12 12 8"></polyline>
+                  <line x1="8" y1="12" x2="16" y2="12"></line>
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          <div class="hero-visual"
+            style="width: 100%; height: 400px; position: relative; display: flex; justify-content: center; align-items: center;">
+          </div>
 
-        <!-- CTA para ir al Blog en WordPress -->
-        <div style="text-align: center; margin-top: 3.5rem;">
-          <a href="https://blog.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-lg">
-            VER TODOS LOS INSIGHTS <!--de WordPress--> →
-          </a>
         </div>
-
       </div>
     </section>
 
-    <!-- Suscripción / Boletín de Actualizaciones -->
-    <section class="section-padding-sm bg-subtle-section">
-      <div class="container container-narrow text-center">
-        <span class="eyebrow">IDE INSIGHTS | BOLETÍN MENSUAL</span>
-        <h2 style="font-size: 1.75rem; margin-bottom: 0.75rem;">Una selección de ideas para seguir pensando</h2>
-        <p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.5rem;">
-          Una vez al mes, compartimos perspectivas, artículos, herramientas y novedades del Ecosistema IDE <br>para ampliar la mirada sobre la gestión y llevar nuevas ideas a la práctica.<br>
-       <i>Un envío al mes. Podés cancelar tu suscripción cuando quieras.</i>
-        </p>
-
-        <form style="display: flex; gap: 0.5rem; max-width: 500px; margin: 0 auto; flex-wrap: wrap;" onsubmit="event.preventDefault(); alert('¡Gracias por suscribirte al boletín de IDE Consultores!'); this.reset();">
-          <input type="email" required placeholder="Ingresá tu correo electrónico corporativo" class="form-control" style="flex: 1; min-width: 260px;">
-          <button type="submit" class="btn btn-primary btn-sm">Suscribirme</button>
-        </form>
-      </div>
-    </section>
 
   </main>
 

js/main.js

@@ -962,7 +962,7 @@ function renderMockArticles(articles, container) {
         <h3 style="font-size: 1.2rem; margin-bottom: 0.75rem; line-height: 1.35;">${art.titulo}</h3>
         <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">${art.extracto}</p>
       </div>
-      <a href="${art.enlace}" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-sm" style="align-self: flex-start;">
+      <a href="${art.enlace}" target="_blank" rel="noopener noreferrer" class="btn btn-cta-outline " style="align-self: flex-start;">
         Leer artículo completo en el Blog →
       </a>
     </article>
@@ -1023,9 +1023,17 @@ function renderWpPosts(posts, container) {
           <h3 style="font-size: 1.2rem; margin-bottom: 0.75rem; line-height: 1.35;">${title}</h3>
           <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">${excerpt}</p>
         </div>
-        <a href="${link}" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-sm" style="align-self: flex-start;">
+        
-          Leer en el Blog de IDE →
+        <a href="${link}" target="_blank" rel="noopener noreferrer" class="btn btn-cta-outline"
-        </a>
+                style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; max-width: 250px;">
+                Leer en el Blog de IDE
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                  stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <polyline points="12 16 16 12 12 8"></polyline>
+                  <line x1="8" y1="12" x2="16" y2="12"></line>
+                </svg>
+              </a>
       </article>
     `;
   }).join('');

js/netschema.js

@@ -1,10 +1,10 @@
 const nodosData = [
             // Reemplaza el src con la ruta real de tus logos
-            { id: 'tl', x0: 220, y0: 140, r: 52, color: '#16a085', html: '<img src="assets/logos/excellence_b.png" alt="EXCELLENCE">' }, 
+            { id: 'tl', x0: 220, y0: 140, r: 70, color: '#16a085', html: '<img src="assets/logos/excellence_b.png" alt="EXCELLENCE">' }, 
-            { id: 'bl', x0: 200, y0: 420, r: 52, color: '#f39200', html: '<img src="assets/logos/projects_b.png" alt="PROJECTS">' }, 
+            { id: 'bl', x0: 200, y0: 420, r: 70, color: '#f39200', html: '<img src="assets/logos/projects_b.png" alt="PROJECTS">' }, 
-            { id: 'tr', x0: 780, y0: 110, r: 52, color: '#c41230', html: '<img src="assets/logos/academy_b.png" alt="ACADEMY">' }, 
+            { id: 'tr', x0: 780, y0: 110, r: 70, color: '#c41230', html: '<img src="assets/logos/academy_b.png" alt="ACADEMY">' }, 
-            { id: 'br', x0: 750, y0: 400, r: 52, color: '#0061a0', html: '<img src="assets/logos/digital_b.png" alt="DIGITAL">' }, 
+            { id: 'br', x0: 750, y0: 400, r: 70, color: '#0061a0', html: '<img src="assets/logos/digital_b.png" alt="DIGITAL">' }, 
-            { id: 'c',  x0: 500, y0: 280, r: 70, color: '#ffffff', html: '<img src="assets/logos/ide.png" alt="EL TODO">' } 
+            { id: 'c',  x0: 500, y0: 280, r: 85, color: '#ffffff', html: '<img src="assets/logos/ide.png" alt="EL TODO">' } 
         ];
 
         const conexiones = [

soluciones.html

@@ -285,7 +285,7 @@
     </section>
 
     <!-- Sección 4: CTA -->
-     <section class="section-padding-sm herobg-2">
+     <section class="section-padding-sm herobg-2c">
       <div class="container container-wide">
         <div class="hero-grid">
           <div>
@@ -312,7 +312,7 @@
           </div>
 
           <div class="hero-visual"
-            style="width: 100%; height: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
+            style="width: 100%; height: 400px; position: relative; display: flex; justify-content: center; align-items: center;">
           </div>
 
         </div>

somos-ide.html

@@ -26,7 +26,7 @@
             <h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
               Vemos organizaciones. Entendemos sistemas. Conectamos el todo.
             </h1>
-            <p class="lead-text" style="margin-bottom: 2.5rem;">
+            <p class="lead-text" style="margin-bottom: 2.5rem; color: white;">
               IDE nace de una visión integral de la gestión: personas, procesos, proyectos, conocimiento y tecnología se conectan e influyen mutuamente. Por eso, comprendemos sus relaciones para identificar oportunidades de impacto y articular las capacidades necesarias.
             </p>
             <!-- Hero Actions -->
@@ -124,12 +124,12 @@
 
           <!-- Col 1 (35%): Texto -->
           <div class="triple-section__intro">
-            <span class="eyebrow">TU EYEBROW ACÁ</span>
+            <span class="eyebrow">NUESTRA ESENCIA</span>
             <h2 class="triple-section__title">
-              Tu título principal acá, puede ir en una o dos líneas.
+              Experiencia local con mirada global.
             </h2>
             <p class="triple-section__lead">
-              Tu texto descriptivo acá. Mantenelo breve para que respire y no compita con la imagen central. Idealmente 2 o 3 líneas máximo.
+              Nacimos en el NOA, con uns fuerte pertenencia regional, y trabajamos con organizaciones de diferentes sectores de todo el país, integrando buenas prácticas y una mirada global a tu realidad local.
             </p>
           </div>
 
@@ -145,30 +145,30 @@
 
             <div class="triple-feature">
               <div class="triple-feature__icon">
-                <i class="fa-solid fa-check"></i>
+                <i class="fa-solid fa-globe"></i>
               </div>
-              <p class="triple-feature__text">Texto del primer punto.</p>
+              <p class="triple-feature__text">Proyectos en todo el mundo.</p>
             </div>
 
             <div class="triple-feature">
               <div class="triple-feature__icon">
-                <i class="fa-solid fa-rocket"></i>
+                <i class="fa-solid fa-share-nodes"></i>
               </div>
-              <p class="triple-feature__text">Texto del segundo punto.</p>
+              <p class="triple-feature__text">Empresas internacionales.</p>
+            </div>
+
+            <div class="triple-feature">
+              <div class="triple-feature__icon">
+                <i class="fa-solid fa-right-left"></i>
+              </div>
+              <p class="triple-feature__text">Transferencia de conocimiento.</p>
             </div>
 
             <div class="triple-feature">
               <div class="triple-feature__icon">
                 <i class="fa-solid fa-users"></i>
               </div>
-              <p class="triple-feature__text">Texto del tercer punto.</p>
+              <p class="triple-feature__text">Redes en el NOA. Impacto nacional.</p>
-            </div>
-
-            <div class="triple-feature">
-              <div class="triple-feature__icon">
-                <i class="fa-solid fa-chart-line"></i>
-              </div>
-              <p class="triple-feature__text">Texto del cuarto punto.</p>
             </div>
 
           </div>
@@ -276,7 +276,7 @@ Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades
     </section>
 
     <!-- Sección 4: CTA -->
-     <section class="section-padding-xs herobg-5">
+     <section class="section-padding-xs herobg-2d">
       <div class="container container-wide">
         <div class="hero-grid">
           <div>
@@ -300,7 +300,7 @@ Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades
           </div>
 
           <div class="hero-visual"
-            style="width: 100%; height: 300px; position: relative; display: flex; justify-content: center; align-items: center;">
+            style="width: 100%; height: 400px; position: relative; display: flex; justify-content: center; align-items: center;">
           </div>
 
         </div>