diff --git a/animacion2.html b/animacion2.html new file mode 100644 index 0000000..35d81cb --- /dev/null +++ b/animacion2.html @@ -0,0 +1,295 @@ + + + + + + Animación Nodos Infinito - Pulsos Aleatorios + + + + +
+
+ + + + +
+
+
+ + + + \ No newline at end of file diff --git a/assets/img/34.png b/assets/img/34.png new file mode 100644 index 0000000..b245808 Binary files /dev/null and b/assets/img/34.png differ diff --git a/assets/img/Infinito ecosistema.png b/assets/img/Infinito ecosistema.png new file mode 100644 index 0000000..00ab046 Binary files /dev/null and b/assets/img/Infinito ecosistema.png differ diff --git a/assets/img/desafios/t1.png b/assets/img/desafios/t1.png new file mode 100644 index 0000000..887a6e3 Binary files /dev/null and b/assets/img/desafios/t1.png differ diff --git a/assets/img/desafios/t2.png b/assets/img/desafios/t2.png new file mode 100644 index 0000000..b1075e2 Binary files /dev/null and b/assets/img/desafios/t2.png differ diff --git a/assets/img/desafios/t3.png b/assets/img/desafios/t3.png new file mode 100644 index 0000000..cf35eb7 Binary files /dev/null and b/assets/img/desafios/t3.png differ diff --git a/assets/img/desafios/t4.png b/assets/img/desafios/t4.png new file mode 100644 index 0000000..306405b Binary files /dev/null and b/assets/img/desafios/t4.png differ diff --git a/assets/img/desafios/t5.png b/assets/img/desafios/t5.png new file mode 100644 index 0000000..393c2ee Binary files /dev/null and b/assets/img/desafios/t5.png differ diff --git a/assets/img/desafios/t6.png b/assets/img/desafios/t6.png new file mode 100644 index 0000000..91dd1b5 Binary files /dev/null and b/assets/img/desafios/t6.png differ diff --git a/assets/img/hero/hero-desafios.png b/assets/img/hero/hero-desafios.png new file mode 100644 index 0000000..6a151e9 Binary files /dev/null and b/assets/img/hero/hero-desafios.png differ diff --git a/assets/img/hero/hero-soluciones.png b/assets/img/hero/hero-soluciones.png new file mode 100644 index 0000000..12025de Binary files /dev/null and b/assets/img/hero/hero-soluciones.png differ diff --git a/assets/img/hero/team.png b/assets/img/hero/team.png new file mode 100644 index 0000000..793ea23 Binary files /dev/null and b/assets/img/hero/team.png differ diff --git a/assets/logos/academy.png b/assets/logos/academy.png new file mode 100644 index 0000000..3a9d3b0 Binary files /dev/null and b/assets/logos/academy.png differ diff --git a/assets/logos/digital.png b/assets/logos/digital.png new file mode 100644 index 0000000..eccc6c0 Binary files /dev/null and b/assets/logos/digital.png differ diff --git a/assets/logos/excellence.png b/assets/logos/excellence.png new file mode 100644 index 0000000..e9b17b7 Binary files /dev/null and b/assets/logos/excellence.png differ diff --git a/assets/logos/projects.png b/assets/logos/projects.png new file mode 100644 index 0000000..d9610ea Binary files /dev/null and b/assets/logos/projects.png differ diff --git a/css/desafio.css b/css/desafio.css new file mode 100644 index 0000000..a3a2579 --- /dev/null +++ b/css/desafio.css @@ -0,0 +1,392 @@ +/* ========================================================= + DESAFÍOS - TARJETAS (NUEVO LAYOUT HORIZONTAL INFERIOR) + ========================================================= */ + +.desafio-card { + position: relative; + background: var(--bg-primary, #ffffff); + border-radius: var(--radius-md, 12px); + overflow: hidden; + box-shadow: 0 2px 8px rgba(0,0,0,0.5); + transition: all 0.3s ease; + cursor: pointer; + display: flex; + flex-direction: column; +} + +.desafio-card:hover, +.desafio-card:focus { + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); +} + +.desafio-card:focus-visible { + outline: 3px solid var(--ide-primary, #0066cc); + outline-offset: 2px; +} + +/* --- IMAGEN (azul en el esquema) --- */ +.desafio-card__image { + position: relative; + width: 100%; + height: 200px; /* Ajustá según necesites */ + overflow: hidden; +} + +.desafio-card__image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.4s ease; +} + +.desafio-card:hover .desafio-card__image img { + transform: scale(1.05); +} + +.desafio-card__overlay { + position: absolute; + inset: 0; + background: linear-gradient(to bottom, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0.2) 100%); +} + +/* --- CONTENIDO (verde en el esquema) --- */ +.desafio-card__content { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem 1.25rem; + background: var(--bg-primary, #ffffff); + min-height: 80px; +} + +/* Icono (rojo en el esquema) */ +.desafio-card__icon { + width: 48px; + height: 48px; + border-radius: 10px; + background: var(--bg-subtle, #f5f5f5); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.35rem; + color: var(--ide-primary, #0066cc); + flex-shrink: 0; + transition: all 0.3s ease; +} + +.desafio-card:hover .desafio-card__icon { + background: var(--ide-primary, #0066cc); + color: #ffffff; + transform: scale(1.05); +} + +/* Título (negro en el esquema) */ +.desafio-card__title { + font-size: 1rem; + font-weight: 600; + line-height: 1.4; + color: var(--text-body, #333); + margin: 0; + flex: 1; /* Ocupa el espacio disponible */ +} + +/* Botón + (amarillo en el esquema) */ +.desafio-card__plus { + width: 40px; + height: 40px; + border-radius: 50%; + background: var(--ide-primary, #0066cc); + color: #ffffff; + border: none; + font-size: 1.4rem; + font-weight: 600; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: all 0.2s ease; + line-height: 1; + padding: 0; +} + +.desafio-card:hover .desafio-card__plus { + background: var(--ide-primary-dark, #0055aa); + transform: scale(1.1); +} + +/* ========================================================= + RESPONSIVE + ========================================================= */ + +@media (max-width: 768px) { + .desafio-card__image { + height: 160px; + } + + .desafio-card__content { + padding: 0.85rem 1rem; + gap: 0.75rem; + } + + .desafio-card__icon { + width: 42px; + height: 42px; + font-size: 1.2rem; + } + + .desafio-card__title { + font-size: 0.9rem; + } + + .desafio-card__plus { + width: 36px; + height: 36px; + font-size: 1.25rem; + } +} + +/* ========================================================= + MODALES COMPACTOS - 2 COLUMNAS + ========================================================= */ + +.modal-compact { + background: var(--bg-primary, #ffffff); + border-radius: var(--radius-lg, 16px); + max-width: 800px; + width: 90%; + max-height: 85vh; + overflow-y: auto; + position: relative; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); + animation: modalCompactSlideIn 0.3s ease; +} + +@keyframes modalCompactSlideIn { + from { + opacity: 0; + transform: translateY(20px) scale(0.97); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +.modal-compact .modal-close-btn { + position: absolute; + top: 1rem; + right: 1rem; + width: 36px; + height: 36px; + border-radius: 50%; + background: var(--bg-subtle, #f5f5f5); + border: none; + font-size: 1.1rem; + color: var(--text-muted, #6c757d); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; + z-index: 10; +} + +.modal-compact .modal-close-btn:hover { + background: var(--text-muted, #6c757d); + color: #ffffff; + transform: rotate(90deg); +} + +/* Body: 2 columnas */ +.modal-compact__body { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 0; +} + +/* Columna 1: Textos */ +.modal-compact__col-text { + padding: 2rem 2rem 2rem 2.5rem; + border-right: 1px solid var(--border-color, #e0e0e0); +} + +.modal-compact__title { + display: flex; + align-items: flex-start; + gap: 0.75rem; + font-size: 1.35rem; + font-weight: 700; + color: var(--text-body, #333); + margin: 0 0 1.25rem; + line-height: 1.3; + padding-right: 2rem; +} + +.modal-compact__title i { + color: var(--ide-primary, #0066cc); + font-size: 1.5rem; + flex-shrink: 0; + margin-top: 0.15rem; +} + +.modal-compact__intro { + font-size: 0.95rem; + line-height: 1.6; + color: var(--text-muted, #6c757d); + margin: 0 0 1.5rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--border-color, #e0e0e0); +} + +/* Secciones */ +.modal-compact__section { + margin-bottom: 1.5rem; +} + +.modal-compact__section:last-child { + margin-bottom: 0; +} + +.modal-compact__section-title { + font-size: 0.95rem; + font-weight: 700; + color: var(--text-body, #333); + margin: 0 0 0.75rem; +} + +/* Lista de preguntas */ +.modal-compact__list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.modal-compact__list li { + padding: 0.75rem 1rem; + background: var(--bg-subtle, #f5f5f5); + border-radius: 6px; + border-left: 3px solid var(--ide-primary, #0066cc); + font-size: 0.88rem; + line-height: 1.5; + color: var(--text-body, #333); + transition: all 0.2s ease; +} + +.modal-compact__list li:hover { + background: var(--bg-primary, #ffffff); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); + transform: translateX(3px); +} + +/* Badges */ +.modal-compact__badges { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +/* Columna 2: Visual */ +.modal-compact__col-visual { + padding: 2rem; + display: flex; + flex-direction: column; + gap: 1.5rem; + background: var(--bg-subtle, #f8f9fa); + border-radius: 0 var(--radius-lg, 16px) var(--radius-lg, 16px) 0; +} + +.modal-compact__image { + width: 100%; + border-radius: var(--radius-md, 12px); + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); +} + +.modal-compact__image img { + width: 100%; + height: auto; + display: block; +} + +/* Iconos */ +.modal-compact__icons { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.modal-compact__icon-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem; + background: var(--bg-primary, #ffffff); + border-radius: 8px; + transition: all 0.2s ease; +} + +.modal-compact__icon-item:hover { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + transform: translateX(3px); +} + +.modal-compact__icon-item i { + width: 40px; + height: 40px; + border-radius: 8px; + background: linear-gradient(135deg, var(--ide-primary, #0066cc) 0%, var(--ide-accent, #00aa88) 100%); + color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.1rem; + flex-shrink: 0; +} + +.modal-compact__icon-item span { + font-size: 0.85rem; + font-weight: 600; + color: var(--text-body, #333); + line-height: 1.3; +} + +/* CTA */ +.modal-compact__cta { + width: 100%; + justify-content: center; + padding: 0.85rem 1.5rem; + font-size: 0.95rem; + margin-top: auto; +} + +/* ========================================================= + RESPONSIVE + ========================================================= */ + +@media (max-width: 900px) { + .modal-compact__body { + grid-template-columns: 1fr; + } + + .modal-compact__col-text { + padding: 2rem 1.5rem; + border-right: none; + border-bottom: 1px solid var(--border-color, #e0e0e0); + } + + .modal-compact__col-visual { + border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px); + } + + .modal-compact__title { + font-size: 1.2rem; + padding-right: 0; + } +} diff --git a/css/index.css b/css/index.css index ef2191c..4851934 100644 --- a/css/index.css +++ b/css/index.css @@ -21,34 +21,7 @@ --eco-tab-duration: 250ms; } -.herobg-1{ - background-image: - linear-gradient( - to right, - rgba(0, 0, 0, 0.6) 0%, - rgba(0, 0, 0, 0.3) 20%, - rgba(0, 0, 0, 0.15) 70%, - rgba(0, 0, 0, 0.0) 100% - ), - url('../assets/img/hero/hero_003.png'); - background-size: cover; - background-position: center; - background-repeat: no-repeat; -} -.herobg-2{ - background-image: - linear-gradient( - to right, - rgba(44,109,140, 1) 0%, - rgba(44,109,140, 0.5) 40%, - rgba(44,109,140, 0.2) 70%, - rgba(44,109,140, 0.05) 100% - ), - url('../assets/img/hero/hero_017.png'); - background-size: cover; - background-position: center; - background-repeat: no-repeat; -} + /* ---------- TABS / BOTONES ---------- */ diff --git a/css/soluciones.css b/css/soluciones.css new file mode 100644 index 0000000..fe059d9 --- /dev/null +++ b/css/soluciones.css @@ -0,0 +1,1011 @@ +/* ========================================================= + SOLUCIONES - TARJETAS CON EFECTO DE OLAS + ========================================================= */ + +/* --- TARJETA BASE --- */ +.solucion-card { + background: #ffffff; + border-radius: 16px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + transition: box-shadow 0.3s ease; + display: flex; + flex-direction: column; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.solucion-card:hover { + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); +} + +/* --- HEADER CON COLOR Y OLAS --- */ +.solucion-card__header { + position: relative; + height: 140px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + transform: translateZ(0); +} + +/* Efecto de ola SVG */ +.solucion-card__wave { + position: absolute; + bottom: -2px; + left: -5%; + width: 110%; + height: 65px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120V85c47.79,15.2,103.59,22,158,19.2,70.36-3.7,136.33-22.8,206.8-25.7C438.64,75.6,512.34,90,583,102.5c69.27,12.3,138.3,17,209.4,9,36.15-4.1,69.85-12.2,104.45-20.1C989.49,73,1113,46.5,1200,91.8V120Z' opacity='.25' fill='%23ffffff'/%3E%3Cpath d='M0,120V60.5c13,14.4,27.64,26.9,47.69,35.3,51.72,26.2,117.31,26,176.89,13.2,31.15-6.9,60.09-17.8,89.67-27.2,40.92-13,84.73-31.5,130.83-34,36.26-1.95,70.9,6.4,98.6,21.5,31.77,17.4,62.32,42.4,103.63,50,40.44,7.4,81.35-4.6,119.13-16.6s75.16-26.7,116.92-29.5c59.73-4,113.28,15.65,168.9,26.6,30.2,5.9,59,4.2,87.09-5.1,22.43-7.45,48-18.4,60.65-33.7V120Z' opacity='.5' fill='%23ffffff'/%3E%3Cpath d='M0,120V54.8C149.93,91.3,314.09,99.6,475.83,80c43-5.2,84.23-13.8,127.61-18.1,59-5.9,112.48,8.4,165.56,24.2C827.93,103.2,886,115.6,951.2,112c86.53-4.8,172.46-31.3,248.8-58V120Z' fill='%23ffffff'/%3E%3C/svg%3E"); + background-size: cover; + background-position: bottom; + z-index: 1; + will-change: auto; + transform: translateZ(0); +} + +/* Icono */ +.solucion-card__icon { + font-size: 3rem; + color: #ffffff; + z-index: 2; + position: relative; + margin-top: -1rem; + transition: transform 0.3s ease; + -webkit-font-smoothing: antialiased; +} + +.solucion-card:hover .solucion-card__icon { + transform: scale(1.15); +} + +/* --- BODY --- */ +.solucion-card__body { + padding: 1.5rem; + display: flex; + flex-direction: column; + flex: 1; + position: relative; +} + +/* Título */ +.solucion-card__title { + font-size: 1.1rem; + font-weight: 700; + color: #1a1a2e; + margin: 0 0 0.5rem; + line-height: 1.3; + min-height: 2.6em; +} + +/* Subtítulo */ +.solucion-card__subtitle { + font-size: 0.85rem; + font-weight: 600; + color: var(--ide-primary, #0066cc); + margin: 0 0 0.75rem; + line-height: 1.4; +} + +/* Texto descriptivo */ +.solucion-card__text { + font-size: 0.85rem; + color: #6c757d; + line-height: 1.5; + margin: 0 0 1.5rem; + flex: 1; +} + +/* Botón circular */ +.solucion-card__btn { + width: 44px; + height: 44px; + border-radius: 50%; + border: 2px solid #e0e0e0; + background: #ffffff; + display: flex; + align-items: center; + justify-content: center; + color: #1a1a2e; + text-decoration: none; + transition: all 0.3s ease; + align-self: flex-start; +} + +.solucion-card__btn i { + font-size: 1rem; + transition: transform 0.3s ease; +} + +.solucion-card__btn:hover { + border-color: var(--ide-primary, #0066cc); + color: var(--ide-primary, #0066cc); + transform: scale(1.1); +} + +.solucion-card__btn:hover i { + transform: translateX(3px); +} + +/* ========================================================= + COLORES ESPECÍFICOS POR SOLUCIÓN - 8 COLORES ÚNICOS + ========================================================= */ + +/* 1. Gestión - Verde/Teal */ +.solucion-card--gestion .solucion-card__header { + background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%); +} + +/* 2. Capacidades - Naranja */ +.solucion-card--capacidades .solucion-card__header { + background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); +} + +/* 3. Procesos - Violeta/Púrpura */ +.solucion-card--procesos .solucion-card__header { + background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); +} + +/* 4. Proyectos - Rojo/Rosa */ +.solucion-card--proyectos .solucion-card__header { + background: linear-gradient(135deg, #e74c3c 0%, #c0392b 50%, #e91e63 100%); +} + +/* 5. Digital - Azul oscuro */ +.solucion-card--digital .solucion-card__header { + background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%); +} + +/* 6. Estrategia - Azul claro */ +.solucion-card--estrategia .solucion-card__header { + background: linear-gradient(135deg, #5dade2 0%, #3498db 100%); +} + +/* 7. Sectorial - Verde lima/Oliva */ +.solucion-card--sectorial .solucion-card__header { + background: linear-gradient(135deg, #a3ce0a 0%, #016309 100%); +} + +/* 8. A medida - Índigo */ +.solucion-card--medida .solucion-card__header { + background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); +} + +/* ========================================================= + RESPONSIVE + ========================================================= */ + +@media (max-width: 900px) { + .solucion-card__header { + height: 100px; + } + + .solucion-card__icon { + font-size: 2rem; + } + + .solucion-card__body { + padding: 1.25rem; + } + + .solucion-card__title { + font-size: 1rem; + } +} + +@media (max-width: 600px) { + .solucion-card__header { + height: 90px; + } + + .solucion-card__icon { + font-size: 1.75rem; + } + + .solucion-card__body { + padding: 1rem; + } + + .solucion-card__title { + font-size: 0.95rem; + min-height: auto; + } + + .solucion-card__subtitle { + font-size: 0.8rem; + } + + .solucion-card__text { + font-size: 0.8rem; + } +} + +/* ========================================================= + MODAL INFOGRAFÍA - BASE (COMPACTO) + ========================================================= */ + +.modal-backdrop { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + padding: 1.5rem; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; +} + +.modal-backdrop.is-active { + opacity: 1; + visibility: visible; +} + +.modal-infografia { + background: #ffffff; + border-radius: 20px; + max-width: 1200px; + width: 100%; + max-height: 90vh; + overflow: hidden; + position: relative; + box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25); + transform: translateY(20px) scale(0.97); + transition: transform 0.3s ease; +} + +.modal-backdrop.is-active .modal-infografia { + transform: translateY(0) scale(1); +} + +/* Botón cerrar */ +.modal-close-btn { + position: absolute; + top: 1rem; + right: 1rem; + width: 36px; + height: 36px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + border: 2px solid rgba(255, 255, 255, 0.3); + font-size: 1rem; + color: #ffffff; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; + z-index: 10; +} + +.modal-close-btn:hover { + background: #ffffff; + color: #1a1a2e; + transform: rotate(90deg); +} + +/* --- HEADER BASE --- */ +.modal-infografia__header { + position: relative; + padding: 2rem 2rem 3rem; + text-align: center; + overflow: hidden; + color: #ffffff; +} + +.modal-infografia__wave { + position: absolute; + bottom: -2px; + left: -5%; + width: 110%; + height: 50px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120V73.71c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,59.43,512.34,80.67,583,99.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,52,1113,13.29,1200,79.47V120Z' opacity='.25' fill='%23ffffff'/%3E%3Cpath d='M0,120V32.81C13,53.92,27.64,73.86,47.69,89.05,99.41,128.27,165,128,224.58,108.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V120Z' opacity='.5' fill='%23ffffff'/%3E%3Cpath d='M0,120V22.63C149.93,76,314.09,88.32,475.83,59.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,94.22,886,112.24,951.2,107c86.53-7,172.46-45.71,248.8-84.81V120Z' fill='%23ffffff'/%3E%3C/svg%3E"); + background-size: cover; + background-position: bottom; + z-index: 1; +} + +.modal-infografia__header-icon { + font-size: 2.5rem; + margin-bottom: 0.5rem; + position: relative; + z-index: 2; + display: block; +} + +.modal-infografia__header-title { + font-size: 1.6rem; + font-weight: 700; + margin: 0 0 0.35rem; + position: relative; + z-index: 2; + line-height: 1.2; +} + +.modal-infografia__header-subtitle { + font-size: 0.95rem; + font-weight: 500; + margin: 0; + opacity: 0.95; + position: relative; + z-index: 2; +} + +/* --- BODY --- */ +.modal-infografia__body { + padding: 1.5rem 2rem; +} + +.modal-infografia__intro { + font-size: 0.9rem; + line-height: 1.5; + color: #4a5568; + margin: 0 0 1.5rem; + padding-bottom: 1rem; + border-bottom: 2px solid #e2e8f0; + text-align: center; + max-width: 800px; + margin-left: auto; + margin-right: auto; +} + +.modal-infografia__section-title { + display: flex; + align-items: center; + gap: 0.6rem; + font-size: 1.1rem; + font-weight: 700; + color: #1a1a2e; + margin: 0 0 1rem; +} + +.modal-infografia__section-title i { + font-size: 1.2rem; +} + +/* --- GRID DE NORMAS ISO (3 columnas) --- */ +.normas-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.85rem; + margin-bottom: 1.5rem; +} + +.norma-card { + display: flex; + gap: 0.75rem; + padding: 0.85rem; + background: #f8fafc; + border-radius: 10px; + border-left: 3px solid #1abc9c; + transition: all 0.3s ease; +} + +.norma-card:hover { + background: #ffffff; + box-shadow: 0 4px 12px rgba(26, 188, 156, 0.15); + transform: translateX(3px); +} + +.norma-card__icon { + width: 40px; + height: 40px; + border-radius: 8px; + color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.1rem; + flex-shrink: 0; +} + +.norma-card__content { + flex: 1; + min-width: 0; +} + +.norma-card__title { + font-size: 0.95rem; + font-weight: 700; + color: #1a1a2e; + margin: 0 0 0.15rem; +} + +.norma-card__subtitle { + font-size: 0.75rem; + font-weight: 600; + margin: 0 0 0.35rem; +} + +.norma-card__text { + font-size: 0.75rem; + color: #64748b; + line-height: 1.4; + margin: 0; +} + +/* --- SECCIONES DESTACADAS (2 columnas) --- */ +.destacados-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.85rem; + margin-bottom: 0; +} + +.destacado-card { + display: flex; + gap: 0.85rem; + padding: 1rem; + border-radius: 10px; + transition: all 0.3s ease; +} + +.destacado-card--integrados { + background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); + border: 2px solid #1abc9c; +} + +.destacado-card--auditorias { + background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); + border: 2px solid #f59e0b; +} + +.destacado-card:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); +} + +.destacado-card__icon { + width: 44px; + height: 44px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + flex-shrink: 0; +} + +.destacado-card--integrados .destacado-card__icon { + background: #1abc9c; + color: #ffffff; +} + +.destacado-card--auditorias .destacado-card__icon { + background: #f59e0b; + color: #ffffff; +} + +.destacado-card__content { + flex: 1; +} + +.destacado-card__title { + font-size: 0.95rem; + font-weight: 700; + color: #1a1a2e; + margin: 0 0 0.35rem; + line-height: 1.3; +} + +.destacado-card__text { + font-size: 0.78rem; + color: #475569; + line-height: 1.4; + margin: 0; +} + +/* --- FOOTER --- */ +.modal-infografia__footer { + padding: 1rem 2rem 1.25rem; + background: #f8fafc; + border-top: 1px solid #e2e8f0; + display: flex; + justify-content: center; +} + +.modal-infografia__cta { + display: inline-flex; + align-items: center; + gap: 0.6rem; + color: #ffffff; + padding: 0.7rem 1.75rem; + border-radius: 50px; + text-decoration: none; + font-weight: 600; + font-size: 0.9rem; + transition: all 0.3s ease; + border: none; +} + +.modal-infografia__cta:hover { + transform: translateY(-2px); +} + +.modal-infografia__cta i { + transition: transform 0.3s ease; +} + +.modal-infografia__cta:hover i { + transform: translateX(3px); +} + +/* ========================================================= + MODALES - COLORES POR SOLUCIÓN (narrativa visual) + ========================================================= */ + +/* 1. Gestión - Verde/Teal */ +.modal-infografia--gestion .modal-infografia__header { + background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%); +} +.modal-infografia--gestion .modal-infografia__section-title i { + color: #1abc9c; +} +.modal-infografia--gestion .norma-card { + border-left-color: #1abc9c; +} +.modal-infografia--gestion .norma-card:hover { + box-shadow: 0 4px 12px rgba(26, 188, 156, 0.15); +} +.modal-infografia--gestion .norma-card__icon { + background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%); +} +.modal-infografia--gestion .norma-card__subtitle { + color: #1abc9c; +} +.modal-infografia--gestion .modal-infografia__cta { + background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%); +} +.modal-infografia--gestion .modal-infografia__cta:hover { + box-shadow: 0 6px 16px rgba(26, 188, 156, 0.4); +} + +/* 2. Capacidades - Naranja */ +.modal-infografia--capacidades .modal-infografia__header { + background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); +} +.modal-infografia--capacidades .modal-infografia__section-title i { + color: #e67e22; +} +.modal-infografia--capacidades .norma-card { + border-left-color: #e67e22; +} +.modal-infografia--capacidades .norma-card:hover { + box-shadow: 0 4px 12px rgba(230, 126, 34, 0.15); +} +.modal-infografia--capacidades .norma-card__icon { + background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); +} +.modal-infografia--capacidades .norma-card__subtitle { + color: #e67e22; +} +.modal-infografia--capacidades .modal-infografia__cta { + background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); +} +.modal-infografia--capacidades .modal-infografia__cta:hover { + box-shadow: 0 6px 16px rgba(230, 126, 34, 0.4); +} + +/* 3. Procesos - Violeta */ +.modal-infografia--procesos .modal-infografia__header { + background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); +} +.modal-infografia--procesos .modal-infografia__section-title i { + color: #9b59b6; +} +.modal-infografia--procesos .norma-card { + border-left-color: #9b59b6; +} +.modal-infografia--procesos .norma-card:hover { + box-shadow: 0 4px 12px rgba(155, 89, 182, 0.15); +} +.modal-infografia--procesos .norma-card__icon { + background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); +} +.modal-infografia--procesos .norma-card__subtitle { + color: #9b59b6; +} +.modal-infografia--procesos .modal-infografia__cta { + background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); +} +.modal-infografia--procesos .modal-infografia__cta:hover { + box-shadow: 0 6px 16px rgba(155, 89, 182, 0.4); +} + +/* 4. Proyectos - Rojo/Rosa */ +.modal-infografia--proyectos .modal-infografia__header { + background: linear-gradient(135deg, #e74c3c 0%, #c0392b 50%, #e91e63 100%); +} +.modal-infografia--proyectos .modal-infografia__section-title i { + color: #e74c3c; +} +.modal-infografia--proyectos .norma-card { + border-left-color: #e74c3c; +} +.modal-infografia--proyectos .norma-card:hover { + box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15); +} +.modal-infografia--proyectos .norma-card__icon { + background: linear-gradient(135deg, #e74c3c 0%, #e91e63 100%); +} +.modal-infografia--proyectos .norma-card__subtitle { + color: #e74c3c; +} +.modal-infografia--proyectos .modal-infografia__cta { + background: linear-gradient(135deg, #e74c3c 0%, #e91e63 100%); +} +.modal-infografia--proyectos .modal-infografia__cta:hover { + box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4); +} + +/* 5. Digital - Azul oscuro */ +.modal-infografia--digital .modal-infografia__header { + background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%); +} +.modal-infografia--digital .modal-infografia__section-title i { + color: #34495e; +} +.modal-infografia--digital .norma-card { + border-left-color: #34495e; +} +.modal-infografia--digital .norma-card:hover { + box-shadow: 0 4px 12px rgba(52, 73, 94, 0.15); +} +.modal-infografia--digital .norma-card__icon { + background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%); +} +.modal-infografia--digital .norma-card__subtitle { + color: #34495e; +} +.modal-infografia--digital .modal-infografia__cta { + background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%); +} +.modal-infografia--digital .modal-infografia__cta:hover { + box-shadow: 0 6px 16px rgba(52, 73, 94, 0.4); +} + +/* 6. Estrategia - Azul claro */ +.modal-infografia--estrategia .modal-infografia__header { + background: linear-gradient(135deg, #5dade2 0%, #3498db 100%); +} +.modal-infografia--estrategia .modal-infografia__section-title i { + color: #3498db; +} +.modal-infografia--estrategia .norma-card { + border-left-color: #3498db; +} +.modal-infografia--estrategia .norma-card:hover { + box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15); +} +.modal-infografia--estrategia .norma-card__icon { + background: linear-gradient(135deg, #5dade2 0%, #3498db 100%); +} +.modal-infografia--estrategia .norma-card__subtitle { + color: #3498db; +} +.modal-infografia--estrategia .modal-infografia__cta { + background: linear-gradient(135deg, #5dade2 0%, #3498db 100%); +} +.modal-infografia--estrategia .modal-infografia__cta:hover { + box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4); +} + +/* 7. Sectorial - Verde lima/Oliva */ +.modal-infografia--sectorial .modal-infografia__header { + background: linear-gradient(135deg, #a3ce0a 0%, #016309 100%); +} +.modal-infografia--sectorial .modal-infografia__section-title i { + color: #016309; +} +.modal-infografia--sectorial .norma-card { + border-left-color: #7cb342; +} +.modal-infografia--sectorial .norma-card:hover { + box-shadow: 0 4px 12px rgba(124, 179, 66, 0.15); +} +.modal-infografia--sectorial .norma-card__icon { + background: linear-gradient(135deg, #a3ce0a 0%, #016309 100%); +} +.modal-infografia--sectorial .norma-card__subtitle { + color: #016309; +} +.modal-infografia--sectorial .modal-infografia__cta { + background: linear-gradient(135deg, #a3ce0a 0%, #016309 100%); +} +.modal-infografia--sectorial .modal-infografia__cta:hover { + box-shadow: 0 6px 16px rgba(124, 179, 66, 0.4); +} + + +/* ========================================================= + SECCIÓN: SOLUCIONES RELACIONADAS + ========================================================= */ + +.soluciones-relacionadas { + background: #ffffff; +} + +/* --- Header --- */ +.soluciones-relacionadas__header { + margin-bottom: 2.5rem; +} + +.soluciones-relacionadas__eyebrow { + display: inline-block; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 0.75rem; +} + +.soluciones-relacionadas__title { + font-size: 2rem; + font-weight: 800; + color: #1a1a2e; + margin: 0; + line-height: 1.2; + max-width: 700px; +} + +/* --- Grid Principal --- */ +.soluciones-relacionadas__grid { + display: grid; + grid-template-columns: repeat(4, 1fr) 1.3fr; + gap: 1.25rem; + align-items: stretch; +} + +/* --- Tarjeta Base --- */ +.relacionada-card { + border-radius: 16px; + padding: 1.75rem 1.5rem; + display: flex; + flex-direction: column; + gap: 1.25rem; + min-height: 220px; + transition: transform 0.3s ease, box-shadow 0.3s ease; + position: relative; +} + +.relacionada-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); +} + +/* --- Marca (ide. + subtítulo) --- */ +.relacionada-card__brand { + display: flex; + flex-direction: column; + align-items: flex-start; + line-height: 1; +} + +.relacionada-card__brand-ide { + font-size: 2rem; + font-weight: 800; + letter-spacing: -0.02em; + color: #4a5568; /* Default, sobreescrito por variante */ +} + +.relacionada-card__brand-sub { + font-size: 0.65rem; + font-weight: 700; + letter-spacing: 0.15em; + margin-top: 0.15rem; + color: #64748b; +} + +/* --- Texto --- */ +.relacionada-card__text { + font-size: 0.9rem; + font-weight: 600; + line-height: 1.35; + color: #1a1a2e; + margin: 0; + flex: 1; +} + +/* --- Botón circular --- */ +.relacionada-card__btn { + width: 40px; + height: 40px; + border-radius: 50%; + border: 1.5px solid currentColor; + background: transparent; + display: flex; + align-items: center; + justify-content: center; + color: #1a1a2e; + text-decoration: none; + transition: all 0.3s ease; + align-self: flex-start; +} + +.relacionada-card__btn i { + font-size: 0.9rem; + transition: transform 0.3s ease; +} + +.relacionada-card__btn:hover i { + transform: translateX(3px); +} + +/* ========================================================= + VARIANTES DE COLOR POR MARCA + ========================================================= */ + +/* 1. IDE Excellence - Verde Menta */ +.relacionada-card--excellence { + background: #e8f5ee; +} + +.relacionada-card--excellence .relacionada-card__btn { + color: var(--ide-excellence); +} +.relacionada-card--excellence .relacionada-card__btn:hover { + background: var(--ide-excellence); + color: #ffffff; +} + +/* 2. IDE Projects - Melocotón */ +.relacionada-card--projects { + background: #fdf0e3; +} + +.relacionada-card--projects .relacionada-card__btn { + color: var(--ide-projects); +} +.relacionada-card--projects .relacionada-card__btn:hover { + background: var(--ide-projects); + color: #ffffff; +} + +/* 3. IDE Digital - Lavanda */ +.relacionada-card--digital { + background: #ebe9fb; +} +.relacionada-card--digital .relacionada-card__btn { + color: var(--ide-digital); +} +.relacionada-card--digital .relacionada-card__btn:hover { + background: var(--ide-digital); + color: #ffffff; +} + +/* 4. IDE Academy - Rosa */ +.relacionada-card--academy { + background: #fde8ec; +} +.relacionada-card--academy .relacionada-card__btn { + color: var(--ide-academy); +} +.relacionada-card--academy .relacionada-card__btn:hover { + background: var(--ide-academy); + color: #ffffff; +} + +/* ========================================================= + TEXTO LATERAL + ========================================================= */ + +.soluciones-relacionadas__aside { + display: flex; + align-items: center; + padding-left: 1.5rem; + border-left: 2px solid #e2e8f0; +} + +.soluciones-relacionadas__aside-text { + font-size: 0.95rem; + line-height: 1.6; + color: #4a5568; + margin: 0; +} + +/* ========================================================= + RESPONSIVE + ========================================================= */ + +@media (max-width: 1200px) { + .soluciones-relacionadas__grid { + grid-template-columns: repeat(4, 1fr); + } + + .soluciones-relacionadas__aside { + grid-column: 1 / -1; + padding-left: 0; + padding-top: 1.5rem; + border-left: none; + border-top: 2px solid #e2e8f0; + margin-top: 0.5rem; + } +} + +@media (max-width: 900px) { + .soluciones-relacionadas__grid { + grid-template-columns: repeat(2, 1fr); + } + + .soluciones-relacionadas__title { + font-size: 1.65rem; + } +} + +@media (max-width: 600px) { + .soluciones-relacionadas__grid { + grid-template-columns: 1fr; + } + + .soluciones-relacionadas__title { + font-size: 1.4rem; + } + + .relacionada-card { + min-height: 180px; + padding: 1.5rem 1.25rem; + } + + .relacionada-card__brand-ide { + font-size: 1.75rem; + } +} +/* ========================================================= + RESPONSIVE MODALES + ========================================================= */ + +@media (max-width: 1024px) { + .normas-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .modal-backdrop { + padding: 1rem; + } + + .modal-infografia { + max-height: 95vh; + overflow-y: auto; + } + + .modal-infografia__header { + padding: 1.5rem 1.25rem 2.5rem; + } + + .modal-infografia__header-title { + font-size: 1.3rem; + } + + .modal-infografia__header-icon { + font-size: 2rem; + } + + .modal-infografia__body { + padding: 1.25rem; + } + + .normas-grid, + .destacados-grid { + grid-template-columns: 1fr; + } + + .norma-card, + .destacado-card { + padding: 0.85rem; + } + + .modal-infografia__footer { + padding: 1rem 1.25rem 1.25rem; + } +} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index f363346..4a7aa63 100644 --- a/css/styles.css +++ b/css/styles.css @@ -266,6 +266,10 @@ p, li, .lead-text, .text-body, .text-muted { position: relative; overflow: hidden; } +.section-padding-md { + padding-top: clamp(2.5rem, 4vw, 4.5rem); + padding-bottom: clamp(2.5rem, 5vw, 4.5rem); +} .section-padding-sm { padding-top: clamp(1rem, 2vw, 3.5rem); @@ -284,6 +288,63 @@ p, li, .lead-text, .text-body, .text-muted { .bg3{ background: radial-gradient(circle at 50% 50%, var(--ide-accent-soft) 0%, transparent 100%), var(--bg-body); } +.herobg-1{ + background-image: + linear-gradient( + to right, + rgba(0, 0, 0, 0.6) 0%, + rgba(0, 0, 0, 0.3) 20%, + rgba(0, 0, 0, 0.15) 70%, + rgba(0, 0, 0, 0.0) 100% + ), + url('../assets/img/hero/hero_003.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +.herobg-2{ + background-image: + linear-gradient( + to right, + rgba(44,109,140, 1) 0%, + rgba(44,109,140, 0.5) 40%, + rgba(44,109,140, 0.2) 70%, + rgba(44,109,140, 0.05) 100% + ), + url('../assets/img/hero/hero_017.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +.herobg-3{ + background-image: + linear-gradient( + to right, + rgba(56,128,89, 1) 0%, + rgba(56,128,89, 0.5) 40%, + rgba(56,128,89, 0.2) 70%, + rgba(56,128,89, 0.05) 100% + ), + url('../assets/img/hero/hero-desafios.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +.herobg-4{ + background-image: + linear-gradient( + to right, + rgba(0, 0, 0, 0.6) 0%, + rgba(0, 0, 0, 0.3) 20%, + rgba(0, 0, 0, 0.15) 70%, + rgba(0, 0, 0, 0.0) 100% + ), + url('../assets/img/hero/hero-soluciones.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + /* --- 5. Componentes: Header & Navbar --- */ @@ -1031,6 +1092,11 @@ p, li, .lead-text, .text-body, .text-muted { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } +.grid-6 { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 0.7rem; +} /* --- 8. Hero: La Doble Entrada (Home) --- */ @@ -2490,7 +2556,26 @@ canvas { filter: grayscale(100%); opacity: 0.1; } - +.parallax-bg-layer2 { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + /* Imagen de fondo */ + background-image: url('../assets/img/34.png'); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + + /* CLAVE: Deja la imagen fija en el viewport mientras el sitio scrollea */ + background-attachment: fixed; + + /* Estética sobria IDE */ + filter: grayscale(100%); + opacity: 0.1; +} /* Cortina suave en bordes superior e inferior para fundir con el header/footer */ .parallax-overlay { position: absolute; diff --git a/desafios.html b/desafios.html index 829a2d9..f9dc186 100644 --- a/desafios.html +++ b/desafios.html @@ -10,6 +10,7 @@ + @@ -18,76 +19,130 @@
-
+
-

+

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

-

+

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

+ + HABLEMOS + + + + + +
-
- Estrategia, Procesos, Tecnología, Personas y Resultados -
+
-
+
+
-
+
-
-

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

-
- +
+
+ Gestión organizacional +
+
+
+
+ +
+

Crecimos y necesitamos ordenar la gestión.

+
-
-

Necesitamos mejorar la eficiencia y los resultados.

-
- +
+
+ Gestión de proyectos +
+
+
+
+ +
+

Tenemos muchas iniciativas, pero cuesta convertirlas en resultados.

+
-
-

Queremos desarrollar a nuestras personas y fortalecer equipos.

-
- +
+
+ Gestión del cambio +
+
+
+
+ +
+

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

+
-
-

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

-
- +
+
+ Tecnología e inteligencia artificial +
+
+
+
+ +
+

Queremos aprovechar la tecnología y la IA con sentido.

+
-
-

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

-
- +
+
+ Cumplimiento normativo +
+
+
+
+ +
+

Necesitamos cumplir nuevos requisitos sin sumar burocracia.

+
- -
-

No sé exactamente qué necesito.

- - INICIAR BRÚJULA IDE → - + +
+
+ Brújula IDE +
+
+
+
+ +
+

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

+ +
@@ -95,152 +150,407 @@
- -
-
-
-

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

- - HABLEMOS - - + +
+
+
+
+ UNA MIRADA AMPLIA +

+ Distintas señales pueden tener un mismo origen. +

+

+ Comprender las conexiones nos permite identificar dónde intervenir y generar un mayor impacto. +

+
+
+ Ilustración de desafíos organizacionales +
- + + +
+
+
+
+ +

+ ¿Tu situación es diferente? +

+

+ No necesitás saber qué servicio buscar; partimos del desafío real para diseñar la intervención adecuada. +

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