rf-v4.12-somos finish

assets/iconos/cohete_color.svg

@@ -0,0 +1,12 @@
+<?xml version='1.0' encoding='utf-8'?>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24px" height="24px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 0.68 0.68">
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer" />
+  <g id="_2976967631392">
+   <path fill="currentColor" d="M0.57 0.19c-0.01,0.03 -0.04,0.05 -0.08,0.04 -0.03,-0.01 -0.05,-0.04 -0.04,-0.08 0.02,-0.08 0.14,-0.04 0.12,0.04zm-0.28 -0.02c-0.01,0.01 -0.02,0.03 -0.02,0.05 -0.01,0.01 -0.02,0.03 -0.03,0.05 0,0.02 -0.01,0.03 -0.01,0.05 -0.01,0.02 -0.02,0.05 -0.01,0.06 0.04,0.01 0.07,0.04 0.08,0.09 0.02,0 0.09,-0.03 0.11,-0.03 0.04,-0.02 0.07,-0.03 0.1,-0.05 0.09,-0.06 0.16,-0.14 0.17,-0.25 0,-0.04 0,-0.1 -0.02,-0.12 -0.02,-0.02 -0.09,-0.02 -0.12,-0.02 -0.08,0.01 -0.14,0.04 -0.19,0.09 -0.02,0.02 -0.04,0.05 -0.06,0.08z" />
+   <path fill="currentColor" fill-opacity="0.501961" d="M0.3 0.47c0,0.03 -0.01,0.13 0,0.16 0.01,0.01 0.03,0.03 0.06,0.01 0.01,0 0.02,-0.01 0.02,-0.01 0.04,-0.02 0.11,-0.06 0.12,-0.08 0.02,-0.03 0.01,-0.13 0.01,-0.16 -0.03,0.02 -0.06,0.03 -0.1,0.05 -0.02,0 -0.09,0.03 -0.11,0.03z" />
+   <path fill="currentColor" fill-opacity="0.501961" d="M0.16 0.57c-0.01,0.02 -0.03,0.03 -0.06,0.03 -0.03,0.01 -0.03,-0.02 -0.02,-0.05 0.02,-0.06 0.1,-0.02 0.08,0.02zm0.07 0.01c0.02,-0.07 -0.04,-0.13 -0.1,-0.13 -0.13,-0.01 -0.14,0.19 -0.13,0.21 0.02,0.03 0.07,0.02 0.1,0.02 0.07,-0.02 0.12,-0.04 0.13,-0.1z" />
+   <path fill="currentColor" fill-opacity="0.501961" d="M0.22 0.38c-0.01,-0.01 0,-0.04 0.01,-0.06 0,-0.02 0.01,-0.03 0.01,-0.05 0.01,-0.02 0.02,-0.04 0.03,-0.05 0,-0.02 0.01,-0.04 0.02,-0.05 -0.04,0.01 -0.12,-0.01 -0.16,0.01 -0.02,0.01 -0.04,0.06 -0.07,0.09 -0.01,0.04 -0.04,0.06 -0.02,0.09 0,0.01 0.01,0.01 0.02,0.02 0.01,0.01 0.13,0 0.16,0z" />
+  </g>
+ </g>
+</svg>

assets/iconos/escuela_color.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="61px" height="48px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 3.25 2.57"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_3033909382768">
+   <path fill="#275868" fill-opacity="0.501961" d="M1.01 0.64c0.05,0.04 0.12,0.04 0.24,0.17 0.19,0.18 0.25,0.49 0.15,0.74 -0.03,0.05 -0.06,0.09 -0.07,0.13 0.04,0.04 0.19,0.09 0.29,0.22 0.02,-0.03 0.21,-0.01 0.26,-0.01 0.01,-0.14 -0.03,-0.25 0.08,-0.32 0.07,-0.04 0.25,-0.02 0.35,-0.02 0.1,0 0.28,-0.03 0.35,0.03 0.11,0.09 0.05,0.17 0.08,0.31 0.05,0 0.11,0.01 0.16,-0.01l0 -1.52c-0.04,-0.01 -1.82,-0.02 -1.87,0 -0.01,0.06 0.01,0.25 -0.02,0.28z"/>
+   <path fill="#275868" d="M1.01 0.64c0.03,-0.03 0.01,-0.22 0.02,-0.28 0.05,-0.02 1.83,-0.01 1.87,0l0 1.52c-0.05,0.02 -0.11,0.01 -0.16,0.01l-0.86 0c-0.05,0 -0.24,-0.02 -0.26,0.01 0.01,0.02 0.05,0.07 0.09,0.15 0.02,0.04 0.05,0.15 0.07,0.17 0.26,0.02 0.58,0.01 0.85,0.01 0.13,0 0.3,0.02 0.41,-0.03 0.09,-0.04 0.17,-0.12 0.19,-0.23 0.03,-0.09 0.03,-1.59 0.01,-1.69 -0.07,-0.32 -0.39,-0.27 -0.59,-0.27 -0.23,0 -1.59,-0.02 -1.7,0 -0.26,0.07 -0.29,0.3 -0.26,0.59 0.05,0.02 0.11,0 0.17,0.01 0.05,0.01 0.11,0.03 0.15,0.03z"/>
+   <path fill="#275868" d="M0.43 1.89c-0.16,0.02 -0.28,0.13 -0.34,0.22 -0.07,0.1 -0.14,0.32 -0.04,0.41 0.08,0.07 0.4,0.05 0.51,0.05 0.19,0 0.37,0 0.56,0 0.18,0 0.39,0.04 0.42,-0.14 0.02,-0.16 -0.08,-0.33 -0.15,-0.4 -0.11,-0.1 -0.22,-0.14 -0.42,-0.14 -0.15,0 -0.41,-0.02 -0.54,0z"/>
+   <path fill="#275868" d="M0.69 0.87c-0.58,0.14 -0.37,0.94 0.17,0.84 0.2,-0.05 0.39,-0.25 0.33,-0.51 -0.04,-0.2 -0.25,-0.39 -0.5,-0.33z"/>
+  </g>
+ </g>
+</svg>

assets/iconos/lupa_color.svg

