index finish

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 */