Files
2026-08-28 15:38:06 -03:00

1004 lines
37 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IDE Consultores · Demo</title>
<!-- Fuente BEBAS (Bebas Neue) y Open Sans para textos -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome para iconos (opcional, pero ayuda) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* ---------- VARIABLES Y RESET ---------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--color-primary: #1E3A5F; /* Azul oscuro (aprox) */
--color-secondary: #2A9D8F; /* Verde/teal */
--color-gray: #999999;
--color-bg: #F8F9FA;
--color-text: #1A1A1A;
--color-white: #FFFFFF;
--color-border: #E0E0E0;
--font-heading: 'Bebas Neue', sans-serif;
--font-body: 'Open Sans', sans-serif;
--transition: 0.3s ease;
}
[data-theme="dark"] {
--color-bg: #1A1A1A;
--color-text: #E0E0E0;
--color-white: #2D2D2D;
--color-border: #444444;
--color-gray: #AAAAAA;
}
body {
font-family: var(--font-body);
background-color: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
transition: background var(--transition), color var(--transition);
}
a {
text-decoration: none;
color: var(--color-primary);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ---------- HEADER / NAV ---------- */
header {
background-color: var(--color-white);
border-bottom: 1px solid var(--color-border);
padding: 12px 0;
position: sticky;
top: 0;
z-index: 100;
transition: background var(--transition), border var(--transition);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.logo {
font-family: var(--font-heading);
font-size: 2rem;
color: var(--color-primary);
letter-spacing: 2px;
}
.logo span {
color: var(--color-secondary);
}
.nav-menu {
display: flex;
gap: 1.5rem;
align-items: center;
flex-wrap: wrap;
}
.nav-menu a {
font-weight: 600;
font-size: 0.95rem;
color: var(--color-text);
padding: 6px 0;
border-bottom: 2px solid transparent;
transition: border var(--transition), color var(--transition);
}
.nav-menu a:hover,
.nav-menu a.active {
border-bottom-color: var(--color-secondary);
color: var(--color-secondary);
}
.theme-toggle {
background: none;
border: none;
font-size: 1.3rem;
cursor: pointer;
color: var(--color-text);
padding: 0 6px;
transition: color var(--transition);
}
.theme-toggle:hover {
color: var(--color-secondary);
}
/* ---------- HAMBURGER (mobile) ---------- */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.hamburger span {
display: block;
width: 26px;
height: 3px;
background-color: var(--color-text);
border-radius: 2px;
transition: background var(--transition);
}
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-menu {
display: none;
width: 100%;
flex-direction: column;
align-items: flex-start;
padding: 16px 0 8px;
gap: 0.8rem;
border-top: 1px solid var(--color-border);
margin-top: 12px;
}
.nav-menu.open {
display: flex;
}
.nav-menu a {
width: 100%;
padding: 8px 0;
}
.theme-toggle {
align-self: flex-end;
}
}
/* ---------- PÁGINAS (sections) ---------- */
.page {
display: none;
padding: 40px 0 60px;
animation: fadeIn 0.3s ease;
}
.page.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- TIPOGRAFÍA ---------- */
h1, h2, h3, h4, .heading {
font-family: var(--font-heading);
font-weight: 400;
letter-spacing: 1px;
color: var(--color-primary);
}
h1 { font-size: 3.5rem; line-height: 1.1; }
h2 { font-size: 2.6rem; margin-bottom: 1.2rem; }
h3 { font-size: 1.8rem; margin-bottom: 0.8rem; }
.eyebrow {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--color-secondary);
font-weight: 600;
margin-bottom: 0.5rem;
}
.btn {
display: inline-block;
padding: 14px 34px;
background-color: var(--color-secondary);
color: #fff;
font-weight: 600;
border-radius: 40px;
border: none;
cursor: pointer;
transition: background var(--transition), transform var(--transition);
font-size: 1rem;
}
.btn:hover {
background-color: var(--color-primary);
transform: translateY(-2px);
}
.btn-outline {
background: transparent;
border: 2px solid var(--color-secondary);
color: var(--color-secondary);
}
.btn-outline:hover {
background: var(--color-secondary);
color: #fff;
}
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
/* ---------- CARDS / GRIDS ---------- */
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
}
.card {
background: var(--color-white);
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
border: 1px solid var(--color-border);
transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
transform: translateY(-4px);
}
.card i {
font-size: 2.4rem;
color: var(--color-secondary);
margin-bottom: 1rem;
}
.card h3 {
font-family: var(--font-heading);
font-size: 1.6rem;
color: var(--color-primary);
}
/* ---------- FORMULARIOS ---------- */
.form-group {
margin-bottom: 1.2rem;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 4px;
font-size: 0.95rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-white);
color: var(--color-text);
font-family: var(--font-body);
transition: border var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-secondary);
}
/* ---------- HERO ---------- */
.hero {
padding: 60px 0 40px;
background: linear-gradient(135deg, var(--color-primary) 0%, #0f2838 100%);
color: #fff;
border-radius: 20px;
margin-bottom: 40px;
padding: 60px 40px;
}
.hero h1 {
color: #fff;
}
.hero .eyebrow {
color: #8fc9c0;
}
.hero .btn {
background: #fff;
color: var(--color-primary);
}
.hero .btn:hover {
background: var(--color-secondary);
color: #fff;
}
.hero .btn-outline {
border-color: #fff;
color: #fff;
}
.hero .btn-outline:hover {
background: #fff;
color: var(--color-primary);
}
/* ---------- FOOTER ---------- */
footer {
background-color: var(--color-white);
border-top: 1px solid var(--color-border);
padding: 40px 0 20px;
transition: background var(--transition), border var(--transition);
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-grid h4 {
font-family: var(--font-heading);
font-size: 1.3rem;
color: var(--color-primary);
margin-bottom: 0.8rem;
}
.footer-grid ul {
list-style: none;
}
.footer-grid ul li {
margin-bottom: 6px;
}
.footer-grid ul li a {
color: var(--color-text);
font-size: 0.95rem;
opacity: 0.8;
transition: opacity var(--transition);
}
.footer-grid ul li a:hover {
opacity: 1;
color: var(--color-secondary);
}
.footer-bottom {
border-top: 1px solid var(--color-border);
padding-top: 20px;
text-align: center;
font-size: 0.9rem;
color: var(--color-gray);
}
/* ---------- MISC ---------- */
.badge {
display: inline-block;
background: var(--color-secondary);
color: #fff;
padding: 4px 14px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 999;
justify-content: center;
align-items: center;
backdrop-filter: blur(4px);
}
.modal-overlay.open {
display: flex;
}
.modal-box {
background: var(--color-white);
max-width: 580px;
width: 90%;
padding: 32px;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
position: relative;
max-height: 80vh;
overflow-y: auto;
}
.modal-close {
position: absolute;
top: 16px;
right: 20px;
font-size: 1.8rem;
background: none;
border: none;
cursor: pointer;
color: var(--color-text);
}
.modal-close:hover {
color: var(--color-secondary);
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 480px) {
h1 { font-size: 2.4rem; }
h2 { font-size: 2rem; }
.hero { padding: 30px 20px; }
.btn { padding: 12px 24px; }
}
</style>
</head>
<body>
<!-- ========== HEADER ========== -->
<header>
<div class="container header-inner">
<div class="logo">IDE <span>Consultores</span></div>
<button class="hamburger" id="hamburger" aria-label="Menú">
<span></span><span></span><span></span>
</button>
<nav class="nav-menu" id="navMenu">
<a href="#" data-page="home" class="active">Inicio</a>
<a href="#" data-page="somos">Somos IDE</a>
<a href="#" data-page="desafios">Desafíos</a>
<a href="#" data-page="soluciones">Soluciones</a>
<a href="#" data-page="ecosistema">Ecosistema</a>
<a href="#" data-page="academy">Academy</a>
<a href="#" data-page="insights">Insights</a>
<a href="#" data-page="contacto">Contacto</a>
<button class="theme-toggle" id="themeToggle" aria-label="Cambiar tema">
<i class="fas fa-moon"></i>
</button>
</nav>
</div>
</header>
<!-- ========== CONTENIDO PRINCIPAL ========== -->
<main>
<!-- ===== HOME ===== -->
<section id="page-home" class="page active">
<div class="container">
<!-- Hero -->
<div class="hero">
<div class="eyebrow">TODO ESTÁ CONECTADO</div>
<h1>Mejorar una parte no siempre mejora el todo.</h1>
<p style="font-size:1.2rem; max-width:700px; margin: 1rem 0 2rem;">
En una organización, cada decisión genera efectos más allá del lugar donde interviene.
Antes de buscar una solución, hay que comprender el sistema.
</p>
<div style="display:flex; flex-wrap:wrap; gap:1rem;">
<a href="#" data-page="desafios" class="btn btn-outline" style="border-color:#fff; color:#fff;">Tengo un desafío, pero no sé qué necesito</a>
<a href="#" data-page="soluciones" class="btn" style="background:#fff; color:var(--color-primary);">Busco una solución concreta (ISO, Proyectos, IA)</a>
</div>
</div>
<!-- Bloque 2: Tensión -->
<div style="margin: 60px 0;">
<div style="max-width:700px;">
<div class="eyebrow">EL QUIEBRE</div>
<h2>Las organizaciones ya tienen procesos, herramientas y personas.</h2>
<p style="font-size:1.1rem;">Sin embargo, algunos desafíos persisten. Soluciones aisladas para problemas que nunca estuvieron realmente aislados.</p>
</div>
<div style="display:flex; gap:2rem; margin-top:2rem; flex-wrap:wrap;">
<div style="flex:1; min-width:200px; background:var(--color-white); padding:24px; border-radius:12px; border-left:4px solid var(--color-secondary);">
<strong>Partes aisladas</strong>
<p style="opacity:0.7;">Intervenciones puntuales que no resuelven el todo.</p>
</div>
<div style="flex:1; min-width:200px; background:var(--color-white); padding:24px; border-radius:12px; border-left:4px solid var(--color-primary);">
<strong>Sistema conectado</strong>
<p style="opacity:0.7;">Mirada integral que transforma la organización.</p>
</div>
</div>
</div>
<!-- Bloque 3: Principio IDE -->
<div style="margin: 60px 0;">
<div class="eyebrow">EL PRINCIPIO IDE</div>
<h2>Comprender el todo para saber dónde intervenir.</h2>
<div class="grid-2" style="margin-top:1.5rem;">
<div class="card"><i class="fas fa-search"></i><h3>01. Comprender</h3><p>Diagnóstico profundo de la situación actual.</p></div>
<div class="card"><i class="fas fa-bullseye"></i><h3>02. Focalizar</h3><p>Identificamos las palancas de mayor impacto.</p></div>
<div class="card"><i class="fas fa-link"></i><h3>03. Integrar</h3><p>Conectamos soluciones en un plan coherente.</p></div>
<div class="card"><i class="fas fa-rocket"></i><h3>04. Transformar</h3><p>Implementamos y acompañamos el cambio.</p></div>
</div>
</div>
<!-- Bloque 4: Ecosistema -->
<div style="margin: 60px 0;">
<div class="eyebrow">ECOSISTEMA</div>
<h2>No se trata de sumar soluciones. Se trata de conectar capacidades.</h2>
<div class="grid-2">
<div class="card"><i class="fas fa-trophy"></i><h3>Excellence</h3><p>Sistemas de gestión y mejora continua.</p></div>
<div class="card"><i class="fas fa-project-diagram"></i><h3>Project</h3><p>Gestión de proyectos y PMO.</p></div>
<div class="card"><i class="fas fa-graduation-cap"></i><h3>Academy</h3><p>Formación y desarrollo de capacidades.</p></div>
<div class="card"><i class="fas fa-laptop-code"></i><h3>Digital</h3><p>Transformación digital e IA.</p></div>
</div>
<div class="text-center mt-2"><a href="#" data-page="ecosistema" class="btn">Conocer el Ecosistema</a></div>
</div>
<!-- Bloque 5: Sectores -->
<div style="margin: 60px 0;">
<div class="eyebrow">SECTORES</div>
<h2>Acompañamos la transformación en contextos complejos.</h2>
<div style="display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; margin-top:1.5rem;">
<span class="badge">Agro</span>
<span class="badge">Salud</span>
<span class="badge">Educación</span>
<span class="badge">Industria</span>
<span class="badge">Tecnología</span>
</div>
</div>
<!-- Bloque 6: CTA Final -->
<div style="text-align:center; padding: 40px 0;">
<h2>¿Qué desafío querés transformar?</h2>
<p style="font-size:1.2rem;">Empecemos por entenderlo.</p>
<a href="#" data-page="contacto" class="btn" style="margin-top:1.5rem;">HABLEMOS</a>
</div>
</div>
</section>
<!-- ===== SOMOS IDE ===== -->
<section id="page-somos" class="page">
<div class="container">
<div class="eyebrow">IDENTIDAD</div>
<h1>Somos IDE</h1>
<div style="max-width:800px; margin-bottom:2rem;">
<p style="font-size:1.2rem;">Somos una consultora especializada en transformación organizacional. Creemos que el cambio real nace de comprender la complejidad de los sistemas.</p>
</div>
<div class="grid-2">
<div class="card"><i class="fas fa-flag"></i><h3>Propósito</h3><p>Ayudar a las organizaciones a evolucionar desde una mirada sistémica.</p></div>
<div class="card"><i class="fas fa-users"></i><h3>Equipo</h3><p>Profesionales con experiencia en gestión, tecnología y personas.</p></div>
<div class="card"><i class="fas fa-cog"></i><h3>Metodología</h3><p>Comprender, focalizar, integrar y transformar.</p></div>
<div class="card"><i class="fas fa-handshake"></i><h3>Valores</h3><p>Seriedad, verdad, estabilidad, equilibrio, esperanza y tenacidad.</p></div>
</div>
</div>
</section>
<!-- ===== DESAFÍOS ===== -->
<section id="page-desafios" class="page">
<div class="container">
<div class="eyebrow">DESAFÍOS</div>
<h1>¿Qué está pasando en tu organización?</h1>
<p style="font-size:1.1rem; max-width:700px;">Seleccioná un desafío y descubrí posibles caminos de intervención.</p>
<div class="grid-2" style="margin-top:2rem;">
<div class="card" onclick="openModal('desafio1')">
<i class="fas fa-sync-alt"></i>
<h3>Transformar la organización</h3>
<p>Cambios culturales y estructurales para adaptarse al entorno.</p>
</div>
<div class="card" onclick="openModal('desafio2')">
<i class="fas fa-chart-line"></i>
<h3>Mejorar la gestión</h3>
<p>Optimizar procesos, indicadores y toma de decisiones.</p>
</div>
<div class="card" onclick="openModal('desafio3')">
<i class="fas fa-robot"></i>
<h3>Incorporar tecnología e IA</h3>
<p>Digitalización inteligente y automatización.</p>
</div>
<div class="card" onclick="openModal('desafio4')">
<i class="fas fa-users-cog"></i>
<h3>Desarrollar talento</h3>
<p>Formación y capacitación para potenciar equipos.</p>
</div>
</div>
</div>
</section>
<!-- ===== SOLUCIONES ===== -->
<section id="page-soluciones" class="page">
<div class="container">
<div class="eyebrow">SOLUCIONES</div>
<h1>Encontrá la respuesta concreta que necesitás</h1>
<div style="display:flex; gap:0.8rem; flex-wrap:wrap; margin:1.5rem 0;">
<span class="badge" style="cursor:pointer; background:var(--color-primary);">ISO 9001</span>
<span class="badge" style="cursor:pointer;">ISO 14001</span>
<span class="badge" style="cursor:pointer;">Gestión de Proyectos</span>
<span class="badge" style="cursor:pointer;">PMO</span>
<span class="badge" style="cursor:pointer;">Inteligencia Artificial</span>
</div>
<div class="grid-2">
<div class="card"><h3>ISO 9001</h3><p>Sistema de gestión de calidad. Para organizaciones que buscan estandarizar y mejorar sus procesos.</p><a href="#" data-page="contacto" class="btn" style="margin-top:1rem; display:inline-block;">Consultar</a></div>
<div class="card"><h3>ISO 14001</h3><p>Gestión ambiental. Para organizaciones comprometidas con la sostenibilidad.</p><a href="#" data-page="contacto" class="btn" style="margin-top:1rem; display:inline-block;">Consultar</a></div>
<div class="card"><h3>Gestión de Proyectos</h3><p>Metodologías ágiles y tradicionales para asegurar el éxito de tus iniciativas.</p><a href="#" data-page="contacto" class="btn" style="margin-top:1rem; display:inline-block;">Consultar</a></div>
<div class="card"><h3>PMO</h3><p>Oficina de Gestión de Proyectos. Centralizamos y optimizamos tu cartera de proyectos.</p><a href="#" data-page="contacto" class="btn" style="margin-top:1rem; display:inline-block;">Consultar</a></div>
</div>
<div class="text-center mt-2"><p><i>¿Sabías que un sistema de gestión requiere también desarrollar capacidades en tu equipo? Conocé <a href="#" data-page="academy">IDE Academy</a>.</i></p></div>
</div>
</section>
<!-- ===== ECOSISTEMA ===== -->
<section id="page-ecosistema" class="page">
<div class="container">
<div class="eyebrow">ECOSISTEMA</div>
<h1>Cuatro capacidades que se potencian entre sí</h1>
<p style="max-width:700px;">No todos los desafíos necesitan todo el Ecosistema, pero todos se benefician de una mirada que comprende el conjunto.</p>
<div class="grid-2" style="margin-top:2rem;">
<div class="card"><i class="fas fa-trophy"></i><h3>Excellence</h3><p>Excelencia operativa y sistemas de gestión (ISO, BPM, mejora continua).</p></div>
<div class="card"><i class="fas fa-project-diagram"></i><h3>Project</h3><p>Gestión de proyectos, PMO, metodologías ágiles y tradicionales.</p></div>
<div class="card"><i class="fas fa-graduation-cap"></i><h3>Academy</h3><p>Formación In Company y desarrollo de habilidades directivas y técnicas.</p></div>
<div class="card"><i class="fas fa-laptop-code"></i><h3>Digital</h3><p>Transformación digital, IA, automatización y datos.</p></div>
</div>
<div style="text-align:center; margin-top:2rem;">
<span class="badge" style="background:var(--color-primary);">Venn de capacidades</span>
<p style="margin-top:1rem;">Cada capacidad se nutre de las otras para generar un impacto sistémico.</p>
</div>
</div>
</section>
<!-- ===== ACADEMY ===== -->
<section id="page-academy" class="page">
<div class="container">
<div class="eyebrow">IDE ACADEMY</div>
<h1>Desarrollamos las capacidades que hacen posible la transformación</h1>
<p style="max-width:700px;">Formación práctica y aplicada para tu organización.</p>
<div class="grid-2" style="margin-top:2rem;">
<div class="card" onclick="openModal('curso1')">
<i class="fas fa-chalkboard-teacher"></i>
<h3>Liderazgo y Gestión</h3>
<p>Modalidad: Online · Duración: 6 semanas</p>
</div>
<div class="card" onclick="openModal('curso2')">
<i class="fas fa-code"></i>
<h3>Fundamentos de IA</h3>
<p>Modalidad: Presencial · Duración: 3 días</p>
</div>
<div class="card" onclick="openModal('curso3')">
<i class="fas fa-tasks"></i>
<h3>Gestión de Proyectos Ágiles</h3>
<p>Modalidad: Online · Duración: 4 semanas</p>
</div>
</div>
<div class="text-center mt-2"><a href="#" data-page="contacto" class="btn">Consultar por próximas fechas o formación In Company</a></div>
</div>
</section>
<!-- ===== INSIGHTS ===== -->
<section id="page-insights" class="page">
<div class="container">
<div class="eyebrow">INSIGHTS</div>
<h1>Últimas publicaciones</h1>
<div class="grid-2" style="margin-top:2rem;">
<div class="card"><img src="https://via.placeholder.com/400x200/2A9D8F/fff?text=Artículo+1" alt="artículo" style="width:100%; border-radius:8px; margin-bottom:1rem;"><h3>La organización como sistema vivo</h3><p>Exploramos cómo las empresas evolucionan cuando se las mira como un ecosistema.</p><a href="#" style="color:var(--color-secondary);">Leer más →</a></div>
<div class="card"><img src="https://via.placeholder.com/400x200/1E3A5F/fff?text=Artículo+2" alt="artículo" style="width:100%; border-radius:8px; margin-bottom:1rem;"><h3>ISO 9001: más que un certificado</h3><p>La norma como palanca de mejora continua y cultura de calidad.</p><a href="#" style="color:var(--color-secondary);">Leer más →</a></div>
<div class="card"><img src="https://via.placeholder.com/400x200/999999/fff?text=Artículo+3" alt="artículo" style="width:100%; border-radius:8px; margin-bottom:1rem;"><h3>IA en la gestión de proyectos</h3><p>Cómo la inteligencia artificial está transformando la toma de decisiones.</p><a href="#" style="color:var(--color-secondary);">Leer más →</a></div>
</div>
<div class="text-center mt-2"><a href="#" class="btn btn-outline">Ver todos los artículos en nuestro Blog</a></div>
</div>
</section>
<!-- ===== CONTACTO ===== -->
<section id="page-contacto" class="page">
<div class="container">
<div class="eyebrow">CONTACTO</div>
<h1>¿Qué desafío querés transformar?</h1>
<p style="max-width:700px;">Empecemos por entenderlo. Dejanos tus datos y te respondemos a la brevedad.</p>
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:2rem; margin-top:2rem;">
<div>
<form id="contactForm">
<div class="form-group">
<label for="nombre">Nombre *</label>
<input type="text" id="nombre" required>
</div>
<div class="form-group">
<label for="organizacion">Organización</label>
<input type="text" id="organizacion">
</div>
<div class="form-group">
<label for="rol">Rol</label>
<input type="text" id="rol">
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="email" id="email" required>
</div>
<div class="form-group">
<label for="telefono">Teléfono (opcional)</label>
<input type="tel" id="telefono">
</div>
<div class="form-group">
<label for="interes">Estoy buscando</label>
<select id="interes">
<option>Orientación para un desafío</option>
<option>Una solución concreta</option>
<option>Implementar o certificar una norma</option>
<option>Formación para mi organización</option>
<option>Gestionar un proyecto</option>
<option>Transformación digital e IA</option>
<option>Otro</option>
</select>
</div>
<div class="form-group">
<label for="mensaje">Contanos brevemente en qué podemos ayudarte</label>
<textarea id="mensaje" rows="4"></textarea>
</div>
<button type="submit" class="btn">HABLEMOS</button>
</form>
</div>
<div>
<div style="background:var(--color-white); padding:24px; border-radius:12px; border:1px solid var(--color-border);">
<h3><i class="fas fa-phone-alt" style="color:var(--color-secondary);"></i> Preferís escribirnos directamente?</h3>
<a href="#" class="btn btn-outline" style="margin-top:1rem; display:inline-block;"><i class="fab fa-whatsapp"></i> WhatsApp</a>
<hr style="margin:1.5rem 0; border-color:var(--color-border);">
<p><strong>Email:</strong> info@ideconsultores.com.ar</p>
<p><strong>Tel:</strong> +54 11 1234-5678</p>
</div>
</div>
</div>
</div>
</section>
<!-- ===== TRABAJA CON NOSOTROS ===== -->
<section id="page-trabaja" class="page">
<div class="container">
<div class="eyebrow">TRABAJA CON NOSOTROS</div>
<h1>Sumate al equipo IDE</h1>
<p style="max-width:700px;">Si compartís nuestra pasión por la transformación sistémica, queremos conocerte.</p>
<div style="max-width:600px; margin:2rem 0;">
<form id="trabajoForm">
<div class="form-group">
<label for="t_nombre">Nombre *</label>
<input type="text" id="t_nombre" required>
</div>
<div class="form-group">
<label for="t_email">Email *</label>
<input type="email" id="t_email" required>
</div>
<div class="form-group">
<label for="t_linkedin">LinkedIn / CV</label>
<input type="text" id="t_linkedin" placeholder="URL o resumen">
</div>
<div class="form-group">
<label for="t_area">Área de interés</label>
<select id="t_area">
<option>Consultoría</option>
<option>Formación</option>
<option>Digital / IA</option>
<option>Administración</option>
<option>Otro</option>
</select>
</div>
<button type="submit" class="btn">Enviar postulación</button>
</form>
</div>
</div>
</section>
</main>
<!-- ========== FOOTER ========== -->
<footer>
<div class="container">
<div class="footer-grid">
<div>
<h4>IDE Consultores</h4>
<ul>
<li><a href="#" data-page="somos">Somos IDE</a></li>
<li><a href="#" data-page="contacto">Contacto</a></li>
<li><a href="#" data-page="trabaja">Trabaja con nosotros</a></li>
</ul>
</div>
<div>
<h4>Descubrí</h4>
<ul>
<li><a href="#" data-page="desafios">Desafíos</a></li>
<li><a href="#" data-page="soluciones">Soluciones</a></li>
<li><a href="#" data-page="ecosistema">Ecosistema</a></li>
</ul>
</div>
<div>
<h4>Recursos</h4>
<ul>
<li><a href="#" data-page="academy">IDE Academy</a></li>
<li><a href="#" data-page="insights">Insights</a></li>
</ul>
</div>
<div>
<h4>Conectá</h4>
<ul>
<li><a href="#"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
<li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
<li><a href="#"><i class="fab fa-youtube"></i> YouTube</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
&copy; 2026 IDE Consultores · Todos los derechos reservados · Hecho con <i class="fas fa-heart" style="color:var(--color-secondary);"></i>
</div>
</div>
</footer>
<!-- ========== MODALES ========== -->
<div class="modal-overlay" id="modalOverlay" onclick="if(event.target===this) closeModal()">
<div class="modal-box">
<button class="modal-close" onclick="closeModal()">&times;</button>
<div id="modalContent">
<!-- Contenido dinámico -->
</div>
</div>
</div>
<!-- ========== SCRIPTS ========== -->
<script>
// ---------- NAVEGACIÓN SPA ----------
const navLinks = document.querySelectorAll('[data-page]');
const pages = document.querySelectorAll('.page');
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('navMenu');
function navigate(pageId) {
// ocultar todas
pages.forEach(p => p.classList.remove('active'));
// mostrar la seleccionada
const target = document.getElementById('page-' + pageId);
if (target) target.classList.add('active');
// actualizar links activos
navLinks.forEach(link => {
link.classList.remove('active');
if (link.dataset.page === pageId) link.classList.add('active');
});
// cerrar menú móvil
navMenu.classList.remove('open');
// scroll al inicio
window.scrollTo({ top: 0, behavior: 'smooth' });
}
navLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const page = link.dataset.page;
if (page) navigate(page);
});
});
// hamburger
hamburger.addEventListener('click', () => {
navMenu.classList.toggle('open');
});
// ---------- TEMA OSCURO/CLARO ----------
const themeToggle = document.getElementById('themeToggle');
const icon = themeToggle.querySelector('i');
let dark = false;
themeToggle.addEventListener('click', () => {
dark = !dark;
document.documentElement.setAttribute('data-theme', dark ? 'dark' : '');
icon.className = dark ? 'fas fa-sun' : 'fas fa-moon';
});
// ---------- MODALES ----------
const modalOverlay = document.getElementById('modalOverlay');
const modalContent = document.getElementById('modalContent');
function openModal(tipo) {
let html = '';
if (tipo === 'desafio1') {
html = `
<h2>Transformar la organización</h2>
<p><strong>Contexto:</strong> Cambios culturales y estructurales para adaptarse al entorno.</p>
<p><strong>Preguntas clave:</strong> ¿Estamos alineados con el propósito? ¿Qué cultura necesitamos?</p>
<p><strong>Posibles caminos:</strong> Diagnóstico cultural, diseño de nuevas estructuras, acompañamiento al cambio.</p>
<a href="#" data-page="contacto" class="btn" style="margin-top:1rem;">Hablemos de este desafío</a>
`;
} else if (tipo === 'desafio2') {
html = `
<h2>Mejorar la gestión</h2>
<p><strong>Contexto:</strong> Optimizar procesos, indicadores y toma de decisiones.</p>
<p><strong>Preguntas clave:</strong> ¿Dónde están los cuellos de botella? ¿Qué datos necesitamos?</p>
<p><strong>Posibles caminos:</strong> Mapeo de procesos, implementación de cuadro de mando, mejora continua.</p>
<a href="#" data-page="contacto" class="btn" style="margin-top:1rem;">Hablemos de este desafío</a>
`;
} else if (tipo === 'desafio3') {
html = `
<h2>Incorporar tecnología e IA</h2>
<p><strong>Contexto:</strong> Digitalización inteligente y automatización.</p>
<p><strong>Preguntas clave:</strong> ¿Qué procesos se pueden automatizar? ¿Cómo integrar IA?</p>
<p><strong>Posibles caminos:</strong> Estrategia digital, selección de herramientas, pilotos de IA.</p>
<a href="#" data-page="contacto" class="btn" style="margin-top:1rem;">Hablemos de este desafío</a>
`;
} else if (tipo === 'desafio4') {
html = `
<h2>Desarrollar talento</h2>
<p><strong>Contexto:</strong> Formación y capacitación para potenciar equipos.</p>
<p><strong>Preguntas clave:</strong> ¿Qué habilidades faltan? ¿Cómo retener el talento?</p>
<p><strong>Posibles caminos:</strong> Plan de formación, mentorías, programas de liderazgo.</p>
<a href="#" data-page="contacto" class="btn" style="margin-top:1rem;">Hablemos de este desafío</a>
`;
} else if (tipo === 'curso1') {
html = `
<h2>Liderazgo y Gestión</h2>
<p><strong>Propuesta:</strong> Desarrollar habilidades de liderazgo y gestión de equipos.</p>
<p><strong>Temario:</strong> Comunicación efectiva, toma de decisiones, gestión del cambio.</p>
<p><strong>Docente:</strong> Equipo IDE con amplia experiencia.</p>
<a href="#" data-page="contacto" class="btn" style="margin-top:1rem;">Consultar por próximas fechas</a>
`;
} else if (tipo === 'curso2') {
html = `
<h2>Fundamentos de IA</h2>
<p><strong>Propuesta:</strong> Introducción a la inteligencia artificial aplicada a la gestión.</p>
<p><strong>Temario:</strong> Machine Learning, NLP, casos de uso en empresas.</p>
<p><strong>Docente:</strong> Especialistas en IA del equipo Digital.</p>
<a href="#" data-page="contacto" class="btn" style="margin-top:1rem;">Consultar por próximas fechas</a>
`;
} else if (tipo === 'curso3') {
html = `
<h2>Gestión de Proyectos Ágiles</h2>
<p><strong>Propuesta:</strong> Metodologías ágiles para gestionar proyectos con flexibilidad.</p>
<p><strong>Temario:</strong> Scrum, Kanban, roles ágiles, herramientas.</p>
<p><strong>Docente:</strong> Project Managers certificados.</p>
<a href="#" data-page="contacto" class="btn" style="margin-top:1rem;">Consultar por próximas fechas</a>
`;
}
modalContent.innerHTML = html;
modalOverlay.classList.add('open');
// reasignar clicks en enlaces dentro del modal
modalContent.querySelectorAll('[data-page]').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const page = link.dataset.page;
if (page) { navigate(page); closeModal(); }
});
});
}
function closeModal() {
modalOverlay.classList.remove('open');
}
// cerrar con ESC
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
});
// ---------- FORMULARIOS (demo) ----------
document.getElementById('contactForm')?.addEventListener('submit', (e) => {
e.preventDefault();
alert('Mensaje enviado (demo). Se enviaría a info@ideconsultores.com.ar');
});
document.getElementById('trabajoForm')?.addEventListener('submit', (e) => {
e.preventDefault();
alert('Postulación enviada (demo). Se enviaría a talento@ideconsultores.com.ar');
});
// ---------- INICIO ----------
// Asegurar que home esté activa al cargar
navigate('home');
</script>
</body>
</html>