@@ -0,0 +1,12 @@
+<?xml version='1.0' encoding='utf-8'?>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24px" height="24px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 0.51 0.51">
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer" />
+  <g id="_2976456766784">
+   <path fill="currentColor" d="M0.15 0.06c0.04,-0.01 0.08,0 0.11,0.01 0.07,0.05 0.08,0.21 -0.05,0.24 -0.07,0.01 -0.15,-0.02 -0.16,-0.1 -0.01,-0.08 0.02,-0.14 0.1,-0.15zm0.12 0.28l0.01 -0.01c0.02,-0.01 0.04,-0.03 0.05,-0.05l0.01 0c0,-0.01 0,0 0,-0.01 0,-0.01 0.01,-0.03 0.02,-0.06 0,-0.02 0,-0.05 -0.01,-0.08 0,-0.04 -0.03,-0.07 -0.06,-0.1 -0.1,-0.07 -0.28,-0.02 -0.29,0.13 -0.01,0.14 0.08,0.21 0.21,0.2 0.03,-0.01 0.04,-0.01 0.06,-0.02z" />
+   <path fill="currentColor" d="M0.37 0.29c0,0 0.01,0 0,0 0,0 0,0 0,0 0,0.01 0,0.01 0,0.01 -0.01,0.02 0,0.03 0.01,0.04 0.02,0.01 0.07,0.04 0.08,0.06 0.02,0.05 -0.05,0.09 -0.08,0.04l-0.03 -0.04c-0.02,-0.03 -0.03,-0.04 -0.06,-0.03 0,0 0,0 0,0l0 0c0,0.01 0,0.01 0,0.01 -0.01,0.01 -0.01,0.02 0,0.03 0.02,0.02 0.05,0.07 0.06,0.08 0.04,0.03 0.1,0.03 0.14,0 0.03,-0.04 0.03,-0.1 0,-0.14 -0.02,-0.01 -0.06,-0.04 -0.08,-0.06 -0.01,-0.01 -0.02,-0.01 -0.04,0z" />
+   <path fill="currentColor" fill-opacity="0.501961" d="M0.27 0.34c0.01,0.01 0.02,0.02 0.02,0.03 0,0 0,0 0,0 0,0 0,0 0,0l0 0.01c0,0 0,0 0,-0.01l0 0c0,0 0,0 0,0 0.03,-0.01 0.04,0 0.06,0.03l0.03 0.04c0.03,0.05 0.1,0.01 0.08,-0.04 -0.01,-0.02 -0.06,-0.05 -0.08,-0.06 -0.01,-0.01 -0.02,-0.02 -0.01,-0.04 0,0 0,0 0,-0.01 0,0 0,0 0,0 0.01,0 0,0 0,0l0 0c0,0 0,0 0,0 0,0 0,0 0,0.01 -0.01,-0.01 -0.01,-0.01 -0.02,-0.02 0,0 -0.01,0 -0.01,-0.01 0,0.01 0,0 0,0.01l-0.01 0c-0.01,0.02 -0.03,0.04 -0.05,0.05l-0.01 0.01z" />
+   <path fill="currentColor" d="M0.16 0.11c-0.06,0.01 -0.06,0.07 -0.05,0.08 0,0.01 0.02,0.02 0.03,0.01 0.02,-0.01 0.01,-0.02 0.02,-0.03 0.01,-0.02 0.02,-0.01 0.03,-0.02 0.03,-0.01 0.02,-0.05 -0.03,-0.04z" />
+  </g>
+ </g>
+</svg>

assets/iconos/proceso_color.svg

@@ -0,0 +1,13 @@
+<?xml version='1.0' encoding='utf-8'?>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24px" height="23px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 0.55 0.52">
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer" />
+  <g id="_2940953410368">
+   <path fill="currentColor" fill-opacity="0.501961" d="M0.21 0.18l0.08 0.13 -0.04 0c-0.01,0 -0.02,0 -0.03,0.02l-0.06 -0.12 0.03 0c0.01,0 0.02,-0.01 0.02,-0.02l0 -0.01z" />
+   <polygon fill="currentColor" fill-opacity="0.501961" points="0.21,0.07 0.34,0.07 0.34,0.13 0.21,0.13 " />
+   <rect fill="currentColor" width="0.21" height="0.21" rx="0.02" ry="0.02" />
+   <rect fill="currentColor" x="0.34" width="0.21" height="0.21" rx="0.02" ry="0.02" />
+   <rect fill="currentColor" x="0.22" y="0.31" width="0.21" height="0.21" rx="0.02" ry="0.02" />
+  </g>
+ </g>
+</svg>

assets/iconos/team_color.svg

@@ -0,0 +1,12 @@
+<?xml version='1.0' encoding='utf-8'?>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24px" height="20px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 0.51 0.43">
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer" />
+  <g id="_2976811563136">
+   <path fill="currentColor" d="M0 0.4c0,0.01 0.02,0.02 0.03,0.03l0.17 0c0.02,0 0.03,0 0.05,-0.02 0.01,-0.01 0.01,-0.02 0.01,-0.04 0,-0.04 -0.01,-0.07 -0.03,-0.09 -0.02,-0.02 -0.04,-0.04 -0.07,-0.05 -0.06,-0.02 -0.12,0.01 -0.15,0.07 0,0.01 -0.01,0.03 -0.01,0.04 0,0.01 0,0.05 0,0.06z" />
+   <path fill="currentColor" fill-opacity="0.501961" d="M0.28 0.28c0.03,0.08 0,0.1 0.03,0.12 0,0 0.01,0.01 0.01,0.01 0.04,0.02 0.09,0.02 0.14,-0.01 0.01,0 0.02,-0.01 0.02,-0.02 0.02,-0.03 0.03,-0.05 0.03,-0.09 0,-0.03 0,-0.06 -0.05,-0.06 -0.04,0 -0.13,-0.01 -0.17,0 -0.01,0 -0.03,0.01 -0.03,0.02l0.02 0.03z" />
+   <path fill="currentColor" fill-opacity="0.501961" d="M0.3 0.09c0,0.05 0.04,0.08 0.09,0.08 0.05,0 0.08,-0.04 0.08,-0.09 -0.01,-0.05 -0.05,-0.09 -0.09,-0.08 -0.05,0.01 -0.09,0.04 -0.08,0.09z" />
+   <path fill="currentColor" d="M0.04 0.1c0.01,0.04 0.05,0.08 0.1,0.07 0.04,-0.01 0.08,-0.05 0.07,-0.1 0,-0.04 -0.04,-0.08 -0.09,-0.07 -0.05,0.01 -0.08,0.05 -0.08,0.1z" />
+  </g>
+ </g>
+</svg>

ecosistema.html

@@ -48,7 +48,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 class="animacion-infinito">
                 <svg class="capa-svg-lineas" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet">
                     <defs id="svg-defs"></defs>
@@ -133,7 +133,7 @@
 
             <!-- Tarjeta 4: IDE Academy (navega a academy.html) -->
             <article class="eco-card eco-card--academy" role="listitem">
-              <a class="eco-card__btn" href="academy.html" aria-label="Ir a IDE Academy">
+              <a class="eco-card__btn" href="ide-academy.html" aria-label="Ir a IDE Academy">
                 <span class="eco-card__icon-wrap" aria-hidden="true">
                   <i class="fa-solid fa-graduation-cap eco-card__icon"></i>
                 </span>
@@ -163,7 +163,7 @@
               <button type="button" class="eco-pill eco-pill--excellence" data-eco-open="excellence">Excellence</button>
               <button type="button" class="eco-pill eco-pill--projects"   data-eco-open="projects">Projects</button>
               <button type="button" class="eco-pill eco-pill--digital"    data-eco-open="digital">Digital</button>
-              <a class="eco-pill eco-pill--academy" href="academy.html">Academy <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
+              <a class="eco-pill eco-pill--academy" href="ide-academy.html">Academy <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
             </nav>
           </div>
 
