detalles finalizados v0.8.3 lista
This commit is contained in:
+129
-128
@@ -17,140 +17,141 @@
|
|||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
<!-- Header Contacto -->
|
<!-- Header & Contenido de Contacto con Parallax -->
|
||||||
<section class="section-padding">
|
<section class="section-padding contact-parallax-section" style="position: relative; overflow: hidden;">
|
||||||
<div class="container container-narrow text-center" style="padding-bottom: 5rem;">
|
|
||||||
<span class="eyebrow">CONVERSACIÓN INICIAL</span>
|
<!-- CAPA PARALLAX (FONDO + OVERLAY DE CONTRASTE) -->
|
||||||
<h1 style="margin-bottom: 1.25rem;">Hablemos de lo que necesitás</h1>
|
<div class="parallax-wrapper" aria-hidden="true">
|
||||||
<p class="lead-text" style="margin: 0 auto;">
|
<div id="contact-parallax-bg" class="parallax-bg-layer"></div>
|
||||||
Cada organización, proyecto o iniciativa parte de un contexto diferente. <br>Contanos qué te trae a IDE y empecemos por entender cómo podemos aportar valor.
|
<div class="parallax-overlay"></div>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
|
||||||
<div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
|
|
||||||
|
|
||||||
<!-- Columna Izquierda: Formulario Inteligente -->
|
|
||||||
<div class="card" style="padding: clamp(1.75rem, 4vw, 2.5rem);">
|
|
||||||
<h3 style="font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--ide-primary);">Contanos en qué podemos ayudarte</h3>
|
|
||||||
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
|
|
||||||
Completá tus datos y contanos brevemente el motivo de tu consulta. Empecemos por conversar y entender cómo podemos aportar valor.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<form id="ide-contact-form">
|
|
||||||
<input type="hidden" name="form_type" value="contacto">
|
|
||||||
<input type="hidden" name="origen" id="contact-origen" value="Formulario General">
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="contact-nombre" class="form-label">Nombre y Apellido *</label>
|
|
||||||
<input type="text" id="contact-nombre" name="nombre" class="form-control" placeholder="Ej: Lic. Martín Rossi" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid-2" style="gap: 1rem;">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="contact-organizacion" class="form-label">Organización / Empresa *</label>
|
|
||||||
<input type="text" id="contact-organizacion" name="organizacion" class="form-control" placeholder="Ej: Industria S.A." required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="contact-rol" class="form-label">Rol o Cargo en la empresa</label>
|
|
||||||
<input type="text" id="contact-rol" name="rol" class="form-control" placeholder="Ej: Gerente de Operaciones">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid-2" style="gap: 1rem;">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="contact-email" class="form-label">Correo Electrónico *</label>
|
|
||||||
<input type="email" id="contact-email" name="email" class="form-control" placeholder="nombre@empresa.com" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="contact-telefono" class="form-label">Teléfono / WhatsApp</label>
|
|
||||||
<input type="tel" id="contact-telefono" name="telefono" class="form-control" placeholder="Ej: +54 9 11 5555-1234">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="contact-busqueda" class="form-label">¿Qué te trae a IDE? *</label>
|
|
||||||
<select id="contact-busqueda" name="busqueda" class="form-control">
|
|
||||||
<option value="Necesito orientación para abordar un desafío">Necesito orientación para abordar un desafío</option>
|
|
||||||
<option value="Estoy buscando una solución específica">Estoy buscando una solución específica</option>
|
|
||||||
<option value="Quiero implementar o certificar una norma / sistema de gestión"> Quiero implementar o certificar una norma / sistema de gestión</option>
|
|
||||||
<option value="Busco formación para mi organización / equipo">Busco formación para mi organización / equipo</option>
|
|
||||||
<option value="Necesito gestionar, ordenar o impulsar un proyecto">Necesito gestionar, ordenar o impulsar un proyecto</option>
|
|
||||||
<option value="Quiero incorporar tecnología, automatización o IA">Quiero incorporar tecnología, automatización o IA</option>
|
|
||||||
<option value="Quiero hacer una consulta sobre IDE Academy">Quiero hacer una consulta sobre IDE Academy</option>
|
|
||||||
<option value="Quiero proponer una alianza o colaboración">Quiero proponer una alianza o colaboración</option>
|
|
||||||
<option value="Otro motivo de consulta">Otro motivo de consulta.</option>
|
|
||||||
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="contact-mensaje" class="form-label">Contanos brevemente en qué podemos ayudarte *</label>
|
|
||||||
<textarea id="contact-mensaje" name="mensaje" class="form-control" rows="4" placeholder="Describí los objetivos o problemáticas que quisieras abordar..." required></textarea>
|
|
||||||
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
|
|
||||||
* campos requeridos. <br><i>La información que compartas será utilizada únicamente para gestionar tu consulta y contactarte en relación con ella.</i>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary btn-lg" style="width: 100%; margin-top: 0.5rem;">
|
|
||||||
ENVIAR CONSULTA →
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div id="contact-form-alert" class="form-alert"></div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Columna Derecha: Canales Directos y Datos Institucionales -->
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<!-- WhatsApp Destacado -->
|
|
||||||
<div class="card" style="background-color: var(--ide-accent-soft); border-color: var(--ide-accent); padding: 1.75rem; margin-bottom: 2rem;">
|
|
||||||
<h3 style="font-size: 1.2rem; color: var(--ide-accent-hover); margin-bottom: 0.5rem;">¿Preferís contactarnos directamente?</h3>
|
|
||||||
<p style="font-size: 0.9rem; color: var(--text-body); line-height: 1.5; margin-bottom: 1.25rem;">
|
|
||||||
<strong>WhatsApp: </strong>Para consultas breves o coordinar una conversación.
|
|
||||||
</p>
|
|
||||||
<a href="https://wa.me/5491123456789?text=Hola%20IDE%20Consultores,%20quisiera%20recibir%20m%C3%A1s%20informaci%C3%B3n." target="_blank" rel="noopener noreferrer" class="btn btn-accent btn-sm" style="width: 100%;">
|
|
||||||
ESCRIBINOS POR WHATSAPP →
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Datos Ficticios para fácil edición -->
|
|
||||||
<div class="card" style="padding: 1.75rem;">
|
|
||||||
<h3 style="font-size: 1.15rem; margin-bottom: 1.25rem;">Canales Institucionales</h3>
|
|
||||||
|
|
||||||
<ul style="list-style: none; display: flex; flex-direction: column; gap: 1.25rem; font-size: 0.92rem;">
|
|
||||||
<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
|
||||||
<span style="font-size: 1.2rem;">•</span>
|
|
||||||
<div>
|
|
||||||
<strong>Email:</strong><br>
|
|
||||||
<a href="mailto:info@ideconsultores.com.ar" style="color: var(--ide-primary); font-weight: 600;">info@ideconsultores.com.ar</a>
|
|
||||||
<p>Para consultas, propuestas o documentación.</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
|
||||||
<span style="font-size: 1.2rem;">•</span>
|
|
||||||
<div>
|
|
||||||
<strong>Teléfono Directo:</strong><br>
|
|
||||||
<span style="color: var(--text-body);">+54 11 4800-0000 (Lunes a Viernes 9 a 18 hs)</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<!--<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
|
||||||
<span style="font-size: 1.2rem;">•</span>
|
|
||||||
<div>
|
|
||||||
<strong>Oficinas Centrales:</strong><br>
|
|
||||||
<span style="color: var(--text-body);">Av. del Libertador 4800, Piso 8, CABA, Argentina</span>
|
|
||||||
</div>-->
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<!-- CONTENIDO (Z-INDEX SUPERIOR) -->
|
||||||
|
<div style="position: relative; z-index: 2;">
|
||||||
|
<div class="container container-narrow text-center" style="padding-bottom: 4rem;">
|
||||||
|
<span class="eyebrow">CONVERSACIÓN INICIAL</span>
|
||||||
|
<h1 style="margin-bottom: 1.25rem;">Hablemos de lo que necesitás</h1>
|
||||||
|
<p class="lead-text" style="margin: 0 auto;">
|
||||||
|
Cada organización, proyecto o iniciativa parte de un contexto diferente. <br>Contanos qué te trae a IDE y empecemos por entender cómo podemos aportar valor.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
|
||||||
|
|
||||||
|
<!-- Columna Izquierda: Formulario Inteligente -->
|
||||||
|
<div class="card" style="padding: clamp(1.75rem, 4vw, 2.5rem);">
|
||||||
|
<h3 style="font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--ide-primary);">Contanos en qué podemos ayudarte</h3>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
|
||||||
|
Completá tus datos y contanos brevemente el motivo de tu consulta. Empecemos por conversar y entender cómo podemos aportar valor.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form id="ide-contact-form">
|
||||||
|
<input type="hidden" name="form_type" value="contacto">
|
||||||
|
<input type="hidden" name="origen" id="contact-origen" value="Formulario General">
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-nombre" class="form-label">Nombre y Apellido *</label>
|
||||||
|
<input type="text" id="contact-nombre" name="nombre" class="form-control" placeholder="Ej: Lic. Martín Rossi" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-2" style="gap: 1rem;">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-organizacion" class="form-label">Organización / Empresa *</label>
|
||||||
|
<input type="text" id="contact-organizacion" name="organizacion" class="form-control" placeholder="Ej: Industria S.A." required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-rol" class="form-label">Rol o Cargo en la empresa</label>
|
||||||
|
<input type="text" id="contact-rol" name="rol" class="form-control" placeholder="Ej: Gerente de Operaciones">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-2" style="gap: 1rem;">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-email" class="form-label">Correo Electrónico *</label>
|
||||||
|
<input type="email" id="contact-email" name="email" class="form-control" placeholder="nombre@empresa.com" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-telefono" class="form-label">Teléfono / WhatsApp</label>
|
||||||
|
<input type="tel" id="contact-telefono" name="telefono" class="form-control" placeholder="Ej: +54 9 11 5555-1234">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-busqueda" class="form-label">¿Qué te trae a IDE? *</label>
|
||||||
|
<select id="contact-busqueda" name="busqueda" class="form-control">
|
||||||
|
<option value="Necesito orientación para abordar un desafío">Necesito orientación para abordar un desafío</option>
|
||||||
|
<option value="Estoy buscando una solución específica">Estoy buscando una solución específica</option>
|
||||||
|
<option value="Quiero implementar o certificar una norma / sistema de gestión">Quiero implementar o certificar una norma / sistema de gestión</option>
|
||||||
|
<option value="Busco formación para mi organización / equipo">Busco formación para mi organización / equipo</option>
|
||||||
|
<option value="Necesito gestionar, ordenar o impulsar un proyecto">Necesito gestionar, ordenar o impulsar un proyecto</option>
|
||||||
|
<option value="Quiero incorporar tecnología, automatización o IA">Quiero incorporar tecnología, automatización o IA</option>
|
||||||
|
<option value="Quiero hacer una consulta sobre IDE Academy">Quiero hacer una consulta sobre IDE Academy</option>
|
||||||
|
<option value="Quiero proponer una alianza o colaboración">Quiero proponer una alianza o colaboración</option>
|
||||||
|
<option value="Otro motivo de consulta">Otro motivo de consulta.</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-mensaje" class="form-label">Contanos brevemente en qué podemos ayudarte *</label>
|
||||||
|
<textarea id="contact-mensaje" name="mensaje" class="form-control" rows="4" placeholder="Describí los objetivos o problemáticas que quisieras abordar..." required></textarea>
|
||||||
|
<p style="font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem; margin-bottom: 1.25rem;">
|
||||||
|
* campos requeridos. <br><i>La información que compartas será utilizada únicamente para gestionar tu consulta y contactarte en relación con ella.</i>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary btn-lg" style="width: 100%;">
|
||||||
|
ENVIAR CONSULTA →
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div id="contact-form-alert" class="form-alert"></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Columna Derecha: Canales Directos y Datos Institucionales -->
|
||||||
|
<div>
|
||||||
|
<!-- WhatsApp Destacado -->
|
||||||
|
<div class="card" style="background-color: var(--ide-accent-soft); border-color: var(--ide-accent); padding: 1.75rem; margin-bottom: 2rem;">
|
||||||
|
<h3 style="font-size: 1.2rem; color: var(--ide-accent-hover); margin-bottom: 0.5rem;">¿Preferís contactarnos directamente?</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-body); line-height: 1.5; margin-bottom: 1.25rem;">
|
||||||
|
<strong>WhatsApp: </strong>Para consultas breves o coordinar una conversación.
|
||||||
|
</p>
|
||||||
|
<a href="https://wa.me/5491123456789?text=Hola%20IDE%20Consultores,%20quisiera%20recibir%20m%C3%A1s%20informaci%C3%B3n." target="_blank" rel="noopener noreferrer" class="btn btn-accent btn-sm" style="width: 100%;">
|
||||||
|
ESCRIBINOS POR WHATSAPP →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Canales Institucionales -->
|
||||||
|
<div class="card" style="padding: 1.75rem;">
|
||||||
|
<h3 style="font-size: 1.15rem; margin-bottom: 1.25rem;">Canales Institucionales</h3>
|
||||||
|
|
||||||
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 1.25rem; font-size: 0.92rem; padding: 0;">
|
||||||
|
<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
||||||
|
<span style="font-size: 1.2rem; color: var(--ide-primary);">•</span>
|
||||||
|
<div>
|
||||||
|
<strong>Email:</strong><br>
|
||||||
|
<a href="mailto:info@ideconsultores.com.ar" style="color: var(--ide-primary); font-weight: 600;">info@ideconsultores.com.ar</a>
|
||||||
|
<p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem;">Para consultas, propuestas o documentación.</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
||||||
|
<span style="font-size: 1.2rem; color: var(--ide-primary);">•</span>
|
||||||
|
<div>
|
||||||
|
<strong>Teléfono Directo:</strong><br>
|
||||||
|
<span style="color: var(--text-body);">+54 11 4800-0000 (Lunes a Viernes 9 a 18 hs)</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer id="site-footer"></footer>
|
<footer id="site-footer"></footer>
|
||||||
|
|||||||
+122
-6
@@ -263,6 +263,8 @@ p, li, .lead-text, .text-body, .text-muted {
|
|||||||
.section-padding {
|
.section-padding {
|
||||||
padding-top: clamp(3.5rem, 7vw, 6.5rem);
|
padding-top: clamp(3.5rem, 7vw, 6.5rem);
|
||||||
padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
|
padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-padding-sm {
|
.section-padding-sm {
|
||||||
@@ -273,6 +275,17 @@ p, li, .lead-text, .text-body, .text-muted {
|
|||||||
padding-top: clamp(1rem, 2vw, 3.5rem);
|
padding-top: clamp(1rem, 2vw, 3.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg1{
|
||||||
|
background: radial-gradient(circle at 20% 80%, var(--ide-accent-soft) 0%, transparent 50%), var(--bg-body);
|
||||||
|
}
|
||||||
|
.bg2{
|
||||||
|
background: radial-gradient(circle at 80% 20%, var(--ide-accent-soft) 0%, transparent 50%), var(--bg-body);
|
||||||
|
}
|
||||||
|
.bg3{
|
||||||
|
background: radial-gradient(circle at 50% 50%, var(--ide-accent-soft) 0%, transparent 100%), var(--bg-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* --- 5. Componentes: Header & Navbar --- */
|
/* --- 5. Componentes: Header & Navbar --- */
|
||||||
#site-header {
|
#site-header {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
@@ -999,12 +1012,6 @@ p, li, .lead-text, .text-body, .text-muted {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* --- 8. Hero: La Doble Entrada (Home) --- */
|
/* --- 8. Hero: La Doble Entrada (Home) --- */
|
||||||
.section-padding {
|
|
||||||
background: radial-gradient(circle at 80% 20%, var(--ide-accent-soft) 0%, transparent 50%), var(--bg-body);
|
|
||||||
/*border-bottom: 1px solid var(--border-color);*/
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-grid {
|
.hero-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -1489,7 +1496,54 @@ p, li, .lead-text, .text-body, .text-muted {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pills-list {
|
||||||
|
display: block;
|
||||||
|
line-height: 2.4;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pill-item {
|
||||||
|
display: inline-block !important; /* Se comporta exactamente como una palabra */
|
||||||
|
width: auto !important;
|
||||||
|
white-space: nowrap; /* Evita que el texto de una píldora se corte en dos */
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
padding: 0.35rem 0.85rem;
|
||||||
|
margin-right: 0.45rem;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-body);
|
||||||
|
background-color: var(--bg-subtle);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 9999px;
|
||||||
|
line-height: 1.2;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pill-item:hover {
|
||||||
|
border-color: var(--ide-primary);
|
||||||
|
color: var(--ide-primary);
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-project .pill-item:hover{
|
||||||
|
border-color: var(--ide-projects);
|
||||||
|
color: var(--ide-projects);
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
}
|
||||||
|
.card-digital .pill-item:hover{
|
||||||
|
border-color: var(--ide-digital);
|
||||||
|
color: var(--ide-digital);
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
}
|
||||||
|
.card-academy .pill-item:hover{
|
||||||
|
border-color: var(--ide-academy);
|
||||||
|
color: var(--ide-academy);
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
}
|
||||||
/* --- 13. Modales (Pop-ups de Desafíos y Cursos) --- */
|
/* --- 13. Modales (Pop-ups de Desafíos y Cursos) --- */
|
||||||
.dfcard1{
|
.dfcard1{
|
||||||
background: linear-gradient(0deg, var(--bg-surface) 0%, var(--ide-accent-soft) 100%);
|
background: linear-gradient(0deg, var(--bg-surface) 0%, var(--ide-accent-soft) 100%);
|
||||||
@@ -2376,6 +2430,68 @@ canvas {
|
|||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Fondo Fijo Tipo Ventana (Fixed Background Parallax)
|
||||||
|
========================================================================== */
|
||||||
|
.contact-parallax-section {
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax-bg-layer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
/* Imagen de fondo */
|
||||||
|
background-image: url('../assets/img/academia-incompany.jpg');
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
/* CLAVE: Deja la imagen fija en el viewport mientras el sitio scrollea */
|
||||||
|
background-attachment: fixed;
|
||||||
|
|
||||||
|
/* Estética sobria IDE */
|
||||||
|
filter: grayscale(100%);
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cortina suave en bordes superior e inferior para fundir con el header/footer */
|
||||||
|
.parallax-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
var(--bg-surface) 0%,
|
||||||
|
transparent 12%,
|
||||||
|
transparent 88%,
|
||||||
|
var(--bg-surface) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Las tarjetas mantienen fondo sólido para tapar la foto a su paso */
|
||||||
|
.contact-parallax-section .card {
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
/* --- 17. Footer --- */
|
/* --- 17. Footer --- */
|
||||||
#site-footer {
|
#site-footer {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
+1
-1
@@ -59,7 +59,7 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Grilla de Desafíos con Modales -->
|
<!-- Grilla de Desafíos con Modales -->
|
||||||
<section class="section-padding">
|
<section class="section-padding bg3">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<div class="grid-3">
|
<div class="grid-3">
|
||||||
|
|||||||
+40
-35
@@ -26,8 +26,8 @@
|
|||||||
<div class="container container-narrow">
|
<div class="container container-narrow">
|
||||||
<span class="eyebrow">PROPUESTA DE VALOR</span>
|
<span class="eyebrow">PROPUESTA DE VALOR</span>
|
||||||
<h1>Diferentes capacidades.<br> Una visión compartida del conjunto.</h1>
|
<h1>Diferentes capacidades.<br> Una visión compartida del conjunto.</h1>
|
||||||
<p class="lead-text">
|
<p class="lead-text" style="margin-top: 1rem;">
|
||||||
No todos los desafíos necesitan activar todo el Ecosistema. <br>La clave está en comprender el conjunto para saber dónde intervenir.
|
Cada desafío activa la parte del Ecosistema que necesita. <br>La clave está en comprender el conjunto para saber dónde intervenir.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -60,14 +60,17 @@
|
|||||||
<p>
|
<p>
|
||||||
<strong>Para fortalecer la gestión y mejorar el desempeño:</strong> Integramos procesos, sistemas de gestión, mejora continua y sostenibilidad para ayudar a las organizaciones a gestionar mejor, optimizar su desempeño y generar valor sostenible.
|
<strong>Para fortalecer la gestión y mejorar el desempeño:</strong> Integramos procesos, sistemas de gestión, mejora continua y sostenibilidad para ayudar a las organizaciones a gestionar mejor, optimizar su desempeño y generar valor sostenible.
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
|
||||||
<li>• Procesos</li>
|
<!-- Lista en formato píldoras -->
|
||||||
<li>• Sistemas de gestión</li>
|
<div class="pills-list">
|
||||||
<li>• Mejora continua</li>
|
<span class="pill-item">Procesos</span>
|
||||||
<li>• Desempeño</li>
|
<span class="pill-item">Sistemas de gestión</span>
|
||||||
<li>• Riesgos</li>
|
<span class="pill-item">Mejora continua</span>
|
||||||
<li>• Sostenibilidad</li>
|
<span class="pill-item">Desempeño</span>
|
||||||
</ul>
|
<span class="pill-item">Riesgos</span>
|
||||||
|
<span class="pill-item">Sostenibilidad</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<a class="btn btn-outline btn-sm" data-modal-target="modal-ide-excellence">CONOCER MÁS →</a>
|
<a class="btn btn-outline btn-sm" data-modal-target="modal-ide-excellence">CONOCER MÁS →</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -77,7 +80,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 2. IDE Project -->
|
<!-- 2. IDE Project -->
|
||||||
<div id="project" class="card card-projects card-ecosistema">
|
<div id="project" class="card card-project card-ecosistema">
|
||||||
<div class="grid-2 eco">
|
<div class="grid-2 eco">
|
||||||
<div>
|
<div>
|
||||||
<img src="assets/img/projects.png" alt="IDE Project">
|
<img src="assets/img/projects.png" alt="IDE Project">
|
||||||
@@ -86,16 +89,16 @@
|
|||||||
<span class="ecosystem-badge badge-project">PMO & Project Services</span>
|
<span class="ecosystem-badge badge-project">PMO & Project Services</span>
|
||||||
<p>
|
<p>
|
||||||
<strong>Para convertir iniciativas en resultados:</strong> Fortalecemos la capacidad de las organizaciones para seleccionar, priorizar y gestionar proyectos, conectando estrategia, recursos y ejecución para transformar iniciativas en resultados.
|
<strong>Para convertir iniciativas en resultados:</strong> Fortalecemos la capacidad de las organizaciones para seleccionar, priorizar y gestionar proyectos, conectando estrategia, recursos y ejecución para transformar iniciativas en resultados.
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<!-- Lista en formato píldoras -->
|
||||||
<li>• Proyectos</li>
|
<div class="pills-list">
|
||||||
<li>• PMO</li>
|
<span class="pill-item">Proyectos</span>
|
||||||
<li>• Portafolios</li>
|
<span class="pill-item">PMO</span>
|
||||||
<li>• Gobernanza</li>
|
<span class="pill-item">Portafolios</span>
|
||||||
<li>• Metodologías</li>
|
<span class="pill-item">Gobernanza</span>
|
||||||
<li>• Resultados</li>
|
<span class="pill-item">Metodologías</span>
|
||||||
</ul>
|
<span class="pill-item">Resultados</span>
|
||||||
|
</div>
|
||||||
<a class="btn btn-outline btn-sm" data-modal-target="modal-ide-project">CONOCER MÁS →</a>
|
<a class="btn btn-outline btn-sm" data-modal-target="modal-ide-project">CONOCER MÁS →</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -109,14 +112,15 @@
|
|||||||
<p>
|
<p>
|
||||||
<strong>Tecnología con sentido: </strong> Conectamos gestión, procesos, datos e inteligencia artificial para identificar dónde la tecnología puede simplificar, automatizar y potenciar la forma en que las organizaciones trabajan y toman decisiones.
|
<strong>Tecnología con sentido: </strong> Conectamos gestión, procesos, datos e inteligencia artificial para identificar dónde la tecnología puede simplificar, automatizar y potenciar la forma en que las organizaciones trabajan y toman decisiones.
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<!-- Lista en formato píldoras -->
|
||||||
<li>• Digitalización</li>
|
<div class="pills-list">
|
||||||
<li>• Automatización </li>
|
<span class="pill-item">Digitalización</span>
|
||||||
<li>• Datos.</li>
|
<span class="pill-item">Automatización</span>
|
||||||
<li>• Inteligencia Artificial</li>
|
<span class="pill-item">Datos</span>
|
||||||
<li>• Integración </li>
|
<span class="pill-item">Inteligencia Artificial</span>
|
||||||
<li>• Decisiones </li>
|
<span class="pill-item">Integración</span>
|
||||||
</ul>
|
<span class="pill-item">Decisiones</span>
|
||||||
|
</div>
|
||||||
<a class="btn btn-outline btn-sm" data-modal-target="modal-ide-digital">CONOCER MÁS →</a>
|
<a class="btn btn-outline btn-sm" data-modal-target="modal-ide-digital">CONOCER MÁS →</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -136,13 +140,14 @@
|
|||||||
<p>
|
<p>
|
||||||
<strong>Para desarrollar capacidades: </strong>Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para fortalecer las capacidades que profesionales, equipos y organizaciones necesitan para gestionar, liderar y transformar.
|
<strong>Para desarrollar capacidades: </strong>Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para fortalecer las capacidades que profesionales, equipos y organizaciones necesitan para gestionar, liderar y transformar.
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<!-- Lista en formato píldoras -->
|
||||||
<li>• Formación Ejecutiva</li>
|
<div class="pills-list">
|
||||||
<li>• In-Company</li>
|
<span class="pill-item">Formación Ejecutiva</span>
|
||||||
<li>• Programas</li>
|
<span class="pill-item">In-Company</span>
|
||||||
<li>• Talleres</li>
|
<span class="pill-item">Programas</span>
|
||||||
<li>• Rutas de aprendizaje</li>
|
<span class="pill-item">Talleres</span>
|
||||||
</ul>
|
<span class="pill-item">Rutas de aprendizaje</span>
|
||||||
|
</div>
|
||||||
<a href="ide-academy.html" class="btn btn-outline btn-sm">EXPLORAR IDE ACADEMY →</a>
|
<a href="ide-academy.html" class="btn btn-outline btn-sm">EXPLORAR IDE ACADEMY →</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
+11
-11
@@ -26,7 +26,7 @@
|
|||||||
<main>
|
<main>
|
||||||
|
|
||||||
<!-- BLOQUE 1: HERO - LA DOBLE VÍA DE ENTRADA -->
|
<!-- BLOQUE 1: HERO - LA DOBLE VÍA DE ENTRADA -->
|
||||||
<section class="section-padding-sm">
|
<section class="section-padding-sm bg2">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="hero-grid">
|
<div class="hero-grid">
|
||||||
<div>
|
<div>
|
||||||
@@ -82,7 +82,7 @@
|
|||||||
<span class="eyebrow" style="color: var(--ide-accent);">Brújula IDE</span>
|
<span class="eyebrow" style="color: var(--ide-accent);">Brújula IDE</span>
|
||||||
<h2 style="font-size: 1.75rem; margin-bottom: 0.5rem;">Encontrá dónde podemos generar impacto</h2>
|
<h2 style="font-size: 1.75rem; margin-bottom: 0.5rem;">Encontrá dónde podemos generar impacto</h2>
|
||||||
<p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0;">
|
<p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0;">
|
||||||
No todos los desafíos necesitan la misma estrategia. Respondé 4 preguntas breves y descubrí qué capacidades de IDE pueden aportar mayor valor a tu contexto.
|
Todos los desafíos no necesitan la misma estrategia. Respondé 4 preguntas breves y descubrí qué capacidades de IDE pueden aportar mayor valor a tu contexto.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -565,14 +565,14 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- BLOQUE 4: EL ECOSISTEMA (4 CAPACIDADES) -->
|
<!-- BLOQUE 4: EL ECOSISTEMA (4 CAPACIDADES) -->
|
||||||
<section class="section-padding" style="background-color: var(--bg-subtle);">
|
<section class="section-padding bg2" style="background-color: var(--bg-subtle);">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.5rem;">
|
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.5rem;">
|
||||||
<div>
|
<div>
|
||||||
<span class="eyebrow">ECOSISTEMA INTEGRADO</span>
|
<span class="eyebrow">ECOSISTEMA INTEGRADO</span>
|
||||||
<h2>Cuatro capacidades. <br>Un mismo propósito: generar impacto.</h2>
|
<h2>Cuatro capacidades. <br>Un mismo propósito: generar impacto.</h2>
|
||||||
<p class="lead-text">
|
<p class="lead-text" style="margin-top: 1rem;">
|
||||||
No todas las organizaciones necesitan lo mismo. Integramos las capacidades necesarias para responder a cada desafío sin perder de vista el conjunto.
|
Las organizaciones no necesitan siempre lo mismo. Integramos las capacidades necesarias para responder a cada desafío sin perder de vista el conjunto.
|
||||||
<br>En IDE entendemos cómo funciona el sistema para identificar dónde intervenir, integrar las capacidades necesarias y generar valor en el conjunto.
|
<br>En IDE entendemos cómo funciona el sistema para identificar dónde intervenir, integrar las capacidades necesarias y generar valor en el conjunto.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -642,13 +642,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- BLOQUE 5: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
|
<!-- BLOQUE 5: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
|
||||||
<section class="section-padding-sm bg-subtle-section">
|
<section class="section-padding-sm bg1" style="background-color: var(--bg-subtle);">
|
||||||
<div class="container">
|
<div class="container" style="margin-bottom: 4rem;">
|
||||||
<div style="text-align: center; margin-bottom: 2.5rem;">
|
<div style="text-align: center; margin-bottom: 2.5rem;">
|
||||||
<span class="eyebrow">ÁMBITOS DE EXPERIENCIA</span>
|
<span class="eyebrow">ÁMBITOS DE EXPERIENCIA</span>
|
||||||
<h2 style="font-size: 1.8rem;">El contexto también transforma la solución.</h2>
|
<h2 style="font-size: 1.8rem;">El contexto también transforma la solución.</h2>
|
||||||
@@ -683,10 +684,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<!--CTA-->
|
||||||
|
|
||||||
<!-- BLOQUE 6: CTA FINAL DE CONVERSIÓN -->
|
|
||||||
<section class="section-padding-sm">
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="card" style="background: linear-gradient(135deg, var(--ide-primary-dark) 0%, var(--ide-primary-light2) 100%); color: #FFFFFF; border: none; padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center;">
|
<div class="card" style="background: linear-gradient(135deg, var(--ide-primary-dark) 0%, var(--ide-primary-light2) 100%); color: #FFFFFF; border: none; padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center;">
|
||||||
<span class="eyebrow" style="color: var(--ide-accent);">CONVERSACIÓN INICIAL</span>
|
<span class="eyebrow" style="color: var(--ide-accent);">CONVERSACIÓN INICIAL</span>
|
||||||
@@ -706,6 +704,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Footer Modular (Inyectado dinámicamente por JS) -->
|
<!-- Footer Modular (Inyectado dinámicamente por JS) -->
|
||||||
|
|||||||
+1
-1
@@ -215,7 +215,7 @@
|
|||||||
<!-- Banner de Cierre -->
|
<!-- Banner de Cierre -->
|
||||||
<section class="section-padding" style="background-color: var(--teal-dark); border-top: 1px solid var(--border-color);">
|
<section class="section-padding" style="background-color: var(--teal-dark); border-top: 1px solid var(--border-color);">
|
||||||
<div class="container container-narrow text-center">
|
<div class="container container-narrow text-center">
|
||||||
<h2 style="color: var(--text-inverse); margin-bottom: 1rem;">No todos los desafíos encajan en una única solución.</h2>
|
<h2 style="color: var(--text-inverse); margin-bottom: 1rem;">Una única solución no siempre encaja para todos los desafíos.</h2>
|
||||||
<p class="lead-text-cta" style="margin-bottom: 1.5rem;">
|
<p class="lead-text-cta" style="margin-bottom: 1.5rem;">
|
||||||
Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto.
|
Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
+1
-1
@@ -79,7 +79,7 @@
|
|||||||
<div style="text-align: center; max-width: 700px; margin: 0 auto 3rem auto;">
|
<div style="text-align: center; max-width: 700px; margin: 0 auto 3rem auto;">
|
||||||
<span class="eyebrow">QUIÉNES HACEMOS IDE</span>
|
<span class="eyebrow">QUIÉNES HACEMOS IDE</span>
|
||||||
<h2>Experiencias que se complementan</h2>
|
<h2>Experiencias que se complementan</h2>
|
||||||
<p class="lead-text" style="margin: 0 auto;">
|
<p class="lead-text" style="margin-top: 1rem;">
|
||||||
IDE reúne profesionales con trayectorias en gestión, proyectos, mejora continua, sistemas de gestión, transformación digital, inteligencia artificial, docencia y desarrollo organizacional. <br>Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades se conectan.
|
IDE reúne profesionales con trayectorias en gestión, proyectos, mejora continua, sistemas de gestión, transformación digital, inteligencia artificial, docencia y desarrollo organizacional. <br>Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades se conectan.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user