somos finish

css/styles.css

@@ -751,6 +751,104 @@ p, li, .lead-text, .text-body, .text-muted {
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
 }
+/* tarjeta nosotros*/
+.card-somos {
+  background-image: url('../assets/img/equipo.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-normal);
+  position: relative;
+  aspect-ratio: 21/9;   /* ← ajustá según tu imagen (16/9, 3/2, 21/9...) */
+  width: 100%;
+}
+
+.card-somos:hover {
+  border-color: var(--ide-accent);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.card-feature {
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.card-feature .card-icon {
+  position: absolute;
+  top: 50%;
+  right: -60px;
+  width: 120px;
+  height: 120px;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 0;
+
+  /* Máscara común (forma) */
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-size: contain;
+          mask-size: contain;
+
+  /* Color de fondo = color del SVG (lo cambiamos por card abajo) */
+  background-color: currentColor;
+
+  /* Opacidad controlada por vos */
+  opacity: 0.1;
+
+  transition: transform 0.5s ease, opacity 0.5s ease, right 0.5s ease;
+}
+
+.card-feature:hover .card-icon {
+  right: 50%;
+  transform: translate(50%, -50%) scale(1.05);
+  opacity: 0.1;
+}
+
+.card-feature h4,
+.card-feature p {
+  position: relative;
+  z-index: 1;
+}
+/* Card 1: Normas ISO */
+.card-feature:has([data-icon="iso"]) .card-icon,
+[data-icon="iso"] {
+  -webkit-mask-image: url('../assets/vectores/iso.svg');
+          mask-image: url('../assets/vectores/iso.svg');
+  background-color: var(--ide-excellence);
+}
+
+/* Card 2: PMI & Agile */
+.card-feature:has([data-icon="pmi"]) .card-icon,
+[data-icon="pmi"] {
+  -webkit-mask-image: url('../assets/vectores/trofeo.svg');
+          mask-image: url('../assets/vectores/trofeo.svg');
+  background-color: var(--ide-projects);
+}
+
+/* Card 3: Adult Learning */
+.card-feature:has([data-icon="academy"]) .card-icon,
+[data-icon="academy"] {
+  -webkit-mask-image: url('../assets/vectores/capacitacion.svg');
+          mask-image: url('../assets/vectores/capacitacion.svg');
+  background-color: var(--ide-academy);
+  opacity: 0.3;
+}
+
+/* Card 4: IA & Automatización */
+.card-feature:has([data-icon="ia"]) .card-icon,
+[data-icon="ia"] {
+  -webkit-mask-image: url('../assets/vectores/ia.svg');
+          mask-image: url('../assets/vectores/ia.svg');
+  background-color: var(--ide-digital);
+  opacity: 0.3;
+}
+/*--------------------------------------------------------------*/
 
 .grid-2 {
   display: grid;
@@ -1557,6 +1655,24 @@ canvas {
   color: #cfd4dc;
   line-height: 1.35;
 }
+/*   somos ide  */
+.card-portrait {
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+  overflow: hidden;          /* recorta la imagen al círculo */
+  margin: 0 auto 1.25rem auto;
+  border: 2px solid var(--border-color);   /* opcional: anillo sutil */
+  background-color: var(--bg-muted);       /* color de respaldo mientras carga */
+}
+
+.card-portrait img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;         /* evita deformación, recorta si es necesario */
+  object-position: center;   /* podés ajustar a "top" si la cara queda baja */
+  display: block;
+}
 /* --- 17. Footer --- */
 #site-footer {
   position: relative;

ecosistema.html

@@ -89,8 +89,8 @@
     <section class="section-padding">
       <div class="container">
         <div style="text-align: center; margin-bottom: 3rem;">
-          <span class="eyebrow">MÓDULOS</span>
+          <span class="eyebrow">CAPACIDADES</span>
-          <h2>Conocé el detalle de Nuestro Ecosistema</h2>
+          <h2>Conocé Nuestro Ecosistema en detalle</h2>
         </div>
         <!-- 1. IDE Excellence -->
         <div id="excellence" class="card card-excellence" style="margin-bottom: 2.5rem; padding: 2.5rem;">

somos-ide.html

@@ -25,9 +25,7 @@
         <p class="lead-text" style="margin: 0 auto 2rem auto;">
           IDE nace de una convicción fundamental: la verdadera transformación organizacional no ocurre acumulando iniciativas aisladas, sino comprendiendo cómo interactúan las personas, los procesos, los proyectos y la tecnología.
         </p>
-        <div class="img-placeholder" style="aspect-ratio: 21/9; margin-top: 2rem;">
+        <div class="card-somos">
-          <!-- <div class="img-placeholder-icon">🏢</div> -->
-          <div class="img-placeholder-label">Fotografía Institucional de IDE Consultores</div>
         </div>
       </div>
     </section>
@@ -40,10 +38,11 @@
             <span class="eyebrow">FILOSOFÍA DE TRABAJO</span>
             <h2>No intervenimos en todo. Comprendemos el todo para saber dónde intervenir.</h2>
             <p style="font-size: 1.05rem; color: var(--text-body); margin-top: 1rem; line-height: 1.7;">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+              Creemos que el verdadero valor de la consultoría no reside en generar cambios masivos e invasivos, sino en identificar los puntos neurálgicos de cada organización. Analizamos a fondo la dinámica de su negocio, sus procesos y su cultura operativa para obtener una visión sistémica; solo así es posible distinguir entre los síntomas visibles y los desafíos de fondo.
+              <br>A partir de ese diagnóstico integral, diseñamos intervenciones precisas y sostenibles. Trabajamos junto a sus equipos para implementar soluciones prácticas que generan impacto directo en la rentabilidad y la eficiencia, cuidando la continuidad operativa y potenciando la capacidad propia de la empresa.
             </p>
             <p style="font-size: 1rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.6;">
-              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+              
             </p>
           </div>
           <div>
@@ -88,8 +87,8 @@
           
           <!-- Miembro 1 -->
           <div class="card text-center">
-            <div class="img-placeholder" style="width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1.25rem auto; padding: 0.5rem;">
+            <div class="card-portrait">
-              <!-- <div class="img-placeholder-icon" style="font-size: 1.5rem; margin: 0;">👤</div> -->
+              <img src="../assets/img/juan_perez.png" alt="Retrato de Carlos Garcia" loading="lazy">
             </div>
             <h3 style="font-size: 1.2rem; margin-bottom: 0.25rem;">Juan Perez</h3>
             <div style="font-size: 0.85rem; font-weight: 700; color: var(--ide-primary); margin-bottom: 0.75rem;">Director General & Líder de IDE Excellence</div>
@@ -101,11 +100,11 @@
 
           <!-- Miembro 2 -->
           <div class="card text-center">
-            <div class="img-placeholder" style="width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1.25rem auto; padding: 0.5rem;">
+            <div class="card-portrait">
-              <!-- <div class="img-placeholder-icon" style="font-size: 1.5rem; margin: 0;">👤</div> -->
+              <img src="../assets/img/maria_martinez.png" alt="Retrato de Carlos Garcia" loading="lazy">
             </div>
             <h3 style="font-size: 1.2rem; margin-bottom: 0.25rem;">Maria Martinez</h3>
-            <div style="font-size: 0.85rem; font-weight: 700; color: var(--ide-accent); margin-bottom: 0.75rem;">Líder de IDE Project & PMO</div>
+            <div style="font-size: 0.85rem; font-weight: 700; color: var(--ide-projects); margin-bottom: 0.75rem;">Líder de IDE Project & PMO</div>
             <p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem;">
               Certificada PMP® y Scrum Master. Ha liderado la implementación de Oficinas de Gestión de Proyectos en empresas del sector energético y tecnológico.
             </p>
@@ -114,11 +113,11 @@
 
           <!-- Miembro 3 -->
           <div class="card text-center">
-            <div class="img-placeholder" style="width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1.25rem auto; padding: 0.5rem;">
+            <div class="card-portrait">
-              <!-- <div class="img-placeholder-icon" style="font-size: 1.5rem; margin: 0;">👤</div> -->
+              <img src="../assets/img/carlos_garcia.png" alt="Retrato de Carlos Garcia" loading="lazy">
             </div>
             <h3 style="font-size: 1.2rem; margin-bottom: 0.25rem;">Carlos Garcia</h3>
-            <div style="font-size: 0.85rem; font-weight: 700; color: #6366F1; margin-bottom: 0.75rem;">Líder de IDE Digital & Academy</div>
+            <div style="font-size: 0.85rem; font-weight: 700; color: var(--ide-digital); margin-bottom: 0.75rem;">Líder de IDE Digital & Academy</div>
             <p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem;">
               Magíster en Transformación Digital e Innovación. Especialista en automatización inteligente de flujos y diseño de programas de formación ejecutiva.
             </p>
@@ -138,20 +137,27 @@
         </div>
 
         <div class="grid-4" style="text-align: center;">
-          <div class="card">
+          <div class="card card-feature">
-            <h4 style="color: var(--ide-primary); margin-bottom: 0.5rem;">Normas ISO</h4>
+            <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">
+
-            <h4 style="color: var(--ide-accent); margin-bottom: 0.5rem;">PMI & Agile</h4>
+          <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">
+
-            <h4 style="color: #ed8d01; margin-bottom: 0.5rem;">Adult Learning</h4>
+          <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">
+
-            <h4 style="color: #2c69ab; margin-bottom: 0.5rem;">IA & Automatización</h4>
+          <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>
@@ -159,13 +165,13 @@
     </section>
 
     <!-- CTA Final -->
-    <section class="section-padding-sm bg-subtle-section">
+    <section class="section-padding" style="background-color: var(--teal-dark); border-top: 1px solid var(--border-color);">
-      <div class="container text-center">
+      <div class="container container-narrow text-center">
-        <h2 style="font-size: 2rem; margin-bottom: 1rem;">Construyamos una solución a la medida de tu organización</h2>
+        <h2 style="color: var(--text-inverse); margin-bottom: 1rem;">Construyamos una solución a la medida de tu organización</h2>
-        <p class="lead-text" style="margin: 0 auto 2rem auto;">
+        <p class="lead-text-cta" style="margin-bottom: 1.5rem;">
           Contactanos para evaluar cómo nuestro equipo multidisciplinario puede aportar valor en tu próximo desafío.
         </p>
-        <a href="contacto.html" class="btn btn-primary btn-lg">HABLEMOS</a>
+        <a href="contacto.html" class="btn btn-outline-cta btn-sm" ">Hablemos</a>
       </div>
     </section>