/* Pagina.jsx — la HOME real tras la transición de la tecla.
Apertura: nav sticky + hero (el wordmark donde aterriza el punto) + manifiesto.
Compuesta con el design system sobre window.RmorenodotcomDesignSystem_019de6,
montada en #page. Reglas de sistema mandan: dark-adaptive, 85/15, voz nosotros. */
const DS = window.RmorenodotcomDesignSystem_019de6 || window;
const { Wordmark, Button, Clock, Eyebrow, DotIcon, DotField, Input, Select, Textarea, Tag } = DS;
const MapaEstelar = window.MapaEstelar;
const HeroGlobe = window.HeroGlobe;
const AsciiPortrait = window.AsciiPortrait;
const DotMorph = window.DotMorph;
/* ── i18n · ES (default, México) / EN (US). El selector vive en el navbar. Cambiar
idioma re-renderiza toda la home; MapaEstelar escucha 'rm-lang' por su cuenta. */
const I18N = {
es: {
'nav.web': 'Web', 'nav.ecommerce': 'E-commerce', 'nav.brand': 'Marca', 'nav.continuo': 'Redes', 'nav.portal': 'portal', 'nav.contacto': 'contacto', 'nav.works': 'trabajos', 'nav.manifiesto': 'manifiesto', 'nav.servicios': 'servicios',
'hero.eyebrow': 'Mexicali, BC · Estudio de diseño digital',
'hero.head': 'Eliges lo que necesitas. Precio fijo, tiempo claro.',
'hero.cta': 'cuéntanos tu proyecto', 'hero.quiet': 'explora el ecosistema ↓', 'backtop.label': 'volver arriba',
'shint.title': 'Esta página funciona con scroll',
'shint.cue': 'sigue bajando', 'shint.close': 'cerrar',
'manifesto.eyebrow': 'manifiesto',
'manifesto.text': 'Ideamos contigo, planeamos a tu medida e integramos cada pieza hasta que todo encaja. Así una idea se vuelve algo funcional',
'steps.eyebrow': 'el proceso', 'steps.title': 'cómo trabajamos', 'steps.unit': 'paso',
'steps.arrival': 'Recorriste el ecosistema. Acoplamos en la estación — así es como trabajamos.',
'steps.station': 'estación rmx-00', 'steps.bay': 'bahía de trabajo', 'steps.docked': 'acoplado',
'steps.1.l': 'elige', 'steps.1.d': 'Eliges el servicio que necesitas.',
'steps.2.l': 'cotiza', 'steps.2.d': 'Cotización clara: precio fijo y tiempo definido.',
'steps.3.l': 'ejecuta', 'steps.3.d': 'Ejecutamos en el plazo acordado.',
'steps.4.l': 'entrega', 'steps.4.d': 'Entregamos listo para usar.',
'person.eyebrow': 'quién está detrás · cómo trabajamos', 'person.title': 'No hablas con una agencia. Hablas conmigo.',
'person.flow': 'Tomamos tu idea, le ponemos precio y tiempo, y la entregamos lista:',
'person.body': 'Soy Rubén. Yo cotizo, yo diseño y yo te respondo — sin intermediarios ni promesas que no pueda cumplir. Cuando decimos sí, cumplimos. Cuando decimos no, también.',
'person.name': 'Rubén Alberto Moreno Fonseca', 'person.role': 'fundador · diseñador',
'person.bodyShort': 'Soy Rubén. Yo cotizo, yo diseño y yo te respondo — sin intermediarios.',
'person.t1': 'respondo yo mismo', 'person.t2': 'en menos de 24 h hábiles', 'person.t3': 'desde Mexicali, B.C',
'person.status': 'en línea', 'person.cta': 'click aquí para hablar', 'person.photo': 'Suelta tu foto profesional',
'proceso.kicker': 'cómo trabajamos · te llevo de la mano',
'proceso.s0.t': 'Te llevo de la mano',
'proceso.s0.d': 'Antes de cotizar, déjame enseñarte cómo trabajo. Cuatro pasos, sin intermediarios ni letras chiquitas. Baja y te explico.',
'proceso.s1.t': 'Eliges',
'proceso.s1.d': 'Me cuentas qué necesitas y yo te ayudo a aterrizarlo en un servicio claro — ni de más, ni de menos.',
'proceso.s2.t': 'Cotizo',
'proceso.s2.d': 'Te doy precio fijo y tiempo exacto antes de empezar. Lo que ves es lo que pagas; sin sorpresas a medio camino.',
'proceso.s3.t': 'Ejecuto',
'proceso.s3.d': 'Me pongo manos a la obra y te muestro cada avance. Nada sigue adelante sin tu visto bueno.',
'proceso.s4.t': 'Entrego',
'proceso.s4.d': 'Recibes todo listo para usar, con archivos y respaldo. Y sigo aquí por si necesitas algo más.',
'proceso.r1': 'elige', 'proceso.r2': 'cotiza', 'proceso.r3': 'ejecuta', 'proceso.r4': 'entrega',
'proceso.hint': 'baja para empezar', 'proceso.signoff': 'soy Rubén · y te respondo yo mismo',
'proceso.stepword': 'paso', 'proceso.introIdx': 'el proceso · 4 pasos',
'works.eyebrow': 'el trabajo habla', 'works.count': 'proyectos · mexicali & más allá', 'works.cta': 'ver todos los proyectos',
'lead.eyebrow': 'el siguiente paso', 'lead.title': 'cuéntanos qué quieres construir',
'lead.name': 'Nombre', 'lead.namePh': '¿Cómo te llamas?', 'lead.email': 'Email', 'lead.emailPh': 'tucorreo@dominio.com',
'lead.cat': '¿Qué quieres construir?', 'lead.msg': 'Cuéntanos', 'lead.msgPh': 'Una línea de qué necesitas o a dónde quieres llegar.',
'lead.cta': 'empecemos',
'opt.web': 'Web', 'opt.ecommerce': 'E-commerce', 'opt.brand': 'Marca', 'opt.continuo': 'Redes', 'opt.noseguro': 'No estoy seguro',
'quote.tag': 'esperando confirmación', 'quote.sub': 'Precio fijo y tiempo definido. Sin sorpresas, sin letra chica.',
'quote.cta': 'agenda una llamada', 'quote.quiet': 'recibe tu cotización formal',
'quote.headA': 'listo, ', 'quote.headB': ' — aquí está tu estimado', 'quote.va': 'va', 'quote.time': 'entrega en ',
'mos.display': 'trabajemos juntos', 'mos.sub': 'Eliges lo que necesitas, te damos precio fijo y tiempo claro. Respondemos en menos de 24 h hábiles.',
'mos.human': 'Ing. Rubén Moreno', 'mos.humanState': '5 años de experiencia',
'mos.avail': 'disponible para proyecto', 'mos.availDate': '· junio 2026',
'mos.callA': '¿Prefieres hablarlo? ', 'mos.callLink': 'agenda una llamada', 'mos.callB': ' de 20 min.',
'mos.scope': '¿Qué tan grande?', 'mos.submit': 'ver mi estimado', 'mos.note': 'Precio al instante. Sin compromiso.',
'mos.contOpt': 'opcional', 'mos.contQ': '¿Lo mantenemos al día después?', 'mos.contSub': 'Diseño recurrente, mes con mes — opcional. Lo sumas ahora o lo decides después, sin compromiso anual.',
'mos.fixed': 'arranca en', 'mos.deliver': 'entrega en ', 'mos.deliverLbl': 'entrega', 'mos.from': 'desde', 'mos.monthly': '/mes · continuo',
'mos.disc': '“desde” es tu tarifa de arranque, no un precio cerrado. El alcance final lo definimos juntos en una llamada de 20 min — sin compromiso.',
'mos.agenda': 'agendar llamada', 'mos.wa': 'whatsapp', 'mos.restart': 'empezar de nuevo', 'mos.back': 'cambiar algo',
'mos.foot': 'Te responde Rubén, en persona — en menos de 24 h hábiles.',
'mos.tag.web': 'Sitios y plataformas.', 'mos.tag.ecommerce': 'Tiendas que venden.', 'mos.tag.brand': 'Identidad de marca.',
'footer.tag': 'diseño con punto',
'hud.channel': 'canal directo · mxli', 'hud.ready': 'listo para transmitir', 'hud.close': 'cerrar',
},
en: {
'nav.web': 'Web', 'nav.ecommerce': 'Online Store', 'nav.brand': 'Brand', 'nav.continuo': 'Social Media', 'nav.portal': 'portal', 'nav.contacto': 'contact', 'nav.works': 'works', 'nav.manifiesto': 'manifesto', 'nav.servicios': 'services',
'hero.eyebrow': 'Mexicali, BC · Digital design studio',
'hero.head': 'You pick what you need. Fixed price, clear timeline.',
'hero.cta': 'tell us your project', 'hero.quiet': 'explore the ecosystem ↓', 'backtop.label': 'back to top',
'shint.title': 'This page works by scrolling',
'shint.cue': 'keep going', 'shint.close': 'close',
'manifesto.eyebrow': 'manifesto',
'manifesto.text': 'We ideate with you, plan to your size and integrate every piece until it all fits. So an idea becomes something that works',
'steps.eyebrow': 'the process', 'steps.title': 'how we work', 'steps.unit': 'step',
'steps.arrival': 'You toured the ecosystem. Now we dock at the station — here’s how we work.',
'steps.station': 'station rmx-00', 'steps.bay': 'work bay', 'steps.docked': 'docked',
'steps.1.l': 'pick', 'steps.1.d': 'You pick the service you need.',
'steps.2.l': 'quote', 'steps.2.d': 'A clear quote: fixed price, defined timeline.',
'steps.3.l': 'build', 'steps.3.d': 'We execute within the agreed window.',
'steps.4.l': 'deliver', 'steps.4.d': 'We hand it over ready to use.',
'person.eyebrow': 'who’s behind this · how we work', 'person.title': 'You’re not talking to an agency. You’re talking to me.',
'person.flow': 'We take your idea, put a price and timeline on it, and deliver it ready:',
'person.body': 'I’m Rubén. I quote it, I design it, and I answer you — no middlemen, no promises I can’t keep. When we say yes, we follow through. When we say no, too.',
'person.name': 'Rubén Alberto Moreno Fonseca', 'person.role': 'founder · designer',
'person.bodyShort': 'I’m Rubén. I quote it, I design it, and I answer you — no middlemen.',
'person.t1': 'I answer you myself', 'person.t2': 'in under 24 business hours', 'person.t3': 'from Mexicali, B.C',
'person.status': 'online', 'person.cta': 'click here to talk', 'person.photo': 'Drop your professional photo',
'proceso.kicker': 'how we work · I’ll walk you through it',
'proceso.s0.t': 'I’ll walk you through it',
'proceso.s0.d': 'Before we talk price, let me show you how I work. Four steps, no middlemen, no fine print. Scroll and I’ll explain.',
'proceso.s1.t': 'You choose',
'proceso.s1.d': 'You tell me what you need and I help you shape it into a clear service — no more, no less.',
'proceso.s2.t': 'I quote',
'proceso.s2.d': 'You get a fixed price and exact timeline before we start. What you see is what you pay; no surprises midway.',
'proceso.s3.t': 'I build',
'proceso.s3.d': 'I get to work and show you every step. Nothing moves forward without your OK.',
'proceso.s4.t': 'I deliver',
'proceso.s4.d': 'You get everything ready to use, with files and backup. And I’m still here if you need anything else.',
'proceso.r1': 'choose', 'proceso.r2': 'quote', 'proceso.r3': 'build', 'proceso.r4': 'deliver',
'proceso.hint': 'scroll to start', 'proceso.signoff': 'I’m Rubén · and I answer you myself',
'proceso.stepword': 'step', 'proceso.introIdx': 'the process · 4 steps',
'works.eyebrow': 'the work speaks', 'works.count': 'projects · mexicali & beyond', 'works.cta': 'view all projects',
'lead.eyebrow': 'the next step', 'lead.title': 'tell us what you want to build',
'lead.name': 'Name', 'lead.namePh': 'What’s your name?', 'lead.email': 'Email', 'lead.emailPh': 'you@domain.com',
'lead.cat': 'What do you want to build?', 'lead.msg': 'Tell us', 'lead.msgPh': 'One line on what you need or where you want to go.',
'lead.cta': 'let’s start',
'opt.web': 'Web', 'opt.ecommerce': 'Online Store', 'opt.brand': 'Brand', 'opt.continuo': 'Social Media', 'opt.noseguro': 'Not sure yet',
'quote.tag': 'awaiting confirmation', 'quote.sub': 'Fixed price, defined timeline. No surprises, no fine print.',
'quote.cta': 'book a call', 'quote.quiet': 'get your formal quote',
'quote.headA': 'done, ', 'quote.headB': ' — here’s your estimate', 'quote.va': 'there', 'quote.time': 'delivered in ',
'mos.display': 'let’s work together', 'mos.sub': 'You pick what you need, we give you a fixed price and a clear timeline. We answer in under 24 business hours.',
'mos.human': 'Ing. Rubén Moreno', 'mos.humanState': '5 years of experience',
'mos.avail': 'available for project', 'mos.availDate': '· june 2026',
'mos.callA': 'Prefer to talk it through? ', 'mos.callLink': 'book a call', 'mos.callB': ' — 20 min.',
'mos.scope': 'How big?', 'mos.submit': 'see my estimate', 'mos.note': 'Instant price. No commitment.',
'mos.contOpt': 'optional', 'mos.contQ': 'Keep it fresh afterward?', 'mos.contSub': 'Recurring design, month to month — optional. Add it now or decide later, no annual lock-in.',
'mos.fixed': 'starts at', 'mos.deliver': 'delivered in ', 'mos.deliverLbl': 'delivery', 'mos.from': 'from', 'mos.monthly': '/mo · ongoing',
'mos.disc': '“from” is your starting rate, not a closed price. We define the final scope together in a 20-min call — no commitment.',
'mos.agenda': 'book a call', 'mos.wa': 'whatsapp', 'mos.restart': 'start over', 'mos.back': 'change something',
'mos.foot': 'Rubén answers you, in person — in under 24 business hours.',
'mos.tag.web': 'Sites & platforms.', 'mos.tag.ecommerce': 'Stores that sell.', 'mos.tag.brand': 'Brand identity.',
'footer.tag': 'design with a dot',
'hud.channel': 'direct channel · mxli', 'hud.ready': 'ready to transmit', 'hud.close': 'close',
},
};
let LANG = 'es';
try { LANG = localStorage.getItem('rm_lang') || 'es'; } catch (e) {}
function t(k) { return (I18N[LANG] && I18N[LANG][k]) || I18N.es[k] || k; }
const TYPE_I18N = {
'tienda + marca': 'store + brand', 'tienda + merch': 'store + merch', 'brand development': 'brand development',
'web + motion': 'web + motion', 'motion graphics': 'motion graphics', 'portal de noticias': 'news portal',
'diseño web': 'web design', 'motion · lyric': 'motion · lyric', 'catálogo + marca': 'catalog + brand',
'social media': 'social media', 'desarrollo web': 'web development', 'cover · visual': 'cover · visual',
};
function tType(s) { return LANG === 'en' ? (TYPE_I18N[s] || s) : s; }
function setLang(l) {
if (l === LANG) return;
LANG = l;
try { localStorage.setItem('rm_lang', l); } catch (e) {}
document.documentElement.setAttribute('lang', l === 'en' ? 'en' : 'es');
window.dispatchEvent(new CustomEvent('rm-lang', { detail: l }));
if (window.rmRenderPage) window.rmRenderPage();
}
window.rmGetLang = function () { return LANG; };
window.rmSetLang = setLang;
/* selector de idioma — segmentado ES / EN (México · US), lenguaje de la casa */
function LangToggle({ className }) {
return (
);
}
/* ── el ecosistema · folders que se apilan al scroll ───────────────────── */
const FOLDERS = [
{
n: '01', label: 'web', nameKey: 'nav.web', cat: 'var(--cat-azure)', mood: 'pulse', onInk: false,
solves: 'Sitios y landing pages que cargan rápido y están hechos para convertir.',
files: ['landing de una página', 'sitio multipágina', 'plataforma a medida'],
},
{
n: '02', label: 'e-commerce', nameKey: 'nav.ecommerce', cat: 'var(--cat-verde)', mood: 'rise', onInk: false,
solves: 'Tiendas en línea listas para vender y fáciles de administrar.',
files: ['tienda Shopify', 'catálogo + inventario', 'checkout optimizado'],
},
{
n: '03', label: 'brand', nameKey: 'nav.brand', cat: 'var(--cat-sienna)', mood: 'breathe', onInk: false,
solves: 'Identidad visual con carácter, de la marca al último detalle.',
files: ['identidad de marca', 'sistema visual', 'guía y assets'],
},
{
n: '04', label: 'continuo', nameKey: 'nav.continuo', cat: 'var(--cat-yellow)', mood: 'chase', onInk: false,
solves: 'Mantenimiento y redes, mes con mes, sin que tú lo cargues.',
files: ['mantenimiento web', 'gestión de redes', 'soporte continuo'],
},
];
function Folder({ f, i }) {
return (
