/* Hallmark · macrostructure: Workbench (demo jugable en el héroe) · tone: técnico-premium · anchor hue: azul #3b7bff → violeta #a78bfa * genre: atmospheric · theme: studied-DNA (source: la app StepReplay, temas.css + p2.css del 28-oct-2026, elegida por el dueño) * nav: N5 cápsula de vidrio · footer: mínimo legal · enrichment: demo canvas propia (Tier A/B, sin librerías) * pre-emit critique: P4 H4 E4 S5 R4 V4 * * StepReplay · web de marca en Bitrix24 (estrategos). Todo vive dentro de #sr: en Bitrix el HTML * comparte documento con el tema. Paleta y letra = las de la app (no se inventan): web y replay se ven * como un solo producto. Los íconos van por máscara CSS (Bitrix borra los del HTML, no los del CSS); * build.py agrega al final las reglas .ic--* con los SVG. */ #sr { /* app: p2.css (portada) */ --bg: #000; --txt: #f5f7fb; --txt2: #9aa3b2; --txt3: #7a8394; --vidrio: rgba(255,255,255,.035); --vidrio2: rgba(14,17,30,.72); --borde: rgba(255,255,255,.09); --borde2: rgba(255,255,255,.14); --cab: rgba(10,12,20,.62); --glow1: rgba(124,58,237,.30); --glow2: rgba(37,99,235,.20); --enlace: #60a5fa; --foco: #60a5fa; --azul-a: #3b7bff; --azul-b: #1d5cff; --grad-a: #60a5fa; --grad-b: #a78bfa; /* app: colores de cada simulador (portada.html) y de compra/venta (temas.css, oscuro) */ --spot: #3fb950; --perp: #e3b341; --cfd: #a371f7; --compra: #1f7a35; --compra-b: #2a9d48; --venta: #b3261e; --venta-b: #d93a2f; --sube: #30d158; --baja: #ff453a; /* app: el gráfico (colores de referencia del dueño, 21-oct) */ --chart-bg: #1e222d; --chart-grid: #2a2e39; --chart-txt: #929aa5; --vela-sube: #5d8aa8; --vela-baja: #d97d54; /* app: temas.css */ --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fuente-tit: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace; --r: 12px; --rg: 20px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --ease-out: cubic-bezier(.16, 1, .3, 1); position: relative; isolation: isolate; min-height: 100vh; overflow-x: clip; background: var(--bg); color: var(--txt); font: 16px/1.55 var(--fuente); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; } #sr *, #sr *::before, #sr *::after { box-sizing: border-box; } #sr :is(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; padding: 0; } #sr :is(ol, ul) { list-style: none; } #sr img { max-width: 100%; height: auto; display: block; } #sr a { color: inherit; } /* brillo azul y violeta de la portada */ #sr::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(760px 520px at 82% 78%, var(--glow1), transparent 70%), radial-gradient(720px 460px at 72% 8%, var(--glow2), transparent 70%), radial-gradient(600px 400px at 0% 100%, rgba(37,99,235,.12), transparent 70%); } #sr .ancho { width: min(1240px, 100% - 48px); margin-inline: auto; } #sr [id] { scroll-margin-top: 104px; } #sr .saltar { position: absolute; left: var(--s4); top: -100px; z-index: 60; padding: var(--s2) var(--s4); border-radius: var(--r); background: var(--txt); color: var(--bg); font-weight: 600; text-decoration: none; } #sr .saltar:focus { top: var(--s4); } #sr :focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; } #sr .sr-solo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------ cabecera: cápsula de vidrio */ #sr .cab { position: sticky; top: 14px; z-index: 40; margin-top: 14px; } #sr .capsula { display: flex; align-items: center; gap: 26px; min-height: 64px; padding: 0 12px 0 22px; border-radius: var(--rg); background: var(--cab); border: 1px solid var(--borde); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); } #sr .marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--txt); font-weight: 700; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; } #sr .marca img { width: 30px; height: 30px; filter: drop-shadow(0 0 12px rgba(59,130,246,.45)); } #sr .nav { display: flex; gap: 28px; font-size: 15px; color: var(--txt2); } #sr .nav a { text-decoration: none; white-space: nowrap; transition: color .2s; } #sr .nav a:hover { color: var(--txt); } #sr .esp { flex: 1; } /* ------------------------------------------------------------ botones (los de la app) */ #sr .bt { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 24px; border-radius: 13px; font: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid var(--borde2); background: var(--vidrio); color: var(--txt); transition: transform .2s var(--ease-out), box-shadow .2s, filter .2s, border-color .2s; } #sr .bt:hover { transform: translateY(-1px); border-color: rgba(96,165,250,.55); } #sr .bt:active { transform: translateY(0) scale(.98); } /* el azul de la app, con el degradado corrido hacia el tono oscuro: blanco sobre el centro del original daba 4,3:1 (no AA) */ #sr .bt.pri { color: #fff; border-color: rgba(120,160,255,.65); background: linear-gradient(180deg, var(--azul-a), var(--azul-b) 55%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 34px rgba(41,98,255,.45), 0 0 0 1px rgba(41,98,255,.25); } #sr .bt.pri:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 14px 44px rgba(41,98,255,.6), 0 0 0 1px rgba(41,98,255,.35); } #sr .bt.peq { min-height: 40px; padding: 0 18px; font-size: 14.5px; border-radius: 11px; } /* ------------------------------------------------------------ tipografía */ #sr .h1 { font-family: var(--fuente-tit); font-size: clamp(38px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; overflow-wrap: anywhere; min-width: 0; } #sr .h2 { font-family: var(--fuente-tit); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; overflow-wrap: anywhere; min-width: 0; } #sr .degradado { background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent !important; } #sr .lema { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--txt2); max-width: 34em; } #sr .bajada { color: var(--txt2); font-size: 17px; max-width: 40em; margin-top: var(--s3); } /* ------------------------------------------------------------ héroe */ #sr .heroe { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding-block: 72px 104px; } #sr .heroe__texto { display: grid; gap: var(--s5); } #sr .acciones { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); } #sr .nota { color: var(--txt3); font-size: 14px; } /* demo jugable */ #sr .demo { position: relative; padding: var(--s4); border-radius: 22px; background: var(--vidrio2); border: 1px solid var(--borde); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); min-width: 0; } #sr .luminoso { box-shadow: 0 0 50px rgba(59,130,246,.16), 0 30px 100px rgba(124,58,237,.20); } #sr .luminoso::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient(135deg, rgba(96,165,250,.8), rgba(139,92,246,.15) 45%, rgba(139,92,246,.8)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } #sr .demo__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 2px 4px var(--s3); } #sr .demo__titulo { font-weight: 600; font-size: 15px; } #sr .demo__px { display: flex; gap: var(--s3); font: 500 14px/1 var(--mono); color: var(--txt2); font-variant-numeric: tabular-nums; } #sr .demo__pnl.sube { color: var(--sube); } #sr .demo__pnl.baja { color: var(--baja); } #sr .demo__lienzo { position: relative; height: 320px; border-radius: var(--r); background: var(--chart-bg); overflow: hidden; } #sr .demo__lienzo:focus-visible { outline-offset: 2px; } #sr .demo__lienzo canvas { display: block; width: 100%; height: 100%; } #sr .demo__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-top: var(--s3); } #sr .demo__orden { display: inline-flex; gap: var(--s2); } #sr .demo__estado { min-height: 1.5em; margin-top: var(--s3); padding-inline: 4px; font-size: 14.5px; color: var(--txt); } #sr .demo__aviso { margin-top: var(--s2); padding-inline: 4px; font-size: 13px; line-height: 1.5; color: var(--txt3); } /* controles del demo (Bitrix le mete su estilo a todo