index finish

css/styles.css

@@ -11,6 +11,7 @@
   --ide-primary: #094b63;
   --ide-primary-dark: #223344;
   --ide-primary-light: #2c69ab;
+  --ide-primary-light2: #2c69ab;
   --ide-accent: #40ab8e;
   --ide-accent-hover: #4fb389;
   --ide-accent-soft: rgba(19, 167, 138, 0.12);
@@ -69,6 +70,7 @@
   --border-subtle: #1F2C36;
   --border-hover:#40ab8e;
   --ide-primary-light: #40ab8e;
+  --ide-primary-light2: #2c69ab;
   --ide-excellence: #4fb389;
   --ide-projects: #ed8d01;
   --ide-academy: #a83c41; 
@@ -182,6 +184,7 @@ p, li, .lead-text, .text-body, .text-muted {
   font-family: 'Plus Jakarta Sans', sans-serif;
 }
 
+
 .lead-text {
   font-size: 1.15rem;
   color: var(--text-muted);
@@ -1352,6 +1355,8 @@ p, li, .lead-text, .text-body, .text-muted {
 
 /* --- 17. Footer --- */
 #site-footer {
+  position: relative;
+  overflow: hidden;
   background-color: var(--bg-surface);
   border-top: 1px solid var(--border-color);
   padding-top: 4.5rem;
@@ -1360,7 +1365,27 @@ p, li, .lead-text, .text-body, .text-muted {
   transition: background-color var(--transition-normal);
 }
 
+/* Logo de fondo - NO debe interferir con los links */
+.footer-bg {
+  position: absolute;
+  transform: translate(0%, -17%);
+  height: auto;
+  pointer-events: none; /* ¡CLAVE! Evita que la imagen capture eventos */
+
+}
+
+/* El SVG dentro del contenedor */
+.footer-bg img {
+  display: block;
+  width: 100%;
+  height: auto;
+  pointer-events: none; /* Hereda o se asegura */
+}
+
+/* Contenido del footer - POR ENCIMA del fondo */
 .footer-grid {
+  position: relative;
+  z-index: 1;
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
   gap: 2.5rem;
@@ -1368,5 +1393,114 @@ p, li, .lead-text, .text-body, .text-muted {
 }
 
 .footer-logo-wrap {
-  margin-bottom: 1.
+  margin-bottom: 1rem;
+}
+
+.footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-links li {
+  margin-bottom: 0.35rem;
+}
+
+.footer-link {
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  position: relative;
+  z-index: 2; /* Asegura que estén por encima */
+}
+
+.footer-link:hover { 
+  color: var(--ide-accent); 
+}
+
+/* Links del ecosistema en la columna 1 */
+.footer-link2 {
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  position: relative;
+  z-index: 2;
+}
+
+.footer-link2:nth-child(1):hover { color: var(--ide-excellence); } /* Excellence */
+.footer-link2:nth-child(2):hover { color: var(--ide-projects); } /* Project */
+.footer-link2:nth-child(3):hover { color: var(--ide-academy); } /* Academy */
+.footer-link2:nth-child(4):hover { color: var(--ide-digital); } /* Digital */
+
+/* Footer bottom - también por encima */
+.footer-bottom {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  border-top: 1px solid var(--border-color);
+  padding-top: 1.5rem;
+}
+
+.footer-bottom a {
+  position: relative;
+  z-index: 2;
+}
+
+.footer-socials {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.footer-social-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: var(--text-muted);
+  background: var(--bg-subtle, rgba(255,255,255,0.05));
+  transition: all 0.3s ease;
+  text-decoration: none;
+  font-size: 1rem;
+}
+
+.footer-social-link:hover {
+  color: var(--ide-accent, #3fff4f);
+  transform: translateY(-3px);
+  box-shadow: 0 4px 12px rgba(63, 255, 79, 0.15);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .footer-bg {
+    width: 40%;
+    max-width: 300px;
+    opacity: 0.04;
+  }
+  
+  .footer-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .footer-bg {
+    width: 30%;
+    max-width: 200px;
+    opacity: 0.03;
+  }
+  
+  .footer-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
 }