IDE-Demo-B/contacto.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>Contacto | Conversación Comercial - IDE Consultores</title>
  <meta name="description" content="¿Qué desafío querés transformar? Empecemos por entenderlo. Coordinemos una reunión de diagnóstico con el equipo de IDE Consultores.">
  <meta property="og:title" content="Contacto | Conversación Comercial - IDE Consultores">
  <meta property="og:description" content="Escribinos para coordinar una reunión de diagnóstico o consultar por normas ISO, PMO, capacitación e IA.">
  <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 & Contenido de Contacto con Parallax -->
    <section class="section-padding contact-parallax-section" style="position: relative; overflow: hidden;">
      
      <!-- CAPA PARALLAX (FONDO + OVERLAY DE CONTRASTE) -->
      <div class="parallax-wrapper" aria-hidden="true">
        <div id="contact-parallax-bg" class="parallax-bg-layer"></div>
        <div class="parallax-overlay"></div>
      </div>

      <!-- CONTENIDO (Z-INDEX SUPERIOR) -->
      <div style="position: relative; z-index: 2;">
        <div class="container container-narrow text-center" style="padding-bottom: 4rem;">
          <span class="eyebrow">CONVERSACIÓN INICIAL</span>
          <h1 style="margin-bottom: 1.25rem;">Hablemos de lo que necesitás</h1>
          <p class="lead-text" style="margin: 0 auto;">
            Cada organización, proyecto o iniciativa parte de un contexto diferente. <br>Contanos qué te trae a IDE y empecemos por entender cómo podemos aportar valor.
          </p>
        </div>

        <div class="container">
          <div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
            
            <!-- Columna Izquierda: Formulario Inteligente -->
            <div class="card" style="padding: clamp(1.75rem, 4vw, 2.5rem);">
              <h3 style="font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--ide-primary);">Contanos en qué podemos ayudarte</h3>
              <p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
                Completá tus datos y contanos brevemente el motivo de tu consulta. Empecemos por conversar y entender cómo podemos aportar valor.
              </p>

              <form id="ide-contact-form">
                <input type="hidden" name="form_type" value="contacto">
                <input type="hidden" name="origen" id="contact-origen" value="Formulario General">

                <div class="form-group">
                  <label for="contact-nombre" class="form-label">Nombre y Apellido *</label>
                  <input type="text" id="contact-nombre" name="nombre" class="form-control" placeholder="Ej: Lic. Martín Rossi" required>
                </div>

                <div class="grid-2" style="gap: 1rem;">
                  <div class="form-group">
                    <label for="contact-organizacion" class="form-label">Organización / Empresa *</label>
                    <input type="text" id="contact-organizacion" name="organizacion" class="form-control" placeholder="Ej: Industria S.A." required>
                  </div>
                  <div class="form-group">
                    <label for="contact-rol" class="form-label">Rol o Cargo en la empresa</label>
                    <input type="text" id="contact-rol" name="rol" class="form-control" placeholder="Ej: Gerente de Operaciones">
                  </div>
                </div>

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

                <div class="form-group">
                  <label for="contact-busqueda" class="form-label">¿Qué te trae a IDE? *</label>
                  <select id="contact-busqueda" name="busqueda" class="form-control">
                    <option value="Necesito orientación para abordar un desafío">Necesito orientación para abordar un desafío</option>
                    <option value="Estoy buscando una solución específica">Estoy buscando una solución específica</option>
                    <option value="Quiero implementar o certificar una norma / sistema de gestión">Quiero implementar o certificar una norma / sistema de gestión</option>
                    <option value="Busco formación para mi organización / equipo">Busco formación para mi organización / equipo</option>
                    <option value="Necesito gestionar, ordenar o impulsar un proyecto">Necesito gestionar, ordenar o impulsar un proyecto</option>
                    <option value="Quiero incorporar tecnología, automatización o IA">Quiero incorporar tecnología, automatización o IA</option>
                    <option value="Quiero hacer una consulta sobre IDE Academy">Quiero hacer una consulta sobre IDE Academy</option>
                    <option value="Quiero proponer una alianza o colaboración">Quiero proponer una alianza o colaboración</option>
                    <option value="Otro motivo de consulta">Otro motivo de consulta.</option>
                  </select>
                </div>

                <div class="form-group">
                  <label for="contact-mensaje" class="form-label">Contanos brevemente en qué podemos ayudarte *</label>
                  <textarea id="contact-mensaje" name="mensaje" class="form-control" rows="4" placeholder="Describí los objetivos o problemáticas que quisieras abordar..." required></textarea>
                  <p style="font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem; margin-bottom: 1.25rem;">
                    * campos requeridos. <br><i>La información que compartas será utilizada únicamente para gestionar tu consulta y contactarte en relación con ella.</i>
                  </p>
                </div>

                <button type="submit" class="btn btn-primary btn-lg" style="width: 100%;">
                  ENVIAR CONSULTA →
                </button>

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

            <!-- Columna Derecha: Canales Directos y Datos Institucionales -->
            <div>
              <!-- WhatsApp Destacado -->
              <div class="card" style="background-color: var(--ide-accent-soft); border-color: var(--ide-accent); padding: 1.75rem; margin-bottom: 2rem;">
                <h3 style="font-size: 1.2rem; color: var(--ide-accent-hover); margin-bottom: 0.5rem;">¿Preferís contactarnos directamente?</h3>
                <p style="font-size: 0.9rem; color: var(--text-body); line-height: 1.5; margin-bottom: 1.25rem;">
                  <strong>WhatsApp: </strong>Para consultas breves o coordinar una conversación.
                </p>
                <a href="https://wa.me/5491123456789?text=Hola%20IDE%20Consultores,%20quisiera%20recibir%20m%C3%A1s%20informaci%C3%B3n." target="_blank" rel="noopener noreferrer" class="btn btn-accent btn-sm" style="width: 100%;">
                  ESCRIBINOS POR WHATSAPP →
                </a>
              </div>

              <!-- Canales Institucionales -->
              <div class="card" style="padding: 1.75rem;">
                <h3 style="font-size: 1.15rem; margin-bottom: 1.25rem;">Canales Institucionales</h3>
                
                <ul style="list-style: none; display: flex; flex-direction: column; gap: 1.25rem; font-size: 0.92rem; padding: 0;">
                  <li style="display: flex; gap: 0.85rem; align-items: flex-start;">
                    <span style="font-size: 1.2rem; color: var(--ide-primary);">•</span>
                    <div>
                      <strong>Email:</strong><br> 
                      <a href="mailto:info@ideconsultores.com.ar" style="color: var(--ide-primary); font-weight: 600;">info@ideconsultores.com.ar</a>
                      <p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem;">Para consultas, propuestas o documentación.</p>
                    </div>
                  </li>

                  <li style="display: flex; gap: 0.85rem; align-items: flex-start;">
                    <span style="font-size: 1.2rem; color: var(--ide-primary);">•</span>
                    <div>
                      <strong>Teléfono Directo:</strong><br>
                      <span style="color: var(--text-body);">+54 387 614-0144 (Lunes a Viernes 9 a 18 hs)</span>
                    </div>
                  </li>
                </ul>
              </div>

            </div>

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

  </main>

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