inicial

contacto.html

@@ -0,0 +1,157 @@
+<!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="css/styles.css">
+</head>
+<body>
+
+  <header id="site-header"></header>
+
+  <main>
+
+    <!-- Header Contacto -->
+    <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">CONVERSACIÓN INICIAL</span>
+        <h1 style="margin-bottom: 1.25rem;">¿Qué desafío querés transformar?</h1>
+        <p class="lead-text" style="margin: 0 auto;">
+          Empecemos por entenderlo. Completá el formulario a continuación o contactanos directamente por WhatsApp o correo electrónico.
+        </p>
+      </div>
+    </section>
+
+    <!-- Formulario Inteligente & Datos de Contacto -->
+    <section class="section-padding">
+      <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);">Formulario de Contacto</h3>
+            <p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
+              Completá tus datos para que un consultor senior analice tu contexto y preparemos una propuesta pertinente.
+            </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">Estoy buscando:</label>
+                <select id="contact-busqueda" name="busqueda" class="form-control">
+                  <option value="Orientación para abordar un desafío">Orientación para abordar un desafío</option>
+                  <option value="Una solución concreta">Una solución concreta</option>
+                  <option value="Implementar o certificar una norma">Implementar o certificar una norma (ISO 9001/14001/etc.)</option>
+                  <option value="Formación para mi organización">Formación para mi organización (In-Company / Cursos)</option>
+                  <option value="Gestionar o impulsar un proyecto">Gestionar o impulsar un proyecto (PMO)</option>
+                  <option value="Transformación digital / IA">Transformación digital / IA en Procesos</option>
+                  <option value="Otro">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 dolores que quisieran abordar..." required></textarea>
+              </div>
+
+              <button type="submit" class="btn btn-primary btn-lg" style="width: 100%; margin-top: 0.5rem;">
+                HABLEMOS
+              </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 escribirnos directamente?</h3>
+              <p style="font-size: 0.9rem; color: var(--text-body); line-height: 1.5; margin-bottom: 1.25rem;">
+                Si necesitás una respuesta ágil o coordinar un llamado breve, escribinos a nuestro canal oficial de WhatsApp.
+              </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%;">
+                Abrir chat de WhatsApp (+54 9 11 2345-6789) →
+              </a>
+            </div>
+
+            <!-- Datos Ficticios para fácil edición -->
+            <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;">
+                <li style="display: flex; gap: 0.85rem; align-items: flex-start;">
+                  <span style="font-size: 1.2rem;">•</span>
+                  <div>
+                    <strong>Correo Central:</strong><br>
+                    <a href="mailto:info@ideconsultores.com.ar" style="color: var(--ide-primary); font-weight: 600;">info@ideconsultores.com.ar</a>
+                  </div>
+                </li>
+
+                <li style="display: flex; gap: 0.85rem; align-items: flex-start;">
+                  <span style="font-size: 1.2rem;">•</span>
+                  <div>
+                    <strong>Teléfono Directo:</strong><br>
+                    <span style="color: var(--text-body);">+54 11 4800-0000 (Lunes a Viernes 9 a 18 hs)</span>
+                  </div>
+                </li>
+
+                <li style="display: flex; gap: 0.85rem; align-items: flex-start;">
+                  <span style="font-size: 1.2rem;">•</span>
+                  <div>
+                    <strong>Oficinas Centrales:</strong><br>
+                    <span style="color: var(--text-body);">Av. del Libertador 4800, Piso 8, CABA, Argentina</span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+    </section>
+
+  </main>
+
+  <footer id="site-footer"></footer>
+  <script src="js/main.js"></script>
+</body>
+</html>