IDE-Demo-B/desafios.html

<!DOCTYPE html>
<html lang="es" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Desafíos Organizacionales | IDE Consultores</title>
  <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="css/styles.css">
</head>
<body>

  <header id="site-header"></header>

  <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;">
          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>
    </section>

    <!-- Grilla de Desafíos con Modales -->
    <section class="section-padding">
      <div class="container">
        
        <div class="grid-3">
          
          <!-- Desafío 1 -->
          <div class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
            <div>
              <!-- <div style="font-size: 2rem; margin-bottom: 0.75rem;">🏢</div> -->
              <h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">La organización creció y necesitamos ordenar los procesos</h3>
              <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
                Lo que antes se resolvía informalmente hoy genera desorden, duplicación de esfuerzos o dependencia de personas clave.
              </p>
            </div>
            <button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-1">
              Ver cómo abordamos este desafío →
            </button>
          </div>

          <!-- Desafío 2 -->
          <div class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
            <div>
              <!-- <div style="font-size: 2rem; margin-bottom: 0.75rem;">⏱️</div> -->
              <h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Los proyectos estratégicos se retrasan o no logran el resultado</h3>
              <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
                Iniciativas prioritarias quedan truncas por falta de metodología, gobernanza clara o desvíos en el alcance y presupuesto.
              </p>
            </div>
            <button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-2">
              Ver cómo abordamos este desafío →
            </button>
          </div>

          <!-- Desafío 3 -->
          <div class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
            <div>
              <!-- <div style="font-size: 2rem; margin-bottom: 0.75rem;">👥</div> -->
              <h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">El equipo no adopta los cambios y persiste la resistencia</h3>
              <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
                Se diseñaron nuevas pautas o sistemas, pero la gente continúa operando como antes porque falta desarrollo de capacidades.
              </p>
            </div>
            <button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-3">
              Ver cómo abordamos este desafío →
            </button>
          </div>

          <!-- Desafío 4 -->
          <div class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
            <div>
              <!-- <div style="font-size: 2rem; margin-bottom: 0.75rem;">🤖</div> -->
              <h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Queremos incorporar Inteligencia Artificial pero no sabemos por dónde</h3>
              <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
                Existe el interés en modernizar y automatizar tareas, pero temen malgastar recursos en tecnología que no resuelva dolores reales.
              </p>
            </div>
            <button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-4">
              Ver cómo abordamos este desafío →
            </button>
          </div>

          <!-- Desafío 5 -->
          <div class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
            <div>
              <!-- <div style="font-size: 2rem; margin-bottom: 0.75rem;">📜</div> -->
              <h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Nos exigen certificar una norma (ISO 9001, etc.) y queremos que aporte valor</h3>
              <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
                Un cliente o licitación pide certificar, pero no quieren crear burocracia inútil ni un sistema que solo viva en el papel.
              </p>
            </div>
            <button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-5">
              Ver cómo abordamos este desafío →
            </button>
          </div>

          <!-- Desafío 6 -->
          <div class="card" style="background: linear-gradient(135deg, var(--bg-surface) 0%, var(--ide-accent-soft) 100%); border-color: var(--ide-accent); display: flex; flex-direction: column; justify-content: space-between;">
            <div>
              <!-- <div style="font-size: 2rem; margin-bottom: 0.75rem;">🧭</div> -->
              <h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">No sé exactamente qué necesito, pero algo no está funcionando</h3>
              <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
                Usá nuestra herramienta interactiva para diagnosticar la prioridad de tu organización en 3 pasos breves.
              </p>
            </div>
            <a href="index.html#brujula" class="btn btn-primary btn-sm" style="width: 100%;">
              Iniciar Diagnóstico Rápido →
            </a>
          </div>

        </div>

      </div>
    </section>

    <!-- MODALES DE DETALLE DE CADA DESAFÍO -->

    <!-- Modal Desafío 1 -->
    <div id="modal-desafio-1" class="modal-backdrop" role="dialog" aria-modal="true">
      <div class="modal-window">
        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
        <span class="eyebrow">DESAFÍO: CRECIMIENTO Y PROCESOS</span>
        <h3 style="margin-bottom: 1rem; color: var(--ide-primary);">La organización creció y necesitamos ordenar los procesos</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>
          <p style="font-size: 0.9rem; color: var(--text-body);">
            Cuando una empresa escala rápidamente, las estructuras que antes funcionaban comienzan a crujir. Aparece la duplicación de tareas, falta de indicadores de gestión y una sobrecarga en los líderes.
          </p>
        </div>

        <div style="margin-bottom: 1.25rem;">
          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Preguntas Clave</h4>
          <ul style="padding-left: 1.2rem; font-size: 0.88rem; color: var(--text-body); line-height: 1.5;">
            <li>¿Los procesos están formalizados o dependen de la memoria individual?</li>
            <li>¿Existen cuellos de botella claros entre departamentos?</li>
            <li>¿Contamos con indicadores que midan el desempeño en tiempo real?</li>
          </ul>
        </div>

        <div style="margin-bottom: 1.5rem;">
          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
            <span class="ecosystem-badge badge-excellence">IDE Excellence (Mapeo & SGC)</span>
            <span class="ecosystem-badge badge-academy">IDE Academy (Cultura de Procesos)</span>
          </div>
        </div>

        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
          <a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
            Hablemos de este desafío
          </a>
        </div>
      </div>
    </div>

    <!-- Modal Desafío 2 -->
    <div id="modal-desafio-2" class="modal-backdrop" role="dialog" aria-modal="true">
      <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>
        
        <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>
          <p style="font-size: 0.9rem; color: var(--text-body);">
            Muchas iniciativas bien intencionadas fracasan por falta de una metodología estructurada de seguimiento, asignación difusa de roles o gestión deficiente de riesgos e interesados.
          </p>
        </div>

        <div style="margin-bottom: 1.25rem;">
          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Preguntas Clave</h4>
          <ul style="padding-left: 1.2rem; font-size: 0.88rem; color: var(--text-body); line-height: 1.5;">
            <li>¿Se define con claridad el alcance antes de iniciar la ejecución?</li>
            <li>¿Hay un responsable visible (Project Manager) con autoridad de gestión?</li>
            <li>¿Se aplican marcos ágiles o híbridos adecuados a la complejidad del proyecto?</li>
          </ul>
        </div>

        <div style="margin-bottom: 1.5rem;">
          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
            <span class="ecosystem-badge badge-project">IDE Project (PMO & Dirección)</span>
            <span class="ecosystem-badge badge-academy">IDE Academy (Formación en Proyectos)</span>
          </div>
        </div>

        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
          <a href="contacto.html?busqueda=Gestionar%20o%20impulsar%20un%20proyecto&origen=Desafio_PMO" class="btn btn-primary btn-sm">
            Hablemos de este desafío
          </a>
        </div>
      </div>
    </div>

    <!-- Modal Desafío 3 -->
    <div id="modal-desafio-3" class="modal-backdrop" role="dialog" aria-modal="true">
      <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>
        
        <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>
          <p style="font-size: 0.9rem; color: var(--text-body);">
            La resistencia no es un problema de mala voluntad, sino una consecuencia natural cuando las personas no comprenden el sentido del cambio ni reciben las herramientas formativas para desempeñarse con seguridad.
          </p>
        </div>

        <div style="margin-bottom: 1.5rem;">
          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
            <span class="ecosystem-badge badge-academy">IDE Academy (Capacitación In-Company)</span>
            <span class="ecosystem-badge badge-excellence">IDE Excellence (Alineación Organizacional)</span>
          </div>
        </div>

        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
          <a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Desafio_Equipo" class="btn btn-primary btn-sm">
            Hablemos de este desafío
          </a>
        </div>
      </div>
    </div>

    <!-- Modal Desafío 4 -->
    <div id="modal-desafio-4" class="modal-backdrop" role="dialog" aria-modal="true">
      <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>
        
        <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>
          <p style="font-size: 0.9rem; color: var(--text-body);">
            Incorporar IA sin comprender los procesos sólo automatiza el desorden. Diagnosticamos qué tareas repetitivas y análisis de datos pueden optimizarse para que el equipo gane tiempo de alto valor.
          </p>
        </div>

        <div style="margin-bottom: 1.5rem;">
          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
            <span class="ecosystem-badge badge-digital">IDE Digital (IA & Automatización)</span>
            <span class="ecosystem-badge badge-excellence">IDE Excellence (Rediseño de Procesos)</span>
          </div>
        </div>

        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
          <a href="contacto.html?busqueda=Transformación%20digital%20/%20IA&origen=Desafio_IA" class="btn btn-primary btn-sm">
            Hablemos de este desafío
          </a>
        </div>
      </div>
    </div>

    <!-- Modal Desafío 5 -->
    <div id="modal-desafio-5" class="modal-backdrop" role="dialog" aria-modal="true">
      <div class="modal-window">
        <button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
        <span class="eyebrow">DESAFÍO: NORMAS Y CERTIFICACIONES</span>
        <h3 style="margin-bottom: 1rem; color: var(--ide-primary);">Certificar una norma (ISO) y que genere valor real</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>
          <p style="font-size: 0.9rem; color: var(--text-body);">
            Transformamos el requisito normativo en una oportunidad de mejora. No preparamos la empresa para una auditoría de un día: diseñamos un sistema que ayuda a la dirección a gestionar mejor los 365 días del año.
          </p>
        </div>

        <div style="margin-bottom: 1.5rem;">
          <h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
            <span class="ecosystem-badge badge-excellence">IDE Excellence (ISO 9001/14001/45001)</span>
            <span class="ecosystem-badge badge-academy">IDE Academy (Auditores Internos)</span>
          </div>
        </div>

        <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
          <button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
          <a href="contacto.html?busqueda=Implementar%20o%20certificar%20una%20norma&origen=Desafio_ISO" class="btn btn-primary btn-sm">
            Hablemos de este desafío
          </a>
        </div>
      </div>
    </div>

  </main>

  <footer id="site-footer"></footer>
  <script src="js/main.js"></script>
</body>
</html>