mejoras

index.html

@@ -8,7 +8,7 @@
   <!-- SEO Meta Tags  -->
   <!-- Favicon -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-  <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
+  <link rel="icon" type="image/x-icon" href="assets/img/favicon.webp">
   <meta name="description"
     content="Comprender el todo para saber dónde intervenir. Ecosistema de gestión, proyectos, formación y transformación digital.">
   <meta property="og:title" content="IDE Consultores | Todo está conectado">
@@ -31,14 +31,14 @@
   <main>
 
     <!-- BLOQUE 1: HERO - LA DOBLE VÍA DE ENTRADA -->
-    <section class="section-padding herobg-1">
+    <section class="section-padding-md herobg-1">
       <div class="container container-wide">
         <div class="hero-grid">
           <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: 5.5rem; line-height: 1.1; color: white;">
-              Conectamos el todo
+            <h1 style="margin-bottom: 1rem; font-size: 6.5rem; line-height: 1; color: white;">
+              Conectamos <br> el todo
             </h1>
             <p class="lead-text" style="margin-bottom: 2.5rem;color:white">
               En IDE entendemos cómo funciona el sistema para identificar dónde intervenir, integrar las capacidades
@@ -83,10 +83,10 @@
     </section>
 
     <!-- BLOQUE 2: EL ECOSISTEMA (CARRUSEL DE 4 CAPACIDADES) -->
-    <section class="section-padding-sm bg2 ecosystem-section" id="ecosistema" style="background-color: var(--bg-subtle);">
+    <section class="section-padding-xs bg2 ecosystem-section" id="ecosistema" style="background-color: var(--bg-subtle);">
       <div class="container">
         <!-- HEADER: eyebrow + título -->
-        <div class="ecosystem-header" style="text-align: center; margin-bottom: 1.5rem;">
+        <div class="ecosystem-header" style="text-align: center; margin-bottom: 1rem;">
           <span class="eyebrow" style="margin-bottom: -1rem;">Cuatro capacidades. Un mismo propósito: generar impacto.</span>
             <h1>Ecosistema Integrado</h1>
         </div>
@@ -175,15 +175,15 @@
     </section>
 
     <!-- BLOQUE 3: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
-    <section class="section-padding bg3" style="background-color: var(--bg-subtle);">
-      <div class="container" style="margin-bottom: 4rem;">
+    <section class="section-padding-md bg3" style="background-color: var(--bg-subtle);">
+      <div class="container" >
         <div class="ambitos-grid" style="display: grid; grid-template-columns: 1fr 2.5fr; gap: 3rem; align-items: center;">
           
           <!-- ENCABEZADO (Intacto) -->
           <div class="ambitos-header">
             <h2 style="font-size: 2.2rem; margin-bottom: 1rem; line-height: 1.2;">Ámbitos de Experiencia</h2>
             <p style="font-size: 1.1rem; color: var(--text-muted); line-height: 1.6;">
-              Comprendemos las particularidades de cada sector para adaptar la intervención sin perder de vista el conjunto.
+              Comprendemos las particularidades de cada sector para adaptar la intervención <br>sin perder de vista el conjunto.
             </p>
           </div>
 
@@ -236,7 +236,7 @@
     </section>
 
     <!-- BLOQUE 4: LA BRÚJULA -->
-    <section class="section-padding brujula-section bg1" style="position: relative; overflow: hidden;">
+    <section class="section-padding-md brujula-section bg1" style="position: relative; overflow: hidden">
 
       <!-- MARCA DE AGUA -->
       <div class="brujula-watermark" aria-hidden="true">
@@ -338,9 +338,9 @@
       </div>
 
       <div class="container">
-        <div style="display: flex; flex-direction: column; gap: 2rem; align-items: center;">
+        <div style="display: flex; flex-direction: column; gap: 0.2rem; align-items: center;">
 
-          <div class="ecosystem-header" style="text-align: center; margin-bottom: 1.5rem;">
+          <div class="ecosystem-header" style="text-align: center; margin-bottom: 1rem;">
             <span class="eyebrow" style="margin-bottom: -1rem;">Encontrá donde podemos generar impacto.</span>
             <h1>Brújula IDE</h1>
           </div>