mejoras estateticas v2.3

contacto.html

@@ -18,20 +18,15 @@
   <main>
 
     <!-- Header Contacto -->
-    <section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
+    <section class="section-padding">
-      <div class="container container-narrow text-center">
+      <div class="container container-narrow text-center" style="padding-bottom: 5rem;">
         <span class="eyebrow">CONVERSACIÓN INICIAL</span>
         <h1 style="margin-bottom: 1.25rem;">Hablemos de lo que necesitás</h1>
         <p class="lead-text" style="margin: 0 auto;">
           Cada organización, proyecto o iniciativa parte de un contexto diferente. <br>Contanos qué te trae a IDE y empecemos por entender cómo podemos aportar valor.
         </p>
       </div>
-    </section>
-
-    <!-- Formulario Inteligente & Datos de Contacto -->
-    <section class="section-padding">
       <div class="container">
-        
         <div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
           
           <!-- Columna Izquierda: Formulario Inteligente -->
@@ -156,7 +151,6 @@
 
       </div>
     </section>
-
   </main>
 
   <footer id="site-footer"></footer>

ecosistema.html

@@ -259,7 +259,7 @@
         <p class="lead-text-cta" style="margin-bottom: 1.5rem;">
           Conversemos para comprender tu desafío e identificar qué capacidades pueden aportar mayor valor.
         </p>
-        <div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
+        <div style="display: flex; justify-content: left; gap: 1rem; flex-wrap: wrap;">
           <a href="contacto.html" class="btn btn-primary-cta btn-sm">HABLEMOS</a>
           <a href="desafios.html" class="btn btn-outline-cta btn-sm">Explorar Punto de Partida</a>
         </div>

ide-academy.html

@@ -252,7 +252,7 @@
     <!-- Facilitadores / Quiénes facilitan el aprendizaje -->
     <section class="section-padding">
       <div class="container">
-        <div class="text-center" style="max-width: 720px; margin: 0 auto 2.5rem auto;">
+        <div class="text-center" style="text-align: center; max-width: 720px; margin: 0 auto 2.5rem auto;">
           <span class="eyebrow">QUIÉNES FACILITAN EL APRENDIZAJE</span>
           <h2 style="margin-bottom: 1rem;">Experiencias que se comparten</h2>
           <p class="lead-text" style="margin: 0 auto;">
@@ -260,31 +260,40 @@
           </p>
         </div>
 
-        <div class="grid-3 facilitadores-grid">
+        <div class="grid-4 facilitadores-grid">
           <!-- Facilitador 1 -->
           <div class="facilitador-item">
             <div class="facilitador-avatar">
-              <img src="assets/img/facilitador-1.jpg" alt="Nombre del facilitador 1">
+              <img src="assets/img/CRA.jpg" alt="Claudia Raquel ANDRÉS">
             </div>
-            <h4 class="facilitador-nombre">Nombre Apellido</h4>
+            <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/facilitador-2.jpg" alt="Nombre del facilitador 2">
+              <img src="assets/img/JAP2.jpg" alt="José PUGLIESE">
             </div>
-            <h4 class="facilitador-nombre">Nombre Apellido</h4>
+            <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/facilitador-3.jpg" alt="Nombre del facilitador 3">
+              <img src="assets/img/MAR.jpg" alt="Miguel Ángel ROJAS">
             </div>
-            <h4 class="facilitador-nombre">Nombre Apellido</h4>
+            <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.jpg" 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>

insights.html

@@ -20,7 +20,7 @@
     <!-- Header Academy -->
     <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="
+      <video id="hero-bg-video" muted loop playsinline style="
         position: absolute;
         top: 0;
         left: 0;

js/main.js

@@ -9,9 +9,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
 async function initApp() {
   initTheme();
+  initHeroVideoSpeed();
   await loadIncludes();
   initModals();
-  /*initBrujulaIDE();*/
   initAcademyCourses();
   initSolucionesFilters();
   initInsightsFeed();
@@ -63,18 +63,31 @@ function highlightActiveNavLink() {
   const currentPath = window.location.pathname;
   const navLinks = document.querySelectorAll('.nav-link');
 
+  // 1. Limpiar estado activo previo
+  navLinks.forEach(link => link.classList.remove('active'));
+
+  // 2. Evaluar cada enlace
   navLinks.forEach(link => {
     const href = link.getAttribute('href');
-    if (!href) return;
+    // Ignoramos enlaces vacíos o anclas "#"
+    if (!href || href === '#') return;
 
-    // Comparación de página activa
+    const isHome = (currentPath === '/' || currentPath.endsWith('index.html')) && 
-    if (
+                   (href === '/' || href === 'index.html' || href === './');
-      (currentPath === '/' || currentPath.endsWith('index.html')) && (href === '/' || href === 'index.html' || href === './') ||
+                   
-      (currentPath.includes(href) && href !== '/' && href !== 'index.html')
+    const isCurrentPage = currentPath.includes(href) && href !== '/' && href !== 'index.html';
-    ) {
+
+    if (isHome || isCurrentPage) {
       link.classList.add('active');
-    } else {
+
-      link.classList.remove('active');
+      // Si este enlace está dentro de un submenú, marcar también al padre
+      const parentDropdown = link.closest('.dropdown');
+      if (parentDropdown) {
+        const parentToggle = parentDropdown.querySelector('.dropdown-toggle');
+        if (parentToggle) {
+          parentToggle.classList.add('active');
+        }
+      }
     }
   });
 }
@@ -1123,3 +1136,44 @@ function initCareersForm() {
     }
   });
 }
+/* ==========================================================================
+   11. Video de Insights
+   ========================================================================== */
+function initHeroVideoSpeed() {
+  const video = document.getElementById('hero-bg-video');
+  if (!video) return;
+
+  const targetSpeed = 0.5; // 50% de la velocidad normal
+
+  // 1. Forzar mute por propiedad nativa JS (garantiza el autoplay sin bloqueo)
+  video.muted = true;
+  video.defaultMuted = true;
+  video.playsInline = true;
+
+  const applySpeedAndPlay = () => {
+    video.playbackRate = targetSpeed;
+    
+    // Si quedó en pausa, disparar play explícito atrapando la promesa
+    if (video.paused) {
+      const playPromise = video.play();
+      if (playPromise !== undefined) {
+        playPromise.catch(err => {
+          console.warn('El navegador requirió interacción previa:', err);
+        });
+      }
+    }
+  };
+
+  // 2. Si el video ya está listo o ya empezó a correr
+  if (video.readyState >= 2) {
+    applySpeedAndPlay();
+  } else {
+    video.addEventListener('canplay', applySpeedAndPlay, { once: true });
+    video.addEventListener('loadeddata', applySpeedAndPlay, { once: true });
+  }
+
+  // 3. Garantizar que tras el loop o reanudación conserve la velocidad
+  video.addEventListener('play', () => {
+    video.playbackRate = targetSpeed;
+  });
+}

trabaja-con-nosotros.html

@@ -18,11 +18,40 @@
   <main>
 
     <!-- Header Trabaja con Nosotros -->
-    <section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
+    <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;">
-      <div class="container container-narrow text-center">
+      
-        <span class="eyebrow">TALENTO & RED</span>
+      <!-- Video de fondo -->
-        <h1 style="margin-bottom: 1.25rem;">Sumá tu experiencia <br> al Ecosistema IDE</h1>
+      <video autoplay muted loop playsinline style="
-        <p class="lead-text" style="margin: 0 auto;">
+        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>
       </div>