Lizandro GuarnizoandClaude Sonnet 4.6
492dc5436c
- 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>
1446 lines
67 KiB
HTML
1446 lines
67 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<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" />
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--primary: #0057FF;
|
||
--primary-d: #003FC7;
|
||
--accent: #FF6B00;
|
||
--dark: #0D1117;
|
||
--gray-900: #111827;
|
||
--gray-700: #374151;
|
||
--gray-500: #6B7280;
|
||
--gray-200: #E5E7EB;
|
||
--gray-100: #F3F4F6;
|
||
--white: #FFFFFF;
|
||
--green: #10B981;
|
||
--radius: 12px;
|
||
--shadow: 0 4px 24px rgba(0,0,0,.08);
|
||
--shadow-lg: 0 12px 48px rgba(0,0,0,.14);
|
||
}
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
color: var(--gray-900);
|
||
background: var(--white);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
a { text-decoration: none; color: inherit; }
|
||
img { max-width: 100%; display: block; }
|
||
ul { list-style: none; }
|
||
|
||
/* ── UTILITIES ── */
|
||
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 14px 28px; border-radius: 8px; font-weight: 600;
|
||
font-size: .95rem; cursor: pointer; transition: all .2s;
|
||
border: none;
|
||
}
|
||
.btn-primary { background: var(--primary); color: var(--white); }
|
||
.btn-primary:hover { background: var(--primary-d); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,87,255,.3); }
|
||
.btn-accent { background: var(--accent); color: var(--white); }
|
||
.btn-accent:hover { background: #e05e00; transform: translateY(-2px); }
|
||
.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
|
||
.btn-outline:hover { background: var(--primary); color: var(--white); }
|
||
.btn-white { background: var(--white); color: var(--primary); font-weight: 700; }
|
||
.btn-white:hover { background: var(--gray-100); }
|
||
|
||
.section-tag {
|
||
display: inline-block; background: #EEF3FF; color: var(--primary);
|
||
font-size: .78rem; font-weight: 700; letter-spacing: .08em;
|
||
text-transform: uppercase; padding: 4px 14px; border-radius: 999px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
|
||
.section-sub { font-size: 1.05rem; color: var(--gray-500); max-width: 600px; }
|
||
.text-center { text-align: center; }
|
||
.text-center .section-sub { margin: 0 auto; }
|
||
|
||
/* ── NAVBAR ── */
|
||
nav {
|
||
position: sticky; top: 0; z-index: 100;
|
||
background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--gray-200);
|
||
}
|
||
.nav-inner {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
height: 64px;
|
||
}
|
||
.nav-logo { font-size: 1.25rem; font-weight: 800; color: var(--primary); }
|
||
.nav-logo span { color: var(--accent); }
|
||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||
.nav-links a { font-size: .9rem; font-weight: 500; color: var(--gray-700); transition: color .2s; }
|
||
.nav-links a:hover { color: var(--primary); }
|
||
.nav-cta { display: flex; gap: 10px; }
|
||
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
|
||
.hamburger span { width: 24px; height: 2px; background: var(--gray-900); border-radius: 2px; transition: all .3s; }
|
||
|
||
/* ── HERO ── */
|
||
.hero {
|
||
background: linear-gradient(135deg, #0D1117 0%, #0D2150 100%);
|
||
padding: 96px 0 80px;
|
||
position: relative; overflow: hidden;
|
||
}
|
||
.hero::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230057FF' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||
}
|
||
.hero-inner {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
|
||
position: relative;
|
||
}
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
background: rgba(0,87,255,.15); border: 1px solid rgba(0,87,255,.3);
|
||
color: #7AADFF; font-size: .8rem; font-weight: 600;
|
||
padding: 6px 14px; border-radius: 999px; margin-bottom: 24px;
|
||
}
|
||
.hero-badge span { width: 8px; height: 8px; border-radius: 50%; background: #7AADFF; animation: pulse 2s infinite; }
|
||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
|
||
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; color: var(--white); line-height: 1.15; margin-bottom: 20px; }
|
||
.hero h1 em { color: var(--accent); font-style: normal; }
|
||
.hero p { color: #9CA3AF; font-size: 1.1rem; margin-bottom: 36px; max-width: 520px; }
|
||
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
|
||
.hero-stats { display: flex; gap: 32px; }
|
||
.stat { }
|
||
.stat-num { font-size: 1.6rem; font-weight: 800; color: var(--white); }
|
||
.stat-label { font-size: .8rem; color: #6B7280; }
|
||
|
||
.hero-card {
|
||
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
|
||
border-radius: 16px; padding: 32px; backdrop-filter: blur(10px);
|
||
}
|
||
.hero-card h3 { color: var(--white); font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
|
||
.address-box {
|
||
background: rgba(0,87,255,.15); border: 1px solid rgba(0,87,255,.3);
|
||
border-radius: 10px; padding: 16px 20px; margin-bottom: 20px;
|
||
}
|
||
.address-box p { color: #CBD5E1; font-size: .85rem; margin-bottom: 4px; }
|
||
.address-box strong { color: var(--white); font-size: 1rem; display: block; }
|
||
.address-suite { color: var(--accent) !important; font-size: 1.1rem !important; font-weight: 700; }
|
||
.hero-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
|
||
.hero-step { display: flex; align-items: flex-start; gap: 14px; }
|
||
.step-num {
|
||
width: 28px; height: 28px; border-radius: 50%;
|
||
background: var(--primary); color: var(--white);
|
||
font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.step-text { color: #D1D5DB; font-size: .88rem; padding-top: 4px; }
|
||
|
||
/* ── SERVICES ── */
|
||
.services { padding: 80px 0; background: var(--gray-100); }
|
||
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
|
||
.service-card {
|
||
background: var(--white); border-radius: var(--radius);
|
||
border: 2px solid var(--gray-200); padding: 36px 32px;
|
||
transition: all .3s; position: relative; overflow: hidden;
|
||
}
|
||
.service-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
|
||
.service-card.featured { border-color: var(--primary); }
|
||
.service-card.featured::before {
|
||
content: 'MÁS POPULAR'; position: absolute; top: 20px; right: -28px;
|
||
background: var(--primary); color: var(--white); font-size: .7rem; font-weight: 700;
|
||
padding: 4px 40px; transform: rotate(45deg); letter-spacing: .1em;
|
||
}
|
||
.service-icon {
|
||
width: 56px; height: 56px; border-radius: 14px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.6rem; margin-bottom: 20px;
|
||
}
|
||
.icon-blue { background: #EEF3FF; }
|
||
.icon-orange { background: #FFF3E8; }
|
||
.service-card h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
|
||
.service-card p { color: var(--gray-500); font-size: .93rem; margin-bottom: 20px; }
|
||
.service-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
|
||
.service-features li { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--gray-700); }
|
||
.service-features li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }
|
||
|
||
/* ── HOW IT WORKS ── */
|
||
.how { padding: 80px 0; }
|
||
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; position: relative; }
|
||
.how-grid::before {
|
||
content: ''; position: absolute; top: 36px; left: calc(12.5% + 4px); right: calc(12.5% + 4px);
|
||
height: 2px; background: linear-gradient(90deg, var(--primary), var(--accent));
|
||
z-index: 0;
|
||
}
|
||
.how-step { text-align: center; position: relative; z-index: 1; }
|
||
.how-num {
|
||
width: 72px; height: 72px; border-radius: 50%;
|
||
background: var(--white); border: 3px solid var(--primary);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.4rem; font-weight: 800; color: var(--primary);
|
||
margin: 0 auto 20px; box-shadow: var(--shadow);
|
||
}
|
||
.how-step h4 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
|
||
.how-step p { font-size: .85rem; color: var(--gray-500); }
|
||
|
||
/* ── CALCULATOR ── */
|
||
.calc-section { padding: 80px 0; background: var(--gray-100); }
|
||
.calc-wrapper {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
|
||
align-items: start; margin-top: 48px;
|
||
}
|
||
.calc-box {
|
||
background: var(--white); border-radius: var(--radius);
|
||
padding: 36px 32px; box-shadow: var(--shadow);
|
||
}
|
||
.calc-box h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 24px; }
|
||
.form-group { margin-bottom: 20px; }
|
||
.form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
|
||
.form-group input, .form-group select {
|
||
width: 100%; padding: 12px 16px; border: 2px solid var(--gray-200);
|
||
border-radius: 8px; font-size: .95rem; font-family: inherit;
|
||
transition: border-color .2s; outline: none;
|
||
}
|
||
.form-group input:focus, .form-group select:focus { border-color: var(--primary); }
|
||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||
.calc-btn {
|
||
width: 100%; padding: 14px; background: var(--primary); color: var(--white);
|
||
border: none; border-radius: 8px; font-size: 1rem; font-weight: 700;
|
||
cursor: pointer; transition: all .2s; font-family: inherit;
|
||
}
|
||
.calc-btn:hover { background: var(--primary-d); transform: translateY(-2px); }
|
||
|
||
.calc-result {
|
||
background: var(--white); border-radius: var(--radius);
|
||
padding: 36px 32px; box-shadow: var(--shadow);
|
||
}
|
||
.calc-result h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 24px; }
|
||
.result-row {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 12px 0; border-bottom: 1px solid var(--gray-100);
|
||
font-size: .9rem;
|
||
}
|
||
.result-row:last-child { border-bottom: none; }
|
||
.result-row .label { color: var(--gray-500); }
|
||
.result-row .value { font-weight: 600; color: var(--gray-900); }
|
||
.result-total {
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-d));
|
||
border-radius: 10px; padding: 20px 24px; margin-top: 20px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
}
|
||
.result-total span:first-child { color: rgba(255,255,255,.8); font-size: .9rem; font-weight: 600; }
|
||
.result-total span:last-child { color: var(--white); font-size: 1.6rem; font-weight: 800; }
|
||
.senae-table { margin-top: 24px; }
|
||
.senae-table h4 { font-size: .85rem; font-weight: 700; color: var(--gray-700); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .05em; }
|
||
.senae-row {
|
||
display: flex; gap: 12px; align-items: flex-start;
|
||
padding: 10px 14px; border-radius: 8px; margin-bottom: 6px;
|
||
font-size: .83rem;
|
||
}
|
||
.senae-row.sr-4x4 { background: #F0FDF4; }
|
||
.senae-row.sr-b { background: #EFF6FF; }
|
||
.senae-row.sr-c { background: #FFF7ED; }
|
||
.senae-row.sr-d { background: #F5F3FF; }
|
||
.senae-badge {
|
||
font-weight: 700; font-size: .75rem; padding: 2px 10px;
|
||
border-radius: 999px; white-space: nowrap; flex-shrink: 0;
|
||
}
|
||
.bg-green { background: #DCFCE7; color: #15803D; }
|
||
.bg-blue { background: #DBEAFE; color: #1D4ED8; }
|
||
.bg-orange { background: #FFEDD5; color: #C2410C; }
|
||
.bg-purple { background: #EDE9FE; color: #7C3AED; }
|
||
.senae-desc { color: var(--gray-700); line-height: 1.4; }
|
||
|
||
/* ── TRACKING ── */
|
||
.tracking-section { padding: 80px 0; }
|
||
.tracking-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
|
||
.tracking-form-box {
|
||
background: var(--gray-100); border-radius: 16px; padding: 40px 36px;
|
||
}
|
||
.tracking-form-box h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
|
||
.tracking-form-box p { color: var(--gray-500); font-size: .9rem; margin-bottom: 28px; }
|
||
.tracking-input-wrap { display: flex; gap: 0; }
|
||
.tracking-input-wrap input {
|
||
flex: 1; padding: 14px 20px; border: 2px solid var(--gray-200);
|
||
border-right: none; border-radius: 8px 0 0 8px;
|
||
font-size: .95rem; font-family: inherit; outline: none;
|
||
transition: border-color .2s;
|
||
}
|
||
.tracking-input-wrap input:focus { border-color: var(--primary); }
|
||
.tracking-input-wrap button {
|
||
padding: 14px 24px; background: var(--primary); color: var(--white);
|
||
border: none; border-radius: 0 8px 8px 0; font-weight: 700;
|
||
cursor: pointer; transition: background .2s; font-family: inherit;
|
||
white-space: nowrap;
|
||
}
|
||
.tracking-input-wrap button:hover { background: var(--primary-d); }
|
||
.tracking-result { margin-top: 24px; display: none; }
|
||
.tracking-result.show { display: block; }
|
||
.status-timeline { display: flex; flex-direction: column; gap: 0; }
|
||
.status-item { display: flex; gap: 16px; }
|
||
.status-line { display: flex; flex-direction: column; align-items: center; }
|
||
.status-dot {
|
||
width: 14px; height: 14px; border-radius: 50%;
|
||
border: 2px solid var(--gray-200); background: var(--gray-200);
|
||
flex-shrink: 0;
|
||
}
|
||
.status-dot.done { background: var(--green); border-color: var(--green); }
|
||
.status-dot.active { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0,87,255,.2); }
|
||
.status-connector { width: 2px; flex: 1; background: var(--gray-200); min-height: 24px; }
|
||
.status-connector.done { background: var(--green); }
|
||
.status-content { padding: 0 0 20px 0; }
|
||
.status-content strong { font-size: .9rem; display: block; margin-bottom: 2px; }
|
||
.status-content span { font-size: .8rem; color: var(--gray-500); }
|
||
|
||
.tracking-visual { }
|
||
.tracking-visual h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; }
|
||
.tracking-visual p { color: var(--gray-500); margin-bottom: 32px; }
|
||
.states-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||
.state-chip {
|
||
display: flex; align-items: center; gap: 10px;
|
||
background: var(--gray-100); border-radius: 8px;
|
||
padding: 10px 14px; font-size: .82rem; font-weight: 500;
|
||
}
|
||
.state-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||
|
||
/* ── PRE-ALERTA ── */
|
||
.prealerta-section { padding: 80px 0; background: var(--dark); }
|
||
.prealerta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
|
||
.prealerta-inner .section-tag { background: rgba(0,87,255,.2); color: #7AADFF; }
|
||
.prealerta-inner .section-title { color: var(--white); }
|
||
.prealerta-inner .section-sub { color: #9CA3AF; }
|
||
.prealerta-items { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
|
||
.prealerta-item { display: flex; gap: 16px; align-items: flex-start; }
|
||
.pi-icon {
|
||
width: 44px; height: 44px; border-radius: 10px;
|
||
background: rgba(0,87,255,.2); display: flex; align-items: center;
|
||
justify-content: center; font-size: 1.2rem; flex-shrink: 0;
|
||
}
|
||
.pi-text strong { display: block; color: var(--white); font-size: .95rem; margin-bottom: 4px; }
|
||
.pi-text span { color: #6B7280; font-size: .85rem; }
|
||
|
||
.prealerta-form {
|
||
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
|
||
border-radius: var(--radius); padding: 36px 32px;
|
||
}
|
||
.prealerta-form h3 { color: var(--white); font-weight: 700; font-size: 1.15rem; margin-bottom: 24px; }
|
||
.prealerta-form .form-group label { color: #9CA3AF; }
|
||
.prealerta-form input, .prealerta-form select {
|
||
background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.12);
|
||
color: var(--white);
|
||
}
|
||
.prealerta-form input::placeholder { color: #4B5563; }
|
||
.prealerta-form input:focus, .prealerta-form select:focus {
|
||
border-color: var(--primary); background: rgba(0,87,255,.1);
|
||
}
|
||
.prealerta-form select option { background: #1F2937; color: var(--white); }
|
||
.upload-box {
|
||
border: 2px dashed rgba(255,255,255,.15); border-radius: 8px;
|
||
padding: 24px; text-align: center; cursor: pointer;
|
||
transition: border-color .2s;
|
||
}
|
||
.upload-box:hover { border-color: var(--primary); }
|
||
.upload-box p { color: #6B7280; font-size: .85rem; margin-top: 8px; }
|
||
.upload-box span { font-size: 1.8rem; }
|
||
|
||
/* ── LEGAL / TRUST ── */
|
||
.legal-section { padding: 80px 0; }
|
||
.legal-grid {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
||
margin-top: 48px;
|
||
}
|
||
.legal-card {
|
||
background: var(--gray-100); border-radius: var(--radius);
|
||
padding: 28px 24px; text-align: center; transition: all .3s;
|
||
}
|
||
.legal-card:hover { background: var(--white); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
|
||
.legal-icon { font-size: 2rem; margin-bottom: 16px; }
|
||
.legal-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
|
||
.legal-card p { font-size: .85rem; color: var(--gray-500); }
|
||
.legal-badge {
|
||
display: inline-block; margin-top: 12px;
|
||
background: var(--gray-200); color: var(--gray-700);
|
||
font-size: .7rem; font-weight: 700; padding: 3px 12px;
|
||
border-radius: 999px; letter-spacing: .05em;
|
||
}
|
||
.companies-banner {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
|
||
margin-top: 40px;
|
||
}
|
||
.company-card {
|
||
border: 2px solid var(--gray-200); border-radius: var(--radius);
|
||
padding: 28px 24px; display: flex; gap: 20px; align-items: flex-start;
|
||
transition: border-color .3s;
|
||
}
|
||
.company-card:hover { border-color: var(--primary); }
|
||
.company-flag { font-size: 2.4rem; flex-shrink: 0; }
|
||
.company-info h4 { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
|
||
.company-info p { font-size: .83rem; color: var(--gray-500); line-height: 1.5; }
|
||
.company-info .tag {
|
||
display: inline-block; margin-top: 8px;
|
||
background: #EEF3FF; color: var(--primary);
|
||
font-size: .73rem; font-weight: 700; padding: 3px 10px;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
/* ── HEAVY CARGO ── */
|
||
.cargo-section { padding: 80px 0; background: var(--gray-100); }
|
||
.cargo-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
|
||
.cargo-features { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
|
||
.cargo-feat { display: flex; gap: 14px; align-items: flex-start; }
|
||
.cf-icon {
|
||
width: 40px; height: 40px; background: #FFF3E8; border-radius: 10px;
|
||
display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
|
||
}
|
||
.cf-text strong { display: block; font-size: .9rem; margin-bottom: 2px; }
|
||
.cf-text span { font-size: .82rem; color: var(--gray-500); }
|
||
.quote-form {
|
||
background: var(--white); border-radius: var(--radius);
|
||
padding: 36px 32px; box-shadow: var(--shadow);
|
||
}
|
||
.quote-form h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 24px; }
|
||
|
||
/* ── CONTACT / WHATSAPP ── */
|
||
.contact-section { padding: 80px 0; }
|
||
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
|
||
.contact-card {
|
||
background: var(--gray-100); border-radius: var(--radius);
|
||
padding: 36px 32px; text-align: center; transition: all .3s;
|
||
}
|
||
.contact-card:hover { box-shadow: var(--shadow-lg); background: var(--white); }
|
||
.wa-icon { font-size: 3rem; margin-bottom: 16px; }
|
||
.contact-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
|
||
.contact-card p { font-size: .88rem; color: var(--gray-500); margin-bottom: 24px; }
|
||
.btn-wa {
|
||
display: inline-flex; align-items: center; gap: 10px;
|
||
padding: 14px 28px; background: #25D366; color: var(--white);
|
||
border-radius: 8px; font-weight: 700; font-size: .95rem;
|
||
transition: all .2s; border: none; cursor: pointer;
|
||
}
|
||
.btn-wa:hover { background: #1DA851; transform: translateY(-2px); }
|
||
|
||
/* ── FAQ ── */
|
||
.faq-section { padding: 80px 0; background: var(--gray-100); }
|
||
.faq-list { margin-top: 48px; max-width: 780px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 12px; }
|
||
.faq-item {
|
||
background: var(--white); border-radius: var(--radius);
|
||
border: 1px solid var(--gray-200); overflow: hidden;
|
||
}
|
||
.faq-q {
|
||
width: 100%; padding: 20px 24px; display: flex; justify-content: space-between;
|
||
align-items: center; cursor: pointer; background: none; border: none;
|
||
font-family: inherit; font-size: .95rem; font-weight: 600; text-align: left;
|
||
transition: background .2s;
|
||
}
|
||
.faq-q:hover { background: var(--gray-100); }
|
||
.faq-q .arrow { transition: transform .3s; font-size: 1.1rem; color: var(--gray-500); }
|
||
.faq-item.open .faq-q .arrow { transform: rotate(180deg); }
|
||
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
|
||
.faq-item.open .faq-a { max-height: 300px; }
|
||
.faq-a p { padding: 0 24px 20px; color: var(--gray-500); font-size: .9rem; line-height: 1.7; }
|
||
|
||
/* ── CTA FINAL ── */
|
||
.cta-section {
|
||
padding: 96px 0;
|
||
background: linear-gradient(135deg, var(--primary) 0%, #003FC7 100%);
|
||
text-align: center;
|
||
}
|
||
.cta-section h2 { font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 800; color: var(--white); margin-bottom: 16px; }
|
||
.cta-section p { color: rgba(255,255,255,.75); font-size: 1.05rem; margin-bottom: 36px; }
|
||
.cta-section .btn-white { font-size: 1.05rem; padding: 16px 36px; }
|
||
|
||
/* ── FOOTER ── */
|
||
footer {
|
||
background: var(--dark); color: #6B7280;
|
||
padding: 60px 0 32px;
|
||
}
|
||
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
|
||
.footer-brand h3 { color: var(--white); font-size: 1.2rem; font-weight: 800; margin-bottom: 12px; }
|
||
.footer-brand h3 span { color: var(--accent); }
|
||
.footer-brand p { font-size: .85rem; line-height: 1.7; }
|
||
.footer-col h4 { color: var(--white); font-size: .9rem; font-weight: 700; margin-bottom: 16px; }
|
||
.footer-col li { margin-bottom: 10px; }
|
||
.footer-col a { font-size: .85rem; transition: color .2s; }
|
||
.footer-col a:hover { color: var(--white); }
|
||
.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: wrap; gap: 16px;
|
||
}
|
||
.footer-bottom p { font-size: .82rem; }
|
||
.footer-badges { display: flex; gap: 12px; }
|
||
.f-badge {
|
||
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
|
||
color: #9CA3AF; font-size: .72rem; font-weight: 600; padding: 4px 12px;
|
||
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;
|
||
}
|
||
.wa-float-btn {
|
||
width: 60px; height: 60px; border-radius: 50%;
|
||
background: #25D366; display: flex; align-items: center; justify-content: center;
|
||
box-shadow: 0 6px 24px rgba(37,211,102,.4); cursor: pointer;
|
||
transition: transform .2s; border: none;
|
||
font-size: 1.6rem;
|
||
}
|
||
.wa-float-btn:hover { transform: scale(1.1); }
|
||
.wa-float-menu {
|
||
position: absolute; bottom: 72px; right: 0;
|
||
display: flex; flex-direction: column; gap: 10px;
|
||
opacity: 0; pointer-events: none; transition: all .3s;
|
||
transform: translateY(10px);
|
||
}
|
||
.wa-float.open .wa-float-menu { opacity: 1; pointer-events: all; transform: translateY(0); }
|
||
.wa-option {
|
||
display: flex; align-items: center; gap: 12px;
|
||
background: var(--white); border-radius: 999px;
|
||
padding: 10px 20px 10px 14px; box-shadow: var(--shadow-lg);
|
||
white-space: nowrap; cursor: pointer; transition: transform .2s;
|
||
text-decoration: none;
|
||
}
|
||
.wa-option:hover { transform: translateX(-4px); }
|
||
.wa-option .flag { font-size: 1.2rem; }
|
||
.wa-option .info strong { display: block; font-size: .82rem; font-weight: 700; color: var(--gray-900); }
|
||
.wa-option .info span { font-size: .75rem; color: var(--gray-500); }
|
||
|
||
/* ── RESPONSIVE ── */
|
||
@media (max-width: 900px) {
|
||
.hero-inner, .services-grid, .calc-wrapper, .tracking-inner,
|
||
.prealerta-inner, .cargo-inner, .contact-grid, .companies-banner { grid-template-columns: 1fr; }
|
||
.how-grid { grid-template-columns: 1fr 1fr; }
|
||
.how-grid::before { display: none; }
|
||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||
.legal-grid { grid-template-columns: 1fr; }
|
||
.nav-links, .nav-cta { display: none; }
|
||
.hamburger { display: flex; }
|
||
.hero { padding: 64px 0 56px; }
|
||
}
|
||
@media (max-width: 560px) {
|
||
.how-grid { grid-template-columns: 1fr; }
|
||
.footer-grid { grid-template-columns: 1fr; }
|
||
.hero-stats { gap: 20px; }
|
||
.form-row { grid-template-columns: 1fr; }
|
||
.states-grid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ─────────────────── NAVBAR ─────────────────── -->
|
||
<nav>
|
||
<div class="container nav-inner">
|
||
<a class="nav-logo" href="#">Moraworld<span>.</span>Imports</a>
|
||
<div class="nav-links">
|
||
<a href="#servicios">Servicios</a>
|
||
<a href="#como-funciona">Cómo funciona</a>
|
||
<a href="#calculadora">Calculadora</a>
|
||
<a href="#tracking">Tracking</a>
|
||
<a href="#cotizacion">Carga Pesada</a>
|
||
<a href="#nosotros">Nosotros</a>
|
||
</div>
|
||
<div class="nav-cta">
|
||
<a href="login.html" class="btn btn-outline" style="padding:10px 20px; font-size:.85rem;">Iniciar sesión</a>
|
||
<a href="registro.html" class="btn btn-primary" style="padding:10px 20px; font-size:.85rem;">Abrir casillero</a>
|
||
</div>
|
||
<div class="hamburger" id="hamburger">
|
||
<span></span><span></span><span></span>
|
||
</div>
|
||
</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">
|
||
<div class="hero-inner">
|
||
<div>
|
||
<div class="hero-badge">
|
||
<span></span> Empresa legalmente constituida en Ecuador y EE.UU.
|
||
</div>
|
||
<h1>Tu <em>casillero</em> en New Jersey.<br />Enviamos a Ecuador.</h1>
|
||
<p>Compra en Amazon, eBay, Walmart y más. Usa tu Suite personal en nuestra bodega de NJ. Nosotros gestionamos el envío y la aduana ecuatoriana por ti.</p>
|
||
<div class="hero-actions">
|
||
<a href="registro.html" class="btn btn-primary">Abrir mi casillero gratis →</a>
|
||
<a href="#calculadora" class="btn btn-outline" style="color:#fff;border-color:rgba(255,255,255,.3);">Calcular mi envío</a>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="stat">
|
||
<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>
|
||
<div class="stat-label">Tracking en línea</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-num">100%</div>
|
||
<div class="stat-label">Declaración SENAE</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="hero-card">
|
||
<h3>📦 Tu dirección en EE.UU.</h3>
|
||
<div class="address-box">
|
||
<p>Una vez registrado, tu casillero será:</p>
|
||
<strong>150 N Day St,</strong>
|
||
<strong class="address-suite">Suite EC-XXXXX,</strong>
|
||
<strong>City of Orange, NJ 07050</strong>
|
||
<strong>United States 🇺🇸</strong>
|
||
</div>
|
||
<div class="hero-steps">
|
||
<div class="hero-step">
|
||
<div class="step-num">1</div>
|
||
<div class="step-text">Regístrate y obtén tu dirección Suite personalizada</div>
|
||
</div>
|
||
<div class="hero-step">
|
||
<div class="step-num">2</div>
|
||
<div class="step-text">Compra en cualquier tienda online usando esa dirección</div>
|
||
</div>
|
||
<div class="hero-step">
|
||
<div class="step-num">3</div>
|
||
<div class="step-text">Nosotros recibimos, verificamos y enviamos a Ecuador</div>
|
||
</div>
|
||
<div class="hero-step">
|
||
<div class="step-num">4</div>
|
||
<div class="step-text">Declaración aduanera SENAE incluida — sin sorpresas</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────── SERVICIOS ─────────────────── -->
|
||
<section class="services" id="servicios">
|
||
<div class="container">
|
||
<div class="text-center">
|
||
<div class="section-tag">Nuestros Servicios</div>
|
||
<h2 class="section-title">Dos soluciones para importar desde EE.UU.</h2>
|
||
<p class="section-sub">Tanto si compras para uso personal como si importas al por mayor, tenemos el servicio adecuado.</p>
|
||
</div>
|
||
<div class="services-grid">
|
||
<div class="service-card featured">
|
||
<div class="service-icon icon-blue">📦</div>
|
||
<h3>Casillero Personal (B2C)</h3>
|
||
<p>Para compras individuales en Amazon, eBay, Walmart y otras tiendas. Proceso 100% automatizado.</p>
|
||
<ul class="service-features">
|
||
<li>Dirección Suite personalizada en NJ</li>
|
||
<li>Pre-alerta y carga de facturas</li>
|
||
<li>Calculadora de costos con categorías SENAE</li>
|
||
<li>Fotos del paquete en bodega</li>
|
||
<li>Tracking en tiempo real con ID único</li>
|
||
<li>Declaración aduanera incluida</li>
|
||
<li>Notificaciones por WhatsApp, correo y SMS</li>
|
||
</ul>
|
||
<a href="registro.html" class="btn btn-primary" style="width:100%; justify-content:center;">Abrir casillero gratis →</a>
|
||
</div>
|
||
<div class="service-card" id="carga-pesada">
|
||
<div class="service-icon icon-orange">🏭</div>
|
||
<h3>Carga Pesada / Pallets (B2B)</h3>
|
||
<p>Para importadores mayoristas. Pallets, contenedores, carga a granel. Gestión de normas INEN.</p>
|
||
<ul class="service-features">
|
||
<li>Cotización personalizada</li>
|
||
<li>Manejo de pallets y contenedores</li>
|
||
<li>Certificación y cumplimiento INEN</li>
|
||
<li>Declaración de importación formal (DAI)</li>
|
||
<li>Asesoría en partidas arancelarias</li>
|
||
<li>Expediente dedicado con seguimiento B2B</li>
|
||
</ul>
|
||
<a href="#cotizacion" class="btn btn-accent" style="width:100%; justify-content:center;">Solicitar cotización →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────── CÓMO FUNCIONA ─────────────────── -->
|
||
<section class="how" id="como-funciona">
|
||
<div class="container">
|
||
<div class="text-center">
|
||
<div class="section-tag">Proceso</div>
|
||
<h2 class="section-title">Así de simple. 4 pasos.</h2>
|
||
<p class="section-sub">Desde tu compra hasta la puerta de tu casa en Ecuador, lo manejamos todo.</p>
|
||
</div>
|
||
<div class="how-grid">
|
||
<div class="how-step">
|
||
<div class="how-num">1</div>
|
||
<h4>Regístrate</h4>
|
||
<p>Crea tu cuenta y obtén tu Suite exclusiva en New Jersey al instante.</p>
|
||
</div>
|
||
<div class="how-step">
|
||
<div class="how-num">2</div>
|
||
<h4>Compra en EE.UU.</h4>
|
||
<p>Usa tu dirección Suite en cualquier tienda online como Amazon, eBay o Walmart.</p>
|
||
</div>
|
||
<div class="how-step">
|
||
<div class="how-num">3</div>
|
||
<h4>Recibimos en NJ</h4>
|
||
<p>Tu paquete llega a nuestra bodega. Lo verificamos, fotografiamos y preparamos.</p>
|
||
</div>
|
||
<div class="how-step">
|
||
<div class="how-num">4</div>
|
||
<h4>Te llega a Ecuador</h4>
|
||
<p>Enviamos con declaración SENAE incluida. Sigues todo con tu Tracking ID.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────── CALCULADORA ─────────────────── -->
|
||
<section class="calc-section" id="calculadora">
|
||
<div class="container">
|
||
<div class="text-center">
|
||
<div class="section-tag">Calculadora de Envío</div>
|
||
<h2 class="section-title">Calcula tu costo ahora mismo</h2>
|
||
<p class="section-sub">Sin registro. Ingresa el peso y valor de tu producto y obtén el desglose completo con impuestos SENAE.</p>
|
||
</div>
|
||
<div class="calc-wrapper">
|
||
<div class="calc-box">
|
||
<h3>📊 Datos de tu envío</h3>
|
||
<div class="form-group">
|
||
<label>Peso del producto (lbs)</label>
|
||
<input type="number" id="c-weight" placeholder="Ej: 2.5" min="0" step="0.1" />
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Largo (cm)</label>
|
||
<input type="number" id="c-largo" placeholder="Ej: 30" min="0" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Ancho (cm)</label>
|
||
<input type="number" id="c-ancho" placeholder="Ej: 20" min="0" />
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Alto (cm)</label>
|
||
<input type="number" id="c-alto" placeholder="Ej: 15" min="0" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Valor del producto ($USD)</label>
|
||
<input type="number" id="c-value" placeholder="Ej: 150" min="0" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Categoría del producto</label>
|
||
<select id="c-cat">
|
||
<option value="4x4">4x4 — Hasta $400, hasta 4 kg (sin arancel)</option>
|
||
<option value="B">Categoría B — Bienes de consumo general (10%)</option>
|
||
<option value="C">Categoría C — Textiles, calzado, hogar (20%)</option>
|
||
<option value="D">Categoría D — Electrónicos, telecomunicaciones (10%)</option>
|
||
</select>
|
||
</div>
|
||
<button class="calc-btn" onclick="calcularEnvio()">Calcular costo total →</button>
|
||
|
||
<div class="senae-table" style="margin-top:28px;">
|
||
<h4>Categorías SENAE</h4>
|
||
<div class="senae-row sr-4x4">
|
||
<span class="senae-badge bg-green">4x4</span>
|
||
<span class="senae-desc">Régimen simplificado: hasta 4 envíos/año, máx. $400 y 4 kg. <strong>Sin arancel.</strong></span>
|
||
</div>
|
||
<div class="senae-row sr-b">
|
||
<span class="senae-badge bg-blue">Cat. B</span>
|
||
<span class="senae-desc">Bienes de consumo general fuera del 4x4. Arancel 10% + FODINFA + IVA.</span>
|
||
</div>
|
||
<div class="senae-row sr-c">
|
||
<span class="senae-badge bg-orange">Cat. C</span>
|
||
<span class="senae-desc">Textiles, calzado, artículos del hogar. Arancel 20% + FODINFA + IVA.</span>
|
||
</div>
|
||
<div class="senae-row sr-d">
|
||
<span class="senae-badge bg-purple">Cat. D</span>
|
||
<span class="senae-desc">Electrónicos y telecomunicaciones. Arancel 0–15% + puede requerir INEN.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="calc-result">
|
||
<h3>💰 Desglose de costos</h3>
|
||
<div class="result-row">
|
||
<span class="label">Peso a cobrar</span>
|
||
<span class="value" id="r-peso">— lbs</span>
|
||
</div>
|
||
<div class="result-row">
|
||
<span class="label">Costo de flete</span>
|
||
<span class="value" id="r-flete">$0.00</span>
|
||
</div>
|
||
<div class="result-row">
|
||
<span class="label">Seguro (2%)</span>
|
||
<span class="value" id="r-seguro">$0.00</span>
|
||
</div>
|
||
<div class="result-row">
|
||
<span class="label">FODINFA (0.5%)</span>
|
||
<span class="value" id="r-fodinfa">$0.00</span>
|
||
</div>
|
||
<div class="result-row">
|
||
<span class="label">Arancel</span>
|
||
<span class="value" id="r-arancel">$0.00</span>
|
||
</div>
|
||
<div class="result-row">
|
||
<span class="label">IVA (15%)</span>
|
||
<span class="value" id="r-iva">$0.00</span>
|
||
</div>
|
||
<div class="result-total">
|
||
<span>TOTAL ESTIMADO</span>
|
||
<span id="r-total">$0.00</span>
|
||
</div>
|
||
<p style="margin-top:16px; font-size:.78rem; color:var(--gray-500); line-height:1.6;">
|
||
* Estimado referencial. El costo final se confirma cuando el paquete es pesado en bodega. Tarifa de flete: $3.50/lb.
|
||
</p>
|
||
<div style="margin-top:20px;">
|
||
<a href="registro.html" class="btn btn-primary" style="width:100%;justify-content:center; display:flex;">Abrir casillero y enviar este producto →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────── TRACKING ─────────────────── -->
|
||
<section class="tracking-section" id="tracking">
|
||
<div class="container">
|
||
<div class="tracking-inner">
|
||
<div class="tracking-form-box">
|
||
<h3>🔍 Rastrea tu paquete</h3>
|
||
<p>Ingresa tu Tracking ID para ver el estado en tiempo real. No necesitas iniciar sesión.</p>
|
||
<div class="tracking-input-wrap">
|
||
<input type="text" id="tracking-input" placeholder="Ej: EC-20260506-082341" />
|
||
<button onclick="buscarTracking()">Rastrear</button>
|
||
</div>
|
||
<div class="tracking-result" id="tracking-result">
|
||
<p style="font-size:.82rem; font-weight:600; color:var(--gray-700); margin-bottom:16px; margin-top: 16px;">
|
||
📦 EC-20260506-082341 — <span style="color:var(--primary);">En tránsito hacia Ecuador</span>
|
||
</p>
|
||
<div class="status-timeline">
|
||
<div class="status-item">
|
||
<div class="status-line">
|
||
<div class="status-dot done"></div>
|
||
<div class="status-connector done"></div>
|
||
</div>
|
||
<div class="status-content">
|
||
<strong>✅ Registrado</strong>
|
||
<span>05 may 2026, 09:14 AM ECT</span>
|
||
</div>
|
||
</div>
|
||
<div class="status-item">
|
||
<div class="status-line">
|
||
<div class="status-dot done"></div>
|
||
<div class="status-connector done"></div>
|
||
</div>
|
||
<div class="status-content">
|
||
<strong>✅ Recibido en bodega NJ</strong>
|
||
<span>06 may 2026, 11:30 AM EST</span>
|
||
</div>
|
||
</div>
|
||
<div class="status-item">
|
||
<div class="status-line">
|
||
<div class="status-dot done"></div>
|
||
<div class="status-connector done"></div>
|
||
</div>
|
||
<div class="status-content">
|
||
<strong>✅ Verificado — 2.3 lbs confirmadas</strong>
|
||
<span>06 may 2026, 02:15 PM EST</span>
|
||
</div>
|
||
</div>
|
||
<div class="status-item">
|
||
<div class="status-line">
|
||
<div class="status-dot active"></div>
|
||
<div class="status-connector"></div>
|
||
</div>
|
||
<div class="status-content">
|
||
<strong style="color:var(--primary);">🔵 En tránsito hacia Ecuador</strong>
|
||
<span>06 may 2026, 06:00 PM EST</span>
|
||
</div>
|
||
</div>
|
||
<div class="status-item">
|
||
<div class="status-line">
|
||
<div class="status-dot"></div>
|
||
<div class="status-connector"></div>
|
||
</div>
|
||
<div class="status-content">
|
||
<strong style="color:var(--gray-400);">⏳ En Aduana Ecuador</strong>
|
||
<span>Pendiente</span>
|
||
</div>
|
||
</div>
|
||
<div class="status-item">
|
||
<div class="status-line">
|
||
<div class="status-dot"></div>
|
||
</div>
|
||
<div class="status-content">
|
||
<strong style="color:var(--gray-400);">⏳ Entregado</strong>
|
||
<span>Pendiente</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tracking-visual">
|
||
<div class="section-tag">Tracking en Tiempo Real</div>
|
||
<h3 class="section-title">Sigue tu paquete en cada paso</h3>
|
||
<p class="section-sub">Cada envío recibe un ID de Tracking único. Recibe notificaciones automáticas en cada cambio de estado.</p>
|
||
<div class="states-grid" style="margin-top:28px;">
|
||
<div class="state-chip"><div class="dot" style="background:#6B7280;"></div> Registrado</div>
|
||
<div class="state-chip"><div class="dot" style="background:#F59E0B;"></div> En tránsito a bodega</div>
|
||
<div class="state-chip"><div class="dot" style="background:#3B82F6;"></div> Recibido en NJ</div>
|
||
<div class="state-chip"><div class="dot" style="background:#8B5CF6;"></div> En verificación</div>
|
||
<div class="state-chip"><div class="dot" style="background:#10B981;"></div> Verificado</div>
|
||
<div class="state-chip"><div class="dot" style="background:#0057FF;"></div> Declaración SENAE</div>
|
||
<div class="state-chip"><div class="dot" style="background:#F97316;"></div> En tránsito a Ecuador</div>
|
||
<div class="state-chip"><div class="dot" style="background:#EF4444;"></div> En Aduana Ecuador</div>
|
||
<div class="state-chip"><div class="dot" style="background:#84CC16;"></div> Listo para entrega</div>
|
||
<div class="state-chip"><div class="dot" style="background:#10B981;"></div> Entregado ✓</div>
|
||
</div>
|
||
<p style="font-size:.82rem; color:var(--gray-500); margin-top:20px;">
|
||
Notificaciones automáticas por <strong>correo</strong>, <strong>SMS</strong> y <strong>WhatsApp</strong> en cada cambio de estado.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────── PRE-ALERTA ─────────────────── -->
|
||
<section class="prealerta-section" id="prealerta">
|
||
<div class="container">
|
||
<div class="prealerta-inner">
|
||
<div>
|
||
<div class="section-tag">Pre-alerta de Paquetes</div>
|
||
<h2 class="section-title">Avísanos antes de que llegue tu paquete</h2>
|
||
<p class="section-sub">Carga tu factura y el tracking del vendedor. La bodega se prepara para recibirlo y agilizamos el proceso.</p>
|
||
<div class="prealerta-items">
|
||
<div class="prealerta-item">
|
||
<div class="pi-icon">📄</div>
|
||
<div class="pi-text">
|
||
<strong>Sube tu factura comercial</strong>
|
||
<span>Factura de Amazon, eBay u otras tiendas en PDF o imagen</span>
|
||
</div>
|
||
</div>
|
||
<div class="prealerta-item">
|
||
<div class="pi-icon">🔗</div>
|
||
<div class="pi-text">
|
||
<strong>Ingresa el tracking del vendedor</strong>
|
||
<span>El número de guía que te dio la tienda (UPS, FedEx, USPS)</span>
|
||
</div>
|
||
</div>
|
||
<div class="prealerta-item">
|
||
<div class="pi-icon">⚡</div>
|
||
<div class="pi-text">
|
||
<strong>Proceso más rápido en bodega</strong>
|
||
<span>El operador ya sabe que tu paquete viene y lo asigna a tu Suite automáticamente</span>
|
||
</div>
|
||
</div>
|
||
<div class="prealerta-item">
|
||
<div class="pi-icon">📸</div>
|
||
<div class="pi-text">
|
||
<strong>Fotos de tu paquete</strong>
|
||
<span>Cuando llega a la bodega, recibirás fotos del estado del paquete</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="prealerta-form">
|
||
<h3>📬 Registrar Pre-alerta</h3>
|
||
<div class="form-group">
|
||
<label>Tienda / Plataforma</label>
|
||
<select>
|
||
<option>Amazon</option>
|
||
<option>eBay</option>
|
||
<option>Walmart</option>
|
||
<option>Shein</option>
|
||
<option>Otra tienda</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Tracking del vendedor (número de guía)</label>
|
||
<input type="text" placeholder="Ej: 1Z999AA10123456784" />
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Valor declarado ($USD)</label>
|
||
<input type="number" placeholder="Ej: 120" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Peso estimado (lbs)</label>
|
||
<input type="number" placeholder="Ej: 1.5" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Descripción del producto</label>
|
||
<input type="text" placeholder="Ej: Auriculares Bluetooth Sony" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Factura comercial (opcional pero recomendado)</label>
|
||
<div class="upload-box" onclick="document.getElementById('factura-upload').click()">
|
||
<span>📎</span>
|
||
<p>Haz clic para subir PDF o imagen de la factura</p>
|
||
<input type="file" id="factura-upload" style="display:none;" accept=".pdf,image/*" />
|
||
</div>
|
||
</div>
|
||
<button class="calc-btn" onclick="submitPrealertaLanding()">Registrar pre-alerta →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────── LEGALIDAD / NOSOTROS ─────────────────── -->
|
||
<section class="legal-section" id="nosotros">
|
||
<div class="container">
|
||
<div class="text-center">
|
||
<div class="section-tag">Confianza y Legalidad</div>
|
||
<h2 class="section-title">Empresas legalmente constituidas<br />en Ecuador y EE.UU.</h2>
|
||
<p class="section-sub">Tu mercancía está en manos de un operador reconocido, con representación legal en ambos países.</p>
|
||
</div>
|
||
<div class="companies-banner">
|
||
<div class="company-card">
|
||
<div class="company-flag">🇪🇨</div>
|
||
<div class="company-info">
|
||
<h4>Moraworld Imports S.A.S.</h4>
|
||
<p>Empresa constituida bajo las leyes de Ecuador. Representante legal en Cuenca. RUC registrado, permisos aduaneros activos ante la SENAE.</p>
|
||
<span class="tag">RUC Ecuador · SENAE · Cuenca</span>
|
||
</div>
|
||
</div>
|
||
<div class="company-card">
|
||
<div class="company-flag">🇺🇸</div>
|
||
<div class="company-info">
|
||
<h4>Mora Global Import LLC</h4>
|
||
<p>LLC registrada en el estado de New Jersey, EE.UU. Bodega operativa en 150 N Day St, City of Orange, NJ 07050.</p>
|
||
<span class="tag">LLC · New Jersey · NJ 07050</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="legal-grid" style="margin-top:40px;">
|
||
<div class="legal-card">
|
||
<div class="legal-icon">🏛️</div>
|
||
<h4>Constituida legalmente</h4>
|
||
<p>Empresa registrada en Ecuador (S.A.S.) y EE.UU. (LLC) con documentación vigente y representantes visibles en ambos países.</p>
|
||
<span class="legal-badge">LEGALIDAD VERIFICADA</span>
|
||
</div>
|
||
<div class="legal-card">
|
||
<div class="legal-icon">🛃</div>
|
||
<h4>Certificación SENAE</h4>
|
||
<p>Operamos con los permisos aduaneros requeridos por la SENAE. Emitimos Declaraciones Simplificadas (DSI) y Formales (DAI).</p>
|
||
<span class="legal-badge">SENAE AUTORIZADO</span>
|
||
</div>
|
||
<div class="legal-card">
|
||
<div class="legal-icon">🏷️</div>
|
||
<h4>Normas INEN</h4>
|
||
<p>Asesoría en cumplimiento de normas INEN para productos regulados: calzado, textiles, electrónicos, alimentos.</p>
|
||
<span class="legal-badge">CUMPLIMIENTO INEN</span>
|
||
</div>
|
||
<div class="legal-card">
|
||
<div class="legal-icon">🔒</div>
|
||
<h4>Seguridad ISO 27001</h4>
|
||
<p>Sistema desarrollado bajo el estándar ISO/IEC 27001. Tus datos y los de tus paquetes están protegidos con cifrado AES-256 y MFA.</p>
|
||
<span class="legal-badge">ISO/IEC 27001</span>
|
||
</div>
|
||
<div class="legal-card">
|
||
<div class="legal-icon">⚖️</div>
|
||
<h4>Protección de datos</h4>
|
||
<p>Cumplimos con la Ley Orgánica de Protección de Datos Personales (LOPDP) de Ecuador y la normativa aplicable de New Jersey.</p>
|
||
<span class="legal-badge">LOPDP ECUADOR</span>
|
||
</div>
|
||
<div class="legal-card">
|
||
<div class="legal-icon">📋</div>
|
||
<h4>Transparencia tributaria</h4>
|
||
<p>Calculamos y desglosamos automáticamente FODINFA, IVA y aranceles según la categoría SENAE de tu producto. Sin sorpresas.</p>
|
||
<span class="legal-badge">TRANSPARENCIA TOTAL</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────── CARGA PESADA / COTIZACIÓN ─────────────────── -->
|
||
<section class="cargo-section" id="cotizacion">
|
||
<div class="container">
|
||
<div class="cargo-inner">
|
||
<div>
|
||
<div class="section-tag">Importación Mayorista</div>
|
||
<h2 class="section-title">¿Importas al por mayor?<br />Carga Pesada y Pallets</h2>
|
||
<p class="section-sub">Desde 1,000 pares de zapatos hasta contenedores completos. Gestionamos toda la logística con cumplimiento INEN.</p>
|
||
<div class="cargo-features">
|
||
<div class="cargo-feat">
|
||
<div class="cf-icon">🚢</div>
|
||
<div class="cf-text">
|
||
<strong>Carga en pallets y contenedores</strong>
|
||
<span>Coordinamos el despacho desde cualquier ciudad de EE.UU. hacia Ecuador</span>
|
||
</div>
|
||
</div>
|
||
<div class="cargo-feat">
|
||
<div class="cf-icon">🏷️</div>
|
||
<div class="cf-text">
|
||
<strong>Certificación INEN incluida</strong>
|
||
<span>Calzado, textiles, electrónicos: validamos el registro de conformidad antes de importar</span>
|
||
</div>
|
||
</div>
|
||
<div class="cargo-feat">
|
||
<div class="cf-icon">📜</div>
|
||
<div class="cf-text">
|
||
<strong>Declaración de importación formal (DAI)</strong>
|
||
<span>Tramitamos la documentación aduanera completa ante la SENAE</span>
|
||
</div>
|
||
</div>
|
||
<div class="cargo-feat">
|
||
<div class="cf-icon">💬</div>
|
||
<div class="cf-text">
|
||
<strong>Asesoría personalizada en WhatsApp</strong>
|
||
<span>Un agente especializado te acompaña en todo el proceso de importación</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="quote-form">
|
||
<h3>📋 Solicitar Cotización Especial</h3>
|
||
<div class="form-group">
|
||
<label>Nombre completo / Empresa</label>
|
||
<input type="text" placeholder="Ej: Distribuidora Calzado S.A." />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Correo electrónico</label>
|
||
<input type="email" placeholder="correo@empresa.com" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Tipo de mercancía</label>
|
||
<select>
|
||
<option>Calzado (requiere INEN)</option>
|
||
<option>Textiles / Ropa</option>
|
||
<option>Electrónicos (requiere INEN)</option>
|
||
<option>Alimentos / Suplementos</option>
|
||
<option>Muebles / Hogar</option>
|
||
<option>Maquinaria / Equipos</option>
|
||
<option>Otro</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Peso estimado (lbs)</label>
|
||
<input type="number" placeholder="Ej: 5000" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Número de pallets</label>
|
||
<input type="number" placeholder="Ej: 4" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Valor comercial total ($USD)</label>
|
||
<input type="number" placeholder="Ej: 15000" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Ciudad de origen en EE.UU.</label>
|
||
<input type="text" placeholder="Ej: New York, NY" />
|
||
</div>
|
||
<button class="calc-btn">Solicitar cotización →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────── CONTACTO / WHATSAPP ─────────────────── -->
|
||
<section class="contact-section" id="contacto">
|
||
<div class="container">
|
||
<div class="text-center">
|
||
<div class="section-tag">Contacto Directo</div>
|
||
<h2 class="section-title">Habla con nosotros en WhatsApp</h2>
|
||
<p class="section-sub">Tenemos representantes en New Jersey y en Cuenca, Ecuador listos para ayudarte.</p>
|
||
</div>
|
||
<div class="contact-grid">
|
||
<div class="contact-card">
|
||
<div class="wa-icon">🇺🇸</div>
|
||
<h3>New Jersey — Bodega & Operaciones</h3>
|
||
<p>Consultas sobre estado de paquetes, recepciones, despachos y logística desde EE.UU.</p>
|
||
<a href="https://wa.me/19733001234" target="_blank" rel="noopener" class="btn-wa">
|
||
<span>💬</span> WhatsApp New Jersey
|
||
</a>
|
||
</div>
|
||
<div class="contact-card">
|
||
<div class="wa-icon">🇪🇨</div>
|
||
<h3>Cuenca, Ecuador — Representación Legal</h3>
|
||
<p>Consultas sobre aduana, documentación, importaciones y normativas ecuatorianas.</p>
|
||
<a href="https://wa.me/593987654321" target="_blank" rel="noopener" class="btn-wa">
|
||
<span>💬</span> WhatsApp Cuenca
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────── FAQ ─────────────────── -->
|
||
<section class="faq-section" id="faq">
|
||
<div class="container">
|
||
<div class="text-center">
|
||
<div class="section-tag">FAQ</div>
|
||
<h2 class="section-title">Preguntas frecuentes</h2>
|
||
</div>
|
||
<div class="faq-list">
|
||
<div class="faq-item">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿Cómo obtengo mi dirección de casillero?
|
||
<span class="arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">
|
||
<p>Al crear tu cuenta en Moraworld Imports, el sistema te asigna automáticamente una Suite personalizada en nuestra bodega: <strong>150 N Day St, Suite EC-XXXXX, City of Orange, NJ 07050</strong>. Solo debes usar esa dirección al hacer tus compras en línea.</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿Cuánto cuesta el envío a Ecuador?
|
||
<span class="arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">
|
||
<p>El costo depende del peso del paquete y la categoría del producto según el SENAE. Usa nuestra calculadora en línea para obtener un estimado. La tarifa base es de <strong>$3.50 por libra</strong>, más el seguro (2%) y los impuestos correspondientes (FODINFA 0.5%, IVA 15% y arancel según categoría).</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿Qué es el régimen 4x4 de la SENAE?
|
||
<span class="arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">
|
||
<p>El régimen 4x4 es un régimen simplificado de importación que permite importar hasta <strong>4 paquetes por año</strong>, con un máximo de <strong>$400 USD y 4 kg por envío</strong>, sin pagar arancel. Si tu paquete supera esos límites, se aplica importación formal con la categoría correspondiente (B, C o D).</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿Puedo importar calzado o ropa al por mayor?
|
||
<span class="arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">
|
||
<p>Sí, ofrecemos el servicio de <strong>Carga Pesada / Pallets (B2B)</strong> para importadores mayoristas. Para calzado y textiles es necesario cumplir con las normas <strong>INEN</strong>. Contáctanos para una cotización especial y te asesoramos en la documentación necesaria.</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿Cómo sigo el estado de mi paquete?
|
||
<span class="arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">
|
||
<p>Cada paquete recibe un <strong>Tracking ID único</strong> (formato EC-YYYYMMDD-XXXXXX). Puedes rastrearlo en la sección de tracking de esta página sin necesidad de iniciar sesión. También recibirás notificaciones automáticas por <strong>correo, SMS y WhatsApp</strong> en cada cambio de estado.</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿Están registrados y son legales?
|
||
<span class="arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">
|
||
<p>Sí. Operamos bajo dos empresas constituidas legalmente: <strong>Moraworld Imports S.A.S.</strong> (registrada en Ecuador con RUC y permisos SENAE vigentes, representante en Cuenca) y <strong>Mora Global Import LLC</strong> (registrada en New Jersey, EE.UU., con operaciones en 150 N Day St, City of Orange, NJ 07050).</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────── CTA FINAL ─────────────────── -->
|
||
<section class="cta-section">
|
||
<div class="container">
|
||
<h2>¿Listo para comprar en EE.UU.<br />y recibir en Ecuador?</h2>
|
||
<p>Regístrate gratis y obtén tu Suite en New Jersey en menos de 2 minutos.</p>
|
||
<a href="registro.html" class="btn btn-white">Abrir mi casillero gratis →</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────── FOOTER ─────────────────── -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<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, City of Orange, NJ 07050<br/>
|
||
📍 Cuenca, Ecuador
|
||
</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Servicios</h4>
|
||
<ul>
|
||
<li><a href="#servicios">Casillero Personal</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>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Empresa</h4>
|
||
<ul>
|
||
<li><a href="#nosotros">Quiénes somos</a></li>
|
||
<li><a href="#nosotros">Legalidad</a></li>
|
||
<li><a href="#faq">Preguntas frecuentes</a></li>
|
||
<li><a href="#contacto">Contacto</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Legal</h4>
|
||
<ul>
|
||
<li><a href="#">Política de privacidad</a></li>
|
||
<li><a href="#">Términos de uso</a></li>
|
||
<li><a href="#">Política de cookies</a></li>
|
||
<li><a href="#">LOPDP Ecuador</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2026 Moraworld Imports S.A.S. / Mora Global Import LLC. Todos los derechos reservados.</p>
|
||
<div class="footer-badges">
|
||
<span class="f-badge">ISO 27001</span>
|
||
<span class="f-badge">SENAE</span>
|
||
<span class="f-badge">INEN</span>
|
||
<span class="f-badge">LOPDP</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ─────────────────── WHATSAPP FLOTANTE ─────────────────── -->
|
||
<div class="wa-float" id="wa-float">
|
||
<div class="wa-float-menu">
|
||
<a class="wa-option" href="https://wa.me/19733001234" target="_blank" rel="noopener">
|
||
<span class="flag">🇺🇸</span>
|
||
<div class="info">
|
||
<strong>New Jersey — Bodega</strong>
|
||
<span>Operaciones y paquetes</span>
|
||
</div>
|
||
</a>
|
||
<a class="wa-option" href="https://wa.me/593987654321" target="_blank" rel="noopener">
|
||
<span class="flag">🇪🇨</span>
|
||
<div class="info">
|
||
<strong>Cuenca — Ecuador</strong>
|
||
<span>Rep. legal y aduanas</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<button class="wa-float-btn" onclick="toggleWa()" aria-label="Abrir WhatsApp">💬</button>
|
||
</div>
|
||
|
||
<!-- ─────────────────── SCRIPTS ─────────────────── -->
|
||
<script>
|
||
/* WhatsApp flotante */
|
||
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 */
|
||
function toggleFaq(btn){
|
||
const item = btn.closest('.faq-item');
|
||
const isOpen = item.classList.contains('open');
|
||
document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
|
||
if(!isOpen) item.classList.add('open');
|
||
}
|
||
|
||
/* Calculadora de envío */
|
||
function calcularEnvio(){
|
||
const weight = parseFloat(document.getElementById('c-weight').value) || 0;
|
||
const largo = parseFloat(document.getElementById('c-largo').value) || 0;
|
||
const ancho = parseFloat(document.getElementById('c-ancho').value) || 0;
|
||
const alto = parseFloat(document.getElementById('c-alto').value) || 0;
|
||
const valor = parseFloat(document.getElementById('c-value').value) || 0;
|
||
const cat = document.getElementById('c-cat').value;
|
||
|
||
const volWeight = (largo * ancho * alto) / 139;
|
||
const pesoFinal = Math.max(weight, volWeight);
|
||
|
||
const aranceles = { '4x4': 0, 'B': 0.10, 'C': 0.20, 'D': 0.10 };
|
||
const flete = pesoFinal * 3.50;
|
||
const seguro = valor * 0.02;
|
||
const fodinfa = valor * 0.005;
|
||
const arancel = valor * (aranceles[cat] || 0);
|
||
const iva = (valor + fodinfa + arancel) * 0.15;
|
||
const total = flete + seguro + fodinfa + arancel + iva;
|
||
|
||
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);
|
||
}
|
||
|
||
/* Tracking demo */
|
||
function buscarTracking(){
|
||
const val = document.getElementById('tracking-input').value.trim();
|
||
if(!val){ alert('Ingresa un Tracking ID válido'); return; }
|
||
document.getElementById('tracking-result').classList.add('show');
|
||
document.getElementById('tracking-result').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||
}
|
||
|
||
/* 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>
|
||
</html>
|