diff --git a/assets/vectores/capacitacion.svg b/assets/vectores/capacitacion.svg new file mode 100644 index 0000000..0d82404 --- /dev/null +++ b/assets/vectores/capacitacion.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + diff --git a/assets/vectores/ia.svg b/assets/vectores/ia.svg new file mode 100644 index 0000000..c078501 --- /dev/null +++ b/assets/vectores/ia.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/assets/vectores/iso.svg b/assets/vectores/iso.svg new file mode 100644 index 0000000..d35b738 --- /dev/null +++ b/assets/vectores/iso.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/vectores/trofeo.svg b/assets/vectores/trofeo.svg new file mode 100644 index 0000000..5ee7220 --- /dev/null +++ b/assets/vectores/trofeo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/css/styles.css b/css/styles.css index 70903c7..2cfdf25 100644 --- a/css/styles.css +++ b/css/styles.css @@ -62,7 +62,7 @@ --bg-surface-elevated: #202D37; --bg-subtle: #24333E; --bg-card: #18222A; - --ripple-color:#18222A; + --ripple-color:#253441; --bg-card-alt: var(--bg-muted); --card-overlay: rgba(4, 36, 29, 0.85); --bg-muted: #24333E; @@ -941,17 +941,17 @@ p, li, .lead-text, .text-body, .text-muted { } .quiz-back-btn:hover { - color: var(--text-body, #212529); - background: var(--bg-hover, #f1f3f5); + color: var(--text-body); + background: var(--bg-body); } /* ---- Estilos para títulos con iconos SVG en las tarjetas del quiz ---- */ .quiz-option-card .opt-title { font-family: 'Barlow Condensed', sans-serif; - font-weight: 700; + font-weight: 600; display: flex; align-items: center; gap: 8px; - font-size: 0.95rem; + font-size: 1.1rem; margin-bottom: 0.2rem; color: var(--text-primary, #094b63); } @@ -1002,7 +1002,7 @@ p, li, .lead-text, .text-body, .text-muted { padding: 0.2rem 0.85rem; border-radius: 20px; font-weight: 600; - letter-spacing: 0.3px; + letter-spacing: 0.2px; text-transform: uppercase; } @@ -1087,6 +1087,8 @@ p, li, .lead-text, .text-body, .text-muted { } .ecosystem-card { + position: relative; + overflow: hidden; background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); @@ -1102,6 +1104,56 @@ p, li, .lead-text, .text-body, .text-muted { box-shadow: var(--shadow-lg); transform: translateY(-4px); } +/* El contenido se eleva para ser cliqueable y legible */ +.ecosystem-card .card-content { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + height: 100%; + justify-content: space-between; +} +/* Capa del vector: usa el SVG como máscara y se colorea con background-color */ +.ecosystem-bg-vector { + position: absolute; + top: 25%; + left: 0; + width: 120%; + height: 120%; + z-index: 0; + pointer-events: none; /* Traspasa clics y selecciones al texto */ + /* Ajusta la sutileza del trazo */ + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: right top; + mask-position: right top; + -webkit-mask-size: 80% auto; /* Tamaño del vector dentro de la tarjeta */ + mask-size: 80% auto; +} +.card-excellence .ecosystem-bg-vector { + opacity: 0.2; + 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; + background-color: var(--ide-projects); + -webkit-mask-image: url('../assets/vectores/trofeo.svg'); + mask-image: url('../assets/vectores/trofeo.svg'); +} +.card-academy .ecosystem-bg-vector { + opacity: 0.3; + background-color: var(--ide-academy); + -webkit-mask-image: url('../assets/vectores/capacitacion.svg'); + mask-image: url('../assets/vectores/capacitacion.svg'); +} +.card-digital .ecosystem-bg-vector { + opacity: 0.3; + background-color: var(--ide-digital); + -webkit-mask-image: url('../assets/vectores/ia.svg'); + mask-image: url('../assets/vectores/ia.svg'); +} .ecosystem-badge { display: inline-block; @@ -1475,7 +1527,6 @@ p, li, .lead-text, .text-body, .text-muted { .footer-social-link:hover { color: var(--ide-accent, #3fff4f); transform: translateY(-3px); - box-shadow: 0 4px 12px rgba(63, 255, 79, 0.15); } /* Responsive */ diff --git a/includes/footer.html b/includes/footer.html index e1c4b69..7896a88 100644 --- a/includes/footer.html +++ b/includes/footer.html @@ -6,7 +6,7 @@
+ style="display: block; width: 100%; height: auto; opacity: 0.06;">
@@ -106,7 +106,7 @@ © 2026 IDE Consultores | Todos los derechos reservados.
- + Sitio diseñado por Amor & Roma
diff --git a/index.html b/index.html index dc4616d..caa4506 100644 --- a/index.html +++ b/index.html @@ -547,20 +547,17 @@ Empezamos por comprender tu situación, no por ofrecerte una solución predeterminada.

-
+
-
-
- - Explorar por desafío → - - Hablemos directamente - -
+
+ + Explorar por desafío → + Hablemos directamente +
- + @@ -582,51 +579,64 @@
-
-
- IDE Excellence -

Para fortalecer la gestión

-

- Sistemas de gestión, normas ISO (9001, 14001, 45001, 21001), procesos, calidad y mejora continua con sentido de negocio. -

+
+
+
+
+ IDE Excellence +

Para fortalecer la gestión

+

+ Sistemas de gestión, normas ISO (9001, 14001, 45001, 21001), procesos, calidad y mejora continua con sentido de negocio. +

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

Para convertir proyectos en resultados

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

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

Para desarrollar capacidades

Formación ejecutiva e In-Company para que los equipos adopten los cambios y sostengan la transformación en el tiempo.

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

Para integrar tecnología con propósito

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

- Explorar Digital → + Explorar Digital → +
diff --git a/js/ripple.js b/js/ripple.js index 1b71407..31ddda8 100644 --- a/js/ripple.js +++ b/js/ripple.js @@ -21,8 +21,8 @@ // ========================================================================= const CONFIG = { spacing: 36, // Separación entre anillos - speed: 0.32, // Velocidad de expansión hacia afuera - lineWidth: 1.2, // Grosor de las líneas + speed: 0.5, // Velocidad de expansión hacia afuera + lineWidth: 2, // Grosor de las líneas maxAlpha: 0.42, // Opacidad máxima centerOffsetX: 0.5, // Centro horizontal (50%) centerOffsetY: 0.2, // Centro vertical (alineado con el h2) @@ -34,7 +34,7 @@ segmentsPerRing: 25, // Calidad/resolución del contorno (70 a 100) cssVar: '--ripple-color', // Variable de tu CSS - fallbackColor: 'rgba(239, 68, 68, 0.4)' + fallbackColor: 'rgba(24, 123, 141, 0.4)' }; let width = 0;