@@ -239,7 +239,7 @@
             <article class="eco-panel eco-panel--projects" id="eco-panel-projects" data-eco-panel="projects" hidden>
 
               <div class="eco-panel__media" aria-hidden="true">
-                <img src="assets/img/ecosistema/projects.png" alt="" loading="lazy" decoding="async">
+                <img src="assets/img/ecosistema/projects2.jpg" alt="" loading="lazy" decoding="async">
               </div>
 
               <div class="eco-panel__overlay" aria-hidden="true"></div>
@@ -310,7 +310,7 @@
             <article class="eco-panel eco-panel--digital" id="eco-panel-digital" data-eco-panel="digital" hidden>
 
               <div class="eco-panel__media" aria-hidden="true">
-                <img src="assets/img/ecosistema/digital.jpg" alt="" loading="lazy" decoding="async">
+                <img src="assets/img/ecosistema/digital2.jpg" alt="" loading="lazy" decoding="async">
               </div>
 
               <div class="eco-panel__overlay" aria-hidden="true"></div>

ide-academy.html

@@ -17,58 +17,74 @@
 
   <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-md herobg-6">
-      <!-- Video de fondo -->
+      <div class="container container-wide">
-      <video autoplay muted loop playsinline style="
+        <div class="hero-grid">
-        position: absolute;
+          <div>
-        top: 0;
+            <span class="eyebrow" style="text-transform: uppercase; color: white; font-style: italic;">
-        left: 0;
+              Executive Learning & Capability Development
-        width: 100%;
+            </span>
-        height: 100%;
+            <h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
-        object-fit: cover;
+              Desarrollamos capacidades para gestionar, liderar y transformar.
-        opacity: 0.2;
+            </h1>
-        z-index: 0;
+            <p class="lead-text" style="margin-bottom: 2.5rem; color: white;">
-        pointer-events: none;
+              Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para fortalecer las capacidades que profesionales, equipos y organizaciones necesitan para convertir el aprendizaje en acción.
-      ">
+            </p>
-        <source src="./assets/video/capacitacion.mp4" type="video/mp4">
+
-        Tu navegador no soporta videos.
+            <!-- Hero Actions -->
-      </video>
+            <div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
+              <span class="eyebrow" style="text-transform: uppercase; color: white;">
+                Ecosistema
+              </span>
+              <a href="ecosistema.html#eco-excellence" class="btn btn-primary btn-cta-unificado"
+                style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;">
+                EXCELLENCE
+                <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>
+              <a href="ecosistema.html#eco-projects" class="btn btn-primary btn-cta-unificado"
+                style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;">
+                PROJECTS
+                <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>
+              <a href="ecosistema.html#eco-digital" class="btn btn-primary btn-cta-unificado"
+                style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;">
+                DIGITAL
+                <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: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
+          </div>
 
-      <!-- Overlay oscuro opcional para mejor contraste -->
-      <div style="
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        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);">Executive Learning & Capability Development</span>
-        <h1 style="margin-bottom: 1.25rem;">Desarrollamos capacidades para gestionar, liderar y transformar</h1>
-        <p class="lead-text" style="margin: 0 auto 1.75rem auto;color: var(--text-main);">
-          Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para fortalecer las capacidades que profesionales, equipos y organizaciones necesitan para convertir el aprendizaje en acción.
-        </p>
-        <div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
-          <a href="#cursos-destacados" class="btn btn-primary btn-sm">EXPLORAR CURSOS Y PROGRAMAS →</a>
-          <a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany" class="btn btn-outline btn-sm" style="color: var(--text-inverse);">FORMACIÓN IN-COMPANY →</a>
         </div>
       </div>
     </section>
 
-    <!-- Aprender con IDE -->
+    <!-- Seccion 2:Aprender con IDE -->
-    <section class="section-padding">
+    <section class="section-padding-md bg4">
       <div class="container">
         <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem;">
           <div>
-            <span class="eyebrow">APRENDER CON IDE</span>
+            <span class="eyebrow-a">APRENDER CON IDE</span>
             <h2>Conocimiento que se conecta con la práctica</h2>
-            <p class="lead-text">
-              Aprender no es solamente incorporar conceptos. Es comprender cómo aplicarlos, relacionarlos con otros saberes y convertirlos en mejores decisiones y formas de actuar.
-            <p class="lead-text">
-              Por eso, en IDE Academy diseñamos experiencias de aprendizaje que parten de situaciones reales, integran herramientas aplicables y promueven el intercambio entre profesionales.
           </div>
         </div>
         <!--Tarjetas descriptivas-->
@@ -112,7 +128,7 @@
           <div class="card academy-card">
             <div class="curso-header">
               <span class="icono-academy-enriquece"></span>
-              <h4>INTERCAMBIO QUE ENRIQUECE</h4>
+              <h4>COMUNIDAD</h4>
             </div>
             <div class="curso-body">
               <p>La experiencia y las perspectivas de quienes participan también forman parte del aprendizaje.</p>
@@ -124,7 +140,7 @@
           <div class="card academy-card">
             <div class="curso-header">
               <span class="icono-academy-aplicacion"></span>
-              <h4>APLICACIÓN QUE CONTINÚA</h4>
+              <h4>APLICACIÓN CONTINUA</h4>
             </div>
             <div class="curso-body">
               <p>Buscamos que cada experiencia deje herramientas, criterios y capacidades que puedan seguir utilizándose después del curso.</p>
@@ -137,198 +153,129 @@
       </div>
     </section>
 
-    <!--Cursos-->
+    <!--Seccion 3:Cursos-->
-    <section class="section-padding-sm" id="cursos-destacados">
+    <section class="section-padding-sm contact-parallax-section" id="cursos-destacados">
+      <div class="parallax-wrapper" aria-hidden="true">
+        <div id="contact-parallax-bg" class="parallax-bg-layer4"></div>
+        <div class="parallax-overlay"></div>
+      </div>
       <div class="container">
-        <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem;">
+        <div class="cursos-layout">
-          <div>
+
-            <span class="eyebrow">PRÓXIMAS EXPERIENCIAS</span>
+          <!-- Columna 1: Texto -->
+          <div class="cursos-intro">
+            <span class="eyebrow-a">PRÓXIMAS EXPERIENCIAS</span>
             <h2>Elegí qué capacidad querés desarrollar.</h2>
             <p class="lead-text">
-              Cursos y programas diseñados para conectar conocimiento, práctica y contexto, con herramientas que podés llevar a tu realidad profesional desde el primer día.
+              Cursos y programas diseñados para conectar conocimiento y práctica, con herramientas que podés llevar a tu realidad profesional desde el primer día.
             </p>
           </div>
-        </div>
 
