estructura inicial
This commit is contained in:
+231
@@ -0,0 +1,231 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>IDE Academy – IDE Consultores</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<style>
|
||||
.course-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.course-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--green); }
|
||||
|
||||
.course-card__banner {
|
||||
height: 110px;
|
||||
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--green) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.course-card__body { padding: 1.25rem; }
|
||||
.course-card__meta { display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:0.75rem; }
|
||||
.course-meta-chip {
|
||||
font-size:0.72rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
|
||||
padding: 2px 8px; border-radius:4px; color:var(--text-sub); border:1px solid var(--border);
|
||||
}
|
||||
.course-card__title { font-size:1rem; font-weight:600; color:var(--text); margin-bottom:0.4rem; }
|
||||
.course-card__desc { font-size:0.85rem; color:var(--text-sub); max-width:none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<p class="eyebrow">IDE Academy</p>
|
||||
<h1>Desarrollamos las capacidades que hacen posible la transformación.</h1>
|
||||
<p>Formación In Company y cursos abiertos diseñados para que las personas de tu organización lideren los cambios, no que los soporten.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- PROPUESTA DE VALOR -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;">
|
||||
<div class="fade-in">
|
||||
<p class="eyebrow">¿Por qué Academy?</p>
|
||||
<h2>La formación como parte del sistema, no como un apéndice.</h2>
|
||||
<div class="divider"></div>
|
||||
<p>Cada programa de Academy se diseña considerando el contexto de la organización, sus desafíos actuales y las capacidades que necesita desarrollar. No dictamos cursos estándar a audiencias genéricas.</p>
|
||||
<p class="mt-1">Academy es la capacidad del Ecosistema IDE que acompaña y sostiene cualquier proceso de transformación.</p>
|
||||
</div>
|
||||
<div class="fade-in">
|
||||
<div class="card">
|
||||
<div class="card__icon">🏢</div>
|
||||
<h3>In Company</h3>
|
||||
<p style="font-size:0.88rem;">Programa diseñado exclusivamente para tu organización. Contenido adaptado, casos reales, dinámica acorde al equipo.</p>
|
||||
</div>
|
||||
<div class="card mt-1">
|
||||
<div class="card__icon">📅</div>
|
||||
<h3>Cursos Abiertos</h3>
|
||||
<p style="font-size:0.88rem;">Formación en grupos reducidos, con profesionales de distintas organizaciones. Networking y perspectivas diversas.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CURSOS DESTACADOS -->
|
||||
<section class="section section--surface">
|
||||
<div class="container">
|
||||
<div class="fade-in mb-3">
|
||||
<p class="eyebrow">Próximos cursos</p>
|
||||
<h2>Cursos destacados</h2>
|
||||
</div>
|
||||
<div class="grid-3 fade-in">
|
||||
|
||||
<div class="course-card" onclick="openModal('modal-curso-iso')">
|
||||
<div class="course-card__banner">📋</div>
|
||||
<div class="course-card__body">
|
||||
<div class="course-card__meta">
|
||||
<span class="course-meta-chip">ISO 9001</span>
|
||||
<span class="course-meta-chip">Online</span>
|
||||
<span class="course-meta-chip">16hs</span>
|
||||
</div>
|
||||
<div class="course-card__title">Auditor Interno ISO 9001:2015</div>
|
||||
<p class="course-card__desc">Formación completa para planificar y ejecutar auditorías internas efectivas. Con ejercicios prácticos basados en casos reales.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course-card" onclick="openModal('modal-curso-pm')">
|
||||
<div class="course-card__banner">📌</div>
|
||||
<div class="course-card__body">
|
||||
<div class="course-card__meta">
|
||||
<span class="course-meta-chip">Proyectos</span>
|
||||
<span class="course-meta-chip">Presencial</span>
|
||||
<span class="course-meta-chip">24hs</span>
|
||||
</div>
|
||||
<div class="course-card__title">Gestión de Proyectos para No PMPs</div>
|
||||
<p class="course-card__desc">Herramientas prácticas de gestión para líderes y coordinadores que gestionan proyectos sin formación formal en la disciplina.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course-card" onclick="openModal('modal-curso-ia')">
|
||||
<div class="course-card__banner">🤖</div>
|
||||
<div class="course-card__body">
|
||||
<div class="course-card__meta">
|
||||
<span class="course-meta-chip">IA Aplicada</span>
|
||||
<span class="course-meta-chip">Online</span>
|
||||
<span class="course-meta-chip">8hs</span>
|
||||
</div>
|
||||
<div class="course-card__title">IA para equipos: del miedo al uso estratégico</div>
|
||||
<p class="course-card__desc">Introducción práctica a la inteligencia artificial para equipos no técnicos. Casos de uso reales y primeros pasos de implementación.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- IN COMPANY CTA -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div style="display:grid; grid-template-columns:1.5fr 1fr; gap:3rem; align-items:center;" class="fade-in">
|
||||
<div>
|
||||
<p class="eyebrow">Formación In Company</p>
|
||||
<h2>¿Necesitás formación a medida para tu organización?</h2>
|
||||
<p class="mt-1">Diseñamos programas específicos: desde talleres de medio día hasta programas de varios meses. El punto de partida siempre es entender qué capacidades necesita desarrollar tu equipo.</p>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por In Company</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; gap:1rem;">
|
||||
<div style="display:flex; align-items:center; gap:0.75rem; font-size:0.9rem;">
|
||||
<span style="color:var(--green); font-size:1.2rem;">✓</span>
|
||||
<span>Contenido adaptado al contexto de la organización</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:0.75rem; font-size:0.9rem;">
|
||||
<span style="color:var(--green); font-size:1.2rem;">✓</span>
|
||||
<span>Dictado en las instalaciones del cliente o virtual</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:0.75rem; font-size:0.9rem;">
|
||||
<span style="color:var(--green); font-size:1.2rem;">✓</span>
|
||||
<span>Integrado con otros procesos de transformación IDE</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:0.75rem; font-size:0.9rem;">
|
||||
<span style="color:var(--green); font-size:1.2rem;">✓</span>
|
||||
<span>Seguimiento post-formación disponible</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- MODALES DE CURSOS -->
|
||||
<div class="modal-overlay" id="modal-curso-iso">
|
||||
<div class="modal">
|
||||
<button class="modal__close">×</button>
|
||||
<div class="card__tag">Excellence · ISO 9001</div>
|
||||
<h2 style="font-size:1.5rem; margin-bottom:0.5rem;">Auditor Interno ISO 9001:2015</h2>
|
||||
<div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.25rem;">
|
||||
<span class="course-meta-chip">Online</span>
|
||||
<span class="course-meta-chip">16 horas</span>
|
||||
<span class="course-meta-chip">Certificado</span>
|
||||
</div>
|
||||
<p>Formación completa para planificar, ejecutar e informar auditorías internas conforme a ISO 19011. Con simulaciones de auditoría y análisis de hallazgos.</p>
|
||||
<div style="margin-top:1rem;">
|
||||
<strong style="font-size:0.82rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--green);">Temario principal</strong>
|
||||
<ul style="margin-top:0.5rem; padding-left:1.2rem; font-size:0.88rem; color:var(--text-sub);">
|
||||
<li>Requisitos de ISO 9001:2015</li>
|
||||
<li>Planificación del programa de auditoría</li>
|
||||
<li>Técnicas de entrevista y muestreo</li>
|
||||
<li>Redacción de hallazgos y no conformidades</li>
|
||||
<li>Práctica simulada de auditoría</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por fechas</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modal-curso-pm">
|
||||
<div class="modal">
|
||||
<button class="modal__close">×</button>
|
||||
<div class="card__tag">Project</div>
|
||||
<h2 style="font-size:1.5rem; margin-bottom:0.5rem;">Gestión de Proyectos para No PMPs</h2>
|
||||
<div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.25rem;">
|
||||
<span class="course-meta-chip">Presencial / Híbrido</span>
|
||||
<span class="course-meta-chip">24 horas</span>
|
||||
</div>
|
||||
<p>Herramientas prácticas para liderar proyectos con efectividad, sin necesidad de certificación formal. Ideal para coordinadores y líderes de área.</p>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por fechas</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modal-curso-ia">
|
||||
<div class="modal">
|
||||
<button class="modal__close">×</button>
|
||||
<div class="card__tag">Digital · IA</div>
|
||||
<h2 style="font-size:1.5rem; margin-bottom:0.5rem;">IA para equipos: del miedo al uso estratégico</h2>
|
||||
<div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.25rem;">
|
||||
<span class="course-meta-chip">Online</span>
|
||||
<span class="course-meta-chip">8 horas</span>
|
||||
</div>
|
||||
<p>Introducción práctica a la inteligencia artificial pensada para equipos no técnicos. Casos reales, herramientas accesibles y primeros pasos para aplicarla en el trabajo cotidiano.</p>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por fechas</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer-slot"></div>
|
||||
<script src="layout.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+168
@@ -0,0 +1,168 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Contacto – IDE Consultores</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<style>
|
||||
.contact-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1.8fr;
|
||||
gap: 4rem;
|
||||
align-items: start;
|
||||
}
|
||||
.contact-info h3 { font-size:1rem; margin-bottom:0.3rem; }
|
||||
.contact-info a { color:var(--green); font-size:0.9rem; }
|
||||
|
||||
.contact-info__item {
|
||||
display: flex;
|
||||
gap: 0.85rem;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.contact-info__icon {
|
||||
width: 38px; height: 38px; border-radius: 10px;
|
||||
background: rgba(41,185,154,0.12);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.1rem; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
|
||||
|
||||
.whatsapp-btn {
|
||||
display:inline-flex; align-items:center; gap:0.6rem;
|
||||
padding:0.7rem 1.4rem; border-radius:var(--radius);
|
||||
background:#25D366; color:white; font-weight:600; font-size:0.88rem;
|
||||
transition: background var(--transition);
|
||||
margin-top:1.5rem;
|
||||
}
|
||||
.whatsapp-btn:hover { background:#1ebe5d; }
|
||||
|
||||
@media (max-width:800px) {
|
||||
.contact-layout { grid-template-columns:1fr; gap:2.5rem; }
|
||||
.form-row { grid-template-columns:1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Contacto</p>
|
||||
<h1>¿Qué desafío querés transformar?</h1>
|
||||
<p>Empecemos por entenderlo.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<div class="container contact-layout">
|
||||
|
||||
<!-- INFO -->
|
||||
<div>
|
||||
<p class="eyebrow">Hablemos</p>
|
||||
<h2 style="font-size:1.5rem; margin-bottom:1.5rem;">Formas de comunicarnos</h2>
|
||||
|
||||
<div class="contact-info__item">
|
||||
<div class="contact-info__icon">✉️</div>
|
||||
<div>
|
||||
<h3>Email</h3>
|
||||
<a href="mailto:info@ideconsultores.com.ar">info@ideconsultores.com.ar</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-info__item">
|
||||
<div class="contact-info__icon">💬</div>
|
||||
<div>
|
||||
<h3>WhatsApp</h3>
|
||||
<a href="https://wa.me/5491100000000" target="_blank">Escribirnos directamente</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-info__item">
|
||||
<div class="contact-info__icon">📍</div>
|
||||
<div>
|
||||
<h3>Ubicación</h3>
|
||||
<p style="font-size:0.88rem; max-width:none; margin:0;">Argentina · Atención nacional e internacional.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border-top:1px solid var(--border); padding-top:1.5rem; margin-top:0.5rem;">
|
||||
<p style="font-size:0.85rem; max-width:none;">¿Preferís escribirnos directamente sin llenar el formulario?</p>
|
||||
<a href="https://wa.me/5491100000000" target="_blank" class="whatsapp-btn">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M11.999 2.003C6.477 2.003 2 6.481 2 12.002c0 1.76.462 3.4 1.26 4.831L2 22l5.278-1.382A9.946 9.946 0 0 0 12 21.999c5.523 0 10-4.477 10-10 0-5.52-4.477-9.996-10.001-9.996zm0 18.325a8.283 8.283 0 0 1-4.244-1.163l-.305-.18-3.133.82.836-3.044-.198-.312A8.286 8.286 0 0 1 3.711 12c0-4.577 3.724-8.3 8.29-8.3 4.578 0 8.301 3.723 8.301 8.3 0 4.574-3.723 8.328-8.303 8.328z"/></svg>
|
||||
Escribir por WhatsApp
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FORMULARIO -->
|
||||
<div class="card" style="padding:2rem;">
|
||||
<h3 style="margin-bottom:1.5rem; color:var(--text);">Formulario de contacto</h3>
|
||||
<form class="contact-form" action="mailto:info@ideconsultores.com.ar" method="post">
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="nombre">Nombre *</label>
|
||||
<input type="text" id="nombre" name="nombre" required placeholder="Tu nombre" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="org">Organización *</label>
|
||||
<input type="text" id="org" name="organizacion" required placeholder="Nombre de la organización" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="rol">Rol / Cargo</label>
|
||||
<input type="text" id="rol" name="rol" placeholder="Tu posición" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email *</label>
|
||||
<input type="email" id="email" name="email" required placeholder="tu@email.com" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="telefono">Teléfono (opcional)</label>
|
||||
<input type="tel" id="telefono" name="telefono" placeholder="+54 9 11 ..." />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="busco">Estoy buscando *</label>
|
||||
<select id="busco" name="busco" required>
|
||||
<option value="" disabled selected>Seleccioná una opción</option>
|
||||
<option>Orientación para un desafío organizacional</option>
|
||||
<option>Una solución concreta (ISO, PMO, etc.)</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" name="mensaje" placeholder="Describí tu situación o desafío..."></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn--primary" style="width:100%; justify-content:center;">Hablemos</button>
|
||||
<p style="font-size:0.75rem; text-align:center; margin-top:0.75rem; max-width:none;">El formulario envía a <strong>info@ideconsultores.com.ar</strong>. Respondemos en menos de 24hs hábiles.</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="footer-slot"></div>
|
||||
<script src="layout.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+202
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Desafíos – IDE Consultores</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<style>
|
||||
.accordion-item { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; margin-bottom:0.75rem; }
|
||||
|
||||
.accordion-trigger {
|
||||
width:100%; display:flex; align-items:center; justify-content:space-between;
|
||||
padding:1.25rem 1.5rem; background:var(--bg); border:none; cursor:pointer;
|
||||
font-family:var(--font-body); font-size:1rem; font-weight:600;
|
||||
color:var(--text); text-align:left; gap:1rem;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
.accordion-trigger:hover { background:var(--surface); }
|
||||
.accordion-trigger.open { background:var(--teal-dark); color:var(--white); }
|
||||
|
||||
.accordion-trigger .icon {
|
||||
flex-shrink:0; width:28px; height:28px; border-radius:50%;
|
||||
background:rgba(41,185,154,0.15); display:flex; align-items:center;
|
||||
justify-content:center; font-size:1.1rem; transition: transform var(--transition);
|
||||
}
|
||||
.accordion-trigger.open .icon { transform: rotate(45deg); background:rgba(255,255,255,0.15); }
|
||||
|
||||
.accordion-panel {
|
||||
max-height:0; overflow:hidden;
|
||||
transition: max-height 0.4s ease, padding var(--transition);
|
||||
padding: 0 1.5rem;
|
||||
background: var(--surface);
|
||||
}
|
||||
.accordion-panel.open { max-height:600px; padding: 1.5rem; }
|
||||
|
||||
.accordion-panel .questions { margin-top:1rem; }
|
||||
.accordion-panel .questions li { font-size:0.88rem; color:var(--text-sub); margin-bottom:0.4rem; padding-left:1rem; border-left:2px solid var(--green); }
|
||||
|
||||
.accordion-panel .paths { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:1rem; }
|
||||
.path-chip {
|
||||
padding:0.35rem 0.9rem; border-radius:99px;
|
||||
background:rgba(41,185,154,0.12); color:var(--green);
|
||||
font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.07em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Por desafío</p>
|
||||
<h1>¿Qué está pasando en tu organización?</h1>
|
||||
<p>No siempre se sabe exactamente qué se necesita. Elegí el desafío que más resuena con tu situación y encontremos juntos el camino.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<div class="container" style="max-width:800px;">
|
||||
|
||||
<div class="accordion-item fade-in">
|
||||
<button class="accordion-trigger">
|
||||
<span>🔄 Transformar la organización</span>
|
||||
<span class="icon">+</span>
|
||||
</button>
|
||||
<div class="accordion-panel">
|
||||
<p>La organización crece, cambia de contexto o necesita reinventarse, pero los cambios no terminan de consolidarse.</p>
|
||||
<div class="questions">
|
||||
<ul>
|
||||
<li>¿Los procesos actuales frenan en lugar de habilitar?</li>
|
||||
<li>¿El liderazgo y la cultura van en direcciones distintas?</li>
|
||||
<li>¿Los cambios se inician pero no se sostienen en el tiempo?</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="paths">
|
||||
<span class="path-chip">Excellence</span>
|
||||
<span class="path-chip">Academy</span>
|
||||
<span class="path-chip">Digital</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Hablemos de este desafío</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item fade-in">
|
||||
<button class="accordion-trigger">
|
||||
<span>📊 Mejorar la gestión</span>
|
||||
<span class="icon">+</span>
|
||||
</button>
|
||||
<div class="accordion-panel">
|
||||
<p>Las operaciones funcionan, pero sin la eficiencia ni la visibilidad necesarias para tomar buenas decisiones.</p>
|
||||
<div class="questions">
|
||||
<ul>
|
||||
<li>¿Los proyectos se desvían de plazos y presupuestos frecuentemente?</li>
|
||||
<li>¿Hay duplicación de esfuerzos o tareas que no agregan valor?</li>
|
||||
<li>¿La información para decidir llega tarde o incompleta?</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="paths">
|
||||
<span class="path-chip">Project</span>
|
||||
<span class="path-chip">Excellence</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Hablemos de este desafío</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item fade-in">
|
||||
<button class="accordion-trigger">
|
||||
<span>🤖 Incorporar tecnología e IA</span>
|
||||
<span class="icon">+</span>
|
||||
</button>
|
||||
<div class="accordion-panel">
|
||||
<p>La organización quiere aprovechar la tecnología y la inteligencia artificial, pero sin claridad sobre por dónde empezar.</p>
|
||||
<div class="questions">
|
||||
<ul>
|
||||
<li>¿Se adoptan herramientas digitales sin estrategia clara?</li>
|
||||
<li>¿Los equipos no saben cómo integrar IA en sus flujos reales?</li>
|
||||
<li>¿La tecnología suma complejidad en lugar de simplificar?</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="paths">
|
||||
<span class="path-chip">Digital</span>
|
||||
<span class="path-chip">Academy</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Hablemos de este desafío</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item fade-in">
|
||||
<button class="accordion-trigger">
|
||||
<span>🎓 Desarrollar capacidades del equipo</span>
|
||||
<span class="icon">+</span>
|
||||
</button>
|
||||
<div class="accordion-panel">
|
||||
<p>La organización necesita que sus personas crezcan para poder acompañar los cambios estratégicos.</p>
|
||||
<div class="questions">
|
||||
<ul>
|
||||
<li>¿Hay brechas de habilidades que frenan la ejecución?</li>
|
||||
<li>¿Los líderes intermedios no tienen las herramientas para gestionar el cambio?</li>
|
||||
<li>¿La formación actual no está alineada con los desafíos reales?</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="paths">
|
||||
<span class="path-chip">Academy</span>
|
||||
<span class="path-chip">Excellence</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Hablemos de este desafío</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item fade-in">
|
||||
<button class="accordion-trigger">
|
||||
<span>✅ Implementar o certificar una norma</span>
|
||||
<span class="icon">+</span>
|
||||
</button>
|
||||
<div class="accordion-panel">
|
||||
<p>La organización necesita implementar o certificar una norma ISO pero quiere que sea un proceso que agregue valor real y no solo burocracia.</p>
|
||||
<div class="questions">
|
||||
<ul>
|
||||
<li>¿La norma es un requisito de cliente o mercado?</li>
|
||||
<li>¿Hubo intentos previos que no prosperaron?</li>
|
||||
<li>¿El equipo no sabe por dónde empezar?</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="paths">
|
||||
<span class="path-chip">Excellence</span>
|
||||
<span class="path-chip">Academy</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Hablemos de este desafío</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--dark text-center">
|
||||
<div class="container fade-in">
|
||||
<h2>¿Tu desafío no está en la lista?</h2>
|
||||
<p style="margin:1rem auto 2rem;">Contanos en tus propias palabras y lo exploramos juntos.</p>
|
||||
<a href="contacto.html" class="btn btn--white">Hablemos</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="footer-slot"></div>
|
||||
<script src="layout.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+199
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ecosistema – IDE Consultores</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<style>
|
||||
.eco-detail {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 3rem;
|
||||
align-items: start;
|
||||
padding-block: 3.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.eco-detail:last-child { border-bottom: none; }
|
||||
|
||||
.eco-detail__label {
|
||||
font-family: var(--font-display);
|
||||
font-size: 3.5rem;
|
||||
color: var(--teal-dark);
|
||||
line-height: 1;
|
||||
}
|
||||
[data-theme="dark"] .eco-detail__label { color: var(--green); }
|
||||
.eco-detail__sub {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--green);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.eco-detail__content h3 { margin-bottom: 0.75rem; color: var(--text); }
|
||||
.eco-detail__content ul { padding-left: 1.2rem; margin-top: 0.75rem; }
|
||||
.eco-detail__content li { font-size: 0.88rem; color: var(--text-sub); margin-bottom: 0.35rem; }
|
||||
|
||||
.network-diagram {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.eco-detail { grid-template-columns: 1fr; gap: 1rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<p class="eyebrow">El cómo</p>
|
||||
<h1>El Ecosistema IDE</h1>
|
||||
<p>Cuatro capacidades complementarias que se articulan según lo que cada organización necesita. No todos los desafíos requieren todo el ecosistema, pero todos se benefician de una mirada que comprende el conjunto.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- DIAGRAMA VISUAL -->
|
||||
<section class="section section--surface">
|
||||
<div class="container text-center fade-in">
|
||||
<p class="eyebrow">Visión sistémica</p>
|
||||
<h2>Capacidades que se conectan, no que se suman.</h2>
|
||||
<div class="network-diagram">
|
||||
<svg width="400" height="340" viewBox="0 0 400 340" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Connections -->
|
||||
<line x1="200" y1="80" x2="80" y2="200" stroke="#29B99A" stroke-width="1.5" stroke-dasharray="5 4" opacity="0.6"/>
|
||||
<line x1="200" y1="80" x2="320" y2="200" stroke="#29B99A" stroke-width="1.5" stroke-dasharray="5 4" opacity="0.6"/>
|
||||
<line x1="80" y1="200" x2="200" y2="290" stroke="#29B99A" stroke-width="1.5" stroke-dasharray="5 4" opacity="0.6"/>
|
||||
<line x1="320" y1="200" x2="200" y2="290" stroke="#29B99A" stroke-width="1.5" stroke-dasharray="5 4" opacity="0.6"/>
|
||||
<line x1="80" y1="200" x2="320" y2="200" stroke="#29B99A" stroke-width="1" stroke-dasharray="5 4" opacity="0.35"/>
|
||||
<line x1="200" y1="80" x2="200" y2="290" stroke="#29B99A" stroke-width="1" stroke-dasharray="5 4" opacity="0.25"/>
|
||||
<!-- Nodes -->
|
||||
<circle cx="200" cy="80" r="42" fill="#1B5E6E" opacity="0.9"/>
|
||||
<circle cx="80" cy="200" r="38" fill="#29B99A" opacity="0.85"/>
|
||||
<circle cx="320" cy="200" r="38" fill="#29B99A" opacity="0.85"/>
|
||||
<circle cx="200" cy="290" r="38" fill="#1B5E6E" opacity="0.75"/>
|
||||
<!-- Labels -->
|
||||
<text x="200" y="76" text-anchor="middle" font-family="'Bebas Neue',sans-serif" font-size="16" fill="white" letter-spacing="1">Excellence</text>
|
||||
<text x="200" y="92" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="rgba(255,255,255,0.7)">Gestión · Calidad</text>
|
||||
<text x="80" y="196" text-anchor="middle" font-family="'Bebas Neue',sans-serif" font-size="16" fill="white" letter-spacing="1">Project</text>
|
||||
<text x="80" y="212" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="rgba(255,255,255,0.7)">PMO · Dirección</text>
|
||||
<text x="320" y="196" text-anchor="middle" font-family="'Bebas Neue',sans-serif" font-size="16" fill="white" letter-spacing="1">Digital</text>
|
||||
<text x="320" y="212" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="rgba(255,255,255,0.7)">Tech · IA</text>
|
||||
<text x="200" y="286" text-anchor="middle" font-family="'Bebas Neue',sans-serif" font-size="16" fill="white" letter-spacing="1">Academy</text>
|
||||
<text x="200" y="302" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="rgba(255,255,255,0.7)">Formación</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DETALLE DE CADA CAPACIDAD -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="eco-detail fade-in">
|
||||
<div>
|
||||
<div class="eco-detail__label">Excellence</div>
|
||||
<div class="eco-detail__sub">Gestión & Calidad</div>
|
||||
</div>
|
||||
<div class="eco-detail__content">
|
||||
<h3>Sistemas de gestión que realmente funcionan</h3>
|
||||
<p>Diseñamos e implementamos sistemas de gestión basados en normas internacionales (ISO 9001, 14001, 45001 y más) con foco en el valor que generan, no solo en el cumplimiento formal.</p>
|
||||
<ul>
|
||||
<li>Implementación y certificación ISO</li>
|
||||
<li>Mejora continua de procesos</li>
|
||||
<li>Auditorías internas y diagnósticos</li>
|
||||
<li>Gestión de riesgos organizacionales</li>
|
||||
</ul>
|
||||
<div class="mt-1">
|
||||
<a href="soluciones.html" class="btn btn--ghost">Ver soluciones Excellence</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eco-detail fade-in">
|
||||
<div>
|
||||
<div class="eco-detail__label">Project</div>
|
||||
<div class="eco-detail__sub">Dirección & PMO</div>
|
||||
</div>
|
||||
<div class="eco-detail__content">
|
||||
<h3>Proyectos que llegan a destino</h3>
|
||||
<p>Diseñamos estructuras de gestión de proyectos (PMOs) y acompañamos la dirección de proyectos estratégicos para que se entreguen en tiempo, costo y con los resultados esperados.</p>
|
||||
<ul>
|
||||
<li>Diseño e implementación de PMO</li>
|
||||
<li>Dirección de proyectos estratégicos</li>
|
||||
<li>Metodologías ágiles, predictivas e híbridas</li>
|
||||
<li>Capacitación en gestión de proyectos</li>
|
||||
</ul>
|
||||
<div class="mt-1">
|
||||
<a href="soluciones.html" class="btn btn--ghost">Ver soluciones Project</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eco-detail fade-in">
|
||||
<div>
|
||||
<div class="eco-detail__label">Academy</div>
|
||||
<div class="eco-detail__sub">Formación & Desarrollo</div>
|
||||
</div>
|
||||
<div class="eco-detail__content">
|
||||
<h3>Capacidades que hacen posible la transformación</h3>
|
||||
<p>La transformación sostenible requiere que las personas de la organización desarrollen nuevas habilidades. IDE Academy diseña programas de formación alineados con los desafíos reales.</p>
|
||||
<ul>
|
||||
<li>Formación In Company a medida</li>
|
||||
<li>Cursos abiertos en gestión e ISO</li>
|
||||
<li>Talleres de liderazgo y cambio organizacional</li>
|
||||
<li>Programas de IA para equipos no técnicos</li>
|
||||
</ul>
|
||||
<div class="mt-1">
|
||||
<a href="academy.html" class="btn btn--ghost">Conocer IDE Academy</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eco-detail fade-in">
|
||||
<div>
|
||||
<div class="eco-detail__label">Digital</div>
|
||||
<div class="eco-detail__sub">Tecnología & IA</div>
|
||||
</div>
|
||||
<div class="eco-detail__content">
|
||||
<h3>Tecnología aplicada con propósito</h3>
|
||||
<p>Ayudamos a las organizaciones a identificar dónde la tecnología y la inteligencia artificial realmente generan valor, y acompañamos su implementación desde la estrategia hasta la operación.</p>
|
||||
<ul>
|
||||
<li>Diagnóstico de madurez digital</li>
|
||||
<li>Casos de uso de IA en operaciones</li>
|
||||
<li>Automatización de procesos</li>
|
||||
<li>Hoja de ruta de transformación digital</li>
|
||||
</ul>
|
||||
<div class="mt-1">
|
||||
<a href="soluciones.html" class="btn btn--ghost">Ver soluciones Digital</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--dark text-center">
|
||||
<div class="container fade-in">
|
||||
<h2>¿Cuántas capacidades necesita tu organización?</h2>
|
||||
<p style="margin:1rem auto 2rem;">Empecemos con un diagnóstico y lo definimos juntos.</p>
|
||||
<a href="contacto.html" class="btn btn--white">Hablemos</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="footer-slot"></div>
|
||||
<script src="layout.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+170
@@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>IDE Consultores – Inicio</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero hero--centered section">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Todo está conectado</p>
|
||||
<h1>Mejorar una parte no siempre mejora el todo.</h1>
|
||||
<div class="divider divider--center"></div>
|
||||
<p style="font-size:1.05rem; max-width:54ch;">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 class="hero__entry-cards mt-2">
|
||||
<a href="desafios.html" class="entry-card">
|
||||
<div class="label">Tengo un desafío</div>
|
||||
<p>Algo no funciona como debería, pero no sé exactamente qué necesito.</p>
|
||||
</a>
|
||||
<a href="soluciones.html" class="entry-card">
|
||||
<div class="label">Busco una solución</div>
|
||||
<p>Necesito ISO, una PMO, formación o transformación digital.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LA TENSIÓN -->
|
||||
<section class="section section--surface">
|
||||
<div class="container">
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;">
|
||||
<div class="fade-in">
|
||||
<p class="eyebrow">El problema real</p>
|
||||
<h2>Soluciones aisladas para problemas que nunca estuvieron realmente aislados.</h2>
|
||||
<div class="divider"></div>
|
||||
<p>Las organizaciones ya tienen procesos, herramientas y personas. Sin embargo, algunos desafíos persisten. La raíz rara vez está donde parece.</p>
|
||||
</div>
|
||||
<!-- Gráfico minimalista SVG -->
|
||||
<div class="fade-in" style="display:flex; justify-content:center;">
|
||||
<svg width="260" height="200" viewBox="0 0 260 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Nodos desconectados (problema) -->
|
||||
<circle cx="50" cy="60" r="18" fill="#9E9E9E" opacity="0.35"/>
|
||||
<circle cx="130" cy="40" r="18" fill="#9E9E9E" opacity="0.35"/>
|
||||
<circle cx="210" cy="60" r="18" fill="#9E9E9E" opacity="0.35"/>
|
||||
<!-- Nodos conectados (IDE) -->
|
||||
<circle cx="50" cy="148" r="18" fill="#29B99A" opacity="0.8"/>
|
||||
<circle cx="130" cy="128" r="18" fill="#1B5E6E" opacity="0.9"/>
|
||||
<circle cx="210" cy="148" r="18" fill="#29B99A" opacity="0.8"/>
|
||||
<line x1="50" y1="148" x2="130" y2="128" stroke="#29B99A" stroke-width="2.5"/>
|
||||
<line x1="130" y1="128" x2="210" y2="148" stroke="#29B99A" stroke-width="2.5"/>
|
||||
<line x1="50" y1="148" x2="210" y2="148" stroke="#29B99A" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<!-- Labels -->
|
||||
<text x="130" y="190" text-anchor="middle" font-size="10" fill="#29B99A" font-family="Inter,sans-serif">Sistema conectado</text>
|
||||
<text x="130" y="22" text-anchor="middle" font-size="10" fill="#9E9E9E" font-family="Inter,sans-serif">Partes aisladas</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- METODOLOGÍA -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-3 fade-in">
|
||||
<p class="eyebrow">Principio IDE</p>
|
||||
<h2>Comprender el todo para saber dónde intervenir.</h2>
|
||||
</div>
|
||||
<div class="process-steps fade-in">
|
||||
<div class="step">
|
||||
<div class="step__num">01</div>
|
||||
<div class="step__text">
|
||||
<h3>Comprender</h3>
|
||||
<p>Mapeo sistémico de la organización y su contexto.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__num">02</div>
|
||||
<div class="step__text">
|
||||
<h3>Focalizar</h3>
|
||||
<p>Identificar dónde intervenir genera mayor impacto.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__num">03</div>
|
||||
<div class="step__text">
|
||||
<h3>Integrar</h3>
|
||||
<p>Conectar capacidades del ecosistema IDE con precisión.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__num">04</div>
|
||||
<div class="step__text">
|
||||
<h3>Transformar</h3>
|
||||
<p>Resultados sostenibles que fortalecen el sistema.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ECOSISTEMA -->
|
||||
<section class="section section--surface">
|
||||
<div class="container">
|
||||
<div class="text-center mb-3 fade-in">
|
||||
<p class="eyebrow">Ecosistema IDE</p>
|
||||
<h2>No se trata de sumar soluciones. Se trata de conectar capacidades.</h2>
|
||||
</div>
|
||||
<div class="grid-4 fade-in">
|
||||
<a href="ecosistema.html" class="eco-card">
|
||||
<div class="eco-card__name">Excellence</div>
|
||||
<div class="eco-card__sub">Sistemas de gestión y mejora continua.</div>
|
||||
</a>
|
||||
<a href="ecosistema.html" class="eco-card">
|
||||
<div class="eco-card__name">Project</div>
|
||||
<div class="eco-card__sub">Gestión de proyectos y PMO.</div>
|
||||
</a>
|
||||
<a href="academy.html" class="eco-card">
|
||||
<div class="eco-card__name">Academy</div>
|
||||
<div class="eco-card__sub">Desarrollo de capacidades organizacionales.</div>
|
||||
</a>
|
||||
<a href="ecosistema.html" class="eco-card">
|
||||
<div class="eco-card__name">Digital</div>
|
||||
<div class="eco-card__sub">Transformación digital e inteligencia artificial.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTORES -->
|
||||
<section class="section">
|
||||
<div class="container fade-in">
|
||||
<p class="eyebrow">Sectores</p>
|
||||
<h2 class="mb-2">Acompañamos la transformación en contextos complejos.</h2>
|
||||
<div class="sectors">
|
||||
<div class="sector-pill">🌾 Agro</div>
|
||||
<div class="sector-pill">🏥 Salud</div>
|
||||
<div class="sector-pill">🎓 Educación</div>
|
||||
<div class="sector-pill">🏭 Industria</div>
|
||||
<div class="sector-pill">🏗️ Infraestructura</div>
|
||||
<div class="sector-pill">⚡ Energía</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA FINAL -->
|
||||
<section class="section section--dark text-center">
|
||||
<div class="container fade-in">
|
||||
<p class="eyebrow">¿Empezamos?</p>
|
||||
<h2>¿Qué desafío querés transformar?</h2>
|
||||
<p style="margin:1rem auto 2rem; max-width:42ch;">Empecemos por entenderlo.</p>
|
||||
<a href="contacto.html" class="btn btn--white">Hablemos</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="footer-slot"></div>
|
||||
|
||||
<script src="layout.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Insights – IDE Consultores</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Insights</p>
|
||||
<h1>Conocimiento desde la práctica.</h1>
|
||||
<p>Artículos, reflexiones y recursos generados por el equipo IDE a partir del trabajo con organizaciones reales.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<!-- Banner de integración con WordPress -->
|
||||
<div style="background:rgba(41,185,154,0.08); border:1px solid rgba(41,185,154,0.25); border-radius:var(--radius-lg); padding:1rem 1.5rem; margin-bottom:2.5rem; display:flex; align-items:center; gap:1rem;">
|
||||
<span style="font-size:1.4rem;">⚡</span>
|
||||
<p style="font-size:0.85rem; margin:0; max-width:none;">
|
||||
<strong style="color:var(--text);">Integración WordPress activa en producción.</strong>
|
||||
Esta sección cargará automáticamente las últimas 3 publicaciones del blog en <code style="font-size:0.82rem; background:var(--surface); padding:2px 6px; border-radius:4px;">blog.ideconsultores.com.ar</code> vía API REST.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Artículos demo (datos de relleno) -->
|
||||
<div class="grid-3 fade-in">
|
||||
|
||||
<div class="blog-card">
|
||||
<div class="blog-card__img">📊</div>
|
||||
<div class="blog-card__body">
|
||||
<div class="blog-card__meta">12 Ago 2025 · Excellence</div>
|
||||
<div class="blog-card__title">¿Por qué el 60% de las implementaciones ISO fallan antes de la primera auditoría?</div>
|
||||
<p class="blog-card__excerpt">La norma no es el problema. El problema es abordar la implementación como un proyecto de documentación en lugar de un proceso de transformación organizacional.</p>
|
||||
<div class="mt-1"><a href="#" class="btn btn--ghost" style="font-size:0.82rem;">Leer artículo</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="blog-card">
|
||||
<div class="blog-card__img">🤖</div>
|
||||
<div class="blog-card__body">
|
||||
<div class="blog-card__meta">28 Jul 2025 · Digital</div>
|
||||
<div class="blog-card__title">IA en organizaciones medianas: dónde empezar sin perderse</div>
|
||||
<p class="blog-card__excerpt">La inteligencia artificial no es territorio exclusivo de las grandes empresas. Tres criterios para identificar el primer caso de uso que vale la pena implementar.</p>
|
||||
<div class="mt-1"><a href="#" class="btn btn--ghost" style="font-size:0.82rem;">Leer artículo</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="blog-card">
|
||||
<div class="blog-card__img">📌</div>
|
||||
<div class="blog-card__body">
|
||||
<div class="blog-card__meta">10 Jul 2025 · Project</div>
|
||||
<div class="blog-card__title">PMO: el error más común al implementarla y cómo evitarlo</div>
|
||||
<p class="blog-card__excerpt">Crear una PMO sin diagnóstico previo de la madurez en gestión de proyectos es el camino más corto para generar resistencia interna y resultados mediocres.</p>
|
||||
<div class="mt-1"><a href="#" class="btn btn--ghost" style="font-size:0.82rem;">Leer artículo</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-3 fade-in">
|
||||
<p style="font-size:0.9rem; margin-bottom:1.25rem;">¿Querés leer más artículos sobre gestión, ISO, proyectos e IA?</p>
|
||||
<a href="https://blog.ideconsultores.com.ar" target="_blank" class="btn btn--outline">Ver todos los artículos en el Blog →</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Newsletter simple -->
|
||||
<section class="section section--surface">
|
||||
<div class="container" style="max-width:600px; text-align:center;">
|
||||
<div class="fade-in">
|
||||
<p class="eyebrow">Novedades</p>
|
||||
<h2>Recibí los próximos insights.</h2>
|
||||
<p class="mt-1" style="margin-inline:auto;">Artículos, recursos y reflexiones del equipo IDE, sin spam.</p>
|
||||
<div style="display:flex; gap:0.75rem; margin-top:1.75rem; flex-wrap:wrap; justify-content:center;">
|
||||
<input type="email" placeholder="tu@email.com" style="padding:0.65rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font-body); font-size:0.9rem; background:var(--bg); color:var(--text); min-width:240px;" />
|
||||
<button class="btn btn--primary">Suscribirme</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="footer-slot"></div>
|
||||
<script src="layout.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
/* ── NAVBAR ─────────────────────────────────────────────────── */
|
||||
const NAVBAR_HTML = `
|
||||
<nav class="navbar">
|
||||
<div class="container navbar__inner">
|
||||
<a href="index.html" class="navbar__brand">ide<span class="dot">.</span></a>
|
||||
|
||||
<ul class="navbar__links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="somos-ide.html">Somos IDE</a></li>
|
||||
<li><a href="desafios.html">Desafíos</a></li>
|
||||
<li><a href="soluciones.html">Soluciones</a></li>
|
||||
<li><a href="ecosistema.html">Ecosistema</a></li>
|
||||
<li><a href="academy.html">Academy</a></li>
|
||||
<li><a href="insights.html">Insights</a></li>
|
||||
<li><a href="contacto.html">Contacto</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="navbar__actions">
|
||||
<button class="theme-toggle">☾ Oscuro</button>
|
||||
<button class="hamburger" aria-label="Menú">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="mobile-menu">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="somos-ide.html">Somos IDE</a>
|
||||
<a href="desafios.html">Desafíos</a>
|
||||
<a href="soluciones.html">Soluciones</a>
|
||||
<a href="ecosistema.html">Ecosistema</a>
|
||||
<a href="academy.html">Academy</a>
|
||||
<a href="insights.html">Insights</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
/* ── FOOTER ─────────────────────────────────────────────────── */
|
||||
const FOOTER_HTML = `
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer__grid">
|
||||
<div>
|
||||
<div class="footer__brand">ide<span>.</span></div>
|
||||
<p class="footer__tagline">Comprender el todo para saber dónde intervenir.</p>
|
||||
</div>
|
||||
<div class="footer__col">
|
||||
<h4>Empresa</h4>
|
||||
<ul>
|
||||
<li><a href="somos-ide.html">Somos IDE</a></li>
|
||||
<li><a href="ecosistema.html">Ecosistema</a></li>
|
||||
<li><a href="insights.html">Insights</a></li>
|
||||
<li><a href="trabaja.html">Trabaja con nosotros</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__col">
|
||||
<h4>Servicios</h4>
|
||||
<ul>
|
||||
<li><a href="desafios.html">Por desafío</a></li>
|
||||
<li><a href="soluciones.html">Por solución</a></li>
|
||||
<li><a href="academy.html">IDE Academy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__col">
|
||||
<h4>Contacto</h4>
|
||||
<ul>
|
||||
<li><a href="contacto.html">Formulario de contacto</a></li>
|
||||
<li><a href="https://wa.me/5491100000000" target="_blank">WhatsApp</a></li>
|
||||
<li><a href="mailto:info@ideconsultores.com.ar">info@ideconsultores.com.ar</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bottom">
|
||||
<span>© ${new Date().getFullYear()} IDE Consultores. Todos los derechos reservados.</span>
|
||||
<span>Diseño en desarrollo – Demo v1</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
`;
|
||||
|
||||
/* ── INJECT ──────────────────────────────────────────────────── */
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const navSlot = document.getElementById('navbar-slot');
|
||||
const footerSlot = document.getElementById('footer-slot');
|
||||
if (navSlot) navSlot.innerHTML = NAVBAR_HTML;
|
||||
if (footerSlot) footerSlot.innerHTML = FOOTER_HTML;
|
||||
});
|
||||
+178
@@ -0,0 +1,178 @@
|
||||
/* ============================================================
|
||||
IDE CONSULTORES – SCRIPTS GLOBALES
|
||||
============================================================ */
|
||||
|
||||
/* ── THEME TOGGLE ──────────────────────────────────────────── */
|
||||
(function () {
|
||||
const stored = localStorage.getItem('ide-theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', stored);
|
||||
})();
|
||||
|
||||
function initThemeToggle() {
|
||||
const btn = document.querySelector('.theme-toggle');
|
||||
if (!btn) return;
|
||||
|
||||
function updateBtn() {
|
||||
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
||||
btn.textContent = isDark ? '☀ Claro' : '☾ Oscuro';
|
||||
}
|
||||
|
||||
updateBtn();
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
const current = document.documentElement.getAttribute('data-theme');
|
||||
const next = current === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
localStorage.setItem('ide-theme', next);
|
||||
updateBtn();
|
||||
});
|
||||
}
|
||||
|
||||
/* ── HAMBURGER MENU ─────────────────────────────────────────── */
|
||||
function initHamburger() {
|
||||
const btn = document.querySelector('.hamburger');
|
||||
const menu = document.querySelector('.mobile-menu');
|
||||
if (!btn || !menu) return;
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
menu.classList.toggle('open');
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!btn.contains(e.target) && !menu.contains(e.target)) {
|
||||
menu.classList.remove('open');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ── ACTIVE NAV LINK ─────────────────────────────────────────── */
|
||||
function initActiveNav() {
|
||||
const path = window.location.pathname.split('/').pop() || 'index.html';
|
||||
document.querySelectorAll('.navbar__links a, .mobile-menu a').forEach(a => {
|
||||
const href = a.getAttribute('href');
|
||||
if (href === path) a.classList.add('active');
|
||||
});
|
||||
}
|
||||
|
||||
/* ── SCROLL FADE-IN ─────────────────────────────────────────── */
|
||||
function initFadeIn() {
|
||||
const els = document.querySelectorAll('.fade-in');
|
||||
if (!els.length) return;
|
||||
|
||||
const obs = new IntersectionObserver((entries) => {
|
||||
entries.forEach(e => {
|
||||
if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
|
||||
});
|
||||
}, { threshold: 0.12 });
|
||||
|
||||
els.forEach(el => obs.observe(el));
|
||||
}
|
||||
|
||||
/* ── MODAL ────────────────────────────────────────────────────── */
|
||||
function openModal(id) {
|
||||
const overlay = document.getElementById(id);
|
||||
if (!overlay) return;
|
||||
overlay.classList.add('open');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
const overlay = document.getElementById(id);
|
||||
if (!overlay) return;
|
||||
overlay.classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
function initModals() {
|
||||
// Close on overlay click
|
||||
document.querySelectorAll('.modal-overlay').forEach(overlay => {
|
||||
overlay.addEventListener('click', (e) => {
|
||||
if (e.target === overlay) closeModal(overlay.id);
|
||||
});
|
||||
});
|
||||
// Close buttons
|
||||
document.querySelectorAll('.modal__close').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const overlay = btn.closest('.modal-overlay');
|
||||
if (overlay) closeModal(overlay.id);
|
||||
});
|
||||
});
|
||||
// Escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
document.querySelectorAll('.modal-overlay.open').forEach(o => closeModal(o.id));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ── CONTACT FORM ─────────────────────────────────────────────── */
|
||||
function initContactForm() {
|
||||
const form = document.querySelector('.contact-form');
|
||||
if (!form) return;
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const btn = form.querySelector('[type="submit"]');
|
||||
const original = btn.textContent;
|
||||
btn.textContent = '✓ ¡Enviado!';
|
||||
btn.disabled = true;
|
||||
btn.style.background = '#1E9A7F';
|
||||
setTimeout(() => {
|
||||
btn.textContent = original;
|
||||
btn.disabled = false;
|
||||
btn.style.background = '';
|
||||
form.reset();
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
/* ── ACCORDION / DESAFÍOS ─────────────────────────────────────── */
|
||||
function initAccordion() {
|
||||
document.querySelectorAll('.accordion-trigger').forEach(trigger => {
|
||||
trigger.addEventListener('click', () => {
|
||||
const panel = trigger.nextElementSibling;
|
||||
const isOpen = panel.classList.contains('open');
|
||||
|
||||
// Close all
|
||||
document.querySelectorAll('.accordion-panel').forEach(p => p.classList.remove('open'));
|
||||
document.querySelectorAll('.accordion-trigger').forEach(t => t.classList.remove('open'));
|
||||
|
||||
if (!isOpen) {
|
||||
panel.classList.add('open');
|
||||
trigger.classList.add('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ── FILTER TABS ──────────────────────────────────────────────── */
|
||||
function initFilterTabs() {
|
||||
document.querySelectorAll('.filter-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
const group = tab.closest('.filter-tabs');
|
||||
group.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
|
||||
const filter = tab.dataset.filter;
|
||||
document.querySelectorAll('.filterable').forEach(item => {
|
||||
if (filter === 'all' || item.dataset.cat === filter) {
|
||||
item.style.display = '';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ── INIT ─────────────────────────────────────────────────────── */
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initThemeToggle();
|
||||
initHamburger();
|
||||
initActiveNav();
|
||||
initFadeIn();
|
||||
initModals();
|
||||
initContactForm();
|
||||
initAccordion();
|
||||
initFilterTabs();
|
||||
});
|
||||
+220
@@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Soluciones – IDE Consultores</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<style>
|
||||
.filter-tabs { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:2.5rem; }
|
||||
.filter-tab {
|
||||
padding:0.45rem 1.1rem; border-radius:99px;
|
||||
border:1.5px solid var(--border); background:var(--bg);
|
||||
font-size:0.82rem; font-weight:600; cursor:pointer; color:var(--text-sub);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.filter-tab:hover { border-color:var(--green); color:var(--green); }
|
||||
.filter-tab.active { background:var(--green); border-color:var(--green); color:var(--white); }
|
||||
|
||||
.sol-card { cursor:pointer; }
|
||||
.sol-card h3 { color:var(--text); margin-bottom:0.4rem; }
|
||||
.sol-card .tag { margin-bottom:0.75rem; }
|
||||
|
||||
/* Modal detail */
|
||||
.modal-section { margin-top:1.25rem; }
|
||||
.modal-section h4 { font-size:0.78rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--green); margin-bottom:0.5rem; }
|
||||
.modal-section p, .modal-section li { font-size:0.9rem; }
|
||||
.modal-section ul { padding-left:1.2rem; }
|
||||
.modal-section li { margin-bottom:0.3rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Por solución</p>
|
||||
<h1>Encontrá exactamente lo que buscás.</h1>
|
||||
<p>Si ya sabés qué necesita tu organización, aquí está la respuesta concreta.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="filter-tabs">
|
||||
<button class="filter-tab active" data-filter="all">Todas</button>
|
||||
<button class="filter-tab" data-filter="excellence">Excellence</button>
|
||||
<button class="filter-tab" data-filter="project">Project</button>
|
||||
<button class="filter-tab" data-filter="digital">Digital</button>
|
||||
<button class="filter-tab" data-filter="academy">Academy</button>
|
||||
</div>
|
||||
|
||||
<div class="grid-3">
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="excellence" onclick="openModal('modal-iso9001')">
|
||||
<div class="card__tag">Excellence</div>
|
||||
<h3>ISO 9001 – Calidad</h3>
|
||||
<p style="font-size:0.88rem;">Implementación y certificación del sistema de gestión de calidad. Diseñado para agregar valor, no solo cumplir requisitos.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="excellence" onclick="openModal('modal-iso14001')">
|
||||
<div class="card__tag">Excellence</div>
|
||||
<h3>ISO 14001 – Ambiente</h3>
|
||||
<p style="font-size:0.88rem;">Sistema de gestión ambiental. Cumplimiento normativo y estrategia de sustentabilidad integrada.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="excellence" onclick="openModal('modal-iso45001')">
|
||||
<div class="card__tag">Excellence</div>
|
||||
<h3>ISO 45001 – SST</h3>
|
||||
<p style="font-size:0.88rem;">Seguridad y salud en el trabajo. Reducción de riesgos y cultura preventiva.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="project" onclick="openModal('modal-pmo')">
|
||||
<div class="card__tag">Project</div>
|
||||
<h3>Implementación de PMO</h3>
|
||||
<p style="font-size:0.88rem;">Diseño y puesta en marcha de oficinas de gestión de proyectos adaptadas al contexto de cada organización.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="project" onclick="openModal('modal-pm')">
|
||||
<div class="card__tag">Project</div>
|
||||
<h3>Gestión de Proyectos</h3>
|
||||
<p style="font-size:0.88rem;">Acompañamiento en la dirección y control de proyectos estratégicos o de transformación.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="digital" onclick="openModal('modal-ia')">
|
||||
<div class="card__tag">Digital</div>
|
||||
<h3>Transformación Digital e IA</h3>
|
||||
<p style="font-size:0.88rem;">Diagnóstico, hoja de ruta e implementación de soluciones de inteligencia artificial aplicadas a procesos reales.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="academy" onclick="openModal('modal-academy')">
|
||||
<div class="card__tag">Academy</div>
|
||||
<h3>Formación In Company</h3>
|
||||
<p style="font-size:0.88rem;">Programas de formación a medida para equipos. Desde metodologías de gestión hasta liderazgo e IA.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="excellence" onclick="openModal('modal-mejora')">
|
||||
<div class="card__tag">Excellence</div>
|
||||
<h3>Mejora de Procesos</h3>
|
||||
<p style="font-size:0.88rem;">Mapeo, análisis y rediseño de procesos críticos para eliminar desperdicios y mejorar la eficiencia operativa.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="digital" onclick="openModal('modal-automatizacion')">
|
||||
<div class="card__tag">Digital</div>
|
||||
<h3>Automatización de Procesos</h3>
|
||||
<p style="font-size:0.88rem;">Identificación e implementación de automatizaciones que liberan tiempo y reducen errores operativos.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- MODALES -->
|
||||
|
||||
<div class="modal-overlay" id="modal-iso9001">
|
||||
<div class="modal">
|
||||
<button class="modal__close">×</button>
|
||||
<div class="card__tag">Excellence</div>
|
||||
<h2 style="font-size:1.6rem; margin-bottom:0;">ISO 9001 – Gestión de Calidad</h2>
|
||||
<div class="modal-section">
|
||||
<h4>¿Qué es?</h4>
|
||||
<p>La norma internacional de sistemas de gestión de la calidad. Define los requisitos para diseñar procesos orientados a la satisfacción del cliente y la mejora continua.</p>
|
||||
</div>
|
||||
<div class="modal-section">
|
||||
<h4>¿Para quién?</h4>
|
||||
<p>Cualquier organización que quiera ordenar sus operaciones, mejorar la consistencia de sus productos o servicios, y acceder a mercados que exigen la certificación.</p>
|
||||
</div>
|
||||
<div class="modal-section">
|
||||
<h4>Cómo intervenimos</h4>
|
||||
<ul>
|
||||
<li>Diagnóstico de brechas respecto a la norma</li>
|
||||
<li>Diseño e implementación del sistema de gestión</li>
|
||||
<li>Capacitación de auditores internos</li>
|
||||
<li>Acompañamiento hasta la certificación</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-section" style="background:rgba(41,185,154,0.07); padding:1rem; border-radius:var(--radius); border-left:3px solid var(--green);">
|
||||
<p style="font-size:0.85rem;"><strong>¿Sabías que</strong> un sistema de gestión de calidad también requiere desarrollar las capacidades del equipo? Conocé IDE Academy como complemento.</p>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por ISO 9001</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modal-pmo">
|
||||
<div class="modal">
|
||||
<button class="modal__close">×</button>
|
||||
<div class="card__tag">Project</div>
|
||||
<h2 style="font-size:1.6rem; margin-bottom:0;">Implementación de PMO</h2>
|
||||
<div class="modal-section">
|
||||
<h4>¿Qué es?</h4>
|
||||
<p>Una Oficina de Gestión de Proyectos (PMO) es la estructura que estandariza, controla y apoya la gestión de proyectos en una organización.</p>
|
||||
</div>
|
||||
<div class="modal-section">
|
||||
<h4>Cómo intervenimos</h4>
|
||||
<ul>
|
||||
<li>Diagnóstico de madurez en gestión de proyectos</li>
|
||||
<li>Diseño del modelo de PMO adecuado</li>
|
||||
<li>Definición de metodologías y herramientas</li>
|
||||
<li>Acompañamiento en la puesta en marcha</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por PMO</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modal-ia">
|
||||
<div class="modal">
|
||||
<button class="modal__close">×</button>
|
||||
<div class="card__tag">Digital</div>
|
||||
<h2 style="font-size:1.6rem; margin-bottom:0;">Transformación Digital e IA</h2>
|
||||
<div class="modal-section">
|
||||
<h4>¿Qué problema aborda?</h4>
|
||||
<p>Las organizaciones que incorporan tecnología sin estrategia generan complejidad, no eficiencia. Ayudamos a identificar dónde la IA y la digitalización realmente agregan valor.</p>
|
||||
</div>
|
||||
<div class="modal-section">
|
||||
<h4>Cómo intervenimos</h4>
|
||||
<ul>
|
||||
<li>Diagnóstico de madurez digital</li>
|
||||
<li>Hoja de ruta de transformación</li>
|
||||
<li>Identificación de casos de uso de IA</li>
|
||||
<li>Implementación y acompañamiento</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por Digital</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modales placeholder para el resto -->
|
||||
<div class="modal-overlay" id="modal-iso14001"><div class="modal"><button class="modal__close">×</button><div class="card__tag">Excellence</div><h2 style="font-size:1.6rem;">ISO 14001 – Ambiente</h2><p class="mt-1">Detalle completo disponible en la demo final. <a href="contacto.html" class="btn btn--primary" style="margin-top:1.5rem; display:inline-flex;">Consultar</a></p></div></div>
|
||||
<div class="modal-overlay" id="modal-iso45001"><div class="modal"><button class="modal__close">×</button><div class="card__tag">Excellence</div><h2 style="font-size:1.6rem;">ISO 45001 – SST</h2><p class="mt-1">Detalle completo disponible en la demo final. <a href="contacto.html" class="btn btn--primary" style="margin-top:1.5rem; display:inline-flex;">Consultar</a></p></div></div>
|
||||
<div class="modal-overlay" id="modal-pm"><div class="modal"><button class="modal__close">×</button><div class="card__tag">Project</div><h2 style="font-size:1.6rem;">Gestión de Proyectos</h2><p class="mt-1">Detalle completo disponible en la demo final. <a href="contacto.html" class="btn btn--primary" style="margin-top:1.5rem; display:inline-flex;">Consultar</a></p></div></div>
|
||||
<div class="modal-overlay" id="modal-academy"><div class="modal"><button class="modal__close">×</button><div class="card__tag">Academy</div><h2 style="font-size:1.6rem;">Formación In Company</h2><p class="mt-1">Detalle completo disponible en la demo final. <a href="academy.html" class="btn btn--primary" style="margin-top:1.5rem; display:inline-flex;">Ver Academy</a></p></div></div>
|
||||
<div class="modal-overlay" id="modal-mejora"><div class="modal"><button class="modal__close">×</button><div class="card__tag">Excellence</div><h2 style="font-size:1.6rem;">Mejora de Procesos</h2><p class="mt-1">Detalle completo disponible en la demo final. <a href="contacto.html" class="btn btn--primary" style="margin-top:1.5rem; display:inline-flex;">Consultar</a></p></div></div>
|
||||
<div class="modal-overlay" id="modal-automatizacion"><div class="modal"><button class="modal__close">×</button><div class="card__tag">Digital</div><h2 style="font-size:1.6rem;">Automatización</h2><p class="mt-1">Detalle completo disponible en la demo final. <a href="contacto.html" class="btn btn--primary" style="margin-top:1.5rem; display:inline-flex;">Consultar</a></p></div></div>
|
||||
|
||||
<div id="footer-slot"></div>
|
||||
<script src="layout.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+183
@@ -0,0 +1,183 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Somos IDE – IDE Consultores</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<style>
|
||||
.team-card { display:flex; gap:1rem; align-items:flex-start; }
|
||||
.team-card__avatar {
|
||||
width:56px; height:56px; border-radius:50%;
|
||||
background: linear-gradient(135deg, var(--teal-dark), var(--green));
|
||||
flex-shrink:0; display:flex; align-items:center; justify-content:center;
|
||||
font-family: var(--font-display); font-size:1.4rem; color:var(--white);
|
||||
}
|
||||
.team-card__info h3 { margin-bottom:0.2rem; }
|
||||
.team-card__info span { font-size:0.8rem; color:var(--green); font-weight:600; text-transform:uppercase; letter-spacing:0.08em; }
|
||||
.team-card__info p { font-size:0.85rem; margin-top:0.4rem; }
|
||||
|
||||
.value-item { display:flex; gap:1rem; }
|
||||
.value-item__dot { width:12px; height:12px; border-radius:50%; background:var(--green); flex-shrink:0; margin-top:6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Identidad</p>
|
||||
<h1>Somos IDE Consultores</h1>
|
||||
<p>Una consultora sistémica que combina rigor metodológico con comprensión profunda de las organizaciones.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- PROPÓSITO -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;">
|
||||
<div class="fade-in">
|
||||
<p class="eyebrow">Nuestro propósito</p>
|
||||
<h2>Transformar organizaciones comprendiendo su sistema.</h2>
|
||||
<div class="divider"></div>
|
||||
<p>Creemos que los desafíos organizacionales rara vez tienen una única causa. Por eso, antes de proponer una solución, nos tomamos el tiempo de comprender el todo.</p>
|
||||
<p class="mt-1">IDE nació con la convicción de que el conocimiento metodológico y la mirada sistémica son inseparables.</p>
|
||||
</div>
|
||||
<div class="fade-in">
|
||||
<p class="eyebrow">Nuestros valores</p>
|
||||
<div style="display:flex; flex-direction:column; gap:1.25rem; margin-top:0.5rem;">
|
||||
<div class="value-item">
|
||||
<div class="value-item__dot"></div>
|
||||
<div>
|
||||
<h3>Rigor sin rigidez</h3>
|
||||
<p style="font-size:0.88rem;">Metodología sólida aplicada con criterio y adaptabilidad.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-item">
|
||||
<div class="value-item__dot"></div>
|
||||
<div>
|
||||
<h3>Mirada sistémica</h3>
|
||||
<p style="font-size:0.88rem;">Ninguna parte se comprende fuera del todo en el que opera.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-item">
|
||||
<div class="value-item__dot"></div>
|
||||
<div>
|
||||
<h3>Compromiso real</h3>
|
||||
<p style="font-size:0.88rem;">Nos involucramos con los resultados, no solo con las entregas.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-item">
|
||||
<div class="value-item__dot"></div>
|
||||
<div>
|
||||
<h3>Transferencia de capacidades</h3>
|
||||
<p style="font-size:0.88rem;">El objetivo final es que la organización se fortalezca por sí misma.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- METODOLOGÍA -->
|
||||
<section class="section section--surface">
|
||||
<div class="container">
|
||||
<div class="text-center mb-3 fade-in">
|
||||
<p class="eyebrow">Metodología</p>
|
||||
<h2>Cómo trabajamos</h2>
|
||||
</div>
|
||||
<div class="process-steps fade-in">
|
||||
<div class="step">
|
||||
<div class="step__num">01</div>
|
||||
<div class="step__text">
|
||||
<h3>Comprender</h3>
|
||||
<p>Diagnóstico sistémico antes de proponer cualquier intervención.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__num">02</div>
|
||||
<div class="step__text">
|
||||
<h3>Focalizar</h3>
|
||||
<p>Identificamos los puntos de mayor palanca para el cambio.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__num">03</div>
|
||||
<div class="step__text">
|
||||
<h3>Integrar</h3>
|
||||
<p>Combinamos capacidades del ecosistema con precisión.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__num">04</div>
|
||||
<div class="step__text">
|
||||
<h3>Transformar</h3>
|
||||
<p>Resultados sostenibles que fortalecen el sistema.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- EQUIPO -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="fade-in mb-3">
|
||||
<p class="eyebrow">Equipo</p>
|
||||
<h2>Las personas detrás de IDE</h2>
|
||||
</div>
|
||||
<div class="grid-3 fade-in">
|
||||
<div class="card team-card" style="flex-direction:column; gap:1rem;">
|
||||
<div style="display:flex; gap:1rem; align-items:center;">
|
||||
<div class="team-card__avatar">JM</div>
|
||||
<div>
|
||||
<h3>Juan Martínez</h3>
|
||||
<span>Director General</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:0.85rem;">Especialista en sistemas de gestión y transformación organizacional. Más de 15 años acompañando organizaciones en procesos de cambio.</p>
|
||||
</div>
|
||||
<div class="card team-card" style="flex-direction:column; gap:1rem;">
|
||||
<div style="display:flex; gap:1rem; align-items:center;">
|
||||
<div class="team-card__avatar">LP</div>
|
||||
<div>
|
||||
<h3>Laura Peralta</h3>
|
||||
<span>Dirección de Proyectos</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:0.85rem;">PMP certificada. Diseña e implementa PMOs en organizaciones medianas y grandes. Experta en metodologías ágiles e híbridas.</p>
|
||||
</div>
|
||||
<div class="card team-card" style="flex-direction:column; gap:1rem;">
|
||||
<div style="display:flex; gap:1rem; align-items:center;">
|
||||
<div class="team-card__avatar">CR</div>
|
||||
<div>
|
||||
<h3>Carlos Ruiz</h3>
|
||||
<span>Digital & IA</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:0.85rem;">Lidera los procesos de transformación digital. Especialista en IA aplicada a operaciones y procesos de negocio.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="section section--dark text-center">
|
||||
<div class="container fade-in">
|
||||
<h2>¿Querés conocer más sobre IDE?</h2>
|
||||
<p style="margin:1rem auto 2rem;">Conversemos sobre tu organización y cómo podemos acompañarte.</p>
|
||||
<a href="contacto.html" class="btn btn--white">Hablemos</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="footer-slot"></div>
|
||||
<script src="layout.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+666
@@ -0,0 +1,666 @@
|
||||
/* ============================================================
|
||||
IDE CONSULTORES – ESTILOS GLOBALES
|
||||
Paleta de marca:
|
||||
--teal-dark: #1B5E6E (progreso, seriedad, verdad)
|
||||
--green: #29B99A (estabilidad, equilibrio, esperanza)
|
||||
--gray: #9E9E9E (tenacidad)
|
||||
Fuente: Bebas Neue (display) + Inter (cuerpo)
|
||||
============================================================ */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
/* ── TOKENS ─────────────────────────────────────────────── */
|
||||
:root {
|
||||
--teal-dark: #1B5E6E;
|
||||
--teal-mid: #1E7088;
|
||||
--green: #29B99A;
|
||||
--green-dark: #1E9A7F;
|
||||
--gray: #9E9E9E;
|
||||
--gray-light: #E8E8E8;
|
||||
--gray-off: #F5F5F5;
|
||||
--white: #FFFFFF;
|
||||
--text-main: #1A1A1A;
|
||||
--text-muted: #555555;
|
||||
|
||||
/* dark mode overrides */
|
||||
--bg: var(--white);
|
||||
--surface: var(--gray-off);
|
||||
--border: var(--gray-light);
|
||||
--text: var(--text-main);
|
||||
--text-sub: var(--text-muted);
|
||||
|
||||
--font-display: 'Bebas Neue', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
|
||||
--radius: 6px;
|
||||
--radius-lg: 12px;
|
||||
--shadow: 0 2px 12px rgba(0,0,0,0.07);
|
||||
--shadow-md: 0 4px 24px rgba(0,0,0,0.11);
|
||||
--transition: 0.3s ease;
|
||||
|
||||
--nav-h: 68px;
|
||||
}
|
||||
|
||||
/* ── DARK MODE ───────────────────────────────────────────── */
|
||||
[data-theme="dark"] {
|
||||
--bg: #1C2428;
|
||||
--surface: #26333A;
|
||||
--border: #334048;
|
||||
--text: #E8ECEE;
|
||||
--text-sub: #9AADB8;
|
||||
}
|
||||
|
||||
/* ── RESET & BASE ────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
transition: background var(--transition), color var(--transition);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main { flex: 1; padding-top: var(--nav-h); }
|
||||
|
||||
img { max-width: 100%; display: block; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
/* ── TYPOGRAPHY ──────────────────────────────────────────── */
|
||||
.display { font-family: var(--font-display); letter-spacing: 0.03em; line-height: 1; }
|
||||
|
||||
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-family: var(--font-display); letter-spacing: 0.03em; line-height: 1.05; }
|
||||
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-family: var(--font-display); letter-spacing: 0.03em; }
|
||||
h3 { font-size: 1.15rem; font-weight: 600; }
|
||||
p { color: var(--text-sub); max-width: 62ch; }
|
||||
|
||||
.eyebrow {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--green);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* ── LAYOUT ──────────────────────────────────────────────── */
|
||||
.container {
|
||||
width: min(1140px, 92%);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-block: 80px;
|
||||
}
|
||||
|
||||
.section--dark {
|
||||
background: var(--teal-dark);
|
||||
color: var(--white);
|
||||
}
|
||||
.section--dark p { color: rgba(255,255,255,0.75); }
|
||||
.section--dark h2 { color: var(--white); }
|
||||
|
||||
.section--surface {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
/* ── NAVBAR ──────────────────────────────────────────────── */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: var(--nav-h);
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
transition: background var(--transition), border-color var(--transition);
|
||||
}
|
||||
|
||||
.navbar__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar__brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.7rem;
|
||||
color: var(--teal-dark);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
[data-theme="dark"] .navbar__brand { color: var(--green); }
|
||||
|
||||
.navbar__brand span.dot { color: var(--green); }
|
||||
|
||||
.navbar__links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.navbar__links a {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-sub);
|
||||
transition: color var(--transition);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.navbar__links a:hover,
|
||||
.navbar__links a.active { color: var(--green); }
|
||||
|
||||
.navbar__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Theme toggle */
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-sub);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.theme-toggle:hover { border-color: var(--green); color: var(--green); }
|
||||
|
||||
/* Hamburger */
|
||||
.hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
.hamburger span {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: var(--text);
|
||||
border-radius: 2px;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
/* Mobile nav */
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: var(--nav-h);
|
||||
left: 0; right: 0;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 1.5rem;
|
||||
z-index: 999;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.mobile-menu.open { display: flex; }
|
||||
.mobile-menu a {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
padding-block: 0.4rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.mobile-menu a:last-child { border-bottom: none; }
|
||||
|
||||
/* ── BUTTONS ─────────────────────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.7rem 1.6rem;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background: var(--green);
|
||||
color: var(--white);
|
||||
border-color: var(--green);
|
||||
}
|
||||
.btn--primary:hover {
|
||||
background: var(--green-dark);
|
||||
border-color: var(--green-dark);
|
||||
}
|
||||
|
||||
.btn--outline {
|
||||
background: transparent;
|
||||
color: var(--teal-dark);
|
||||
border-color: var(--teal-dark);
|
||||
}
|
||||
[data-theme="dark"] .btn--outline { color: var(--green); border-color: var(--green); }
|
||||
.btn--outline:hover {
|
||||
background: var(--teal-dark);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn--ghost {
|
||||
background: transparent;
|
||||
color: var(--green);
|
||||
border-color: transparent;
|
||||
padding-inline: 0;
|
||||
}
|
||||
.btn--ghost:hover { color: var(--green-dark); }
|
||||
.btn--ghost::after { content: ' →'; }
|
||||
|
||||
.btn--white {
|
||||
background: var(--white);
|
||||
color: var(--teal-dark);
|
||||
border-color: var(--white);
|
||||
}
|
||||
.btn--white:hover { background: var(--gray-off); }
|
||||
|
||||
/* ── CARDS ───────────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.75rem;
|
||||
transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--green);
|
||||
}
|
||||
|
||||
.card__icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
background: rgba(41, 185, 154, 0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card__tag {
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--green);
|
||||
background: rgba(41,185,154,0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* ── GRID HELPERS ────────────────────────────────────────── */
|
||||
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
|
||||
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.grid-4 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid-3 { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ── HERO VARIANTS ───────────────────────────────────────── */
|
||||
.hero {
|
||||
padding-block: 96px 80px;
|
||||
}
|
||||
|
||||
.hero--centered {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero--centered p { margin-inline: auto; }
|
||||
|
||||
.hero__entry-cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
max-width: 700px;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.entry-card {
|
||||
border: 2px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
text-align: left;
|
||||
}
|
||||
.entry-card:hover {
|
||||
border-color: var(--green);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.entry-card .label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--green);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.entry-card p {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-sub);
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.hero__entry-cards { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ── PAGE HEADER ─────────────────────────────────────────── */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal-mid) 100%);
|
||||
padding-block: 72px;
|
||||
color: var(--white);
|
||||
}
|
||||
.page-header h1 { color: var(--white); }
|
||||
.page-header p { color: rgba(255,255,255,0.75); max-width: 56ch; }
|
||||
.page-header .eyebrow { margin-bottom: 1rem; }
|
||||
|
||||
/* ── PROCESS STEPS ───────────────────────────────────────── */
|
||||
.process-steps {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.step {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.step__num {
|
||||
font-family: var(--font-display);
|
||||
font-size: 2.5rem;
|
||||
color: var(--green);
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step__text h3 { font-size: 1rem; color: var(--text); margin-bottom: 0.25rem; }
|
||||
.step__text p { font-size: 0.88rem; margin: 0; }
|
||||
|
||||
/* ── MODAL ───────────────────────────────────────────────── */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 2000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
.modal-overlay.open { display: flex; }
|
||||
|
||||
.modal {
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
max-width: 560px;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
animation: slideUp 0.25s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.modal__close {
|
||||
position: absolute;
|
||||
top: 1rem; right: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-sub);
|
||||
line-height: 1;
|
||||
}
|
||||
.modal__close:hover { color: var(--text); }
|
||||
|
||||
/* ── FORMS ───────────────────────────────────────────────── */
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.65rem 0.85rem;
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.9rem;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--green);
|
||||
}
|
||||
.form-group textarea { resize: vertical; min-height: 100px; }
|
||||
|
||||
/* ── BLOG CARD ───────────────────────────────────────────── */
|
||||
.blog-card {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
transition: box-shadow var(--transition), transform var(--transition);
|
||||
}
|
||||
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
|
||||
|
||||
.blog-card__img {
|
||||
height: 180px;
|
||||
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--green) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.blog-card__body { padding: 1.25rem; }
|
||||
.blog-card__meta {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-sub);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.blog-card__title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.blog-card__excerpt {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-sub);
|
||||
max-width: none;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── ECOSYSTEM PILLS ─────────────────────────────────────── */
|
||||
.eco-card {
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
border: 2px solid transparent;
|
||||
background: var(--surface);
|
||||
}
|
||||
.eco-card:hover { border-color: var(--green); box-shadow: var(--shadow-md); }
|
||||
.eco-card__name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.6rem;
|
||||
color: var(--teal-dark);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
[data-theme="dark"] .eco-card__name { color: var(--green); }
|
||||
.eco-card__sub { font-size: 0.82rem; color: var(--text-sub); }
|
||||
|
||||
/* ── SECTOR LOGOS ────────────────────────────────────────── */
|
||||
.sectors {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.sector-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 99px;
|
||||
border: 1px solid var(--border);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-sub);
|
||||
}
|
||||
|
||||
/* ── FOOTER ──────────────────────────────────────────────── */
|
||||
.footer {
|
||||
background: var(--teal-dark);
|
||||
color: rgba(255,255,255,0.85);
|
||||
padding-block: 56px 28px;
|
||||
}
|
||||
|
||||
.footer__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.6fr 1fr 1fr 1fr;
|
||||
gap: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.12);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.footer__brand {
|
||||
font-family: var(--font-display);
|
||||
font-size: 2rem;
|
||||
color: var(--white);
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.footer__brand span { color: var(--green); }
|
||||
.footer__tagline { font-size: 0.85rem; opacity: 0.7; max-width: 26ch; }
|
||||
|
||||
.footer__col h4 {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--green);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
.footer__col a { font-size: 0.87rem; color: rgba(255,255,255,0.7); transition: color var(--transition); }
|
||||
.footer__col a:hover { color: var(--green); }
|
||||
|
||||
.footer__bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 0.78rem;
|
||||
color: rgba(255,255,255,0.45);
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.footer__grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.footer__grid { grid-template-columns: 1fr; }
|
||||
.navbar__links { display: none; }
|
||||
.hamburger { display: flex; }
|
||||
}
|
||||
|
||||
/* ── ANIMATIONS ──────────────────────────────────────────── */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
transition: opacity 0.55s ease, transform 0.55s ease;
|
||||
}
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── UTILITY ─────────────────────────────────────────────── */
|
||||
.text-center { text-align: center; }
|
||||
.text-center p { margin-inline: auto; }
|
||||
.mb-1 { margin-bottom: 1rem; }
|
||||
.mb-2 { margin-bottom: 2rem; }
|
||||
.mb-3 { margin-bottom: 3rem; }
|
||||
.mt-1 { margin-top: 1rem; }
|
||||
.mt-2 { margin-top: 2rem; }
|
||||
.gap-1 { gap: 1rem; }
|
||||
|
||||
.divider {
|
||||
width: 48px;
|
||||
height: 3px;
|
||||
background: var(--green);
|
||||
border-radius: 2px;
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
.divider--center { margin-inline: auto; }
|
||||
|
||||
.highlight { color: var(--green); }
|
||||
.strong { color: var(--text); }
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Trabajá con nosotros – IDE Consultores</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<style>
|
||||
.pillar { display:flex; gap:1rem; align-items:flex-start; }
|
||||
.pillar__icon { font-size:1.5rem; flex-shrink:0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Equipo IDE</p>
|
||||
<h1>Trabajá con nosotros</h1>
|
||||
<p>Buscamos personas que disfruten comprender antes de proponer, y que encuentren valor en el trabajo que mejora organizaciones reales.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem;">
|
||||
|
||||
<div class="fade-in">
|
||||
<p class="eyebrow">La cultura IDE</p>
|
||||
<h2 style="font-size:1.6rem; margin-bottom:1.5rem;">Un lugar para quienes piensan en sistemas.</h2>
|
||||
|
||||
<div style="display:flex; flex-direction:column; gap:1.25rem;">
|
||||
<div class="pillar">
|
||||
<div class="pillar__icon">🔍</div>
|
||||
<div>
|
||||
<h3>Curiosidad metodológica</h3>
|
||||
<p style="font-size:0.88rem;">Nos importa entender cómo funcionan las cosas, no solo aplicar recetas.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pillar">
|
||||
<div class="pillar__icon">🤝</div>
|
||||
<div>
|
||||
<h3>Trabajo colaborativo</h3>
|
||||
<p style="font-size:0.88rem;">Los proyectos mejoran cuando se construyen en equipo, con diversidad de miradas.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pillar">
|
||||
<div class="pillar__icon">📈</div>
|
||||
<div>
|
||||
<h3>Compromiso con el resultado</h3>
|
||||
<p style="font-size:0.88rem;">Medimos nuestro trabajo por el impacto que genera en las organizaciones que acompañamos.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pillar">
|
||||
<div class="pillar__icon">🌱</div>
|
||||
<div>
|
||||
<h3>Aprendizaje continuo</h3>
|
||||
<p style="font-size:0.88rem;">La formación no es solo para nuestros clientes. Es parte de nuestra forma de trabajar.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fade-in">
|
||||
<p class="eyebrow">Postulación</p>
|
||||
<h2 style="font-size:1.4rem; margin-bottom:1.5rem;">¿Querés sumarte?</h2>
|
||||
|
||||
<form class="contact-form" action="mailto:info@ideconsultores.com.ar" method="post">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="nombre-t">Nombre completo *</label>
|
||||
<input type="text" id="nombre-t" name="nombre" required placeholder="Tu nombre" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email-t">Email *</label>
|
||||
<input type="email" id="email-t" name="email" required placeholder="tu@email.com" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="linkedin">LinkedIn o CV (URL o adjunto)</label>
|
||||
<input type="text" id="linkedin" name="linkedin" placeholder="https://linkedin.com/in/tu-perfil" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="area">Área de interés *</label>
|
||||
<select id="area" name="area" required>
|
||||
<option value="" disabled selected>Seleccioná un área</option>
|
||||
<option>Excellence (ISO y Sistemas de Gestión)</option>
|
||||
<option>Project (Gestión de Proyectos / PMO)</option>
|
||||
<option>Academy (Formación y Desarrollo)</option>
|
||||
<option>Digital (Transformación Digital e IA)</option>
|
||||
<option>Administración y Operaciones</option>
|
||||
<option>Otro</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="mensaje-t">Contanos un poco de vos</label>
|
||||
<textarea id="mensaje-t" name="mensaje" placeholder="¿Por qué te interesa IDE? ¿Cuál es tu experiencia?"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn--primary" style="width:100%; justify-content:center;">Enviar postulación</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="footer-slot"></div>
|
||||
<script src="layout.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user