fix: auditoría UI/UX landing page y consistencia entre subpáginas

- Agrega menú móvil funcional con panel deslizable y animación hamburger - Corrige hero stat "150 N / Day St" confuso por "$3.50/lb (flete)" - Arregla bug CSS `flex-wrap: gap` inválido en footer-bottom - Corrige links "Carga Pesada" en nav y footer para apuntar a #cotizacion - Agrega acción al botón de pre-alerta con validación - Limpia address del footer (eliminado placeholder "Suite EC-" vacío) - Agrega favicon, OG tags y theme-color a las 4 páginas - Consolida event listeners para evitar conflictos móvil/WhatsApp Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-28 11:35:15 -05:00
parent 696ff9fa51
commit 492dc5436c
4 changed files with 84 additions and 24 deletions
@@ -5,6 +5,11 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Moraworld Imports — Tu casillero en New Jersey. Compra en Amazon, eBay y más. Enviamos a Ecuador con declaración aduanera incluida." />
  <title>Moraworld Imports — Casillero en EE.UU. para Ecuador</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📦</text></svg>" />
+  <meta property="og:title" content="Moraworld Imports — Casillero en EE.UU. para Ecuador" />
+  <meta property="og:description" content="Tu casillero en New Jersey. Compra en Amazon, eBay y más. Enviamos a Ecuador con declaración SENAE incluida." />
+  <meta property="og:type" content="website" />
+  <meta name="theme-color" content="#0057FF" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
@@ -470,7 +475,7 @@
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.06);
      padding-top: 28px; display: flex; justify-content: space-between;
-      align-items: center; flex-wrap: gap;
+      align-items: center; flex-wrap: wrap; gap: 16px;
    }
    .footer-bottom p { font-size: .82rem; }
    .footer-badges { display: flex; gap: 12px; }
@@ -480,6 +485,24 @@
      border-radius: 999px;
    }