-        <!-- Contenedor inyectado por JS desde /data/cursos.json -->
+          <!-- Columnas 2, 3 y 4: Tarjetas inyectadas por JS -->
-        <div class="grid-3" id="academy-courses-container">
+          <div class="cursos-cards" id="academy-courses-container">
-          <!-- Fallback en caso de demora de fetch -->
+            <!-- Fallback en caso de demora de fetch -->
-          <div class="card text-center" style="grid-column: 1 / -1; padding: 2rem;">
+            <div class="card text-center" style="grid-column: 1 / -1; padding: 2rem;">
-            <p style="color: var(--text-muted);">Cargando catálogo de programas formativos...</p>
+              <p style="color: var(--text-muted);">Cargando catálogo de programas formativos...</p>
-          </div>
+            </div>
-        </div>
-
-      </div>
-    </section>
-
-    <!-- Propuesta de Valor de la Formación IDE -->
-    <section class="section-padding bg-subtle-section">
-      <div class="container">
-        <div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;">
-          <div class="fade-in visible">
-            <p class="eyebrow">DOS FORMAS DE APRENDER CON IDE</p>
-            <h2 style="padding-bottom: 15px;">Elegí la experiencia que mejor se adapte a tu contexto.</h2>
-            <div class="divider"></div>
-            <p>Podés participar de nuestras experiencias abiertas junto a profesionales de distintas organizaciones o desarrollar una propuesta In-Company diseñada a partir de las necesidades de tu equipo.</p>
-            <p>En ambos casos, compartimos una misma forma de aprender: conocimiento conectado con la práctica, intercambio y aplicación en contextos reales.</p>
-          </div>
-          <div style="display: flex; flex-direction: column; gap: 1rem;">
-              <div class="card-incompany">
-                <div class="card-cursos-icon">
-                  <span class="icono-fabrica"></span>
-                </div>
-                <div class="card-cursos-content">
-                  <h2 style="font-size: 1.05rem; margin-bottom: 0.25rem;">In Company</h2>
-                  <p style="font-size: 0.82rem;">Programa diseñado exclusivamente para tu organización. Contenido adaptado, casos reales, dinámica acorde al equipo.</p>
-                </div>
-              </div>
-              <div class="card-cursos">
-                <div class="card-cursos-icon">
-                  <svg viewBox="0 0 32 32" fill="currentColor">
-                    <use href="./assets/iconos/calendar_color.svg"></use>
-                  </svg>
-                </div>
-                <div class="card-cursos-content">
-                  <h2 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Cursos Abiertos</h2>
-                  <p style="font-size: 0.82rem;">Formación en grupos reducidos, con profesionales de distintas organizaciones. Networking y perspectivas diversas.</p>
-                </div>
-              </div>
-          </div>
-        </div>
-      </div>
-      <div class="container" style="margin-top: clamp(2.5rem, 4vw, 3.5rem);">
-        <div class="grid-3 text-center">
-          <div class="card academy-card">
-            <h4 style="font-size: 1.1rem; margin-bottom: 0.35rem;">Casos Reales y Aplicados</h4>
-            <p style="font-size: 0.85rem; color: var(--text-muted);">Los participantes trabajan sobre los procesos y desafíos cotidianos de sus propias empresas.</p>
-          </div>
-          <div class="card academy-card">
-            <h4 style="font-size: 1.1rem; margin-bottom: 0.35rem;">Docentes Consultores Senior</h4>
-            <p style="font-size: 0.85rem; color: var(--text-muted);">Instructores con amplia trayectoria liderando auditorías y proyectos en organizaciones reales.</p>
-          </div>
-          <div class="card academy-card">
-            <h4 style="font-size: 1.1rem; margin-bottom: 0.35rem;">Transferencia de Autonomía</h4>
-            <p style="font-size: 0.85rem; color: var(--text-muted);">Herramientas y plantillas listas para aplicar inmediatamente en el puesto de trabajo.</p>
           </div>
         </div>
       </div>
     </section>
 
-    <!-- Sección Formación In-Company a Medida -->
+    <!-- Sección 4: Formación In-Company a Medida -->
-  <section class="section-padding bg-subtle-section">
+    <section class="section-padding-md bg-subtle-section">
-    <div class="container">
+      <div class="container" style="margin-bottom: 2.5rem;">
-      <div class="card">
+        <div class="incompany-card">
-        <div class="grid-2" style="gap: 3rem; align-items: center;">
+
-          <div>
+          <!-- Col 1: Títulos y texto -->
+          <div class="incompany-card__intro">
+            <span class="eyebrow-a">FORMACIÓN A MEDIDA</span>
             <h2>Formación In-Company</h2>
-            <p style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin: 1rem 0 0 0;">
+            <p class="incompany-card__lead">
-              Diseñamos experiencias de aprendizaje para una organización y su equipo, adaptando objetivos, contenidos, casos y actividades a su contexto. Ideal para Organizaciones que necesitan desarrollar capacidades compartidas, acompañar iniciativas o fortalecer la forma en que sus equipos gestionan y trabajan.
+              Diseñamos experiencias a medida, alineadas a los objetivos de tu organizacion para desarrollar las capacidades que necesitas.
             </p>
-            <p style="margin-top: 0.5rem;">Podemos diseñar:</p>
-
-            <!-- Sub-grid: lista a la izquierda, botón a la derecha abajo -->
-            <div class="incompany-subgrid">
-              <ul class="incompany-tags">
-                <li><i class="fa-solid fa-tag"></i> Cursos.</li>
-                <li><i class="fa-solid fa-tag"></i> Workshops</li>
-                <li><i class="fa-solid fa-tag"></i> Programas</li>
-                <li><i class="fa-solid fa-tag"></i> Rutas de Aprendizaje</li>
-              </ul>
-
-              <div class="incompany-cta">
-                <a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany_Custom" class="btn btn-primary-cta btn-sm">
-                  HABLEMOS
-                </a>
-              </div>
-            </div>
           </div>
 
