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 hero-video-section" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color); position: relative; overflow: hidden; min-height: 400px;">
      
      <!-- Video de fondo -->
      <video autoplay muted loop playsinline style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.15;
        z-index: 0;
        pointer-events: none;
      ">
        <source src="/assets/video/desktop_working.mp4" type="video/mp4">
        Tu navegador no soporta videos.
      </video>

      <!-- Overlay oscuro opcional para mejor contraste -->
      <div style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(19, 167, 138, 0.5);
        z-index: 1;
      "></div>

      <!-- Contenido -->
      <div class="container container-narrow text-center" style="position: relative; z-index: 2;">
        <span class="eyebrow" style="color: var(--text-main)">TELENTO & RED</span>
        <h1 style="margin-bottom: 1.25rem; color:var(--text-main);">Sumá tu experiencia al Ecosistema IDE</h1>
        <p class="lead-text" style="color:var(--text-main)">
          Construimos una red de profesionales y especialistas con experiencias diversas y una forma compartida de entender la gestión: comprender el contexto, conectar capacidades y generar valor desde la práctica.
        </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 FORMA DE TRABAJAR</span>
            <h2>Experiencias diferentes. <br>Una construcción compartida.</h2>
            <p style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin: 1rem 0 1.5rem 0;">
              Creemos en el trabajo colaborativo, el intercambio de perspectivas y la complementariedad de capacidades. Valoramos la curiosidad, el criterio profesional, la escucha y el compromiso con generar soluciones que tengan sentido para cada contexto.</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;">¿DÓNDE PODÉS SUMAR VALOR?</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> Gestión · Procesos · Mejora continua · Sistemas de gestión · Sostenibilidad</li>
                <li>• <strong>IDE Project:</strong> Gestión de proyectos · PMO · Planificación · Riesgos · Agilidad</li>
                <li>• <strong>IDE Digital:</strong> Digitalización · Automatización · Inteligencia Artificial · Datos · Business Intelligence</li>
                <li>• <strong>IDE Academy:</strong> Facilitación · Formación ejecutiva · Diseño de experiencias de aprendizaje · Desarrollo de capacidades</li>
                <li>• <strong>¿Tu especialidad no aparece acá?</strong> También queremos conocerla. El Ecosistema puede crecer incorporando nuevas capacidades.</li>
              </ul>
              
            </div>
            <div class="card-trabajo"></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);">CONECTEMOS CAPACIDADES</h3>
            <p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
              Si compartís nuestra forma de entender la gestión y creés que tu experiencia puede complementar las capacidades del Ecosistema, queremos conocerte.<br> Compartinos tus datos para conocerte y considerarte en futuras oportunidades de colaboración.
            </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="IDE Excellence — Gestión, procesos, mejora continua y sistemas de gestión">IDE Excellence — Gestión, procesos, mejora continua y sistemas de gestión</option>
                  <option value="IDE Projects — Gestión y dirección de proyectos">IDE Projects — Gestión y dirección de proyectos</option>
                  <option value="IDE Digital — Digitalización, automatización, datos e IA">IDE Digital — Digitalización, automatización, datos e IA</option>
                  <option value="IDE Academy — Formación, facilitación y desarrollo de capacidades">IDE Academy — Formación, facilitación y desarrollo de capacidades</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 brevemente sobre tu experiencia y cómo podrías sumar valor a IDE..."></textarea>
              
              <p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
              * campos obligatorios.<br> <i>La información que compartas será utilizada únicamente para gestionar tu contacto con IDE.</i></p>
            </div>

              <button type="submit" class="btn btn-accent btn-lg" style="width: 100%; margin-top: 0.5rem;">
                SUMARME A LA RED IDE →
              </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>