index finish

assets/img/ide.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="720px" height="357px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 205.37 101.75"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path fill="#275868" d="M88.19 60.5c-1.3,10.74 -10.97,22.33 -19.29,25.54 -14.11,5.44 -26.18,-0.15 -30.85,-9.67 -6.26,-12.77 3.66,-24.18 15.38,-25.29 10.28,-0.97 25.91,6.18 34.76,9.42zm33.34 -2.71c0.49,-10.56 9.31,-19.47 16.32,-22.77 9.77,-4.6 26.19,-3.52 31.16,4.23 6.97,10.88 -4.71,20.62 -13.3,22.56 -13.81,3.12 -22.45,0.17 -34.18,-4.02zm3.31 17.59l-0.91 -1.71c4.33,1.5 19.45,3.03 24.12,3.17 8.07,0.26 16.88,-1.24 26.04,-8.01 29.71,-21.98 -0.63,-64.26 -39.74,-47.93 -21.96,9.32 -25.95,29.07 -26.8,31.75l-3.86 -1.42c-0.17,-0.07 -0.41,-0.13 -0.41,-0.15 -0.59,-8.91 -2.5,-18.96 -6.02,-28.2 -2.05,-5.56 -8.48,-20.49 -12.89,-22.29 -5.19,-2.11 -10.09,1.73 -9.88,6.77 0.19,4.34 13.06,21.58 13.74,37.18 0.01,0.11 -0.03,0.88 -0.02,0.99 -17.71,-5.97 -31.8,-15.28 -51.15,-3.59 -13.45,8.13 -21.02,26.11 -10.11,43.92 13.42,19.69 51.6,25 70.75,-8.44 1.52,-3.01 2.97,-5.87 4.21,-11.04 2.09,0.77 3.48,1.27 4.43,1.61 0.02,0.01 0.06,0 0.06,0.02 1.63,10.98 10.09,22.79 19.56,28.39 12.47,7.38 30.63,6.45 44.14,1.09 5.34,-2.15 15.62,-5.62 12.13,-13.51 -1.48,-3.32 -5.28,-4.77 -9.5,-3.46 -2.51,0.78 -5.95,2.98 -9.04,4.07 -16.79,5.92 -32.33,3.05 -38.85,-9.21zm-117.83 -49.38l0 0c3.85,0 7.01,3.15 7.01,7.01l0 61.73c0,3.86 -3.16,7.01 -7.01,7.01l0 0c-3.86,0 -7.01,-3.15 -7.01,-7.01l0 -61.73c0,-3.86 3.15,-7.01 7.01,-7.01zm190.46 43.39c4.36,0 7.9,3.37 7.9,7.53 0,4.16 -3.54,7.54 -7.9,7.54 -4.36,0 -7.9,-3.38 -7.9,-7.54 0,-4.16 3.54,-7.53 7.9,-7.53z"/>
+ </g>
+</svg>

css/styles.css

@@ -11,6 +11,7 @@
   --ide-primary: #094b63;
   --ide-primary-dark: #223344;
   --ide-primary-light: #2c69ab;
+  --ide-primary-light2: #2c69ab;
   --ide-accent: #40ab8e;
   --ide-accent-hover: #4fb389;
   --ide-accent-soft: rgba(19, 167, 138, 0.12);
@@ -69,6 +70,7 @@
   --border-subtle: #1F2C36;
   --border-hover:#40ab8e;
   --ide-primary-light: #40ab8e;
+  --ide-primary-light2: #2c69ab;
   --ide-excellence: #4fb389;
   --ide-projects: #ed8d01;
   --ide-academy: #a83c41; 
@@ -182,6 +184,7 @@ p, li, .lead-text, .text-body, .text-muted {
   font-family: 'Plus Jakarta Sans', sans-serif;
 }
 