-          <div class="card-academia"></div>
+          <!-- Col 2: Bullets + CTA -->
-        </div>
+          <div class="incompany-card__formats">
-      </div>
+            <p class="incompany-card__subtitle">Podemos diseñar:</p>
-    </div>
+            <ul class="incompany-card__list">
-  </section>
+              <li><i class="fa-solid fa-tag"></i> Cursos</li>
-
+              <li><i class="fa-solid fa-tag"></i> Workshops</li>
-    <!-- Facilitadores / Quiénes facilitan el aprendizaje -->
+              <li><i class="fa-solid fa-tag"></i> Programas</li>
-    <section class="section-padding">
+              <li><i class="fa-solid fa-tag"></i> Rutas de Aprendizaje</li>
-      <div class="container">
+            </ul>
-        <div class="text-center" style="text-align: center; max-width: 720px; margin: 0 auto 2.5rem auto;">
+            <a href="ecosistema.html#eco-excellence" class="btn btn-academy"
-          <span class="eyebrow">QUIÉNES FACILITAN EL APRENDIZAJE</span>
+                style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; max-width: 200px;">
-          <h2 style="margin-bottom: 1rem;">Experiencias que se comparten</h2>
+                HABLEMOS
-          <p class="lead-text" style="margin: 0 auto;">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-            En IDE Academy, la formación está a cargo de profesionales que combinan experiencia en consultoría, gestión, proyectos, docencia y práctica organizacional.
+                  stroke-linecap="round" stroke-linejoin="round">
-          </p>
+                  <circle cx="12" cy="12" r="10"></circle>
-        </div>
+                  <polyline points="12 16 16 12 12 8"></polyline>
-
+                  <line x1="8" y1="12" x2="16" y2="12"></line>
-        <div class="grid-4 facilitadores-grid">
+                </svg>
-          <!-- Facilitador 1 -->
-          <div class="facilitador-item">
-            <div class="facilitador-avatar">
-              <img src="./assets/img/CRA.png" alt="Claudia Raquel ANDRÉS">
-            </div>
-            <h4 class="facilitador-nombre">Claudia Raquel ANDRÉS</h4>
-            <p class="facilitador-rol">Consultoría & Gestión</p>
-          </div>
-
-          <!-- Facilitador 2 -->
-          <div class="facilitador-item">
-            <div class="facilitador-avatar">
-              <img src="./assets/img/JAP.png" alt="José PUGLIESE">
-            </div>
-            <h4 class="facilitador-nombre">José PUGLIESE</h4>
-            <p class="facilitador-rol">Proyectos & Agile</p>
-          </div>
-
-          <!-- Facilitador 3 -->
-          <div class="facilitador-item">
-            <div class="facilitador-avatar">
-              <img src="./assets/img/MAR.png" alt="Miguel Ángel ROJAS">
-            </div>
-            <h4 class="facilitador-nombre">Miguel Ángel ROJAS</h4>
-            <p class="facilitador-rol">Calidad & Mejora Continua</p>
-          </div>
-
-          <!--  Facilitador 4  -->
-          <div class="facilitador-item">
-            <div class="facilitador-avatar">
-              <img src="./assets/img/VUB.png" alt="Víctor Ulises BARRIONUEVO">
-            </div>
-            <h4 class="facilitador-nombre">Víctor Ulises BARRIONUEVO</h4>
-            <p class="facilitador-rol">Calidad & Mejora Continua</p>
-          </div>
-        </div>
-
-        <div style="display: flex; justify-content: center; margin-top: 2.5rem;">
-          <a href="somos-ide.html" class="btn btn-primary btn-sm">
-            CONOCER A NUESTROS FACILITADORES →
-          </a>
-        </div>
-      </div>
-    </section>
-
-    <!-- Sección IDE Academy Virtual / Campus -->
-    <section class="section-padding">
-      <div class="container">
-        <div class="card" style="background: linear-gradient(135deg, var(--ide-primary) 0%, #0f7a63 100%); border: none;">
-          <div class="grid-2" style="gap: 2.5rem; align-items: center;">
-            <div>
-              <span class="eyebrow" style="color: rgba(255,255,255,0.75);">CAMPUS VIRTUAL</span>
-              <h2 style="color: #ffffff; margin-bottom: 0.75rem;">¿Ya sos parte de IDE Academy?</h2>
-              <p style="color: rgba(255,255,255,0.9); font-size: 1rem; line-height: 1.65; margin: 0; max-width: 520px;">
-                Accedé a tus cursos, materiales y actividades desde nuestro entorno de aprendizaje.
-              </p>
-            </div>
-            <div style="display: flex; justify-content: flex-end; align-items: center;">
-              <a href="https://campus.ideconsultores.com" target="_blank" rel="noopener" class="btn btn-sm" style="
-                background-color: #ffffff;
-                color: var(--ide-primary);
-                font-weight: 600;
-                white-space: nowrap;
-              ">
-                INGRESAR AL CAMPUS IDE ↗
               </a>
-            </div>
           </div>
+
+          <!-- Col 3: Imagen a sangre -->
+          <div class="incompany-card__visual" aria-hidden="true"></div>
+
+        </div>
+      </div>
+      <div class="container">
+        <div class="campus-banner">
+
+          <!-- Col 1: Intro -->
+          <div class="campus-banner__intro">
+            <span class="eyebrow campus-banner__eyebrow">CAMPUS VIRTUAL</span>
+            <h2 class="campus-banner__title">¿Ya sos parte de IDE Academy?</h2>
+            <p class="campus-banner__lead">
+              Accedé a tus cursos, materiales y actividades desde nuestro entorno de aprendizaje.
+            </p>
+          </div>
+
+          <!-- Col 2: Acceso al Campus -->
+          <div class="campus-banner__access">
+            <div class="campus-banner__icon">
+              <i class="fa-solid fa-graduation-cap"></i>
+            </div>
+            <h3 class="campus-banner__access-title">Campus IDE</h3>
+            <p class="campus-banner__access-desc">
+              Tus cursos, materiales y actividades desde nuestro entorno virtual.
+            </p>
+            <a href="https://campus.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer" 
+              class="btn btn-academy2 curso-card__cta" 
+              style="border-radius: 50px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; width: fit-content; text-decoration: none;">
+              Ingresar al Campus
+              <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>
+
+          <!-- Col 3: Recursos y Herramientas -->
+          <div class="campus-banner__access">
+            <div class="campus-banner__icon">
+              <i class="fa-solid fa-folder-open"></i>
+            </div>
+            <h3 class="campus-banner__access-title">Recursos y Herramientas</h3>
+            <p class="campus-banner__access-desc">
+              Descargables, plantillas y guías para aplicar en tu día a día.
+            </p>
+            <a href="https://campus.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer" 
+              class="btn btn-academy2 curso-card__cta" 
+              style="border-radius: 50px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; width: fit-content; text-decoration: none;">
+              Ver Recursos
+              <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>
     </section>

js/main.js

