From 03e9ee401b634f94c6cb2924a995bdf3c27c3334 Mon Sep 17 00:00:00 2001
From: Francisco Anfuso <francisco.anfuso@vettaio.com>
Date: Sun, 18 Oct 2026 01:08:29 -0300
Subject: [PATCH] rf index

---
 css/index.css        |  8 +++++
 css/styles.css       | 77 ++++++++++++++++++++++++++++++++++++++++++--
 includes/footer.html |  2 +-
 includes/header.html | 31 ++++++++++++------
 index.html           |  2 +-
 js/main.js           | 28 ++++++++--------
 6 files changed, 120 insertions(+), 28 deletions(-)

diff --git a/css/index.css b/css/index.css
index c1dc8e0..586f9c2 100644
--- a/css/index.css
+++ b/css/index.css
@@ -21,6 +21,14 @@
   --eco-tab-duration: 250ms;
 }
 
+/* ---------- HERO ---------- */
+.hero-title {
+  margin-bottom: 1rem;
+  line-height: 1;
+  color: #ffffff;
+  font-size: clamp(2.5rem, 8vw, 6.5rem);
+}
+
 
 
 
diff --git a/css/styles.css b/css/styles.css
index 325652c..a88513e 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -47,7 +47,6 @@
   --bg-body: #F8FAFB;
   --bg-surface: #FFFFFF;
   --bg-surface-elevated: #FFFFFF;
-  --bg-subtle: #EDF3F5;
   --bg-card: #FFFFFF;
   --bg-card-alt: #f8faff;
   --ripple-color:#dbdfe2;
