rf-v4.13-site finish

2026-10-10 02:47:56 -03:00
parent 38c85162c2
commit fc6f8c62fc
24 changed files with 562 additions and 221 deletions
@@ -58,7 +58,7 @@
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
-  background: var(--bg-primary, #ffffff);
+  background: var(--bg-body);
  min-height: 80px;
 }

@@ -67,7 +67,7 @@
  width: 48px;
  height: 48px;
  border-radius: 10px;
-  background: var(--bg-subtle, #f5f5f5);
+  background: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -210,6 +210,7 @@

 /* Columna 1: Textos */
 .modal-compact__col-text {
+  background: var(--bg-subtle);
  padding: 2rem 2rem 2rem 2.5rem;
  border-right: 1px solid var(--border-color, #e0e0e0);
 }
@@ -270,9 +271,9 @@

 .modal-compact__list li {
  padding: 0.75rem 1rem;
-  background: var(--bg-subtle, #f5f5f5);
+  background: var(--bg-subtle);
  border-radius: 6px;
-  border-left: 3px solid var(--ide-primary, #0066cc);
+  border-left: 3px solid var(--ide-primary);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-body, #333);
@@ -280,7 +281,7 @@
 }

 .modal-compact__list li:hover {
-  background: var(--bg-primary, #ffffff);
+  background: var(--bg-body);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transform: translateX(3px);
 }
@@ -298,7 +299,7 @@
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
-  background: var(--bg-subtle, #f8f9fa);
+  background: var(--bg-subtle);
  border-radius: 0 var(--radius-lg, 16px) var(--radius-lg, 16px) 0;
 }

@@ -327,7 +328,7 @@
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
-  background: var(--bg-primary, #ffffff);
+  background: var(--bg-surface);
  border-radius: 8px;
  transition: all 0.2s ease;
 }
@@ -433,8 +433,8 @@
  grid-template-columns: minmax(0, 40%) 1fr;
  gap: 2rem;
  align-items: stretch;
-  padding: clamp(2rem, 3.5vw, 3rem);
-  min-height: 440px;
+  padding: clamp(1rem, 2vw, 3rem);
+  min-height: 420px;
 }

 /* Columna principal: texto limitado al 40% */
@@ -225,7 +225,7 @@
  color: var(--text-muted, #888);
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
-  border-radius: 6px;
+  border-radius: 50px;
  cursor: pointer;
  transition: all 200ms ease;
 }
@@ -817,12 +817,13 @@

 /* --- Botón circular --- */
 .relacionada-card__btn {
-  width: 40px;
+  width: 100px;
  height: 40px;
-  border-radius: 50%;
+  padding: 0 1rem;
+  border-radius: 9999px;
  border: 1.5px solid currentColor;
  background: transparent;
-  display: flex;
+  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1a1a2e;
@@ -89,7 +89,8 @@

 /* Tema Oscuro (Elegante mate, sin negros puros #000 ni neón estridente) */
 [data-theme="dark"] {
-  --ide-primary:#40ab8e;
+  --ide-primary:#4caf7a;
+  --ide-accent:#2c6d8c;
  --bg-body: #11181D;
  --bg-surface: #18222A;
  --bg-surface-elevated: #202D37;
@@ -105,10 +106,6 @@
  --border-hover:#40ab8e;
  --ide-primary-light: #40ab8e;
  --ide-primary-light2: #2c69ab;
-  --ide-excellence: #4fb389;
-  --ide-projects: #ed8d01;
-  --ide-academy: #a83c41; 
-  --ide-digital: #2c69ab;
  --teal-dark:   #40ab8e;
  --cta-hover:#0d5a91;
  --bg-subtle: #03151c;;
@@ -207,7 +204,7 @@ h1 {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
-  color: var(--ide-accent);
+  color: #4caf7a;
  margin-bottom: 0.75rem;
 }
 .eyebrow-a {
@@ -378,10 +375,10 @@ p, li, .lead-text, .text-body, .text-muted {
    background-image: 
    linear-gradient(
      to right,
-      rgba(56,128,89, 1) 0%,
-      rgba(56,128,89, 0.5) 40%,
-      rgba(56,128,89, 0.2) 70%,
-      rgba(56,128,89, 0.05) 100%
+      rgba(0, 0, 0, 0.6) 0%,
+      rgba(0, 0, 0, 0.3) 20%,
+      rgba(0, 0, 0, 0.15) 70%,
+      rgba(0, 0, 0, 0.0) 100%
    ),
    url('../assets/img/hero/hero-desafios.png');
  background-size: cover;
@@ -444,7 +441,34 @@ p, li, .lead-text, .text-body, .text-muted {
  background-position: center;
  background-repeat: no-repeat;
 }
-
+.herobg-8{
+    background-image: 
+    linear-gradient(
+      to right,
+      rgba(30,74,94, 1) 30%,
+      rgba(30,74,94, 0.7) 60%,
+      rgba(30,74,94, 0.2) 80%,
+      rgba(30,74,94, 0.05) 100%
+    ),
+    url('../assets/img/minera.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.herobg-9 {
+  background-image: 
+    linear-gradient(
+      to right,
+      color-mix(in srgb, var(--bg-body) 100%, transparent) 30%,
+      color-mix(in srgb, var(--bg-body) 70%, transparent) 60%,
+      color-mix(in srgb, var(--bg-body) 20%, transparent) 80%,
+      color-mix(in srgb, var(--bg-body) 5%, transparent) 100%
+    ),
+    url('../assets/img/blur.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}


 /* --- 5. Componentes: Header & Navbar --- */
@@ -502,7 +526,7 @@ p, li, .lead-text, .text-body, .text-muted {
 }

 .nav-link:hover, .nav-link.active {
-  color: var(--ide-accent);
+  color: #4caf7a;
 }

 .nav-link.active::after {
@@ -512,7 +536,7 @@ p, li, .lead-text, .text-body, .text-muted {
  left: 0;
  width: 100%;
  height: 2px;
-  background-color: var(--ide-accent);
+  background-color: #4caf7a;
  border-radius: 2px;
 }

@@ -769,19 +793,6 @@ p, li, .lead-text, .text-body, .text-muted {
  text-decoration: none;
 }

-.btn-primary {
-  background-color: var(--ide-primary);
-  color: #FFFFFF;
-  border-color: var(--ide-primary);
-}
-
-.btn-primary:hover {
-  background-color: var(--ide-primary-dark);
-  border-color: var(--ide-primary-dark);
-  color: #FFFFFF;
-  box-shadow: var(--shadow-md);
-  transform: translateY(-1px);
-}
 .btn-academy {
  background-color: var(--ide-academy);
  color: #FFFFFF;
@@ -900,7 +911,7 @@ p, li, .lead-text, .text-body, .text-muted {
 }

 .btn-cta-unificado:hover {
-  background-color: var(--ide-primary-dark);
+  background-color: var(--ide-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
 }
@@ -916,6 +927,29 @@ p, li, .lead-text, .text-body, .text-muted {
  font-size: 0.95rem;
  padding: 0.5rem 1.25rem;
 }
+.btn-cta-outline {
+  padding: 0.75rem 2rem;
+  border-radius: 50px; /* Estilo píldora */
+  font-family: 'Barlow Condensed', sans-serif;
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: var(--ide-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid var(--ide-primary);
+  transition: all var(--transition-fast);
+}
+
+.btn-cta-outline:hover {
+  background-color: var(--ide-accent);
+  color: #FFFFFF;
+  border-color: var(--ide-accent);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}

 /*==============================*/

@@ -1367,7 +1401,7 @@ p, li, .lead-text, .text-body, .text-muted {
 .quiz-progress-fill {
  height: 100%;
  width: 0%;
-  background: var(--ide-accent, #0066cc);
+  background: #4caf7a;
  border-radius: 8px;
  transition: width 0.45s ease;
 }
@@ -1417,7 +1451,6 @@ p, li, .lead-text, .text-body, .text-muted {
 }

 .quiz-option-card.selected {
-  background: var(--ide-primary-light, #e6f0ff);
  border-color: var(--ide-primary, #0066cc);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
 }
@@ -1440,21 +1473,7 @@ p, li, .lead-text, .text-body, .text-muted {
 }

 /* ---- Botón volver ---- */
-.quiz-back-btn {
-  background: none;
-  border: none;
-  color: var(--text-muted, #6c757d);
-  font-size: 0.9rem;
-  cursor: pointer;
-  padding: 0.4rem 0.8rem;
-  border-radius: 0.4rem;
-  transition: all 0.2s ease;
-}

-.quiz-back-btn:hover {
-  color: var(--text-body);
-  background: var(--bg-body);
-}
 /* ---- Estilos para títulos con iconos SVG en las tarjetas del quiz ---- */
 .quiz-option-card .opt-title {
  font-family: 'Barlow Condensed', sans-serif;
@@ -3563,6 +3582,308 @@ canvas {
  margin: 0.4rem 0 0 0;
 }

+/* ==========================================================================
+   SECCIÓN 2 — ¿Por qué sumarte? (grid de 5 en fila)
+   ========================================================================== */
+
+.sumarte-grid {
+  display: grid;
+  grid-template-columns: 0.8fr 1fr 1fr 1fr 1fr;
+  gap: 1.5rem;
+  align-items: start;
+}
+
+/* --- G1: Intro --- */
+.sumarte-intro {
+  padding-top: 0.5rem;
+}
+
+.sumarte-intro .eyebrow {
+  font-size: 1.05rem;
+  line-height: 1.3;
+  letter-spacing: 0.14em;
+}
+
+/* --- Cards 2 a 5 --- */
+.sumarte-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 1.25rem 1rem;
+  border-left: 2px solid var(--border-color);
+  transition: border-color var(--transition-normal);
+}
+
+.sumarte-card:hover {
+  border-left-color: var(--ide-accent);
+}
+
+.sumarte-card__icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background-color: var(--ide-accent-soft);
+  color: var(--ide-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.05rem;
+  margin-bottom: 0.35rem;
+  transition: transform var(--transition-fast),
+              background-color var(--transition-fast),
+              color var(--transition-fast);
+}
+
+.sumarte-card:hover .sumarte-card__icon {
+  transform: scale(1.08);
+  background-color: var(--ide-accent);
+  color: #FFFFFF;
+}
+
+.sumarte-card__title {
+  font-family: 'Barlow Semi Condensed', sans-serif;
+  font-size: 1.05rem;
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--text-main);
+  margin: 0;
+}
+
+.sumarte-card__desc {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  line-height: 1.55;
+  margin: 0;
+}
+
+/* ==========================================================================
+   SECCIÓN 3 — Nuestra forma de trabajar
+   ========================================================================== */
+
+.forma-trabajar {
+  display: grid;
+  grid-template-columns: 1fr auto 1.15fr;
+  gap: 3rem;
+  align-items: center;
+}
+
+/* --- Col 1: Título --- */
+.forma-trabajar__intro {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.forma-trabajar__title {
+  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
+  line-height: 1.15;
+  margin: 0.25rem 0 0 0;
+}
+
+/* --- Divisor vertical --- */
+.forma-trabajar__divider {
+  width: 3px;
+  height: 100%;
+  min-height: 180px;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    var(--ide-accent) 30%,
+    var(--ide-primary) 70%,
+    transparent 100%
+  );
+  border-radius: 2px;
+  align-self: stretch;
+}
+
+/* --- Col 2: Quote --- */
+.forma-trabajar__quote {
+  position: relative;
+  padding-left: 0.5rem;
+}
+
+/* Comilla decorativa gigante */
+.forma-trabajar__quote-mark {
+  position: absolute;
+  top: -3.5rem;
+  left: -1.25rem;
+  font-family: 'Bebas Neue', 'Barlow Semi Condensed', Georgia, serif;
+  font-size: 8rem;
+  line-height: 1;
+  color: var(--ide-accent);
+  opacity: 0.12;
+  pointer-events: none;
+  user-select: none;
+  z-index: 0;
+}
+
+.forma-trabajar__quote-lead {
+  position: relative;
+  z-index: 1;
+  font-family: 'Barlow Semi Condensed', sans-serif;
+  font-weight: 500;
+  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
+  line-height: 1.5;
+  color: var(--text-main);
+  margin: 0 0 1.25rem 0;
+}
+
+.forma-trabajar__quote-body {
+  position: relative;
+  z-index: 1;
+  font-size: 1rem;
+  line-height: 1.75;
+  color: var(--text-body);
+  margin: 0;
+}
+
+/* ==========================================================================
+   SECCIÓN 4 — Formulario + imagen fundida a la derecha
+   ========================================================================== */
+
+.careers-form-section {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Imagen fundida: ocupa la mitad derecha */
+.careers-form-section__bg {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 55%;
+  background-image: url('../assets/img/culture.png');
+  background-size: cover;
+  background-position: center right;
+  background-repeat: no-repeat;
+  z-index: 0;
+  pointer-events: none;
+
+  /* Fade hacia la izquierda y hacia arriba/abajo para fundir con el fondo */
+  -webkit-mask-image: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 0.85) 30%,
+    rgba(0, 0, 0, 0.4) 60%,
+    rgba(0, 0, 0, 0) 95%
+  );
+  mask-image: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 0.85) 30%,
+    rgba(0, 0, 0, 0.4) 60%,
+    rgba(0, 0, 0, 0) 95%
+  );
+
+  /* Reducir un poco la intensidad general */
+  opacity: 0.9;
+}
+
+/* Reducción en modo oscuro para no quemar la vista */
+[data-theme="dark"] .careers-form-section__bg {
+  opacity: 0.55;
+}
+
+/* Contenedor del formulario */
+.careers-form-wrap {
+  position: relative;
+  z-index: 1;
+  max-width: 620px;   /* deja la mitad derecha libre para la imagen */
+  margin-left: 10%;
+}
+
+.careers-form-card {
+  padding: clamp(1.75rem, 4vw, 2.5rem);
+  background-color: var(--bg-surface);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* Forzar ligera transparencia para que se intuya la imagen detrás */
+.careers-form-card {
+  background-color: color-mix(in srgb, var(--bg-surface) 92%, transparent);
+}
+
+[data-theme="dark"] .careers-form-card {
+  background-color: color-mix(in srgb, var(--bg-surface) 88%, transparent);
+}
+
+.careers-form-card__title {
+  font-size: 1.35rem;
+  margin-bottom: 0.5rem;
+  color: var(--ide-accent-hover);
+}
+
+.careers-form-card__lead {
+  font-size: 0.88rem;
+  color: var(--text-muted);
+  margin-bottom: 1.75rem;
+  line-height: 1.6;
+}
+
+.careers-form-card__note {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+  margin: 0.75rem 0 0 0;
+  line-height: 1.5;
+}
+
+/* ==========================================================================
+   RESPONSIVE
+   ========================================================================== */
+
+/* Tablet */
+@media (max-width: 1100px) {
+  .sumarte-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.25rem;
+  }
+
+  .sumarte-intro {
+    grid-column: 1 / -1;
+    text-align: center;
+    margin-bottom: 0.5rem;
+  }
+
+  .careers-form-section__bg {
+    width: 45%;
+    opacity: 0.7;
+  }
+
+  .careers-form-wrap {
+    max-width: 100%;
+  }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  .sumarte-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .sumarte-card {
+    border-left: 2px solid var(--border-color);
+    padding: 1rem;
+  }
+
+  .careers-form-section__bg {
+    width: 100%;
+    opacity: 0.18;
+    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
+    mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
+  }
+
+  [data-theme="dark"] .careers-form-section__bg {
+    opacity: 0.12;
+  }
+
+  .careers-form-card {
+    background-color: var(--bg-surface);
+  }
+}
+
 /* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@@ -23,13 +23,13 @@
      <div class="container">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
          <div>
-            <h1 style="margin-bottom: 1.25rem; font-size: 3rem; line-height: 1.1; color:white">
+            <h1 style="margin-bottom: 1.25rem; color:white">
              ¿Qué está pasando<br>en tu organización?
            </h1>
            <p class="lead-text" style="color:white">
              A veces el desafío es evidente. Otras, aparece como una señal, una necesidad de cambio o una oportunidad. Empecemos por comprenderlo para identificar dónde intervenir.
            </p>
-            <a href="contacto.html" class="btn btn-primary btn-cta-unificado"
+            <a href="contacto.html" class="btn btn-cta-unificado"
                style="border-radius: 50px; align-items: center; gap: 0.5rem; margin-top: 1.5rem; display: inline-flex;">
                HABLEMOS
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
@@ -46,7 +46,7 @@
    </section>

    <!-- Grilla de Desafíos con Modales -->
-    <section class="section-padding bg1">
+    <section class="section-padding bg7">

      <div class="container">
        
@@ -63,7 +63,7 @@
                <i class="fa-solid fa-sitemap"></i>
              </div>
              <h3 class="desafio-card__title">Crecimos y necesitamos ordenar la gestión.</h3>
-              <button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
+              <button class="btn btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;" aria-label="Abrir detalle"><i class="fa-solid fa-arrow-right"></i></i></button>
            </div>
          </div>

@@ -78,7 +78,7 @@
                <i class="fa-solid fa-bullseye"></i>
              </div>
              <h3 class="desafio-card__title">Tenemos muchas iniciativas, pero cuesta convertirlas en resultados.</h3>
-              <button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
+              <button class="btn   btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;" aria-label="Abrir detalle"><i class="fa-solid fa-arrow-right"></i></i></button>
            </div>
          </div>

@@ -93,7 +93,7 @@
                <i class="fa-solid fa-people-arrows"></i>
              </div>
              <h3 class="desafio-card__title">Estamos impulsando cambios, pero cuesta llevarlos a la práctica.</h3>
-              <button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
+              <button class="btn   btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;" aria-label="Abrir detalle"><i class="fa-solid fa-arrow-right"></i></i></button>
            </div>
          </div>

@@ -108,7 +108,7 @@
                <i class="fa-solid fa-robot"></i>
              </div>
              <h3 class="desafio-card__title">Queremos aprovechar la tecnología y la IA con sentido.</h3>
-              <button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
+              <button class="btn   btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;" aria-label="Abrir detalle"><i class="fa-solid fa-arrow-right"></i></i></button>
            </div>
          </div>

@@ -123,7 +123,7 @@
                <i class="fa-solid fa-certificate"></i>
              </div>
              <h3 class="desafio-card__title">Necesitamos cumplir nuevos requisitos sin sumar burocracia.</h3>
-              <button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
+              <button class="btn   btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;" aria-label="Abrir detalle"><i class="fa-solid fa-arrow-right"></i></i></button>
            </div>
          </div>

@@ -138,7 +138,7 @@
                <i class="fa-solid fa-compass"></i>
              </div>
              <h3 class="desafio-card__title">Sabemos que algo debería cambiar, pero no tenemos claro por dónde empezar.</h3>
-              <button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
+              <button class="btn   btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;" aria-label="Abrir detalle"><i class="fa-solid fa-arrow-right"></i></i></button>
            </div>
          </div>

@@ -148,12 +148,12 @@
    </section>

    <!--Seccion 3-->
-    <section class="section-padding bg2">
+    <section class="section-padding bg6">
      <div class="container">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
          <div>
            <span class="eyebrow" style="text-transform: uppercase;">UNA MIRADA AMPLIA</span>
-            <h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: var(--text-heading);">
+            <h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: var(--ide-primary);">
              Distintas señales pueden tener un mismo origen.
            </h1>
            <p class="lead-text" style="margin-bottom: 2.5rem;">
@@ -182,7 +182,7 @@

            <!-- 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"
+              <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"
@@ -260,7 +260,7 @@
              </div>
            </div>

-            <a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
+            <a href="contacto.html" class="btn   btn-cta-unificado modal-compact__cta">HABLEMOS</a>
          </div>
        </div>
      </div>
@@ -319,7 +319,7 @@
              </div>
            </div>

-            <a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
+            <a href="contacto.html" class="btn   btn-cta-unificado modal-compact__cta">HABLEMOS</a>
          </div>
        </div>
      </div>
@@ -378,7 +378,7 @@
              </div>
            </div>

-            <a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
+            <a href="contacto.html" class="btn   btn-cta-unificado modal-compact__cta">HABLEMOS</a>
          </div>
        </div>
      </div>
@@ -436,7 +436,7 @@
              </div>
            </div>

-            <a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
+            <a href="contacto.html" class="btn   btn-cta-unificado modal-compact__cta">HABLEMOS</a>
          </div>
        </div>
      </div>
@@ -495,7 +495,7 @@
              </div>
            </div>

-            <a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
+            <a href="contacto.html" class="btn   btn-cta-unificado modal-compact__cta">HABLEMOS</a>
          </div>
        </div>
      </div>
@@ -545,7 +545,7 @@
              </div>
            </div>

-            <a href="index.html#brujula" class="btn btn-primary btn-cta-unificado modal-compact__cta">Orientarme con la Brújula IDE</a>
+            <a href="index.html#brujula" class="btn   btn-cta-unificado modal-compact__cta">Orientarme con la Brújula IDE</a>
          </div>
        </div>
      </div>
@@ -29,7 +29,7 @@

      <!-- 3. CTA -->
      <div class="footer-cta">
-        <a href="contacto.html" class="btn btn-primary footer-cta-btn">
+        <a href="contacto.html" class="btn btn-cta-unificado">
          HABLEMOS
          <svg width="16" height="16" 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>
@@ -20,13 +20,18 @@
      <li class="nav-item dropdown">
        <a href="ecosistema.html" class="nav-link dropdown-toggle">Ecosistema</a>
        <ul class="dropdown-menu">
-          <li><a href="ecosistema.html#excellence" class="nav-link">Excellence</a></li>
-          <li><a href="ecosistema.html#projects" class="nav-link">Projects</a></li>
-          <li><a href="ecosistema.html#digital" class="nav-link">Digital</a></li>
+          <li><a href="ecosistema.html#eco-excellence" class="nav-link">Excellence</a></li>
+          <li><a href="ecosistema.html#eco-projects" class="nav-link">Projects</a></li>
+          <li><a href="ecosistema.html#eco-digital" class="nav-link">Digital</a></li>
          <li><a href="ide-academy.html" class="nav-link">Academy</a></li>
        </ul>
      </li>
-      <li><a href="somos-ide.html" class="nav-link">Somos IDE</a></li>
+      <li class="nav-item dropdown">
+        <a href="somos-ide.html" class="nav-link dropdown-toggle">Somos IDE</a>
+        <ul class="dropdown-menu">
+          <li><a href="trabaja-con-nosotros.html" class="nav-link">Trabaja con nosotros</a></li>
+        </ul>
+      </li>
      <li><a href="insights.html" class="nav-link">Insights</a></li>            
    </ul>

@@ -37,10 +37,10 @@
          <div>
            <span class="eyebrow" style="text-transform: uppercase;">¿Qué pasa cuando dejamos de mirar los problemas por
              separado?</span>
-            <h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
+            <h1 style="margin-bottom: 1rem; font-size: 5.5rem; line-height: 1.1; color: white;">
              Conectamos el todo
            </h1>
-            <p class="lead-text" style="margin-bottom: 2.5rem;">
+            <p class="lead-text" style="margin-bottom: 2.5rem;color:white">
              En IDE entendemos cómo funciona el sistema para identificar dónde intervenir, integrar las capacidades
              necesarias y generar valor en el conjunto.
            </p>
@@ -61,7 +61,7 @@
                  </svg>
                </button>
              </form>
-              <a href="contacto.html" class="btn btn-primary btn-cta-unificado"
+              <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"
@@ -360,6 +360,7 @@
            <!-- BOTÓN VOLVER GLOBAL -->
            <button id="global-quiz-back-btn" class="quiz-back-btn" onclick="goBack()" style="display: none;">← Volver</button>

+
            <!-- ==========================================================
              PASO 1: Situación actual
              ========================================================== -->
@@ -738,10 +739,11 @@
                </div>

                <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center; width:100%;">
-                  <a id="resultCTA" href="desafios.html" class="btn btn-primary" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;">
+                  <a id="resultCTA" href="desafios.html" class="btn btn-cta-unificado" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;">
                    Explorar por desafío →</a>
-                  <a href="contacto.html" class="btn btn-ghost btn-sm" style="font-size: 0.8rem; padding: 0.3rem 0.8rem;">Hablemos directamente</a>
-                  <button class="btn btn-outline btn-sm" onclick="restartQuiz()" style="font-size: 0.8rem; padding: 0.3rem 0.8rem;">Reiniciar</button>
+                  <a class="btn btn-cta-outline" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;" href="contacto.html">Hablemos directamente</a>
+                  <a class="btn btn-cta-outline" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;" onclick="restartQuiz()">Reiniciar</a>
+
                </div>
              </div>
            </div>
@@ -763,7 +765,7 @@

            <!-- 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"
+              <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"
@@ -24,13 +24,13 @@
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
          <div>
            <span class="eyebrow" style="text-transform: uppercase;">SOLUCIONES</span>
-            <h1 style="margin-bottom: 1.25rem; font-size: 3rem; line-height: 1.1; color:white">
+            <h1 style="margin-bottom: 1.25rem; color:white">
              De la necesidad a los resultados concretos.
            </h1>
            <p class="lead-text" style="color:white">
              Soluciones integradas de gestión, proyectos, tecnología y desarrollo de capacidades para que tu organización avance.
            </p>
-            <a href="contacto.html" class="btn btn-primary btn-cta-unificado"
+            <a href="contacto.html" class="btn btn-cta-unificado"
                style="border-radius: 50px; align-items: center; gap: 0.5rem; margin-top: 1.5rem; display: inline-flex;">
                HABLEMOS
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
@@ -67,7 +67,7 @@
            <div class="solucion-card__body">
              <h3 class="solucion-card__title">Sistema de gestión y certificaciones</h3>
              <p class="solucion-card__subtitle">Para convertir requisitos en herramientas de gestión.</p>
-              <a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Sistemas de Gestión">
+              <a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Sistemas de Gestión">
                <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
@@ -86,7 +86,7 @@
            <div class="solucion-card__body">
              <h3 class="solucion-card__title">Procesos y mejora organizacional</h3>
              <p class="solucion-card__subtitle">Para transformar la forma en que la organización funciona.</p>
-              <a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Procesos y Mejora">
+              <a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Procesos y Mejora">
                <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
@@ -105,7 +105,7 @@
            <div class="solucion-card__body">
              <h3 class="solucion-card__title">Proyectos y PMO</h3>
              <p class="solucion-card__subtitle">Para convertir iniciativas estratégicas en resultados.</p>
-              <a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Proyectos y PMO">
+              <a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Proyectos y PMO">
                <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
@@ -124,7 +124,7 @@
            <div class="solucion-card__body">
              <h3 class="solucion-card__title">Desarrollo de Capacidades</h3>
              <p class="solucion-card__subtitle">Para transformar conocimiento en capacidad de acción.</p>
-              <a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Desarrollo de Capacidades">
+              <a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Desarrollo de Capacidades">
                <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
@@ -143,7 +143,7 @@
            <div class="solucion-card__body">
              <h3 class="solucion-card__title">Transformación digital e IA</h3>
              <p class="solucion-card__subtitle">Para poner la tecnología al servicio de la gestión.</p>
-              <a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Transformación Digital">
+              <a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Transformación Digital">
                <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
@@ -162,7 +162,7 @@
            <div class="solucion-card__body">
              <h3 class="solucion-card__title">Educación y gobierno</h3>
              <p class="solucion-card__subtitle">Para transformar conocimiento, procesos y capacidades en mejoras.</p>
-              <a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Educación y Gobierno">
+              <a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Educación y Gobierno">
                <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
@@ -181,7 +181,7 @@
            <div class="solucion-card__body">
              <h3 class="solucion-card__title">Soluciones sectoriales</h3>
              <p class="solucion-card__subtitle">Para responder a desafíos que requieren conocimiento del contexto.</p>
-              <a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Soluciones Sectoriales">
+              <a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Soluciones Sectoriales">
                <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
@@ -196,7 +196,7 @@
            <div class="solucion-card__body">
              <h3 class="solucion-card__title">A medida</h3>
              <p class="solucion-card__subtitle">Contactanos si necesitas soluciones específicas.</p>
-              <a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Soluciones a Medida">
+              <a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Soluciones a Medida">
                <i class="fa-solid fa-arrow-right"></i>
              </a>
            </div>
@@ -229,7 +229,7 @@
            <p class="relacionada-card__text">
              Sistemas de gestión y mejora continua
            </p>
-            <a href="#" class="relacionada-card__btn" aria-label="Ver más sobre IDE Excellence">
+            <a href="ecosistema.html#eco-excellence" class="relacionada-card__btn"  aria-label="Ver más sobre IDE Excellence">
              <i class="fa-solid fa-arrow-right"></i>
            </a>
          </article>
@@ -242,7 +242,7 @@
            <p class="relacionada-card__text">
              Implementación de proyectos de mejora
            </p>
-            <a href="#" class="relacionada-card__btn" aria-label="Ver más sobre IDE Projects">
+            <a href="ecosistema.html#eco-projects" class="relacionada-card__btn" aria-label="Ver más sobre IDE Projects">
              <i class="fa-solid fa-arrow-right"></i>
            </a>
          </article>
@@ -255,7 +255,7 @@
            <p class="relacionada-card__text">
              Automatización y soluciones digitales
            </p>
-            <a href="#" class="relacionada-card__btn" aria-label="Ver más sobre IDE Digital">
+            <a href="ecosistema.html#eco-digital" class="relacionada-card__btn" aria-label="Ver más sobre IDE Digital">
              <i class="fa-solid fa-arrow-right"></i>
            </a>
          </article>
@@ -268,7 +268,7 @@
            <p class="relacionada-card__text">
              Formación en gestión por procesos
            </p>
-            <a href="#" class="relacionada-card__btn" aria-label="Ver más sobre IDE Academy">
+            <a href="ide-academy.html" class="relacionada-card__btn" aria-label="Ver más sobre IDE Academy">
              <i class="fa-solid fa-arrow-right"></i>
            </a>
          </article>
@@ -297,9 +297,8 @@
              Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto.
            </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"
+              <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"
@@ -339,17 +338,7 @@
        </div>

        <div class="modal-infografia__body">
-          <p class="modal-infografia__intro">
-            Diseñamos, implementamos e integramos sistemas de gestión que permiten ordenar procesos, 
-            gestionar riesgos, mejorar el desempeño y responder a requisitos normativos sin sumar 
-            burocracia innecesaria.
-          </p>

-          <h3 class="modal-infografia__section-title">
-            <i class="fa-solid fa-award"></i>
-            Normas y Sistemas de Gestión
-          </h3>
-          
          <div class="normas-grid">
            <div class="norma-card">
              <div class="norma-card__icon"><i class="fa-solid fa-award"></i></div>
@@ -383,7 +372,7 @@
              <div class="norma-card__content">
                <h4 class="norma-card__title">ISO 21001</h4>
                <p class="norma-card__subtitle">Organizaciones Educativas</p>
-                <p class="norma-card__text">Sistema de gestión para organizaciones educativas orientado a fortalecer sus procesos y responder a las necesidades de estudiantes y otras partes interesadas.</p>
+                <p class="norma-card__text">Sistema de gestión para organizaciones educativas orientado a fortalecer sus procesos.</p>
              </div>
            </div>

@@ -402,7 +391,7 @@
              <div class="destacado-card__icon"><i class="fa-solid fa-puzzle-piece"></i></div>
              <div class="destacado-card__content">
                <h4 class="destacado-card__title">Sistemas Integrados de Gestión</h4>
-                <p class="destacado-card__text">Integración de diferentes normas y referenciales bajo una arquitectura común para reducir duplicaciones y gestionar el conjunto.</p>
+                <p class="destacado-card__text">Integración de diferentes normas y referenciales bajo una arquitectura común para gestionar el conjunto.</p>
              </div>
            </div>

@@ -410,7 +399,7 @@
              <div class="destacado-card__icon"><i class="fa-solid fa-clipboard-check"></i></div>
              <div class="destacado-card__content">
                <h4 class="destacado-card__title">Auditorías y preparación para la certificación</h4>
-                <p class="destacado-card__text">Diagnóstico de brechas, auditorías internas, tratamiento de hallazgos y acompañamiento para implementar, mantener o ampliar sistemas y certificaciones.</p>
+                <p class="destacado-card__text">Diagnóstico de brechas, auditorías internas, tratamiento de hallazgos y acompañamiento para implementar sistemas y certificaciones.</p>
              </div>
            </div>
          </div>
@@ -448,13 +437,7 @@
            Diseñamos e implementamos mejoras en los procesos y en la estructura organizacional para 
            que el trabajo fluya de manera más eficiente, con responsabilidades claras y decisiones 
            basadas en información confiable.
-          </p>
-
-          <h3 class="modal-infografia__section-title">
-            <i class="fa-solid fa-diagram-predecessor"></i>
-            Capacidades de Mejora Organizacional
-          </h3>
-          
+          </p>          
          <div class="normas-grid">
            <div class="norma-card">
              <div class="norma-card__icon"><i class="fa-solid fa-diagram-project"></i></div>
@@ -546,10 +529,6 @@
            de madurez y necesidades.
          </p>

-          <h3 class="modal-infografia__section-title">
-            <i class="fa-solid fa-diagram-project"></i>
-            Capacidades en Gestión de Proyectos
-          </h3>
          
          <div class="normas-grid">
            <div class="norma-card">
@@ -641,11 +620,6 @@
            capacidades de gestión, liderazgo, calidad, proyectos y transformación, adaptados a la 
            realidad de cada organización.
          </p>
-
-          <h3 class="modal-infografia__section-title">
-            <i class="fa-solid fa-book-bookmark"></i>
-            Formación y Desarrollo
-          </h3>
          
          <div class="normas-grid">
            <div class="norma-card">
@@ -737,11 +711,6 @@
            para simplificar procesos, mejorar el acceso a la información y fortalecer la gestión 
            organizacional.
          </p>
-
-          <h3 class="modal-infografia__section-title">
-            <i class="fa-solid fa-robot"></i>
-            Transformación Digital
-          </h3>
          
          <div class="normas-grid">
            <div class="norma-card">
@@ -833,11 +802,6 @@
            sus sistemas de gestión, procesos, proyectos, indicadores y desarrollo de capacidades, 
            adaptados a su contexto y desafíos específicos.
          </p>
-
-          <h3 class="modal-infografia__section-title">
-            <i class="fa-solid fa-chalkboard-user"></i>
-            Soluciones para Educación y Gobierno
-          </h3>
          
          <div class="normas-grid">
            <div class="norma-card">
@@ -863,7 +827,7 @@
              <div class="norma-card__content">
                <h4 class="norma-card__title">Procesos e indicadores</h4>
                <p class="norma-card__subtitle">Gestión por procesos</p>
-                <p class="norma-card__text">Diseño y mejora de procesos académicos, administrativos y de servicios, acompañados por indicadores que permitan transformar información en decisiones.</p>
+                <p class="norma-card__text">Diseño y mejora de procesos académicos, administrativos y de servicios, con indicadores que transformen información en decisiones.</p>
              </div>
            </div>

@@ -890,7 +854,7 @@
              <div class="norma-card__content">
                <h4 class="norma-card__title">Transformación digital e IA</h4>
                <p class="norma-card__subtitle">Digitalización y automatización</p>
-                <p class="norma-card__text">Digitalización, automatización y aplicación de inteligencia artificial para simplificar procesos, mejorar el acceso a la información y fortalecer la gestión.</p>
+                <p class="norma-card__text">Digitalización, automatización y aplicación de IA para simplificar procesos, mejorar el acceso a la información y fortalecer la gestión.</p>
              </div>
            </div>
          </div>
@@ -928,11 +892,6 @@
            Contamos con experiencia y conocimiento específico en distintos sectores para diseñar 
            soluciones adaptadas a los desafíos, normativas y particularidades de cada industria.
          </p>
-
-          <h3 class="modal-infografia__section-title">
-            <i class="fa-solid fa-clipboard-question"></i>
-            Sectores de Especialización
-          </h3>
          
          <div class="normas-grid">
            <div class="norma-card">
@@ -985,7 +944,7 @@
              <div class="norma-card__content">
                <h4 class="norma-card__title">Educación & Gobierno</h4>
                <p class="norma-card__subtitle">Sistemas y capacidades</p>
-                <p class="norma-card__text">Sistemas de gestión, procesos, proyectos, indicadores y desarrollo de capacidades adaptados a organizaciones educativas y del sector público.</p>
+                <p class="norma-card__text">Sistemas de gestión, procesos, proyectos, indicadores y desarrollo de capacidades adaptados para organizaciones  públicas.</p>
              </div>
            </div>
          </div>
@@ -17,78 +17,129 @@

  <main>

-    <!-- Header Trabaja con Nosotros -->
-    <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;">
-      
-      <!-- Video de fondo -->
-      <video autoplay muted loop playsinline style="
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        opacity: 0.15;
-        z-index: 0;
-        pointer-events: none;
-      ">
-        <source src="/assets/video/desktop_working.mp4" type="video/mp4">
-        Tu navegador no soporta videos.
-      </video>
-
-      <!-- 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>
-
-      <!-- Contenido -->
-      <div class="container container-narrow text-center" style="position: relative; z-index: 2;">
-        <span class="eyebrow" style="color: var(--text-main)">TELENTO & RED</span>
-        <h1 style="margin-bottom: 1.25rem; color:var(--text-main);">Sumá tu experiencia al Ecosistema IDE</h1>
-        <p class="lead-text" style="color:var(--text-main)">
-          Construimos una red de profesionales y especialistas con experiencias diversas y una forma compartida de entender la gestión: comprender el contexto, conectar capacidades y generar valor desde la práctica.
-        </p>
+    <!-- Seccion 1: Hero -->
+    <section class="section-padding herobg-8">
+      <div class="container">
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
+          <div>
+            <span class="eyebrow" style="text-transform: uppercase;">TRABAJÁ CON NOSOTROS</span>
+            <h1 style="margin-bottom: 1.25rem; color:white">
+              Sumemos capacidades <br>para <span style="color: var(--ide-accent);">ir más lejos</span>
+            </h1>
+            <p class="lead-text" style="color:white">
+              En IDE creemos en el poder de las alianzas. Construimos una red de profesionales y especialistas con experiencias
+diversas y una forma compartida de entender la gestión: comprender el contexto, conectar capacidades y generar
+valor desde la práctica.”
+            </p>
+          </div>
+        </div>
      </div>
    </section>

-    <!-- Cultura y Formulario de Postulación -->
-    <section class="section-padding">
+    <!-- Seccion 2: ¿Por qué sumarte? -->
+    <section class="section-padding-md">
      <div class="container">
-        
-        <div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
-          
-          <!-- Cultura y Áreas -->
-          <div>
-            <span class="eyebrow">NUESTRA FORMA DE TRABAJAR</span>
-            <h2>Experiencias diferentes. <br>Una construcción compartida.</h2>
-            <p style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin: 1rem 0 1.5rem 0;">
-              Creemos en el trabajo colaborativo, el intercambio de perspectivas y la complementariedad de capacidades. Valoramos la curiosidad, el criterio profesional, la escucha y el compromiso con generar soluciones que tengan sentido para cada contexto.</p>
+        <div class="sumarte-grid">

-            <div class="card" style="margin-bottom: 1.5rem; padding: 1.5rem;">
-              <h3 style="font-size: 1.15rem; color: var(--ide-primary); margin-bottom: 0.75rem;">¿DÓNDE PODÉS SUMAR VALOR?</h3>
-              <ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9rem; color: var(--text-muted);">
-                <li>• <strong>IDE Excellence:</strong> Gestión · Procesos · Mejora continua · Sistemas de gestión · Sostenibilidad</li>
-                <li>• <strong>IDE Project:</strong> Gestión de proyectos · PMO · Planificación · Riesgos · Agilidad</li>
-                <li>• <strong>IDE Digital:</strong> Digitalización · Automatización · Inteligencia Artificial · Datos · Business Intelligence</li>
-                <li>• <strong>IDE Academy:</strong> Facilitación · Formación ejecutiva · Diseño de experiencias de aprendizaje · Desarrollo de capacidades</li>
-                <li>• <strong>¿Tu especialidad no aparece acá?</strong> También queremos conocerla. El Ecosistema puede crecer incorporando nuevas capacidades.</li>
-              </ul>
-              
-            </div>
-            <div class="card-trabajo"></div>
+          <!-- G1: Eyebrow -->
+          <div class="sumarte-intro">
+            <span class="eyebrow">¿POR QUÉ SUMARTE?</span>
          </div>

-          <!-- Formulario de Talento -->
-          <div class="card" style="padding: clamp(1.75rem, 4vw, 2.5rem);">
-            <h3 style="font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--ide-accent-hover);">CONECTEMOS CAPACIDADES</h3>
-            <p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
-              Si compartís nuestra forma de entender la gestión y creés que tu experiencia puede complementar las capacidades del Ecosistema, queremos conocerte.<br> Compartinos tus datos para conocerte y considerarte en futuras oportunidades de colaboración.
+          <!-- G2: Proyectos con impacto -->
+          <div class="sumarte-card">
+            <div class="sumarte-card__icon">
+              <i class="fa-solid fa-handshake"></i>
+            </div>
+            <h3 class="sumarte-card__title">Proyectos con impacto</h3>
+            <p class="sumarte-card__desc">
+              Participá en iniciativas que generan valor real en organizaciones de distintos sectores.
+            </p>
+          </div>
+
+          <!-- G3: Trabajo colaborativo -->
+          <div class="sumarte-card">
+            <div class="sumarte-card__icon">
+              <i class="fa-solid fa-people-group"></i>
+            </div>
+            <h3 class="sumarte-card__title">Trabajo colaborativo</h3>
+            <p class="sumarte-card__desc">
+              Formá parte de un equipo interdisciplinario y de una red de profesionales de excelencia.
+            </p>
+          </div>
+
+          <!-- G4: Desarrollo profesional -->
+          <div class="sumarte-card">
+            <div class="sumarte-card__icon">
+              <i class="fa-solid fa-bullseye"></i>
+            </div>
+            <h3 class="sumarte-card__title">Desarrollo profesional</h3>
+            <p class="sumarte-card__desc">
+              Accedé a proyectos desafiantes, intercambio de conocimiento y aprendizaje continuo.
+            </p>
+          </div>
+
+          <!-- G5: Flexibilidad -->
+          <div class="sumarte-card">
+            <div class="sumarte-card__icon">
+              <i class="fa-solid fa-gear"></i>
+            </div>
+            <h3 class="sumarte-card__title">Flexibilidad</h3>
+            <p class="sumarte-card__desc">
+              Colaborá en función de tus intereses, disponibilidad y experiencia.
+            </p>
+          </div>
+
+        </div>
+      </div>
+    </section>
+
+    <!-- Seccion 3: Nuestra forma de trabajar -->
+    <section class="section-padding-xs">
+      <div class="container">
+        <div class="forma-trabajar">
+
+          <!-- Col 1: Título -->
+          <div class="forma-trabajar__intro">
+            <span class="eyebrow">NUESTRA FORMA DE TRABAJAR</span>
+            <h2 class="forma-trabajar__title">
+              Experiencias diferentes.<br>
+              Una construcción compartida.
+            </h2>
+          </div>
+
+          <!-- Divisor vertical -->
+          <div class="forma-trabajar__divider" aria-hidden="true"></div>
+
+          <!-- Col 2: Texto en estilo quote -->
+          <div class="forma-trabajar__quote">
+            <span class="forma-trabajar__quote-mark" aria-hidden="true">"</span>
+            <p class="forma-trabajar__quote-lead">
+              Creemos en el trabajo colaborativo, el intercambio de perspectivas y la complementariedad de capacidades.
+            </p>
+            <p class="forma-trabajar__quote-body">
+              Valoramos la curiosidad, el criterio profesional, la escucha y el compromiso con generar soluciones que tengan sentido para cada contexto.
+            </p>
+          </div>
+
+        </div>
+      </div>
+    </section>
+
+    <!-- Seccion 4: Formulario -->
+    <section class="section-padding-md careers-form-section">
+      <div class="container">
+
+        <!-- Imagen de fondo fundida a la derecha -->
+        <div class="careers-form-section__bg" aria-hidden="true"></div>
+
+        <!-- Formulario (desplazado a la izquierda) -->
+        <div class="careers-form-wrap">
+          <div class="card careers-form-card">
+            <h3 class="careers-form-card__title">CONECTEMOS CAPACIDADES</h3>
+            <p class="careers-form-card__lead">
+              Si compartís nuestra forma de entender la gestión y creés que tu experiencia puede complementar las capacidades del Ecosistema, queremos conocerte.<br>
+              Compartinos tus datos para considerarte en futuras oportunidades de colaboración.
            </p>

            <form id="ide-careers-form">
@@ -129,19 +180,20 @@
              <div class="form-group">
                <label for="careers-mensaje" class="form-label">Breve presentación o trayectoria destacada</label>
                <textarea id="careers-mensaje" name="mensaje" class="form-control" rows="3" placeholder="Contanos brevemente sobre tu experiencia y cómo podrías sumar valor a IDE..."></textarea>
-              
-              <p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
-              * campos obligatorios.<br> <i>La información que compartas será utilizada únicamente para gestionar tu contacto con IDE.</i></p>
-            </div>
+              </div>

-              <button type="submit" class="btn btn-accent btn-lg" style="width: 100%; margin-top: 0.5rem;">
-                SUMARME A LA RED IDE →
+              <p class="careers-form-card__note">
+                * campos obligatorios.<br>
+                <i>La información que compartas será utilizada únicamente para gestionar tu contacto con IDE.</i>
+              </p>
+
+              <button type="submit" class="btn btn-primary btn-cta-unificado" style="margin-top: 0.5rem;">
+                SUMARME A LA RED IDE
              </button>

              <div id="careers-form-alert" class="form-alert"></div>
            </form>
          </div>
-
        </div>

      </div>