rf index

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);
+}
+
 
 
 

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;
+  }
+}
+