@@ -204,7 +203,7 @@ h1 {
   font-size: 1.2rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: #4caf7a;
+  color: var(--ide-accent);
   margin-bottom: 0.75rem;
 }
 .eyebrow-a {
@@ -669,6 +668,11 @@ p, li, .lead-text, .text-body, .text-muted {
 [data-theme="dark"] .theme-icon-sun { display: block; }
 [data-theme="dark"] .theme-icon-moon { display: none; }
 
+/* Logos según tema (evita que se muestren ambos antes de ejecutar JS) */
+.logo-dark-only { display: none; }
+[data-theme="dark"] .logo-light-only { display: none; }
+[data-theme="dark"] .logo-dark-only { display: block; }
+
 /* --- Botón Hamburguesa Móvil --- */
 .mobile-toggle-btn {
   display: none;
@@ -774,6 +778,38 @@ p, li, .lead-text, .text-body, .text-muted {
   font-weight: 600;
   text-transform: uppercase;
 }
+
+/* Submenús dentro del menú móvil */
+.mobile-submenu {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  margin: 0.7rem 0 0 0.25rem;
+  padding-left: 0.9rem;
+  border-left: 2px solid var(--border-color);
+}
+
+.mobile-submenu .nav-link {
+  font-size: 0.98rem;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+/* --- Colapso de la navegación de escritorio --- */
+@media (max-width: 1080px) {
+  .nav-links {
+    display: none;
+  }
+
+  .nav-actions .btn-cta-unificado {
+    display: none;
+  }
+
+  .mobile-toggle-btn {
+    display: flex;
+  }
+}
 /*====================================*/
 /*     Estilos para efecto en Hero    */
 /*====================================*/
@@ -1342,6 +1378,25 @@ p, li, .lead-text, .text-body, .text-muted {
   gap: 0.7rem;
 }
 
+/* Colapso progresivo del grid de 5 columnas */
+@media (max-width: 1100px) {
+  .grid-5 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .grid-5 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 520px) {
+  .grid-5 {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* --- 8. Hero: La Doble Entrada (Home) --- */
 
 .hero-grid {
@@ -1899,7 +1954,7 @@ p, li, .lead-text, .text-body, .text-muted {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   background-color: rgba(10, 24, 32, 0.75);
   backdrop-filter: blur(6px);
@@ -4289,6 +4344,22 @@ canvas {
   }
 }
 
+/* ==========================================================================
+   ESCALA EN PANTALLAS GRANDES
+   Compensa monitores 1440p/4K a 100% (donde los rem base se ven pequeños)
+   ========================================================================== */
+@media (min-width: 1600px) {
+  html {
+    font-size: 17px;
+  }
+}
+
+@media (min-width: 1920px) {
+  html {
+    font-size: 18px;
+  }
+}
+
 
 
 
diff --git a/includes/footer.html b/includes/footer.html
index 5bd207a..e0873a9 100644
--- a/includes/footer.html
+++ b/includes/footer.html
@@ -9,7 +9,7 @@
       
       <!-- 1. Marca y Slogan -->
       <div class="footer-brand">
-        <img src="assets/img/logo_verde.png" alt="IDE Consultores" class="footer-logo">
+        <img src="assets/img/logo_verde.webp" alt="IDE Consultores" class="footer-logo">
         <p class="footer-slogan">
           Convertimos la gestión en <br>una ventaja competitiva.
         </p>
diff --git a/includes/header.html b/includes/header.html
index 541586d..2b498f5 100644
--- a/includes/header.html
+++ b/includes/header.html
@@ -8,8 +8,8 @@
     
     <!-- Logotipo Institucional -->
     <a href="index.html" class="brand-logo-wrap" aria-label="IDE Consultores - Inicio">
-        <img src="assets/img/logo-on-light.png" alt="IDE Consultores" class="brand-logo-img logo-light-only">
-        <img src="assets/img/logo-on-dark.png" alt="IDE Consultores" class="brand-logo-img logo-dark-only">
+        <img src="assets/img/logo-on-light.webp" alt="IDE Consultores" class="brand-logo-img logo-light-only">
+        <img src="assets/img/logo-on-dark.webp" alt="IDE Consultores" class="brand-logo-img logo-dark-only">
     </a>
 
     <!-- Enlaces de Navegación de Escritorio -->
@@ -98,11 +98,11 @@
 <div id="mobile-menu-overlay" class="mobile-menu-overlay"></div>
 
 <!-- Drawer lateral -->
-<div id="mobile-menu-drawer" class="mobile-menu-drawer" aria-hidden="true">
+<div id="mobile-menu-drawer" class="mobile-menu-drawer" inert>
   
   <div class="drawer-header">
-    <img src="assets/img/logo-on-light.png" alt="IDE Consultores" class="brand-logo-img logo-light-only" style="height:32px;">
-    <img src="assets/img/logo-on-dark.png" alt="IDE Consultores" class="brand-logo-img logo-dark-only" style="height:32px;">
+    <img src="assets/img/logo-on-light.webp" alt="IDE Consultores" class="brand-logo-img logo-light-only" style="height:32px;">
+    <img src="assets/img/logo-on-dark.webp" alt="IDE Consultores" class="brand-logo-img logo-dark-only" style="height:32px;">
     <button id="drawer-close-btn" class="drawer-close-btn" aria-label="Cerrar menú">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
         <line x1="18" y1="6" x2="6" y2="18"></line>
@@ -113,13 +113,24 @@
 
   <ul class="mobile-nav-links">
     <li><a href="index.html" class="nav-link">Inicio</a></li>
-    <li><a href="desafios.html" class="nav-link">Desafíos</a></li>
+    <li><a href="desafios.html" class="nav-link">Punto de Partida</a></li>
     <li><a href="soluciones.html" class="nav-link">Soluciones</a></li>
-    <li><a href="ecosistema.html" class="nav-link">Ecosistema</a></li>
-    <li><a href="ide-academy.html" class="nav-link">IDE Academy</a></li>
+    <li>
+      <a href="ecosistema.html" class="nav-link">Ecosistema</a>
+      <ul class="mobile-submenu">
+        <li><a href="ecosistema.html#eco-excellence" class="nav-link">Excellence</a></li>
+        <li><a href="ecosistema.html#eco-projects" class="nav-link">Projects</a></li>
+        <li><a href="ecosistema.html#eco-digital" class="nav-link">Digital</a></li>
+        <li><a href="ide-academy.html" class="nav-link">Academy</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="somos-ide.html" class="nav-link">Somos IDE</a>
+      <ul class="mobile-submenu">
+        <li><a href="trabaja-con-nosotros.html" class="nav-link">Trabaja con nosotros</a></li>
+      </ul>
+    </li>
     <li><a href="insights.html" class="nav-link">Insights</a></li>
-    <li><a href="somos-ide.html" class="nav-link">Somos IDE</a></li>
-    <li><a href="trabaja-con-nosotros.html" class="nav-link">Trabaja con nosotros</a></li>
     <li><a href="buscar.html" class="nav-link">Buscar en el sitio</a></li>
     <li><a href="contacto.html" class="nav-link" style="color: var(--ide-accent);">Contacto Comercial</a></li>
   </ul>
diff --git a/index.html b/index.html
index 469e362..365e4e2 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
           <div>
             <span class="eyebrow" style="text-transform: uppercase;">¿Qué pasa cuando dejamos de mirar los problemas por
               separado?</span>
-            <h1 style="margin-bottom: 1rem; font-size: 6.5rem; line-height: 1; color: white;">
+            <h1 class="hero-title">
               Conectamos <br> el todo
             </h1>
             <p class="lead-text" style="margin-bottom: 2.5rem;color:white">
diff --git a/js/main.js b/js/main.js
index dbc1185..37cf60b 100644
--- a/js/main.js
+++ b/js/main.js
@@ -32,6 +32,13 @@ async function loadIncludes() {
       const headerRes = await fetch('./includes/header.html', { cache: 'no-store' });
       if (headerRes.ok) {
         headerElem.innerHTML = await headerRes.text();
+        // Mover drawer y overlay fuera del header: #site-header usa
+        // backdrop-filter, que crea un "containing block" para position:fixed
+        // y rompía el dimensionado del drawer.
+        ['mobile-menu-overlay', 'mobile-menu-drawer'].forEach(id => {
+          const el = document.getElementById(id);
+          if (el) document.body.appendChild(el);
+        });
         highlightActiveNavLink();
         attachHeaderEvents();
       } else {
@@ -108,7 +115,7 @@ function attachHeaderEvents() {
   function openDrawer() {
     if (!drawer) return;
     drawer.classList.add('is-open');
-    drawer.setAttribute('aria-hidden', 'false');
+    drawer.inert = false;
     if (overlay) overlay.classList.add('is-open');
     document.body.style.overflow = 'hidden'; // evita scroll del fondo
     const btn = document.getElementById('mobile-menu-btn');
@@ -118,10 +125,12 @@ function attachHeaderEvents() {
   function closeDrawer() {
     if (!drawer) return;
     drawer.classList.remove('is-open');
-    drawer.setAttribute('aria-hidden', 'true');
     if (overlay) overlay.classList.remove('is-open');
     document.body.style.overflow = '';
     const btn = document.getElementById('mobile-menu-btn');
+    // Devolver el foco al botón antes de ocultar (evita el bloqueo de aria en foco)
+    if (btn && drawer.contains(document.activeElement)) btn.focus();
+    drawer.inert = true;
     if (btn) btn.setAttribute('aria-expanded', 'false');
   }
 
@@ -182,18 +191,11 @@ function updateThemeIcon(theme) {
 }
 
 function toggleLogoTheme(theme) {
-  const logoLight = document.querySelector('.logo-light-only');
-  const logoDark = document.querySelector('.logo-dark-only');
+  const logosLight = document.querySelectorAll('.logo-light-only');
+  const logosDark = document.querySelectorAll('.logo-dark-only');
 
-  if (logoLight && logoDark) {
-    if (theme === 'dark') {
-      logoLight.style.display = 'none';
-      logoDark.style.display = 'block';
-    } else {
-      logoLight.style.display = 'block';
-      logoDark.style.display = 'none';
-    }
-  }
+  logosLight.forEach(el => { el.style.display = theme === 'dark' ? 'none' : 'block'; });
+  logosDark.forEach(el => { el.style.display = theme === 'dark' ? 'block' : 'none'; });
 }
 
 /* ==========================================================================