+
 .lead-text {
   font-size: 1.15rem;
   color: var(--text-muted);
@@ -1352,6 +1355,8 @@ p, li, .lead-text, .text-body, .text-muted {
 
 /* --- 17. Footer --- */
 #site-footer {
+  position: relative;
+  overflow: hidden;
   background-color: var(--bg-surface);
   border-top: 1px solid var(--border-color);
   padding-top: 4.5rem;
@@ -1360,7 +1365,27 @@ p, li, .lead-text, .text-body, .text-muted {
   transition: background-color var(--transition-normal);
 }
 
+/* Logo de fondo - NO debe interferir con los links */
+.footer-bg {
+  position: absolute;
+  transform: translate(0%, -17%);
+  height: auto;
+  pointer-events: none; /* ¡CLAVE! Evita que la imagen capture eventos */
+
+}
+
+/* El SVG dentro del contenedor */
+.footer-bg img {
+  display: block;
+  width: 100%;
+  height: auto;
+  pointer-events: none; /* Hereda o se asegura */
+}
+
+/* Contenido del footer - POR ENCIMA del fondo */
 .footer-grid {
+  position: relative;
+  z-index: 1;
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
   gap: 2.5rem;
@@ -1368,5 +1393,114 @@ p, li, .lead-text, .text-body, .text-muted {
 }
 
 .footer-logo-wrap {
-  margin-bottom: 1.
+  margin-bottom: 1rem;
+}
+
+.footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-links li {
+  margin-bottom: 0.35rem;
+}
+
+.footer-link {
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  position: relative;
+  z-index: 2; /* Asegura que estén por encima */
+}
+
+.footer-link:hover { 
+  color: var(--ide-accent); 
+}
+
+/* Links del ecosistema en la columna 1 */
+.footer-link2 {
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  position: relative;
+  z-index: 2;
+}
+
+.footer-link2:nth-child(1):hover { color: var(--ide-excellence); } /* Excellence */
+.footer-link2:nth-child(2):hover { color: var(--ide-projects); } /* Project */
+.footer-link2:nth-child(3):hover { color: var(--ide-academy); } /* Academy */
+.footer-link2:nth-child(4):hover { color: var(--ide-digital); } /* Digital */
+
+/* Footer bottom - también por encima */
+.footer-bottom {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  border-top: 1px solid var(--border-color);
+  padding-top: 1.5rem;
+}
+
+.footer-bottom a {
+  position: relative;
+  z-index: 2;
+}
+
+.footer-socials {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.footer-social-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: var(--text-muted);
+  background: var(--bg-subtle, rgba(255,255,255,0.05));
+  transition: all 0.3s ease;
+  text-decoration: none;
+  font-size: 1rem;
+}
+
+.footer-social-link:hover {
+  color: var(--ide-accent, #3fff4f);
+  transform: translateY(-3px);
+  box-shadow: 0 4px 12px rgba(63, 255, 79, 0.15);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .footer-bg {
+    width: 40%;
+    max-width: 300px;
+    opacity: 0.04;
+  }
+  
+  .footer-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .footer-bg {
+    width: 30%;
+    max-width: 200px;
+    opacity: 0.03;
+  }
+  
+  .footer-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
 }

includes/footer.html

@@ -4,6 +4,10 @@
      ========================================================================== -->
 
 <div class="container">
+  <div class="footer-bg">
+    <img src="assets/img/ide.svg" alt="" 
+       style="display: block; width: 100%; height: auto; opacity: 0.04;">
+  </div>
   <div class="footer-grid">
     
     <!-- Columna 1: Marca, Filosofía e Isotipo -->
@@ -18,21 +22,27 @@
       <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem;">
         Todo está conectado. Comprendemos las organizaciones como sistemas para intervenir estratégicamente donde se genera mayor impacto y valor sostenible.
       </p>
-      <div style="font-size: 0.82rem; color: var(--text-muted);">
-        <strong>Ecosistema IDE:</strong> 
-          <ul> • Excellence <br> • Project <br> • Academy <br> • Digital</ul>
-          </div>
+      <!-- Ecosistema resumido (solo nombres) -->
+      <div style="font-size: 0.78rem; color: var(--text-muted);">
+        <span style="font-weight: 600; color: var(--text-primary);">Ecosistema IDE:</span>
+        <span style="display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 0.25rem;">
+          <a href="ecosistema.html#excellence" class="footer-link2">Excellence</a>
+          <a href="ecosistema.html#project" class="footer-link2">Project</a>
+          <a href="ecosistema.html#academy" class="footer-link2">Academy</a>
+          <a href="ecosistema.html#digital" class="footer-link2">Digital</a>
+        </span>
+      </div>
     </div>
 
     <!-- Columna 2: Ecosistema de Capacidades -->
     <div>
-      <h4 class="footer-heading">Ecosistema</h4>
+      <h4 class="footer-heading">Explorar</h4>
       <ul class="footer-links">
-        <li><a href="ecosistema.html#excellence" class="footer-link">IDE Excellence (Gestión & ISO)</a></li>
-        <li><a href="ecosistema.html#project" class="footer-link">IDE Project (PMO & Resultados)</a></li>
-        <li><a href="ecosistema.html#academy" class="footer-link">IDE Academy (Formación In-Company)</a></li>
-        <li><a href="ecosistema.html#digital" class="footer-link">IDE Digital (IA & Automatización)</a></li>
-        <li><a href="ecosistema.html" class="footer-link">Cómo se Integran</a></li>
+        <li><a href="desafios.html" class="footer-link">Tengo un Desafío</a></li>
+        <li><a href="soluciones.html" class="footer-link">Busco una Solución</a></li>
+        <li><a href="somos-ide.html" class="footer-link">Somos IDE</a></li>
+        <li><a href="insights.html" class="footer-link">Insights & Blog</a></li>
+        <li><a href="index.html#brujula" class="footer-link">Brújula IDE</a></li>
       </ul>
     </div>
 
@@ -40,11 +50,13 @@
     <div>
       <h4 class="footer-heading">Navegación</h4>
       <ul class="footer-links">
-        <li><a href="desafios.html" class="footer-link">Tengo un Desafío</a></li>
-        <li><a href="soluciones.html" class="footer-link">Busco una Solución</a></li>
-        <li><a href="somos-ide.html" class="footer-link">Somos IDE (Propósito & Equipo)</a></li>
-        <li><a href="insights.html" class="footer-link">Insights & Blog</a></li>
-        <li><a href="index.html#brujula" class="footer-link">Diagnóstico Brújula IDE</a></li>
+        <li><a href="index.html#brujula" class="footer-link">Brújula IDE</a></li>
+        <li><a href="ide-academy.html" class="footer-link">Academy</a></li>
+        <li><a href="somos-ide.html" class="footer-link">Nosotros</a></li>
+        <li><a href="insights.html" class="footer-link">Insights</a></li>
+        <li><a href="https://blog.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer" class="footer-link">Blog</a></li>
+        <li><a href="politicas-de-privacidad.html" class="footer-link">Política de Privacidad</a></li>
+        <li><a href="politicas-de-cookies.html" class="footer-link">Cookies</a></li>
       </ul>
     </div>
 
@@ -53,16 +65,31 @@
       <h4 class="footer-heading">Contacto</h4>
       <ul class="footer-links" style="margin-bottom: 1.5rem;">
         <li style="font-size: 0.9rem; color: var(--text-muted);">
-          <strong>Sede Central:</strong> Av. del Libertador 4800, CABA, Argentina
+          <strong>Sedes:</strong> Salta y Jujuy, Argentina
         </li>
         <li style="font-size: 0.9rem; color: var(--text-muted);">
           <strong>Email:</strong> <a href="mailto:info@ideconsultores.com.ar" class="footer-link">info@ideconsultores.com.ar</a>
         </li>
         <li style="font-size: 0.9rem; color: var(--text-muted);">
-          <strong>Atención WhatsApp:</strong> <a href="https://wa.me/5491123456789" target="_blank" rel="noopener noreferrer" class="footer-link" style="color: var(--ide-accent);">+54 9 11 2345-6789</a>
+          <strong>WhatsApp:</strong> <a href="https://wa.me/5491123456789" target="_blank" rel="noopener noreferrer" class="footer-link" style="color: var(--ide-accent);">+54 9 11 2345-6789</a>
         </li>
       </ul>
+      <!-- REDES SOCIALES -->
+      <div style="margin-bottom: 1.25rem;">
+        <h4 class="footer-heading" style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem;">Seguinos</h4>
+        <div class="footer-socials">
+          <a href="#" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="footer-social-link">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="#" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="footer-social-link">
+            <i class="fab fa-facebook"></i>
+          </a>
+          <a href="#" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="footer-social-link">
+            <i class="fab fa-instagram"></i>
+          </a>
 
+        </div>
+      </div>
       <!-- Enlace a Trabaja con Nosotros exclusivo en Footer según UX spec -->
       <div style="border-top: 1px solid var(--border-color); padding-top: 1rem;">
         <a href="trabaja-con-nosotros.html" class="btn btn-outline btn-sm" style="width: 100%; text-align: center;">
@@ -76,11 +103,12 @@
   <!-- Barra Inferior -->
   <div class="footer-bottom">
     <div>
-      © 2026 IDE Consultores. Todos los derechos reservados.
+      © 2026 IDE Consultores | Todos los derechos reservados.
     </div>
-    <div style="display: flex; gap: 1.5rem;">
-      <!--<span style="color: var(--text-muted);">Entrá por lo que necesitás. Descubrí lo que podemos transformar juntos.</span>-->
-      <span style="color: var(--text-muted);">Diseño en desarrollo – Demo v1</span>
+    <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
+      <span style="color: var(--text-muted); font-size: 0.7rem; opacity: 0.6;">
+        Sitio diseñado por <a href="https://www.amoryroma.com.ar" target="_blank" style="color: var(--text-muted); text-decoration: none; font-weight: 500;">Amor & Roma</a>
+      </span>
     </div>
   </div>
 </div>

index.html

@@ -6,7 +6,7 @@
   <title>IDE Consultores | Todo está conectado</title>
   <!-- SEO Meta Tags  -->
   <!-- Favicon -->
-  <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.">
@@ -67,18 +67,17 @@
             <p style="font-size: 1.1rem; color: var(--text-body); line-height: 1.7; margin-bottom: 1.5rem;">
               Las organizaciones ya tienen procesos, herramientas, personas y tecnología. Sin embargo, algunos desafíos persisten. ¿Por qué? Porque sumar soluciones inconexas no genera transformación. Una mejora en un área puede crear tensiones en otra si no se comprende el sistema completo.
             </p>
-            <div style="display: inline-block; padding: 0.75rem 1.5rem; background-color: var(--bg-subtle); border-radius: var(--radius-sm); font-weight: 600; color: var(--text-primary); font-size: 0.95rem;">
+            <div id="brujula" style="display: inline-block; padding: 0.75rem 1.5rem; background-color: var(--bg-subtle); border-radius: var(--radius-sm); font-weight: 600; color: var(--text-primary); font-size: 0.95rem;">
               ¿Qué impacto produjo esa mejora en el conjunto?
             </div>
           </div>
         </div>
         <div class="quiz-container" id="quiz-interactive-app">
-
           <!-- HEADER -->
-          <div class="quiz-header" style="position: relative; display: flex; flex-direction: column; gap: 0.5rem;">
+          <div class="quiz-header"  style="position: relative; display: flex; flex-direction: column; gap: 0.5rem;">
             <div style="display: flex; justify-content: space-between; align-items: flex-start;">
               <div>
-                <span class="eyebrow" style="color: var(--ide-accent);">ENCONTRÁ TU CAMINO</span>
+                <span class="eyebrow" style="color: var(--ide-accent);">Brújula IDE</span>
                 <h2 style="font-size: 1.75rem; margin-bottom: 0.5rem;">¿Por dónde empezamos?</h2>
                 <p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0;">
                   Respondé 4 preguntas breves y te orientamos sobre qué capacidades pueden aportar mayor valor a tu contexto.
@@ -684,7 +683,7 @@
     <!-- BLOQUE 6: CTA FINAL DE CONVERSIÓN -->
     <section class="section-padding">
       <div class="container">
-        <div class="card" style="background: linear-gradient(135deg, var(--ide-primary-dark) 0%, var(--ide-primary) 100%); color: #FFFFFF; border: none; padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center;">
+        <div class="card" style="background: linear-gradient(135deg, var(--ide-primary-dark) 0%, var(--ide-primary-light2) 100%); color: #FFFFFF; border: none; padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center;">
           <span class="eyebrow" style="color: var(--ide-accent);">CONVERSACIÓN INICIAL</span>
           <h2 style="color: #FFFFFF; font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem;">
             ¿Qué desafío querés transformar?