cambios esteticos en menu y hero
This commit is contained in:
+104
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
background: #fdfdfd;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.hero-vector {
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<svg class="hero-vector" viewBox="0 0 900 350" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="track-1" d="M 50 175 C 150 50, 250 300, 450 175 C 650 50, 750 300, 850 175 C 750 50, 650 300, 450 175 C 250 50, 150 300, 50 175 Z"
|
||||
stroke="#429b82" stroke-width="8" stroke-linecap="round" fill="none" />
|
||||
|
||||
<path id="track-2" d="M 50 175 C 150 300, 250 50, 450 175 C 650 300, 750 50, 850 175 C 750 300, 650 50, 450 175 C 250 300, 150 50, 50 175 Z"
|
||||
stroke="#b2c6ce" stroke-width="8" stroke-linecap="round" fill="none" opacity="0.6" />
|
||||
|
||||
<g id="dashed-lines"></g>
|
||||
|
||||
<g id="nodes-layer"></g>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
const track1 = document.getElementById('track-1');
|
||||
const track2 = document.getElementById('track-2');
|
||||
const len1 = track1.getTotalLength();
|
||||
const len2 = track2.getTotalLength();
|
||||
|
||||
const nodesLayer = document.getElementById('nodes-layer');
|
||||
const linesLayer = document.getElementById('dashed-lines');
|
||||
|
||||
// Configuración de los nodos móviles
|
||||
const nodesConfig = [
|
||||
{ track: track1, length: len1, progress: 0.00, speed: 0.0004, color: '#133543', radius: 11 },
|
||||
{ track: track1, length: len1, progress: 0.25, speed: 0.0004, color: '#429b82', radius: 9 },
|
||||
{ track: track1, length: len1, progress: 0.50, speed: 0.0004, color: '#133543', radius: 11 },
|
||||
{ track: track1, length: len1, progress: 0.75, speed: 0.0004, color: '#429b82', radius: 9 },
|
||||
{ track: track2, length: len2, progress: 0.12, speed: 0.0003, color: '#133543', radius: 10 },
|
||||
{ track: track2, length: len2, progress: 0.62, speed: 0.0003, color: '#429b82', radius: 10 }
|
||||
];
|
||||
|
||||
// Crear elementos SVG en el DOM
|
||||
const nodes = nodesConfig.map(cfg => {
|
||||
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||
circle.setAttribute('r', cfg.radius);
|
||||
circle.setAttribute('fill', cfg.color);
|
||||
nodesLayer.appendChild(circle);
|
||||
return { ...cfg, element: circle, x: 0, y: 0 };
|
||||
});
|
||||
|
||||
// Crear líneas punteadas para conectar pares de nodos consecutivos
|
||||
const lines = [];
|
||||
for (let i = 0; i < nodes.length - 1; i++) {
|
||||
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||
line.setAttribute('stroke', '#133543');
|
||||
line.setAttribute('stroke-width', '2');
|
||||
line.setAttribute('stroke-dasharray', '5,5');
|
||||
line.setAttribute('opacity', '0.7');
|
||||
linesLayer.appendChild(line);
|
||||
lines.push(line);
|
||||
}
|
||||
|
||||
// Bucle de animación (60fps)
|
||||
function animate() {
|
||||
// 1. Actualizar posición de cada nodo sobre su trayectoria
|
||||
nodes.forEach(node => {
|
||||
node.progress = (node.progress + node.speed) % 1;
|
||||
const point = node.track.getPointAtLength(node.progress * node.length);
|
||||
node.x = point.x;
|
||||
node.y = point.y;
|
||||
node.element.setAttribute('cx', point.x);
|
||||
node.element.setAttribute('cy', point.y);
|
||||
});
|
||||
|
||||
// 2. Conectar nodos ordenados por su eje X con las líneas punteadas
|
||||
const sortedNodes = [...nodes].sort((a, b) => a.x - b.x);
|
||||
for (let i = 0; i < sortedNodes.length - 1; i++) {
|
||||
const p1 = sortedNodes[i];
|
||||
const p2 = sortedNodes[i + 1];
|
||||
lines[i].setAttribute('x1', p1.x);
|
||||
lines[i].setAttribute('y1', p1.y);
|
||||
lines[i].setAttribute('x2', p2.x);
|
||||
lines[i].setAttribute('y2', p2.y);
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
+200
-194
@@ -3,7 +3,7 @@
|
||||
Manual de Marca: Azul Petróleo (#0A485E), Verde Esmeralda (#13A78A), Gris Neutro (#9A9A9A)
|
||||
========================================================================== */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Bebas+Neue&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
|
||||
|
||||
/* --- 1. Variables de Color y Tema --- */
|
||||
:root {
|
||||
@@ -14,9 +14,11 @@
|
||||
--ide-accent: #40ab8e;
|
||||
--ide-accent-hover: #4fb389;
|
||||
--ide-accent-soft: rgba(19, 167, 138, 0.12);
|
||||
--ide-gray: #1b1717;
|
||||
--ide-excellence: #a83c41;
|
||||
|
||||
--ide-dark-gray: #1b1717;
|
||||
--ide-excellence: #4fb389;
|
||||
--ide-projects: #ed8d01;
|
||||
--ide-academy: #a83c41;
|
||||
--ide-digital: #2c69ab;
|
||||
|
||||
/* Tema Claro (Por defecto) */
|
||||
--bg-body: #F8FAFB;
|
||||
@@ -26,6 +28,7 @@
|
||||
--border-color: #E2E8F0;
|
||||
--border-subtle: #EEF2F6;
|
||||
|
||||
--text-primary: #094b63;
|
||||
--text-main: #0E2833;
|
||||
--text-body: #334A56;
|
||||
--text-muted: #64748B;
|
||||
@@ -52,8 +55,12 @@
|
||||
--bg-subtle: #24333E;
|
||||
--border-color: #2D3D4A;
|
||||
--border-subtle: #1F2C36;
|
||||
--ide-excellence: #ed3401;
|
||||
--ide-excellence: #4fb389;
|
||||
--ide-projects: #ed8d01;
|
||||
--ide-academy: #a83c41;
|
||||
--ide-digital: #2c69ab;
|
||||
|
||||
--text-primary:#4fb389;
|
||||
--text-main: #F1F5F9;
|
||||
--text-body: #CBD5E1;
|
||||
--text-muted: #8E9FAA;
|
||||
@@ -114,28 +121,53 @@ button, input, select, textarea {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--text-main);
|
||||
line-height: 1.25;
|
||||
/* Bebas Neue con tracking específico para nombres del ecosistema */
|
||||
.font-bebas-tracking {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
letter-spacing: 0.445em;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Barlow Semicondensed Bold para H1 */
|
||||
h1 {
|
||||
font-family: 'Barlow Semi Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: clamp(2.2rem, 5vw, 4.5rem);
|
||||
line-height: 1.15;
|
||||
color: var(--text-main);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
|
||||
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
|
||||
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
|
||||
h4 { font-size: 1.25rem; }
|
||||
|
||||
/* Barlow Condensed Medium para Eyebrows */
|
||||
.eyebrow {
|
||||
display: inline-block;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--ide-accent);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
font-family: 'Barlow Semi Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
|
||||
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
|
||||
h4 { font-size: 1.25rem; }
|
||||
|
||||
/* Texto general con Plus Jakarta Sans */
|
||||
p, li, .lead-text, .text-body, .text-muted {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
}
|
||||
|
||||
.lead-text {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-muted);
|
||||
@@ -204,25 +236,6 @@ h4 { font-size: 1.25rem; }
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Logo SVG interactivo por defecto */
|
||||
.brand-logo-svg {
|
||||
height: 38px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.brand-logo-svg .logo-text {
|
||||
fill: var(--ide-primary);
|
||||
transition: fill var(--transition-normal);
|
||||
}
|
||||
|
||||
.brand-logo-svg .logo-accent {
|
||||
fill: var(--ide-accent);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .brand-logo-svg .logo-text {
|
||||
fill: #FFFFFF;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -231,12 +244,15 @@ h4 { font-size: 1.25rem; }
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 0.95rem;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: var(--text-body);
|
||||
position: relative;
|
||||
padding: 0.35rem 0;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link.active {
|
||||
@@ -259,6 +275,32 @@ h4 { font-size: 1.25rem; }
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.nav-item.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background: var(--bg-surface);
|
||||
list-style: none;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
min-width: 180px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dropdown-menu .nav-link {
|
||||
display: block;
|
||||
padding: 8px 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-item.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Switch de Tema Claro/Oscuro */
|
||||
.theme-toggle-btn {
|
||||
@@ -288,7 +330,7 @@ h4 { font-size: 1.25rem; }
|
||||
|
||||
/* --- Botón Hamburguesa Móvil --- */
|
||||
.mobile-toggle-btn {
|
||||
display: none; /* Oculto por defecto en desktop */
|
||||
display: none;
|
||||
background: var(--bg-subtle);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-main);
|
||||
@@ -308,7 +350,6 @@ h4 { font-size: 1.25rem; }
|
||||
}
|
||||
|
||||
/* --- Menú Móvil Overlay --- */
|
||||
/* --- Overlay oscuro detrás del drawer --- */
|
||||
.mobile-menu-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
@@ -349,7 +390,6 @@ h4 { font-size: 1.25rem; }
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* Cabecera del drawer con botón cerrar */
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -388,8 +428,10 @@ h4 { font-size: 1.25rem; }
|
||||
}
|
||||
|
||||
.mobile-nav-links .nav-link {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* --- 6. Botones --- */
|
||||
@@ -398,8 +440,11 @@ h4 { font-size: 1.25rem; }
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 2.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.09em;
|
||||
padding: 0.75rem 1.6rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1.5px solid transparent;
|
||||
@@ -543,25 +588,17 @@ h4 { font-size: 1.25rem; }
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.hero-card-entry .entry-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background-color: var(--ide-accent-soft);
|
||||
color: var(--ide-accent);
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-card-entry h3 {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.hero-card-entry p {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
@@ -569,12 +606,15 @@ h4 { font-size: 1.25rem; }
|
||||
|
||||
.hero-card-entry .entry-link-text {
|
||||
margin-top: 1rem;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
color: var(--ide-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Gráfico Conceptual Nodos / Infinito */
|
||||
@@ -600,14 +640,22 @@ h4 { font-size: 1.25rem; }
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* --- 9. Bloque 2: La Tensión y El Quiebre --- */
|
||||
.infinito-camino-box .font-bebas-tracking {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
letter-spacing: 0.445em;
|
||||
font-size: 1.3rem;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* --- 9. Bloque 2: La Tensión y El Quiebre
|
||||
.tension-box {
|
||||
background-color: var(--bg-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: clamp(2rem, 5vw, 3.5rem);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
}--- */
|
||||
|
||||
/* --- 10. Bloque 3: La Brújula IDE (Diagnóstico Interactivo) --- */
|
||||
.brujula-container {
|
||||
@@ -629,6 +677,13 @@ h4 { font-size: 1.25rem; }
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.brujula-header h2 {
|
||||
font-family: 'Barlow Semi Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.brujula-progress-bar {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
@@ -654,6 +709,13 @@ h4 { font-size: 1.25rem; }
|
||||
display: block;
|
||||
}
|
||||
|
||||
.brujula-step h3 {
|
||||
font-family: 'Barlow Semi Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.brujula-options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -685,6 +747,14 @@ h4 { font-size: 1.25rem; }
|
||||
background-color: var(--ide-accent-soft);
|
||||
}
|
||||
|
||||
.brujula-option-card .opt-title {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.brujula-radio-bullet {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@@ -734,6 +804,15 @@ h4 { font-size: 1.25rem; }
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.method-step-card h3 {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: 0.6rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.method-num {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 2.2rem;
|
||||
@@ -770,19 +849,58 @@ h4 { font-size: 1.25rem; }
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.65rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.445em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.badge-excellence { background-color: rgba(10, 72, 94, 0.15); color: var(--ide-primary); }
|
||||
[data-theme="dark"] .badge-excellence { background-color: rgba(10, 72, 94, 0.4); color: #4fb389; }
|
||||
.ecosystem-card h3 {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.badge-project { background-color: rgba(238, 184, 90, 0.15); color: #ed8d01; }
|
||||
.badge-academy { background-color: rgba(245, 70, 11, 0.15); color: var(--ide-excellence); }
|
||||
.badge-digital { background-color: rgba(99, 102, 241, 0.15); color: #2c69ab; }
|
||||
.badge-excellence {
|
||||
background-color: rgba(79, 179, 137, 0.15);
|
||||
color: var(--ide-excellence);
|
||||
}
|
||||
[data-theme="dark"] .badge-excellence {
|
||||
background-color: rgba(79, 179, 137, 0.25);
|
||||
color: var(--ide-excellence);
|
||||
}
|
||||
|
||||
.badge-project {
|
||||
background-color: rgba(237, 141, 1, 0.15);
|
||||
color: var(--ide-projects);
|
||||
}
|
||||
[data-theme="dark"] .badge-project {
|
||||
background-color: rgba(237, 141, 1, 0.25);
|
||||
color: var(--ide-projects);
|
||||
}
|
||||
|
||||
.badge-academy {
|
||||
background-color: rgba(168, 60, 65, 0.15);
|
||||
color: var(--ide-academy);
|
||||
}
|
||||
[data-theme="dark"] .badge-academy {
|
||||
background-color: rgba(168, 60, 65, 0.25);
|
||||
color: var(--ide-academy);
|
||||
}
|
||||
|
||||
.badge-digital {
|
||||
background-color: rgba(44, 105, 171, 0.15);
|
||||
color: var(--ide-digital);
|
||||
}
|
||||
[data-theme="dark"] .badge-digital {
|
||||
background-color: rgba(44, 105, 171, 0.25);
|
||||
color: var(--ide-digital);
|
||||
}
|
||||
|
||||
/* --- 13. Modales (Pop-ups de Desafíos y Cursos) --- */
|
||||
.modal-backdrop {
|
||||
@@ -850,6 +968,11 @@ h4 { font-size: 1.25rem; }
|
||||
color: var(--ide-accent);
|
||||
}
|
||||
|
||||
.modal-window h3 {
|
||||
font-family: 'Barlow Semi Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* --- 14. Espacio de Imágenes Genéricas / Placeholders --- */
|
||||
.img-placeholder {
|
||||
width: 100%;
|
||||
@@ -873,12 +996,13 @@ h4 { font-size: 1.25rem; }
|
||||
.img-placeholder-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--ide-gray);
|
||||
color: var(--ide-dark-gray);
|
||||
}
|
||||
|
||||
.img-placeholder-label {
|
||||
font-size: 0.85rem;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
@@ -890,15 +1014,19 @@ h4 { font-size: 1.25rem; }
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 0.4rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.8rem 1rem;
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
font-size: 0.95rem;
|
||||
background-color: var(--bg-body);
|
||||
border: 1px solid var(--border-color);
|
||||
@@ -918,6 +1046,7 @@ h4 { font-size: 1.25rem; }
|
||||
border-radius: var(--radius-sm);
|
||||
margin-top: 1rem;
|
||||
display: none;
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
@@ -949,8 +1078,11 @@ h4 { font-size: 1.25rem; }
|
||||
color: var(--text-body);
|
||||
padding: 0.5rem 1.1rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 0.88rem;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.88rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
@@ -980,131 +1112,5 @@ h4 { font-size: 1.25rem; }
|
||||
}
|
||||
|
||||
.footer-logo-wrap {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.footer-heading {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: var(--ide-accent);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* --- 18. Animaciones y Clases Utilitarias --- */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.animate-fade {
|
||||
animation: fadeIn 0.4s ease forwards;
|
||||
}
|
||||
|
||||
.text-center { text-align: center; }
|
||||
.text-left { text-align: left; }
|
||||
.text-accent { color: var(--ide-accent); }
|
||||
.text-primary { color: var(--ide-primary); }
|
||||
.text-muted { color: var(--text-muted); }
|
||||
|
||||
.bg-subtle-section {
|
||||
background-color: var(--bg-subtle);
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: var(--border-color);
|
||||
width: 100%;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* --- 19. Media Queries (Mobile First / Responsive) --- */
|
||||
@media (max-width: 1024px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.grid-4, .ecosystem-grid, .method-steps-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-links, .nav-actions .btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.mobile-toggle-btn {
|
||||
display: flex !important; /* Forzamos la visualización */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.mobile-toggle-btn:hover {
|
||||
background: var(--border-color);
|
||||
color: var(--ide-accent);
|
||||
}
|
||||
|
||||
.hero-doble-entrada {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-2, .grid-3, .brujula-options-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-4, .ecosystem-grid, .method-steps-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
margin-bottom: 1.
|
||||
}
|
||||
@@ -17,9 +17,14 @@
|
||||
<li><a href="desafios.html" class="nav-link">Desafíos</a></li>
|
||||
<li><a href="soluciones.html" class="nav-link">Soluciones</a></li>
|
||||
<li><a href="ecosistema.html" class="nav-link">Ecosistema</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle">Nosotros</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="somos-ide.html" class="nav-link">Somos IDE</a></li>
|
||||
<li><a href="ide-academy.html" class="nav-link">IDE Academy</a></li>
|
||||
<li><a href="insights.html" class="nav-link">Insights</a></li>
|
||||
<li><a href="somos-ide.html" class="nav-link">Somos IDE</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Acciones: Switch de Tema y CTA Principal -->
|
||||
|
||||
@@ -0,0 +1,429 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IDE Consultores | Todo está conectado</title>
|
||||
<!-- SEO Meta Tags -->
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
|
||||
<meta name="description" content="Comprender el todo para saber dónde intervenir. Ecosistema de gestión, proyectos, formación y transformación digital.">
|
||||
<meta property="og:title" content="IDE Consultores | Todo está conectado">
|
||||
<meta property="og:description" content="En una organización, cada decisión genera efectos más allá del lugar donde interviene. Ecosistema de capacidades integradas.">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Estilos Centralizados -->
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header Modular (Inyectado dinámicamente por JS) -->
|
||||
<header id="site-header"></header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- BLOQUE 1: HERO - LA DOBLE VÍA DE ENTRADA -->
|
||||
<section class="hero-wrapper section-padding">
|
||||
<div class="container">
|
||||
<div class="hero-grid">
|
||||
|
||||
<div>
|
||||
<span class="eyebrow">TODO ESTÁ CONECTADO</span>
|
||||
<h1 style="margin-bottom: 1.25rem; line-height: 1.15;">
|
||||
Mejorar una parte no siempre mejora el todo.
|
||||
</h1>
|
||||
<p class="lead-text" style="margin-bottom: 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>
|
||||
|
||||
<!-- Doble Entrada Estratégica -->
|
||||
<div class="hero-doble-entrada">
|
||||
<!-- Camino A: Por Desafío -->
|
||||
<a href="desafios.html" class="hero-card-entry" id="hero-entry-desafios">
|
||||
<div>
|
||||
<!-- <div class="entry-icon">🎯</div> -->
|
||||
<h3>Tengo un desafío</h3>
|
||||
<p>Sé que algo no funciona o quiero mejorar un área, pero no tengo claro qué solución necesito.</p>
|
||||
</div>
|
||||
<div class="entry-link-text">
|
||||
Explorar por Desafíos <span>→</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Camino B: Por Solución Concreta -->
|
||||
<a href="soluciones.html" class="hero-card-entry" id="hero-entry-soluciones">
|
||||
<div>
|
||||
<!-- <div class="entry-icon">⚡</div> -->
|
||||
<h3>Busco una solución</h3>
|
||||
<p>Busco una implementación puntual (ISO 9001, PMO, Capacitación In-Company, IA en Procesos).</p>
|
||||
</div>
|
||||
<div class="entry-link-text">
|
||||
Ir a Soluciones Concretas <span>→</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visual Conceptual de Nodos / Infinito + Camino
|
||||
<div class="hero-visual-graphic">
|
||||
<div class="infinito-camino-box">
|
||||
<svg viewBox="0 0 280 200" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 100%; max-width: 240px; margin-bottom: 1.25rem;">
|
||||
<path d="M70 100 C20 40, 20 160, 70 100 C120 40, 160 160, 210 100 C260 40, 260 160, 210 100" stroke="var(--ide-primary)" stroke-width="6" stroke-linecap="round" stroke-dasharray="2 1" opacity="0.3"/>
|
||||
<path d="M50 100 C50 65 80 65 110 100 C140 135 170 135 200 100 C230 65 260 65 260 100 C260 135 230 135 200 100 C170 65 140 65 110 100 C80 135 50 135 50 100 Z" stroke="var(--ide-accent)" stroke-width="4" fill="none" stroke-linecap="round"/>
|
||||
|
||||
<circle cx="50" cy="100" r="7" fill="var(--ide-primary)"/>
|
||||
<circle cx="110" cy="100" r="7" fill="var(--ide-accent)"/>
|
||||
<circle cx="200" cy="100" r="7" fill="var(--ide-primary-dark)"/>
|
||||
<circle cx="260" cy="100" r="7" fill="var(--ide-accent-hover)"/>
|
||||
|
||||
<line x1="50" y1="100" x2="260" y2="100" stroke="var(--ide-gray)" stroke-width="1.5" stroke-dasharray="4 4"/>
|
||||
</svg>
|
||||
<div class="font-bebas" style="font-size: 1.3rem; color: var(--text-main); letter-spacing: 0.08em; margin-bottom: 0.25rem;">
|
||||
CONECTIVIDAD SISTÉMICA
|
||||
</div>
|
||||
<p style="font-size: 0.85rem; color: var(--text-muted); line-height: 1.4;">
|
||||
Procesos • Personas • Proyectos • Tecnología funcionando en conjunto.
|
||||
</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOQUE 2: LA TENSIÓN Y EL QUIEBRE -->
|
||||
<section class="section-padding">
|
||||
<div class="container" style="background-color: #6366F1;">
|
||||
<div class="tension-box">
|
||||
<div style="max-width: 800px; margin: 0 auto; text-align: center;">
|
||||
<span class="eyebrow">LA INCOMODIDAD PRODUCTIVA</span>
|
||||
<h2 style="margin-bottom: 1.5rem;">
|
||||
Soluciones aisladas para problemas que nunca estuvieron realmente aislados.
|
||||
</h2>
|
||||
<p style="font-size: 1.1rem; color: var(--text-body); line-height: 1.7; margin-bottom: 1.5rem;">
|
||||
Las organizaciones ya tienen procesos, herramientas, personas y tecnología. Sin embargo, algunos desafíos persisten. ¿Por qué? Porque sumar soluciones inconexas no genera transformación. Una mejora en un área puede crear tensiones en otra si no se comprende el sistema completo.
|
||||
</p>
|
||||
<div style="display: inline-block; padding: 0.75rem 1.5rem; background-color: var(--bg-subtle); border-radius: var(--radius-sm); font-weight: 600; color: var(--ide-primary); font-size: 0.95rem;">
|
||||
¿Qué impacto produjo esa mejora en el conjunto?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOQUE 3: LA BRÚJULA IDE (DIAGNÓSTICO INTERACTIVO DE 3 PASOS) -->
|
||||
<section class="section-padding-sm" id="brujula">
|
||||
<div class="container">
|
||||
<div class="brujula-container" id="brujula-interactive-app">
|
||||
|
||||
<div class="brujula-header">
|
||||
<div>
|
||||
<span class="eyebrow" style="color: var(--ide-accent);">HERRAMIENTA DE CONSULTORÍA INTERACTIVA</span>
|
||||
<h2 style="font-size: 1.75rem; margin-bottom: 0.5rem;">La Brújula IDE: Diagnóstico Rápido de Conectividad</h2>
|
||||
<p style="font-size: 0.95rem; color: var(--text-muted);">
|
||||
¿No estás seguro de por dónde empezar? Respondé 2 preguntas breves y te orientamos sobre qué capacidades pueden aportar mayor valor a tu contexto.
|
||||
</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<span id="brujula-step-indicator" style="font-weight: 700; font-size: 0.9rem; color: var(--ide-accent);">Paso 1 de 3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barra de Progreso -->
|
||||
<div class="brujula-progress-bar">
|
||||
<div id="brujula-progress-fill" class="brujula-progress-fill"></div>
|
||||
</div>
|
||||
|
||||
<!-- PASO 1: EL FOCO / PRIORIDAD -->
|
||||
<div class="brujula-step active" id="brujula-step-1">
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">1. ¿Cuál es tu prioridad u objetivo principal hoy?</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor represente lo que buscan impulsar:</p>
|
||||
|
||||
<div class="brujula-options-grid">
|
||||
<div class="brujula-option-card brujula-opt-step1" data-val="iso" id="opt-foco-iso">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Mejorar la gestión y cumplir normas (ISO)</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Ordenar procesos, certificar ISO 9001/14001/45001 y elevar la calidad.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brujula-option-card brujula-opt-step1" data-val="proyectos" id="opt-foco-proyectos">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Ejecutar proyectos con resultados garantizados</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Profesionalizar la gestión, crear una PMO y evitar desvíos en plazos.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brujula-option-card brujula-opt-step1" data-val="equipo" id="opt-foco-equipo">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Desarrollar las capacidades de mi equipo</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Capacitación In-Company, liderazgo, pensamiento de procesos y cultura.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brujula-option-card brujula-opt-step1" data-val="tecnologia" id="opt-foco-tecnologia">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Integrar tecnología, automatización o IA</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Transformar digitalmente las tareas rutinarias y aprovechar datos.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; flex-wrap: wrap; gap: 1rem;">
|
||||
<a href="soluciones.html" class="btn btn-ghost btn-sm">Ya sé lo que necesito, ir directo a Soluciones →</a>
|
||||
<button id="brujula-btn-next1" class="btn btn-primary" disabled>Continuar al Paso 2 →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PASO 2: EL DOLOR / OBSTÁCULO -->
|
||||
<div class="brujula-step" id="brujula-step-2">
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">2. ¿Qué es lo que más dificulta avanzar en este momento?</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Identifiquemos la raíz que suele frenar los resultados:</p>
|
||||
|
||||
<div class="brujula-options-grid">
|
||||
<div class="brujula-option-card brujula-opt-step2" data-val="procesos" id="opt-dolor-procesos">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Falta de claridad en los procesos</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Las áreas trabajan en silos y la información no fluye adecuadamente.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brujula-option-card brujula-opt-step2" data-val="desvios" id="opt-dolor-desvios">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Los proyectos se retrasan o se desvían</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Cuesta concretar las iniciativas estratégicas en tiempo y forma.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brujula-option-card brujula-opt-step2" data-val="adopcion" id="opt-dolor-adopcion">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">El equipo no adopta los cambios</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Hay resistencia cultural o falta de capacitación para sostener las mejoras.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brujula-option-card brujula-opt-step2" data-val="herramientas" id="opt-dolor-herramientas">
|
||||
<div class="brujula-radio-bullet"></div>
|
||||
<div>
|
||||
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Tenemos herramientas, pero no las aprovechamos</strong>
|
||||
<span style="font-size: 0.84rem; color: var(--text-muted);">Se incorporó software o tecnología pero no se integró con la operación diaria.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: flex-end; margin-top: 2rem;">
|
||||
<button id="brujula-btn-next2" class="btn btn-accent" disabled>Obtener Orientación Personalizada →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PASO 3: EL RESULTADO DINÁMICO -->
|
||||
<div class="brujula-step" id="brujula-step-3">
|
||||
<div class="brujula-result-box">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;">
|
||||
<span class="ecosystem-badge badge-project" style="font-size: 0.85rem;">Combinación Sugerida de Capacidades</span>
|
||||
</div>
|
||||
<h3 id="brujula-result-capacidades" style="font-size: 1.4rem; color: var(--ide-primary); margin-bottom: 0.75rem;">
|
||||
IDE Excellence + IDE Academy
|
||||
</h3>
|
||||
<p id="brujula-result-desc" style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1.5rem;">
|
||||
La implementación de procesos y normas es el primer paso. Para que sea sostenible, suele ser clave trabajar también en el desarrollo de capacidades de las personas.
|
||||
</p>
|
||||
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
|
||||
<a id="brujula-result-cta" href="contacto.html" class="btn btn-primary">
|
||||
Conversar con un especialista sobre este diagnóstico →
|
||||
</a>
|
||||
<button id="brujula-btn-restart" class="btn btn-outline btn-sm">
|
||||
Reiniciar Diagnóstico
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOQUE 4: EL MÉTODO IDE (4 PASOS) -->
|
||||
<section class="section-padding bg-subtle-section">
|
||||
<div class="container">
|
||||
<div style="text-align: center; max-width: 760px; margin: 0 auto 3.5rem auto;">
|
||||
<span class="eyebrow">LA NUEVA FORMA DE MIRAR</span>
|
||||
<h2>Comprender el todo para saber dónde intervenir</h2>
|
||||
<p class="lead-text" style="margin: 0 auto;">
|
||||
No se trata de intervenir en todo ni de aplicar fórmulas estandarizadas. Guiamos cada intervención bajo un criterio metodológico riguroso:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="method-steps-grid">
|
||||
<div class="method-step-card">
|
||||
<div class="method-num">01</div>
|
||||
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Comprender el Todo</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Para identificar las verdaderas relaciones y causas raíz detrás de cada desafío.</p>
|
||||
</div>
|
||||
|
||||
<div class="method-step-card">
|
||||
<div class="method-num">02</div>
|
||||
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Focalizar la Intervención</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Para actuar estratégicamente donde se genera el mayor impacto y valor agregado.</p>
|
||||
</div>
|
||||
|
||||
<div class="method-step-card">
|
||||
<div class="method-num">03</div>
|
||||
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Integrar Capacidades</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Para que la transformación no quede limitada a una única solución aislada.</p>
|
||||
</div>
|
||||
|
||||
<div class="method-step-card">
|
||||
<div class="method-num">04</div>
|
||||
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Resultados Sostenibles</h3>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted);">Porque una verdadera mejora no debería solucionar un problema creando otro.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOQUE 5: EL ECOSISTEMA (4 CAPACIDADES) -->
|
||||
<section class="section-padding">
|
||||
<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>
|
||||
<span class="eyebrow">ECOSISTEMA INTEGRADO</span>
|
||||
<h2>Cuatro capacidades. Una misma mirada.</h2>
|
||||
<p class="lead-text">
|
||||
No son unidades separadas compitiendo por vender. Son capacidades complementarias que se activan según la necesidad real.
|
||||
</p>
|
||||
</div>
|
||||
<a href="ecosistema.html" class="btn btn-outline btn-sm">Ver Ecosistema Completo →</a>
|
||||
</div>
|
||||
|
||||
<div class="ecosystem-grid">
|
||||
|
||||
<!-- Excellence -->
|
||||
<div class="ecosystem-card">
|
||||
<div>
|
||||
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Para fortalecer la gestión</h3>
|
||||
<p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55;">
|
||||
Sistemas de gestión, normas ISO (9001, 14001, 45001, 21001), procesos, calidad y mejora continua con sentido de negocio.
|
||||
</p>
|
||||
</div>
|
||||
<a href="ecosistema.html#excellence" style="font-size: 0.88rem; font-weight: 700; color: var(--ide-primary);">Explorar Excellence →</a>
|
||||
</div>
|
||||
|
||||
<!-- Project -->
|
||||
<div class="ecosystem-card">
|
||||
<div>
|
||||
<span class="ecosystem-badge badge-project">IDE Project</span>
|
||||
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Para convertir proyectos en resultados</h3>
|
||||
<p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55;">
|
||||
Dirección estratégica de proyectos, implementación de PMO, metodologías ágiles/híbridas y control de cumplimiento.
|
||||
</p>
|
||||
</div>
|
||||
<a href="ecosistema.html#project" style="font-size: 0.88rem; font-weight: 700; color: var(--ide-accent);">Explorar Project →</a>
|
||||
</div>
|
||||
|
||||
<!-- Academy -->
|
||||
<div class="ecosystem-card">
|
||||
<div>
|
||||
<span class="ecosystem-badge badge-academy">IDE Academy</span>
|
||||
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Para desarrollar capacidades</h3>
|
||||
<p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55;">
|
||||
Formación ejecutiva e In-Company para que los equipos adopten los cambios y sostengan la transformación en el tiempo.
|
||||
</p>
|
||||
</div>
|
||||
<a href="ide-academy.html" style="font-size: 0.88rem; font-weight: 700; color: #D97706;">Explorar Academy →</a>
|
||||
</div>
|
||||
|
||||
<!-- Digital -->
|
||||
<div class="ecosystem-card">
|
||||
<div>
|
||||
<span class="ecosystem-badge badge-digital">IDE Digital</span>
|
||||
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Para integrar tecnología con propósito</h3>
|
||||
<p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55;">
|
||||
Inteligencia artificial aplicada, automatización de flujos de procesos, tableros de datos y transformación digital sensata.
|
||||
</p>
|
||||
</div>
|
||||
<a href="ecosistema.html#digital" style="font-size: 0.88rem; font-weight: 700; color: #6366F1;">Explorar Digital →</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOQUE 6: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
|
||||
<section class="section-padding-sm bg-subtle-section">
|
||||
<div class="container">
|
||||
<div style="text-align: center; margin-bottom: 2.5rem;">
|
||||
<span class="eyebrow">ÁMBITOS DE EXPERIENCIA</span>
|
||||
<h2 style="font-size: 1.8rem;">Acompañamos la transformación en contextos complejos</h2>
|
||||
<p style="font-size: 0.95rem; color: var(--text-muted); max-width: 65ch; margin: 0.5rem auto 0 auto;">
|
||||
Nuestra metodología se adapta a las particularidades y normativas de múltiples industrias en la región.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid-4" style="text-align: center;">
|
||||
<div class="card" style="padding: 1.5rem 1rem;">
|
||||
<!-- <div style="font-size: 2rem; margin-bottom: 0.5rem;">🌾</div> -->
|
||||
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Agro & Alimentos</h4>
|
||||
<p style="font-size: 0.82rem; color: var(--text-muted);">Trazabilidad, normas de inocuidad y profesionalización de operaciones.</p>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding: 1.5rem 1rem;">
|
||||
<!-- <div style="font-size: 2rem; margin-bottom: 0.5rem;">🏭</div> -->
|
||||
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Industria & Manufactura</h4>
|
||||
<p style="font-size: 0.82rem; color: var(--text-muted);">Eficiencia operativa, seguridad (ISO 45001) y calidad sostenida.</p>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding: 1.5rem 1rem;">
|
||||
<!-- <div style="font-size: 2rem; margin-bottom: 0.5rem;">🏥</div> -->
|
||||
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Salud & Servicios</h4>
|
||||
<p style="font-size: 0.82rem; color: var(--text-muted);">Gestión por procesos críticos, experiencia del paciente y cumplimiento.</p>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding: 1.5rem 1rem;">
|
||||
<!-- <div style="font-size: 2rem; margin-bottom: 0.5rem;">🎓</div> -->
|
||||
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Educación & Gobierno</h4>
|
||||
<p style="font-size: 0.82rem; color: var(--text-muted);">Norma ISO 21001, transformación de planes y gestión institucional.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLOQUE 7: CTA FINAL DE CONVERSIÓN -->
|
||||
<section class="section-padding">
|
||||
<div class="container">
|
||||
<div class="card" style="background: linear-gradient(135deg, var(--ide-primary-dark) 0%, var(--ide-primary) 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>
|
||||
<h2 style="color: #FFFFFF; font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem;">
|
||||
¿Qué desafío querés transformar?
|
||||
</h2>
|
||||
<p style="color: #E2E8F0; font-size: 1.15rem; max-width: 60ch; margin: 0 auto 2.5rem auto; line-height: 1.6;">
|
||||
No necesitás tener la solución predefinida para empezar. Empecemos por entender el contexto de tu organización.
|
||||
</p>
|
||||
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
|
||||
<a href="contacto.html" class="btn btn-accent btn-lg">HABLEMOS</a>
|
||||
<a href="https://wa.me/5491123456789" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-lg" style="border-color: rgba(255,255,255,0.4); color: #FFFFFF;">
|
||||
Escribir por WhatsApp
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer Modular (Inyectado dinámicamente por JS) -->
|
||||
<footer id="site-footer"></footer>
|
||||
|
||||
<!-- Scripts Centralizados -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+6
-6
@@ -4,6 +4,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IDE Consultores | Todo está conectado</title>
|
||||
<!-- SEO Meta Tags -->
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
|
||||
<meta name="description" content="Comprender el todo para saber dónde intervenir. Ecosistema de gestión, proyectos, formación y transformación digital.">
|
||||
<meta property="og:title" content="IDE Consultores | Todo está conectado">
|
||||
<meta property="og:description" content="En una organización, cada decisión genera efectos más allá del lugar donde interviene. Ecosistema de capacidades integradas.">
|
||||
@@ -61,21 +64,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visual Conceptual de Nodos / Infinito + Camino -->
|
||||
<!-- Visual Conceptual de Nodos / Infinito + Camino
|
||||
<div class="hero-visual-graphic">
|
||||
<div class="infinito-camino-box">
|
||||
<svg viewBox="0 0 280 200" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 100%; max-width: 240px; margin-bottom: 1.25rem;">
|
||||
<!-- Concepto Infinito + Camino con nodos interactivos -->
|
||||
<path d="M70 100 C20 40, 20 160, 70 100 C120 40, 160 160, 210 100 C260 40, 260 160, 210 100" stroke="var(--ide-primary)" stroke-width="6" stroke-linecap="round" stroke-dasharray="2 1" opacity="0.3"/>
|
||||
<path d="M50 100 C50 65 80 65 110 100 C140 135 170 135 200 100 C230 65 260 65 260 100 C260 135 230 135 200 100 C170 65 140 65 110 100 C80 135 50 135 50 100 Z" stroke="var(--ide-accent)" stroke-width="4" fill="none" stroke-linecap="round"/>
|
||||
|
||||
<!-- Nodos de Capacidades -->
|
||||
<circle cx="50" cy="100" r="7" fill="var(--ide-primary)"/>
|
||||
<circle cx="110" cy="100" r="7" fill="var(--ide-accent)"/>
|
||||
<circle cx="200" cy="100" r="7" fill="var(--ide-primary-dark)"/>
|
||||
<circle cx="260" cy="100" r="7" fill="var(--ide-accent-hover)"/>
|
||||
|
||||
<!-- Conexión fluida -->
|
||||
<line x1="50" y1="100" x2="260" y2="100" stroke="var(--ide-gray)" stroke-width="1.5" stroke-dasharray="4 4"/>
|
||||
</svg>
|
||||
<div class="font-bebas" style="font-size: 1.3rem; color: var(--text-main); letter-spacing: 0.08em; margin-bottom: 0.25rem;">
|
||||
@@ -85,7 +85,7 @@
|
||||
Procesos • Personas • Proyectos • Tecnología funcionando en conjunto.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -103,7 +103,7 @@
|
||||
<p style="font-size: 1.1rem; color: var(--text-body); line-height: 1.7; margin-bottom: 1.5rem;">
|
||||
Las organizaciones ya tienen procesos, herramientas, personas y tecnología. Sin embargo, algunos desafíos persisten. ¿Por qué? Porque sumar soluciones inconexas no genera transformación. Una mejora en un área puede crear tensiones en otra si no se comprende el sistema completo.
|
||||
</p>
|
||||
<div style="display: inline-block; padding: 0.75rem 1.5rem; background-color: var(--bg-subtle); border-radius: var(--radius-sm); font-weight: 600; color: var(--ide-primary); font-size: 0.95rem;">
|
||||
<div style="display: inline-block; padding: 0.75rem 1.5rem; background-color: var(--bg-subtle); border-radius: var(--radius-sm); font-weight: 600; color: var(--text-primary); font-size: 0.95rem;">
|
||||
¿Qué impacto produjo esa mejora en el conjunto?
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+2
-2
@@ -28,7 +28,7 @@ async function loadIncludes() {
|
||||
|
||||
try {
|
||||
if (headerElem && headerElem.children.length === 0) {
|
||||
const headerRes = await fetch('/includes/header.html', { cache: 'no-store' });
|
||||
const headerRes = await fetch('./includes/header.html', { cache: 'no-store' });
|
||||
if (headerRes.ok) {
|
||||
headerElem.innerHTML = await headerRes.text();
|
||||
highlightActiveNavLink();
|
||||
@@ -44,7 +44,7 @@ async function loadIncludes() {
|
||||
}
|
||||
|
||||
if (footerElem) {
|
||||
const footerRes = await fetch('/includes/footer.html', { cache: 'no-store' });
|
||||
const footerRes = await fetch('./includes/footer.html', { cache: 'no-store' });
|
||||
if (footerRes.ok) {
|
||||
footerElem.innerHTML = await footerRes.text();
|
||||
}
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user