diff --git a/assets/img/cards/agro.png b/assets/img/cards/agro.png new file mode 100644 index 0000000..4d4f507 Binary files /dev/null and b/assets/img/cards/agro.png differ diff --git a/assets/img/cards/edu.png b/assets/img/cards/edu.png new file mode 100644 index 0000000..2d37657 Binary files /dev/null and b/assets/img/cards/edu.png differ diff --git a/assets/img/cards/indu.png b/assets/img/cards/indu.png new file mode 100644 index 0000000..2177d94 Binary files /dev/null and b/assets/img/cards/indu.png differ diff --git a/assets/img/cards/salud.png b/assets/img/cards/salud.png new file mode 100644 index 0000000..fdd4c0d Binary files /dev/null and b/assets/img/cards/salud.png differ diff --git a/assets/img/cards/teco.png b/assets/img/cards/teco.png new file mode 100644 index 0000000..248aa7c Binary files /dev/null and b/assets/img/cards/teco.png differ diff --git a/assets/img/hero/hero_001.jpg b/assets/img/hero/hero_001.jpg new file mode 100644 index 0000000..c59f3be Binary files /dev/null and b/assets/img/hero/hero_001.jpg differ diff --git a/assets/img/hero/hero_002.jpg b/assets/img/hero/hero_002.jpg new file mode 100644 index 0000000..b16a147 Binary files /dev/null and b/assets/img/hero/hero_002.jpg differ diff --git a/assets/img/hero/hero_003.png b/assets/img/hero/hero_003.png new file mode 100644 index 0000000..1f712f8 Binary files /dev/null and b/assets/img/hero/hero_003.png differ diff --git a/assets/img/hero/hero_004.png b/assets/img/hero/hero_004.png new file mode 100644 index 0000000..14dd5e9 Binary files /dev/null and b/assets/img/hero/hero_004.png differ diff --git a/assets/img/hero/hero_005.png b/assets/img/hero/hero_005.png new file mode 100644 index 0000000..12a4894 Binary files /dev/null and b/assets/img/hero/hero_005.png differ diff --git a/assets/img/hero/hero_006.png b/assets/img/hero/hero_006.png new file mode 100644 index 0000000..49b66e3 Binary files /dev/null and b/assets/img/hero/hero_006.png differ diff --git a/assets/img/hero/hero_007.png b/assets/img/hero/hero_007.png new file mode 100644 index 0000000..6899b50 Binary files /dev/null and b/assets/img/hero/hero_007.png differ diff --git a/assets/img/hero/hero_017.png b/assets/img/hero/hero_017.png new file mode 100644 index 0000000..280df0d Binary files /dev/null and b/assets/img/hero/hero_017.png differ diff --git a/assets/img/slide/ide1.png b/assets/img/slide/ide1.png new file mode 100644 index 0000000..ddaab5f Binary files /dev/null and b/assets/img/slide/ide1.png differ diff --git a/assets/img/slide/ide2.png b/assets/img/slide/ide2.png new file mode 100644 index 0000000..fae824b Binary files /dev/null and b/assets/img/slide/ide2.png differ diff --git a/assets/img/slide/ide3.png b/assets/img/slide/ide3.png new file mode 100644 index 0000000..1448f90 Binary files /dev/null and b/assets/img/slide/ide3.png differ diff --git a/assets/img/slide/ide4.png b/assets/img/slide/ide4.png new file mode 100644 index 0000000..75b24ff Binary files /dev/null and b/assets/img/slide/ide4.png differ diff --git a/assets/img/slide/slide-academy.png b/assets/img/slide/slide-academy.png new file mode 100644 index 0000000..3597627 Binary files /dev/null and b/assets/img/slide/slide-academy.png differ diff --git a/assets/img/slide/slide-digital.png b/assets/img/slide/slide-digital.png new file mode 100644 index 0000000..aac07c0 Binary files /dev/null and b/assets/img/slide/slide-digital.png differ diff --git a/assets/img/slide/slide-excellence.png b/assets/img/slide/slide-excellence.png new file mode 100644 index 0000000..653c3e2 Binary files /dev/null and b/assets/img/slide/slide-excellence.png differ diff --git a/assets/img/slide/slide-projects.png b/assets/img/slide/slide-projects.png new file mode 100644 index 0000000..76d5d80 Binary files /dev/null and b/assets/img/slide/slide-projects.png differ diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..ef2191c --- /dev/null +++ b/css/index.css @@ -0,0 +1,534 @@ + +/* ========================================================= + ECOSISTEMA - CARRUSEL + Variables nuevas + estilos del bloque refactorizado + ========================================================= */ + +:root { + /* Color inactivo de los botones (rojo del esquema) */ + --eco-tab-inactive: var(--ide-grey); + --eco-tab-inactive-text: #ffffff; + + /* Color de fondo inactivo de la tarjeta (naranja del esquema) */ + --eco-card-bg: #e88a0a; + + /* Texto sobre la zona oscura de la tarjeta */ + --eco-text-dark: #0a0a0a; + --eco-text-muted-dark: #2a2a2a; + + /* Transiciones */ + --eco-fade-duration: 600ms; + --eco-tab-duration: 250ms; +} + +.herobg-1{ + background-image: + linear-gradient( + to right, + rgba(0, 0, 0, 0.6) 0%, + rgba(0, 0, 0, 0.3) 20%, + rgba(0, 0, 0, 0.15) 70%, + rgba(0, 0, 0, 0.0) 100% + ), + url('../assets/img/hero/hero_003.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +.herobg-2{ + background-image: + linear-gradient( + to right, + rgba(44,109,140, 1) 0%, + rgba(44,109,140, 0.5) 40%, + rgba(44,109,140, 0.2) 70%, + rgba(44,109,140, 0.05) 100% + ), + url('../assets/img/hero/hero_017.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + + +/* ---------- TABS / BOTONES ---------- */ +.ecosystem-tabs { + display: flex; + justify-content: center; + gap: 0.75rem; + flex-wrap: wrap; + margin-bottom: 1rem; +} + +.eco-tab { + appearance: none; + border: 2px solid var(--eco-tab-inactive); + background: var(--eco-tab-inactive); + color: var(--eco-tab-inactive-text); + font-weight: 700; + font-size: 0.95rem; + padding: 0.4rem 1.4rem; + border-radius: 999px; + cursor: pointer; + transition: + background-color var(--eco-tab-duration) ease, + color var(--eco-tab-duration) ease, + border-color var(--eco-tab-duration) ease, + transform var(--eco-tab-duration) ease; +} + +.eco-tab:hover { + transform: translateY(-2px); + filter: brightness(1.08); +} + +.eco-tab:focus-visible { + outline: 3px solid rgba(255, 255, 255, 0.6); + outline-offset: 2px; +} + +/* Estado activo: el color lo inyecta el JS vía data-color */ +.eco-tab.is-active { + color: #ffffff; + border-color: transparent; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); +} + +/* ---------- CARRUSEL (contenedor) ---------- */ +.ecosystem-carousel { + position: relative; + width: 100%; + aspect-ratio: 16 / 9; + max-height: 450px; + min-height: 360px; + border-radius: var(--radius-md, 12px); + overflow: hidden; + background: var(--eco-card-bg); + box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08)); +} + +/* ---------- SLIDE ---------- */ +.eco-slide { + position: absolute; + inset: 0; + opacity: 0; + visibility: hidden; + transition: + opacity var(--eco-fade-duration) ease, + visibility var(--eco-fade-duration) ease; +} + +.eco-slide.is-active { + opacity: 1; + visibility: visible; +} + +/* Imagen de fondo (placeholder) */ +.eco-slide__bg { + position: absolute; + inset: 0; + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +/* Degradado de derecha a izquierda: + transparente a la izquierda → color sólido a la derecha + para resaltar el contenido (logo + texto) */ +.eco-slide__overlay { + position: absolute; + inset: 0; + background: linear-gradient( + to left, + var(--eco-slide-color) 0%, + var(--eco-slide-color) 45%, + rgba(0, 0, 0, 0.15) 70%, + transparent 100% + ); +} + +/* ---------- CONTENIDO (logo + texto) ---------- */ +.eco-slide__content { + position: relative; + z-index: 2; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + padding: 2.5rem 3rem; + color: var(--eco-text-dark); +} + +/* Logo (PNG) - controlado por clase específica */ +.eco-slide__logo { + align-self: flex-end; + width: 210px; + height: 90px; + background-size: contain; + background-repeat: no-repeat; + background-position: right center; +} + +/* Texto */ +.eco-slide__text { + max-width: 35%; + margin-left: auto; /* empuja el bloque a la derecha */ + text-align: right; +} + +.eco-slide__text h3 { + font-size: 1.6rem; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.02em; + margin: 0 0 0.75rem 0; + color: var(--eco-text-dark); + line-height: 1.2; +} + +.eco-slide__text p { + font-size: 1.2rem; + line-height: 1.55; + color: var(--eco-text-muted-dark); + margin: 0 0 1.25rem 0; +} + +.eco-slide__link { + display: inline-block; + font-size: 0.95rem; + font-weight: 700; + color: var(--eco-text-dark); + text-decoration: none; + border-bottom: 2px solid currentColor; + padding-bottom: 2px; + transition: opacity 200ms ease; +} + +.eco-slide__link:hover { + opacity: 0.7; +} +/* ========================================================= + BRÚJULA - MARCA DE AGUA + ========================================================= */ +.brujula-section { + position: relative; + overflow: hidden; +} + +.brujula-watermark { + position: absolute; + right: -5%; + top: 50%; + transform: translateY(-50%) rotate(15deg); + width: 600px; + height: 600px; + opacity: 0.7; + pointer-events: none; + z-index: 0; + color: var(--ide-accent-soft); +} + +.brujula-watermark svg { + width: 100%; + height: 100%; +} + + +/* ========================================================= + BRÚJULA - BOTÓN VOLVER (reposicionado) + ========================================================= */ +.quiz-container { + position: relative; + z-index: 1; +} + +.quiz-back-btn { + position: absolute; + top: 1.5rem; + right: 1.5rem; + z-index: 10; + background: transparent; + border: 1px solid var(--text-muted, #888); + color: var(--text-muted, #888); + font-size: 0.85rem; + padding: 0.4rem 0.9rem; + border-radius: 6px; + cursor: pointer; + transition: all 200ms ease; +} + +.quiz-back-btn:hover { + background: rgba(255, 255, 255, 0.05); + color: #ffffff; + border-color: #ffffff; +} + +/* ========================================================= + BRÚJULA - HEADER DE PASO (para alinear título y botón) + ========================================================= */ +.quiz-step-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 1.5rem; + padding-right: 100px; /* Espacio para el botón volver */ +} + +/* ========================================================= + RESPONSIVE + ========================================================= */ +@media (max-width: 768px) { + .brujula-watermark { + width: 400px; + height: 400px; + right: -20%; + opacity: 0.03; + } + + .quiz-back-btn { + top: 1rem; + right: 1rem; + font-size: 0.8rem; + padding: 0.35rem 0.75rem; + } + + .quiz-step-header { + padding-right: 80px; + } +} + +/* ========================================================= + COLORES ESPECÍFICOS POR CAPACIDAD + ========================================================= */ +.eco-slide--excellence { --eco-slide-color: var(--ide-excellence); } +.eco-slide--project { --eco-slide-color: var(--ide-projects); } +.eco-slide--digital { --eco-slide-color: var(--ide-digital); } +.eco-slide--academy { --eco-slide-color: var(--ide-academy); } + +/* ========================================================= + PLACEHOLDERS DE LOGOS + Reemplaza las URLs por tus assets reales. + Ajusta width/height aquí para controlar el tamaño. + ========================================================= */ +.logo-excellence { background-image: url('../assets/img/slide/ide1.png'); } +.logo-project { background-image: url('../assets/img/slide/ide2.png'); } +.logo-digital { background-image: url('../assets/img/slide/ide3.png'); } +.logo-academy { background-image: url('../assets/img/slide/ide4.png'); } + +/* ========================================================= + PLACEHOLDERS DE IMÁGENES DE FONDO + ========================================================= */ +.eco-slide--excellence .eco-slide__bg { background-image: url('../assets/img/slide/slide-excellence.png'); } +.eco-slide--project .eco-slide__bg { background-image: url('../assets/img/slide/slide-projects.png'); } +.eco-slide--digital .eco-slide__bg { background-image: url('../assets/img/slide/slide-digital.png'); } +.eco-slide--academy .eco-slide__bg { background-image: url('../assets/img/slide/slide-academy.png'); } + +/* ========================================================= + ÁMBITOS DE EXPERIENCIA - TARJETAS CON HOVER REVEAL + ========================================================= */ + +/* --- TARJETA BASE --- */ +.ambito-card { + position: relative; + min-height: 240px; + border-radius: var(--radius-md, 12px); + overflow: hidden; + cursor: pointer; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.1)); + transition: box-shadow 0.3s ease, transform 0.3s ease; +} + +.ambito-card:hover { + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); + transform: translateY(-4px); +} + +/* --- OVERLAY (Degradado para legibilidad) --- */ +/* Un degradado de abajo hacia arriba asegura que el texto se lea + sin tapar completamente la imagen de fondo */ +.ambito-card .overlay { + position: absolute; + inset: 0; + background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%); + transition: background 0.4s ease; + z-index: 1; +} + +.ambito-card:hover .overlay { + background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.1) 100%); +} + +/* --- CONTENIDO --- */ +.ambito-card .content { + position: relative; + z-index: 2; + display: flex; + flex-direction: column; + justify-content: flex-end; /* Alinea el contenido abajo para mejor revelación */ + height: 100%; + padding: 1rem 1rem; + text-align: left; +} + +/* --- TÍTULO --- */ +.ambito-card h4 { + color: #ffffff; + font-size: 1.1rem; + font-weight: 700; + margin: 0; + line-height: 1.3; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); + transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), font-size 0.4s ease; +} + +/* --- TEXTO A REVELAR --- */ +.ambito-card .reveal-text { + color: rgba(255, 255, 255, 0.9); + font-size: 0.85rem; + font-weight: 400; + line-height: 1.4; + margin: 0; + + /* Estado inicial: oculto */ + opacity: 0; + max-height: 0; + transform: translateY(10px); + overflow: hidden; + + /* Transición suave */ + transition: + opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), + max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), + transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), + margin-top 0.4s ease; +} + +/* ========================================================= + ESTADOS HOVER (La magia) + ========================================================= */ + +/* 1. El título sube un poco y se achica ligeramente para hacer espacio */ +.ambito-card:hover h4 { + transform: translateY(-8px); + font-size: 1rem; +} + +/* 2. El texto aparece, gana altura y se posiciona */ +.ambito-card:hover .reveal-text { + opacity: 1; + max-height: 100px; /* Suficiente para 2-3 líneas de texto */ + transform: translateY(0); + margin-top: 0.5rem; +} + +/* ========================================================= + IMÁGENES DE FONDO POR TARJETA + (Nota: Los espacios en los nombres de archivo se codifican como %20) + ========================================================= */ +.cardi-agro { background-image: url('../assets//img/cards/agro.png'); } +.cardi-industria { background-image: url('../assets//img/cards/indu.png'); } +.cardi-telecom { background-image: url('../assets/img/cards/teco.png'); } +.cardi-salud { background-image: url('../assets/img/cards/salud.png'); } +.cardi-educacion { background-image: url('../assets/img/cards/edu.png'); } + +/* ========================================================= + RESPONSIVE + ========================================================= */ + +@media (max-width: 768px) { + .ambitos-grid { + grid-template-columns: 1fr !important; /* Apila el encabezado y las tarjetas */ + text-align: center; + } + + .ambito-card { + min-height: 200px; + } + + .ambito-card h4 { + font-size: 1rem; + } +} + +/* ========================================================= + RESPONSIVE + ========================================================= */ +@media (max-width: 900px) { + .ecosystem-carousel { + aspect-ratio: 4 / 3; + } + + .eco-slide__content { + padding: 1.75rem 2rem; + } + + .eco-slide__logo { + width: 140px; + height: 55px; + } + + .eco-slide__text { + max-width: 70%; + } + + .eco-slide__text h3 { + font-size: 1.3rem; + } +} + +@media (max-width: 600px) { + .ecosystem-tabs { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.6rem; + } + + .eco-tab { + font-size: 0.85rem; + padding: 0.55rem 1rem; + } + + .ecosystem-carousel { + aspect-ratio: 3 / 4; + min-height: 420px; + } + + .eco-slide__content { + padding: 1.25rem 1.25rem 1.5rem; + justify-content: flex-end; + } + + .eco-slide__logo { + align-self: flex-end; + width: 120px; + height: 50px; + margin-bottom: 1rem; + } + + .eco-slide__text { + max-width: 100%; + text-align: left; + } + + .eco-slide__text h3 { + font-size: 1.15rem; + } + + .eco-slide__text p { + font-size: 0.9rem; + } + + /* En móvil el degradado cubre más para garantizar legibilidad */ + .eco-slide__overlay { + background: linear-gradient( + to top, + var(--eco-slide-color) 0%, + var(--eco-slide-color) 55%, + rgba(0, 0, 0, 0.1) 85%, + transparent 100% + ); + } +} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index a8166e7..f363346 100644 --- a/css/styles.css +++ b/css/styles.css @@ -245,7 +245,7 @@ p, li, .lead-text, .text-body, .text-muted { /* --- 4. Layout & Contenedores --- */ .container { width: 100%; - max-width: 1200px; + max-width: 1360px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; @@ -324,6 +324,8 @@ p, li, .lead-text, .text-body, .text-muted { align-items: center; gap: 1.8rem; list-style: none; + flex-shrink: 1; + min-width: 0; } .nav-link { @@ -357,6 +359,7 @@ p, li, .lead-text, .text-body, .text-muted { display: flex; align-items: center; gap: 1rem; + flex-shrink: 0; } .nav-item.dropdown { position: relative; @@ -593,7 +596,7 @@ p, li, .lead-text, .text-body, .text-muted { gap: 0.6rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 500; - font-size: 2.9rem; + font-size: 1rem; text-transform: uppercase; letter-spacing: 0.09em; padding: 0.75rem 1.6rem; @@ -690,15 +693,45 @@ p, li, .lead-text, .text-body, .text-muted { padding: 0.45rem 1rem; font-size: 0.85rem; } -/*==============================*/ -/*efecto ruido*/ -.incomodidad-section { - position: relative; - width: 100%; - padding: 100px 24px; - overflow: hidden; /* Evita que las ondas ensanchen la pantalla */ + +/* --- Botón CTA Unificado --- */ +.btn-cta-unificado { + padding: 0.75rem 2rem; + border-radius: 50px; /* Estilo píldora */ + background-color: var(--ide-primary); + color: #FFFFFF; + font-family: 'Barlow Condensed', sans-serif; + font-weight: 600; + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 0.05em; + display: inline-flex; + align-items: center; + gap: 0.5rem; + border: 2px solid transparent; + transition: all var(--transition-fast); } +.btn-cta-unificado:hover { + background-color: var(--ide-primary-dark); + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} +.btn-cta-unificado svg { + transition: transform var(--transition-fast); +} +.btn-cta-unificado:hover svg { + transform: translateX(4px); +} + +.nav-actions .btn-cta-unificado { + flex-shrink: 0; + font-size: 0.95rem; + padding: 0.5rem 1.25rem; +} + +/*==============================*/ + /* Canvas como fondo absoluto */ #ripple-canvas { position: absolute; @@ -749,6 +782,7 @@ p, li, .lead-text, .text-body, .text-muted { box-shadow: var(--shadow-md); transform: translateY(-2px); } + /*tarjetas especiales*/ /*Agro*/ .card-agro { @@ -765,28 +799,6 @@ p, li, .lead-text, .text-body, .text-muted { align-items: center; text-align: center; } - -.icono-agro { - display: block; - width: 2.5rem; - height: 2.5rem; - margin-bottom: 0.5rem; - background-color: var(--text-body); - -webkit-mask-image: url('../assets/iconos/agro_color.svg'); - mask-image: url('../assets/iconos/agro_color.svg'); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-position: center; - mask-position: center; - -webkit-mask-size: contain; - mask-size: contain; - flex-shrink: 0; -} - -.card-agro:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-md); -} /*Fabrica*/ .card-fabrica { background-image: linear-gradient(var(--card-overlay), var(--card-overlay)), url('../assets/img/fabrica3.jpg'); @@ -1126,6 +1138,7 @@ p, li, .lead-text, .text-body, .text-muted { max-width: 860px; margin: 0 auto; transition: all 0.25s ease; + position: relative; } .quiz-header { @@ -1171,21 +1184,21 @@ p, li, .lead-text, .text-body, .text-muted { /* ---- Grid de opciones (estilo Opción A) ---- */ .quiz-options-grid { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; margin-top: 1rem; } .quiz-options-grid--2col { - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* ---- Cards de opción (estilo Opción A) ---- */ .quiz-option-card { display: flex; align-items: flex-start; - gap: 0.75rem; - padding: 1rem 1.25rem; + gap: 0.5rem; + padding: 0.75rem 1rem; background: var(--bg-body); border: 2px solid transparent; border-radius: 0.85rem; @@ -1239,21 +1252,20 @@ p, li, .lead-text, .text-body, .text-muted { /* ---- Estilos para títulos con iconos SVG en las tarjetas del quiz ---- */ .quiz-option-card .opt-title { font-family: 'Barlow Condensed', sans-serif; - font-weight: 600; + font-weight: 500; display: flex; align-items: center; - gap: 8px; + gap: 6px; font-size: 1.1rem; - margin-bottom: 0.2rem; + margin-bottom: 0.15rem; color: var(--text-primary, #094b63); } -.quiz-option-card .opt-title .icono { - width: 24px; - height: 24px; +.quiz-option-card .opt-title i { + width: 18px; + height: 18px; flex-shrink: 0; color: inherit; - } .quiz-option-card .opt-title .opt-text { @@ -2501,154 +2513,213 @@ canvas { box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06); } -/* --- 17. Footer --- */ +/* ========================================================= + FOOTER MODULAR - ESTILOS + ========================================================= */ #site-footer { position: relative; overflow: hidden; background-color: var(--bg-surface); border-top: 1px solid var(--border-color); - padding-top: 4.5rem; - padding-bottom: 2.5rem; + /*padding-top: 4.5rem; + padding-bottom: 2.5rem;*/ margin-top: auto; transition: background-color var(--transition-normal); } -/* Logo de fondo - NO debe interferir con los links */ -.footer-bg { - position: absolute; - transform: translate(0%, -17%); - height: auto; - pointer-events: none; /* ¡CLAVE! Evita que la imagen capture eventos */ - -} - -/* El SVG dentro del contenedor */ -.footer-bg img { - display: block; - width: 100%; - height: auto; - pointer-events: none; /* Hereda o se asegura */ -} - -/* Contenido del footer - POR ENCIMA del fondo */ -.footer-grid { - position: relative; - z-index: 1; - display: grid; - grid-template-columns: 1.5fr 1fr 1fr 1.25fr; - gap: 2.5rem; - margin-bottom: 3.5rem; -} - -.footer-logo-wrap { - margin-bottom: 1rem; -} - -.footer-links { - list-style: none; - padding: 0; - margin: 0; -} - -.footer-links li { - margin-bottom: 0.35rem; -} - -.footer-link { - color: var(--text-muted); - text-decoration: none; - transition: color 0.3s ease; - position: relative; - z-index: 2; /* Asegura que estén por encima */ -} - -.footer-link:hover { - color: var(--ide-accent); -} - -/* Links del ecosistema en la columna 1 */ -.footer-link2 { - color: var(--text-muted); - text-decoration: none; - transition: color 0.3s ease; - position: relative; - z-index: 2; -} - -.footer-link2:nth-child(1):hover { color: var(--ide-excellence); } /* Excellence */ -.footer-link2:nth-child(2):hover { color: var(--ide-projects); } /* Project */ -.footer-link2:nth-child(3):hover { color: var(--ide-academy); } /* Academy */ -.footer-link2:nth-child(4):hover { color: var(--ide-digital); } /* Digital */ - -/* Footer bottom - también por encima */ -.footer-bottom { - position: relative; - z-index: 1; +/* --- FILA SUPERIOR --- */ +.footer-top { display: flex; justify-content: space-between; align-items: center; - font-family: 'Plus Jakarta Sans', sans-serif; - font-size: 0.85rem; - color: var(--text-muted); - border-top: 1px solid var(--border-color); - padding-top: 1.5rem; + flex-wrap: wrap; + gap: 2rem; + margin-bottom: 2.5rem; } -.footer-bottom a { - position: relative; - z-index: 2; -} - -.footer-socials { +.footer-brand { display: flex; - gap: 0.75rem; + flex-direction: row; /* CAMBIADO: de column a row */ + align-items: flex-start; /* Alinea arriba ambos elementos */ + gap: 1rem; /* Espacio entre logo y slogan */ + max-width: 400px; /* Aumentado para que quepa el slogan */ +} + +.footer-logo { + height: 45px; + width: auto; + object-fit: contain; + flex-shrink: 0; /* Evita que el logo se encoja */ +} + +.footer-slogan { + font-size: 0.95rem; + font-weight: 500; + color: var(--text-muted, #6c757d); + line-height: 1.5; + margin: 0; + text-align: left; /* Asegura que el texto quede alineado a la izquierda */ +} + +/* Navegación horizontal */ +.footer-links-horizontal { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1.25rem 1.75rem; /* gap vertical | gap horizontal */ + list-style: none; + margin: 0; + padding: 0; +} + +.footer-link { + font-size: 0.95rem; + color: var(--text-body, #333); + text-decoration: none; + font-weight: 500; + transition: color 0.2s ease; +} + +.footer-link:hover { + color: var(--ide-primary, #0066cc); /* Ajusta a tu color primario */ +} + +/* Botón CTA */ +.footer-cta-btn { + border-radius: 50px; + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.65rem 1.35rem; + font-size: 0.9rem; + font-weight: 600; + text-decoration: none; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.footer-cta-btn:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +/* --- DIVISOR --- */ +.footer-divider { + border: none; + border-top: 1px solid var(--border-color, #e0e0e0); + margin: 0 0 1.5rem 0; +} + +/* --- FILA INFERIOR --- */ +.footer-bottom { + display: flex; + justify-content: space-between; align-items: center; flex-wrap: wrap; + gap: 1.5rem; +} + +.footer-legal-list { + display: flex; + gap: 1.5rem; + list-style: none; + margin: 0; + padding: 0; +} + +.footer-link-small { + font-size: 0.85rem; + color: var(--text-muted, #6c757d); + text-decoration: none; + transition: color 0.2s ease; +} + +.footer-link-small:hover { + color: var(--text-body, #333); + text-decoration: underline; +} + +/* Redes Sociales */ +.footer-socials { + display: flex; + gap: 1.25rem; } .footer-social-link { - display: inline-flex; + color: var(--text-muted, #6c757d); + font-size: 1.15rem; + text-decoration: none; + transition: color 0.2s ease, transform 0.2s ease; + display: flex; align-items: center; justify-content: center; - width: 40px; - height: 40px; - border-radius: 50%; - color: var(--text-muted); - background: var(--bg-subtle, rgba(255,255,255,0.05)); - transition: all 0.3s ease; - text-decoration: none; - font-size: 1rem; + width: 32px; + height: 32px; } .footer-social-link:hover { - color: var(--ide-accent, #3fff4f); - transform: translateY(-3px); + color: var(--ide-primary, #0066cc); /* Ajusta a tu color primario */ + transform: translateY(-2px); } +/* Copyright */ +.footer-copyright { + color: var(--text-muted, #6c757d); + font-size: 0.8rem; + text-align: right; +} -/* Responsive */ -@media (max-width: 768px) { - .footer-bg { - width: 40%; - max-width: 300px; - opacity: 0.04; - } - - .footer-grid { - grid-template-columns: 1fr 1fr; +.footer-credit { + color: var(--text-muted, #6c757d); + font-weight: 600; + text-decoration: none; + transition: color 0.2s ease; +} + +.footer-credit:hover { + color: var(--text-body, #333); +} + +/* ========================================================= + RESPONSIVE (Móviles y Tablets) + ========================================================= */ +@media (max-width: 992px) { + .footer-top { + flex-direction: column; + align-items: center; + text-align: center; gap: 2rem; } + + .footer-brand { + max-width: 100%; + align-items: center; + } + + .footer-links-horizontal { + justify-content: center; + } } -@media (max-width: 480px) { - .footer-bg { - width: 30%; - max-width: 200px; - opacity: 0.03; +@media (max-width: 768px) { + .footer-bottom { + flex-direction: column; + align-items: center; + text-align: center; + gap: 1.25rem; } - - .footer-grid { - grid-template-columns: 1fr; - gap: 1.5rem; + + .footer-legal-list { + flex-direction: column; + gap: 0.75rem; } -} \ No newline at end of file + + .footer-copyright { + text-align: center; + } +} + + + + + + diff --git a/desafios.html b/desafios.html index a01b075..829a2d9 100644 --- a/desafios.html +++ b/desafios.html @@ -18,43 +18,21 @@
-
- - - - - -
- - -
- COMENCEMOS POR entender -

¿Qué está pasando en tu organización?

-

- A veces el problema es evidente. Otras, aparece como una señal, una necesidad de cambio o una oportunidad que todavía no sabemos cómo abordar. Empecemos por comprender qué está pasando e identificar dónde puede estar el verdadero punto de intervención.

¿Qué pasaría si transformamos el "problema" en un desafío? - -

+
+
+
+
+

+ ¿Qué está pasando
en tu organización? +

+

+ A veces el desafío es evidente. Otras, aparece como una señal, una necesidad de cambio o una oportunidad. Empecemos por comprenderlo para identificar dónde intervenir. +

+
+
+ Estrategia, Procesos, Tecnología, Personas y Resultados +
+
@@ -62,83 +40,53 @@
-
+
-
-
-

Crecimos y necesitamos ordenar la gestión

-

- Lo que antes funcionaba de manera informal empieza a generar descoordinación, retrabajos, falta de claridad o dependencia de personas clave. -

+
+

La organización creció y necesitamos ordenar los procesos.

+
+
-
-
-
-

Tenemos muchas iniciativas, pero cuesta convertirlas en resultados

-

- Los proyectos avanzan con dificultades, compiten por recursos o pierden foco, y necesitamos mejorar la forma de priorizar, coordinar y ejecutar. -

+
+

Necesitamos mejorar la eficiencia y los resultados.

+
+
-
-
-
-

Estamos impulsando cambios, pero cuesta llevarlos a la práctica

-

- Nuevos procesos, herramientas o formas de trabajar no siempre logran integrarse a la dinámica cotidiana de la organización. -

+
+

Queremos desarrollar a nuestras personas y fortalecer equipos.

+
+
-
-
-
-

Queremos aprovechar la tecnología y la IA con sentido

-

- Vemos oportunidades para automatizar, sistematizar o mejorar decisiones, pero necesitamos identificar dónde la tecnología puede generar valor real. -

+
+

Buscamos incorporar tecnología o avanzar en la transformación digital.

+
+
-
-
-
-

Necesitamos cumplir nuevos requisitos sin sumar burocracia

-

- Una norma, certificación, cliente o regulación exige cambios. Buscamos integrarlos a la gestión para que, además de cumplir, ayuden a mejorar. -

+
+

Necesitamos fortalecer la calidad, el cumplimiento o la gestión de riesgos.

+
+
-
-
-
-

Sabemos que algo debería cambiar, pero no tenemos claro por dónde empezar

-

- Los resultados, los procesos o la dinámica de la organización muestran señales que necesitamos comprender antes de decidir dónde intervenir. -

-
- - Orientarme con la Brújula IDE → +
+

No sé exactamente qué necesito.

+ + INICIAR BRÚJULA IDE →
@@ -148,187 +96,151 @@
-
-
-

Cada organización tiene su propio punto de partida

-

- Si no encontraste tu situación entre estos ejemplos, empecemos por comprenderla juntos. -

- HABLEMOS → +
+
+
+

¿Tu situación es diferente? Conversemos...

+ + HABLEMOS + + +
- -
-
- - - -
-
+
@@ -53,104 +42,101 @@

Conocé Nuestro Ecosistema en detalle

-
-
+
+
- Operational Excellence & Sustainability -

- Para fortalecer la gestión y mejorar el desempeño: 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. +

IDE Excellence

+

Para fortalecer la gestión y mejorar el desempeño

+

+ 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.

- - -
- Procesos - Sistemas de gestión - Mejora continua - Desempeño - Riesgos - Sostenibilidad +
+ Procesos + Sistemas de gestión + Mejora continua + Desempeño + Riesgos + Sostenibilidad
- - CONOCER MÁS → + HABLEMOS →
- IDE Excellence + IDE Excellence
-
-
+
+
- IDE Project + IDE Project
- PMO & Project Services -

- Para convertir iniciativas en resultados: Fortalecemos la capacidad de las organizaciones para seleccionar, priorizar y gestionar proyectos, conectando estrategia, recursos y ejecución para transformar iniciativas en resultados. +

IDE Project

+

Para convertir iniciativas en resultados

+

+ Fortalecemos la capacidad de las organizaciones para seleccionar, priorizar y gestionar proyectos, conectando estrategia, recursos y ejecución para transformar iniciativas en resultados.

- -
- Proyectos - PMO - Portafolios - Gobernanza - Metodologías - Resultados +
+ Proyectos + PMO + Portafolios + Gobernanza + Metodologías + Resultados
- CONOCER MÁS → + HABLEMOS →
-
-
+
+
- Business Digital Solutions -

- Tecnología con sentido: 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. +

IDE Digital

+

Tecnología con sentido

+

+ 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.

- -
- Digitalización - Automatización - Datos - Inteligencia Artificial - Integración - Decisiones +
+ Digitalización + Automatización + Datos + Inteligencia Artificial + Integración + Decisiones
- CONOCER MÁS → + HABLEMOS →
- IDE Digital + IDE Digital
-
-
+
+
- IDE Academy + IDE Academy
- Executive Learning & Capability Development -

- Para desarrollar capacidades: 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. +

IDE Academy

+

Para desarrollar capacidades

+

+ 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.

- -
- Formación Ejecutiva - In-Company - Programas - Talleres - Rutas de aprendizaje +
+ Formación Ejecutiva + In-Company + Programas + Talleres + Rutas de aprendizaje
- EXPLORAR IDE ACADEMY → + EXPLORAR ACADEMY →
-
@@ -271,339 +257,9 @@
- - - - - - - - - - - - -
- - diff --git a/includes/footer.html b/includes/footer.html index 1f946c9..478c8ea 100644 --- a/includes/footer.html +++ b/includes/footer.html @@ -1,114 +1,84 @@ - -
-
- -
-
+ \ No newline at end of file diff --git a/includes/header.html b/includes/header.html index d32a819..0601398 100644 --- a/includes/header.html +++ b/includes/header.html @@ -65,7 +65,10 @@ - HABLEMOS + + HABLEMOS + + + + + HABLEMOS + + + + + +
-
+
+
- -
- -
-
-
- LA INCOMODIDAD PRODUCTIVA -

- Cuando los desafíos están conectados,
las soluciones también deberían estarlo. -

-

- Una mejora en un proceso, una nueva tecnología, un sistema de gestión o el desarrollo de capacidades puede resolver una necesidad puntual.
Pero si no comprendemos cómo esa intervención impacta en el resto, podemos mejorar una parte y generar nuevas tensiones en el conjunto. -
La pregunta que nos hacemos en IDE: -

-
- ¿Qué impacto tendrá esta mejora en el conjunto? -
-
+ +
+
+ +
+ Cuatro capacidades. Un mismo propósito: generar impacto. +

Ecosistema Integrado

-
- -
-
-
- Brújula IDE -

Encontrá dónde podemos generar impacto

-

- 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. -

+ + +
+ + + + +
+ + +
+ + +
+
+
+
+ +
+

Fortalecer la gestión

+

Sistemas de gestión, normas ISO (9001, 14001, 45001, 50001, 22000, 27001, 28000, 39001, 21001 y 29993), gestión por procesos, calidad y mejora continua con sentido de negocio.

+ Explorar Excellence →
-
- Paso 1 de 4 +
+ + + - -
-
+ + - + + +
+
+
+ + +
+
+
+ + +
+

Ámbitos de Experiencia

+

+ Comprendemos las particularidades de cada sector para adaptar la intervención sin perder de vista el conjunto. +

+
+ + +
+ +
+
+
+

Agro & Alimentos

+

Fortalecer operaciones y generar valor sostenible.

+
+
+ +
+
+
+

Industria & Servicios

+

Optimizar la gestión y potenciar la eficiencia operativa.

+
+
+ +
+
+
+

Telecomunicaciones

+

Impulsar conectividad eficiente mediante operaciones y proyectos integrados.

+
+
+ +
+
+
+

Sector Salud

+

Fortalecer la calidad, la seguridad y la experiencia del paciente.

+
+
+ +
+
+
+

Educación & Gobierno

+

Fortalecer la gestión y generar mejores resultados.

+
+
+ +
+
+
+
+ + +
+ + + + +
+
+ +
+ Encontrá donde podemos generar impacto. +

Brújula IDE

+
+ +
+ + +

+ 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. +

+ + +
+
+
+ + + + + -
-

¿Qué describe mejor tu situación hoy?

-

Seleccioná la opción que mejor represente tu contexto:

- -
-
+
+
- - - - - Algo no está funcionando - - - Tengo un problema, pero no sé bien qué solución necesito. - +

¿Qué describe mejor tu situación hoy?

+

Seleccioná la opción que mejor represente tu contexto:

-
-
- - - - - Sé qué quiero lograr - - Tengo un objetivo claro, pero no sé cómo alcanzarlo. +
+
+
+ + Algo no está funcionando + + + Tengo un problema, pero no sé bien qué solución necesito. + +
-
-
-
- - - - - Sé exactamente qué necesito - - Busco ISO, PMO, transformación digital u otra solución concreta. +
+
+ + Sé qué quiero lograr + + Tengo un objetivo claro, pero no sé cómo alcanzarlo. +
-
-
-
- - - - - Quiero aprender o formarme - - Busco formación, capacitación o conocimiento especializado. +
+
+ + Sé exactamente qué necesito + + Busco ISO, PMO, transformación digital u otra solución concreta. +
+
+ +
+
+ + Quiero aprender o formarme + + Busco formación, capacitación o conocimiento especializado. +
-
- -
-

¿En qué área sentís que algo no funciona como debería?

-

Identifiquemos el área crítica:

- -
-
+
+
- - - - - Gestión y procesos - - Los procesos no son eficientes o no están claros. +

¿En qué área sentís que algo no funciona como debería?

+

Identifiquemos el área crítica:

-
-
- - - - - Proyectos y resultados - - Los proyectos no llegan a destino o se desvían. +
+
+
+ + Gestión y procesos + + Los procesos no son eficientes o no están claros. +
-
-
-
- - - - - Personas y capacidades - - El equipo necesita desarrollar nuevas habilidades. +
+
+ + Proyectos y resultados + + Los proyectos no llegan a destino o se desvían. +
-
-
-
- - - - - Tecnología e innovación - - La organización necesita digitalizarse o incorporar IA. +
+
+ + Personas y capacidades + + El equipo necesita desarrollar nuevas habilidades. +
-
-
-
- - - - - No sé bien dónde está el problema - - Algo no funciona, pero es difícil de identificar. +
+
+ + Tecnología e innovación + + La organización necesita digitalizarse o incorporar IA. +
+
+ +
+
+ + No sé bien + + Algo no funciona, pero es difícil de identificar. +
-
- -
-
- - -
-

¿Qué querés lograr?

-

Definí tu objetivo principal:

- -
-
+
+
- - - - - Mejorar la gestión y los procesos +

¿Qué querés lograr?

+

Definí tu objetivo principal:

+
+
+ +
+
+
+ + Mejorar gestión y procesos - Ordenar, optimizar y hacer más eficiente la operación. + Ordenar, optimizar y hacer más eficiente la operación. +
-
-
-
- - - - - Profesionalizar la gestión de proyectos - - Que los proyectos se entreguen en tiempo y con los resultados esperados. +
+
+ + Profesionalizar los proyectos + + Que los proyectos se entreguen en tiempo y con los resultados esperados. +
-
-
-
- - - - - Desarrollar las capacidades del equipo - - Que las personas estén preparadas para los desafíos que vienen. +
+
+ + Desarrollar capacidades + + Que las personas estén preparadas para los desafíos que vienen. +
-
-
-
- - - - - Transformar digitalmente la organización - - Integrar tecnología e IA de manera estratégica y sostenible. +
+
+ + Transformar la organización + + Integrar tecnología e IA de manera estratégica y sostenible. +
-
- -
-
- - -
-

¿Qué solución estás buscando?

-

Seleccioná la opción que mejor se ajuste:

- -
-
+
+
- - - - - Normas ISO y sistemas de gestión - - ISO 9001, 14001, 45001 u otra norma de gestión. +

¿Qué solución estás buscando?

+

Seleccioná la opción que mejor se ajuste:

-
-
- - - - - PMO o gestión de proyectos - - Implementar una oficina de proyectos o mejorar su gestión. +
+
+
+ + Normas ISO y SGI + + ISO 9001, 14001, 45001 u otra norma de gestión. +
-
-
-
- - - - - Formación para mi organización - - Capacitación in company o programas de desarrollo. +
+
+ + PMO o gestión de proyectos + + Implementar una oficina de proyectos o mejorar su gestión. +
-
-
-
- - - - - Transformación digital e IA - - Digitalización de procesos, automatización o IA aplicada. +
+
+ + Formación + + Capacitación in company o programas de desarrollo. +
+
+ +
+
+ + Digitalización e IA + + Digitalización de procesos, automatización o IA aplicada. +
-
- -
-
- - -
-

¿Qué tipo de formación o conocimiento buscás?

-

Seleccioná el área de interés:

- -
-
+
+
- - - - - Normas ISO y sistemas de gestión - - Auditoría interna, implementación de normas, mejora continua. +

¿Qué tipo de formación o conocimiento buscás?

+

Seleccioná el área de interés:

-
-
- - - - - Gestión de proyectos - - Herramientas, metodologías, PMP, ágil, híbrido. +
+
+
+ + Normas ISO y SGI + + Auditoría interna, implementación de normas, mejora continua. +
-
-
-
- - - - - Liderazgo y cambio organizacional - - Desarrollo de líderes y gestión del cambio. +
+
+ + Gestión de proyectos + + Herramientas, metodologías, PMP, ágil, híbrido. +
-
-
-
- - - - - Inteligencia artificial y tecnología - - IA aplicada, transformación digital para equipos no técnicos. +
+
+ + Liderazgo + + Desarrollo de líderes y gestión del cambio. +
+
+ +
+
+ + IA y tecnología + + IA aplicada, transformación digital para equipos no técnicos. +
-
- -
-
- - -
-

¿Cómo describirías el momento en que está tu organización?

-

Seleccioná la opción que mejor refleje tu situación:

- -
-
+
+
- - - - - Estoy explorando - - Todavía en etapa de análisis, sin decisiones tomadas. +

¿Cómo describirías el momento en que está tu organización?

+

Seleccioná la opción que mejor refleje tu situación:

-
-
- - - - - Estamos evaluando opciones - - Comparando enfoques o proveedores antes de avanzar. +
+
+
+ + Estoy explorando + + Todavía en etapa de análisis, sin decisiones tomadas. +
-
-
-
- - - - - Queremos avanzar pronto - - La decisión está tomada, necesitamos un socio para ejecutar. +
+
+ + Estamos evaluando opciones + + Comparando enfoques o proveedores antes de avanzar. +
-
-
-
- - - - - Tenemos un requisito o plazo - - Una certificación, licitación o cliente lo exige. +
+
+ + Queremos avanzar pronto + + La decisión está tomada, necesitamos un socio para ejecutar. +
+
+ +
+
+ + Tenemos un requisito o plazo + + Una certificación, licitación o cliente lo exige. +
-
- -
-
- - -
-

¿Cuál es tu rol en la organización?

-

Seleccioná tu rol para una orientación más precisa:

- -
-
+
+
- - - - Dirección o Gerencia - - CEO, director, gerente general. +

¿Cuál es tu rol en la organización?

+

Seleccioná tu rol para una orientación más precisa:

-
-
- - - - Responsable de área - - Jefe, coordinador, líder de proceso o proyecto. -
-
- -
-
- - - - Recursos Humanos - - Gestión de personas, formación y desarrollo. -
-
- -
-
- - - - Otro rol +
+
+
+ + Dirección o Gerencia - Consultor, proveedor, investigador, estudiante. + CEO, director, gerente general. +
+
+ +
+
+ + Responsable de área + + Jefe, coordinador, líder de proceso o proyecto. +
+
+ +
+
+ + Recursos Humanos + + Gestión de personas, formación y desarrollo. +
+
+ +
+
+ + Otro rol + + Consultor, proveedor, investigador, estudiante. +
-
- -
-
- - -
-
- -

- No necesitás tener la respuesta para empezar. -

-

- Empezamos por comprender tu situación, no por ofrecerte una solución predeterminada. -

+ -
-
-
- - - -
-
-
-
- ECOSISTEMA INTEGRADO -

Cuatro capacidades.
Un mismo propósito: generar impacto.

-

- Las organizaciones no necesitan siempre lo mismo. Integramos las capacidades necesarias para responder a cada desafío sin perder de vista el conjunto. -
En IDE entendemos cómo funciona el sistema para identificar dónde intervenir, integrar las capacidades necesarias y generar valor en el conjunto. -

-
- Ver Ecosistema Completo → -
- -
- - -
-
-
-
- IDE Excellence -

Para fortalecer la gestión

-

- Sistemas de gestión, normas ISO (9001, 14001, 45001, 50001, 22000, 27001, 28000, 39001, 21001 y 29993), gestión por procesos, calidad y mejora continua con sentido de negocio. +

+ No necesitás tener la respuesta para empezar. +

+

+ Empezamos por comprender tu situación, no por ofrecerte una solución predeterminada.

+ +
+
+ +
- Explorar Excellence →
- -
- -
-
-
-
- IDE Project -

Para convertir proyectos en resultados

-

- Dirección estratégica de proyectos, implementación de PMO, metodologías ágiles/híbridas y control de cumplimiento. -

-
- Explorar Project → -
-
- - -
-
-
-
- IDE Academy -

Para desarrollar capacidades

-

- Formación ejecutiva e In-Company que conecta conocimiento, práctica y contexto para desarrollar capacidades y sostener la transformación. -

-
- Explorar Academy → -
-
- - -
-
-
-
- IDE Digital -

Para integrar tecnología con propósito

-

- Inteligencia artificial aplicada, automatización de flujos de procesos, tableros de datos y transformación digital sensata. -

-
- Explorar Digital → -
-
- - -
-
-
- - -
-
-
- ÁMBITOS DE EXPERIENCIA -

El contexto también transforma la solución.

-

- Nuestra experiencia en distintos sectores nos permite comprender sus particularidades, requisitos y desafíos para adaptar la intervención sin perder de vista el conjunto. -

-
- -
-
- -

Agro & Alimentos

-

Trazabilidad, inocuidad, buenas prácticas y gestión responsable para fortalecer operaciones y generar valor sostenible.

-
- -
- -

Industria & Servicios

-

Procesos, calidad, proyectos y transformación digital para mejorar la gestión, la eficiencia y la capacidad de adaptación.

-
- -
- -

Sector Salud

-

Procesos críticos, experiencia del paciente y cumplimiento para fortalecer la calidad, la seguridad y la mejora continua.

-
- -
- -

Educación & Gobierno

-

Gestión, calidad, proyectos y desarrollo de capacidades para fortalecer organizaciones, servicios y resultados.

-
-
-
- -
-
- CONVERSACIÓN INICIAL -

- ¿Qué desafío querés transformar? -

-

- Empecemos comprendiendo el contexto de tu organización, identificando dónde podemos generar mayor impacto y conectando las capacidades necesarias para transformar el desafío. -

-
+ +
+
+
+
+

+ ¿Qué desafío querés transformar? +

+ + +
+ + HABLEMOS + + + + + + +
+
+ +
+
+ +
+
+
@@ -712,9 +790,7 @@
- - - - + - + + \ No newline at end of file diff --git a/js/index-carrousel.js b/js/index-carrousel.js new file mode 100644 index 0000000..ee25444 --- /dev/null +++ b/js/index-carrousel.js @@ -0,0 +1,114 @@ +/** + * ECOSISTEMA - CARRUSEL + * Auto-play con fade, control por tabs, pausa al interactuar, + * reanudación al salir completamente del viewport. + */ +(function () { + 'use strict'; + + const INTERVAL_MS = 5000; + const FADE_MS = 600; // debe coincidir con --eco-fade-duration + + const section = document.querySelector('.ecosystem-section'); + if (!section) return; + + const tabs = Array.from(section.querySelectorAll('.eco-tab')); + const slides = Array.from(section.querySelectorAll('.eco-slide')); + + let currentIndex = 0; + let timer = null; + let userInteracted = false; // true después de un clic manual + + // ---------- Utilidades ---------- + function goTo(index) { + if (index < 0) index = slides.length - 1; + if (index >= slides.length) index = 0; + + // Actualizar slides + slides.forEach((slide, i) => { + if (i === index) { + slide.classList.add('is-active'); + slide.removeAttribute('hidden'); + } else { + slide.classList.remove('is-active'); + // Esperamos la transición para ocultar (accesibilidad + rendimiento) + setTimeout(() => { + if (!slide.classList.contains('is-active')) { + slide.setAttribute('hidden', ''); + } + }, FADE_MS); + } + }); + + // Actualizar tabs + tabs.forEach((tab, i) => { + if (i === index) { + tab.classList.add('is-active'); + tab.setAttribute('aria-selected', 'true'); + // Color activo específico de la capacidad + tab.style.backgroundColor = tab.dataset.color; + tab.style.borderColor = tab.dataset.color; + } else { + tab.classList.remove('is-active'); + tab.setAttribute('aria-selected', 'false'); + // Reset a color inactivo estándar + tab.style.backgroundColor = ''; + tab.style.borderColor = ''; + } + }); + + currentIndex = index; + } + + function next() { + goTo(currentIndex + 1); + } + + function startAutoPlay() { + stopAutoPlay(); + timer = setInterval(next, INTERVAL_MS); + } + + function stopAutoPlay() { + if (timer) { + clearInterval(timer); + timer = null; + } + } + + // ---------- Eventos de tabs ---------- + tabs.forEach((tab, i) => { + tab.addEventListener('click', () => { + userInteracted = true; + stopAutoPlay(); + goTo(i); + }); + }); + + // ---------- IntersectionObserver: reanudar al salir del viewport ---------- + // "Salir completamente" = cuando la sección ya no intersecta en absoluto. + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) { + // Salió completamente del viewport + userInteracted = false; + startAutoPlay(); + } else { + // Entró al viewport: si el usuario interactuó, mantenemos pausa; + // si no, arrancamos el auto-play. + if (!userInteracted) { + startAutoPlay(); + } + } + }); + }, + { threshold: 0 } // se dispara cuando la visibilidad cambia de 0 a >0 o viceversa + ); + + observer.observe(section); + + // ---------- Init ---------- + goTo(0); + startAutoPlay(); +})(); \ No newline at end of file diff --git a/js/main.js b/js/main.js index 3d62497..09afe6a 100644 --- a/js/main.js +++ b/js/main.js @@ -398,6 +398,15 @@ function closeModal(modalId) { const el = document.getElementById('step-' + id); if (el) el.classList.add('active'); + const backBtn = document.getElementById('global-quiz-back-btn'); + if (backBtn) { + if (id == 1 || id === '1' || id === 'result') { + backBtn.style.display = 'none'; + } else { + backBtn.style.display = 'block'; + } + } + updateProgress(id); updateIndicator(id); } @@ -415,15 +424,7 @@ function closeModal(modalId) { } function updateIndicator(id) { - const label = document.getElementById('quiz-step-indicator'); - if (!label) return; - - let text = ''; - if (id === 'result') text = '¡Orientación lista!'; - else if (['2a', '2b', '2c', '2d'].includes(String(id))) text = 'Paso 2 de 4'; - else text = 'Paso ' + id + ' de 4'; - - label.textContent = text; + // El indicador de pasos (Paso X de 4) fue removido del HTML a petición del usuario. } function renderResult(ans) { diff --git a/soluciones-PatriPad.html b/soluciones-PatriPad.html new file mode 100644 index 0000000..65656ae --- /dev/null +++ b/soluciones-PatriPad.html @@ -0,0 +1,519 @@ + + + + + + Soluciones Concretas | IDE Consultores + + + + + + + + + + + +
+ + +
+ + + + + +
+ + +
+ IDENTIFIQUEMOS SOLUCIONES +

Soluciones Concretas:
Respuestas Específicas

+

+ Si ya identificaste qué necesitás, explorá nuestras soluciones, su alcance y el valor que pueden aportar a tu organización.

+
+
+ + +
+
+ + + + +
+ + +
+
+

SISTEMAS DE GESTIÓN Y CERTIFICACIONES

+

Para convertir requisitos en herramientas de gestión.

+
+

Diseñamos, implementamos e integramos sistemas de gestión que permiten ordenar procesos, gestionar riesgos, mejorar el desempeño y responder a requisitos normativos sin sumar burocracia innecesaria.

+
+
+ +
+
+ ¿Sabías que un SGC requiere capacitar a los líderes? Conocé cómo IDE Academy complementa esta implementación. +
+ + Explorar soluciones → + +
+
+ + +
+
+

DESARROLLO DE CAPACIDADES

+

Para transformar conocimiento en capacidad de acción.

+
+

Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para desarrollar las capacidades que personas y equipos necesitan para gestionar, liderar y transformar.

+
+
+ +
+
+ Formamos a tus Project Managers internos mediante los programas de IDE Academy. +
+ + Explorar soluciones → + +
+
+ + +
+
+

PROCESOS Y MEJORA ORGANIZACIONAL

+

Para transformar la forma en que la organización funciona.

+
+

Analizamos procesos, información, roles e indicadores para identificar oportunidades de mejora, reducir ineficiencias y fortalecer la capacidad de gestión y toma de decisiones.

+
+
+ +
+
+ Integramos tableros de control digital de incidentes a través de IDE Digital. +
+ + Explorar soluciones → + +
+
+ + +
+
+

PROYECTOS Y PMO

+

Para convertir iniciativas en resultados.

+
+

Diseñamos y fortalecemos la gestión de proyectos, programas y portafolios para mejorar la priorización, coordinación, gobernanza y ejecución de iniciativas estratégicas.

+
+
+ +
+
+ Complementamos con diseño instruccional y campus virtual vía IDE Academy. +
+ + Explorar soluciones → + +
+
+ + +
+
+

TRANSFORMACIÓN DIGITAL E INTELIGENCIA ARTIFICIAL

+

Para poner la tecnología al servicio de la gestión.

+
+

Identificamos dónde la digitalización, la automatización y la inteligencia artificial pueden simplificar procesos, mejorar decisiones y generar valor real para la organización.

+
+
+ +
+
+ Conocé los programas abiertos y temarios en nuestra página de IDE Academy. +
+ + Explorar soluciones → + +
+
+ + +
+
+

SOLUCIONES SECTORIALES

+

Para responder a desafíos que requieren conocimiento del contexto.

+
+

Integramos gestión, procesos, proyectos, sistemas, capacidades y tecnología para abordar requisitos y desafíos específicos de cada actividad.

+
+
+
+
+ Alineamos la tecnología con la estructura de procesos definida por IDE Excellence. +
+ + Explorar soluciones → + +
+
+ +
+
+

EDUCACIÓN & GOBIERNO

+

Para transformar conocimiento, procesos y capacidades en mejores servicios y resultados.

+
+

Integramos sistemas de gestión, procesos, proyectos, gestión del conocimiento, indicadores, desarrollo de capacidades y tecnología para fortalecer organizaciones educativas, organismos públicos e instituciones que brindan servicios de formación.

+
+
+
+
+ Alineamos la tecnología con la estructura de procesos definida por IDE Excellence. +
+ + Explorar soluciones → + +
+
+
+
+
+ + +
+
+

Una única solución no siempre encaja para todos los desafíos.

+

+ Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto. +

+ HABLEMOS → +
+
+ + + + + + + + + + + + + +
+ +
+ + + diff --git a/soluciones.html b/soluciones.html index 65656ae..d1e2e35 100644 --- a/soluciones.html +++ b/soluciones.html @@ -18,498 +18,143 @@
-
- - - - - -
- - -
- IDENTIFIQUEMOS SOLUCIONES -

Soluciones Concretas:
Respuestas Específicas

-

- Si ya identificaste qué necesitás, explorá nuestras soluciones, su alcance y el valor que pueden aportar a tu organización.

+
+
+ IDENTIFIQUEMOS SOLUCIONES +

Soluciones Concretas

+

+ Si ya identificaste qué necesitás, explorá nuestras soluciones, su alcance y el valor que pueden aportar a tu organización. +

-
- - - - -
+
-
+
-

SISTEMAS DE GESTIÓN Y CERTIFICACIONES

-

Para convertir requisitos en herramientas de gestión.

-
-

Diseñamos, implementamos e integramos sistemas de gestión que permiten ordenar procesos, gestionar riesgos, mejorar el desempeño y responder a requisitos normativos sin sumar burocracia innecesaria.

-
-
- -
-
- ¿Sabías que un SGC requiere capacitar a los líderes? Conocé cómo IDE Academy complementa esta implementación. -
- - Explorar soluciones → - +

SISTEMAS DE GESTIÓN Y CERTIFICACIONES

+

Para convertir requisitos en herramientas de gestión.

+

Diseñamos, implementamos e integramos sistemas de gestión que permiten ordenar procesos, gestionar riesgos, mejorar el desempeño y responder a requisitos normativos sin sumar burocracia innecesaria.

+ + HABLEMOS + +
-
+
-

DESARROLLO DE CAPACIDADES

-

Para transformar conocimiento en capacidad de acción.

-
-

Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para desarrollar las capacidades que personas y equipos necesitan para gestionar, liderar y transformar.

-
-
- -
-
- Formamos a tus Project Managers internos mediante los programas de IDE Academy. -
- - Explorar soluciones → - +

DESARROLLO DE CAPACIDADES

+

Para transformar conocimiento en capacidad de acción.

+

Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para desarrollar las capacidades que personas y equipos necesitan para gestionar, liderar y transformar.

+ + HABLEMOS + +
-
+
-

PROCESOS Y MEJORA ORGANIZACIONAL

-

Para transformar la forma en que la organización funciona.

-
-

Analizamos procesos, información, roles e indicadores para identificar oportunidades de mejora, reducir ineficiencias y fortalecer la capacidad de gestión y toma de decisiones.

-
-
- -
-
- Integramos tableros de control digital de incidentes a través de IDE Digital. -
- - Explorar soluciones → - +

PROCESOS Y MEJORA ORGANIZACIONAL

+

Para transformar la forma en que la organización funciona.

+

Analizamos procesos, información, roles e indicadores para identificar oportunidades de mejora, reducir ineficiencias y fortalecer la capacidad de gestión y toma de decisiones.

+ + HABLEMOS + +
-
+
-

PROYECTOS Y PMO

-

Para convertir iniciativas en resultados.

-
-

Diseñamos y fortalecemos la gestión de proyectos, programas y portafolios para mejorar la priorización, coordinación, gobernanza y ejecución de iniciativas estratégicas.

-
-
- -
-
- Complementamos con diseño instruccional y campus virtual vía IDE Academy. -
- - Explorar soluciones → - +

PROYECTOS Y PMO

+

Para convertir iniciativas en resultados.

+

Diseñamos y fortalecemos la gestión de proyectos, programas y portafolios para mejorar la priorización, coordinación, gobernanza y ejecución de iniciativas estratégicas.

+ + HABLEMOS + +
-
+
-

TRANSFORMACIÓN DIGITAL E INTELIGENCIA ARTIFICIAL

-

Para poner la tecnología al servicio de la gestión.

-
-

Identificamos dónde la digitalización, la automatización y la inteligencia artificial pueden simplificar procesos, mejorar decisiones y generar valor real para la organización.

-
-
- -
-
- Conocé los programas abiertos y temarios en nuestra página de IDE Academy. -
- - Explorar soluciones → - +

TRANSFORMACIÓN DIGITAL E IA

+

Para poner la tecnología al servicio de la gestión.

+

Identificamos dónde la digitalización, la automatización y la inteligencia artificial pueden simplificar procesos, mejorar decisiones y generar valor real para la organización.

+ + HABLEMOS + +
- -
+ +
-

SOLUCIONES SECTORIALES

-

Para responder a desafíos que requieren conocimiento del contexto.

-
-

Integramos gestión, procesos, proyectos, sistemas, capacidades y tecnología para abordar requisitos y desafíos específicos de cada actividad.

-
-
-
-
- Alineamos la tecnología con la estructura de procesos definida por IDE Excellence. -
- - Explorar soluciones → - +

ESTRATEGIA E INNOVACIÓN

+

Para anticipar y liderar el cambio.

+

Acompañamos a la dirección en el diseño y despliegue de la estrategia, integrando innovación en modelos de negocio y desarrollo organizacional continuo.

+ + HABLEMOS + +
- -
+ + +
-

EDUCACIÓN & GOBIERNO

-

Para transformar conocimiento, procesos y capacidades en mejores servicios y resultados.

-
-

Integramos sistemas de gestión, procesos, proyectos, gestión del conocimiento, indicadores, desarrollo de capacidades y tecnología para fortalecer organizaciones educativas, organismos públicos e instituciones que brindan servicios de formación.

-
+

SOLUCIONES SECTORIALES

+

Para responder a desafíos que requieren conocimiento del contexto.

+

Integramos gestión, procesos, proyectos, sistemas, capacidades y tecnología para abordar requisitos y desafíos específicos de cada actividad.

+ + HABLEMOS + + +
+ + +
-
- Alineamos la tecnología con la estructura de procesos definida por IDE Excellence. -
- - Explorar soluciones → - +

EDUCACIÓN & GOBIERNO

+

Para transformar conocimiento, procesos y capacidades en mejores servicios y resultados.

+

Integramos sistemas de gestión, procesos, proyectos, gestión del conocimiento, indicadores, desarrollo de capacidades y tecnología para fortalecer organizaciones educativas y públicas.

-
+ + HABLEMOS + + +
-
-
-

Una única solución no siempre encaja para todos los desafíos.

-

- Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto. -

- HABLEMOS → +
+
+
+

Una única solución no siempre encaja para todos los desafíos.

+

+ Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto. +

+ + HABLEMOS + + +
- - - - - - - - - - - - - -