IDE-Demo-B/somos-ide.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>Somos IDE | Identidad, Propósito y Equipo - IDE Consultores</title>
  <meta name="description" content="Conocé el origen, propósito, equipo senior y metodología que sustentan el Ecosistema IDE Consultores.">
  <meta property="og:title" content="Somos IDE | Identidad, Propósito y Equipo">
  <meta property="og:description" content="Un equipo multidisciplinario con sólida trayectoria en gestión de calidad, 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>

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

  <main>
    
    <!-- Seccion 1: Hero -->
    <section class="section-padding-md herobg-7">
      <div class="container container-wide">
        <div class="hero-grid">
          <div>
            <span class="eyebrow" style="text-transform: uppercase;">PROPÓSITO & IDENTIDAD</span>
            <h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
              Vemos organizaciones. Entendemos sistemas. Conectamos el todo.
            </h1>
            <p class="lead-text" style="margin-bottom: 2.5rem;">
              IDE nace de una visión integral de la gestión: personas, procesos, proyectos, conocimiento y tecnología se conectan e influyen mutuamente. Por eso, comprendemos sus relaciones para identificar oportunidades de impacto y articular las capacidades necesarias.
            </p>
            <!-- Hero Actions -->
            <div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
              <a href="contacto.html" class="btn btn-primary btn-cta-unificado"
                style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
                HABLEMOS
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                  stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12 16 16 12 12 8"></polyline>
                  <line x1="8" y1="12" x2="16" y2="12"></line>
                </svg>
              </a>
            </div>
          </div>
          <div class="hero-visual"
            style="width: 100%; height: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
          </div>
        </div>
      </div>
    </section>

    <!-- Seccion 2: Filosofía de Trabajo -->
    <section class="section-padding">
      <div class="container">

        <!-- Bloque superior: título + texto -->
        <div class="filosofia-intro">
          <div>
            <span class="eyebrow">FILOSOFÍA DE TRABAJO</span>
            <h2 class="filosofia-intro__title">
              No intervenimos en todo. Comprendemos el todo para saber dónde intervenir.
            </h2>
          </div>
          <div>
            <p class="filosofia-intro__lead" style="font-style: italic;">
              Cada organización tiene su propia realidad. Antes de proponer una solución, comprendemos su contexto, sus relaciones y lo que está detrás de los desafíos visibles.<br> A partir de esa comprensión, focalizamos la intervención, conectamos las capacidades necesarias y trabajamos junto a las personas para generar mejoras sostenibles.
            </p>
          </div>
        </div>

        <!-- Cinta inferior: pilares en tarjetas cuadradas -->
        <div class="filosofia-pilares">

          <article class="pilar-card bg6">
            <div class="pilar-card__icon">
              <i class="fa-solid fa-diagram-project"></i>
            </div>
            <h3 class="pilar-card__title">Mirada Sistémica</h3>
            <p class="pilar-card__desc">
              Cada intervención considera sus relaciones e impactos sobre el conjunto.
            </p>
          </article>

          <article class="pilar-card bg6">
            <div class="pilar-card__icon">
              <i class="fa-solid fa-gears"></i>
            </div>
            <h3 class="pilar-card__title">Rigor con sentido práctico</h3>
            <p class="pilar-card__desc">
              Adaptamos metodologías y normas al contexto, no al revés.
            </p>
          </article>

          <article class="pilar-card bg6">
            <div class="pilar-card__icon">
              <i class="fa-solid fa-users"></i>
            </div>
            <h3 class="pilar-card__title">Personas como parte del sistema</h3>
            <p class="pilar-card__desc">
              Participan, aportan conocimiento y hacen posible la evolución.
            </p>
          </article>

          <article class="pilar-card bg6">
            <div class="pilar-card__icon">
              <i class="fa-solid fa-seedling"></i>
            </div>
            <h3 class="pilar-card__title">Capacidades que permanecen</h3>
            <p class="pilar-card__desc">
              Cada intervención deja conocimiento y herramientas para seguir creciendo.
            </p>
          </article>

        </div>

      </div>
    </section>

    <!-- Sección 3: Experiencia -->
    <section class="section-padding bg6">
      <div class="container">
        <div class="triple-section">

          <!-- Col 1 (35%): Texto -->
          <div class="triple-section__intro">
            <span class="eyebrow">TU EYEBROW ACÁ</span>
            <h2 class="triple-section__title">
              Tu título principal acá, puede ir en una o dos líneas.
            </h2>
            <p class="triple-section__lead">
              Tu texto descriptivo acá. Mantenelo breve para que respire y no compita con la imagen central. Idealmente 2 o 3 líneas máximo.
            </p>
          </div>

          <!-- Col 2 (40%): Imagen PNG -->
          <div class="triple-section__visual">
            <img src="assets/img/somos/mapa2.png"
                alt="Descripción de la imagen"
                loading="lazy">
          </div>

          <!-- Col 3 (25%): 4 ítems con icono -->
          <div class="triple-section__features">

            <div class="triple-feature">
              <div class="triple-feature__icon">
                <i class="fa-solid fa-check"></i>
              </div>
              <p class="triple-feature__text">Texto del primer punto.</p>
            </div>

            <div class="triple-feature">
              <div class="triple-feature__icon">
                <i class="fa-solid fa-rocket"></i>
              </div>
              <p class="triple-feature__text">Texto del segundo punto.</p>
            </div>

            <div class="triple-feature">
              <div class="triple-feature__icon">
                <i class="fa-solid fa-users"></i>
              </div>
              <p class="triple-feature__text">Texto del tercer punto.</p>
            </div>

            <div class="triple-feature">
              <div class="triple-feature__icon">
                <i class="fa-solid fa-chart-line"></i>
              </div>
              <p class="triple-feature__text">Texto del cuarto punto.</p>
            </div>

          </div>

        </div>
      </div>
    </section>

    <!-- El Equipo y Perfiles -->
    <section class="section-padding bg-subtle-section">
      <div class="container">
        <!-- Bloque superior: título + texto -->
        <div class="filosofia-intro">
          <div>
            <span class="eyebrow">QUIÉNES HACEMOS IDE</span>
            <h2 class="filosofia-intro__title">
              Experiencias que se complementan
            </h2>
          </div>
          <div>
            <p class="filosofia-intro__lead">
              IDE reúne profesionales con trayectorias en gestión, proyectos, mejora continua, sistemas de gestión, transformación digital, inteligencia artificial, docencia y desarrollo organizacional.
Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades se conectan.
            </p>
          </div>
        </div>

        <div class="grid-5">
          
          <!-- Miembro 1 -->
           <div class="card somos m1">
            <div class="card-portrait">
              <img src="./assets/img/CRA.png" alt="Retrato de Carlos Garcia" loading="lazy">
            </div>
            <h3>Claudia Raquel ANDRÉS</h3>
            <div class="somos-title">Directora General | Líder de IDE Projects</div>
            <!--<p>Especialista en proyectos, optimización de procesos e implementación de sistemas de gestión, con más de 15 años de experiencia en consultoría, auditoría y docencia. Impulsa la mirada sistémica que le da indentidad a IDE.</p>-->
            <a href="https://www.linkedin.com/in/claudia-raquel-andres/" target="_blank"
   rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
              <i class="fa-brands fa-linkedin-in"></i>
            </a>
          </div>
          
          <!-- Miembro 2 -->
          <div class="card somos m2">
            <div class="card-portrait">
              <img src="./assets/img/JAP.png" alt="Retrato de Carlos Garcia" loading="lazy">
            </div>
            <h3>José PUGLIESE</h3>
            <div class="somos-title">Líder de IDE Digital</div>
            <!--<p>
              Especialista en digitalización, Inteligencia Artificial y sistematización de procesos, con más de 10 años de experiencia en liderazgo de equipos e implementación de soluciones tecnológicas orientadas a optimizar la gestión.
            </p>-->
            <a href="https://www.linkedin.com/in/ing-jos%C3%A9-pugliese-706445413/" target="_blank"
   rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
              <i class="fa-brands fa-linkedin-in"></i>
            </a>
          </div>

          <!-- Miembro 3 -->
          <div class="card somos m3">
            <div class="card-portrait">
              <img src="./assets/img/MAR.png" alt="Retrato de Carlos Garcia" loading="lazy">
            </div>
            <h3>Miguel Ángel ROJAS</h3>
            <div class="somos-title">Líder de IDE Excellence</div>
            <!--<p>
              Especialista en gestión y optimización de procesos fisicoquímicos, mejora continua y sistemas de calidad, con más de 15 años de experiencia impulsando la eficiencia operativa y el desempeño sostenible.
            </p>-->
            <a href="https://www.linkedin.com/in/ingenieromiguelrojas/" target="_blank"
   rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
              <i class="fa-brands fa-linkedin-in"></i>
            </a>
          </div>

          <!-- Miembro 4 -->
          <div class="card somos m4">
            <div class="card-portrait">
              <img src="./assets/img/VUB.png" alt="Retrato de Carlos Garcia" loading="lazy">
            </div>
            <h3>Víctor BARRIONUEVO</h3>
            <div class="somos-title">Projects & Digital</div>
            <!--<p>
             Especialista en gestión y ejecución de proyectos de infraestructura y telecomunicaciones, con amplia experiencia en planificación, operaciones y coordinación de equipos multidisciplinarios.
            </p>-->
            <a href="https://www.linkedin.com/in/victor-ulises-barrionuevo/" target="_blank"
   rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
              <i class="fa-brands fa-linkedin-in"></i>
            </a>
          </div>
          <!-- Miembro 5 -->
          <div class="card somos m5">
            <div class="card-portrait">
              <img src="./assets/img/somos/logo.png" alt="Retrato de Carlos Garcia" loading="lazy">
            </div>
            <h3>Especialistas IDE</h3>
            <div class="somos-title">Red de Consultores</div>
            <a href="trabaja-con-nosotros.html" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
              <i class="fa-solid fa-plus"></i>
            </a>
          </div>

        </div>
      </div>
    </section>

    <!-- Sección 4: CTA -->
     <section class="section-padding-xs herobg-5">
      <div class="container container-wide">
        <div class="hero-grid">
          <div>

            <h2 style="margin-bottom: 0.8rem; line-height: 1.1; color: white; margin-bottom: 1.5rem;">
              Conversemos para comprender tu contexto,<br> identificar dónde intervenir y conectar las capacidades que puedan aportar mayor valor
            </h2>

            <div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
              <a href="contacto.html" class="btn btn-primary btn-cta-unificado"
                style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
                HABLEMOS
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                  stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12 16 16 12 12 8"></polyline>
                  <line x1="8" y1="12" x2="16" y2="12"></line>
                </svg>
              </a>
            </div>
          </div>

          <div class="hero-visual"
            style="width: 100%; height: 300px; position: relative; display: flex; justify-content: center; align-items: center;">
          </div>

        </div>
      </div>
    </section>

  </main>

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