/* ===== core/styles/tokens.css ===== */ /* ============================================================ tokens.css — tokens de marca OpenCard (fuente de verdad). Editables desde v2/config/theme.tokens.json (el build los appendea como override al final del bundle si existen). ============================================================ */ :root { --purple: #542DE3; --purple-deep: #3B1FA8; --purple-dark: #1F106B; --purple-light: #9E88F0; --mint: #10f4ae; --paytech-blue: #0027BA; --text: #14142B; --text-soft: #6B6B80; --bg-dark: #08081a; --font: 'Funnel Display', 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* ===== core/styles/reset.css ===== */ /* ============================================================ reset.css — reset mínimo + estilos base del . ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } body { font-family: var(--font); background: #ffffff; color: var(--text); font-weight: 500; line-height: 1.5; overflow: hidden; } /* ===== core/styles/scene.css ===== */ /* ============================================================ scene.css — estructura común de cada slide del storytelling. Swiper container + .swiper-slide.scene + scene-bg/scene-content + partículas flotantes (.particles/.particle). ============================================================ */ /* Swiper container */ .main-swiper { width: 100vw; height: 100vh; } /* Cada slide ocupa 100vh y centra su contenido */ .swiper-slide.scene { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .scene-bg { position: absolute; inset: 0; z-index: 0; will-change: transform; } .scene-bg::after { /* Vignette desactivado en modo claro */ display: none; } .scene-content { position: relative; width: 100%; max-width: 1240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 40px); /* Padding asimétrico: deja espacio a la derecha para la línea de tiempo (timeline ocupa ~28px + 24px margen + label oculto = ~80px). */ padding: 60px 100px 60px 60px; z-index: 1; text-align: center; } /* Partículas flotantes en fondos oscuros (las inyecta ambient.js) */ .particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .particle { position: absolute; width: 3px; height: 3px; background: rgba(84, 45, 227, 0.25); border-radius: 50%; box-shadow: 0 0 10px rgba(16, 244, 174, 0.35); will-change: transform; animation: particleFloat var(--dur, 12s) ease-in-out infinite; animation-delay: var(--delay, 0s); left: var(--x, 50%); top: var(--y, 50%); opacity: var(--op, 0.4); } @keyframes particleFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--dx, 20px), var(--dy, -30px)); } } /* ===== core/styles/typography.css ===== */ /* ============================================================ typography.css — sistema tipográfico común a todas las secciones. Headings, párrafos, kicker, highlight, y los wrappers que usa el motor de text-reveal (.story-char, .story-word, .swap-target). ============================================================ */ h1, h2, h3 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; } .scene-content h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 900; letter-spacing: -0.03em; max-width: 1100px; color: var(--text); } .scene-content h2 { font-size: clamp(2rem, 5.5vw, 4rem); font-weight: 900; letter-spacing: -0.025em; max-width: 1000px; color: var(--text); } .scene-content p { font-size: clamp(1.05rem, 1.8vw, 1.4rem); max-width: 640px; color: #42424f; font-weight: 500; line-height: 1.55; } .scene-content .kicker { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--purple); opacity: 0.85; /* Kickers ocultos por decisión de diseño. Para volverlos a mostrar, quitar la línea siguiente. El contenido sigue vivo en los content.json — el editor los puede editar aunque no se vean. */ display: none; } .story-highlight { color: var(--mint); } /* Palabra que alterna (data-swap-word) — resaltada como con marcador. El span .swap-highlight (insertado por JS) se "pinta" de izq a der como un marcador real cuando aparece la palabra y se "borra" de der a izq cuando cambia. */ .swap-target { position: relative; display: inline-block; text-align: center; vertical-align: baseline; white-space: nowrap; color: var(--text); z-index: 1; } .swap-highlight { position: absolute; top: 18%; bottom: 14%; background: rgba(16, 244, 174, 0.55); border-radius: 4px; z-index: -1; pointer-events: none; left: 0; width: 0; box-shadow: 0 1px 3px rgba(16, 244, 174, 0.25); filter: blur(0.3px); } /* Text reveal — chars envueltos por el motor. line-height 1.2 + padding para que descendentes (g, j, p, q, y) NO se recorten por overflow:hidden. */ .story-char { display: inline-block; overflow: hidden; vertical-align: baseline; line-height: 1.2; padding-bottom: 0.12em; } .story-char-i { display: inline-block; will-change: transform, opacity; line-height: 1; } .story-word { display: inline-block; } /* Highlight char (clase que un wire de sección añade a chars específicos). */ .story-char-i.is-highlight { color: var(--mint); transition: transform 0.4s ease; } /* ===== core/styles/scroll-indicator.css ===== */ /* ============================================================ scroll-indicator.css — DOS indicadores distintos: 1) .scroll-indicator (hero, slide 0): Texto "scroll para empezar" + flecha simple ↓ con bounce. Es el saludo de bienvenida — más texto, más prominente. 2) .scroll-indicator-next (slides intermedios): Stack de 3 chevrons con onda secuencial, sin texto. Es el "hay más" sutil que se pinta en cada sección excepto el hero y el footer. ambient.js los administra: activeIndex 0 → indicator, intermedios → indicator-next, último → ninguno. ============================================================ */ /* ---------- Base común (posición + transición) ---------- */ .scroll-indicator, .scroll-indicator-next { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 9997; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } .scroll-indicator.is-visible, .scroll-indicator-next.is-visible { opacity: 1; } /* ---------- Indicador del hero (slide 0) ---------- */ .scroll-indicator { gap: 8px; } .scroll-indicator.is-visible { opacity: 0.7; animation: scrollIndicatorBounce 2.2s ease-in-out infinite; } .scroll-text { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-soft, #6B6B80); } .scroll-arrow { font-size: 1.2rem; color: var(--purple); } @keyframes scrollIndicatorBounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ---------- Indicador intermedio (chevron stack) ---------- */ .scroll-indicator-next { gap: 0; } .scroll-chevrons { display: flex; flex-direction: column; align-items: center; } .scroll-chev { width: 22px; height: 22px; color: var(--purple); margin-top: -10px; opacity: 0; animation: scrollChevWave 1.8s ease-in-out infinite; will-change: transform, opacity; } .scroll-chev:nth-child(1) { animation-delay: 0s; margin-top: 0; } .scroll-chev:nth-child(2) { animation-delay: 0.2s; } .scroll-chev:nth-child(3) { animation-delay: 0.4s; color: var(--mint); } @keyframes scrollChevWave { 0% { opacity: 0; transform: translateY(-4px); } 35% { opacity: 1; transform: translateY(0); } 70% { opacity: 0.4; transform: translateY(6px); } 100% { opacity: 0; transform: translateY(8px); } } /* ---------- Accesibilidad ---------- */ @media (prefers-reduced-motion: reduce) { .scroll-indicator.is-visible { animation: none; } .scroll-chev { animation: none; opacity: 0.85; transform: none; } } /* ---------- Mobile ---------- */ @media (max-width: 640px) { .scroll-indicator, .scroll-indicator-next { bottom: 24px; } .scroll-text { font-size: 0.6rem; } .scroll-arrow { font-size: 1.1rem; } .scroll-chev { width: 18px; height: 18px; margin-top: -8px; } .scroll-chev:nth-child(1) { margin-top: 0; } } /* ===== core/styles/timeline.css ===== */ /* ============================================================ timeline.css — línea de tiempo lateral ("máquina del tiempo"). El step activo siempre queda en el centro; pasado arriba, futuro abajo. El JS (timeline.js) calcula los offsets. ============================================================ */ .timeline { position: fixed; top: 0; right: 24px; height: 100vh; display: flex; align-items: center; pointer-events: none; z-index: 9998; overflow: hidden; } /* Track viejo y barra de progreso — desactivados (no se usan en V2). */ .timeline-track { display: none; } .timeline-progress { display: none; } /* La línea estática vive como ::before del list — exactamente del alto del list, así los íconos viajan dentro de sus límites. */ .timeline-list::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent 0%, rgba(20, 20, 43, 0.12) 8%, rgba(20, 20, 43, 0.12) 92%, transparent 100%); border-radius: 1px; pointer-events: none; z-index: 0; } .timeline-list { position: relative; width: 28px; height: 88vh; z-index: 1; pointer-events: auto; } .timeline-step { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, opacity; } .timeline-step button { display: block; width: 28px; height: 28px; padding: 0; background: transparent; border: none; cursor: pointer; position: relative; } .timeline-icon { width: 28px; height: 28px; border-radius: 50%; background: #ffffff; border: 1.5px solid rgba(20, 20, 43, 0.15); display: flex; align-items: center; justify-content: center; color: rgba(20, 20, 43, 0.5); transition: all 0.3s ease; } .timeline-icon svg { width: 14px; height: 14px; } /* Label flotante: position absolute para que no desplace los íconos. Aparece a la izquierda del ícono al hacer hover o cuando está activo. */ .timeline-label { position: absolute; top: 50%; right: calc(100% + 14px); transform: translateY(-50%) translateX(8px); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; white-space: nowrap; } /* Hover: muestra el label sin mover el ícono */ .timeline-step:hover .timeline-label { opacity: 1; transform: translateY(-50%) translateX(0); } .timeline-step:hover .timeline-icon { border-color: var(--purple); color: var(--purple); } /* Paso activo: ícono mint con glow */ .timeline-step.is-active .timeline-icon { background: var(--mint); border-color: var(--mint); color: white; box-shadow: 0 0 16px rgba(16, 244, 174, 0.5); } .timeline-step.is-active .timeline-label { opacity: 1; transform: translateY(-50%) translateX(0); color: var(--purple); } /* Pasos ya completados (antes del activo): ícono morado */ .timeline-step.is-done .timeline-icon { background: var(--purple); border-color: var(--purple); color: white; } /* ===== core/styles/responsive.css ===== */ /* ============================================================ responsive.css — media queries COMUNES a todas las secciones. Reglas específicas de cada sección viven en su propio .css. ============================================================ */ @media (max-width: 768px) { .scene-content { padding: 40px 16px; } .scene-content h1 { font-size: clamp(2rem, 9vw, 3.5rem); } .scene-content h2 { font-size: clamp(1.7rem, 7vw, 2.6rem); } } @media (max-width: 640px) { .timeline { right: 12px; } .timeline-list { gap: 16px; } .timeline-icon { width: 22px; height: 22px; } .timeline-icon svg { width: 11px; height: 11px; } .timeline-label { display: none; } } /* === theme override (theme.tokens.json) === */ :root { --purple: #542DE3; --purple-deep: #3B1FA8; --purple-dark: #1F106B; --purple-light: #9E88F0; --mint: #10f4ae; --paytech-blue: #0027BA; --text: #14142B; --text-soft: #6B6B80; --bg-dark: #08081a; --font: 'Funnel Display', 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* ===== sections/hero/hero.css ===== */ /* ============================================================ hero.css — CSS EXCLUSIVO del hero (data-section="hero"). Lo compartido (.scene/.scene-bg/.scene-content, .story-char, .swap-target, .swap-highlight, h1 base, .scroll-indicator) vive en v2/core/styles/. No duplicar acá. ============================================================ */ /* Fondo de la escena hero — transparente, deja ver el body claro con las partículas que inyecta ambient.js. */ [data-section="hero"] .hero-bg { background: transparent; } /* Logo del hero — imagen PNG con drop-shadow morado sutil. Tamaño fluido entre 220px y 380px (max ~30vw). */ [data-section="hero"] .hero-logo { width: clamp(220px, 30vw, 380px); height: auto; filter: drop-shadow(0 12px 30px rgba(84, 45, 227, 0.2)); } /* ===== sections/oss/oss.css ===== */ /* ============================================================ oss.css — CSS EXCLUSIVO de OSS (data-section="oss"). Reglas portadas del monolito v2 (landing-v2.css, líneas 367–413 + override móvil líneas 748–749). Lo compartido (.scene/.scene-bg/.scene-content, h2 base, .kicker, .story-highlight) vive en v2/core/styles/. No duplicar acá. Notas de cascada: - El monolito tiene `.scene-content p { color: #42424f; weight: 500 }`. OSS no usa

dentro del diagrama; los labels son , así que no chocan con esa regla. - `.oss-module` no es