IDE-Demo-B/includes/footer.html

<!-- ==========================================================================
     FOOTER MODULAR - IDE CONSULTORES
     Edición centralizada de enlaces, datos de contacto, isotipo institucional y talento.
     ========================================================================== -->

<div class="container">
  <div class="footer-bg">
    <img src="assets/img/ide.svg" alt="" 
       style="display: block; width: 100%; height: auto; opacity: 0.06;">
  </div>
  <div class="footer-grid">
    
    <!-- Columna 1: Marca, Filosofía e Isotipo -->
    <div>
      <div class="footer-logo-wrap">

        <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
          <img src="assets/img/logo_verde.png" alt="Isotipo IDE Consultores" style="height: 50px; width: auto;">
          
        </div>
      </div>
      <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>
      <!-- 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" style="padding-bottom: 5px;">Explorar</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</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>

    <!-- Columna 3: Exploración -->
    <div>
      <h4 class="footer-heading" style="padding-bottom: 5px;">Navegación</h4>
      <ul class="footer-links">
        <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>

    <!-- Columna 4: Contacto Institucional & Talento -->
    <div>
      <h4 class="footer-heading" style="padding-bottom: 5px;">Contacto</h4>
      <ul class="footer-links" style="margin-bottom: 1.5rem;">
        <li style="font-size: 0.9rem; color: var(--text-muted);">
          <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>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="https://www.linkedin.com/company/ide-consultores" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="footer-social-link">
            <i class="fab fa-linkedin-in"></i>
          </a>
          <a href="https://web.facebook.com/ConsultoresIDE" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="footer-social-link">
            <i class="fab fa-facebook"></i>
          </a>
          <a href="https://www.instagram.com/ide.consultores/" 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;">
          Trabaja con nosotros
        </a>
      </div>
    </div>

  </div>

  <!-- Barra Inferior -->
  <div class="footer-bottom">
    <div>
      © 2026 IDE Consultores | Todos los derechos reservados.
    </div>
    <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
      <span style="color: var(--text-muted); font-size: 0.8rem; 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>