desafios finish

css/styles.css

@@ -21,6 +21,7 @@
   --ide-projects: #ed8d01;
   --ide-academy: #a83c41; 
   --ide-digital: #2c69ab;
+  --teal-dark:   #1B5E6E;
 
   /* Tema Claro (Por defecto) */
   --bg-body: #F8FAFB;
@@ -75,6 +76,7 @@
   --ide-projects: #ed8d01;
   --ide-academy: #a83c41; 
   --ide-digital: #2c69ab;
+  --teal-dark:   #40ab8e;
 
   --text-primary:#4fb389;
   --text-main: #F1F5F9;
@@ -192,6 +194,12 @@ p, li, .lead-text, .text-body, .text-muted {
   line-height: 1.7;
 }
 
+.lead-text-cta {
+  font-size: 1.15rem;
+  color: var(--text-inverse);
+  max-width: 72ch;
+  line-height: 1.7;
+}
 /* --- 4. Layout & Contenedores --- */
 .container {
   width: 100%;
@@ -569,6 +577,17 @@ p, li, .lead-text, .text-body, .text-muted {
   color: var(--ide-accent);
   background-color: var(--ide-accent-soft);
 }
+.btn-outline-cta {
+  background-color: transparent;
+  color: var(--text-inverse);
+  border-color: var(--text-inverse);
+}
+
+.btn-outline-cta:hover {
+  border-color: var(--ide-accent);
+  color: var(--ide-accent);
+  background-color: var(--ide-accent-soft);
+}
 
 .btn-ghost {
   background-color: transparent;
@@ -1002,7 +1021,7 @@ p, li, .lead-text, .text-body, .text-muted {
   padding: 0.2rem 0.85rem;
   border-radius: 20px;
   font-weight: 600;
-  letter-spacing: 0.2px;
+  letter-spacing: 1px !important;
   text-transform: uppercase;
 }
 
@@ -1143,7 +1162,7 @@ p, li, .lead-text, .text-body, .text-muted {
   mask-image: url('../assets/vectores/trofeo.svg');
 }
 .card-academy .ecosystem-bg-vector {
-  opacity: 0.3;
+  opacity: 0.25;
   background-color: var(--ide-academy);
   -webkit-mask-image: url('../assets/vectores/capacitacion.svg');
   mask-image: url('../assets/vectores/capacitacion.svg');

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);">
+    <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">PUNTO DE PARTIDA</span>
+      <!-- Video de fondo -->
-        <h1 style="margin-bottom: 1.25rem;">¿Qué está pasando en tu organización?</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/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>

index.html

@@ -6,7 +6,8 @@
   <title>IDE Consultores | Todo está conectado</title>
   <!-- SEO Meta Tags  -->
   <!-- Favicon -->
-  <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="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">
   <meta name="description" content="Comprender el todo para saber dónde intervenir. Ecosistema de gestión, proyectos, formación y transformación digital.">
   <meta property="og:title" content="IDE Consultores | Todo está conectado">
   <meta property="og:description" content="En una organización, cada decisión genera efectos más allá del lugar donde interviene. Ecosistema de capacidades integradas.">