@@ -572,7 +572,10 @@ function filterVisibleCourses(courses) {
 function renderCourseCards(courses, container) {
   container.innerHTML = '';
 
-  if (courses.length === 0) {
+  // Limitar a 3 cursos (opción A del brief)
+  const visibleCourses = courses.slice(0, 3);
+
+  if (visibleCourses.length === 0) {
     container.innerHTML = `
       <div class="card text-center" style="grid-column: 1 / -1; padding: 2.5rem;">
         <p style="color: var(--text-muted); font-size: 1rem;">
@@ -583,50 +586,75 @@ function renderCourseCards(courses, container) {
     return;
   }
 
-  courses.forEach(course => {
+  // Mapeo de modalidad → icono FontAwesome
-    const card = document.createElement('div');
+  const getModalityIcon = (modalidad = '') => {
-    card.className = 'card';
+    const m = modalidad.toLowerCase();
-    card.style.display = 'flex';
+    if (m.includes('online') || m.includes('virtual') || m.includes('remoto')) return 'fa-laptop';
-    card.style.flexDirection = 'column';
+    if (m.includes('presencial')) return 'fa-building';
-    card.style.justifyContent = 'space-between';
+    if (m.includes('hibr') || m.includes('mix')) return 'fa-rotate';
+    return 'fa-globe';
+  };
+
+  // Mapeo de nivel → icono FontAwesome (variando intensidad visual)
+  const getLevelIcon = (nivel = '') => {
+    const n = nivel.toLowerCase();
+    if (n.includes('inicial') || n.includes('básic') || n.includes('basic')) return 'fa-signal';
+    if (n.includes('intermed')) return 'fa-signal';
+    if (n.includes('avanz') || n.includes('experto')) return 'fa-signal';
+    return 'fa-layer-group';
+  };
+
+  visibleCourses.forEach(course => {
+    const card = document.createElement('article');
+    card.className = 'card-a curso-card';
 
     const area = course.area_tematica || course.categoria || 'IDE Academy';
-    const tipo = course.tipo ? ` • ${course.tipo}` : '';
+    const tipo = course.tipo || '';
     const proxima = course.proxima_edicion || course.proxima_fecha || 'A confirmar';
     const duracion = course.duracion || 'A definir';
     const modalidad = course.modalidad || 'Consultar';
     const nivel = course.nivel || 'General';
     const descripcion = course.propuesta_formativa || course.descripcion_corta || '';
 
-    // Estilo distintivo sutil si está en "Próximamente"
+    const isProximamente = (course.estado || '').toLowerCase().includes('prox');
-    const isProximamente = course.estado.toLowerCase().includes('prox');
+    const proximaEsAConfirmar = proxima.toLowerCase() === 'a confirmar';
-    const badgeProximo = isProximamente 
-      ? `<span style="font-size: 0.72rem; background: var(--bg-subtle); padding: 0.2rem 0.5rem; border-radius: 4px; color: #D97706; font-weight: 600; border: 1px solid rgba(217, 119, 6, 0.2);">Próximamente</span>` 
-      : '';
 
     card.innerHTML = `
-      <div>
+      <!-- Cabecera: badge + estado -->
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; gap: 0.5rem; flex-wrap: wrap;">
+      <div class="curso-card__top">
-          <div class="ecosystem-badge badge-academy">${area}${tipo}</div>
+        <span class="ecosystem-badge badge-academy">${area}${tipo ? ' • ' + tipo : ''}</span>
-          ${badgeProximo}
+        ${isProximamente ? '<span class="curso-card__badge-prox">Próximamente</span>' : ''}
-        </div>
-
-        <h3 style="font-size: 1.15rem; margin-bottom: 0.6rem; line-height: 1.35;">${course.titulo}</h3>
-        <p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.5;">${descripcion}</p>
       </div>
+
+      <!-- Título -->
+      <h3 class="curso-card__title">${course.titulo}</h3>
+
+      <!-- Descripción truncada -->
+      <p class="curso-card__desc">${descripcion}</p>
+
+      <!-- Specs con iconos -->
+      <ul class="curso-card__specs">
+        <li title="Modalidad"><i class="fa-solid ${getModalityIcon(modalidad)}"></i> ${modalidad}</li>
+        <li title="Duración"><i class="fa-regular fa-clock"></i> ${duracion}</li>
+        <li title="Nivel"><i class="fa-solid ${getLevelIcon(nivel)}"></i> ${nivel}</li>
+        <li title="Próxima edición" class="${proximaEsAConfirmar ? 'is-pending' : ''}">
+          <i class="fa-regular fa-calendar"></i> ${proxima}
+        </li>
+      </ul>
+
+      <!-- CTA compacto -->
       
-      <div>
+      <button class="btn btn-academy curso-card__cta" 
-        <div style="font-size: 0.82rem; color: var(--text-body); display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.5rem; border-top: 1px solid var(--border-color); padding-top: 0.85rem;">
+              style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; max-width: 200px; margin: 0 auto; margin-top: 1rem;"
-          <div><strong>Modalidad:</strong> ${modalidad}</div>
+              onclick="openCourseModal('${course.id}')">
-          <div><strong>Duración:</strong> ${duracion}</div>
+        Ver ficha
-          <div><strong>Nivel:</strong> ${nivel}</div>
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-          <div><strong>Próxima edición:</strong> <span style="${proxima.toLowerCase() === 'a confirmar' ? 'color: #D97706; font-weight: 600;' : ''}">${proxima}</span></div>
+            stroke-linecap="round" stroke-linejoin="round">
-        </div>
+          <circle cx="12" cy="12" r="10"></circle>
-
+          <polyline points="12 16 16 12 12 8"></polyline>
-        <button class="btn btn-outline btn-sm w-full" style="width: 100%;" onclick="openCourseModal('${course.id}')">
+          <line x1="8" y1="12" x2="16" y2="12"></line>
-          Ver Ficha Técnica y Programa
+        </svg>
-        </button>
+      </button>
-      </div>
     `;
     container.appendChild(card);
   });

somos-ide.html

@@ -17,74 +17,186 @@
 
   <main>
     
-    <!-- Hero / Origen y Propósito -->
+    <!-- Seccion 1: Hero -->
-    <section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
+    <section class="section-padding-md herobg-7">
-      <div class="container container-narrow text-center">
+      <div class="container container-wide">
-        <span class="eyebrow">PROPÓSITO & IDENTIDAD</span>
+        <div class="hero-grid">
-        <h1 style="margin-bottom: 1.5rem;">Vemos organizaciones. <br>Entendemos sistemas. <br>Conectamos el todo. </h1>
+          <div>
-        <p class="lead-text" style="margin: 0 auto 2rem auto;">
+            <span class="eyebrow" style="text-transform: uppercase;">PROPÓSITO & IDENTIDAD</span>
-          IDE nace de una forma compartida de entender la gestión: ninguna decisión ocurre de manera aislada.
+            <h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
-        <br>Personas, procesos, proyectos, conocimiento y tecnología se conectan y se afectan mutuamente. Por eso, antes de proponer una solución buscamos comprender esas relaciones, identificar dónde podemos generar mayor impacto y conectar las capacidades necesarias para hacerlo posible.
+              Vemos organizaciones. Entendemos sistemas. Conectamos el todo.
-        </p>
+            </h1>
-        <div class="card-somos">
+            <p class="lead-text" style="margin-bottom: 2.5rem;">
+              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 -->
+            <div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
+              <a href="contacto.html" class="btn btn-primary 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: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
+          </div>
         </div>
       </div>
     </section>
 
-    <!-- Cómo Pensamos: La Mirada Sistémica -->
+    <!-- Seccion 2: Filosofía de Trabajo -->
     <section class="section-padding">
       <div class="container">
-        <div class="grid-2" style="align-items: center; gap: 3rem;">
+
+        <!-- Bloque superior: título + texto -->
+        <div class="filosofia-intro">
           <div>
             <span class="eyebrow">FILOSOFÍA DE TRABAJO</span>
-            <h2>No intervenimos en todo. Comprendemos el todo para saber dónde intervenir.</h2>
+            <h2 class="filosofia-intro__title">
-            <p style="font-size: 1.05rem; color: var(--text-body); margin-top: 1rem; line-height: 1.7;">
+              No intervenimos en todo. Comprendemos el todo para saber dónde intervenir.
-              Cada organización tiene su propia realidad. Por eso, antes de proponer una solución buscamos comprender su contexto, sus relaciones y aquello que está detrás de los desafíos visibles.
+            </h2>
-              <br>A partir de esa comprensión, focalizamos la intervención, conectamos las capacidades necesarias y trabajamos junto a las personas de la organización para generar mejoras que puedan sostenerse en el tiempo.
-              </p>
-            <p style="font-size: 1rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.6;">
-              
-            </p>
           </div>
           <div>
-            <div class="card" style="padding: 2.25rem;">
+            <p class="filosofia-intro__lead" style="font-style: italic;">
-              <h3 style="font-size: 1.3rem; margin-bottom: 1rem; color: var(--ide-primary);">Nuestros Principios Guía</h3>
+              Cada organización tiene su propia realidad. Antes de proponer una solución, comprendemos su contexto, sus relaciones y lo que está detrás de los desafíos visibles.<br> A partir de esa comprensión, focalizamos la intervención, conectamos las capacidades necesarias y trabajamos junto a las personas para generar mejoras sostenibles.
-              <ul style="list-style: none; display: flex; flex-direction: column; gap: 1rem; font-size: 0.95rem;">
+            </p>
-                <li style="display: flex; gap: 0.75rem;">
-                  <span style="color: var(--ide-accent); font-weight: bold;">✓</span>
-                  <span><strong>Mirada Sistémica: </strong> Cada intervención considera sus relaciones e impactos sobre el conjunto.</span>
-                </li>
-                <li style="display: flex; gap: 0.75rem;">
-                  <span style="color: var(--ide-accent); font-weight: bold;">✓</span>
-                  <span><strong>Rigor con sentido práctico: </strong> Integramos metodologías, normas y buenas prácticas adaptándolas al contexto y no al revés.</span>
-                </li>
-                <li style="display: flex; gap: 0.75rem;">
-                  <span style="color: var(--ide-accent); font-weight: bold;">✓</span>
-                  <span><strong>Personas como parte del Sistema: </strong> Las personas no son destinatarias pasivas del cambio: participan, aportan conocimiento y hacen posible su evolución.</span>
-                </li>
-                <li style="display: flex; gap: 0.75rem;">
-                  <span style="color: var(--ide-accent); font-weight: bold;">✓</span>
-                  <span><strong>Capacidades que permanecen: </strong> Buscamos que cada intervención deje conocimiento, herramientas y capacidades que la organización pueda seguir desarrollando.</span>
-                </li>
-              </ul>
-            </div>
           </div>
         </div>
+
+        <!-- Cinta inferior: pilares en tarjetas cuadradas -->
+        <div class="filosofia-pilares">
+
+          <article class="pilar-card bg6">
+            <div class="pilar-card__icon">
+              <i class="fa-solid fa-diagram-project"></i>
+            </div>
+            <h3 class="pilar-card__title">Mirada Sistémica</h3>
+            <p class="pilar-card__desc">
+              Cada intervención considera sus relaciones e impactos sobre el conjunto.
+            </p>
+          </article>
+
+          <article class="pilar-card bg6">
+            <div class="pilar-card__icon">
+              <i class="fa-solid fa-gears"></i>
+            </div>
+            <h3 class="pilar-card__title">Rigor con sentido práctico</h3>
+            <p class="pilar-card__desc">
+              Adaptamos metodologías y normas al contexto, no al revés.
+            </p>
+          </article>
+
+          <article class="pilar-card bg6">
+            <div class="pilar-card__icon">
+              <i class="fa-solid fa-users"></i>
+            </div>
+            <h3 class="pilar-card__title">Personas como parte del sistema</h3>
+            <p class="pilar-card__desc">
+              Participan, aportan conocimiento y hacen posible la evolución.
+            </p>
+          </article>
+
+          <article class="pilar-card bg6">
+            <div class="pilar-card__icon">
+              <i class="fa-solid fa-seedling"></i>
+            </div>
+            <h3 class="pilar-card__title">Capacidades que permanecen</h3>
+            <p class="pilar-card__desc">
+              Cada intervención deja conocimiento y herramientas para seguir creciendo.
+            </p>
+          </article>
+
+        </div>
+
+      </div>
+    </section>
+
+    <!-- Sección 3: Experiencia -->
+    <section class="section-padding bg6">
+      <div class="container">
+        <div class="triple-section">
+
+          <!-- Col 1 (35%): Texto -->
+          <div class="triple-section__intro">
+            <span class="eyebrow">TU EYEBROW ACÁ</span>
+            <h2 class="triple-section__title">
+              Tu título principal acá, puede ir en una o dos líneas.
+            </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.
+            </p>
+          </div>
+
+          <!-- Col 2 (40%): Imagen PNG -->
+          <div class="triple-section__visual">
+            <img src="assets/img/somos/mapa2.png"
+                alt="Descripción de la imagen"
+                loading="lazy">
+          </div>
+
+          <!-- Col 3 (25%): 4 ítems con icono -->
+          <div class="triple-section__features">
+
+            <div class="triple-feature">
+              <div class="triple-feature__icon">
+                <i class="fa-solid fa-check"></i>
+              </div>
+              <p class="triple-feature__text">Texto del primer punto.</p>
+            </div>
+
+            <div class="triple-feature">
+              <div class="triple-feature__icon">
+                <i class="fa-solid fa-rocket"></i>
+              </div>
+              <p class="triple-feature__text">Texto del segundo punto.</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>
+            </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>
+
+        </div>
       </div>
     </section>
 
     <!-- El Equipo y Perfiles -->
     <section class="section-padding bg-subtle-section">
       <div class="container">
-        <div style="text-align: center; max-width: 700px; margin: 0 auto 3rem auto;">
+        <!-- Bloque superior: título + texto -->
-          <span class="eyebrow">QUIÉNES HACEMOS IDE</span>
+        <div class="filosofia-intro">
-          <h2>Experiencias que se complementan</h2>
+          <div>
-          <p class="lead-text" style="margin-top: 1rem;">
+            <span class="eyebrow">QUIÉNES HACEMOS IDE</span>
-            IDE reúne profesionales con trayectorias en gestión, proyectos, mejora continua, sistemas de gestión, transformación digital, inteligencia artificial, docencia y desarrollo organizacional. <br>Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades se conectan.
+            <h2 class="filosofia-intro__title">
-          </p>
+              Experiencias que se complementan
+            </h2>
+          </div>
+          <div>
+            <p class="filosofia-intro__lead">
+              IDE reúne profesionales con trayectorias en gestión, proyectos, mejora continua, sistemas de gestión, transformación digital, inteligencia artificial, docencia y desarrollo organizacional.
+Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades se conectan.
+            </p>
+          </div>
         </div>
 
-        <div class="grid-4">
+        <div class="grid-5">
           
           <!-- Miembro 1 -->
            <div class="card somos m1">
@@ -93,8 +205,11 @@
             </div>
             <h3>Claudia Raquel ANDRÉS</h3>
             <div class="somos-title">Directora General | Líder de IDE Projects</div>
-            <p>Especialista en proyectos, optimización de procesos e implementación de sistemas de gestión, con más de 15 años de experiencia en consultoría, auditoría y docencia. Impulsa la mirada sistémica que le da indentidad a IDE.</p>
+            <!--<p>Especialista en proyectos, optimización de procesos e implementación de sistemas de gestión, con más de 15 años de experiencia en consultoría, auditoría y docencia. Impulsa la mirada sistémica que le da indentidad a IDE.</p>-->
-            <a href="#" class="btn btn-outline btn-sm"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
+            <a href="https://www.linkedin.com/in/claudia-raquel-andres/" target="_blank"
+   rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
+              <i class="fa-brands fa-linkedin-in"></i>
+            </a>
           </div>
           
           <!-- Miembro 2 -->
@@ -104,10 +219,13 @@
             </div>
             <h3>José PUGLIESE</h3>
             <div class="somos-title">Líder de IDE Digital</div>
-            <p>
+            <!--<p>
               Especialista en digitalización, Inteligencia Artificial y sistematización de procesos, con más de 10 años de experiencia en liderazgo de equipos e implementación de soluciones tecnológicas orientadas a optimizar la gestión.
-            </p>
+            </p>-->
-            <a href="#" class="btn btn-outline btn-sm"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
+            <a href="https://www.linkedin.com/in/ing-jos%C3%A9-pugliese-706445413/" target="_blank"
+   rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
+              <i class="fa-brands fa-linkedin-in"></i>
+            </a>
           </div>
 
           <!-- Miembro 3 -->
@@ -117,10 +235,13 @@
             </div>
             <h3>Miguel Ángel ROJAS</h3>
             <div class="somos-title">Líder de IDE Excellence</div>
-            <p>
+            <!--<p>
               Especialista en gestión y optimización de procesos fisicoquímicos, mejora continua y sistemas de calidad, con más de 15 años de experiencia impulsando la eficiencia operativa y el desempeño sostenible.
-            </p>
+            </p>-->
-            <a href="#" class="btn btn-outline btn-sm"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
+            <a href="https://www.linkedin.com/in/ingenieromiguelrojas/" target="_blank"
+   rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
+              <i class="fa-brands fa-linkedin-in"></i>
+            </a>
           </div>
 
           <!-- Miembro 4 -->
@@ -128,60 +249,61 @@
             <div class="card-portrait">
               <img src="./assets/img/VUB.png" alt="Retrato de Carlos Garcia" loading="lazy">
             </div>
-            <h3>Víctor Ulises BARRIONUEVO</h3>
+            <h3>Víctor BARRIONUEVO</h3>
             <div class="somos-title">Projects & Digital</div>
-            <p>
+            <!--<p>
              Especialista en gestión y ejecución de proyectos de infraestructura y telecomunicaciones, con amplia experiencia en planificación, operaciones y coordinación de equipos multidisciplinarios.
-            </p>
+            </p>-->
-            <a href="#" class="btn btn-outline btn-sm"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
+            <a href="https://www.linkedin.com/in/victor-ulises-barrionuevo/" target="_blank"
+   rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
+              <i class="fa-brands fa-linkedin-in"></i>
+            </a>
+          </div>
+          <!-- Miembro 5 -->
+          <div class="card somos m5">
+            <div class="card-portrait">
+              <img src="./assets/img/somos/logo.png" alt="Retrato de Carlos Garcia" loading="lazy">
+            </div>
+            <h3>Especialistas IDE</h3>
+            <div class="somos-title">Red de Consultores</div>
+            <a href="trabaja-con-nosotros.html" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
+              <i class="fa-solid fa-plus"></i>
+            </a>
           </div>
 
         </div>
       </div>
     </section>
 
-    <!-- Marcos de Referencia y Metodologías -->
+    <!-- Sección 4: CTA -->
-    <section class="section-padding">
+     <section class="section-padding-xs herobg-5">
-      <div class="container">
+      <div class="container container-wide">
-        <div style="text-align: center; margin-bottom: 3rem;">
+        <div class="hero-grid">
-          <span class="eyebrow">ESTÁNDARES GLOBALES</span>
+          <div>
-          <h2>Marcos y metodologías en los que nos basamos</h2>
+
+            <h2 style="margin-bottom: 0.8rem; line-height: 1.1; color: white; margin-bottom: 1.5rem;">
+              Conversemos para comprender tu contexto,<br> identificar dónde intervenir y conectar las capacidades que puedan aportar mayor valor
+            </h2>
+
+            <div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
+              <a href="contacto.html" class="btn btn-primary 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: 300px; position: relative; display: flex; justify-content: center; align-items: center;">
+          </div>
+
         </div>
-
-        <div class="grid-4" style="text-align: center;">
-          <div class="card card-feature">
-            <span class="card-icon" data-icon="iso" aria-hidden="true"></span>
-            <h4 style="color: var(--ide-excellence); margin-bottom: 0.5rem;">Normas ISO</h4>
-            <p style="font-size: 0.85rem; color: var(--text-muted);">ISO 9001, 14001, 45001, 21001, 27001 con enfoque de valor y gobernanza.</p>
-          </div>
-
-          <div class="card card-feature">
-            <span class="card-icon" data-icon="pmi" aria-hidden="true"></span>
-            <h4 style="color: var(--ide-projects); margin-bottom: 0.5rem;">PMI &amp; Agile</h4>
-            <p style="font-size: 0.85rem; color: var(--text-muted);">PMBOK®, Scrum, Kanban y marcos híbridos adaptados a proyectos complejos.</p>
-          </div>
-
-          <div class="card card-feature">
-            <span class="card-icon" data-icon="academy" aria-hidden="true"></span>
-            <h4 style="color: var(--ide-academy); margin-bottom: 0.5rem;">Adult Learning</h4>
-            <p style="font-size: 0.85rem; color: var(--text-muted);">Diseño instruccional para adultos, casos prácticos y aprendizaje experiencial.</p>
-          </div>
-
-          <div class="card card-feature">
-            <span class="card-icon" data-icon="ia" aria-hidden="true"></span>
-            <h4 style="color: var(--ide-digital); margin-bottom: 0.5rem;">IA &amp; Automatización</h4>
-            <p style="font-size: 0.85rem; color: var(--text-muted);">Integración ética de IA, análisis de datos y reingeniería de flujos de trabajo.</p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- CTA Final -->
-    <section class="section-padding" style="background-color: var(--teal-dark); border-top: 1px solid var(--border-color);">
-      <div class="container container-narrow text-center">
-        <h2 style="color: var(--text-inverse); margin-bottom: 1rem;">Conversemos para comprender tu contexto,<br> identificar dónde intervenir y conectar las capacidades que puedan aportar mayor valor</h2>
-        </p>
-        <a href="contacto.html" class="btn btn-outline-cta btn-sm" ">Hablemos</a>
       </div>
     </section>