extraccion de menu y footer

index.html

@@ -5,6 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Amor & Roma — Estudio Creativo</title>
   <link rel="stylesheet" href="styles/main.css">
+  <link rel="preload" href="partials/menu.html" as="fetch" crossorigin>
+  <link rel="preload" href="partials/footer.html" as="fetch" crossorigin>
 </head>
 <body>
   <!-- ===== CANVAS PARA EFECTO DE HUMO ===== -->
@@ -14,73 +16,7 @@
   <div class="overlay" id="overlay" onclick="toggleMenu()"></div>
 
   <!-- ===== MENU BOTTOM SHEET ===== -->
-  <nav class="sheet" id="sheet">
+  <div id="menu-placeholder"></div>
-    <div class="sheet-handle"></div>
-    <div class="sheet-top">
-      <div class="logo">
-        <a href="index.html">
-          <img src="./assets/logos/logo_ciruela.png" alt="Amor & Roma" class="logo-img">
-        </a>
-      </div>
-      <button class="close-btn" onclick="toggleMenu()">✕</button>
-    </div>
-    <div class="sheet-body">
-      <div class="sheet-col">
-        <div class="sheet-col-title">Soluciones Web</div>
-        <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
-          <span class="sheet-link-icon">⊞</span>
-          <span class="sheet-link-main">Diseño Web</span>
-          <span class="sheet-link-desc">Sitios informativos modernos</span>
-        </a>
-        <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
-          <span class="sheet-link-icon">⊞</span>
-          <span class="sheet-link-main">E-commerce</span>
-          <span class="sheet-link-desc">Tiendas online con todas las funcionalidades</span>
-        </a>
-        <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
-          <span class="sheet-link-icon">⊞</span>
-          <span class="sheet-link-main">Google Ads</span>
-          <span class="sheet-link-desc">Publicidad en Search y Display</span>
-        </a>
-      </div>
-      <div class="sheet-col">
-        <div class="sheet-col-title">Redes Sociales</div>
-        <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
-          <span class="sheet-link-icon">⊞</span>
-          <span class="sheet-link-main">Community Manager</span>
-          <span class="sheet-link-desc">Administración profesional de redes</span>
-        </a>
-        <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
-          <span class="sheet-link-icon">⊞</span>
-          <span class="sheet-link-main">Creación de Contenido</span>
-          <span class="sheet-link-desc">Contenido original y atractivo</span>
-        </a>
-        <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
-          <span class="sheet-link-icon">⊞</span>
-          <span class="sheet-link-main">Meta Ads</span>
-          <span class="sheet-link-desc">Publicidad en Facebook e Instagram</span>
-        </a>
-      </div>
-      <div class="sheet-col">
-        <div class="sheet-col-title">Branding</div>
-        <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
-          <span class="sheet-link-icon">⊞</span>
-          <span class="sheet-link-main">Diseño de Logos</span>
-          <span class="sheet-link-desc">Personalizados y profesionales</span>
-        </a>
-        <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
-          <span class="sheet-link-icon">⊞</span>
-          <span class="sheet-link-main">Identidad de Marca</span>
-          <span class="sheet-link-desc">Creación y desarrollo de marca</span>
-        </a>
-        <a href="#contacto" onclick="toggleMenu()" class="sheet-link highlight">
-          <span class="sheet-link-icon">✉</span>
-          <span class="sheet-link-main">Contacto</span>
-          <span class="sheet-link-desc">Empezá tu proyecto</span>
-        </a>
-      </div>
-    </div>
-  </nav>
 
   <!-- ===== HEADER ===== -->
   <header>
@@ -616,48 +552,11 @@
   </section>
 
   <!-- ===== FOOTER ===== -->
