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