/* ============================================================ OpenCard · Paytech Conf 2026 — LANDING v4 "AURORA / NEURAL FLOW" Evolución de la v3 por Iris (Diseñadora de Producto). Más moderno, tecnológico y premium: aurora mesh viva, glass real, spotlight al cursor, pulsos de datos, sidebar dock flotante. Sistema de diseño centralizado: importa tokens compartidos y extiende con tokens propios de v4. CERO hex sueltos en layout. ============================================================ */ @import url("tokens.css"); /* ---- Overrides + tokens propios de v4 ---------------------- */ :root { /* VERDE OFICIAL CORRECTO (corrige el #0AF3AB viejo) */ --mint: #10f4ae; --mint-bright: #2effc0; --mint-deep: #07c489; --mint-soft: rgba(16, 244, 174, 0.12); --mint-bg: rgba(16, 244, 174, 0.06); --mint-line: rgba(16, 244, 174, 0.38); /* Morados para auroras / bloques inmersivos */ --purple-immersive-1: #2b1185; --purple-immersive-2: #16093f; --purple-glow: rgba(84, 45, 227, 0.55); /* Aurora mesh — blobs de marca */ --aurora-purple: rgba(84, 45, 227, 0.55); --aurora-mint: rgba(16, 244, 174, 0.30); /* Rojo del track "Bootcamp de Payments" de la agenda Paytech. ACENTO DE EVENTO — NO es color de marca OpenCard. Solo en #speaker. */ --bootcamp-red: #F0392B; /* Glass system (sobre oscuro y sobre claro) */ --glass-dark-bg: rgba(255, 255, 255, 0.045); --glass-dark-border: rgba(255, 255, 255, 0.14); --glass-dark-hi: rgba(255, 255, 255, 0.22); --glass-light-bg: rgba(255, 255, 255, 0.72); --glass-light-border: rgba(20, 20, 43, 0.08); --glass-blur: 16px; /* Spotlight (sigue el cursor) */ --spot-light: rgba(84, 45, 227, 0.14); /* Retícula sutil de apoyo */ --grid-line: rgba(20, 20, 43, 0.04); --grid-line-dark: rgba(255, 255, 255, 0.05); --grid-cell: 84px; /* Tipografía fluida — escala v4 */ --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-display: clamp(2.7rem, 1.5rem + 5.2vw, 5.2rem); --fs-h1: clamp(2.05rem, 1.3rem + 3vw, 3.5rem); --fs-h2: clamp(1.45rem, 1rem + 1.7vw, 2.05rem); --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.42rem); --fs-body: 1.0625rem; --fs-small: 0.875rem; --fs-mono: 0.72rem; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* ---- Sistema de movimiento (lenguaje único) ---- Duraciones y easings consistentes para reveals/micro-interacciones. `--ease-out` es el easing protagonista de las entradas. Intensidad SUBIDA para que la entrada se SIENTA (premium pero perceptible): amplitud mayor, duraciones más largas y cascada evidente uno por uno. */ --ease-out: cubic-bezier(0.16, 0.84, 0.30, 1); /* overshoot suave, salida marcada */ --dur-fast: 380ms; --dur: 700ms; --dur-slow: 900ms; --reveal-shift: 38px; /* desplazamiento base de los reveals direccionales (antes 26) */ --reveal-scale: 0.94; /* escala de entrada (0.94 → 1) donde aplica */ --stagger: 130ms; /* paso de la cascada (cada hijo entra con --i*--stagger) — evidente */ } /* ---- Reset / base ----------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* iPhone notch / Dynamic Island (viewport-fit=cover): el area tras la barra de estado muestra el fondo de . Lo pintamos oscuro (igual que el tope del sitio: preloader + hero) para que NUNCA salga la franja blanca. env(safe-area-inset-*) = 0 en desktop/Android, asi que no afecta nada. */ background: var(--purple-dark); } body { font-family: var(--font); font-size: var(--fs-body); font-weight: 600; /* sin fuentes light/delgadas: piso semibold en todo el cuerpo */ line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ::selection { background: var(--mint); color: var(--purple-dark); } :focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 6px; } /* ---- Layout ------------------------------------------------ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: clamp(20px, 5vw, 56px); } .section { position: relative; padding-block: clamp(40px, 5vw, 72px); overflow: hidden; } .section-dark { position: relative; padding-block: clamp(40px, 5vw, 72px); background: linear-gradient(165deg, var(--purple-dark) 0%, var(--purple-immersive-2) 100%); color: #fff; overflow: hidden; isolation: isolate; } /* ============================================================ SECCIONES DE ALTO UNIFORME = 1 PANTALLA (100vh) + SCROLL-SNAP El jefe pide que cada sección mida exactamente el alto de la pantalla. Cada
/
/