desafios finish

desafios.html

@@ -7,7 +7,8 @@
   <meta name="description" content="¿Qué está pasando en tu organización? No necesitás saber qué servicio buscar; partimos del desafío real para diseñar la intervención adecuada.">
   <meta property="og:title" content="Desafíos Organizacionales | IDE Consultores">
   <meta property="og:description" content="Explorá los desafíos más habituales: procesos, proyectos, adopción cultural, tecnología y cumplimiento normativo.">
-
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">  
+  <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
   <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
@@ -17,11 +18,40 @@
   <main>
 
     <!-- Header Desafíos -->
-    <section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
-      <div class="container container-narrow text-center">
-        <span class="eyebrow">PUNTO DE PARTIDA</span>
-        <h1 style="margin-bottom: 1.25rem;">¿Qué está pasando en tu organización?</h1>
-        <p class="lead-text" style="margin: 0 auto;">
+    <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/Video header IdeLOOP.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-inverse)">PUNTO DE PARTIDA</span>
+        <h1 style="margin-bottom: 1.25rem; color:var(--text-inverse);">¿Qué está pasando en tu organización?</h1>
+        <p class="lead-text" style="color:var(--text-inverse)">
           No necesitás tener la solución definida para empezar a conversar. Si reconocés alguno de estos síntomas o metas en tu contexto, hacé clic para explorar cómo podemos abordarlo.
         </p>
       </div>
@@ -122,6 +152,16 @@
       </div>
     </section>
 
+    <!--CTA-->
+    <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;">¿No encontraste tu desafío?</h2>
+        <p class="lead-text-cta" style="margin-bottom: 1.5rem;">
+          Si tu situación no encaja exactamente en los desafíos anteriores, no te preocupes. Podemos ayudarte a explorar y definir la mejor estrategia para tu organización.
+        </p>
+        <a href="contacto.html" class="btn btn-outline-cta btn-sm" ">Hablemos de tu desafío →</a>
+      </div>
+    </section>
     <!-- MODALES DE DETALLE DE CADA DESAFÍO -->
 
     <!-- Modal Desafío 1 -->
@@ -169,7 +209,7 @@
       <div class="modal-window">
         <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
         <span class="eyebrow">DESAFÍO: GESTIÓN DE PROYECTOS</span>
-        <h3 style="margin-bottom: 1rem; color: var(--ide-accent);">Los proyectos estratégicos se retrasan o no logran el resultado</h3>
+        <h3 style="margin-bottom: 1rem; color: var(--ide-primary);">Los proyectos estratégicos se retrasan o no logran el resultado</h3>
         
         <div style="margin-bottom: 1.25rem;">
           <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>
@@ -209,7 +249,7 @@
       <div class="modal-window">
         <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
         <span class="eyebrow">DESAFÍO: PERSONAS Y CAMBIO</span>
-        <h3 style="margin-bottom: 1rem; color: #D97706;">El equipo no adopta los cambios y persiste la resistencia</h3>
+        <h3 style="margin-bottom: 1rem; color: var(--ide-primary);">El equipo no adopta los cambios y persiste la resistencia</h3>
         
         <div style="margin-bottom: 1.25rem;">
           <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>
@@ -240,7 +280,7 @@
       <div class="modal-window">
         <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
         <span class="eyebrow">DESAFÍO: TECNOLOGÍA & IA</span>
-        <h3 style="margin-bottom: 1rem; color: #6366F1;">Queremos incorporar Inteligencia Artificial con sentido</h3>
+        <h3 style="margin-bottom: 1rem; color: var(--ide-primary);">Queremos incorporar Inteligencia Artificial con sentido</h3>
         
         <div style="margin-bottom: 1.25rem;">
           <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>