IDE-Demo-B/trabaja-con-nosotros.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>Trabaja con Nosotros | Sumate a IDE Consultores</title>
  <meta name="description" content="Buscamos profesionales apasionados por el pensamiento sistémico, la gestión de calidad, la dirección de proyectos y la tecnología.">
  <meta property="og:title" content="Trabaja con Nosotros | IDE Consultores">
  <meta property="og:description" content="Formá parte de un equipo multidisciplinario que impulsa la transformación organizacional real.">
  <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>

    <!-- Header Trabaja con Nosotros -->
    <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">TALENTO & EQUIPO</span>
        <h1 style="margin-bottom: 1.25rem;">Sumate a la red de <br> consultores de IDE</h1>
        <p class="lead-text" style="margin: 0 auto;">
          Buscamos constantemente profesionales senior y especialistas apasionados por el pensamiento sistémico, la calidad, la gestión de proyectos y la innovación tecnológica.
        </p>
      </div>
    </section>

    <!-- Cultura y Formulario de Postulación -->
    <section class="section-padding">
      <div class="container">
        
        <div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
          
          <!-- Cultura y Áreas -->
          <div>
            <span class="eyebrow">NUESTRA CULTURA</span>
            <h2>Cómo trabajamos en IDE</h2>
            <p style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin: 1rem 0 1.5rem 0;">
              En IDE no creemos en soluciones enlatadas ni en jerarquías rígidas. Valoramos la curiosidad intelectual, la capacidad de escuchar a las organizaciones y el compromiso ético con los resultados de nuestros clientes.
            </p>

            <div class="card" style="margin-bottom: 1.5rem; padding: 1.5rem;">
              <h3 style="font-size: 1.15rem; color: var(--ide-primary); margin-bottom: 0.75rem;">Áreas de Práctica Activas</h3>
              <ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9rem; color: var(--text-muted);">
                <li>• <strong>IDE Excellence:</strong> Auditores Líderes y consultores en ISO 9001, 14001, 45001, 21001.</li>
                <li>• <strong>IDE Project:</strong> Project Managers certificados PMP®, Scrum Masters y líderes de PMO.</li>
                <li>• <strong>IDE Academy:</strong> Facilitadores, diseñadores instruccionales y docentes corporativos.</li>
                <li>• <strong>IDE Digital:</strong> Especialistas en automatización No-Code, IA aplicada y Business Intelligence.</li>
              </ul>
            </div>

            <div class="img-placeholder" style="aspect-ratio: 16/9;">
              <!-- <div class="img-placeholder-icon">🤝</div> -->
              <div class="img-placeholder-label">Espacio Fotográfico Equipo & Cultura IDE</div>
            </div>
          </div>

          <!-- Formulario de Talento -->
          <div class="card" style="padding: clamp(1.75rem, 4vw, 2.5rem);">
            <h3 style="font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--ide-accent-hover);">Envianos tu Perfil</h3>
            <p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
              Completá tus datos y dejanos el enlace a tu LinkedIn o CV online para considerarte en futuros proyectos y búsquedas.
            </p>

            <form id="ide-careers-form">
              <input type="hidden" name="form_type" value="trabaja">

              <div class="form-group">
                <label for="careers-nombre" class="form-label">Nombre y Apellido *</label>
                <input type="text" id="careers-nombre" name="nombre" class="form-control" placeholder="Ej: Lic. Carolina Méndez" required>
              </div>

              <div class="grid-2" style="gap: 1rem;">
                <div class="form-group">
                  <label for="careers-email" class="form-label">Correo Electrónico *</label>
                  <input type="email" id="careers-email" name="email" class="form-control" placeholder="nombre@correo.com" required>
                </div>
                <div class="form-group">
                  <label for="careers-telefono" class="form-label">Teléfono</label>
                  <input type="tel" id="careers-telefono" name="telefono" class="form-control" placeholder="+54 9 11 ...">
                </div>
              </div>

              <div class="form-group">
                <label for="careers-area" class="form-label">Área de Interés Principal *</label>
                <select id="careers-area" name="area" class="form-control" required>
                  <option value="Consultoría en Calidad y Normas ISO (Excellence)">Consultoría en Calidad y Normas ISO (Excellence)</option>
                  <option value="Gestión y Dirección de Proyectos (Project)">Gestión y Dirección de Proyectos (Project)</option>
                  <option value="Docencia y Capacitación In-Company (Academy)">Docencia y Capacitación In-Company (Academy)</option>
                  <option value="Transformación Digital e IA (Digital)">Transformación Digital e IA (Digital)</option>
                  <option value="Otras especialidades">Otras especialidades</option>
                </select>
              </div>

              <div class="form-group">
                <label for="careers-linkedin" class="form-label">Enlace a LinkedIn o CV Online *</label>
                <input type="url" id="careers-linkedin" name="linkedin" class="form-control" placeholder="https://linkedin.com/in/tu-perfil" required>
              </div>

              <div class="form-group">
                <label for="careers-mensaje" class="form-label">Breve presentación o trayectoria destacada</label>
                <textarea id="careers-mensaje" name="mensaje" class="form-control" rows="3" placeholder="Contanos sobre tu experiencia profesional y qué te motiva de IDE..."></textarea>
              </div>

              <button type="submit" class="btn btn-accent btn-lg" style="width: 100%; margin-top: 0.5rem;">
                Enviar Postulación
              </button>

              <div id="careers-form-alert" class="form-alert"></div>
            </form>
          </div>

        </div>

      </div>
    </section>

  </main>

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