cambios esteticos index+desafios+sluciones+ecosistema
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
+129
@@ -0,0 +1,129 @@
|
||||
/* ==========================================================================
|
||||
ACORDEÓN DE PREGUNTAS FRECUENTES (FAQ)
|
||||
========================================================================== */
|
||||
|
||||
/* Contenedor centralizado para lectura óptima */
|
||||
.faq-accordion-container {
|
||||
max-width: 820px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
/* Tarjeta de cada pregunta */
|
||||
.faq-item {
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
border: 1px solid var(--ide-primary-line);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.25s ease, background-color 0.25s ease;
|
||||
}
|
||||
|
||||
.faq-item:hover {
|
||||
background: var(--ide-accent-bg);
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.faq-item[open] {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: var(--ide-primary-light);
|
||||
}
|
||||
|
||||
/* Cabecera / Trigger */
|
||||
.faq-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.25rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
list-style: none; /* Elimina la flecha estándar del navegador */
|
||||
}
|
||||
|
||||
/* Ocultar el marcador nativo en navegadores WebKit */
|
||||
.faq-header::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Texto de la pregunta */
|
||||
.faq-question {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-body);
|
||||
line-height: 1.4;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.faq-item[open] .faq-question {
|
||||
color: var(--ide-primary-light);
|
||||
}
|
||||
|
||||
/* Icono / Flecha */
|
||||
.faq-icon {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text-main);
|
||||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.faq-item:hover .faq-icon {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
/* Rotación de la flecha al abrir */
|
||||
.faq-item[open] .faq-icon {
|
||||
transform: rotate(180deg);
|
||||
background: var(--ide-primary-light);
|
||||
color: #0b1118;
|
||||
}
|
||||
|
||||
/* Contenido de la respuesta */
|
||||
.faq-content {
|
||||
padding: 0 1.5rem 1.35rem 1.5rem;
|
||||
animation: faq-fade-in 0.25s ease-out;
|
||||
}
|
||||
|
||||
.faq-content p {
|
||||
margin: 0;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.65;
|
||||
color: var(--text-muted, var(--text-main));
|
||||
}
|
||||
|
||||
.faq-content strong {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Animación de apertura */
|
||||
@keyframes faq-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Ajustes en pantallas móviles */
|
||||
@media (max-width: 640px) {
|
||||
.faq-header {
|
||||
padding: 1.1rem 1.2rem;
|
||||
}
|
||||
.faq-question {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.faq-content {
|
||||
padding: 0 1.2rem 1.15rem 1.2rem;
|
||||
}
|
||||
}
|
||||
+423
@@ -0,0 +1,423 @@
|
||||
/* ==========================================================================
|
||||
MODAL: CONTENEDOR & BACKDROP
|
||||
========================================================================== */
|
||||
.ide-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.25rem;
|
||||
background-color: var(--ide-accent-soft);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.ide-modal-backdrop.is-active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ide-modal-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 780px;
|
||||
max-height: 88vh;
|
||||
background-color: var(--bg-card-alt);
|
||||
border: 1px solid var(--ide-primary-line);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
color: var(--text-main);
|
||||
overflow: hidden;
|
||||
transform: translateY(20px) scale(0.98);
|
||||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.ide-modal-backdrop.is-active .ide-modal-container {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.ide-modal-close {
|
||||
position: absolute;
|
||||
top: 1.25rem;
|
||||
right: 1.25rem;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid var(--ide-primary-line);
|
||||
border-radius: 50%;
|
||||
color: var(--text-main);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.ide-modal-close:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #ffffff;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
SCROLLBAR LIMPIO (SIN BOTONES / FLECHAS)
|
||||
========================================================================== */
|
||||
.ide-modal-body-wrapper {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ide-modal-scroll {
|
||||
padding: 2.5rem 2.25rem 1.5rem 2.25rem;
|
||||
max-height: calc(88vh - 75px);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--ide-accent-soft) transparent;
|
||||
}
|
||||
|
||||
.ide-modal-scroll::-webkit-scrollbar-button {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.ide-modal-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.ide-modal-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.ide-modal-scroll::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.18);
|
||||
border-radius: 999px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.ide-modal-scroll:hover::-webkit-scrollbar-thumb {
|
||||
background-color: var(--ide-primary);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
ESTRUCTURA Y TIPOGRAFÍA DEL CONTENIDO
|
||||
========================================================================== */
|
||||
.ide-modal-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.ide-modal-pill {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
padding: 0.35rem 0.85rem;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.project .ide-modal-pill {
|
||||
background-color: var(--ide-projects);
|
||||
}
|
||||
.excellence .ide-modal-pill {
|
||||
background-color: var(--ide-excellence);
|
||||
}
|
||||
.digital .ide-modal-pill {
|
||||
background-color: var(--ide-digital);
|
||||
}
|
||||
.ide-modal-title {
|
||||
font-size: 1.85rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-main);
|
||||
margin: 0 0 0.4rem 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.ide-modal-tagline {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 500;
|
||||
color: var(--ide-primary-light);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ide-modal-lead {
|
||||
font-size: 0.96rem;
|
||||
line-height: 1.65;
|
||||
color: var(--text-main);
|
||||
padding-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ide-modal-lead p {
|
||||
margin: 0 0 0.85rem 0;
|
||||
}
|
||||
|
||||
.ide-modal-lead p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ide-modal-section {
|
||||
margin-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.ide-section-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-main);
|
||||
margin: 0 0 1.25rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.ide-section-title::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background-color: var(--ide-primary-line);
|
||||
}
|
||||
|
||||
.ide-grid-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.ide-feature-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--ide-primary-line);
|
||||
border-radius: 10px;
|
||||
padding: 1.15rem;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.projects .ide-feature-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--ide-projects);
|
||||
}
|
||||
.excellence .ide-feature-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--ide-excellence);
|
||||
}
|
||||
.digital .ide-feature-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--ide-digital);
|
||||
}
|
||||
|
||||
.ide-feature-card.ide-card-full {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.ide-feature-card h4 {
|
||||
color: var(--text-body);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.45rem 0;
|
||||
}
|
||||
|
||||
.ide-feature-card p {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ide-tags-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.ide-method-tag {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-body);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--ide-primary-line);
|
||||
}
|
||||
|
||||
.projects .ide-dot {
|
||||
color: var(--ide-projects);font-weight: bold;
|
||||
}
|
||||
.excellence .ide-dot {
|
||||
color: var(--ide-excellence);font-weight: bold;
|
||||
}
|
||||
.digital .ide-dot {
|
||||
color: var(--ide-digital);font-weight: bold;
|
||||
}
|
||||
.ide-text-block {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ide-modal-callout {
|
||||
background: var(--bg-surface-elevated);
|
||||
border-radius: 0 10px 10px 0;
|
||||
padding: 1.25rem 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.project .ide-modal-callout{
|
||||
border-left: 3px solid var(--ide-projects);
|
||||
}
|
||||
.excellence .ide-modal-callout{
|
||||
border-left: 3px solid var(--ide-excellence);
|
||||
}
|
||||
.digital .ide-modal-callout{
|
||||
border-left: 3px solid var(--ide-digital);
|
||||
}
|
||||
|
||||
.ide-quote-highlight {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
color: var(--text-body);
|
||||
margin: 0 0 0.65rem 0;
|
||||
}
|
||||
|
||||
.ide-modal-callout p {
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.55;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ide-modal-synergy {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: 1px dashed var(--ide-primary-line);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.ide-modal-synergy h4 {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin: 0 0 0.45rem 0;
|
||||
}
|
||||
|
||||
.ide-modal-synergy p {
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.55;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ide-modal-synergy strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
FOOTER FIJO Y BOTÓN CTA
|
||||
========================================================================== */
|
||||
.ide-modal-footer-fixed {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 2.25rem;
|
||||
background: var(--ide-accent-soft);
|
||||
border-top: 1px solid var(--ide-accent-soft);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.ide-scroll-hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-main);
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.ide-scroll-hint svg {
|
||||
animation: pulse-down 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-down {
|
||||
0%, 100% { transform: translateY(0); opacity: 0.5; }
|
||||
50% { transform: translateY(3px); opacity: 1; }
|
||||
}
|
||||
|
||||
.ide-scroll-hint.is-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ide-btn-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
color: #ffffff;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-decoration: none;
|
||||
padding: 0.8rem 1.75rem;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.2s ease, filter 0.2s ease;
|
||||
}
|
||||
.projects .ide-btn-cta{
|
||||
background-color: var(--ide-projects);
|
||||
}
|
||||
.excellence .ide-btn-cta{
|
||||
background-color: var(--ide-excellence);
|
||||
}
|
||||
.digital .ide-btn-cta{
|
||||
background-color: var(--ide-digital);
|
||||
}
|
||||
.ide-btn-cta:hover {
|
||||
transform: translateY(-2px);
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
|
||||
.ide-btn-arrow {
|
||||
font-size: 1.1rem;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.ide-btn-cta:hover .ide-btn-arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.ide-modal-scroll {
|
||||
padding: 2rem 1.25rem;
|
||||
}
|
||||
.ide-grid-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.ide-feature-card.ide-card-full {
|
||||
grid-column: span 1;
|
||||
}
|
||||
.ide-modal-footer-fixed {
|
||||
padding: 0.85rem 1.25rem;
|
||||
}
|
||||
.ide-scroll-hint {
|
||||
display: none;
|
||||
}
|
||||
.ide-btn-cta {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
+94
-7
@@ -253,7 +253,7 @@ p, li, .lead-text, .text-body, .text-muted {
|
||||
}
|
||||
|
||||
.container-narrow {
|
||||
max-width: 860px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.container-wide {
|
||||
@@ -266,9 +266,12 @@ p, li, .lead-text, .text-body, .text-muted {
|
||||
}
|
||||
|
||||
.section-padding-sm {
|
||||
padding-top: clamp(2rem, 4vw, 3.5rem);
|
||||
padding-top: clamp(1rem, 2vw, 3.5rem);
|
||||
padding-bottom: clamp(2rem, 4vw, 3.5rem);
|
||||
}
|
||||
.section-padding-npb {
|
||||
padding-top: clamp(1rem, 2vw, 3.5rem);
|
||||
}
|
||||
|
||||
/* --- 5. Componentes: Header & Navbar --- */
|
||||
#site-header {
|
||||
@@ -874,7 +877,7 @@ p, li, .lead-text, .text-body, .text-muted {
|
||||
}
|
||||
/* tarjeta nosotros*/
|
||||
.card-somos {
|
||||
background-image: url('../assets/img/equipo.png');
|
||||
background-image: url('../assets/img/FOTO TEAM.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -1402,6 +1405,7 @@ p, li, .lead-text, .text-body, .text-muted {
|
||||
background-color: var(--ide-excellence);
|
||||
-webkit-mask-image: url('../assets/vectores/iso.svg');
|
||||
mask-image: url('../assets/vectores/iso.svg');
|
||||
|
||||
}
|
||||
.card-project .ecosystem-bg-vector {
|
||||
opacity: 0.1;
|
||||
@@ -1584,6 +1588,30 @@ p, li, .lead-text, .text-body, .text-muted {
|
||||
font-family: 'Barlow Semi Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
/* ---- Soluciones Modal -----*/
|
||||
.modal-window-sol {
|
||||
background: radial-gradient(circle at top right, var(--card-overlay), var(--bg-subtle));
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
width: 100%;
|
||||
max-width: 820px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--shadow-lg);
|
||||
position: relative;
|
||||
padding: clamp(1.75rem, 4vw, 2.5rem);
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
.modal-backdrop.is-active .modal-window-sol {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.modal-window-sol h3 {
|
||||
font-family: 'Barlow Semi Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* --- 14. Espacio de Imágenes Genéricas / Placeholders --- */
|
||||
.img-placeholder {
|
||||
@@ -1678,14 +1706,38 @@ p, li, .lead-text, .text-body, .text-muted {
|
||||
|
||||
/* --- 16. Filtros de Soluciones --- */
|
||||
.solution-card {
|
||||
background: linear-gradient(0deg, var(--bg-surface) 0%, var(--ide-accent-soft) 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.solution-card.hidden {
|
||||
display: none;
|
||||
}
|
||||
.solution-card h3{
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.solution-card p{
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-body);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.solution-body{
|
||||
background-color: var(--bg-subtle);
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.solution-ligth{
|
||||
font-size: 0.8rem; color: var(--text-muted);
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding-top: 0.75rem; margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.filters-bar {
|
||||
display: flex;
|
||||
@@ -1716,7 +1768,10 @@ p, li, .lead-text, .text-body, .text-muted {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
/* --- Tarjetas de Ecosistema --- */
|
||||
|
||||
.card-ecosistema{
|
||||
margin-bottom: 2.5rem;
|
||||
padding: 2.5rem;
|
||||
}
|
||||
.card-excellence:hover {
|
||||
border-color: var(--ide-excellence);
|
||||
box-shadow: 0 0 30px rgba(79,179,137, 0.5);
|
||||
@@ -1737,14 +1792,38 @@ p, li, .lead-text, .text-body, .text-muted {
|
||||
box-shadow: 0 0 30px rgba(44,105,171, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.eco{
|
||||
gap: 2.5rem; align-items: center;
|
||||
}
|
||||
|
||||
.eco p{
|
||||
font-size: 1.05rem; color:var(--text-body); line-height: 1.65; margin-bottom: 1rem;
|
||||
}
|
||||
.eco ul{
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction:
|
||||
column; gap: 0.6rem;
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.eco img{
|
||||
width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);
|
||||
}
|
||||
/* --- Formato NetSchema --- */
|
||||
.hero-solucion{
|
||||
background: linear-gradient(0deg, var(--bg-surface) 0%, var(--ide-accent-soft) 100%);
|
||||
|
||||
}
|
||||
.netschema-section {
|
||||
width: 100%;
|
||||
padding: 40px 20px;
|
||||
padding: 0px 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--bg-subtle);
|
||||
background: linear-gradient(180deg, var(--bg-surface) 0%, var(--ide-accent-soft) 100%);
|
||||
}
|
||||
|
||||
/* Envoltura con aspecto horizontal responsivo */
|
||||
@@ -1771,6 +1850,14 @@ canvas {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.seccion-servicios-tarjetas{
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/*modales ecosistemas*/
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
LEYENDA / TOOLTIP FLOTANTE
|
||||
========================================================================== */
|
||||
|
||||
+454
-111
@@ -10,6 +10,8 @@
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<link rel="stylesheet" href="css/modal.css">
|
||||
<link rel="stylesheet" href="css/faq.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -18,91 +20,50 @@
|
||||
<main>
|
||||
|
||||
<!-- Header Ecosistema -->
|
||||
<section class="section-padding hero-video-section" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color); position: relative; overflow: hidden; min-height: 400px;">
|
||||
|
||||
<!-- Video de fondo -->
|
||||
<video autoplay muted loop playsinline style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.15;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
">
|
||||
<source src="/assets/video/header_ide_loop3.mp4" type="video/mp4">
|
||||
Tu navegador no soporta videos.
|
||||
</video>
|
||||
|
||||
<!-- Overlay oscuro opcional para mejor contraste -->
|
||||
<div style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(19, 167, 138, 0.5);
|
||||
z-index: 1;
|
||||
"></div>
|
||||
|
||||
<section class="section-padding-npb hero-solucion">
|
||||
<!-- Contenido -->
|
||||
<div class="container container-narrow text-center" style="position: relative; z-index: 2;">
|
||||
<div class="container container-narrow text-center">
|
||||
<span class="eyebrow" style="color: var(--text-main);">PROPUESTA DE VALOR</span>
|
||||
<h1 style="margin-bottom: 1.25rem;color:var(--text-main);">Diferentes capacidades.<br> Una visión compartida del conjunto.</h1>
|
||||
<p class="lead-text" style="margin: 0 auto 2rem auto;color:var(--text-main);">
|
||||
No todos los desafíos necesitan activar todo el Ecosistema. <br>La clave está en comprender el conjunto para saber dónde intervenir.
|
||||
</p>
|
||||
|
||||
<!-- Principio Destacado en Caja -->
|
||||
<div style="background-color: var(--ide-accent); border-left: 4px solid var(--text-main); padding: 1.25rem 1.5rem; text-align: left; border-radius: var(--radius-sm); max-width: 760px; margin: 0 auto;">
|
||||
<p style="font-size: 0.98rem; color: var(--text-main); font-weight: 600; margin: 0;">
|
||||
<em>“No todos los desafíos necesitan todo el Ecosistema. Pero todos pueden beneficiarse de una mirada capaz de comprender el conjunto.”</em>
|
||||
<div class="container container-narrow">
|
||||
<div class="container container-narrow">
|
||||
<span class="eyebrow">PROPUESTA DE VALOR</span>
|
||||
<h1>Diferentes capacidades.<br> Una visión compartida del conjunto.</h1>
|
||||
<p class="lead-text">
|
||||
No todos los desafíos necesitan activar todo el Ecosistema. <br>La clave está en comprender el conjunto para saber dónde intervenir.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECCIÓN WEB DEDICADA PARA EL ESQUEMA -->
|
||||
<section class="netschema-section">
|
||||
<div class="netschema-wrapper">
|
||||
<div style="text-align: center; margin-bottom: 3rem;">
|
||||
<span class="eyebrow">ARQUITECTURA DE INTEGRACIÓN</span>
|
||||
<h2>El Modelo de Red Sistémica</h2>
|
||||
</div>
|
||||
<!-- Canvas de alta resolución -->
|
||||
<canvas id="networkCanvas" width="1200" height="520"></canvas>
|
||||
|
||||
<!-- Tooltip / Leyenda emergente en hover -->
|
||||
<div id="tooltip" class="network-tooltip hidden">
|
||||
<div id="tooltip-title" class="tooltip-title"></div>
|
||||
<div id="tooltip-desc" class="tooltip-desc"></div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
|
||||
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;margin-bottom: 2rem;">
|
||||
<a href="desafios.html" class="btn btn-outline btn-sm">Explorar nuestra Red</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Profundización de las 4 Capacidades -->
|
||||
<section class="section-padding">
|
||||
<section class="section-padding-sm">
|
||||
<div class="container">
|
||||
<div style="text-align: center; margin-bottom: 3rem;">
|
||||
<div class="seccion-servicios-tarjetas">
|
||||
<span class="eyebrow">CAPACIDADES</span>
|
||||
<h2>Conocé Nuestro Ecosistema en detalle</h2>
|
||||
</div>
|
||||
<!-- 1. IDE Excellence -->
|
||||
<div id="excellence" class="card card-excellence" style="margin-bottom: 2.5rem; padding: 2.5rem;">
|
||||
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
|
||||
<div id="excellence" class="card card-excellence card-ecosistema">
|
||||
<div class="grid-2 eco">
|
||||
<div>
|
||||
<span class="ecosystem-badge badge-excellence">Operational Excellence & Sustainability</span>
|
||||
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
|
||||
<p>
|
||||
<strong>Para fortalecer la gestión y mejorar el desempeño:</strong> Integramos procesos, sistemas de gestión, mejora continua y sostenibilidad para ayudar a las organizaciones a gestionar mejor, optimizar su desempeño y generar valor sostenible.
|
||||
</p>
|
||||
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted);">
|
||||
<ul>
|
||||
<li>• Procesos</li>
|
||||
<li>• Sistemas de gestión</li>
|
||||
<li>• Mejora continua</li>
|
||||
@@ -110,26 +71,27 @@
|
||||
<li>• Riesgos</li>
|
||||
<li>• Sostenibilidad</li>
|
||||
</ul>
|
||||
<a class="btn btn-outline btn-sm" data-modal-target="modal-ide-excellence">CONOCER MÁS →</a>
|
||||
</div>
|
||||
<div>
|
||||
<img src="assets/img/excellence.png" alt="IDE Excellence" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
|
||||
<img src="assets/img/excellence.png" alt="IDE Excellence">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. IDE Project -->
|
||||
<div id="project" class="card card-projects" style="margin-bottom: 2.5rem; padding: 2.5rem;">
|
||||
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
|
||||
<div id="project" class="card card-projects card-ecosistema">
|
||||
<div class="grid-2 eco">
|
||||
<div>
|
||||
<img src="assets/img/projects.png" alt="IDE Project" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
|
||||
<img src="assets/img/projects.png" alt="IDE Project">
|
||||
</div>
|
||||
<div>
|
||||
<span class="ecosystem-badge badge-project">PMO & Project Services</span>
|
||||
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
|
||||
<p>
|
||||
<strong>Para convertir iniciativas en resultados:</strong> Fortalecemos la capacidad de las organizaciones para seleccionar, priorizar y gestionar proyectos, conectando estrategia, recursos y ejecución para transformar iniciativas en resultados.
|
||||
|
||||
</p>
|
||||
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted);">
|
||||
<ul>
|
||||
<li>• Proyectos</li>
|
||||
<li>• PMO</li>
|
||||
<li>• Portafolios</li>
|
||||
@@ -137,22 +99,20 @@
|
||||
<li>• Metodologías</li>
|
||||
<li>• Resultados</li>
|
||||
</ul>
|
||||
<a class="btn btn-outline btn-sm" data-modal-target="modal-ide-project">CONOCER MÁS →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. IDE Digital -->
|
||||
<div id="digital" class="card card-digital" style="padding: 2.5rem;">
|
||||
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
|
||||
<div>
|
||||
<img src="assets/img/digital.png" alt="IDE Digital" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
|
||||
</div>
|
||||
<!-- 3. IDE Digital -->
|
||||
<div id="digital" class="card card-digital card-ecosistema">
|
||||
<div class="grid-2 eco">
|
||||
<div>
|
||||
<span class="ecosystem-badge badge-digital">Business Digital Solutions</span>
|
||||
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
|
||||
<p>
|
||||
<strong>Tecnología con sentido: </strong> Conectamos gestión, procesos, datos e inteligencia artificial para identificar dónde la tecnología puede simplificar, automatizar y potenciar la forma en que las organizaciones trabajan y toman decisiones.
|
||||
</p>
|
||||
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted);">
|
||||
<ul>
|
||||
<li>• Digitalización</li>
|
||||
<li>• Automatización </li>
|
||||
<li>• Datos.</li>
|
||||
@@ -160,19 +120,26 @@
|
||||
<li>• Integración </li>
|
||||
<li>• Decisiones </li>
|
||||
</ul>
|
||||
<a class="btn btn-outline btn-sm" data-modal-target="modal-ide-digital">CONOCER MÁS →</a>
|
||||
</div>
|
||||
<div>
|
||||
<img src="assets/img/digital.png" alt="IDE Digital">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. IDE Academy -->
|
||||
<div id="academy" class="card card-academy" style="margin-bottom: 2.5rem; padding: 2.5rem;">
|
||||
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
|
||||
<div id="academy" class="card card-academy card-ecosistema">
|
||||
<div class="grid-2 eco">
|
||||
<div>
|
||||
<img src="assets/img/academy.png" alt="IDE Academy">
|
||||
</div>
|
||||
<div>
|
||||
<span class="ecosystem-badge badge-academy">Executive Learning & Capability Development</span>
|
||||
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
|
||||
<p>
|
||||
<strong>Para desarrollar capacidades: </strong>Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para fortalecer las capacidades que profesionales, equipos y organizaciones necesitan para gestionar, liderar y transformar.
|
||||
</p>
|
||||
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 1.25rem;">
|
||||
<ul>
|
||||
<li>• Formación Ejecutiva</li>
|
||||
<li>• In-Company</li>
|
||||
<li>• Programas</li>
|
||||
@@ -181,59 +148,108 @@
|
||||
</ul>
|
||||
<a href="ide-academy.html" class="btn btn-outline btn-sm">EXPLORAR IDE ACADEMY →</a>
|
||||
</div>
|
||||
<div>
|
||||
<img src="assets/img/academy.png" alt="IDE Academy" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Ejemplos Concretos de Integración -> ahora es PREGUNTAS FRECUENTES-->
|
||||
<!-- PREGUNTAS FRECUENTES-->
|
||||
<section class="section-padding bg-subtle-section">
|
||||
<div class="container">
|
||||
|
||||
<div style="text-align: center; margin-bottom: 3rem;">
|
||||
<span class="eyebrow">PREGUNTAS FRECUENTES</span>
|
||||
<h2>¿Cómo funciona el Ecosistema IDE en la práctica?</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid-3">
|
||||
<!-- Contenedor centrado del acordeón -->
|
||||
<div class="faq-accordion-container">
|
||||
|
||||
<div class="card">
|
||||
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">¿Necesito contratar las cuatro capacidades del Ecosistema?</h4>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
|
||||
<strong>No. </strong> Cada intervención se diseña a partir del desafío y del contexto de la organización. Podemos trabajar desde una única capacidad o integrar varias cuando su combinación permite generar mayor valor.
|
||||
</div>
|
||||
<!-- FAQ 1 -->
|
||||
<details class="faq-item" name="faq-group">
|
||||
<summary class="faq-header">
|
||||
<span class="faq-question">¿Necesito contratar las cuatro capacidades del Ecosistema?</span>
|
||||
<span class="faq-icon" aria-hidden="true">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="faq-content">
|
||||
<p>
|
||||
<strong>No.</strong> Cada intervención se diseña a partir del desafío y del contexto de la organización. Podemos trabajar desde una única capacidad o integrar varias cuando su combinación permite generar mayor valor.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="card">
|
||||
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">¿IDE trabaja con soluciones prediseñadas o desarrolla propuestas a medida?</h4>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
|
||||
<strong>Ambas posibilidades pueden convivir. </strong> Contamos con soluciones y metodologías que sirven como punto de partida, pero definimos el alcance de cada intervención según los objetivos, necesidades y contexto de la organización.
|
||||
</p>
|
||||
</div>
|
||||
<!-- FAQ 2 -->
|
||||
<details class="faq-item" name="faq-group">
|
||||
<summary class="faq-header">
|
||||
<span class="faq-question">¿IDE trabaja con soluciones prediseñadas o desarrolla propuestas a medida?</span>
|
||||
<span class="faq-icon" aria-hidden="true">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="faq-content">
|
||||
<p>
|
||||
<strong>Ambas posibilidades pueden convivir.</strong> Contamos con soluciones y metodologías que sirven como punto de partida, pero definimos el alcance de cada intervención según los objetivos, necesidades y contexto de la organización.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="card">
|
||||
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">¿Qué pasa si no sé qué capacidad necesito?</h4>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
|
||||
<strong>No hace falta definirlo de antemano. </strong> Empezamos por comprender qué está pasando, identificar dónde puede estar el punto de intervención y, a partir de allí, determinar qué capacidades pueden aportar valor.
|
||||
</p>
|
||||
</div>
|
||||
<!-- FAQ 3 -->
|
||||
<details class="faq-item" name="faq-group">
|
||||
<summary class="faq-header">
|
||||
<span class="faq-question">¿Qué pasa si no sé qué capacidad necesito?</span>
|
||||
<span class="faq-icon" aria-hidden="true">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="faq-content">
|
||||
<p>
|
||||
<strong>No hace falta definirlo de antemano.</strong> Empezamos por comprender qué está pasando, identificar dónde puede estar el punto de intervención y, a partir de allí, determinar qué capacidades pueden aportar valor.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="card">
|
||||
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">¿Puedo trabajar con IDE para una necesidad puntual?</h4>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
|
||||
<strong>Si. </strong> La mirada sistémica no implica intervenir en toda la organización. Podemos abordar una necesidad específica manteniendo en perspectiva sus relaciones e impactos sobre el conjunto.
|
||||
<!-- FAQ 4 -->
|
||||
<details class="faq-item" name="faq-group">
|
||||
<summary class="faq-header">
|
||||
<span class="faq-question">¿Puedo trabajar con IDE para una necesidad puntual?</span>
|
||||
<span class="faq-icon" aria-hidden="true">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="faq-content">
|
||||
<p>
|
||||
<strong>Sí.</strong> La mirada sistémica no implica intervenir en toda la organización. Podemos abordar una necesidad específica manteniendo en perspectiva sus relaciones e impactos sobre el conjunto.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">¿Cómo sé por dónde empezar?</h4>
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
|
||||
<strong>Si ya identificaste qué necesitás, podés explorar nuestras soluciones. </strong>Si todavía estás tratando de comprender el desafío, la Brújula IDE puede ayudarte a encontrar un primer punto de orientación.
|
||||
</p>
|
||||
</div>
|
||||
<!-- FAQ 5 -->
|
||||
<details class="faq-item" name="faq-group">
|
||||
<summary class="faq-header">
|
||||
<span class="faq-question">¿Cómo sé por dónde empezar?</span>
|
||||
<span class="faq-icon" aria-hidden="true">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="faq-content">
|
||||
<p>
|
||||
<strong>Si ya identificaste qué necesitás, podés explorar nuestras soluciones.</strong> Si todavía estás tratando de comprender el desafío, la Brújula IDE puede ayudarte a encontrar un primer punto de orientación.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -241,7 +257,7 @@
|
||||
|
||||
<!-- CTA Final -->
|
||||
<section class="section-padding" style="background-color: var(--teal-dark); border-top: 1px solid var(--border-color);">
|
||||
<div class="container container-narrow text-center">
|
||||
<div class="container container-narrow">
|
||||
<h2 style="color: var(--text-inverse); margin-bottom: 1rem;">¿Dónde podemos generar mayor impacto en tu organización?</h2>
|
||||
<p class="lead-text-cta" style="margin-bottom: 1.5rem;">
|
||||
Conversemos para comprender tu desafío e identificar qué capacidades pueden aportar mayor valor.
|
||||
@@ -253,12 +269,339 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MODAL: IDE EXCELLENCE -->
|
||||
<div id="modal-ide-excellence" class="ide-modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-projects-title">
|
||||
<div class="ide-modal-container excellence">
|
||||
|
||||
<!-- Botón Cerrar (X) -->
|
||||
<button type="button" class="ide-modal-close" id="btnCloseModal" aria-label="Cerrar modal">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Envoltorio del contenido con scroll interno -->
|
||||
<div class="ide-modal-body-wrapper">
|
||||
<div class="ide-modal-scroll" id="modalScrollArea">
|
||||
|
||||
<!-- Encabezado -->
|
||||
<header class="ide-modal-header">
|
||||
<div class="ide-modal-pill">IDE EXCELLENCE</div>
|
||||
<h2 id="modal-projects-title" class="ide-modal-title">Operational Excellence & Management Systems</h2>
|
||||
<p class="ide-modal-tagline">Fortalecer la gestión para mejorar el desempeño.</p>
|
||||
</header>
|
||||
|
||||
<!-- Introducción -->
|
||||
<div class="ide-modal-lead">
|
||||
<p>Ayudamos a las organizaciones a comprender cómo funcionan sus procesos, ordenar su gestión y desarrollar sistemas capaces de sostener la mejora en el tiempo.</p>
|
||||
<p>Combinamos excelencia operacional, gestión por procesos, sistemas de gestión, análisis de riesgos e información para transformar requisitos y oportunidades de mejora en mejores formas de gestionar.</p>
|
||||
</div>
|
||||
|
||||
<!-- Capacidades -->
|
||||
<section class="ide-modal-section">
|
||||
<h3 class="ide-section-title">Nuestras capacidades</h3>
|
||||
<div class="ide-grid-cards">
|
||||
<div class="ide-feature-card">
|
||||
<h4>Excelencia operacional</h4>
|
||||
<p>Procesos · cadenas de valor · eficiencia · desempeño · mejora continua · indicadores.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Sistemas de gestión</h4>
|
||||
<p>ISO 9001 · ISO 14001 · ISO 45001 · ISO 29001 · ISO 39001 · ISO 22000 · ISO 21001 · ISO 29993 · ISO 30401 · sistemas integrados · referenciales sectoriales.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Sostenibilidad</h4>
|
||||
<p>Integración de criterios ambientales, sociales y de gobernanza en la gestión · ODS · identificación de impactos · objetivos e indicadores de sostenibilidad · buenas prácticas.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Riesgos, desempeño y mejora</h4>
|
||||
<p>Riesgos y oportunidades · KPIs · tableros · auditorías · evaluación de madurez · mejora continua.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card ide-card-full">
|
||||
<h4>Gestión del conocimiento</h4>
|
||||
<p>Conocimiento crítico · transferencia · lecciones aprendidas · continuidad · aprendizaje organizacional.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Propuesta de Valor -->
|
||||
<section class="ide-modal-callout">
|
||||
<blockquote class="ide-quote-highlight">
|
||||
“Mejorar el desempeño sin perder de vista el impacto.”
|
||||
</blockquote>
|
||||
<p>Sistemas y procesos que no existan solamente para cumplir un requisito, sino que ayuden a ordenar, decidir, mejorar y sostener resultados.</p>
|
||||
</section>
|
||||
|
||||
<!-- Sinergia del Ecosistema -->
|
||||
<section class="ide-modal-synergy">
|
||||
<h4>Cuando el desafío requiere más</h4>
|
||||
<p>
|
||||
IDE Excellence puede integrarse con <strong>IDE Project</strong> , <strong>IDE Academy</strong> e <strong>IDE Digital</strong> para abordar proyectos de transformación, desarrollar capacidades o incorporar tecnología y automatización.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barra Inferior Fija (Footer) -->
|
||||
<footer class="ide-modal-footer-fixed">
|
||||
<span class="ide-scroll-hint" id="scrollHint">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
|
||||
</svg>
|
||||
Desliza para leer más
|
||||
</span>
|
||||
<a href="contacto.html" class="ide-btn-cta">
|
||||
<span>HABLEMOS</span>
|
||||
<span class="ide-btn-arrow">→</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: IDE PROJECTS -->
|
||||
<div id="modal-ide-project" class="ide-modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-projects-title">
|
||||
<div class="ide-modal-container projects">
|
||||
|
||||
<!-- Botón Cerrar (X) -->
|
||||
<button type="button" class="ide-modal-close" id="btnCloseModal" aria-label="Cerrar modal">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Envoltorio del contenido con scroll interno -->
|
||||
<div class="ide-modal-body-wrapper">
|
||||
<div class="ide-modal-scroll project" id="modalScrollArea">
|
||||
|
||||
<!-- Encabezado -->
|
||||
<header class="ide-modal-header">
|
||||
<div class="ide-modal-pill">IDE PROJECTS</div>
|
||||
<h2 id="modal-projects-title" class="ide-modal-title">PMO & Project Services</h2>
|
||||
<p class="ide-modal-tagline">Convertir iniciativas en resultados.</p>
|
||||
</header>
|
||||
|
||||
<!-- Introducción -->
|
||||
<div class="ide-modal-lead">
|
||||
<p>Ayudamos a las organizaciones a fortalecer su capacidad para seleccionar, priorizar, planificar y ejecutar proyectos, programas y portafolios, conectando las iniciativas con los objetivos estratégicos y los recursos disponibles.</p>
|
||||
<p>Integramos metodologías, gobernanza, información y capacidades de gestión para acompañar todo el ciclo de vida de los proyectos y mejorar su contribución a los resultados de la organización.</p>
|
||||
</div>
|
||||
|
||||
<!-- Capacidades -->
|
||||
<section class="ide-modal-section">
|
||||
<h3 class="ide-section-title">Nuestras capacidades</h3>
|
||||
<div class="ide-grid-cards">
|
||||
<div class="ide-feature-card">
|
||||
<h4>Gestión de proyectos</h4>
|
||||
<p>Planificación, organización, seguimiento y acompañamiento de proyectos para gestionar alcance, plazos, costos, recursos, riesgos, stakeholders y resultados.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>PMO — Oficinas de Gestión de Proyectos</h4>
|
||||
<p>Diseño, implementación y fortalecimiento de PMO adaptadas al nivel de madurez, estrategia y necesidades de cada organización.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Programas y portafolios</h4>
|
||||
<p>Priorización y coordinación de iniciativas para mejorar la asignación de recursos, gestionar interdependencias y mantener alineadas las inversiones con los objetivos organizacionales.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Gobernanza y metodologías</h4>
|
||||
<p>Diseño de modelos de gobernanza, procesos, roles, indicadores y metodologías predictivas, ágiles o híbridas adaptadas al contexto de cada organización.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card ide-card-full">
|
||||
<h4>Diagnóstico y recuperación de proyectos</h4>
|
||||
<p>Evaluación de proyectos con dificultades o desvíos para identificar causas, redefinir prioridades y establecer planes de recuperación y seguimiento.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Metodologías -->
|
||||
<section class="ide-modal-section">
|
||||
<h3 class="ide-section-title">Cómo trabajamos</h3>
|
||||
<div class="ide-tags-wrapper">
|
||||
<span class="ide-method-tag">Predictivo</span>
|
||||
<span class="ide-dot">·</span>
|
||||
<span class="ide-method-tag">Ágil</span>
|
||||
<span class="ide-dot">·</span>
|
||||
<span class="ide-method-tag">Híbrido</span>
|
||||
</div>
|
||||
<p class="ide-text-block">No partimos de una metodología predeterminada. Seleccionamos y combinamos prácticas de gestión según el tipo de proyecto, su complejidad, el contexto y las capacidades de la organización.</p>
|
||||
</section>
|
||||
|
||||
<!-- Propuesta de Valor -->
|
||||
<section class="ide-modal-callout">
|
||||
<blockquote class="ide-quote-highlight">
|
||||
“No se trata de gestionar más proyectos. Se trata de gestionar mejor las iniciativas que importan.”
|
||||
</blockquote>
|
||||
<p>Fortalecemos la capacidad de transformar prioridades estratégicas en iniciativas ejecutables, generar información para decidir y mantener el foco en los resultados.</p>
|
||||
</section>
|
||||
|
||||
<!-- Sinergia del Ecosistema -->
|
||||
<section class="ide-modal-synergy">
|
||||
<h4>Cuando el desafío requiere más</h4>
|
||||
<p>
|
||||
IDE Projects puede integrarse con <strong>IDE Excellence</strong>, <strong>IDE Academy</strong> e <strong>IDE Digital</strong> para rediseñar procesos, desarrollar capacidades, implementar sistemas o incorporar tecnología que fortalezca la gestión y ejecución de proyectos.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barra Inferior Fija (Footer) -->
|
||||
<footer class="ide-modal-footer-fixed">
|
||||
<span class="ide-scroll-hint" id="scrollHint">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
|
||||
</svg>
|
||||
Desliza para leer más
|
||||
</span>
|
||||
<a href="contacto.html" class="ide-btn-cta">
|
||||
<span>HABLEMOS</span>
|
||||
<span class="ide-btn-arrow">→</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: IDE DIGITAL -->
|
||||
<div id="modal-ide-digital" class="ide-modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-projects-title">
|
||||
<div class="ide-modal-container digital">
|
||||
|
||||
<!-- Botón Cerrar (X) -->
|
||||
<button type="button" class="ide-modal-close" id="btnCloseModal" aria-label="Cerrar modal">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Envoltorio del contenido con scroll interno -->
|
||||
<div class="ide-modal-body-wrapper">
|
||||
<div class="ide-modal-scroll" id="modalScrollArea">
|
||||
|
||||
<!-- Encabezado -->
|
||||
<header class="ide-modal-header">
|
||||
<div class="ide-modal-pill">IDE DIGITAL</div>
|
||||
<h2 id="modal-projects-title" class="ide-modal-title">Business Digital Solutions</h2>
|
||||
<p class="ide-modal-tagline">Tecnología con sentido.</p>
|
||||
</header>
|
||||
|
||||
<!-- Introducción -->
|
||||
<div class="ide-modal-lead">
|
||||
<p>Ayudamos a las organizaciones a identificar dónde la tecnología puede generar valor y a transformar esas oportunidades en soluciones digitales aplicables a su realidad.</p>
|
||||
<p>Integramos procesos, datos, automatización e inteligencia artificial para simplificar la gestión, mejorar el acceso a la información y fortalecer la toma de decisiones, priorizando soluciones útiles, escalables y sostenibles.</p>
|
||||
</div>
|
||||
|
||||
<!-- Capacidades -->
|
||||
<section class="ide-modal-section">
|
||||
<h3 class="ide-section-title">Nuestras capacidades</h3>
|
||||
<div class="ide-grid-cards">
|
||||
<div class="ide-feature-card">
|
||||
<h4>Digitalización y sistematización de procesos</h4>
|
||||
<p>Analizamos procesos y flujos de información para identificar oportunidades de digitalización, reducir tareas manuales y mejorar la trazabilidad y disponibilidad de la información.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Automatización e integración</h4>
|
||||
<p>Diseñamos automatizaciones e integraciones entre procesos, datos y herramientas para reducir tareas repetitivas, errores y puntos de fricción.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Inteligencia Artificial aplicada</h4>
|
||||
<p>Identificamos y desarrollamos casos de uso de IA vinculados con necesidades concretas de gestión, operación, análisis y conocimiento organizacional.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Datos e inteligencia de negocio</h4>
|
||||
<p>Diseñamos indicadores, tableros y soluciones de Business Intelligence para transformar datos dispersos en información accesible y útil para la toma de decisiones.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Diagnóstico y hoja de ruta digital</h4>
|
||||
<p>Evaluamos procesos, herramientas, información y capacidades para identificar oportunidades, establecer prioridades y construir una hoja de ruta de transformación digital.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Adopción y capacidades digitales</h4>
|
||||
<p>Acompañamos la incorporación de nuevas soluciones trabajando sobre procesos, prácticas y capacidades para integrarlas efectivamente a la dinámica de la organización.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Metodologías -->
|
||||
<section class="ide-modal-section">
|
||||
<h3 class="ide-section-title">Cómo trabajamos</h3>
|
||||
<div class="ide-tags-wrapper">
|
||||
<span class="ide-method-tag">Necesidad</span>
|
||||
<span class="ide-dot">⇒</span>
|
||||
<span class="ide-method-tag">Proceso</span>
|
||||
<span class="ide-dot">⇒</span>
|
||||
<span class="ide-method-tag">Solución</span>
|
||||
<span class="ide-dot">⇒</span>
|
||||
<span class="ide-method-tag">Integración</span>
|
||||
</div>
|
||||
<p class="ide-text-block">No partimos de una tecnología predeterminada. Primero comprendemos la necesidad y el proceso; luego identificamos qué solución digital puede generar valor y cómo integrarla al funcionamiento de la organización.</p>
|
||||
</section>
|
||||
|
||||
<!-- Propuesta de Valor -->
|
||||
<section class="ide-modal-callout">
|
||||
<blockquote class="ide-quote-highlight">
|
||||
“No digitalizar por digitalizar. Transformar donde tenga sentido.”
|
||||
</blockquote>
|
||||
<p>La tecnología genera valor cuando simplifica la gestión, mejora las decisiones o habilita nuevas capacidades sin agregar complejidad innecesaria.</p>
|
||||
</section>
|
||||
|
||||
<!-- Sinergia del Ecosistema -->
|
||||
<section class="ide-modal-synergy">
|
||||
<h4>Cuando el desafío requiere más</h4>
|
||||
<p>
|
||||
<strong>IDE Digital</strong> puede integrarse con <strong>IDE Excellence</strong>, <strong>IDE Projects</strong> e <strong>IDE Academy</strong> para rediseñar procesos, gestionar proyectos de transformación y desarrollar las capacidades necesarias para incorporar nuevas formas de trabajar.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barra Inferior Fija (Footer) -->
|
||||
<footer class="ide-modal-footer-fixed">
|
||||
<span class="ide-scroll-hint" id="scrollHint">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
|
||||
</svg>
|
||||
Desliza para leer más
|
||||
</span>
|
||||
<a href="contacto.html" class="ide-btn-cta">
|
||||
<span>HABLEMOS</span>
|
||||
<span class="ide-btn-arrow">→</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer id="site-footer"></footer>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/netschema.js"></script>
|
||||
<script src="js/netschema2.js"></script>
|
||||
<script src="js/modal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+3
-3
@@ -31,7 +31,7 @@
|
||||
<div class="hero-grid">
|
||||
<div>
|
||||
<span class="eyebrow">CONECTAMOS EL TODO</span>
|
||||
<h1 style="margin-bottom: 0.5rem; line-height: 1;">
|
||||
<h1 style="margin-bottom: 0.8rem; line-height: 1;">
|
||||
¿Qué pasa cuando dejamos de mirar los problemas por separado?
|
||||
</h1>
|
||||
<p class="lead-text" style="margin-bottom: 2rem;">
|
||||
@@ -59,7 +59,7 @@
|
||||
<section class="incomodidad-section snowball-bg" style="gap: 3rem;">
|
||||
<!--<canvas id="ripple-canvas"></canvas>-->
|
||||
<div class="incomodidad-content">
|
||||
<div class="tension-box" style="margin-bottom: 8rem;">
|
||||
<div class="tension-box" style="margin-bottom: 4rem;">
|
||||
<div style="max-width: 700px; margin: 0 auto; text-align: center;">
|
||||
<span class="eyebrow">LA INCOMODIDAD PRODUCTIVA</span>
|
||||
<h2 style="margin-bottom: 1.5rem;">
|
||||
@@ -686,7 +686,7 @@
|
||||
</section>
|
||||
|
||||
<!-- BLOQUE 6: CTA FINAL DE CONVERSIÓN -->
|
||||
<section class="section-padding">
|
||||
<section class="section-padding-sm">
|
||||
<div class="container">
|
||||
<div class="card" style="background: linear-gradient(135deg, var(--ide-primary-dark) 0%, var(--ide-primary-light2) 100%); color: #FFFFFF; border: none; padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center;">
|
||||
<span class="eyebrow" style="color: var(--ide-accent);">CONVERSACIÓN INICIAL</span>
|
||||
|
||||
+95
@@ -0,0 +1,95 @@
|
||||
/* ==========================================================================
|
||||
MAPEO DE NODOS CENTRALES CON CADA MODAL
|
||||
========================================================================== */
|
||||
const NODE_MODAL_MAP = {
|
||||
p_top: "modal-ide-excellence",
|
||||
p_bottom: "modal-ide-digital",
|
||||
p_left: "modal-ide-academy",
|
||||
p_right: "modal-ide-projects"
|
||||
};
|
||||
|
||||
/* ==========================================================================
|
||||
FUNCIONES GLOBALES DE CONTROL
|
||||
========================================================================== */
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
if (!modal) return;
|
||||
modal.classList.add("is-active");
|
||||
document.body.style.overflow = "hidden";
|
||||
|
||||
const scrollArea = modal.querySelector(".ide-modal-scroll");
|
||||
if (scrollArea) scrollArea.scrollTop = 0;
|
||||
}
|
||||
|
||||
function closeModal(modalOrId) {
|
||||
const modal = typeof modalOrId === "string"
|
||||
? document.getElementById(modalOrId)
|
||||
: modalOrId;
|
||||
if (!modal) return;
|
||||
modal.classList.remove("is-active");
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
EVENTO CLICK EN EL CANVAS (Abre el modal correspondiente a cada nodo)
|
||||
========================================================================== */
|
||||
canvas.addEventListener("click", (e) => {
|
||||
const { x, y } = getCanvasCoordinates(e);
|
||||
|
||||
for (const [nodeId, modalId] of Object.entries(NODE_MODAL_MAP)) {
|
||||
const node = nodes.find(n => n.id === nodeId);
|
||||
if (node && Math.hypot(node.x - x, node.y - y) <= node.radius) {
|
||||
openModal(modalId);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/* ==========================================================================
|
||||
INICIALIZACIÓN DE EVENTOS UNIVERSALES PARA TODOS LOS MODALES
|
||||
========================================================================== */
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// 1. Cualquier botón con [data-modal-target] abre su modal asignado
|
||||
document.querySelectorAll("[data-modal-target]").forEach(btn => {
|
||||
btn.addEventListener("click", () => {
|
||||
const targetId = btn.getAttribute("data-modal-target");
|
||||
openModal(targetId);
|
||||
});
|
||||
});
|
||||
|
||||
// 2. Todos los modales gestionan cierre por botón (X) o clic fuera
|
||||
document.querySelectorAll(".ide-modal-backdrop").forEach(modal => {
|
||||
// Botón X
|
||||
const closeBtn = modal.querySelector(".ide-modal-close");
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener("click", () => closeModal(modal));
|
||||
}
|
||||
|
||||
// Clic en el fondo oscuro
|
||||
modal.addEventListener("click", (e) => {
|
||||
if (e.target === modal) closeModal(modal);
|
||||
});
|
||||
|
||||
// Control del hint de scroll individual para cada modal
|
||||
const scrollArea = modal.querySelector(".ide-modal-scroll");
|
||||
const scrollHint = modal.querySelector(".ide-scroll-hint");
|
||||
if (scrollArea && scrollHint) {
|
||||
scrollArea.addEventListener("scroll", () => {
|
||||
const isAtBottom = scrollArea.scrollHeight - scrollArea.scrollTop - scrollArea.clientHeight < 40;
|
||||
if (isAtBottom) {
|
||||
scrollHint.classList.add("is-hidden");
|
||||
} else {
|
||||
scrollHint.classList.remove("is-hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 3. Tecla Escape cierra cualquier modal que esté abierto
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
const activeModal = document.querySelector(".ide-modal-backdrop.is-active");
|
||||
if (activeModal) closeModal(activeModal);
|
||||
}
|
||||
});
|
||||
});
|
||||
+265
-75
@@ -1,23 +1,30 @@
|
||||
// Mapa: propiedad de CONFIG -> nombre de variable CSS
|
||||
const CSS_VARS = {
|
||||
greenNodesColor: "--ide-primary",
|
||||
greenStrokeColor: "--ide-primary-light",
|
||||
linkLineColor: "--canvas-link-line-color",
|
||||
linkGreenColor: "--canvas-link-green-color",
|
||||
linkActiveColor: "--canvas-link-active-color",
|
||||
purpleCoreLineColor: "--canvas-purple-core-line-color"
|
||||
greenNodesColor: "--ide-primary",
|
||||
greenStrokeColor: "--ide-primary-light",
|
||||
linkLineColor: "--ide-primary-line",
|
||||
linkGreenColor: "--ide-primary-line",
|
||||
linkGreenToGreenColor: "--ide-primary-light2", // Color para líneas entre nodos verdes
|
||||
linkActiveColor: "--ide-primary-light",
|
||||
purpleCoreLineColor: "--ide-primary-line",
|
||||
shadowCanva: "--shadow-canva",
|
||||
textMain: "--text-main",
|
||||
textInverse: "--text-inverse",
|
||||
centerBoxBg: "--ide-center-bg", // Fondo del recuadro central
|
||||
centerBoxBorder: "--ide-center-border", // Borde del recuadro central
|
||||
centerBoxText: "--ide-center-text" // Texto del recuadro central
|
||||
};
|
||||
|
||||
// Mapa: id de nodo violeta -> variable CSS
|
||||
const PURPLE_NODE_VARS = {
|
||||
p_top: "--canvas-purple-p-top-color",
|
||||
p_bottom: "--canvas-purple-p-bottom-color",
|
||||
p_left: "--canvas-purple-p-left-color",
|
||||
p_right: "--canvas-purple-p-right-color"
|
||||
p_top: "--ide-excellence",
|
||||
p_bottom: "--ide-academy",
|
||||
p_left: "--ide-projects",
|
||||
p_right: "--ide-digital"
|
||||
};
|
||||
|
||||
// Variable CSS común para todos los amarillos
|
||||
const YELLOW_NODE_VAR = "--canvas-yellow-node-color";
|
||||
const YELLOW_NODE_VAR = "--ide-primary-dark";
|
||||
|
||||
/* ==========================================================================
|
||||
UTILIDAD: LEER VARIABLES CSS
|
||||
@@ -36,70 +43,94 @@ function readCSSVariable(variableName, fallback = "") {
|
||||
|
||||
const CONFIG = {
|
||||
// 1. Color global configurable para TODOS los nodos verdes
|
||||
greenNodesColor: readCSSVariable(CSS_VARS.greenNodesColor, "#9b1717"),
|
||||
greenStrokeColor: readCSSVariable(CSS_VARS.greenStrokeColor, "#630b5f"),
|
||||
greenNodesColor: readCSSVariable(CSS_VARS.greenNodesColor),
|
||||
greenStrokeColor: readCSSVariable(CSS_VARS.greenStrokeColor),
|
||||
|
||||
// 2. Estilos de líneas punteadas y dinámicas
|
||||
linkLineColor: readCSSVariable(CSS_VARS.linkLineColor, "rgba(95, 110, 240, 0.40)"),
|
||||
linkGreenColor: readCSSVariable(CSS_VARS.linkGreenColor, "rgba(235, 60, 60, 0.42)"),
|
||||
linkActiveColor: readCSSVariable(CSS_VARS.linkActiveColor, "rgba(25, 35, 205, 0.95)"),
|
||||
purpleCoreLineColor: readCSSVariable(CSS_VARS.purpleCoreLineColor, "rgba(35, 35, 35, 0.70)"),
|
||||
linkLineColor: readCSSVariable(CSS_VARS.linkLineColor),
|
||||
linkGreenColor: readCSSVariable(CSS_VARS.linkGreenColor),
|
||||
linkGreenToGreenColor: readCSSVariable(CSS_VARS.linkGreenToGreenColor, readCSSVariable(CSS_VARS.linkGreenColor, "#24333E")),
|
||||
linkActiveColor: readCSSVariable(CSS_VARS.linkActiveColor),
|
||||
purpleCoreLineColor: readCSSVariable(CSS_VARS.purpleCoreLineColor),
|
||||
shadowCanva: readCSSVariable(CSS_VARS.shadowCanva),
|
||||
textMain: readCSSVariable(CSS_VARS.textMain),
|
||||
textInverse: readCSSVariable(CSS_VARS.textInverse),
|
||||
|
||||
// 3. Nodos VIOLETAS centrales (posiciones, color individual, leyenda)
|
||||
// 3. Estilos del recuadro central "EL TODO"
|
||||
centerBoxBg: readCSSVariable(CSS_VARS.centerBoxBg, readCSSVariable(YELLOW_NODE_VAR, "#1b2631")),
|
||||
centerBoxBorder: readCSSVariable(CSS_VARS.centerBoxBorder, readCSSVariable(CSS_VARS.purpleCoreLineColor, "#3a5160")),
|
||||
centerBoxText: readCSSVariable(CSS_VARS.centerBoxText, readCSSVariable(CSS_VARS.textInverse, "#ffffff")),
|
||||
|
||||
// Datos del componente central
|
||||
centerBox: {
|
||||
id: "center_box",
|
||||
label: "EL TODO",
|
||||
desc: "Núcleo integrador central del sistema.",
|
||||
x: 615,
|
||||
y: 260,
|
||||
baseX: 615,
|
||||
baseY: 260,
|
||||
width: 104,
|
||||
height: 36,
|
||||
borderRadius: 8,
|
||||
speedOffset: Math.random() * 10
|
||||
},
|
||||
|
||||
// 4. Nodos VIOLETAS centrales (posiciones, color individual, leyenda)
|
||||
purpleNodes: [
|
||||
{
|
||||
id: "p_top",
|
||||
x: 615, y: 185,
|
||||
radius: 42,
|
||||
label: "Núcleo N",
|
||||
color: readCSSVariable(PURPLE_NODE_VARS.p_top, "#8a00c2"),
|
||||
label: "Excellence",
|
||||
color: readCSSVariable(PURPLE_NODE_VARS.p_top),
|
||||
desc: "Servidor central de control y despacho de tareas."
|
||||
},
|
||||
{
|
||||
id: "p_bottom",
|
||||
x: 615, y: 335,
|
||||
radius: 42,
|
||||
label: "Núcleo S",
|
||||
color: readCSSVariable(PURPLE_NODE_VARS.p_bottom, "#9900d8"),
|
||||
label: "Academy",
|
||||
color: readCSSVariable(PURPLE_NODE_VARS.p_bottom),
|
||||
desc: "Base de datos y redundancia estructural sur."
|
||||
},
|
||||
{
|
||||
id: "p_left",
|
||||
x: 485, y: 260,
|
||||
radius: 42,
|
||||
label: "Núcleo O",
|
||||
color: readCSSVariable(PURPLE_NODE_VARS.p_left, "#7e00b3"),
|
||||
label: "Project",
|
||||
color: readCSSVariable(PURPLE_NODE_VARS.p_left),
|
||||
desc: "Pasarela occidental hacia submódulos de entrada."
|
||||
},
|
||||
{
|
||||
id: "p_right",
|
||||
x: 745, y: 260,
|
||||
radius: 42,
|
||||
label: "Núcleo E",
|
||||
color: readCSSVariable(PURPLE_NODE_VARS.p_right, "#9400cf"),
|
||||
label: "Digital",
|
||||
color: readCSSVariable(PURPLE_NODE_VARS.p_right),
|
||||
desc: "Concentrador oriental hacia subredes de distribución."
|
||||
}
|
||||
],
|
||||
|
||||
// 4. Nodos AMARILLOS: Cada uno conectado a 2 VIOLETAS
|
||||
// 5. Nodos AMARILLOS: Cada uno conectado a 2 VIOLETAS
|
||||
yellowNodes: [
|
||||
// --- Lado Izquierdo ---
|
||||
{ id: "yl_1", x: 420, y: 130, r: 26, label: "IZQ-1", color: readCSSVariable(YELLOW_NODE_VAR, "#ffff00"), desc: "Módulo intermedio A-1", purpleTargets: ["p_top", "p_left"], side: "left" },
|
||||
{ id: "yl_2", x: 350, y: 165, r: 24, label: "IZQ-2", color: readCSSVariable(YELLOW_NODE_VAR, "#fff01f"), desc: "Módulo intermedio A-2", purpleTargets: ["p_top", "p_left"], side: "left" },
|
||||
{ id: "yl_3", x: 355, y: 245, r: 25, label: "IZQ-3", color: readCSSVariable(YELLOW_NODE_VAR, "#ffee00"), desc: "Balanceador izquierdo", purpleTargets: ["p_left", "p_top"], side: "left" },
|
||||
{ id: "yl_4", x: 335, y: 335, r: 26, label: "IZQ-4", color: readCSSVariable(YELLOW_NODE_VAR, "#ffff00"), desc: "Filtro de tráfico A-4", purpleTargets: ["p_left", "p_bottom"], side: "left" },
|
||||
{ id: "yl_5", x: 395, y: 415, r: 28, label: "IZQ-5", color: readCSSVariable(YELLOW_NODE_VAR, "#fff33b"), desc: "Procesador de paquetes", purpleTargets: ["p_bottom", "p_left"], side: "left" },
|
||||
{ id: "yl_6", x: 255, y: 350, r: 25, label: "IZQ-6", color: readCSSVariable(YELLOW_NODE_VAR, "#ffee00"), desc: "Enrutador secundario", purpleTargets: ["p_left", "p_bottom"], side: "left" },
|
||||
{ id: "yl_1", x: 420, y: 130, r: 26, label: "5S", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Capacitación e Impmentación", purpleTargets: ["p_top", "p_left"], side: "left" },
|
||||
{ id: "yl_2", x: 350, y: 165, r: 24, label: "ISO 9001", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Certificación", purpleTargets: ["p_top", "p_left"], side: "left" },
|
||||
{ id: "yl_3", x: 355, y: 245, r: 25, label: "KAIZEN", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Modificación de Procesos", purpleTargets: ["p_left", "p_top"], side: "left" },
|
||||
{ id: "yl_4", x: 335, y: 335, r: 26, label: "BPM", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Automatización de Procesos de Venta", purpleTargets: ["p_left", "p_bottom"], side: "left" },
|
||||
{ id: "yl_5", x: 395, y: 415, r: 28, label: "KPI", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Implementación y Monitoreo", purpleTargets: ["p_bottom", "p_left"], side: "left" },
|
||||
{ id: "yl_6", x: 255, y: 350, r: 25, label: "PDCA", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Capacitación y Mejora de Taller", purpleTargets: ["p_left", "p_bottom"], side: "left" },
|
||||
|
||||
// --- Lado Derecho ---
|
||||
{ id: "yr_1", x: 800, y: 135, r: 25, label: "DER-1", color: readCSSVariable(YELLOW_NODE_VAR, "#ffff00"), desc: "Concentrador de salida 1", purpleTargets: ["p_top", "p_right"], side: "right" },
|
||||
{ id: "yr_2", x: 875, y: 155, r: 25, label: "DER-2", color: readCSSVariable(YELLOW_NODE_VAR, "#ffee00"), desc: "Concentrador de salida 2", purpleTargets: ["p_top", "p_right"], side: "right" },
|
||||
{ id: "yr_3", x: 950, y: 195, r: 25, label: "DER-3", color: readCSSVariable(YELLOW_NODE_VAR, "#ffff00"), desc: "Distribuidor rápido 3", purpleTargets: ["p_right", "p_top"], side: "right" },
|
||||
{ id: "yr_4", x: 875, y: 235, r: 25, label: "DER-4", color: readCSSVariable(YELLOW_NODE_VAR, "#fff33b"), desc: "Replicador este 4", purpleTargets: ["p_right", "p_top"], side: "right" },
|
||||
{ id: "yr_5", x: 890, y: 300, r: 25, label: "DER-5", color: readCSSVariable(YELLOW_NODE_VAR, "#ffee00"), desc: "Gestor de colas 5", purpleTargets: ["p_right", "p_bottom"], side: "right" },
|
||||
{ id: "yr_6", x: 965, y: 345, r: 25, label: "DER-6", color: readCSSVariable(YELLOW_NODE_VAR, "#ffff00"), desc: "Canal asíncrono 6", purpleTargets: ["p_right", "p_bottom"], side: "right" },
|
||||
{ id: "yr_7", x: 890, y: 375, r: 25, label: "DER-7", color: readCSSVariable(YELLOW_NODE_VAR, "#fff01f"), desc: "Salida perimetral 7", purpleTargets: ["p_bottom", "p_right"], side: "right" },
|
||||
{ id: "yr_8", x: 830, y: 420, r: 26, label: "DER-8", color: readCSSVariable(YELLOW_NODE_VAR, "#ffee00"), desc: "Canal de descarga 8", purpleTargets: ["p_bottom", "p_right"], side: "right" }
|
||||
{ id: "yr_1", x: 800, y: 135, r: 25, label: "BPR", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Capacitación e Impmentación", purpleTargets: ["p_top", "p_right"], side: "right" },
|
||||
{ id: "yr_2", x: 875, y: 155, r: 25, label: "ISO45001", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Certificación", purpleTargets: ["p_top", "p_right"], side: "right" },
|
||||
{ id: "yr_3", x: 950, y: 195, r: 25, label: "LEAN", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Modificación de Procesos", purpleTargets: ["p_right", "p_top"], side: "right" },
|
||||
{ id: "yr_4", x: 875, y: 235, r: 25, label: "ISO14001", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Automatización de Procesos de Venta", purpleTargets: ["p_right", "p_top"], side: "right" },
|
||||
{ id: "yr_5", x: 890, y: 300, r: 25, label: "PMO", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Mejoras en procedimientos de Atención de situaciones críticas", purpleTargets: ["p_right", "p_bottom"], side: "right" },
|
||||
{ id: "yr_6", x: 965, y: 345, r: 25, label: "SIGMA", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Capacitación y Mejora de Taller", purpleTargets: ["p_right", "p_bottom"], side: "right" },
|
||||
{ id: "yr_7", x: 890, y: 375, r: 25, label: "IA", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Automatización de Toma de Decisiones", purpleTargets: ["p_bottom", "p_right"], side: "right" },
|
||||
{ id: "yr_8", x: 830, y: 420, r: 26, label: "RPA", color: readCSSVariable(YELLOW_NODE_VAR, "#24333E"), desc: "Implementación y Monitoreo", purpleTargets: ["p_bottom", "p_right"], side: "right" }
|
||||
]
|
||||
};
|
||||
|
||||
@@ -199,7 +230,7 @@ function initNetwork() {
|
||||
{ id: "gl_13", x: 235, y: 425, side: "left" },
|
||||
|
||||
// Lado Derecho
|
||||
{ id: "gr_1", x: 1040, y: 90, side: "right" },
|
||||
{ id: "gr_1", x: 1060, y: 90, side: "right" },
|
||||
{ id: "gr_2", x: 960, y: 110, side: "right" },
|
||||
{ id: "gr_3", x: 1025, y: 150, side: "right" },
|
||||
{ id: "gr_4", x: 1095, y: 155, side: "right" },
|
||||
@@ -232,27 +263,61 @@ function initNetwork() {
|
||||
});
|
||||
});
|
||||
|
||||
// 4. CONEXIÓN AMARILLOS <-> VERDES (cobertura total en ambas direcciones)
|
||||
// 4. CONEXIÓN AMARILLOS <-> VERDES (Múltiples conexiones por verde)
|
||||
const yellows = nodes.filter(n => n.type === "yellow");
|
||||
const greens = nodes.filter(n => n.type === "green");
|
||||
|
||||
// PASO A: cada amarillo con al menos 1 verde
|
||||
yellows.forEach((yNode, idx) => {
|
||||
const candidateGreens = greens.filter(g => g.side === yNode.side);
|
||||
candidateGreens.sort((a, b) => {
|
||||
const distA = Math.hypot(a.baseX - yNode.baseX, a.baseY - yNode.baseY);
|
||||
const distB = Math.hypot(b.baseX - yNode.baseX, b.baseY - yNode.baseY);
|
||||
// Configura cuántos amarillos conectar a cada verde (recomendado: 2 o 3)
|
||||
const YELLOWS_PER_GREEN = 2;
|
||||
|
||||
greens.forEach((gNode, gIdx) => {
|
||||
// 1. Filtrar amarillos que pertenezcan al mismo sector (left/right)
|
||||
const candidateYellows = yellows.filter(y => y.side === gNode.side);
|
||||
|
||||
// 2. Ordenar de menor a mayor distancia al nodo verde
|
||||
candidateYellows.sort((a, b) => {
|
||||
const distA = Math.hypot(a.baseX - gNode.baseX, a.baseY - gNode.baseY);
|
||||
const distB = Math.hypot(b.baseX - gNode.baseX, b.baseY - gNode.baseY);
|
||||
return distA - distB;
|
||||
});
|
||||
|
||||
if (candidateGreens.length > 0) {
|
||||
// 3. Tomar los N amarillos más cercanos
|
||||
const targets = candidateYellows.slice(0, YELLOWS_PER_GREEN);
|
||||
|
||||
targets.forEach((yNode, targetRank) => {
|
||||
// Alternar arco: el primero arquea hacia un lado y el segundo hacia el opuesto
|
||||
// Esto previene que las líneas coincidan o se solapen
|
||||
const direction = (gIdx + targetRank) % 2 === 0 ? 1 : -1;
|
||||
const baseCurvature = 0.16 + (targetRank * 0.07);
|
||||
const curvature = baseCurvature * direction;
|
||||
|
||||
addLink(
|
||||
yNode.id,
|
||||
candidateGreens[0].id,
|
||||
gNode.id,
|
||||
"yellow-green",
|
||||
true,
|
||||
idx % 2 === 0 ? 0.20 : -0.20
|
||||
curvature
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// PASO DE SEGURIDAD: asegurar que ningún amarillo quede sin al menos un verde
|
||||
yellows.forEach(yNode => {
|
||||
const hasConnection = links.some(
|
||||
l => l.type === "yellow-green" && (l.from === yNode.id || l.to === yNode.id)
|
||||
);
|
||||
|
||||
if (!hasConnection) {
|
||||
const candidateGreens = greens.filter(g => g.side === yNode.side);
|
||||
candidateGreens.sort((a, b) => {
|
||||
const distA = Math.hypot(a.baseX - yNode.baseX, a.baseY - yNode.baseY);
|
||||
const distB = Math.hypot(b.baseX - yNode.baseX, b.baseY - yNode.baseY);
|
||||
return distA - distB;
|
||||
});
|
||||
|
||||
if (candidateGreens.length > 0) {
|
||||
addLink(yNode.id, candidateGreens[0].id, "yellow-green", true, 0.20);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -287,6 +352,27 @@ function initNetwork() {
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// 5. CONEXIÓN VERDES <-> VERDES (mismo sector, líneas rectas)
|
||||
["left", "right"].forEach(side => {
|
||||
const sectorGreens = greens.filter(g => g.side === side);
|
||||
sectorGreens.forEach(gNode => {
|
||||
const neighbors = sectorGreens
|
||||
.filter(other => other.id !== gNode.id)
|
||||
.map(other => ({
|
||||
id: other.id,
|
||||
dist: Math.hypot(other.baseX - gNode.baseX, other.baseY - gNode.baseY)
|
||||
}))
|
||||
.sort((a, b) => a.dist - b.dist);
|
||||
|
||||
// Conecta con los 4 vecinos más cercanos del mismo sector para formar la malla limpia
|
||||
neighbors.slice(0, 5).forEach(neighbor => {
|
||||
if (neighbor.dist <= 130) {
|
||||
addLink(gNode.id, neighbor.id, "green-green", false);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Bucle de actualización (flotación en zona segura)
|
||||
@@ -305,10 +391,29 @@ function update(time) {
|
||||
node.y = node.baseY + Math.cos(t * 0.85) * (maxOffset * 0.75);
|
||||
});
|
||||
|
||||
// Movimiento coordinado de "EL TODO" según el centroide de los nodos principales
|
||||
const purples = nodes.filter(n => n.type === "purple");
|
||||
if (purples.length > 0 && CONFIG.centerBox) {
|
||||
const avgX = purples.reduce((sum, p) => sum + p.x, 0) / purples.length;
|
||||
const avgY = purples.reduce((sum, p) => sum + p.y, 0) / purples.length;
|
||||
|
||||
if (hoveredNode && hoveredNode.id === CONFIG.centerBox.id) {
|
||||
CONFIG.centerBox.x = 615;
|
||||
CONFIG.centerBox.y = 260;
|
||||
} else {
|
||||
const t = (time * 0.0016) + CONFIG.centerBox.speedOffset;
|
||||
CONFIG.centerBox.x = avgX + Math.sin(t) * (maxOffset * 0.45);
|
||||
CONFIG.centerBox.y = avgY + Math.cos(t * 0.85) * (maxOffset * 0.35);
|
||||
}
|
||||
}
|
||||
//aceleracion de la red
|
||||
const isCenterActive = hoveredNode && CONFIG.centerBox && hoveredNode.id === CONFIG.centerBox.id;
|
||||
dashOffset -= isCenterActive ? 0.95 : 0.35;
|
||||
|
||||
dashOffset -= 0.35;
|
||||
}
|
||||
|
||||
// Renderizado de líneas curvadas
|
||||
// Renderizado de líneas curvadas y rectas
|
||||
function drawConnection(source, target, link, isHighlight) {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
@@ -336,13 +441,18 @@ function drawConnection(source, target, link, isHighlight) {
|
||||
if (link.type === "purple-purple") {
|
||||
ctx.setLineDash([4, 4]);
|
||||
ctx.lineDashOffset = dashOffset * 0.5;
|
||||
ctx.strokeStyle = isHighlight ? "#000000" : CONFIG.purpleCoreLineColor;
|
||||
ctx.strokeStyle = isHighlight ? CONFIG.linkActiveColor : CONFIG.purpleCoreLineColor;
|
||||
ctx.lineWidth = isHighlight ? 2.6 : 1.8;
|
||||
} else if (link.type === "yellow-green") {
|
||||
ctx.setLineDash([3, 4]);
|
||||
ctx.lineDashOffset = dashOffset;
|
||||
ctx.strokeStyle = isHighlight ? CONFIG.linkActiveColor : CONFIG.linkGreenColor;
|
||||
ctx.lineWidth = isHighlight ? 2.0 : 0.95;
|
||||
} else if (link.type === "green-green") {
|
||||
ctx.setLineDash([3, 4]);
|
||||
ctx.lineDashOffset = dashOffset * 0.8;
|
||||
ctx.strokeStyle = isHighlight ? CONFIG.linkActiveColor : CONFIG.linkGreenToGreenColor;
|
||||
ctx.lineWidth = isHighlight ? 1.8 : 0.9;
|
||||
} else {
|
||||
ctx.setLineDash([3, 4]);
|
||||
ctx.lineDashOffset = dashOffset;
|
||||
@@ -354,22 +464,86 @@ function drawConnection(source, target, link, isHighlight) {
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// Dibujo del recuadro central "EL TODO"
|
||||
function drawCenterBox() {
|
||||
const box = CONFIG.centerBox;
|
||||
if (!box) return;
|
||||
|
||||
const w = box.width;
|
||||
const h = box.height;
|
||||
const r = box.borderRadius;
|
||||
const x = box.x - w / 2;
|
||||
const y = box.y - h / 2;
|
||||
|
||||
const isBoxHovered = hoveredNode && hoveredNode.id === box.id;
|
||||
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
if (ctx.roundRect) {
|
||||
ctx.roundRect(x, y, w, h, r);
|
||||
} else {
|
||||
// Compatibilidad en navegadores antiguos
|
||||
ctx.moveTo(x + r, y);
|
||||
ctx.lineTo(x + w - r, y);
|
||||
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
|
||||
ctx.lineTo(x + w, y + h - r);
|
||||
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
|
||||
ctx.lineTo(x + r, y + h);
|
||||
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
|
||||
ctx.lineTo(x, y + r);
|
||||
ctx.quadraticCurveTo(x, y, x + r, y);
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
if (isBoxHovered) {
|
||||
ctx.shadowColor = CONFIG.shadowCanva;
|
||||
ctx.shadowBlur = 14;
|
||||
} else {
|
||||
ctx.shadowColor = "rgba(0, 0, 0, 0.25)";
|
||||
ctx.shadowBlur = 6;
|
||||
}
|
||||
|
||||
ctx.fillStyle = CONFIG.centerBoxBg;
|
||||
ctx.fill();
|
||||
|
||||
ctx.strokeStyle = isBoxHovered ? CONFIG.linkActiveColor : CONFIG.centerBoxBorder;
|
||||
ctx.lineWidth = isBoxHovered ? 2.0 : 1.4;
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
|
||||
// Texto "EL TODO"
|
||||
ctx.save();
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fillStyle = CONFIG.centerBoxText;
|
||||
ctx.font = "bold 11.5px system-ui, sans-serif";
|
||||
ctx.fillText(box.label, box.x, box.y);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// Renderizado del Canvas
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
const nodeMap = new Map(nodes.map(n => [n.id, n]));
|
||||
|
||||
// 1. Dibujar líneas
|
||||
const isCenterBoxHovered = hoveredNode && CONFIG.centerBox && hoveredNode.id === CONFIG.centerBox.id;
|
||||
|
||||
links.forEach(link => {
|
||||
const s = nodeMap.get(link.from);
|
||||
const t = nodeMap.get(link.to);
|
||||
if (!s || !t) return;
|
||||
|
||||
const isHighlight = hoveredNode && (hoveredNode.id === s.id || hoveredNode.id === t.id);
|
||||
drawConnection(s, t, link, isHighlight);
|
||||
});
|
||||
// Se ilumina si estás sobre un nodo conectado O si estás sobre "EL TODO"
|
||||
const isHighlight = isCenterBoxHovered || (hoveredNode && (hoveredNode.id === s.id || hoveredNode.id === t.id));
|
||||
|
||||
// 2. Dibujar nodos
|
||||
drawConnection(s, t, link, isHighlight);
|
||||
});;
|
||||
|
||||
// 2. Dibujar recuadro central "EL TODO" (situado en el plano intermedio para enmascarar cruces)
|
||||
drawCenterBox();
|
||||
|
||||
// 3. Dibujar nodos
|
||||
nodes.forEach(node => {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
@@ -377,11 +551,11 @@ function draw() {
|
||||
|
||||
if (node.type === "purple") {
|
||||
ctx.fillStyle = node.color;
|
||||
ctx.strokeStyle = "#210036";
|
||||
ctx.strokeStyle = node.color;
|
||||
ctx.lineWidth = 1.8;
|
||||
} else if (node.type === "yellow") {
|
||||
ctx.fillStyle = node.color;
|
||||
ctx.strokeStyle = "#383500";
|
||||
ctx.strokeStyle = node.color;
|
||||
ctx.lineWidth = 1.3;
|
||||
} else {
|
||||
ctx.fillStyle = CONFIG.greenNodesColor;
|
||||
@@ -390,7 +564,7 @@ function draw() {
|
||||
}
|
||||
|
||||
if (hoveredNode && hoveredNode.id === node.id) {
|
||||
ctx.shadowColor = "rgba(0, 0, 0, 0.35)";
|
||||
ctx.shadowColor = CONFIG.shadowCanva;
|
||||
ctx.shadowBlur = 14;
|
||||
}
|
||||
|
||||
@@ -398,7 +572,7 @@ function draw() {
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
|
||||
// 3. Texto en nodos violetas y amarillos
|
||||
// 4. Texto en nodos violetas y amarillos
|
||||
if (node.label) {
|
||||
ctx.save();
|
||||
ctx.textAlign = "center";
|
||||
@@ -408,7 +582,7 @@ function draw() {
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.font = "bold 12.5px system-ui, sans-serif";
|
||||
} else if (node.type === "yellow") {
|
||||
ctx.fillStyle = "#1e1e1e";
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.font = "600 10.5px system-ui, sans-serif";
|
||||
}
|
||||
|
||||
@@ -453,12 +627,29 @@ canvas.addEventListener("mousemove", (e) => {
|
||||
}
|
||||
}
|
||||
|
||||
// Detección sobre el recuadro central "EL TODO"
|
||||
if (!found && CONFIG.centerBox) {
|
||||
const box = CONFIG.centerBox;
|
||||
const halfW = box.width / 2;
|
||||
const halfH = box.height / 2;
|
||||
if (x >= box.x - halfW && x <= box.x + halfW && y >= box.y - halfH && y <= box.y + halfH) {
|
||||
found = {
|
||||
id: box.id,
|
||||
label: box.label,
|
||||
desc: box.desc,
|
||||
radius: halfH,
|
||||
x: box.x,
|
||||
y: box.y
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
hoveredNode = found;
|
||||
|
||||
if (hoveredNode) {
|
||||
canvas.style.cursor = "pointer";
|
||||
tooltipTitle.textContent = hoveredNode.label;
|
||||
tooltipDesc.textContent = hoveredNode.desc;
|
||||
tooltipDesc.textContent = hoveredNode.desc || "";
|
||||
|
||||
tooltip.style.left = `${cssX}px`;
|
||||
tooltip.style.top = `${cssY - (hoveredNode.radius * (canvas.getBoundingClientRect().height / canvas.height))}px`;
|
||||
@@ -476,19 +667,20 @@ canvas.addEventListener("mouseleave", () => {
|
||||
|
||||
/* ==========================================================================
|
||||
SOPORTE DE TEMA CLARO / OSCURO
|
||||
--------------------------------------------------------------------------
|
||||
- Re-lee las variables CSS y actualiza CONFIG + nodos vivos.
|
||||
- Observa cambios de `data-theme` o `class` en <html> y <body>.
|
||||
========================================================================== */
|
||||
|
||||
function refreshColorsFromCSS() {
|
||||
// 1. Colores globales
|
||||
CONFIG.greenNodesColor = readCSSVariable(CSS_VARS.greenNodesColor, CONFIG.greenNodesColor);
|
||||
CONFIG.greenStrokeColor = readCSSVariable(CSS_VARS.greenStrokeColor, CONFIG.greenStrokeColor);
|
||||
CONFIG.linkLineColor = readCSSVariable(CSS_VARS.linkLineColor, CONFIG.linkLineColor);
|
||||
CONFIG.linkGreenColor = readCSSVariable(CSS_VARS.linkGreenColor, CONFIG.linkGreenColor);
|
||||
CONFIG.linkActiveColor = readCSSVariable(CSS_VARS.linkActiveColor, CONFIG.linkActiveColor);
|
||||
CONFIG.purpleCoreLineColor = readCSSVariable(CSS_VARS.purpleCoreLineColor, CONFIG.purpleCoreLineColor);
|
||||
CONFIG.greenNodesColor = readCSSVariable(CSS_VARS.greenNodesColor, CONFIG.greenNodesColor);
|
||||
CONFIG.greenStrokeColor = readCSSVariable(CSS_VARS.greenStrokeColor, CONFIG.greenStrokeColor);
|
||||
CONFIG.linkLineColor = readCSSVariable(CSS_VARS.linkLineColor, CONFIG.linkLineColor);
|
||||
CONFIG.linkGreenColor = readCSSVariable(CSS_VARS.linkGreenColor, CONFIG.linkGreenColor);
|
||||
CONFIG.linkGreenToGreenColor = readCSSVariable(CSS_VARS.linkGreenToGreenColor, CONFIG.linkGreenToGreenColor);
|
||||
CONFIG.linkActiveColor = readCSSVariable(CSS_VARS.linkActiveColor, CONFIG.linkActiveColor);
|
||||
CONFIG.purpleCoreLineColor = readCSSVariable(CSS_VARS.purpleCoreLineColor, CONFIG.purpleCoreLineColor);
|
||||
CONFIG.centerBoxBg = readCSSVariable(CSS_VARS.centerBoxBg, CONFIG.centerBoxBg);
|
||||
CONFIG.centerBoxBorder = readCSSVariable(CSS_VARS.centerBoxBorder, CONFIG.centerBoxBorder);
|
||||
CONFIG.centerBoxText = readCSSVariable(CSS_VARS.centerBoxText, CONFIG.centerBoxText);
|
||||
|
||||
// 2. Colores de violetas en CONFIG
|
||||
CONFIG.purpleNodes.forEach(p => {
|
||||
@@ -508,7 +700,6 @@ function refreshColorsFromCSS() {
|
||||
} else if (node.type === "yellow") {
|
||||
node.color = readCSSVariable(YELLOW_NODE_VAR, node.color);
|
||||
}
|
||||
// Los verdes leen CONFIG.greenNodesColor directo en draw(), no requieren update propio
|
||||
});
|
||||
}
|
||||
|
||||
@@ -517,7 +708,6 @@ function watchThemeChanges() {
|
||||
refreshColorsFromCSS();
|
||||
});
|
||||
|
||||
// Observa <html> (habitual en data-theme) y <body> (por si acaso)
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["data-theme", "class"]
|
||||
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Diagrama de Red y Modal</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Botón para probar la apertura del modal directamente -->
|
||||
<div style="text-align: center; margin: 24px 0;">
|
||||
<button type="button" class="btn-trigger-projects" id="btnOpenProjectsModal">
|
||||
Conocer IDE Projects
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Contenedor del Diagrama Canvas -->
|
||||
<div class="canvas-wrapper">
|
||||
<canvas id="networkCanvas" width="1280" height="520"></canvas>
|
||||
|
||||
<!-- Tooltip flotante -->
|
||||
<div id="tooltip" class="network-tooltip hidden">
|
||||
<h5 id="tooltip-title"></h5>
|
||||
<p id="tooltip-desc"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: IDE PROJECTS -->
|
||||
<div id="modal-ide-projects" class="ide-modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-projects-title">
|
||||
<div class="ide-modal-container">
|
||||
|
||||
<!-- Botón Cerrar (X) -->
|
||||
<button type="button" class="ide-modal-close" id="btnCloseModal" aria-label="Cerrar modal">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Envoltorio del contenido con scroll interno -->
|
||||
<div class="ide-modal-body-wrapper">
|
||||
<div class="ide-modal-scroll" id="modalScrollArea">
|
||||
|
||||
<!-- Encabezado -->
|
||||
<header class="ide-modal-header">
|
||||
<div class="ide-modal-pill">IDE PROJECTS</div>
|
||||
<h2 id="modal-projects-title" class="ide-modal-title">PMO & Project Services</h2>
|
||||
<p class="ide-modal-tagline">Convertir iniciativas en resultados.</p>
|
||||
</header>
|
||||
|
||||
<!-- Introducción -->
|
||||
<div class="ide-modal-lead">
|
||||
<p>Ayudamos a las organizaciones a fortalecer su capacidad para seleccionar, priorizar, planificar y ejecutar proyectos, programas y portafolios, conectando las iniciativas con los objetivos estratégicos y los recursos disponibles.</p>
|
||||
<p>Integramos metodologías, gobernanza, información y capacidades de gestión para acompañar todo el ciclo de vida de los proyectos y mejorar su contribución a los resultados de la organización.</p>
|
||||
</div>
|
||||
|
||||
<!-- Capacidades -->
|
||||
<section class="ide-modal-section">
|
||||
<h3 class="ide-section-title">Nuestras capacidades</h3>
|
||||
<div class="ide-grid-cards">
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Gestión de proyectos</h4>
|
||||
<p>Planificación, organización, seguimiento y acompañamiento de proyectos para gestionar alcance, plazos, costos, recursos, riesgos, stakeholders y resultados.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>PMO — Oficinas de Gestión de Proyectos</h4>
|
||||
<p>Diseño, implementación y fortalecimiento de PMO adaptadas al nivel de madurez, estrategia y necesidades de cada organización.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Programas y portafolios</h4>
|
||||
<p>Priorización y coordinación de iniciativas para mejorar la asignación de recursos, gestionar interdependencias y mantener alineadas las inversiones con los objetivos organizacionales.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card">
|
||||
<h4>Gobernanza y metodologías</h4>
|
||||
<p>Diseño de modelos de gobernanza, procesos, roles, indicadores y metodologías predictivas, ágiles o híbridas adaptadas al contexto de cada organización.</p>
|
||||
</div>
|
||||
|
||||
<div class="ide-feature-card ide-card-full">
|
||||
<h4>Diagnóstico y recuperación de proyectos</h4>
|
||||
<p>Evaluación de proyectos con dificultades o desvíos para identificar causas, redefinir prioridades y establecer planes de recuperación y seguimiento.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Metodologías -->
|
||||
<section class="ide-modal-section">
|
||||
<h3 class="ide-section-title">Cómo trabajamos</h3>
|
||||
<div class="ide-tags-wrapper">
|
||||
<span class="ide-method-tag">Predictivo</span>
|
||||
<span class="ide-dot">·</span>
|
||||
<span class="ide-method-tag">Ágil</span>
|
||||
<span class="ide-dot">·</span>
|
||||
<span class="ide-method-tag">Híbrido</span>
|
||||
</div>
|
||||
<p class="ide-text-block">No partimos de una metodología predeterminada. Seleccionamos y combinamos prácticas de gestión según el tipo de proyecto, su complejidad, el contexto y las capacidades de la organización.</p>
|
||||
</section>
|
||||
|
||||
<!-- Propuesta de Valor -->
|
||||
<section class="ide-modal-callout">
|
||||
<blockquote class="ide-quote-highlight">
|
||||
“No se trata de gestionar más proyectos. Se trata de gestionar mejor las iniciativas que importan.”
|
||||
</blockquote>
|
||||
<p>Fortalecemos la capacidad de transformar prioridades estratégicas en iniciativas ejecutables, generar información para decidir y mantener el foco en los resultados.</p>
|
||||
</section>
|
||||
|
||||
<!-- Sinergia del Ecosistema -->
|
||||
<section class="ide-modal-synergy">
|
||||
<h4>Cuando el desafío requiere más</h4>
|
||||
<p>
|
||||
IDE Projects puede integrarse con <strong>IDE Excellence</strong>, <strong>IDE Academy</strong> e <strong>IDE Digital</strong> para rediseñar procesos, desarrollar capacidades, implementar sistemas o incorporar tecnología que fortalezca la gestión y ejecución de proyectos.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barra Inferior Fija (Footer) -->
|
||||
<footer class="ide-modal-footer-fixed">
|
||||
<span class="ide-scroll-hint" id="scrollHint">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
|
||||
</svg>
|
||||
Desliza para leer más
|
||||
</span>
|
||||
<a href="#contacto" class="ide-btn-cta">
|
||||
<span>HABLEMOS</span>
|
||||
<span class="ide-btn-arrow">→</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,73 @@
|
||||
/* ==========================================================================
|
||||
CONTROLADOR DEL MODAL
|
||||
========================================================================== */
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
if (!modal) return;
|
||||
modal.classList.add("is-active");
|
||||
document.body.style.overflow = "hidden";
|
||||
|
||||
const scrollArea = modal.querySelector(".ide-modal-scroll");
|
||||
if (scrollArea) scrollArea.scrollTop = 0;
|
||||
}
|
||||
|
||||
function closeModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
if (!modal) return;
|
||||
modal.classList.remove("is-active");
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
|
||||
// Inicialización de eventos del modal una vez cargado el DOM
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// 1. Botón externo HTML
|
||||
const btnTrigger = document.getElementById("btnOpenProjectsModal");
|
||||
if (btnTrigger) {
|
||||
btnTrigger.addEventListener("click", () => {
|
||||
openModal("modal-ide-projects");
|
||||
});
|
||||
}
|
||||
|
||||
// 2. Botón Cerrar (X)
|
||||
const btnClose = document.getElementById("btnCloseModal");
|
||||
if (btnClose) {
|
||||
btnClose.addEventListener("click", () => {
|
||||
closeModal("modal-ide-projects");
|
||||
});
|
||||
}
|
||||
|
||||
// 3. Cerrar al hacer clic en el backdrop oscuro
|
||||
const modal = document.getElementById("modal-ide-projects");
|
||||
if (modal) {
|
||||
modal.addEventListener("click", (e) => {
|
||||
if (e.target === modal) {
|
||||
closeModal("modal-ide-projects");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 4. Cerrar con tecla Escape
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
closeModal("modal-ide-projects");
|
||||
}
|
||||
});
|
||||
|
||||
// 5. Ocultar indicador "Desliza para leer más" al scrollear
|
||||
const scrollArea = document.getElementById("modalScrollArea");
|
||||
const scrollHint = document.getElementById("scrollHint");
|
||||
if (scrollArea && scrollHint) {
|
||||
scrollArea.addEventListener("scroll", () => {
|
||||
const isAtBottom = scrollArea.scrollHeight - scrollArea.scrollTop - scrollArea.clientHeight < 40;
|
||||
if (isAtBottom) {
|
||||
scrollHint.classList.add("is-hidden");
|
||||
} else {
|
||||
scrollHint.classList.remove("is-hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Inicialización del motor Canvas
|
||||
//initNetwork();
|
||||
//requestAnimationFrame(animate);
|
||||
+343
-106
@@ -50,7 +50,7 @@
|
||||
<!-- Contenido -->
|
||||
<div class="container container-narrow text-center" style="position: relative; z-index: 2;">
|
||||
<span class="eyebrow" style="color: var(--text-main)">IDENTIFIQUEMOS SOLUCIONES</span>
|
||||
<h1 style="margin-bottom: 1.25rem; color:var(--text-main);">Soluciones Concretas: Respuestas Específicas</h1>
|
||||
<h1 style="margin-bottom: 1.25rem; color:var(--text-main);">Soluciones Concretas: <br>Respuestas Específicas</h1>
|
||||
<p class="lead-text" style="color:var(--text-main)">
|
||||
Si ya identificaste qué necesitás, explorá nuestras soluciones, su alcance y el valor que pueden aportar a tu organización. </p>
|
||||
</div>
|
||||
@@ -60,120 +60,93 @@
|
||||
<section class="section-padding">
|
||||
<div class="container">
|
||||
|
||||
<!-- Filtros Rápidos -->
|
||||
<!-- Filtros Rápidos
|
||||
<div class="filters-bar" style="justify-content: center; margin-bottom: 3rem;">
|
||||
<button class="filter-btn soluciones-filter-btn active" data-filter="all">Todas las Soluciones</button>
|
||||
<button class="filter-btn soluciones-filter-btn" data-filter="iso">Sistemas de Gestión & ISO</button>
|
||||
<button class="filter-btn soluciones-filter-btn" data-filter="pmo">PMO & Gestión de Proyectos</button>
|
||||
<button class="filter-btn soluciones-filter-btn" data-filter="formacion">Formación & Desarrollo</button>
|
||||
<button class="filter-btn soluciones-filter-btn" data-filter="digital">Transformación Digital & IA</button>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Grilla de Soluciones -->
|
||||
<div class="grid-2" id="soluciones-grid">
|
||||
|
||||
<!-- Solución 1 -->
|
||||
<div class="card solution-card" data-category="iso">
|
||||
<div class="card solution-card">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">NORMA INTERNACIONAL</span>
|
||||
</div>
|
||||
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">SISTEMAS DE GESTIÓN Y CERTIFICACIONES</h3>
|
||||
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||
<strong>Para convertir requisitos en herramientas de gestión.</strong>
|
||||
</p>
|
||||
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||
<p style="margin-top: 0.4rem;">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.</p>
|
||||
<h3>SISTEMAS DE GESTIÓN Y CERTIFICACIONES</h3>
|
||||
<p><strong>Para convertir requisitos en herramientas de gestión.</strong></p>
|
||||
<div class="solution-body">
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||
<div class="solution-ligth">
|
||||
<i class="fa-regular fa-lightbulb"></i> <em>¿Sabías que un SGC requiere capacitar a los líderes? Conocé cómo <strong>IDE Academy</strong> complementa esta implementación.</em>
|
||||
</div>
|
||||
<a href="contacto.html?busqueda=Implementar%20o%20certificar%20una%20norma&origen=Solucion_ISO9001" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||
<a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-1">
|
||||
Explorar soluciones →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Solución 2 -->
|
||||
<div class="card solution-card" data-category="iso">
|
||||
<div class="card solution-card">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">SISTEMAS INTEGRADOS</span>
|
||||
</div>
|
||||
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">PROCESOS Y MEJORA ORGANIZACIONAL</h3>
|
||||
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||
<strong>Para transformar la forma en que la organización funciona.</strong>
|
||||
</p>
|
||||
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||
<p>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.</p>
|
||||
<p style="margin-top: 0.4rem;">
|
||||
<h3>DESARROLLO DE CAPACIDADES</h3>
|
||||
<p><strong>Para transformar conocimiento en capacidad de acción.</strong></p>
|
||||
<div class="solution-body">
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||
<i class="fa-regular fa-lightbulb"></i> <em>Integramos tableros de control digital de incidentes a través de <strong>IDE Digital</strong>.</em>
|
||||
<div class="solution-ligth">
|
||||
<i class="fa-regular fa-lightbulb"></i> <em>Formamos a tus Project Managers internos mediante los programas de <strong>IDE Academy</strong>.</em>
|
||||
</div>
|
||||
<a href="contacto.html?busqueda=Implementar%20o%20certificar%20una%20norma&origen=Solucion_ISO14001_45001" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||
<a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-2">
|
||||
Explorar soluciones →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Solución 3 -->
|
||||
<div class="card solution-card" data-category="iso">
|
||||
<div class="card solution-card">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">EDUCACIÓN</span>
|
||||
</div>
|
||||
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">PROYECTOS Y PMO</h3>
|
||||
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||
<strong>Para convertir iniciativas en resultados.</strong>
|
||||
</p>
|
||||
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||
<p>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.</p>
|
||||
<p style="margin-top: 0.4rem;">
|
||||
<h3>PROCESOS Y MEJORA ORGANIZACIONAL</h3>
|
||||
<p><strong>Para transformar la forma en que la organización funciona.</strong></p>
|
||||
<div class="solution-body">
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||
<i class="fa-regular fa-lightbulb"></i> <em>Complementamos con diseño instruccional y campus virtual vía <strong>IDE Academy</strong>.</em>
|
||||
<div class="solution-ligth">
|
||||
<i class="fa-regular fa-lightbulb"></i> <em>Integramos tableros de control digital de incidentes a través de <strong>IDE Digital</strong>.</em>
|
||||
</div>
|
||||
<a href="contacto.html?busqueda=Implementar%20o%20certificar%20una%20norma&origen=Solucion_ISO21001" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||
<a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-3">
|
||||
Explorar soluciones →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Solución 4 -->
|
||||
<div class="card solution-card" data-category="pmo">
|
||||
<div class="card solution-card">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||
<span class="ecosystem-badge badge-project">IDE Project</span>
|
||||
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">DIRECCIÓN ESTRATÉGICA</span>
|
||||
</div>
|
||||
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">DESARROLLO DE CAPACIDADES</h3>
|
||||
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||
<strong>Para transformar conocimiento en capacidad de acción.</strong>
|
||||
</p>
|
||||
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||
<p>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.</p>
|
||||
<p style="margin-top: 0.4rem;">
|
||||
<h3>PROYECTOS Y PMO</h3>
|
||||
<p><strong>Para convertir iniciativas en resultados.</strong></p>
|
||||
<div class="solution-body">
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||
<i class="fa-regular fa-lightbulb"></i> <em>Formamos a tus Project Managers internos mediante los programas de <strong>IDE Academy</strong>.</em>
|
||||
<div class="solution-ligth">
|
||||
<i class="fa-regular fa-lightbulb"></i> <em>Complementamos con diseño instruccional y campus virtual vía <strong>IDE Academy</strong>.</em>
|
||||
</div>
|
||||
<a href="contacto.html?busqueda=Gestionar%20o%20impulsar%20un%20proyecto&origen=Solucion_PMO" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||
<a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-4">
|
||||
Explorar soluciones →
|
||||
</a>
|
||||
</div>
|
||||
@@ -182,24 +155,18 @@
|
||||
<!-- Solución 5 -->
|
||||
<div class="card solution-card" data-category="formacion">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||
<span class="ecosystem-badge badge-academy">IDE Academy</span>
|
||||
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">DESARROLLO DE TALENTO</span>
|
||||
</div>
|
||||
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">TRANSFORMACIÓN DIGITAL E INTELIGENCIA ARTIFICIAL</h3>
|
||||
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||
<strong>Para poner la tecnología al servicio de la gestión.</strong>
|
||||
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||
</p> 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.</p>
|
||||
<p style="margin-top: 0.4rem;">
|
||||
<h3>TRANSFORMACIÓN DIGITAL E INTELIGENCIA ARTIFICIAL</h3>
|
||||
<p><strong>Para poner la tecnología al servicio de la gestión.</strong></p>
|
||||
<div class="solution-body">
|
||||
<p> 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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||
<div class="solution-ligth">
|
||||
<i class="fa-regular fa-lightbulb"></i> <em>Conocé los programas abiertos y temarios en nuestra página de <strong>IDE Academy</strong>.</em>
|
||||
</div>
|
||||
<a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Solucion_Capacitacion" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||
<a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-5">
|
||||
Explorar soluciones →
|
||||
</a>
|
||||
</div>
|
||||
@@ -208,58 +175,40 @@
|
||||
<!-- Solución 6 -->
|
||||
<div class="card solution-card" data-category="digital">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||
<span class="ecosystem-badge badge-digital">IDE Digital</span>
|
||||
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">AUTOMATIZACIÓN</span>
|
||||
</div>
|
||||
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">EDUCACIÓN & GOBIERNO</h3>
|
||||
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||
<strong>Para transformar conocimiento, procesos y capacidades en mejores servicios y resultados.</strong>
|
||||
</p>
|
||||
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||
<p>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.</p>
|
||||
<p style="margin-top: 0.4rem;">
|
||||
<h3>SOLUCIONES SECTORIALES</h3>
|
||||
<p><strong>Para responder a desafíos que requieren conocimiento del contexto.</strong></p>
|
||||
<div class="solution-body">
|
||||
<p>Integramos gestión, procesos, proyectos, sistemas, capacidades y tecnología para abordar requisitos y desafíos específicos de cada actividad.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||
<i class="fa-regular fa-lightbulb"></i> <em>Alineamos la tecnología con la estructura de procesos definida por <strong>IDE Excellence</strong>.</em>
|
||||
<div class="solution-ligth">
|
||||
<i class="fa-regular fa-lightbulb"></i><em>Alineamos la tecnología con la estructura de procesos definida por <strong>IDE Excellence</strong>.</em>
|
||||
</div>
|
||||
<a href="contacto.html?busqueda=Transformación%20digital%20/%20IA&origen=Solucion_IA" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||
<a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-6">
|
||||
Explorar soluciones →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Solución 7 -->
|
||||
<!-- Solución 7 -->
|
||||
<div class="card solution-card" data-category="digital">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||
<span class="ecosystem-badge badge-digital">IDE Digital</span>
|
||||
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">AUTOMATIZACIÓN</span>
|
||||
<h3>EDUCACIÓN & GOBIERNO</h3>
|
||||
<p><strong>Para transformar conocimiento, procesos y capacidades en mejores servicios y resultados.</strong></p>
|
||||
<div class="solution-body">
|
||||
<p>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.</p>
|
||||
</div>
|
||||
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">SOLUCIONES SECTORIALES</h3>
|
||||
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||
<strong>Para responder a desafíos que requieren conocimiento del contexto.</strong>
|
||||
</p>
|
||||
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||
<p>Integramos gestión, procesos, proyectos, sistemas, capacidades y tecnología para abordar requisitos y desafíos específicos de cada actividad.</p>
|
||||
<p style="margin-top: 0.4rem;">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||
<i class="fa-regular fa-lightbulb"></i> <em>Alineamos la tecnología con la estructura de procesos definida por <strong>IDE Excellence</strong>.</em>
|
||||
<div class="solution-ligth">
|
||||
<i class="fa-regular fa-lightbulb"></i><em>Alineamos la tecnología con la estructura de procesos definida por <strong>IDE Excellence</strong>.</em>
|
||||
</div>
|
||||
<a href="contacto.html?busqueda=Transformación%20digital%20/%20IA&origen=Solucion_IA" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||
<a class="btn btn-primary btn-sm" style="width: 100%;" data-open-modal="modal-solucion-7">
|
||||
Explorar soluciones →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -273,6 +222,294 @@
|
||||
<a href="contacto.html" class="btn btn-outline-cta btn-sm" ">HABLEMOS →</a>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Modal Solución 1 -->
|
||||
<div id="modal-solucion-1" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||
<div class="modal-window-sol">
|
||||
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">SISTEMAS DE GESTIÓN Y CERTIFICACIONES</h3>
|
||||
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 9001 | Gestión de Calidad</h4>
|
||||
<p style="font-size: 0.8rem;">Sistemas de gestión orientados a fortalecer procesos, satisfacción del cliente, desempeño y mejora continua.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 14001 | Gestión Ambiental</h4>
|
||||
<p style="font-size: 0.8rem;">Gestión de aspectos e impactos ambientales integrada a los procesos y decisiones de la organización.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 45001 | Seguridad y Salud en el Trabajo</h4>
|
||||
<p style="font-size: 0.8rem;">Gestión sistemática de riesgos de SST, prevención y mejora del desempeño.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 21001 | Organizaciones Educativas</h4>
|
||||
<p style="font-size: 0.8rem;">Sistema de gestión para organizaciones educativas orientado a fortalecer sus procesos y responder a las necesidades de estudiantes y otras partes interesadas.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">ISO 29993 | Servicios de Aprendizaje</h4>
|
||||
<p style="font-size: 0.8rem;">Requisitos para fortalecer la calidad, diseño, prestación y evaluación de servicios de aprendizaje fuera de la educación formal.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Sistemas Integrados de Gestión</h4>
|
||||
<p style="font-size: 0.8rem;">Integración de diferentes normas y referenciales bajo una arquitectura común para reducir duplicaciones y gestionar el conjunto.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Auditorías y preparación para la certificación</h4>
|
||||
<p style="font-size: 0.8rem;">Diagnóstico de brechas, auditorías internas, tratamiento de hallazgos y acompañamiento para implementar, mantener o ampliar sistemas y certificaciones.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
|
||||
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||
<a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
|
||||
Hablemos de este desafío
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal Solución 3 -->
|
||||
<div id="modal-solucion-3" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||
<div class="modal-window-sol">
|
||||
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">PROCESOS Y MEJORA ORGANIZACIONAL</h3>
|
||||
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión por procesos</h4>
|
||||
<p style="font-size: 0.8rem;">Identificación, diseño y mejora de procesos para comprender cómo fluye el trabajo y cómo cada proceso contribuye a los resultados.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Optimización y mejora continua</h4>
|
||||
<p style="font-size: 0.8rem;">5S, Lean mangement, Análisis de oportunidades, desperdicios, retrabajos y puntos críticos para diseñar mejoras sostenibles.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Indicadores y tableros de gestión</h4>
|
||||
<p style="font-size: 0.8rem;">Diseño de indicadores y sistemas de seguimiento que transforman datos en información útil para decidir.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de riesgos y oportunidades</h4>
|
||||
<p style="font-size: 0.8rem;">Identificación, evaluación y tratamiento de riesgos y oportunidades vinculados con objetivos, procesos y decisiones.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Diseño organizacional y roles</h4>
|
||||
<p style="font-size: 0.8rem;">Clarificación de responsabilidades, autoridades e interfaces para mejorar coordinación y funcionamiento.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de información y conocimiento</h4>
|
||||
<p style="font-size: 0.8rem;">Organización de información, documentación y conocimiento crítico para reducir dependencia de personas y facilitar continuidad y aprendizaje.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
|
||||
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||
<a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
|
||||
Hablemos de este desafío
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal Solución 5 -->
|
||||
<div id="modal-solucion-5" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||
<div class="modal-window-sol">
|
||||
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">TRANSFORMACIÓN DIGITAL E IA</h3>
|
||||
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Diagnóstico de oportunidades digitales</h4>
|
||||
<p style="font-size: 0.8rem;">Identificación y priorización de procesos y necesidades donde la tecnología puede aportar mayor valor.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Digitalización y sistematización de procesos</h4>
|
||||
<p style="font-size: 0.8rem;">Transformación de tareas y flujos de información para mejorar trazabilidad, disponibilidad y eficiencia.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Automatización de procesos</h4>
|
||||
<p style="font-size: 0.8rem;">Identificación y automatización de tareas repetitivas o de bajo valor para liberar capacidad y reducir errores.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Inteligencia Artificial aplicada</h4>
|
||||
<p style="font-size: 0.8rem;">Identificación y desarrollo de casos de uso de IA vinculados con necesidades concretas de gestión y operación.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Datos e información para la gestión</h4>
|
||||
<p style="font-size: 0.8rem;">Estructuración, integración y visualización de información para fortalecer seguimiento y toma de decisiones.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Adopción y desarrollo de capacidades digitales</h4>
|
||||
<p style="font-size: 0.8rem;">Acompañamiento a personas y equipos para incorporar nuevas herramientas y formas de trabajo.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
|
||||
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||
<a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
|
||||
Hablemos de este desafío
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal Solución 4 -->
|
||||
<div id="modal-solucion-4" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||
<div class="modal-window-sol">
|
||||
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">PROYECTOS Y PMO</h3>
|
||||
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de Proyectos</h4>
|
||||
<p style="font-size: 0.8rem;">Diseño y acompañamiento de proyectos desde la definición de objetivos y alcance hasta su ejecución, seguimiento y cierre.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Diseño e implementación de PMO</h4>
|
||||
<p style="font-size: 0.8rem;">Creación o fortalecimiento de oficinas de gestión de proyectos adaptadas al nivel de madurez y necesidades de cada organización.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Diagnóstico de madurez en gestión de proyectos</h4>
|
||||
<p style="font-size: 0.8rem;">Evaluación de prácticas, capacidades y gobernanza para identificar brechas y definir una hoja de ruta de mejora.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de portafolios y priorización</h4>
|
||||
<p style="font-size: 0.8rem;">Criterios y herramientas para seleccionar, priorizar y monitorear iniciativas según estrategia, recursos y valor esperado.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Recuperación de proyectos</h4>
|
||||
<p style="font-size: 0.8rem;">Análisis de proyectos con desvíos para redefinir prioridades, gobernanza, planificación y mecanismos de seguimiento.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Metodologías y herramientas de gestión</h4>
|
||||
<p style="font-size: 0.8rem;">Diseño de marcos de trabajo predictivos, ágiles o híbridos adaptados al contexto de cada organización.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
|
||||
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||
<a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
|
||||
Hablemos de este desafío
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal Solución 2 -->
|
||||
<div id="modal-solucion-2" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||
<div class="modal-window-sol">
|
||||
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">DESARROLLO DE CAPACIDADES</h3>
|
||||
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Formación In-Company</h4>
|
||||
<p style="font-size: 0.8rem;">Programas diseñados a partir de las necesidades, desafíos y realidad de cada organización.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Formación Ejecutiva</h4>
|
||||
<p style="font-size: 0.8rem;">Programas para profesionales, mandos medios y líderes orientados al desarrollo de capacidades de gestión y toma de decisiones.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión de Proyectos</h4>
|
||||
<p style="font-size: 0.8rem;">Formación aplicada en planificación, ejecución, seguimiento, liderazgo y metodologías de proyectos.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión, Calidad y Mejora Continua</h4>
|
||||
<p style="font-size: 0.8rem;">Desarrollo de competencias para gestionar procesos, sistemas, indicadores, riesgos y mejora.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Liderazgo y Powerful Skills</h4>
|
||||
<p style="font-size: 0.8rem;">Comunicación, liderazgo, trabajo colaborativo, negociación, toma de decisiones y otras capacidades profesionales transversales.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Transformación Digital e IA</h4>
|
||||
<p style="font-size: 0.8rem;">Formación para comprender, adoptar y aplicar tecnologías e inteligencia artificial con criterio y orientación a resultados.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
|
||||
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||
<a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
|
||||
Hablemos de este desafío
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal Solución 6 -->
|
||||
<div id="modal-solucion-6" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||
<div class="modal-window-sol">
|
||||
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">SOLUCIONES SECTORIALES</h3>
|
||||
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Agro & Alimentos</h4>
|
||||
<p style="font-size: 0.8rem;">Trazabilidad, inocuidad, buenas prácticas, sistemas de gestión, procesos y sostenibilidad para fortalecer organizaciones de la cadena agroalimentaria.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Minería & Cadena de Valor</h4>
|
||||
<p style="font-size: 0.8rem;">Gestión, procesos, calidad, seguridad, proyectos y desarrollo de proveedores para organizaciones que operan o prestan servicios dentro del ecosistema minero.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Movilidad, Transporte & Logística</h4>
|
||||
<p style="font-size: 0.8rem;">Gestión de procesos, seguridad vial, buenas prácticas, flotas e integración de requisitos para organizaciones vinculadas con movilidad, transporte y logística.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Metalmecánica & Industria</h4>
|
||||
<p style="font-size: 0.8rem;">Procesos, calidad, seguridad, proyectos y mejora continua para fortalecer productividad, confiabilidad y capacidad de respuesta.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Salud</h4>
|
||||
<p style="font-size: 0.8rem;">Gestión por procesos críticos, experiencia del paciente, calidad, seguridad y cumplimiento para fortalecer organizaciones de salud.</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Educación & Gobierno</h4>
|
||||
<p style="font-size: 0.8rem;">Sistemas de gestión, procesos, proyectos, indicadores y desarrollo de capacidades adaptados a organizaciones educativas y del sector público.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
|
||||
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||
<a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
|
||||
Hablemos de este desafío
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal Solución 7 -->
|
||||
<div id="modal-solucion-7" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||
<div class="modal-window-sol">
|
||||
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||
<h3 style="font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; color: var(--ide-primary); border-bottom: 1px solid var(--border-color);">EDUCACIÓN & GOBIERNO</h3>
|
||||
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Sistemas de gestión y calidad</h4>
|
||||
<p style="font-size: 0.8rem;">Implementación, integración y mejora de sistemas de gestión orientados a fortalecer procesos, resultados y servicios.
|
||||
ISO 21001 · ISO 29993 · ISO 9001 · Sistemas Integrados · Auditorías internas · Preparación para certificación</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Gestión del conocimiento</h4>
|
||||
<p style="font-size: 0.8rem;">Identificación, sistematización, transferencia y preservación del conocimiento crítico para reducir dependencias, favorecer el aprendizaje organizacional y fortalecer la continuidad.
|
||||
ISO 30401 · Gestión del conocimiento · Buenas prácticas · Lecciones aprendidas · Repositorios y transferencia de conocimiento
|
||||
</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Procesos e indicadores</h4>
|
||||
<p style="font-size: 0.8rem;">Diseño y mejora de procesos académicos, administrativos y de servicios, acompañados por indicadores que permitan transformar información en decisiones.
|
||||
Gestión por procesos · Indicadores · Tableros de gestión · Riesgos y oportunidades · Mejora continua
|
||||
</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Proyectos y transformación</h4>
|
||||
<p style="font-size: 0.8rem;">Diseño, planificación y gestión de iniciativas de mejora y transformación para convertir objetivos institucionales en resultados.
|
||||
Gestión de proyectos · PMO · Portafolios · Gobernanza · Seguimiento de iniciativas</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Desarrollo de capacidades</h4>
|
||||
<p style="font-size: 0.8rem;">Formación y desarrollo de personas y equipos para fortalecer capacidades de gestión, liderazgo, calidad, proyectos y transformación.
|
||||
Formación ejecutiva · In-Company · Liderazgo · Gestión · Powerful Skills · Programas a medida
|
||||
</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 0.9rem;">
|
||||
<h4 style="font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.3rem;">Transformación digital e IA</h4>
|
||||
<p style="font-size: 0.8rem;">Digitalización, automatización y aplicación de inteligencia artificial para simplificar procesos, mejorar el acceso a la información y fortalecer la gestión.
|
||||
Digitalización · Automatización · IA aplicada · Sistematización de procesos · Datos para la gestión</p>
|
||||
|
||||
<div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
|
||||
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||
<a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
|
||||
Hablemos de este desafío
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user