-  <footer class="footer">
+  <div id="footer-placeholder"></div>
-    <div class="footer-inner">
-      <div class="footer-brand">
-        <div class="footer-logo"><img src="logo_frio.png" alt="Amor & Roma" style="height:36px;width:auto;"></div>
-        <p class="footer-desc">Branding, diseño web y marketing digital para marcas con esencia.</p>
-      </div>
-      <div class="footer-links">
-        <div class="footer-col">
-          <h4>Navegación</h4>
-          <a href="#servicios">Servicios</a>
-          <a href="#planes">Planes</a>          
-          <a href="#cifras">Cifras</a>
-          <a href="#faq">FAQ</a>    
-        </div>
-        <div class="footer-col">
-          <h4>Servicios</h4>
-          <a href="#servicios">Branding</a>
-          <a href="#servicios">Diseño Web</a>
-          <a href="#servicios">Marketing Digital</a>
-          <a href="#servicios">IA & Automatización</a>
-        </div>
-        <div class="footer-col">
-          <h4>Contacto</h4>
-          <a href="mailto:contacto@amoryroma.com.ar">contacto@amoryroma.com.ar</a>
-          <a href="https://wa.me/5493886118304" target="_blank">+54 9 388 611-8304</a>
-          <div class="footer-socials">
-            <a href="https://www.instagram.com/amoryroma.creativo/" target="_blank" aria-label="Instagram">IG</a>
-            <a href="https://www.linkedin.com/in/patricia-pugliese/" target="_blank" aria-label="LinkedIn">IN</a>
-            <a href="https://web.facebook.com/amoryroma.creativo" target="_blank" aria-label="Facebook">FB</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="footer-bottom">
-      <span>&copy; 2026 Amor & Roma — Estudio Creativo. Todos los derechos reservados.</span>
-      <span class="footer-legal"><a href="#">Política de privacidad</a><a href="#">Términos y condiciones</a></span>
-    </div>
-  </footer>
 
   <!-- ===== SCRIPTS ===== -->
   <script src="scripts/main.js"></script>
   <script src="fluid.js"></script>
-
+  <script src="scripts/loader.js" defer></script>
 </body>
 </html>

partials/footer.html

@@ -0,0 +1,43 @@
+<footer class="footer">
+  <div class="footer-inner">
+    <div class="footer-brand">
+      <div class="footer-logo">
+        <img src="./assets/logos/logo_frio.png" alt="Amor & Roma" style="height:36px;width:auto;">
+      </div>
+      <p class="footer-desc">Branding, diseño web y marketing digital para marcas con esencia.</p>
+    </div>
+    <div class="footer-links">
+      <div class="footer-col">
+        <h4>Navegación</h4>
+        <a href="#servicios">Servicios</a>
+        <a href="#planes">Planes</a>
+        <a href="#cifras">Cifras</a>
+        <a href="#faq">FAQ</a>
+      </div>
+      <div class="footer-col">
+        <h4>Servicios</h4>
+        <a href="#servicios">Branding</a>
+        <a href="#servicios">Diseño Web</a>
+        <a href="#servicios">Marketing Digital</a>
+        <a href="#servicios">IA & Automatización</a>
+      </div>
+      <div class="footer-col">
+        <h4>Contacto</h4>
+        <a href="mailto:contacto@amoryroma.com.ar">contacto@amoryroma.com.ar</a>
+        <a href="https://wa.me/5493886118304" target="_blank">+54 9 388 611-8304</a>
+        <div class="footer-socials">
+          <a href="https://www.instagram.com/amoryroma.creativo/" target="_blank" aria-label="Instagram">IG</a>
+          <a href="https://www.linkedin.com/in/patricia-pugliese/" target="_blank" aria-label="LinkedIn">IN</a>
+          <a href="https://web.facebook.com/amoryroma.creativo" target="_blank" aria-label="Facebook">FB</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="footer-bottom">
+    <span>&copy; 2026 Amor & Roma — Estudio Creativo. Todos los derechos reservados.</span>
+    <span class="footer-legal">
+      <a href="#">Política de privacidad</a>
+      <a href="#">Términos y condiciones</a>
+    </span>
+  </div>
+</footer>

partials/menu.html

