soluciones finish

css/styles.css

@@ -22,6 +22,7 @@
   --ide-academy: #a83c41; 
   --ide-digital: #2c69ab;
   --teal-dark:   #1B5E6E;
+  --cta-hover:#40ab8e;
 
   /* Tema Claro (Por defecto) */
   --bg-body: #F8FAFB;
@@ -77,6 +78,8 @@
   --ide-academy: #a83c41; 
   --ide-digital: #2c69ab;
   --teal-dark:   #40ab8e;
+  --cta-hover:#0d5a91;
+
 
   --text-primary:#4fb389;
   --text-main: #F1F5F9;
@@ -584,9 +587,10 @@ p, li, .lead-text, .text-body, .text-muted {
 }
 
 .btn-outline-cta:hover {
-  border-color: var(--ide-accent);
-  color: var(--ide-accent);
+  border-color: var(--cta-hover);
+  color: var(--cta-hover);
   background-color: var(--ide-accent-soft);
+  transform: translateY(-1px);
 }
 
 .btn-ghost {
@@ -1395,6 +1399,16 @@ p, li, .lead-text, .text-body, .text-muted {
 }
 
 /* --- 16. Filtros de Soluciones --- */
+.solution-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.solution-card.hidden {
+  display: none;
+}
+
 .filters-bar {
   display: flex;
   gap: 0.5rem;

js/main.js

@@ -11,7 +11,7 @@ async function initApp() {
   initTheme();
   await loadIncludes();
   initModals();
-  initBrujulaIDE();
+  /*initBrujulaIDE();*/
   initAcademyCourses();
   initSolucionesFilters();
   initInsightsFeed();
@@ -621,7 +621,13 @@ function initSolucionesFilters() {
   const filterBtns = document.querySelectorAll('.soluciones-filter-btn');
   const solutionCards = document.querySelectorAll('.solution-card');
 
-  if (!filterBtns.length) return;
+  console.log('🔍 Filtros encontrados:', filterBtns.length);
+  console.log('📦 Tarjetas encontradas:', solutionCards.length);
+
+  if (!filterBtns.length) {
+    console.warn('⚠️ No se encontraron botones de filtro');
+    return;
+  }
 
   filterBtns.forEach(btn => {
     btn.addEventListener('click', () => {
@@ -629,13 +635,16 @@ function initSolucionesFilters() {
       btn.classList.add('active');
 
       const filter = btn.getAttribute('data-filter');
+      console.log('🎯 Filtro seleccionado:', filter);
 
       solutionCards.forEach(card => {
         const cat = card.getAttribute('data-category');
+        console.log(`  📌 Tarjeta: ${cat} → ${filter === 'all' || cat === filter ? 'MOSTRAR' : 'OCULTAR'}`);
+        
         if (filter === 'all' || cat === filter) {
-          card.style.display = 'block';
+          card.classList.remove('hidden');
         } else {
-          card.style.display = 'none';
+          card.classList.add('hidden');
         }
       });
     });

soluciones.html

@@ -7,7 +7,8 @@
   <meta name="description" content="Servicios específicos de consultoría: Certificación ISO 9001/14001/45001/21001, PMO, Capacitación In-Company e Inteligencia Artificial en Procesos.">
   <meta property="og:title" content="Soluciones Concretas | IDE Consultores">
   <meta property="og:description" content="Encontrá respuestas concretas a requerimientos específicos: ISO, gestión de proyectos, formación y tecnología.">
-
+  <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 Soluciones -->
-    <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">RESPUESTAS ESPECÍFICAS</span>
-        <h1 style="margin-bottom: 1.25rem;">Soluciones concretas a necesidades definidas</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 Ide2.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)">RESPUESTAS ESPECÍFICAS</span>
+        <h1 style="margin-bottom: 1.25rem; color:var(--text-inverse);">Soluciones concretas a necesidades definidas</h1>
+        <p class="lead-text" style="color:var(--text-inverse)">
           Si ya sabés exactamente qué servicio estás buscando, aquí encontrarás el detalle técnico de nuestras intervenciones, alcances y valor esperado.
         </p>
       </div>
@@ -44,7 +74,7 @@
         <div class="grid-2" id="soluciones-grid">
           
           <!-- Solución 1: ISO 9001 -->
-          <div class="card solution-card" data-category="iso" style="display: flex; flex-direction: column; justify-content: space-between;">
+          <div class="card solution-card" data-category="iso">
             <div>
               <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
                 <span class="ecosystem-badge badge-excellence">IDE Excellence</span>
@@ -61,10 +91,9 @@
             </div>
 
             <div>
-              <!-- Venta cruzada sutil 
               <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
-                💡 <em>¿Sabías que un SGC requiere capacitar a los líderes? Conocé cómo <strong>IDE Academy</strong> complementa esta implementación.</em>
-              </div> -->
+                <i class="fa-regular fa-lightbulb"></i> <em>¿Sabías que un SGC requiere capacitar a los líderes? Conocé cómo <strong>IDE Academy</strong> complementa esta implementación.</em>
+              </div>
               <a href="contacto.html?busqueda=Implementar%20o%20certificar%20una%20norma&origen=Solucion_ISO9001" class="btn btn-primary btn-sm" style="width: 100%;">
                 Consultar por Implementación ISO 9001 →
               </a>
@@ -72,7 +101,7 @@
           </div>
 
           <!-- Solución 2: ISO 14001 / ISO 45001 -->
-          <div class="card solution-card" data-category="iso" style="display: flex; flex-direction: column; justify-content: space-between;">
+          <div class="card solution-card" data-category="iso">
             <div>
               <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
                 <span class="ecosystem-badge badge-excellence">IDE Excellence</span>
@@ -89,9 +118,9 @@
             </div>
 
             <div>
-             <!-- <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
-                💡 <em>Integramos tableros de control digital de incidentes a través de <strong>IDE Digital</strong>.</em>
-              </div> -->
+             <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
+                <i class="fa-regular fa-lightbulb"></i> <em>Integramos tableros de control digital de incidentes a través de <strong>IDE Digital</strong>.</em>
+              </div>
               <a href="contacto.html?busqueda=Implementar%20o%20certificar%20una%20norma&origen=Solucion_ISO14001_45001" class="btn btn-primary btn-sm" style="width: 100%;">
                 Consultar por Sistemas Integrados →
               </a>
@@ -99,7 +128,7 @@
           </div>
 
           <!-- Solución 3: ISO 21001 -->
-          <div class="card solution-card" data-category="iso" style="display: flex; flex-direction: column; justify-content: space-between;">
+          <div class="card solution-card" data-category="iso">
             <div>
               <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
                 <span class="ecosystem-badge badge-excellence">IDE Excellence</span>
@@ -116,9 +145,9 @@
             </div>
 
             <div>
-              <!-- <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
-                💡 <em>Complementamos con diseño instruccional y campus virtual vía <strong>IDE Academy</strong>.</em>
-              </div> -->
+              <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
+                <i class="fa-regular fa-lightbulb"></i> <em>Complementamos con diseño instruccional y campus virtual vía <strong>IDE Academy</strong>.</em>
+              </div>
               <a href="contacto.html?busqueda=Implementar%20o%20certificar%20una%20norma&origen=Solucion_ISO21001" class="btn btn-primary btn-sm" style="width: 100%;">
                 Consultar por ISO 21001 →
               </a>
@@ -126,7 +155,7 @@
           </div>
 
           <!-- Solución 4: PMO -->
-          <div class="card solution-card" data-category="pmo" style="display: flex; flex-direction: column; justify-content: space-between;">
+          <div class="card solution-card" data-category="pmo">
             <div>
               <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
                 <span class="ecosystem-badge badge-project">IDE Project</span>
@@ -143,9 +172,9 @@
             </div>
 
             <div>
-              <!-- <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
-                💡 <em>Formamos a tus Project Managers internos mediante los programas de <strong>IDE Academy</strong>.</em>
-              </div> -->
+              <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
+                <i class="fa-regular fa-lightbulb"></i> <em>Formamos a tus Project Managers internos mediante los programas de <strong>IDE Academy</strong>.</em>
+              </div>
               <a href="contacto.html?busqueda=Gestionar%20o%20impulsar%20un%20proyecto&origen=Solucion_PMO" class="btn btn-primary btn-sm" style="width: 100%;">
                 Consultar por Implementación de PMO →
               </a>
@@ -153,7 +182,7 @@
           </div>
 
           <!-- Solución 5: Capacitación In-Company -->
-          <div class="card solution-card" data-category="formacion" style="display: flex; flex-direction: column; justify-content: space-between;">
+          <div class="card solution-card" data-category="formacion">
             <div>
               <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
                 <span class="ecosystem-badge badge-academy">IDE Academy</span>
@@ -170,9 +199,9 @@
             </div>
 
             <div>
-              <!-- <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
-                💡 <em>Conocé los programas abiertos y temarios en nuestra página de <strong>IDE Academy</strong>.</em>
-              </div> -->
+              <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
+                <i class="fa-regular fa-lightbulb"></i> <em>Conocé los programas abiertos y temarios en nuestra página de <strong>IDE Academy</strong>.</em>
+              </div>
               <a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Solucion_Capacitacion" class="btn btn-primary btn-sm" style="width: 100%;">
                 Solicitar Propuesta In-Company →
               </a>
@@ -180,7 +209,7 @@
           </div>
 
           <!-- Solución 6: IA & Digital -->
-          <div class="card solution-card" data-category="digital" style="display: flex; flex-direction: column; justify-content: space-between;">
+          <div class="card solution-card" data-category="digital">
             <div>
               <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
                 <span class="ecosystem-badge badge-digital">IDE Digital</span>
@@ -197,9 +226,9 @@
             </div>
 
             <div>
-              <!-- <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
-                💡 <em>Alineamos la tecnología con la estructura de procesos definida por <strong>IDE Excellence</strong>.</em>
-              </div> -->
+              <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
+                <i class="fa-regular fa-lightbulb"></i> <em>Alineamos la tecnología con la estructura de procesos definida por <strong>IDE Excellence</strong>.</em>
+              </div>
               <a href="contacto.html?busqueda=Transformación%20digital%20/%20IA&origen=Solucion_IA" class="btn btn-primary btn-sm" style="width: 100%;">
                 Consultar por IA en Procesos →
               </a>
@@ -212,13 +241,13 @@
     </section>
 
     <!-- Banner de Cierre -->
-    <section class="section-padding-sm bg-subtle-section">
-      <div class="container text-center">
-        <h2 style="font-size: 1.8rem; margin-bottom: 0.75rem;">¿Tenés un requerimiento que no figura en la lista?</h2>
-        <p class="lead-text" style="margin: 0 auto 1.5rem auto;">
+    <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;">¿Tenés un requerimiento que no figura en la lista?</h2>
+        <p class="lead-text-cta" style="margin-bottom: 1.5rem;">
           Evaluamos alcances específicos para proyectos a medida de consultoría organizacional.
         </p>
-        <a href="contacto.html" class="btn btn-primary">Coordinar una llamada técnica →</a>
+        <a href="contacto.html" class="btn btn-outline-cta btn-sm" ">Coordinar una llamada técnica →</a>
       </div>
     </section>