consultoria-as
260bdef388
Each race checkpoint now includes specific feature deliverables: - Mes 1: CFDI 4.0, VIN decoder, carrito multi-bodega - Mes 3: Chatbot IA, WhatsApp API, SaaS refaccionarias - Mes 6: Kanban, BNPL/APLAZO, programa de lealtad - Mes 9: Sync ERP, flotillas, alianza nacional - Mes 12: ML/Amazon, IA por voz, API pública - Mes 15: PWA, escala Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2886 lines
111 KiB
HTML
2886 lines
111 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Nexus Autoparts — Friends & Family Round 2026</title>
|
||
<meta name="description" content="Nexus Autoparts — Marketplace inteligente de autopartes. Ronda Friends & Family.">
|
||
<meta property="og:title" content="Nexus Autoparts — Pitch Deck F&F 2026">
|
||
<meta property="og:description" content="Tu conexión directa con las partes que necesitas. Ronda Friends & Family $30K USD.">
|
||
<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=Sora:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* ═══════════════════════════════════════════════
|
||
NEXUS AUTOPARTS — PITCH DECK F&F 2026
|
||
Aesthetic: Developer-tool / SaaS Dashboard
|
||
═══════════════════════════════════════════════ */
|
||
|
||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
:root {
|
||
--bg-deep: #06080D;
|
||
--bg-primary: #0D1117;
|
||
--bg-surface: #161B22;
|
||
--bg-elevated: #1C2333;
|
||
--bg-hover: #21262D;
|
||
--border: #30363D;
|
||
--border-bright: #484F58;
|
||
--accent: #FF6B35;
|
||
--accent-hover: #FF8555;
|
||
--accent-glow: rgba(255, 107, 53, 0.25);
|
||
--accent-subtle: rgba(255, 107, 53, 0.08);
|
||
--cyan: #00D4FF;
|
||
--cyan-glow: rgba(0, 212, 255, 0.2);
|
||
--cyan-subtle: rgba(0, 212, 255, 0.08);
|
||
--green: #3FB950;
|
||
--green-subtle: rgba(63, 185, 80, 0.12);
|
||
--purple: #A78BFA;
|
||
--purple-subtle: rgba(167, 139, 250, 0.1);
|
||
--yellow: #F0B429;
|
||
--yellow-subtle: rgba(240, 180, 41, 0.12);
|
||
--red: #F85149;
|
||
--red-subtle: rgba(248, 81, 73, 0.12);
|
||
--text-primary: #E6EDF3;
|
||
--text-secondary: #8B949E;
|
||
--text-muted: #9CA3AF;
|
||
--font-display: 'Sora', sans-serif;
|
||
--font-body: 'Plus Jakarta Sans', sans-serif;
|
||
--font-mono: 'JetBrains Mono', monospace;
|
||
--radius: 12px;
|
||
--radius-lg: 16px;
|
||
}
|
||
|
||
html {
|
||
scroll-snap-type: y mandatory;
|
||
scroll-behavior: smooth;
|
||
overflow-y: scroll;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-body);
|
||
background: var(--bg-deep);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ── Dot Grid Background ── */
|
||
body::before {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
background-image: radial-gradient(circle, var(--border) 0.8px, transparent 0.8px);
|
||
background-size: 28px 28px;
|
||
opacity: 0.4;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* ── Noise Texture Overlay ── */
|
||
body::after {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
opacity: 0.015;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
/* ── Slide Container ── */
|
||
.slide {
|
||
min-height: 100vh;
|
||
width: 100%;
|
||
scroll-snap-align: start;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 60px 48px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.slide-inner {
|
||
max-width: 1100px;
|
||
width: 100%;
|
||
z-index: 2;
|
||
position: relative;
|
||
}
|
||
|
||
/* ── Ambient Glow ── */
|
||
.glow {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(140px);
|
||
opacity: 0.1;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
.glow--orange { background: var(--accent); width: 500px; height: 500px; }
|
||
.glow--cyan { background: var(--cyan); width: 400px; height: 400px; }
|
||
|
||
/* ── Typography ── */
|
||
.tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--cyan);
|
||
background: var(--cyan-subtle);
|
||
border: 1px solid rgba(0, 212, 255, 0.15);
|
||
padding: 5px 14px;
|
||
border-radius: 20px;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.tag::before {
|
||
content: '//';
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.title {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(2rem, 4vw, 3rem);
|
||
font-weight: 800;
|
||
line-height: 1.15;
|
||
margin-bottom: 20px;
|
||
letter-spacing: -0.03em;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.title .hl {
|
||
background: linear-gradient(135deg, var(--accent), #FF8C42);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.title .hl-cyan {
|
||
background: linear-gradient(135deg, var(--cyan), #7DD3FC);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.26rem;
|
||
color: var(--text-secondary);
|
||
max-width: 100%;
|
||
line-height: 1.75;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
/* ── Card Base ── */
|
||
.card {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 24px;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.card:hover {
|
||
border-color: var(--border-bright);
|
||
background: var(--bg-elevated);
|
||
}
|
||
|
||
.card--glow:hover {
|
||
border-color: transparent;
|
||
background: linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
|
||
linear-gradient(135deg, var(--accent), var(--cyan)) border-box;
|
||
border: 1px solid transparent;
|
||
box-shadow: 0 0 30px rgba(255, 107, 53, 0.06), 0 0 60px rgba(0, 212, 255, 0.04);
|
||
}
|
||
|
||
/* ── Scroll Animations ── */
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(28px);
|
||
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
|
||
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
.reveal.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
.reveal-d1 { transition-delay: 0.08s; }
|
||
.reveal-d2 { transition-delay: 0.16s; }
|
||
.reveal-d3 { transition-delay: 0.24s; }
|
||
.reveal-d4 { transition-delay: 0.32s; }
|
||
.reveal-d5 { transition-delay: 0.40s; }
|
||
|
||
/* ── Navigation ── */
|
||
.nav {
|
||
position: fixed;
|
||
bottom: 24px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
z-index: 100;
|
||
background: rgba(13, 17, 23, 0.92);
|
||
backdrop-filter: blur(16px);
|
||
-webkit-backdrop-filter: blur(16px);
|
||
padding: 8px 14px;
|
||
border-radius: 40px;
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.nav-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-surface);
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.nav-btn:hover {
|
||
border-color: var(--accent);
|
||
color: var(--accent);
|
||
background: var(--accent-subtle);
|
||
}
|
||
|
||
.nav-dots { display: flex; gap: 5px; }
|
||
|
||
.nav-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 3px;
|
||
background: var(--border);
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
border: none;
|
||
}
|
||
.nav-dot.active {
|
||
background: var(--accent);
|
||
width: 20px;
|
||
box-shadow: 0 0 10px var(--accent-glow);
|
||
}
|
||
|
||
.nav-counter {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.7rem;
|
||
color: var(--text-muted);
|
||
min-width: 42px;
|
||
text-align: center;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* ── Code Block ── */
|
||
.code-block {
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 20px 24px;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.82rem;
|
||
line-height: 1.8;
|
||
overflow-x: auto;
|
||
position: relative;
|
||
}
|
||
|
||
.code-block .code-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 14px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.code-block .dot { width: 10px; height: 10px; border-radius: 50%; }
|
||
.code-block .dot--red { background: #FF5F56; }
|
||
.code-block .dot--yellow { background: #FFBD2E; }
|
||
.code-block .dot--green { background: #27C93F; }
|
||
|
||
.code-block .code-filename {
|
||
font-size: 0.7rem;
|
||
color: var(--text-muted);
|
||
margin-left: auto;
|
||
}
|
||
|
||
.code-block .kw { color: var(--purple); }
|
||
.code-block .fn { color: #7DD3FC; }
|
||
.code-block .str { color: var(--green); }
|
||
.code-block .num { color: var(--accent); }
|
||
.code-block .cm { color: var(--text-muted); font-style: italic; }
|
||
.code-block .op { color: var(--text-secondary); }
|
||
.code-block .prop { color: #F0B429; }
|
||
|
||
/* ── Stat Cards ── */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.stat { text-align: center; padding: 22px 16px; }
|
||
|
||
.stat-value {
|
||
font-family: var(--font-mono);
|
||
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.94rem;
|
||
color: var(--text-secondary);
|
||
margin-top: 6px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ── Problem Cards ── */
|
||
.problem-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
|
||
|
||
.problem-card {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: flex-start;
|
||
padding: 18px 22px;
|
||
}
|
||
|
||
.problem-card .p-icon {
|
||
flex-shrink: 0;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 8px;
|
||
background: var(--red-subtle);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1rem;
|
||
color: var(--red);
|
||
font-family: var(--font-mono);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.problem-card .p-text {
|
||
font-size: 1.08rem;
|
||
line-height: 1.6;
|
||
color: var(--text-secondary);
|
||
}
|
||
.problem-card .p-text strong { color: var(--text-primary); }
|
||
|
||
/* ── Solution Flow ── */
|
||
.flow {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr auto 1fr;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.flow-node {
|
||
text-align: center;
|
||
padding: 26px 18px;
|
||
}
|
||
|
||
.flow-node .node-icon { font-size: 1.8rem; margin-bottom: 10px; }
|
||
.flow-node h4 { font-family: var(--font-display); font-size: 1.14rem; font-weight: 700; margin-bottom: 6px; }
|
||
.flow-node p { font-size: 0.94rem; color: var(--text-secondary); }
|
||
|
||
.flow-node--nexus {
|
||
border-color: transparent !important;
|
||
background: linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
|
||
linear-gradient(135deg, var(--accent), var(--cyan)) border-box !important;
|
||
border: 1px solid transparent !important;
|
||
box-shadow: 0 0 40px rgba(255, 107, 53, 0.08), 0 0 80px rgba(0, 212, 255, 0.05);
|
||
}
|
||
|
||
.flow-arrow {
|
||
font-family: var(--font-mono);
|
||
font-size: 1.2rem;
|
||
color: var(--border-bright);
|
||
text-align: center;
|
||
}
|
||
|
||
/* ── Feature Cards ── */
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.feature-col-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.feature-col-label .dot-status {
|
||
width: 7px; height: 7px; border-radius: 50%;
|
||
}
|
||
|
||
.feature-list { display: flex; flex-direction: column; gap: 10px; }
|
||
|
||
.feature-item {
|
||
padding: 14px 18px;
|
||
}
|
||
.feature-item h4 { font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; margin-bottom: 4px; }
|
||
.feature-item p { font-size: 0.94rem; color: var(--text-secondary); line-height: 1.5; }
|
||
|
||
.feature-item--planned { border-color: rgba(0, 212, 255, 0.2); }
|
||
.feature-item--planned:hover { border-color: rgba(0, 212, 255, 0.4); }
|
||
|
||
/* ── Market TAM/SAM/SOM — Dashboard Gauges ── */
|
||
.market-dashboard {
|
||
margin-top: 32px;
|
||
}
|
||
|
||
|
||
/* Road line under gauges */
|
||
.gauges-road {
|
||
height: 3px;
|
||
background: repeating-linear-gradient(90deg, var(--accent) 0px, var(--accent) 20px, transparent 20px, transparent 34px);
|
||
opacity: 0.3;
|
||
border-radius: 2px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
/* Stats bar below */
|
||
.market-stats-bar {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 14px;
|
||
}
|
||
|
||
.ms-item {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 18px 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.ms-item .ms-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ms-item .ms-val {
|
||
font-family: var(--font-mono);
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.ms-item .ms-lbl {
|
||
font-size: 0.82rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.market-stats-bar { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* ── Revenue Table ── */
|
||
.pricing-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.pricing-card { padding: 22px; }
|
||
.pricing-card h4 {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.86rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 8px;
|
||
}
|
||
.pricing-card .price {
|
||
font-family: var(--font-mono);
|
||
font-size: 1.4rem;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
}
|
||
.pricing-card .price-note {
|
||
font-size: 0.9rem;
|
||
color: var(--text-muted);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.proj-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 8px;
|
||
}
|
||
.proj-table th, .proj-table td {
|
||
padding: 13px 16px;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 1.02rem;
|
||
}
|
||
.proj-table th {
|
||
font-family: var(--font-mono);
|
||
color: var(--text-muted);
|
||
font-weight: 600;
|
||
font-size: 0.82rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
.proj-table td { color: var(--text-secondary); }
|
||
.proj-table .arr {
|
||
font-family: var(--font-mono);
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
}
|
||
.margin-pill {
|
||
display: inline-block;
|
||
background: var(--green-subtle);
|
||
color: var(--green);
|
||
padding: 3px 12px;
|
||
border-radius: 20px;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ── Traction Grid ── */
|
||
.traction-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 14px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.traction-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 18px 20px;
|
||
}
|
||
|
||
.traction-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
background: var(--accent-subtle);
|
||
border: 1px solid rgba(255, 107, 53, 0.15);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.1rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.traction-value {
|
||
font-family: var(--font-mono);
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
line-height: 1.2;
|
||
}
|
||
.traction-label {
|
||
font-size: 0.9rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* ── Team ── */
|
||
.team-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.team-card {
|
||
text-align: center;
|
||
padding: 32px;
|
||
}
|
||
|
||
.team-avatar {
|
||
width: 72px;
|
||
height: 72px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--accent), var(--cyan));
|
||
margin: 0 auto 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: var(--font-display);
|
||
font-size: 1.6rem;
|
||
font-weight: 800;
|
||
color: white;
|
||
}
|
||
|
||
.team-card h3 { font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; margin-bottom: 4px; }
|
||
.team-card .role { font-family: var(--font-mono); font-size: 0.94rem; color: var(--cyan); font-weight: 600; margin-bottom: 12px; }
|
||
.team-card p { font-size: 0.98rem; color: var(--text-secondary); line-height: 1.6; }
|
||
|
||
/* ── Funds Donut ── */
|
||
.funds-layout {
|
||
display: flex;
|
||
gap: 40px;
|
||
align-items: center;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.donut-wrap { position: relative; flex-shrink: 0; }
|
||
.donut-center {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
text-align: center;
|
||
}
|
||
.donut-center .amount {
|
||
font-family: var(--font-mono);
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
.donut-center .label {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.65rem;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.funds-legend { flex: 1; display: flex; flex-direction: column; gap: 12px; }
|
||
.fund-row { display: flex; align-items: center; gap: 12px; }
|
||
.fund-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
|
||
.fund-info { flex: 1; }
|
||
.fund-name { font-size: 1.02rem; font-weight: 600; color: var(--text-primary); }
|
||
.fund-detail { font-size: 0.86rem; color: var(--text-secondary); }
|
||
.fund-amount { font-family: var(--font-mono); font-weight: 700; color: var(--accent); font-size: 1.02rem; white-space: nowrap; }
|
||
|
||
/* ── Roadmap ── */
|
||
.phases-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 14px;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.phase-card {
|
||
padding: 20px;
|
||
position: relative;
|
||
overflow: visible;
|
||
}
|
||
|
||
.phase-badge {
|
||
position: absolute;
|
||
top: -10px;
|
||
left: 14px;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.65rem;
|
||
font-weight: 700;
|
||
padding: 2px 10px;
|
||
border-radius: 20px;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.phase-card .phase-time {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.84rem;
|
||
color: var(--text-muted);
|
||
margin-top: 4px;
|
||
}
|
||
.phase-card h4 { font-family: var(--font-display); font-size: 1.14rem; margin: 8px 0 8px; font-weight: 700; }
|
||
.phase-card p { font-size: 0.94rem; color: var(--text-secondary); line-height: 1.55; }
|
||
.phase-card .phase-cost {
|
||
margin-top: 10px;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.86rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ── Competition ── */
|
||
.comp-layout {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.comp-col-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.comp-stack { display: flex; flex-direction: column; gap: 10px; }
|
||
|
||
.comp-item {
|
||
padding: 14px 18px;
|
||
}
|
||
.comp-item .comp-header { display: flex; justify-content: space-between; align-items: center; }
|
||
.comp-item .comp-badge {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.82rem;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-weight: 600;
|
||
}
|
||
.comp-item p { font-size: 0.94rem; color: var(--text-secondary); margin-top: 4px; }
|
||
|
||
/* ── Ask / Investment ── */
|
||
.ask-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: 16px;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.ask-card {
|
||
text-align: center;
|
||
padding: 24px;
|
||
}
|
||
.ask-card .ask-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.65rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.15em;
|
||
color: var(--text-muted);
|
||
font-weight: 700;
|
||
margin-bottom: 10px;
|
||
}
|
||
.ask-card .ask-value {
|
||
font-family: var(--font-mono);
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
.ask-card--hl {
|
||
border-color: var(--accent) !important;
|
||
background: linear-gradient(135deg, var(--accent-subtle), rgba(255, 69, 0, 0.03)) !important;
|
||
}
|
||
.ask-card--hl .ask-value { color: var(--accent); }
|
||
|
||
.ask-bottom {
|
||
margin-top: 28px;
|
||
padding: 26px;
|
||
text-align: center;
|
||
}
|
||
.ask-bottom p { color: var(--text-secondary); font-size: 1.08rem; line-height: 1.7; }
|
||
.ask-bottom strong { color: var(--accent); }
|
||
|
||
/* ── Contact ── */
|
||
.contact-center { text-align: center; }
|
||
.contact-divider {
|
||
width: 50px;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, var(--accent), var(--cyan));
|
||
border-radius: 2px;
|
||
margin: 20px auto;
|
||
}
|
||
.contact-info { margin-top: 20px; }
|
||
.contact-item { font-size: 1.14rem; color: var(--text-secondary); margin: 8px 0; }
|
||
.contact-item a { color: var(--cyan); text-decoration: none; font-family: var(--font-mono); font-size: 1.06rem; }
|
||
.contact-item a:hover { text-decoration: underline; }
|
||
.contact-tagline {
|
||
margin-top: 36px;
|
||
font-family: var(--font-display);
|
||
font-size: 1.38rem;
|
||
font-weight: 600;
|
||
font-style: italic;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* ── Cover ── */
|
||
.cover-logo {
|
||
width: 68px;
|
||
height: 68px;
|
||
border-radius: 16px;
|
||
background: linear-gradient(135deg, var(--accent), #E85D26);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: var(--font-display);
|
||
font-size: 1.8rem;
|
||
font-weight: 900;
|
||
color: white;
|
||
margin-bottom: 28px;
|
||
box-shadow: 0 8px 32px var(--accent-glow);
|
||
position: relative;
|
||
}
|
||
.cover-logo::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -2px;
|
||
border-radius: 18px;
|
||
background: linear-gradient(135deg, var(--accent), var(--cyan));
|
||
z-index: -1;
|
||
opacity: 0.5;
|
||
filter: blur(12px);
|
||
}
|
||
|
||
.cover-title {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(2.5rem, 5.5vw, 4.2rem);
|
||
font-weight: 900;
|
||
letter-spacing: -0.04em;
|
||
line-height: 1.1;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.cover-tagline {
|
||
font-size: clamp(0.95rem, 1.8vw, 1.2rem);
|
||
color: var(--text-secondary);
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.cover-round {
|
||
display: inline-block;
|
||
font-family: var(--font-mono);
|
||
padding: 8px 22px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0.04em;
|
||
background: var(--bg-surface);
|
||
}
|
||
|
||
/* ── Slide 3: Solution — Automotive Before/After ── */
|
||
.ba-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr;
|
||
gap: 0;
|
||
align-items: stretch;
|
||
margin-top: 32px;
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.ba-panel {
|
||
padding: 36px 32px;
|
||
position: relative;
|
||
}
|
||
|
||
.ba-panel--before {
|
||
background: linear-gradient(135deg, rgba(248, 81, 73, 0.06), rgba(248, 81, 73, 0.02));
|
||
border-right: 1px solid var(--border);
|
||
}
|
||
|
||
.ba-panel--after {
|
||
background: linear-gradient(135deg, rgba(63, 185, 80, 0.04), rgba(0, 212, 255, 0.04));
|
||
border-left: 1px solid var(--border);
|
||
}
|
||
|
||
.ba-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.7rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.ba-label .ba-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.ba-list {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.ba-list li {
|
||
font-size: 1.02rem;
|
||
color: var(--text-secondary);
|
||
line-height: 1.5;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
}
|
||
|
||
.ba-list li .ba-icon {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8rem;
|
||
flex-shrink: 0;
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.ba-panel--before .ba-icon {
|
||
background: var(--red-subtle);
|
||
color: var(--red);
|
||
}
|
||
.ba-panel--after .ba-icon {
|
||
background: var(--green-subtle);
|
||
color: var(--green);
|
||
}
|
||
|
||
.ba-list li strong {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.ba-result {
|
||
margin-top: 22px;
|
||
padding-top: 18px;
|
||
border-top: 1px solid var(--border);
|
||
font-family: var(--font-mono);
|
||
font-size: 1.3rem;
|
||
font-weight: 800;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* Center gauge between panels */
|
||
.ba-center {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px 8px;
|
||
background: var(--bg-deep);
|
||
position: relative;
|
||
z-index: 2;
|
||
min-width: 100px;
|
||
}
|
||
|
||
.ba-center .gauge-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.6rem;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* Speedometer needle animation */
|
||
@keyframes needleSweep {
|
||
0% { transform: rotate(-90deg); }
|
||
100% { transform: rotate(70deg); }
|
||
}
|
||
|
||
.gauge-needle {
|
||
transform-origin: 50% 85%;
|
||
animation: needleSweep 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.visible .gauge-needle {
|
||
animation-play-state: running;
|
||
}
|
||
|
||
/* Road line decoration */
|
||
.road-line {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: repeating-linear-gradient(
|
||
90deg,
|
||
var(--accent) 0px,
|
||
var(--accent) 24px,
|
||
transparent 24px,
|
||
transparent 40px
|
||
);
|
||
opacity: 0.5;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.ba-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.ba-panel--before { border-right: none; border-bottom: 1px solid var(--border); }
|
||
.ba-panel--after { border-left: none; border-top: 1px solid var(--border); }
|
||
.ba-center { padding: 12px; flex-direction: row; gap: 12px; min-width: auto; }
|
||
.ba-center svg { width: 90px; height: 58px; }
|
||
.ba-panel { padding: 24px 20px; }
|
||
}
|
||
|
||
/* ── Slide 4: Product Journey ── */
|
||
.journey {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
margin-top: 32px;
|
||
position: relative;
|
||
}
|
||
|
||
/* Connecting line behind steps */
|
||
.journey::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 18px;
|
||
left: 40px;
|
||
right: 40px;
|
||
height: 2px;
|
||
background: repeating-linear-gradient(90deg, var(--accent) 0px, var(--accent) 8px, transparent 8px, transparent 16px);
|
||
opacity: 0.3;
|
||
z-index: 0;
|
||
}
|
||
|
||
.journey-step {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.journey-num {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: var(--bg-surface);
|
||
border: 2px solid var(--accent);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8rem;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
margin-bottom: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.journey-mockup {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
margin-bottom: 14px;
|
||
transition: border-color 0.3s, box-shadow 0.3s;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.journey-step:hover .journey-mockup {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 8px 32px rgba(255, 107, 53, 0.15);
|
||
}
|
||
|
||
.mockup-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding: 6px 10px;
|
||
background: #f0f0f0;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.mockup-bar .mb-dot { width: 6px; height: 6px; border-radius: 50%; }
|
||
|
||
.mockup-body {
|
||
padding: 14px;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.74rem;
|
||
line-height: 1.7;
|
||
color: #555;
|
||
min-height: 145px;
|
||
}
|
||
|
||
.mockup-body .m-input {
|
||
background: #f5f5f5;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
padding: 6px 10px;
|
||
color: #222;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.mockup-body .m-input .m-placeholder { color: #aaa; }
|
||
.mockup-body .m-input .m-cursor { color: var(--accent); animation: blink 1s infinite; }
|
||
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
|
||
|
||
.mockup-body .m-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 5px 8px;
|
||
border-radius: 4px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.mockup-body .m-row:hover { background: #f0f0f0; }
|
||
.mockup-body .m-row .m-price { color: var(--accent); font-weight: 600; }
|
||
.mockup-body .m-row .m-stock { font-size: 0.65rem; }
|
||
.mockup-body .m-stock--yes { color: var(--green); }
|
||
.mockup-body .m-stock--low { color: var(--yellow); }
|
||
|
||
.mockup-body .m-btn {
|
||
display: block;
|
||
width: 100%;
|
||
background: var(--accent);
|
||
color: #000;
|
||
border: none;
|
||
border-radius: 6px;
|
||
padding: 6px;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.mockup-body .m-chat {
|
||
background: #f0f0f0;
|
||
border-radius: 8px 8px 8px 2px;
|
||
padding: 7px 10px;
|
||
margin-bottom: 6px;
|
||
color: #222;
|
||
max-width: 90%;
|
||
}
|
||
|
||
.mockup-body .m-chat--reply {
|
||
background: rgba(255, 107, 53, 0.1);
|
||
border-radius: 8px 8px 2px 8px;
|
||
border: 1px solid rgba(255, 107, 53, 0.2);
|
||
margin-left: auto;
|
||
}
|
||
|
||
.journey-label {
|
||
font-family: var(--font-display);
|
||
font-size: 0.95rem;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.journey-desc {
|
||
font-size: 0.78rem;
|
||
color: var(--text-secondary);
|
||
text-align: center;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.journey-alt {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
padding: 14px 24px;
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 0.88rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.journey-alt strong { color: var(--green); }
|
||
|
||
@media (max-width: 768px) {
|
||
.journey { grid-template-columns: 1fr 1fr; gap: 20px; }
|
||
.journey::before { display: none; }
|
||
.mockup-body { min-height: auto; }
|
||
}
|
||
|
||
/* ── Slide 6: Revenue Streams ── */
|
||
.revenue-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 24px;
|
||
margin-top: 28px;
|
||
padding-bottom: 400px;
|
||
}
|
||
|
||
.rev-card {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 20px 20px 24px 24px;
|
||
padding: 28px 20px 20px;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Piston head: wider top cap */
|
||
.rev-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -1px;
|
||
left: -6px;
|
||
right: -6px;
|
||
height: 8px;
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px 14px 0 0;
|
||
border-bottom: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Piston rod: connecting rod below */
|
||
.rev-card::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -192px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 80px;
|
||
height: 192px;
|
||
background: var(--border);
|
||
border-radius: 0 0 5px 5px;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* Biela end: crankshaft circle */
|
||
.rev-card .biela-end {
|
||
position: absolute;
|
||
bottom: -359px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 176px;
|
||
height: 176px;
|
||
border-radius: 50%;
|
||
border: 32px solid var(--border);
|
||
background: var(--bg-deep);
|
||
z-index: 1;
|
||
}
|
||
|
||
.rev-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 12px 32px rgba(255, 107, 53, 0.1);
|
||
}
|
||
|
||
.rev-card:hover::before {
|
||
border-color: var(--accent);
|
||
background: var(--bg-surface);
|
||
}
|
||
|
||
.rev-card:hover::after {
|
||
background: var(--accent);
|
||
}
|
||
|
||
/* Piston colors per card */
|
||
.rev-card--orange:hover { border-color: var(--accent); }
|
||
.rev-card--orange:hover::before { border-color: var(--accent); }
|
||
.rev-card--orange:hover::after { background: var(--accent); }
|
||
.rev-card--orange:hover .biela-end { border-color: var(--accent); }
|
||
|
||
.rev-card--cyan:hover { border-color: var(--cyan); }
|
||
.rev-card--cyan:hover::before { border-color: var(--cyan); }
|
||
.rev-card--cyan:hover::after { background: var(--cyan); }
|
||
.rev-card--cyan:hover .biela-end { border-color: var(--cyan); }
|
||
|
||
.rev-card--purple:hover { border-color: var(--purple); }
|
||
.rev-card--purple:hover::before { border-color: var(--purple); }
|
||
.rev-card--purple:hover::after { background: var(--purple); }
|
||
.rev-card--purple:hover .biela-end { border-color: var(--purple); }
|
||
|
||
.rev-card--green:hover { border-color: var(--green); }
|
||
.rev-card--green:hover::before { border-color: var(--green); }
|
||
.rev-card--green:hover::after { background: var(--green); }
|
||
.rev-card--green:hover .biela-end { border-color: var(--green); }
|
||
|
||
.rev-card .rev-num {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.rev-card .rev-num {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.65rem;
|
||
font-weight: 700;
|
||
color: var(--text-muted);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.rev-card .rev-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.rev-card h4 {
|
||
font-family: var(--font-display);
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.rev-card .rev-target {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.68rem;
|
||
color: var(--text-muted);
|
||
margin-bottom: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.rev-card .rev-desc {
|
||
font-size: 0.88rem;
|
||
color: var(--text-secondary);
|
||
line-height: 1.55;
|
||
flex: 1;
|
||
}
|
||
|
||
.rev-card .rev-metric {
|
||
margin-top: 14px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid var(--border);
|
||
font-family: var(--font-mono);
|
||
font-size: 0.82rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.revenue-grid { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
|
||
/* ── Slide 7: Roadmap Racetrack ── */
|
||
.racetrack {
|
||
position: relative;
|
||
margin-top: 36px;
|
||
}
|
||
|
||
/* The road surface */
|
||
.race-road {
|
||
position: absolute;
|
||
top: 22px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 32px;
|
||
background: #1a1a24;
|
||
border-radius: 16px;
|
||
border: 2px solid #2a2a3a;
|
||
z-index: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Road lane markings */
|
||
.race-road::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 12px;
|
||
right: 12px;
|
||
height: 2px;
|
||
background: repeating-linear-gradient(90deg, #F0B429 0px, #F0B429 18px, transparent 18px, transparent 32px);
|
||
opacity: 0.6;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* Road edge lines */
|
||
.race-road::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 8px;
|
||
right: 8px;
|
||
bottom: 3px;
|
||
border-top: 1.5px solid rgba(255,255,255,0.08);
|
||
border-bottom: 1.5px solid rgba(255,255,255,0.08);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.race-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
gap: 14px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.race-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Checkpoint flag markers */
|
||
.race-flag {
|
||
width: 38px;
|
||
height: 38px;
|
||
border-radius: 50%;
|
||
background: var(--bg-deep);
|
||
border: 3px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 18px;
|
||
position: relative;
|
||
z-index: 3;
|
||
transition: all 0.3s;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.race-col:first-child .race-flag {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 16px var(--accent-glow);
|
||
}
|
||
|
||
.race-col:hover .race-flag {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 16px var(--accent-glow);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.race-period {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
text-align: center;
|
||
margin-bottom: 8px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.race-card {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 20px 18px;
|
||
width: 100%;
|
||
flex: 1;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.race-col:hover .race-card {
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.race-card h4 {
|
||
font-family: var(--font-display);
|
||
font-size: 1.05rem;
|
||
font-weight: 700;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.race-card .race-items {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.race-card .race-items li {
|
||
font-size: 0.88rem;
|
||
color: var(--text-secondary);
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.race-card .race-items li .rb {
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.race-card .race-kpi {
|
||
margin-top: 12px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid var(--border);
|
||
font-family: var(--font-mono);
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.race-kpi-icon { width: 18px; height: 11px; }
|
||
|
||
/* Checkered finish line on last column */
|
||
.race-col:last-child .race-flag {
|
||
background: repeating-conic-gradient(#fff 0% 25%, #222 0% 50%) 50% / 10px 10px;
|
||
border-color: var(--red);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.race-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
|
||
.race-road { display: none; }
|
||
.race-flag { width: 32px; height: 32px; font-size: 0.85rem; }
|
||
}
|
||
|
||
/* ── Competitive Matrix ── */
|
||
.comp-matrix {
|
||
width: 100%;
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
margin-top: 28px;
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
.comp-matrix th, .comp-matrix td {
|
||
padding: 11px 14px;
|
||
text-align: center;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.comp-matrix thead th {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--text-secondary);
|
||
padding-bottom: 14px;
|
||
position: sticky;
|
||
top: 0;
|
||
background: var(--bg-deep);
|
||
}
|
||
|
||
/* Nexus column highlight */
|
||
.comp-matrix .col-nexus {
|
||
background: rgba(255, 107, 53, 0.04);
|
||
}
|
||
|
||
.comp-matrix thead .col-nexus {
|
||
color: var(--accent);
|
||
font-size: 0.82rem;
|
||
background: rgba(255, 107, 53, 0.06);
|
||
}
|
||
|
||
.comp-matrix tbody td:first-child {
|
||
text-align: left;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.comp-matrix tbody tr:hover {
|
||
background: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
.comp-matrix .cm-yes { color: var(--green); font-weight: 700; font-size: 1rem; }
|
||
.comp-matrix .cm-no { color: var(--red); opacity: 0.5; font-size: 0.9rem; }
|
||
.comp-matrix .cm-partial { color: var(--yellow); font-size: 0.9rem; }
|
||
.comp-matrix .cm-nexus-yes { color: var(--accent); font-weight: 700; font-size: 1.1rem; }
|
||
|
||
.comp-matrix .comp-badge {
|
||
display: block;
|
||
font-size: 0.58rem;
|
||
color: var(--text-muted);
|
||
margin-top: 2px;
|
||
font-weight: 400;
|
||
letter-spacing: 0;
|
||
text-transform: none;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.comp-matrix { font-size: 0.7rem; }
|
||
.comp-matrix th, .comp-matrix td { padding: 8px 6px; }
|
||
}
|
||
|
||
/* ── Slide 1: Cover Automotive ── */
|
||
.cover-hero {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 48px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.cover-content { flex: 1; }
|
||
|
||
.cover-gauge {
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.cover-logo-wheel {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
border: 3px solid var(--accent);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: var(--font-display);
|
||
font-size: 2rem;
|
||
font-weight: 900;
|
||
color: white;
|
||
margin-bottom: 28px;
|
||
position: relative;
|
||
background: linear-gradient(135deg, var(--accent), #E85D26);
|
||
box-shadow: 0 0 40px var(--accent-glow), 0 0 80px rgba(255, 107, 53, 0.1);
|
||
}
|
||
|
||
/* Wheel spokes effect */
|
||
.cover-logo-wheel::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -8px;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(255, 107, 53, 0.2);
|
||
}
|
||
|
||
.cover-logo-wheel::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -16px;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(255, 107, 53, 0.1);
|
||
}
|
||
|
||
.cover-stats-dashboard {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 32px;
|
||
}
|
||
|
||
.cover-stat-item {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 14px 20px;
|
||
text-align: center;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.cover-stat-item:hover { border-color: var(--accent); }
|
||
|
||
.cover-stat-item .csv {
|
||
font-family: var(--font-mono);
|
||
font-size: 1.1rem;
|
||
font-weight: 800;
|
||
color: var(--accent);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.cover-stat-item .csl {
|
||
font-size: 0.72rem;
|
||
color: var(--text-muted);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* Cover road */
|
||
.cover-road {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 48px;
|
||
background: #0a0a12;
|
||
border-top: 2px solid #1a1a24;
|
||
z-index: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cover-road::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: repeating-linear-gradient(90deg, #F0B429 0px, #F0B429 24px, transparent 24px, transparent 44px);
|
||
opacity: 0.5;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.cover-road::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 4px;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 4px;
|
||
border-top: 1px solid rgba(255,255,255,0.04);
|
||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||
}
|
||
|
||
/* ── Slide 11: Contact Automotive ── */
|
||
.contact-finish {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 6px;
|
||
background: repeating-linear-gradient(
|
||
90deg,
|
||
#ffffff 0px, #ffffff 12px,
|
||
#222 12px, #222 24px
|
||
);
|
||
opacity: 0.15;
|
||
}
|
||
|
||
.contact-cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin-top: 32px;
|
||
padding: 18px 36px;
|
||
background: linear-gradient(135deg, var(--accent), #E85D26);
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-family: var(--font-display);
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
color: white;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
text-decoration: none;
|
||
box-shadow: 0 8px 32px var(--accent-glow);
|
||
}
|
||
|
||
.contact-cta:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 40px rgba(255, 107, 53, 0.3);
|
||
}
|
||
|
||
.contact-road {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 48px;
|
||
background: #0a0a12;
|
||
border-top: 2px solid #1a1a24;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.contact-road::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: repeating-linear-gradient(90deg, #F0B429 0px, #F0B429 24px, transparent 24px, transparent 44px);
|
||
opacity: 0.5;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.cover-hero { flex-direction: column; }
|
||
.cover-stats-dashboard { flex-wrap: wrap; }
|
||
}
|
||
|
||
/* ── Slide Sources / Footnotes ── */
|
||
.slide-sources {
|
||
position: absolute;
|
||
bottom: 18px;
|
||
left: 48px;
|
||
right: 48px;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.605rem;
|
||
color: var(--text-muted);
|
||
line-height: 1.6;
|
||
z-index: 3;
|
||
opacity: 0.7;
|
||
border-top: 1px solid var(--border);
|
||
padding-top: 8px;
|
||
}
|
||
.slide-sources a {
|
||
color: var(--text-muted);
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
.slide-sources a:hover {
|
||
color: var(--cyan);
|
||
text-decoration: underline;
|
||
}
|
||
.slide-sources span.src-sep {
|
||
margin: 0 6px;
|
||
opacity: 0.4;
|
||
}
|
||
|
||
/* ── Responsive ── */
|
||
@media (max-width: 768px) {
|
||
.slide { padding: 40px 20px; }
|
||
.slide-sources { left: 20px; right: 20px; font-size: 0.55rem; bottom: 10px; }
|
||
.market-stats-bar { grid-template-columns: 1fr; }
|
||
.flow { grid-template-columns: 1fr; gap: 6px; }
|
||
.flow-arrow { transform: rotate(90deg); }
|
||
.pricing-row, .features-grid, .comp-layout { grid-template-columns: 1fr; }
|
||
.funds-layout { flex-direction: column; }
|
||
.nav-dots { display: none; }
|
||
.traction-grid, .stats-grid { grid-template-columns: 1fr 1fr; }
|
||
.ask-grid { grid-template-columns: 1fr 1fr; }
|
||
.team-grid { grid-template-columns: 1fr; }
|
||
.phases-grid { grid-template-columns: 1fr 1fr; }
|
||
.code-block { font-size: 0.72rem; padding: 14px 16px; }
|
||
}
|
||
|
||
/* ── Print ── */
|
||
@media print {
|
||
html { scroll-snap-type: none; }
|
||
.slide { min-height: auto; page-break-after: always; page-break-inside: avoid; padding: 40px; scroll-snap-align: none; }
|
||
.nav { display: none !important; }
|
||
body { background: white; color: #111; }
|
||
body::before, body::after { display: none; }
|
||
.glow { display: none; }
|
||
.title, .stat-value, .traction-value, .ask-card .ask-value, .pricing-card .price, .fund-amount, .proj-table .arr {
|
||
color: #d44a00 !important; -webkit-text-fill-color: #d44a00 !important;
|
||
}
|
||
.title .hl { -webkit-text-fill-color: #d44a00 !important; }
|
||
.subtitle, .problem-card .p-text, .feature-item p, .market-detail p, .team-card p, .contact-item,
|
||
.stat-label, .traction-label, .fund-detail, .proj-table td, .pricing-card .price-note, .ask-card .ask-label,
|
||
.tag, .cover-tagline, .cover-round { color: #444 !important; }
|
||
.card, .ask-bottom { background: #f8f8f8 !important; border-color: #ddd !important; }
|
||
.cover-logo { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
|
||
.reveal { opacity: 1 !important; transform: none !important; }
|
||
.slide-sources { position: relative; bottom: auto; left: auto; right: auto; margin-top: 20px; color: #666 !important; border-color: #ccc !important; }
|
||
.slide-sources a { color: #666 !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ═══════════ SLIDE 1: COVER ═══════════ -->
|
||
<section class="slide" id="slide-1">
|
||
<div class="glow glow--orange" style="top:-200px;right:-100px;"></div>
|
||
<div class="glow glow--cyan" style="bottom:-150px;left:-80px;"></div>
|
||
<div class="cover-road"></div>
|
||
<div class="slide-inner">
|
||
<div class="cover-hero">
|
||
<div class="cover-content">
|
||
<div class="cover-logo-wheel reveal">N</div>
|
||
<div class="cover-title reveal reveal-d1">NEXUS <span class="hl">AUTOPARTS</span></div>
|
||
<div class="cover-tagline reveal reveal-d2">Tu conexión directa con las partes que necesitas</div>
|
||
<div class="cover-round reveal reveal-d3">Friends & Family — Marzo 2026</div>
|
||
|
||
<div class="cover-stats-dashboard reveal reveal-d4">
|
||
<div class="cover-stat-item">
|
||
<div class="csv">$30B</div>
|
||
<div class="csl">Mercado MX</div>
|
||
</div>
|
||
<div class="cover-stat-item">
|
||
<div class="csv">261K+</div>
|
||
<div class="csl">Talleres</div>
|
||
</div>
|
||
<div class="cover-stat-item">
|
||
<div class="csv">57K+</div>
|
||
<div class="csl">Refaccionarias</div>
|
||
</div>
|
||
<div class="cover-stat-item">
|
||
<div class="csv">0%</div>
|
||
<div class="csl">Digitalizado</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Auto parts icons grid -->
|
||
<div class="reveal reveal-d3" style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:300px;">
|
||
<div style="background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;transition:all 0.3s;" onmouseover="this.style.borderColor='var(--accent)'" onmouseout="this.style.borderColor='var(--border)'">
|
||
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" opacity="0.7"><rect x="4" y="6" width="16" height="12" rx="2"/><line x1="7" y1="6" x2="7" y2="3"/><line x1="17" y1="6" x2="17" y2="3"/><line x1="1" y1="10" x2="4" y2="10"/><line x1="20" y1="10" x2="23" y2="10"/><path d="M9 12h6M12 9v6"/></svg>
|
||
<div style="font-size:0.6rem;color:var(--text-muted);margin-top:6px;">Baterías</div>
|
||
</div>
|
||
<div style="background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;transition:all 0.3s;" onmouseover="this.style.borderColor='var(--cyan)'" onmouseout="this.style.borderColor='var(--border)'">
|
||
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--cyan)" stroke-width="1.5" stroke-linecap="round" opacity="0.7"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="1"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>
|
||
<div style="font-size:0.6rem;color:var(--text-muted);margin-top:6px;">Llantas</div>
|
||
</div>
|
||
<div style="background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;transition:all 0.3s;" onmouseover="this.style.borderColor='var(--green)'" onmouseout="this.style.borderColor='var(--border)'">
|
||
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="1.5" stroke-linecap="round" opacity="0.7"><rect x="8" y="2" width="8" height="14" rx="3"/><line x1="12" y1="16" x2="12" y2="22"/><circle cx="12" cy="22" r="0" fill="var(--green)"/><line x1="9" y1="19" x2="15" y2="19"/></svg>
|
||
<div style="font-size:0.6rem;color:var(--text-muted);margin-top:6px;">Pistones</div>
|
||
</div>
|
||
<div style="background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;transition:all 0.3s;" onmouseover="this.style.borderColor='var(--yellow)'" onmouseout="this.style.borderColor='var(--border)'">
|
||
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--yellow)" stroke-width="1.5" stroke-linecap="round" opacity="0.7"><path d="M12 2v4M12 18v4"/><path d="M9 6h6l-1 6h-4L9 6z"/><circle cx="12" cy="15" r="2"/><line x1="10" y1="18" x2="14" y2="18"/></svg>
|
||
<div style="font-size:0.6rem;color:var(--text-muted);margin-top:6px;">Bujías</div>
|
||
</div>
|
||
<div style="background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;transition:all 0.3s;" onmouseover="this.style.borderColor='var(--purple)'" onmouseout="this.style.borderColor='var(--border)'">
|
||
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--purple)" stroke-width="1.5" stroke-linecap="round" opacity="0.7"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2"/></svg>
|
||
<div style="font-size:0.6rem;color:var(--text-muted);margin-top:6px;">Filtros</div>
|
||
</div>
|
||
<div style="background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;transition:all 0.3s;" onmouseover="this.style.borderColor='var(--red)'" onmouseout="this.style.borderColor='var(--border)'">
|
||
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--red)" stroke-width="1.5" stroke-linecap="round" opacity="0.7"><path d="M2 12h1l2-6h14l2 6h1"/><path d="M5 12v5a1 1 0 001 1h2a1 1 0 001-1v-1h6v1a1 1 0 001 1h2a1 1 0 001-1v-5"/><circle cx="7.5" cy="12" r="1"/><circle cx="16.5" cy="12" r="1"/></svg>
|
||
<div style="font-size:0.6rem;color:var(--text-muted);margin-top:6px;">Frenos</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════ SLIDE 2: EL PROBLEMA ═══════════ -->
|
||
<section class="slide" id="slide-2">
|
||
<div class="glow glow--orange" style="bottom:-250px;left:-200px;"></div>
|
||
<div class="slide-inner">
|
||
<div class="tag reveal">El Problema</div>
|
||
<div class="title reveal reveal-d1">Un mercado de <span class="hl">$30B USD</span> sin digitalizar</div>
|
||
<div class="subtitle reveal reveal-d2">El aftermarket en México está fragmentado y opera de forma analógica. En EE.UU., el e-commerce del sector ya crece 4.6% anual — la digitalización es inevitable, y México aún no empieza.</div>
|
||
<div class="problem-stack">
|
||
<div class="card problem-card reveal reveal-d2">
|
||
<div class="p-icon">!</div>
|
||
<div class="p-text"><strong>261,000+ talleres</strong> en México dependen de llamadas telefónicas para cotizar piezas con múltiples distribuidores.</div>
|
||
</div>
|
||
<div class="card problem-card reveal reveal-d3">
|
||
<div class="p-icon">×</div>
|
||
<div class="p-text"><strong>57,000+ refaccionarias</strong> sin canal digital para mostrar inventario a talleres cercanos.</div>
|
||
</div>
|
||
<div class="card problem-card reveal reveal-d4">
|
||
<div class="p-icon">?</div>
|
||
<div class="p-text"><strong>Sin catálogo centralizado en México</strong> que conecte partes OEM con alternativas aftermarket mediante cross-references.</div>
|
||
</div>
|
||
<div class="card problem-card reveal reveal-d5">
|
||
<div class="p-icon">⚠</div>
|
||
<div class="p-text"><strong>61M+ vehículos</strong> registrados en México con una edad promedio de 12–14 años — la demanda de refacciones crece, las herramientas no.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="slide-sources">
|
||
Fuentes: <a href="https://www.autocare.org/news/latest-news/details/2025/06/12/u.s.-light-vehicle-automotive-aftermarket-projected-to-reach-$435-billion-in-2025" target="_blank">Auto Care Association + S&P Global, 2025</a>
|
||
<span class="src-sep">|</span> <a href="https://www.elfinanciero.com.mx/empresas/2024/07/02/mercado-de-refacciones-superaran-los-30-mil-mdd/" target="_blank">El Financiero / INA, 2024</a>
|
||
<span class="src-sep">|</span> <a href="https://www.economia.gob.mx/datamexico/es/profile/industry/automotive-repair-and-maintenance" target="_blank">INEGI DENUE 2025</a>
|
||
<span class="src-sep">|</span> <a href="https://www.inegi.org.mx/temas/vehiculos/" target="_blank">INEGI VMRC 2024</a>
|
||
<span class="src-sep">|</span> <a href="https://www150.statcan.gc.ca/n1/daily-quotidien/251017/dq251017c-eng.htm" target="_blank">Statistics Canada 2024</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════ SLIDE 3: LA SOLUCIÓN ═══════════ -->
|
||
<section class="slide" id="slide-3">
|
||
<div class="glow glow--cyan" style="top:-200px;right:-200px;"></div>
|
||
<div class="glow glow--orange" style="bottom:-200px;left:-150px;"></div>
|
||
<div class="slide-inner">
|
||
<div class="tag reveal">La Solución</div>
|
||
<div class="title reveal reveal-d1">La capa digital entre <span class="hl">talleres</span> y <span class="hl">bodegas</span></div>
|
||
<div class="subtitle reveal reveal-d2">Nexus es el marketplace B2B que digitaliza la compra de refacciones en México. Quien construya el catálogo y la red primero, captura el mercado.</div>
|
||
|
||
<!-- Before / After with Gauge -->
|
||
<div class="ba-grid reveal reveal-d3">
|
||
|
||
<!-- BEFORE -->
|
||
<div class="ba-panel ba-panel--before">
|
||
<div class="ba-label" style="color:var(--red);">
|
||
<span class="ba-dot" style="background:var(--red);"></span> Sin Nexus
|
||
</div>
|
||
<div style="font-family:var(--font-mono);font-size:0.82rem;color:var(--text-primary);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;margin-bottom:10px;">🔧 Taller mecánico</div>
|
||
<ul class="ba-list">
|
||
<li><span class="ba-icon">✕</span> Llama a +5 distribuidores por pieza</li>
|
||
<li><span class="ba-icon">✕</span> No sabe si la pieza es compatible</li>
|
||
</ul>
|
||
<div style="font-family:var(--font-mono);font-size:0.82rem;color:var(--text-primary);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;margin:20px 0 10px;">🏢 Bodega / Refaccionaria</div>
|
||
<ul class="ba-list">
|
||
<li><span class="ba-icon">✕</span> Sin canal digital para mostrar inventario</li>
|
||
<li><span class="ba-icon">✕</span> Pierde ventas por falta de visibilidad</li>
|
||
</ul>
|
||
<div class="ba-result" style="color:var(--red);">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="currentColor" stroke-width="2"/><path d="M10 5v6M10 13.5v1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||
Horas por cotización
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CENTER GAUGE -->
|
||
<div class="ba-center">
|
||
<svg width="140" height="90" viewBox="0 0 80 52" fill="none">
|
||
<!-- Gauge background arc -->
|
||
<path d="M8 48 A32 32 0 0 1 72 48" stroke="#30363D" stroke-width="6" stroke-linecap="round" fill="none"/>
|
||
<!-- Red zone -->
|
||
<path d="M8 48 A32 32 0 0 1 22 20" stroke="#F85149" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.6"/>
|
||
<!-- Yellow zone -->
|
||
<path d="M22 20 A32 32 0 0 1 40 16" stroke="#F0B429" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.5"/>
|
||
<!-- Green zone -->
|
||
<path d="M40 16 A32 32 0 0 1 72 48" stroke="#3FB950" stroke-width="6" stroke-linecap="round" fill="none" opacity="0.7"/>
|
||
<!-- Needle -->
|
||
<line class="gauge-needle" x1="40" y1="44" x2="40" y2="18" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round"/>
|
||
<!-- Center dot -->
|
||
<circle cx="40" cy="44" r="4" fill="var(--accent)"/>
|
||
</svg>
|
||
<div class="gauge-label">Velocidad</div>
|
||
</div>
|
||
|
||
<!-- AFTER -->
|
||
<div class="ba-panel ba-panel--after">
|
||
<div class="ba-label" style="color:var(--green);">
|
||
<span class="ba-dot" style="background:var(--green);"></span> Con Nexus
|
||
</div>
|
||
<div style="font-family:var(--font-mono);font-size:0.82rem;color:var(--text-primary);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;margin-bottom:10px;">🔧 Taller mecánico</div>
|
||
<ul class="ba-list">
|
||
<li><span class="ba-icon">✓</span> 1 búsqueda, todas las bodegas</li>
|
||
<li><span class="ba-icon">✓</span> Cross-references OEM ↔ aftermarket</li>
|
||
</ul>
|
||
<div style="font-family:var(--font-mono);font-size:0.82rem;color:var(--text-primary);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;margin:20px 0 10px;">🏢 Bodega / Refaccionaria</div>
|
||
<ul class="ba-list">
|
||
<li><span class="ba-icon">✓</span> Inventario visible para todos los talleres</li>
|
||
<li><span class="ba-icon">✓</span> Recibe pedidos digitales al instante</li>
|
||
</ul>
|
||
<div class="ba-result" style="color:var(--green);">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="currentColor" stroke-width="2"/><path d="M6 10l3 3 5-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
Segundos por cotización
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Road line decoration -->
|
||
<div class="road-line" style="grid-column:1/-1;position:relative;"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════ SLIDE 4: EL PRODUCTO ═══════════ -->
|
||
<section class="slide" id="slide-4">
|
||
<div class="glow glow--orange" style="top:-100px;left:-200px;"></div>
|
||
<div class="glow glow--cyan" style="bottom:-150px;right:-100px;"></div>
|
||
<div class="slide-inner">
|
||
<div class="tag reveal">La Visión de Producto</div>
|
||
<div class="title reveal reveal-d1">El sistema operativo del <span class="hl">aftermarket</span></div>
|
||
|
||
<div class="journey reveal reveal-d2">
|
||
<!-- STEP 1: BUSCA -->
|
||
<div class="journey-step">
|
||
<div class="journey-num">1</div>
|
||
<div class="journey-mockup">
|
||
<div class="mockup-bar">
|
||
<span class="mb-dot" style="background:var(--red);"></span>
|
||
<span class="mb-dot" style="background:var(--yellow);"></span>
|
||
<span class="mb-dot" style="background:var(--green);"></span>
|
||
</div>
|
||
<div class="mockup-body">
|
||
<div class="m-input">
|
||
<span style="color:var(--accent);">⌕</span>
|
||
<span>Balatas Tsuru 2015</span>
|
||
<span class="m-cursor">|</span>
|
||
</div>
|
||
<div style="font-size:0.65rem;color:#999;margin-bottom:6px;">O busca por vehículo:</div>
|
||
<div class="m-row" style="background:#f0f0f0;border-radius:4px;">
|
||
<span>Nissan</span><span style="color:#bbb;">›</span>
|
||
</div>
|
||
<div class="m-row" style="border-radius:4px;">
|
||
<span>Toyota</span><span style="color:#bbb;">›</span>
|
||
</div>
|
||
<div class="m-row" style="border-radius:4px;">
|
||
<span>VW</span><span style="color:#bbb;">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="journey-label">Busca</div>
|
||
<div class="journey-desc">Por parte, vehículo o VIN</div>
|
||
</div>
|
||
|
||
<!-- STEP 2: COMPARA -->
|
||
<div class="journey-step">
|
||
<div class="journey-num">2</div>
|
||
<div class="journey-mockup">
|
||
<div class="mockup-bar">
|
||
<span class="mb-dot" style="background:var(--red);"></span>
|
||
<span class="mb-dot" style="background:var(--yellow);"></span>
|
||
<span class="mb-dot" style="background:var(--green);"></span>
|
||
</div>
|
||
<div class="mockup-body">
|
||
<div style="font-size:0.65rem;color:#999;margin-bottom:6px;">3 bodegas · Balatas delanteras</div>
|
||
<div class="m-row">
|
||
<span>Bodega TJ Norte</span>
|
||
<span class="m-price">$420</span>
|
||
</div>
|
||
<div style="text-align:right;margin:-2px 8px 4px;"><span class="m-stock m-stock--yes">● En stock</span></div>
|
||
<div class="m-row">
|
||
<span>Refac. Central</span>
|
||
<span class="m-price">$385</span>
|
||
</div>
|
||
<div style="text-align:right;margin:-2px 8px 4px;"><span class="m-stock m-stock--yes">● En stock</span></div>
|
||
<div class="m-row">
|
||
<span>AutoParts GDL</span>
|
||
<span class="m-price">$450</span>
|
||
</div>
|
||
<div style="text-align:right;margin:-2px 8px 4px;"><span class="m-stock m-stock--low">● Últimas 2</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="journey-label">Compara</div>
|
||
<div class="journey-desc">Precios y stock multi-bodega</div>
|
||
</div>
|
||
|
||
<!-- STEP 3: ORDENA -->
|
||
<div class="journey-step">
|
||
<div class="journey-num">3</div>
|
||
<div class="journey-mockup">
|
||
<div class="mockup-bar">
|
||
<span class="mb-dot" style="background:var(--red);"></span>
|
||
<span class="mb-dot" style="background:var(--yellow);"></span>
|
||
<span class="mb-dot" style="background:var(--green);"></span>
|
||
</div>
|
||
<div class="mockup-body">
|
||
<div style="font-size:0.65rem;color:#999;margin-bottom:6px;">Carrito unificado</div>
|
||
<div class="m-row">
|
||
<span>Balatas del.</span>
|
||
<span class="m-price">$385</span>
|
||
</div>
|
||
<div class="m-row">
|
||
<span>Discos del.</span>
|
||
<span class="m-price">$720</span>
|
||
</div>
|
||
<div class="m-row">
|
||
<span>Líq. frenos</span>
|
||
<span class="m-price">$95</span>
|
||
</div>
|
||
<div style="border-top:1px solid #e0e0e0;margin-top:6px;padding-top:6px;">
|
||
<div class="m-row" style="font-weight:700;">
|
||
<span style="color:#222;">Total</span>
|
||
<span class="m-price">$1,200</span>
|
||
</div>
|
||
</div>
|
||
<div class="m-btn">Ordenar →</div>
|
||
</div>
|
||
</div>
|
||
<div class="journey-label">Ordena</div>
|
||
<div class="journey-desc">Un carrito, múltiples bodegas</div>
|
||
</div>
|
||
|
||
<!-- STEP 4: FACTURA -->
|
||
<div class="journey-step">
|
||
<div class="journey-num">4</div>
|
||
<div class="journey-mockup">
|
||
<div class="mockup-bar">
|
||
<span class="mb-dot" style="background:var(--red);"></span>
|
||
<span class="mb-dot" style="background:var(--yellow);"></span>
|
||
<span class="mb-dot" style="background:var(--green);"></span>
|
||
</div>
|
||
<div class="mockup-body">
|
||
<div style="text-align:center;padding:6px 0;">
|
||
<div style="font-size:1.5rem;margin-bottom:4px;">✓</div>
|
||
<div style="color:var(--green);font-weight:600;font-size:0.74rem;">Pedido confirmado</div>
|
||
</div>
|
||
<div class="m-row" style="margin-top:4px;">
|
||
<span>CFDI 4.0</span>
|
||
<span style="color:var(--green);">Emitida ✓</span>
|
||
</div>
|
||
<div class="m-row">
|
||
<span>Pago</span>
|
||
<span style="color:var(--cyan);">BNPL 3 meses</span>
|
||
</div>
|
||
<div class="m-row">
|
||
<span>Entrega</span>
|
||
<span style="color:#222;">~45 min</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="journey-label">Factura y paga</div>
|
||
<div class="journey-desc">CFDI automática + crédito BNPL</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- WhatsApp alternative entry -->
|
||
<div style="text-align:center;" class="reveal reveal-d3">
|
||
<div class="journey-alt">
|
||
<span style="font-size:1.3rem;">💬</span>
|
||
<span>También por <strong>WhatsApp + IA</strong> — "Necesito balatas para Tsuru 2015" y el flujo inicia automáticamente</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════ SLIDE 5: TAMAÑO DE MERCADO ═══════════ -->
|
||
<section class="slide" id="slide-5">
|
||
<div class="glow glow--cyan" style="bottom:-200px;right:-150px;"></div>
|
||
<div class="slide-inner">
|
||
<div class="tag reveal">Tamaño de Mercado</div>
|
||
<div class="title reveal reveal-d1">Aftermarket Norteamérica: <span class="hl">$485B USD</span></div>
|
||
|
||
<div class="market-dashboard">
|
||
<!-- Single Tachometer with 3 equal zones -->
|
||
<div style="display:flex;align-items:center;gap:44px;" class="reveal reveal-d2">
|
||
<div style="flex-shrink:0;text-align:center;">
|
||
<svg width="340" height="210" viewBox="0 0 340 210" fill="none">
|
||
<!-- Outer ring decoration -->
|
||
<path d="M22 190 A148 148 0 0 1 318 190" stroke="#1C2333" stroke-width="4" stroke-linecap="round"/>
|
||
|
||
<!-- TAM zone: right third of arc (orange) -->
|
||
<path d="M22 190 A148 148 0 0 1 318 190" stroke="var(--accent)" stroke-width="30" stroke-linecap="round" opacity="0.2"
|
||
stroke-dasharray="465" stroke-dashoffset="0"/>
|
||
<!-- Brighter TAM section -->
|
||
<path d="M22 190 A148 148 0 0 1 318 190" stroke="var(--accent)" stroke-width="30" stroke-linecap="round" opacity="0.4"
|
||
stroke-dasharray="155 465" stroke-dashoffset="-310"/>
|
||
|
||
<!-- SAM zone: middle third (cyan) -->
|
||
<path d="M22 190 A148 148 0 0 1 318 190" stroke="var(--cyan)" stroke-width="30" stroke-linecap="round" opacity="0.55"
|
||
stroke-dasharray="155 465" stroke-dashoffset="-155"/>
|
||
|
||
<!-- SOM zone: left third (green) — where we are -->
|
||
<path d="M22 190 A148 148 0 0 1 318 190" stroke="var(--green)" stroke-width="30" stroke-linecap="round" opacity="0.75"
|
||
stroke-dasharray="155 465" stroke-dashoffset="0"/>
|
||
|
||
<!-- Zone divider ticks -->
|
||
<line x1="88" y1="52" x2="98" y2="62" stroke="var(--text-muted)" stroke-width="2" stroke-linecap="round"/>
|
||
<line x1="245" y1="52" x2="235" y2="62" stroke="var(--text-muted)" stroke-width="2" stroke-linecap="round"/>
|
||
|
||
<!-- Minor tick marks around arc -->
|
||
<line x1="30" y1="160" x2="42" y2="162" stroke="#30363D" stroke-width="1.5" stroke-linecap="round"/>
|
||
<line x1="42" y1="110" x2="54" y2="116" stroke="#30363D" stroke-width="1.5" stroke-linecap="round"/>
|
||
<line x1="130" y1="44" x2="135" y2="56" stroke="#30363D" stroke-width="1.5" stroke-linecap="round"/>
|
||
<line x1="204" y1="44" x2="199" y2="56" stroke="#30363D" stroke-width="1.5" stroke-linecap="round"/>
|
||
<line x1="289" y1="110" x2="277" y2="116" stroke="#30363D" stroke-width="1.5" stroke-linecap="round"/>
|
||
<line x1="302" y1="160" x2="290" y2="162" stroke="#30363D" stroke-width="1.5" stroke-linecap="round"/>
|
||
|
||
<!-- Zone labels on the arc -->
|
||
<text x="60" y="96" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="15" font-weight="800" fill="#E0E0E0">SOM</text>
|
||
<text x="60" y="116" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="13" fill="#E0E0E0" font-weight="700">$500M</text>
|
||
|
||
<text x="170" y="34" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="15" font-weight="800" fill="#E0E0E0">SAM</text>
|
||
<text x="170" y="54" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="13" fill="#E0E0E0" font-weight="700">$30B</text>
|
||
|
||
<text x="278" y="96" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="15" font-weight="800" fill="#E0E0E0">TAM</text>
|
||
<text x="278" y="116" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="13" fill="#E0E0E0" font-weight="700">$485B</text>
|
||
|
||
<!-- Needle pointing to SOM -->
|
||
<line x1="170" y1="185" x2="55" y2="142" stroke="var(--text-primary)" stroke-width="3" stroke-linecap="round"/>
|
||
<circle cx="170" cy="185" r="9" fill="var(--accent)"/>
|
||
<circle cx="170" cy="185" r="4" fill="var(--bg-deep)"/>
|
||
|
||
<!-- Center display -->
|
||
<text x="170" y="160" text-anchor="middle" font-family="'Sora', sans-serif" font-size="13" font-weight="700" fill="#E0E0E0">META INICIAL</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Legend -->
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:14px;">
|
||
<div class="card" style="padding:16px 20px;border-left:3px solid var(--green);">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
|
||
<span style="font-family:var(--font-mono);font-size:0.95rem;color:var(--green);font-weight:700;letter-spacing:0.08em;">SOM — Objetivo Año 1-2</span>
|
||
<span style="font-family:var(--font-mono);font-size:1.6rem;font-weight:800;color:var(--green);">$500M</span>
|
||
</div>
|
||
<div style="font-size:1.02rem;color:var(--text-secondary);">Tijuana, Guadalajara y expansión digital nacional</div>
|
||
</div>
|
||
<div class="card" style="padding:16px 20px;border-left:3px solid var(--cyan);">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
|
||
<span style="font-family:var(--font-mono);font-size:0.95rem;color:var(--cyan);font-weight:700;letter-spacing:0.08em;">SAM — Aftermarket MX</span>
|
||
<span style="font-family:var(--font-mono);font-size:1.6rem;font-weight:800;color:var(--cyan);">$30B</span>
|
||
</div>
|
||
<div style="font-size:1.02rem;color:var(--text-secondary);">Distribuidores y refaccionarias a talleres independientes</div>
|
||
</div>
|
||
<div class="card" style="padding:16px 20px;border-left:3px solid var(--accent);">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
|
||
<span style="font-family:var(--font-mono);font-size:0.95rem;color:var(--accent);font-weight:700;letter-spacing:0.08em;">TAM — Norteamérica</span>
|
||
<span style="font-family:var(--font-mono);font-size:1.6rem;font-weight:800;color:var(--accent);">$485B</span>
|
||
</div>
|
||
<div style="font-size:1.02rem;color:var(--text-secondary);">EE.UU. ($435B) + México ($30B) + Canadá (~$20B)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Road decoration -->
|
||
<div class="gauges-road"></div>
|
||
|
||
<!-- Stats bar: Vehicles & Workshops -->
|
||
<div class="market-stats-bar reveal reveal-d3">
|
||
<div class="ms-item">
|
||
<div class="ms-icon" style="background:var(--accent-subtle);border:1px solid rgba(255,107,53,0.15);">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"><path d="M5 17h14M5 17a2 2 0 01-2-2V7a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2M8 17v2M16 17v2M7 12h.01M17 12h.01M9 7l3 3 3-3"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="ms-val">385M+ vehículos</div>
|
||
<div class="ms-lbl">EE.UU. (297M) + México (61M) + Canadá (27M)</div>
|
||
</div>
|
||
</div>
|
||
<div class="ms-item">
|
||
<div class="ms-icon" style="background:var(--cyan-subtle);border:1px solid rgba(0,212,255,0.15);">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--cyan)" stroke-width="2" stroke-linecap="round"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="ms-val">575K+ talleres</div>
|
||
<div class="ms-lbl">EE.UU. (~290K) + MX (261K) + CA (~25K). Lanzamos en MX</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="slide-sources">
|
||
Fuentes: <a href="https://www.autocare.org/news/latest-news/details/2025/06/12/u.s.-light-vehicle-automotive-aftermarket-projected-to-reach-$435-billion-in-2025" target="_blank">Auto Care Assoc. / MEMA / S&P Global — US $435B (2025)</a>
|
||
<span class="src-sep">|</span> <a href="https://mexicoindustry.com/noticia/el-sector-de-aftermarket-en-mexico-vale-30000mdd-lideres-automotrices-pronostican-superar-cifra-en-2024-" target="_blank">INA / Mexico Industry — MX $30B (2024)</a>
|
||
<span class="src-sep">|</span> <a href="https://www.grandviewresearch.com/horizon/outlook/automotive-aftermarket-market/canada" target="_blank">Grand View Research — CA ~$20B</a>
|
||
<span class="src-sep">|</span> <a href="https://www.ceicdata.com/en/indicator/united-states/number-of-registered-vehicles" target="_blank">FHWA — US 297M veh.</a>
|
||
<span class="src-sep">|</span> <a href="https://www.inegi.org.mx/temas/vehiculos/" target="_blank">INEGI VMRC — MX 61M veh.</a>
|
||
<span class="src-sep">|</span> <a href="https://www150.statcan.gc.ca/n1/daily-quotidien/251017/dq251017c-eng.htm" target="_blank">StatCan — CA 27M veh.</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════ SLIDE 6: MODELO DE NEGOCIO ═══════════ -->
|
||
<section class="slide" id="slide-6">
|
||
<div class="glow glow--orange" style="top:-200px;right:-100px;"></div>
|
||
<div class="glow glow--cyan" style="bottom:-150px;left:-100px;"></div>
|
||
<div class="slide-inner">
|
||
<div class="tag reveal">Modelo de Negocio</div>
|
||
<div class="title reveal reveal-d1">4 motores de <span class="hl">ingreso</span></div>
|
||
|
||
<div class="revenue-grid">
|
||
<!-- 1. Licenciamiento SaaS -->
|
||
<div class="rev-card rev-card--orange reveal reveal-d1">
|
||
<div class="rev-num">01</div>
|
||
<div class="rev-icon" style="background:linear-gradient(135deg, rgba(255,107,53,0.12), rgba(255,107,53,0.04));">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/><circle cx="12" cy="16" r="1"/></svg>
|
||
</div>
|
||
<h4>Licenciamiento SaaS</h4>
|
||
<div class="rev-target">Talleres + Bodegas</div>
|
||
<div class="rev-desc">Suscripción mensual. Ingreso predecible desde el día 1.</div>
|
||
<div class="rev-metric" style="color:var(--accent);">Recurrente · Predecible</div>
|
||
<div class="biela-end"></div>
|
||
</div>
|
||
|
||
<!-- 2. Comisión por venta -->
|
||
<div class="rev-card rev-card--cyan reveal reveal-d2">
|
||
<div class="rev-num">02</div>
|
||
<div class="rev-icon" style="background:linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,212,255,0.04));">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--cyan)" stroke-width="2" stroke-linecap="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
|
||
</div>
|
||
<h4>Comisión Marketplace</h4>
|
||
<div class="rev-target">Refaccionarias PyMEs</div>
|
||
<div class="rev-desc">% por transacción. Crece con cada venta en la plataforma.</div>
|
||
<div class="rev-metric" style="color:var(--cyan);">Escala con volumen</div>
|
||
<div class="biela-end"></div>
|
||
</div>
|
||
|
||
<!-- 3. Posicionamiento -->
|
||
<div class="rev-card rev-card--purple reveal reveal-d3">
|
||
<div class="rev-num">03</div>
|
||
<div class="rev-icon" style="background:linear-gradient(135deg, rgba(167,139,250,0.12), rgba(167,139,250,0.04));">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--purple)" stroke-width="2" stroke-linecap="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||
</div>
|
||
<h4>Posicionamiento</h4>
|
||
<div class="rev-target">Refaccionarias grandes</div>
|
||
<div class="rev-desc">Visibilidad premium en búsquedas. Pagan por destacarse.</div>
|
||
<div class="rev-metric" style="color:var(--purple);">Alto margen · ~100% digital</div>
|
||
<div class="biela-end"></div>
|
||
</div>
|
||
|
||
<!-- 4. Data & Insights -->
|
||
<div class="rev-card rev-card--green reveal reveal-d4">
|
||
<div class="rev-num">04</div>
|
||
<div class="rev-icon" style="background:linear-gradient(135deg, rgba(63,185,80,0.12), rgba(63,185,80,0.04));">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2" stroke-linecap="round"><path d="M21 12V7H5a2 2 0 010-4h14v4"/><path d="M3 5v14a2 2 0 002 2h16v-5"/><path d="M18 12a2 2 0 000 4h4v-4h-4z"/></svg>
|
||
</div>
|
||
<h4>Comercio de Datos</h4>
|
||
<div class="rev-target">Fabricantes + Distribuidores</div>
|
||
<div class="rev-desc">Demanda real, tendencias de compra. Datos que nadie más tiene.</div>
|
||
<div class="rev-metric" style="color:var(--green);">Moat · Crece con la red</div>
|
||
<div class="biela-end"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════ SLIDE 7: COMPETENCIA ═══════════ -->
|
||
<section class="slide" id="slide-7">
|
||
<div class="glow glow--cyan" style="bottom:-200px;left:-100px;"></div>
|
||
<div class="slide-inner">
|
||
<div class="tag reveal">Panorama Competitivo</div>
|
||
<div class="title reveal reveal-d1">Nexus vs. el <span class="hl">mercado</span></div>
|
||
|
||
<table class="comp-matrix reveal reveal-d2">
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left;">Feature</th>
|
||
<th class="col-nexus">Nexus</th>
|
||
<th>Pitz</th>
|
||
<th>Meru</th>
|
||
<th>Jetz</th>
|
||
<th>POS Trad.</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Punto de venta</td>
|
||
<td class="col-nexus"><span class="cm-nexus-yes">✓</span></td>
|
||
<td><span class="cm-yes">✓</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
<td><span class="cm-yes">✓</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Inventario</td>
|
||
<td class="col-nexus"><span class="cm-nexus-yes">✓</span></td>
|
||
<td><span class="cm-partial">~</span></td>
|
||
<td><span class="cm-partial">~</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
<td><span class="cm-yes">✓</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Facturación CFDI</td>
|
||
<td class="col-nexus"><span class="cm-nexus-yes">✓</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
<td><span class="cm-yes">✓</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Catálogo cross-references</td>
|
||
<td class="col-nexus"><span class="cm-nexus-yes">✓</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
<td><span class="cm-partial">~</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Marketplace B2B</td>
|
||
<td class="col-nexus"><span class="cm-nexus-yes">✓</span></td>
|
||
<td><span class="cm-yes">✓</span></td>
|
||
<td><span class="cm-yes">✓</span></td>
|
||
<td><span class="cm-yes">✓</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Multi-bodega tiempo real</td>
|
||
<td class="col-nexus"><span class="cm-nexus-yes">✓</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
<td><span class="cm-partial">~</span></td>
|
||
<td><span class="cm-partial">~</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>IA / WhatsApp</td>
|
||
<td class="col-nexus"><span class="cm-nexus-yes">✓</span></td>
|
||
<td><span class="cm-yes">✓</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
<td><span class="cm-yes">✓</span></td>
|
||
<td><span class="cm-no">✕</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div style="margin-top:20px;text-align:center;" class="reveal reveal-d3">
|
||
<div class="card" style="display:inline-block;padding:14px 32px;">
|
||
<span style="font-size:0.95rem;color:var(--text-secondary);">Nexus es el único que combina <strong style="color:var(--accent);">POS + Inventario + CFDI + Marketplace + Catálogo</strong> en una sola plataforma</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="slide-sources">
|
||
Fuentes: <a href="https://clusterindustrial.com.mx/pitz-lanza-su-marketplace-inteligente-y-apuesta-por-la-digitalizacion-estructural-de-los-talleres-mecanicos-en-mexico/" target="_blank">Cluster Industrial — Pitz, 2026</a>
|
||
<span class="src-sep">|</span> <a href="https://www.ycombinator.com/companies/meru-com" target="_blank">Y Combinator — Meru</a>
|
||
<span class="src-sep">|</span> <a href="https://emprendedor.com/jetz-app-la-startup-de-refacciones-que-quiere-abastecer-a-los-240000-talleres-mecanicos-del-pais/" target="_blank">Emprendedor — Jetz App</a>
|
||
<span class="src-sep">|</span> <a href="https://www.sicar.mx/sistema-de-refaccionarias-punto-de-venta/" target="_blank">SICAR — POS Refaccionarias</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════ SLIDE 8: ROADMAP ═══════════ -->
|
||
<section class="slide" id="slide-8">
|
||
<div class="glow glow--cyan" style="top:-100px;left:-200px;"></div>
|
||
<div class="glow glow--orange" style="bottom:-150px;right:-100px;"></div>
|
||
<div class="slide-inner">
|
||
<div class="tag reveal">Roadmap</div>
|
||
<div class="title reveal reveal-d1">La carrera hacia la <span class="hl">escala</span></div>
|
||
|
||
<div class="racetrack reveal reveal-d2">
|
||
<div class="race-road"></div>
|
||
<div class="race-grid">
|
||
|
||
<!-- Mes 1: MVP -->
|
||
<div class="race-col">
|
||
<div class="race-flag">🏁</div>
|
||
<div class="race-period">Mes 1</div>
|
||
<div class="race-card" style="border-color:var(--accent);">
|
||
<h4 style="color:var(--accent);">MVP</h4>
|
||
<ul class="race-items">
|
||
<li><span class="rb" style="color:var(--accent);">▸</span> Punto de venta</li>
|
||
<li><span class="rb" style="color:var(--accent);">▸</span> Inventario</li>
|
||
<li><span class="rb" style="color:var(--accent);">▸</span> Facturación CFDI 4.0</li>
|
||
<li><span class="rb" style="color:var(--accent);">▸</span> VIN Decoder</li>
|
||
<li><span class="rb" style="color:var(--accent);">▸</span> Carrito multi-bodega</li>
|
||
</ul>
|
||
<div class="race-kpi" style="color:var(--accent);">
|
||
<svg class="race-kpi-icon" viewBox="0 0 18 11" fill="none"><path d="M2 10 A7 7 0 0 1 16 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="9" y1="9" x2="5" y2="5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="9" r="1.5" fill="currentColor"/></svg>
|
||
Refaccionarias y talleres PyMEs
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mes 3: Tracción -->
|
||
<div class="race-col">
|
||
<div class="race-flag">📈</div>
|
||
<div class="race-period">Mes 3</div>
|
||
<div class="race-card">
|
||
<h4 style="color:var(--cyan);">Tracción + IA</h4>
|
||
<ul class="race-items">
|
||
<li><span class="rb" style="color:var(--cyan);">▸</span> Chatbot IA en español</li>
|
||
<li><span class="rb" style="color:var(--cyan);">▸</span> WhatsApp Business API</li>
|
||
<li><span class="rb" style="color:var(--cyan);">▸</span> SaaS Refaccionarias</li>
|
||
<li><span class="rb" style="color:var(--cyan);">▸</span> 20 clientes activos</li>
|
||
<li><span class="rb" style="color:var(--cyan);">▸</span> Feedback → iteración</li>
|
||
</ul>
|
||
<div class="race-kpi" style="color:var(--cyan);">
|
||
<svg class="race-kpi-icon" viewBox="0 0 18 11" fill="none"><path d="M2 10 A7 7 0 0 1 16 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="9" y1="9" x2="7" y2="4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="9" r="1.5" fill="currentColor"/></svg>
|
||
20 refaccionarias y talleres
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mes 6: Catálogo + Gestión -->
|
||
<div class="race-col">
|
||
<div class="race-flag">⚡</div>
|
||
<div class="race-period">Mes 6</div>
|
||
<div class="race-card">
|
||
<h4 style="color:var(--green);">Catálogo + Gestión</h4>
|
||
<ul class="race-items">
|
||
<li><span class="rb" style="color:var(--green);">▸</span> Catálogo 1.5M+ partes live</li>
|
||
<li><span class="rb" style="color:var(--green);">▸</span> Órdenes de servicio Kanban</li>
|
||
<li><span class="rb" style="color:var(--green);">▸</span> BNPL / Crédito (APLAZO)</li>
|
||
<li><span class="rb" style="color:var(--green);">▸</span> Programa de lealtad</li>
|
||
</ul>
|
||
<div class="race-kpi" style="color:var(--green);">
|
||
<svg class="race-kpi-icon" viewBox="0 0 18 11" fill="none"><path d="M2 10 A7 7 0 0 1 16 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="9" y1="9" x2="11" y2="4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="9" r="1.5" fill="currentColor"/></svg>
|
||
50 refaccionarias y talleres
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mes 9: Alianza + Pre-Seed -->
|
||
<div class="race-col">
|
||
<div class="race-flag">🤝</div>
|
||
<div class="race-period">Mes 9</div>
|
||
<div class="race-card">
|
||
<h4 style="color:var(--purple);">Alianza + Pre-Seed</h4>
|
||
<ul class="race-items">
|
||
<li><span class="rb" style="color:var(--purple);">▸</span> Sync ERP tiempo real</li>
|
||
<li><span class="rb" style="color:var(--purple);">▸</span> Convenio refaccionaria nacional</li>
|
||
<li><span class="rb" style="color:var(--purple);">▸</span> Gestión de flotillas</li>
|
||
<li><span class="rb" style="color:var(--purple);">▸</span> Levantar ronda pre-semilla</li>
|
||
</ul>
|
||
<div class="race-kpi" style="color:var(--purple);">
|
||
<svg class="race-kpi-icon" viewBox="0 0 18 11" fill="none"><path d="M2 10 A7 7 0 0 1 16 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="9" y1="9" x2="13" y2="5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="9" r="1.5" fill="currentColor"/></svg>
|
||
1er alianza nacional
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mes 12: Marketplace -->
|
||
<div class="race-col">
|
||
<div class="race-flag">🛒</div>
|
||
<div class="race-period">Mes 12</div>
|
||
<div class="race-card">
|
||
<h4 style="color:var(--yellow);">Marketplace</h4>
|
||
<ul class="race-items">
|
||
<li><span class="rb" style="color:var(--yellow);">▸</span> Mercado Libre + Amazon</li>
|
||
<li><span class="rb" style="color:var(--yellow);">▸</span> IA por voz</li>
|
||
<li><span class="rb" style="color:var(--yellow);">▸</span> API pública</li>
|
||
<li><span class="rb" style="color:var(--yellow);">▸</span> Comisiones por transacción</li>
|
||
</ul>
|
||
<div class="race-kpi" style="color:var(--yellow);">
|
||
<svg class="race-kpi-icon" viewBox="0 0 18 11" fill="none"><path d="M2 10 A7 7 0 0 1 16 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="9" y1="9" x2="14" y2="4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="9" r="1.5" fill="currentColor"/></svg>
|
||
Marketplace live
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mes 15: Escala -->
|
||
<div class="race-col">
|
||
<div class="race-flag"></div>
|
||
<div class="race-period">Mes 15</div>
|
||
<div class="race-card">
|
||
<h4 style="color:var(--red);">Escala</h4>
|
||
<ul class="race-items">
|
||
<li><span class="rb" style="color:var(--red);">▸</span> 150 refaccionarias y talleres</li>
|
||
<li><span class="rb" style="color:var(--red);">▸</span> 50 refaccionarias en marketplace</li>
|
||
<li><span class="rb" style="color:var(--red);">▸</span> App móvil (PWA)</li>
|
||
</ul>
|
||
<div class="race-kpi" style="color:var(--red);">
|
||
<svg class="race-kpi-icon" viewBox="0 0 18 11" fill="none"><path d="M2 10 A7 7 0 0 1 16 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="9" y1="9" x2="15" y2="4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="9" r="1.5" fill="currentColor"/></svg>
|
||
Red + marketplace activo
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════ SLIDE 9: EQUIPO ═══════════ -->
|
||
<section class="slide" id="slide-9">
|
||
<div class="glow glow--orange" style="bottom:-200px;right:-150px;"></div>
|
||
<div class="slide-inner">
|
||
<div class="tag reveal">El Equipo</div>
|
||
<div class="title reveal reveal-d1">Quiénes están <span class="hl">detrás</span></div>
|
||
<div class="team-grid reveal reveal-d2">
|
||
<div class="card team-card card--glow">
|
||
<div class="team-avatar">IA</div>
|
||
<h3>Iván Alcaraz</h3>
|
||
<div class="role">Founder & CEO · Producto & Tech</div>
|
||
<p style="text-align:left;">
|
||
<span style="display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;"><span style="color:var(--accent);flex-shrink:0;">▸</span> Ing. en Sistemas Computacionales</span>
|
||
<span style="display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;"><span style="color:var(--accent);flex-shrink:0;">▸</span> 2 años en el equipo de IA de AWS</span>
|
||
<span style="display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;"><span style="color:var(--accent);flex-shrink:0;">▸</span> +5 años desarrollando sistemas administrativos</span>
|
||
<span style="display:flex;align-items:flex-start;gap:8px;"><span style="color:var(--accent);flex-shrink:0;">▸</span> 2 años construyendo herramientas para refaccionarias</span>
|
||
</p>
|
||
</div>
|
||
<div class="card team-card card--glow">
|
||
<div class="team-avatar">CT</div>
|
||
<h3>Carlos Torres</h3>
|
||
<div class="role">Co-Founder & CFO · Ventas & Finanzas</div>
|
||
<p style="text-align:left;">
|
||
<span style="display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;"><span style="color:var(--cyan);flex-shrink:0;">▸</span> Lic. Finanzas — Tec de Monterrey</span>
|
||
<span style="display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;"><span style="color:var(--cyan);flex-shrink:0;">▸</span> Lic. Administración — Montpellier Business School</span>
|
||
<span style="display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;"><span style="color:var(--cyan);flex-shrink:0;">▸</span> 4 años en ventas B2B · +$500K MXN cerrados</span>
|
||
<span style="display:flex;align-items:flex-start;gap:8px;"><span style="color:var(--cyan);flex-shrink:0;">▸</span> Experiencia directa con startups</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:24px;text-align:center;" class="reveal reveal-d3">
|
||
<div class="card" style="display:inline-flex;align-items:center;gap:24px;padding:16px 36px;">
|
||
<div style="text-align:center;">
|
||
<div style="font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px;">Ubicaciones</div>
|
||
<div style="font-family:var(--font-display);font-size:1rem;font-weight:700;">Tijuana & Guadalajara</div>
|
||
</div>
|
||
<div style="width:1px;height:30px;background:var(--border);"></div>
|
||
<div style="text-align:center;">
|
||
<div style="font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px;">Equipo combinado</div>
|
||
<div style="font-family:var(--font-display);font-size:1rem;font-weight:700;">Tech + Ventas B2B + Industria</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════ SLIDE 10: USO DE FONDOS ═══════════ -->
|
||
<section class="slide" id="slide-10">
|
||
<div class="glow glow--cyan" style="top:-200px;left:-100px;"></div>
|
||
<div class="slide-inner">
|
||
<div class="tag reveal">Uso de Fondos</div>
|
||
<div class="title reveal reveal-d1">El combustible: <span class="hl">$30K USD</span></div>
|
||
|
||
<div style="display:flex;align-items:center;gap:44px;" class="reveal reveal-d2">
|
||
<!-- Fuel Gauge SVG -->
|
||
<div style="flex-shrink:0;text-align:center;position:relative;">
|
||
<div style="position:absolute;bottom:55px;left:50%;transform:translateX(-50%);font-size:40px;z-index:3;">⛽</div>
|
||
<svg width="340" height="220" viewBox="0 0 340 220" fill="none">
|
||
<!-- Outer ring -->
|
||
<path d="M22 195 A148 148 0 0 1 318 195" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.15"/>
|
||
|
||
<!-- Background arc -->
|
||
<path d="M22 195 A148 148 0 0 1 318 195" stroke="#ffffff" stroke-width="30" stroke-linecap="round" opacity="0.08"/>
|
||
|
||
<!-- Minor ticks (white) -->
|
||
<line x1="30" y1="165" x2="42" y2="167" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.4"/>
|
||
<line x1="42" y1="115" x2="54" y2="121" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.4"/>
|
||
<line x1="130" y1="48" x2="135" y2="60" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.4"/>
|
||
<line x1="210" y1="48" x2="205" y2="60" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.4"/>
|
||
<line x1="295" y1="115" x2="283" y2="121" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.4"/>
|
||
<line x1="305" y1="165" x2="293" y2="167" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.4"/>
|
||
|
||
<!-- Zone labels -->
|
||
<text x="58" y="103" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="800" fill="#E0E0E0">$7K</text>
|
||
<text x="58" y="120" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="9" fill="var(--accent)" opacity="0.8">DEV</text>
|
||
|
||
<text x="140" y="48" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="800" fill="#E0E0E0">$8K</text>
|
||
<text x="140" y="65" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="9" fill="var(--green)" opacity="0.8">INFRA</text>
|
||
|
||
<text x="260" y="80" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="800" fill="#E0E0E0">$15K</text>
|
||
<text x="260" y="97" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="9" fill="var(--cyan)" opacity="0.8">VENTAS</text>
|
||
|
||
<!-- Needle pointing to "full" (right/ventas) -->
|
||
<line x1="170" y1="188" x2="275" y2="130" stroke="var(--text-primary)" stroke-width="3" stroke-linecap="round"/>
|
||
<circle cx="170" cy="188" r="9" fill="var(--accent)"/>
|
||
<circle cx="170" cy="188" r="4" fill="var(--bg-deep)"/>
|
||
|
||
<!-- Center label -->
|
||
<text x="170" y="215" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#E0E0E0" letter-spacing="0.08em">$30K USD</text>
|
||
|
||
<!-- E / F labels outside the arc -->
|
||
<text x="6" y="220" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="20" font-weight="800" fill="#ffffff">E</text>
|
||
<text x="334" y="220" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-size="20" font-weight="800" fill="#ffffff">F</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Legend as dashboard readouts -->
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:14px;">
|
||
<div class="card" style="padding:18px 22px;border-left:3px solid var(--cyan);">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
|
||
<span style="font-family:var(--font-mono);font-size:0.95rem;color:var(--cyan);font-weight:700;">Ventas y Marketing</span>
|
||
<span style="font-family:var(--font-mono);font-size:1.6rem;font-weight:800;color:var(--cyan);">$15K</span>
|
||
</div>
|
||
<div style="font-size:1.02rem;color:var(--text-secondary);">Equipo comercial, adquisición de refaccionarias y talleres</div>
|
||
</div>
|
||
<div class="card" style="padding:18px 22px;border-left:3px solid var(--green);">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
|
||
<span style="font-family:var(--font-mono);font-size:0.95rem;color:var(--green);font-weight:700;">Infraestructura</span>
|
||
<span style="font-family:var(--font-mono);font-size:1.6rem;font-weight:800;color:var(--green);">$8K</span>
|
||
</div>
|
||
<div style="font-size:1.02rem;color:var(--text-secondary);">APIs, servicios en la nube, hardware</div>
|
||
</div>
|
||
<div class="card" style="padding:18px 22px;border-left:3px solid var(--accent);">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
|
||
<span style="font-family:var(--font-mono);font-size:0.95rem;color:var(--accent);font-weight:700;">Desarrollo</span>
|
||
<span style="font-family:var(--font-mono);font-size:1.6rem;font-weight:800;color:var(--accent);">$7K</span>
|
||
</div>
|
||
<div style="font-size:1.02rem;color:var(--text-secondary);">Finalizar MVP: POS, inventario, facturación</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SAFE Terms -->
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px;" class="reveal reveal-d3">
|
||
<div class="card" style="text-align:center;padding:18px 14px;">
|
||
<div style="font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;">Instrumento</div>
|
||
<div style="font-family:var(--font-mono);font-size:1.4rem;font-weight:800;color:var(--text-primary);">SAFE</div>
|
||
</div>
|
||
<div class="card" style="text-align:center;padding:18px 14px;border-color:var(--accent);">
|
||
<div style="font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;">Valuation Cap</div>
|
||
<div style="font-family:var(--font-mono);font-size:1.4rem;font-weight:800;color:var(--accent);">$1M USD</div>
|
||
</div>
|
||
<div class="card" style="text-align:center;padding:18px 14px;">
|
||
<div style="font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;">Descuento</div>
|
||
<div style="font-family:var(--font-mono);font-size:1.4rem;font-weight:800;color:var(--cyan);">25%</div>
|
||
</div>
|
||
<div class="card" style="text-align:center;padding:18px 14px;">
|
||
<div style="font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;">Ticket Mínimo</div>
|
||
<div style="font-family:var(--font-mono);font-size:1.4rem;font-weight:800;color:var(--green);">$1,500 USD</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════ SLIDE 11: CONTACTO ═══════════ -->
|
||
<section class="slide" id="slide-11">
|
||
<div class="glow glow--orange" style="top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;opacity:0.08;"></div>
|
||
<div class="contact-finish"></div>
|
||
<div class="contact-road"></div>
|
||
<div class="slide-inner contact-center">
|
||
<div class="cover-logo-wheel reveal" style="margin:0 auto 24px;">N</div>
|
||
<div class="cover-title reveal reveal-d1" style="text-align:center;">NEXUS <span class="hl">AUTOPARTS</span></div>
|
||
<div class="contact-divider reveal reveal-d2"></div>
|
||
|
||
<div class="contact-info reveal reveal-d3">
|
||
<div class="contact-item" style="font-size:1.2rem;font-weight:700;color:var(--text-primary);font-family:var(--font-display);">Iván Alcaraz</div>
|
||
<div class="contact-item"><a href="mailto:ialcarazsalazar@consultoria-as.com">ialcarazsalazar@consultoria-as.com</a></div>
|
||
<div class="contact-item" style="margin-top:16px;">Tijuana & Guadalajara, México</div>
|
||
</div>
|
||
|
||
<a href="mailto:ialcarazsalazar@consultoria-as.com" class="contact-cta reveal reveal-d4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
Acelera con nosotros
|
||
</a>
|
||
|
||
<div class="contact-tagline reveal reveal-d5">"Tu conexión directa con las partes que necesitas"</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ Navigation ═══ -->
|
||
<nav class="nav" aria-label="Slide navigation">
|
||
<button class="nav-btn" onclick="goSlide(-1)" aria-label="Previous slide">←</button>
|
||
<div class="nav-dots" id="nav-dots"></div>
|
||
<span class="nav-counter" id="nav-counter">01/13</span>
|
||
<button class="nav-btn" onclick="goSlide(1)" aria-label="Next slide">→</button>
|
||
</nav>
|
||
|
||
<script>
|
||
(function() {
|
||
const TOTAL = 11;
|
||
let current = 1;
|
||
const dotsEl = document.getElementById('nav-dots');
|
||
const counterEl = document.getElementById('nav-counter');
|
||
|
||
// ── Create nav dots ──
|
||
for (let i = 1; i <= TOTAL; i++) {
|
||
const dot = document.createElement('button');
|
||
dot.className = 'nav-dot' + (i === 1 ? ' active' : '');
|
||
dot.setAttribute('aria-label', 'Ir a slide ' + i);
|
||
dot.dataset.slide = i;
|
||
dot.addEventListener('click', function() { scrollToSlide(+this.dataset.slide); });
|
||
dotsEl.appendChild(dot);
|
||
}
|
||
|
||
function pad(n) { return String(n).padStart(2, '0'); }
|
||
|
||
function scrollToSlide(n) {
|
||
n = Math.max(1, Math.min(TOTAL, n));
|
||
const el = document.getElementById('slide-' + n);
|
||
if (el) el.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
|
||
window.goSlide = function(dir) { scrollToSlide(current + dir); };
|
||
|
||
function updateCurrent() {
|
||
const slides = document.querySelectorAll('.slide');
|
||
let closest = 1, minDist = Infinity;
|
||
slides.forEach(function(s, i) {
|
||
const dist = Math.abs(s.getBoundingClientRect().top);
|
||
if (dist < minDist) { minDist = dist; closest = i + 1; }
|
||
});
|
||
if (closest !== current) {
|
||
current = closest;
|
||
counterEl.textContent = pad(current) + '/' + pad(TOTAL);
|
||
document.querySelectorAll('.nav-dot').forEach(function(d, i) {
|
||
d.classList.toggle('active', i + 1 === current);
|
||
});
|
||
}
|
||
}
|
||
|
||
// ── Intersection Observer for scroll animations ──
|
||
const observer = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(entry) {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
|
||
|
||
document.querySelectorAll('.reveal').forEach(function(el) {
|
||
observer.observe(el);
|
||
});
|
||
|
||
// ── Throttled scroll ──
|
||
let ticking = false;
|
||
window.addEventListener('scroll', function() {
|
||
if (!ticking) {
|
||
requestAnimationFrame(function() { updateCurrent(); ticking = false; });
|
||
ticking = true;
|
||
}
|
||
});
|
||
|
||
// ── Keyboard nav ──
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === 'PageDown') {
|
||
e.preventDefault(); goSlide(1);
|
||
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') {
|
||
e.preventDefault(); goSlide(-1);
|
||
} else if (e.key === 'Home') {
|
||
e.preventDefault(); scrollToSlide(1);
|
||
} else if (e.key === 'End') {
|
||
e.preventDefault(); scrollToSlide(TOTAL);
|
||
}
|
||
});
|
||
|
||
// ── Touch / Swipe support ──
|
||
let touchStartY = 0;
|
||
document.addEventListener('touchstart', function(e) {
|
||
touchStartY = e.changedTouches[0].screenY;
|
||
}, { passive: true });
|
||
|
||
document.addEventListener('touchend', function(e) {
|
||
const deltaY = touchStartY - e.changedTouches[0].screenY;
|
||
if (Math.abs(deltaY) > 60) {
|
||
goSlide(deltaY > 0 ? 1 : -1);
|
||
}
|
||
}, { passive: true });
|
||
|
||
updateCurrent();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|