@@ -0,0 +1,71 @@
+<!-- ===== OVERLAY ===== -->
+<div class="overlay" id="overlay" onclick="toggleMenu()"></div>
+
+<!-- ===== MENU BOTTOM SHEET ===== -->
+<nav class="sheet" id="sheet" aria-label="Menú principal">
+  <div class="sheet-handle"></div>
+  <div class="sheet-top">
+    <div class="logo">
+      <a href="index.html">
+        <img src="./assets/logos/logo_ciruela.png" alt="Amor & Roma" class="logo-img">
+      </a>
+    </div>
+    <button class="close-btn" onclick="toggleMenu()" aria-label="Cerrar menú">✕</button>
+  </div>
+  <div class="sheet-body">
+    <div class="sheet-col">
+      <div class="sheet-col-title">Soluciones Web</div>
+      <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
+        <span class="sheet-link-icon">⊞</span>
+        <span class="sheet-link-main">Diseño Web</span>
+        <span class="sheet-link-desc">Sitios informativos modernos</span>
+      </a>
+      <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
+        <span class="sheet-link-icon">⊞</span>
+        <span class="sheet-link-main">E-commerce</span>
+        <span class="sheet-link-desc">Tiendas online con todas las funcionalidades</span>
+      </a>
+      <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
+        <span class="sheet-link-icon">⊞</span>
+        <span class="sheet-link-main">Google Ads</span>
+        <span class="sheet-link-desc">Publicidad en Search y Display</span>
+      </a>
+    </div>
+    <div class="sheet-col">
+      <div class="sheet-col-title">Redes Sociales</div>
+      <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
+        <span class="sheet-link-icon">⊞</span>
+        <span class="sheet-link-main">Community Manager</span>
+        <span class="sheet-link-desc">Administración profesional de redes</span>
+      </a>
+      <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
+        <span class="sheet-link-icon">⊞</span>
+        <span class="sheet-link-main">Creación de Contenido</span>
+        <span class="sheet-link-desc">Contenido original y atractivo</span>
+      </a>
+      <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
+        <span class="sheet-link-icon">⊞</span>
+        <span class="sheet-link-main">Meta Ads</span>
+        <span class="sheet-link-desc">Publicidad en Facebook e Instagram</span>
+      </a>
+    </div>
+    <div class="sheet-col">
+      <div class="sheet-col-title">Branding</div>
+      <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
+        <span class="sheet-link-icon">⊞</span>
+        <span class="sheet-link-main">Diseño de Logos</span>
+        <span class="sheet-link-desc">Personalizados y profesionales</span>
+      </a>
+      <a href="#servicios" onclick="toggleMenu()" class="sheet-link">
+        <span class="sheet-link-icon">⊞</span>
+        <span class="sheet-link-main">Identidad de Marca</span>
+        <span class="sheet-link-desc">Creación y desarrollo de marca</span>
+      </a>
+      <a href="#contacto" onclick="toggleMenu()" class="sheet-link highlight">
+        <span class="sheet-link-icon">✉</span>
+        <span class="sheet-link-main">Contacto</span>
+        <span class="sheet-link-desc">Empezá tu proyecto</span>
+      </a>
+    </div>
+  </div>
+</nav>

scripts/loader.js

@@ -0,0 +1,50 @@
+/**
+ * Loader de partials HTML (menú + footer).
+ * - Usa fetch + cache del navegador.
+ * - Inyecta con innerHTML (sin reflow bloqueante).
+ * - Diferido con requestIdleCallback para no competir con el render.
+ */
+(function () {
+  'use strict';
+
+  const PARTIALS = [
+    { url: 'partials/menu.html',   target: 'menu-placeholder' },
+    { url: 'partials/footer.html', target: 'footer-placeholder' }
+  ];
+
+  // Cache en memoria para evitar refetch si se llama varias veces
+  const cache = new Map();
+
+  async function loadPartial({ url, target }) {
+    const el = document.getElementById(target);
+    if (!el) return;
+
+    try {
+      let html = cache.get(url);
+      if (!html) {
+        const res = await fetch(url, { cache: 'force-cache' });
+        if (!res.ok) throw new Error(`HTTP ${res.status} en ${url}`);
+        html = await res.text();
+        cache.set(url, html);
+      }
+      // Inserción vía fragmento para minimizar reflows
+      el.outerHTML = html;
+    } catch (err) {
+      console.warn(`[loader] No se pudo cargar ${url}:`, err);
+      // Fallback silencioso: deja el placeholder vacío
+    }
+  }
+
+  function loadAll() {
+    // En paralelo: ambas peticiones viajan juntas
+    PARTIALS.forEach(loadPartial);
+  }
+
+  // Espera al idle para no bloquear LCP/FCP
+  if ('requestIdleCallback' in window) {
+    requestIdleCallback(loadAll, { timeout: 1500 });
+  } else {
+    // Fallback para Safari
+    window.addEventListener('load', () => setTimeout(loadAll, 0));
+  }
+})();