ecosistema finish

css/styles.css

@@ -23,6 +23,7 @@
   --ide-digital: #2c69ab;
   --teal-dark:   #1B5E6E;
   --cta-hover:#40ab8e;
+  --bg-subtle: #ecf9fd;
 
   /* Tema Claro (Por defecto) */
   --bg-body: #F8FAFB;
@@ -46,6 +47,9 @@
   --shadow-sm: 0 1px 3px rgba(10, 72, 94, 0.05);
   --shadow-md: 0 4px 16px rgba(10, 72, 94, 0.08);
   --shadow-lg: 0 10px 30px rgba(10, 72, 94, 0.12);
+  --shadow-canva: rgba(10, 72, 94, 0.05);
+
+  --ide-primary-line: rgba(9,75,99, 0.4);
 
   --radius-sm: 6px;
   --radius-md: 12px;
@@ -63,6 +67,7 @@
   --bg-surface: #18222A;
   --bg-surface-elevated: #202D37;
   --bg-subtle: #24333E;
+  --ide-primary-dark: #1D4672;
   --bg-card: #18222A;
   --ripple-color:#253441;
   --bg-card-alt: var(--bg-muted);
@@ -79,6 +84,7 @@
   --ide-digital: #2c69ab;
   --teal-dark:   #40ab8e;
   --cta-hover:#0d5a91;
+  --bg-subtle: #03151c;;
 
 
   --text-primary:#4fb389;
@@ -87,9 +93,12 @@
   --text-muted: #8E9FAA;
   --text-inverse: #0E2833;
 
+  --ide-primary-line: rgba(79,179,137, 0.4);
+
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 10px 35px rgba(0, 0, 0, 0.55);
+  --shadow-canva: rgba(92, 103, 107, 0.432);
 }
 
 /* --- 2. Reseteo y Base --- */
@@ -189,7 +198,9 @@ p, li, .lead-text, .text-body, .text-muted {
   font-family: 'Plus Jakarta Sans', sans-serif;
 }
 
-
+.bg-subtle-section{
+  background-color: var(--bg-subtle);
+}
 .lead-text {
   font-size: 1.15rem;
   color: var(--text-muted);
@@ -580,6 +591,20 @@ p, li, .lead-text, .text-body, .text-muted {
   color: var(--ide-accent);
   background-color: var(--ide-accent-soft);
 }
+.btn-primary-cta {
+  background-color: var(--ide-primary-dark);
+  color: #FFFFFF;
+  border-color: var(--ide-primary);
+}
+
+.btn-primary-cta:hover {
+  background-color: var(--ide-primary-dark);
+  border-color: var(--ide-primary-dark);
+  color: #FFFFFF;
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
 .btn-outline-cta {
   background-color: transparent;
   color: var(--text-inverse);
@@ -1437,7 +1462,101 @@ p, li, .lead-text, .text-body, .text-muted {
   border-color: var(--ide-primary);
   color: #FFFFFF;
 }
+/*  --- Tarjetas de Ecosistema  ---  */
 
+.card-excellence:hover {
+  border-color: var(--ide-excellence);
+  box-shadow: 0 0 30px rgba(79,179,137, 0.5);
+  transform: translateY(-2px);
+}
+.card-projects:hover {
+  border-color: var(--ide-projects);
+  box-shadow: 0 0 30px rgba(237,141,1, 0.5);
+  transform: translateY(-2px);
+}
+.card-academy:hover {
+  border-color: var(--ide-academy);
+  box-shadow: 0 0 30px rgba(168,60,65, 0.5);
+  transform: translateY(-2px);
+}
+.card-digital:hover {
+  border-color: var(--ide-digital);
+  box-shadow: 0 0 30px rgba(44,105,171, 0.5);
+  transform: translateY(-2px);
+}
+/* --- Formato NetSchema --- */
+.netschema-section {
+  width: 100%;
+  padding: 40px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--bg-subtle);
+}
+
+/* Envoltura con aspecto horizontal responsivo */
+.netschema-wrapper {
+  position: relative;
+  width: 100%;
+  max-width: 1240px;
+  overflow: hidden;
+}
+.netschema-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+/* El canvas se escala proporcionalmente según el ancho del contenedor */
+canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1240 / 520;
+  cursor: default;
+}
+
+/* ==========================================================================
+   LEYENDA / TOOLTIP FLOTANTE
+   ========================================================================== */
+.network-tooltip {
+  position: absolute;
+  pointer-events: none;
+  background: rgba(22, 24, 38, 0.94);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: #ffffff;
+  padding: 10px 15px;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
+  transform: translate(-50%, -125%);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  z-index: 20;
+  max-width: 240px;
+  text-align: center;
+}
+
+.network-tooltip.hidden {
+  opacity: 0;
+  visibility: hidden;
+  transform: translate(-50%, -115%);
+}
+
+.tooltip-title {
+  font-weight: 700;
+  font-size: 14px;
+  margin-bottom: 3px;
+  color: #ffffff;
+  letter-spacing: 0.3px;
+}
+
+.tooltip-desc {
+  font-size: 12px;
+  color: #cfd4dc;
+  line-height: 1.35;
+}
 /* --- 17. Footer --- */
 #site-footer {
   position: relative;