+    /* ── MOBILE MENU ── */
+    .mobile-menu {
+      display: none;
+      position: fixed; top: 64px; left: 0; right: 0; z-index: 99;
+      background: var(--white); border-bottom: 1px solid var(--gray-200);
+      padding: 16px 24px 24px; box-shadow: 0 8px 32px rgba(0,0,0,.12);
+    }
+    .mobile-menu.open { display: block; }
+    .mobile-nav-links { display: flex; flex-direction: column; }
+    .mobile-nav-links a { padding: 13px 0; border-bottom: 1px solid var(--gray-100); font-size: .95rem; font-weight: 500; color: var(--gray-700); display: block; }
+    .mobile-nav-links a:last-child { border-bottom: none; }
+    .mobile-nav-links a:hover { color: var(--primary); }
+    .mobile-nav-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
+    .mobile-nav-cta .btn { justify-content: center; width: 100%; }
+    .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
+    .hamburger.active span:nth-child(2) { opacity: 0; }
+    .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
+
    /* ── WHATSAPP FLOAT ── */
    .wa-float {
      position: fixed; bottom: 28px; right: 28px; z-index: 999;
@@ -543,7 +566,7 @@
      <a href="#como-funciona">Cómo funciona</a>
      <a href="#calculadora">Calculadora</a>
      <a href="#tracking">Tracking</a>
-      <a href="#carga-pesada">Carga Pesada</a>
+      <a href="#cotizacion">Carga Pesada</a>
      <a href="#nosotros">Nosotros</a>
    </div>
    <div class="nav-cta">
@@ -556,6 +579,23 @@
  </div>
 </nav>

+<!-- ─────────────────── MOBILE MENU ─────────────────── -->
+<div class="mobile-menu" id="mobile-menu">
+  <div class="mobile-nav-links">
+    <a href="#servicios" onclick="closeMobileMenu()">Servicios</a>
+    <a href="#como-funciona" onclick="closeMobileMenu()">Cómo funciona</a>
+    <a href="#calculadora" onclick="closeMobileMenu()">Calculadora</a>
+    <a href="#tracking" onclick="closeMobileMenu()">Tracking</a>
+    <a href="#cotizacion" onclick="closeMobileMenu()">Carga Pesada</a>
+    <a href="#nosotros" onclick="closeMobileMenu()">Nosotros</a>
+    <a href="#contacto" onclick="closeMobileMenu()">Contacto</a>
+  </div>
+  <div class="mobile-nav-cta">
+    <a href="login.html" class="btn btn-outline">Iniciar sesión</a>
+    <a href="registro.html" class="btn btn-primary">Abrir casillero gratis →</a>
+  </div>
+</div>
+
 <!-- ─────────────────── HERO ─────────────────── -->
 <section class="hero">
  <div class="container">
@@ -572,8 +612,8 @@
        </div>
        <div class="hero-stats">
          <div class="stat">
-            <div class="stat-num">150 N</div>
-            <div class="stat-label">Day St, Orange NJ</div>
+            <div class="stat-num">$3.50</div>
+            <div class="stat-label">por libra (flete)</div>
          </div>
          <div class="stat">
            <div class="stat-num">24/7</div>
@@ -982,7 +1022,7 @@
            <input type="file" id="factura-upload" style="display:none;" accept=".pdf,image/*" />
          </div>
        </div>
-        <button class="calc-btn">Registrar pre-alerta →</button>
+        <button class="calc-btn" onclick="submitPrealertaLanding()">Registrar pre-alerta →</button>
      </div>
    </div>
  </div>
@@ -1252,7 +1292,7 @@
        <h3>Moraworld<span>.</span>Imports</h3>
        <p>Conectamos el mercado americano con los consumidores ecuatorianos. Bodega en New Jersey, representación legal en Cuenca, Ecuador.</p>
        <p style="margin-top:12px; font-size:.8rem;">
-          📍 150 N Day St, Suite EC-, City of Orange, NJ 07050<br/>
+          📍 150 N Day St, City of Orange, NJ 07050<br/>
          📍 Cuenca, Ecuador
        </p>
      </div>
@@ -1260,7 +1300,7 @@
        <h4>Servicios</h4>
        <ul>
          <li><a href="#servicios">Casillero Personal</a></li>
-          <li><a href="#carga-pesada">Carga Pesada</a></li>
+          <li><a href="#cotizacion">Carga Pesada</a></li>
          <li><a href="#calculadora">Calculadora</a></li>
          <li><a href="#tracking">Tracking</a></li>
          <li><a href="#prealerta">Pre-alerta</a></li>
@@ -1324,9 +1364,26 @@
  function toggleWa(){
    document.getElementById('wa-float').classList.toggle('open');
  }
+
+  /* Mobile menu */
+  function closeMobileMenu(){
+    document.getElementById('mobile-menu').classList.remove('open');
+    document.getElementById('hamburger').classList.remove('active');
+  }
+  document.getElementById('hamburger').addEventListener('click', function(){
+    this.classList.toggle('active');
+    document.getElementById('mobile-menu').classList.toggle('open');
+  });
+
+  /* Close menus when clicking outside */
  document.addEventListener('click', function(e){
    const wf = document.getElementById('wa-float');
    if(!wf.contains(e.target)) wf.classList.remove('open');
+    const menu = document.getElementById('mobile-menu');
+    const hamburger = document.getElementById('hamburger');
+    if(menu.classList.contains('open') && !menu.contains(e.target) && !hamburger.contains(e.target)){
+      closeMobileMenu();
+    }
  });

  /* FAQ accordion */
@@ -1346,15 +1403,11 @@
    const valor    = parseFloat(document.getElementById('c-value').value)  || 0;
    const cat      = document.getElementById('c-cat').value;

-    // Peso volumétrico (cm³ / 139 = lbs volumétricas aprox)
    const volWeight = (largo * ancho * alto) / 139;
    const pesoFinal = Math.max(weight, volWeight);

-    // Tarifas arancel
    const aranceles = { '4x4': 0, 'B': 0.10, 'C': 0.20, 'D': 0.10 };
-    const tarifaFlete = 3.50; // USD / lb
-
-    const flete   = pesoFinal * tarifaFlete;
+    const flete   = pesoFinal * 3.50;
    const seguro  = valor * 0.02;
    const fodinfa = valor * 0.005;
    const arancel = valor * (aranceles[cat] || 0);
@@ -1363,13 +1416,13 @@

    const fmt = n => '$' + n.toFixed(2);

-    document.getElementById('r-peso').textContent   = pesoFinal.toFixed(2) + ' lbs';
-    document.getElementById('r-flete').textContent  = fmt(flete);
-    document.getElementById('r-seguro').textContent = fmt(seguro);
-    document.getElementById('r-fodinfa').textContent= fmt(fodinfa);
-    document.getElementById('r-arancel').textContent= fmt(arancel) + (cat === '4x4' ? ' (exento)' : '');
-    document.getElementById('r-iva').textContent    = fmt(iva);
-    document.getElementById('r-total').textContent  = fmt(total);
+    document.getElementById('r-peso').textContent    = pesoFinal.toFixed(2) + ' lbs';
+    document.getElementById('r-flete').textContent   = fmt(flete);
+    document.getElementById('r-seguro').textContent  = fmt(seguro);
+    document.getElementById('r-fodinfa').textContent = fmt(fodinfa);
+    document.getElementById('r-arancel').textContent = fmt(arancel) + (cat === '4x4' ? ' (exento)' : '');
+    document.getElementById('r-iva').textContent     = fmt(iva);
+    document.getElementById('r-total').textContent   = fmt(total);
  }

  /* Tracking demo */
@@ -1380,11 +1433,12 @@
    document.getElementById('tracking-result').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }

-  /* Hamburger menu (mobile) */
-  document.getElementById('hamburger').addEventListener('click', function(){
-    // Simple toggle — en producción se expandiría el menú móvil
-    this.classList.toggle('active');
-  });
+  /* Pre-alerta landing */
+  function submitPrealertaLanding(){
+    const tracking = document.querySelector('.prealerta-form input[type=text]').value.trim();
+    if(!tracking){ alert('Ingresa el número de tracking del vendedor.'); return; }
+    alert('✅ Pre-alerta registrada. El equipo de bodega en NJ estará atento a la llegada de tu paquete. ¡Gracias!');
+  }
 </script>

 </body>
@@ -4,6 +4,8 @@
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Iniciar sesión — Moraworld Imports</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📦</text></svg>" />
+  <meta name="theme-color" content="#0057FF" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
  <style>
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@@ -4,6 +4,8 @@
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Mi Casillero — Moraworld Imports</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📦</text></svg>" />
+  <meta name="theme-color" content="#0057FF" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"/>
  <style>
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@@ -4,6 +4,8 @@
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Crear cuenta — Moraworld Imports</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📦</text></svg>" />
+  <meta name="theme-color" content="#0057FF" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
  <style>
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}