1<!DOCTYPE html> 2<html lang="es" data-theme="dark"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<title>El Sound System â Sound Check</title> 7<!-- P3 SEO: description/OG/canonical. Texto en español ensamblado del copy LOCKED del hero (revisar con 8 Nico antes de prod). canonical + og:image son PLACEHOLDERS a confirmar en el deploy (dominio/screenshot). --> 9<meta name="description" content="Un Sound Check de 10 minutos que lee la data que ya tienes y te devuelve tu Health Score, tu posición real y tu próxima jugada. Gratis, sin llamada de ventas."> 10<link rel="canonical" href="https://www.elsoundsystem.com/"> 11<meta name="theme-color" content="#100E1A"> 12<meta property="og:type" content="website"> 13<meta property="og:site_name" content="El Sound System"> 14<meta property="og:title" content="El Sound System â Sound Check"> 15<meta property="og:description" content="Obtén el Mapa de Crecimiento de tu proyecto musical: tu Health Score, tu posición real y tu próxima jugada en 10 minutos."> 16<meta property="og:url" content="https://www.elsoundsystem.com/"> 17<meta property="og:image" content="https://www.elsoundsystem.com/og/sound-check.png"> 18<meta property="og:locale" content="es_LA"> 19<meta name="twitter:card" content="summary_large_image"> 20<meta name="twitter:title" content="El Sound System â Sound Check"> 21<meta name="twitter:description" content="Obtén el Mapa de Crecimiento de tu proyecto musical en 10 minutos. Gratis, sin llamada de ventas."> 22<meta name="twitter:image" content="https://www.elsoundsystem.com/og/sound-check.png"> 23<link rel="icon" type="image/svg+xml" href="assets/favicon.svg"> 24<!-- P4-fonts: fuentes SELF-HOSTED (woff2 en assets/fonts/). Cero CDN (perf + GDPR). font-display:swap. 25 Pesos realmente usados: Zodiak 700 · General Sans 400/600/700 · Space Mono 400/700 (latin+latin-ext). 26 (Antes: Fontshare zodiak@400,700 + general-sans@400,500,600 y Google Space+Mono@400,700 â 400 de Zodiak 27 y 500 de General Sans no se usaban; General Sans 700 SI se usa (.hero-sub b) y ahora es face real, no sintética.) --> 28<link rel="preload" as="font" type="font/woff2" href="assets/fonts/zodiak-700.woff2" crossorigin> 29<link rel="preload" as="font" type="font/woff2" href="assets/fonts/general-sans-400.woff2" crossorigin> 30<style id="fonts-selfhost"> 31@font-face{font-family:'Zodiak';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/zodiak-700.woff2') format('woff2')} 32@font-face{font-family:'General Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/general-sans-400.woff2') format('woff2')} 33@font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/general-sans-600.woff2') format('woff2')} 34@font-face{font-family:'General Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/general-sans-700.woff2') format('woff2')} 35@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} 36@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} 37@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/space-mono-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} 38@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/space-mono-700-latin-ext.woff2') format('woff2');
38unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} 39</style> 40<!-- TOKENS CANÃNICOS · R7/R8 package v1.0 â INLINED (P1 fix #6: el <link href="../../r7-r8-package-v1.0/tokens.css"> daba 404 41 al montar el server bajo design-system/ y se romperÃa en el deploy estático plano. Inline = cero dependencia externa, 42 server-root-independent. Fuente: design-system/r7-r8-package-v1.0/tokens.css @ v1.0 2026-06-05. Re-sync en P4 si cambia. --> 43<style id="tokens-inline"> 44/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 45 SOUND OS / El Sound System - Design System Package v1.0 46 R7 (terminal, dark) + R8 (paper, light) + PRINT + DATA VIZ 47 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 48 2026-06-05. Single drop-in token sheet. Superset of the v.20 49 globals.css additions: every screen token here matches the locked 50 values in 02_color.md and v20-globals-css-additions.css exactly. 51 NEW in this package: the @media print layer (resolves the parked 52 decision in 02_color.md section 9) and the print dataviz ramp. 53 54 Layers: 55 1. Brand anchors (theme-invariant) 56 2. R7 terminal theme (dark, locked 2026-04-25) 57 3. R8 paper theme (light/editorial, locked 2026-04-25) 58 4. Editorial section accents (survey color-shift) 59 5. Data viz: 9-stop divergent ramp + score bands + percentile 60 6. Semantic component tokens (light default, dark override) 61 7. PRINT layer (new, v1.0 of this package) 62 8. Print dataviz ramp (new, v1.0 of this package) 63 9. Categorical vertical palette (PROPOSED, not locked) 64 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 65 66:root { 67 /* ââ 1. Brand anchors (theme-invariant) âââââââââââââââââââââââââ */ 68 --cyan: #00B0CD; /* brand anchor: CTA, wordmark, score low end */ 69 --lime: #CFFF04; /* brand signal: score peak, focal moments only */ 70 --ink: #0A0A0A; 71 --paper: #FAFAF7; 72 --neutral: #E5E5E5; /* pivot gray, structural */ 73 --teal-deep: #003A3A; /* THE escape hatch for cyan-coded text on paper */ 74 --amber: #F4A261; /* warning/error state ONLY, never decoration */ 75 76 /* ââ 2. R7 terminal theme (purple-leaning cool dark grey) âââââââ */ 77 --terminal-ground: #100E1A; 78 --terminal-ground-soft: #191726; 79 --terminal-ground-elev: #262234; 80 --terminal-ink: #FAFAF7; 81 --terminal-ink-muted: rgba(250, 250, 247, 0.72); 82 --terminal-ink-faint: rgba(250, 250, 247, 0.40); 83 --terminal-rule: rgba(250, 250, 247, 0.12); 84 --terminal-rule-strong: #E5E5E5; 85 --terminal-sticky: rgba(16, 14, 26, 0.92); /* nav/labels w/ blur */ 86 --terminal-accent-primary: var(--cyan); 87 --terminal-accent-signal: var(--lime); 88 --terminal-accent-warning: var(--amber); 89 90 /* ââ 3. R8 paper theme (editorial) âââââââââââââââââââââââââââââââ */ 91 --editorial-ground: #FAFAF7; 92 --editorial-ground-warm: #F5F1EA; 93 --editorial-card: #FFFFFF; 94 --editorial-ink: #0A0A0A; 95 --editorial-ink-muted: rgba(10, 10, 10, 0.72); 96 --editorial-ink-faint: rgba(10, 10, 10, 0.40); 97 --editorial-rule: rgba(10, 10, 10, 0.10); 98 99 /* ââ 4. Editorial section accents (survey color-shift, R8 only) â */ 100 --editorial-section-1: #BFD8DF; 101 --editorial-section-2: #96CBD9; 102 --editorial-section-3: #E5E5E5; 103 --editorial-section-4: #E5ECBC; 104 --editorial-section-5: #E1F291; 105 --editorial-section-6: #D9F960; 106 107 /* ââ 5. Data viz: 9-stop divergent ramp (theme-invariant) âââââââ */ 108 --data-1: #00B0CD; /* cyan anchor - STARTER */ 109 --data-2: #66BDD3; 110 --data-3: #96CBD9; /* SCALING */ 111 --data-4: #BFD8DF; 112 --data-5: #E5E5E5; /* neutral pivot / median */ 113 --data-6: #E5ECBC; 114 --data-7: #E1F291; /* SYSTEM */ 115 --data-8: #D9F960; 116 --data-9: #CFFF04; /* lime signal - COMPOUND */ 117 118 --band-starter: var(--data-1); 119 --band-scaling: var(--data-3); 120 --band-system: var(--data-7); 121 --band-compound: var(--data-9); 122 123 /* ââ 6. Semantic component tokens (R8 light defaults) âââââââââââ */ 124 --bg: var(--editorial-ground); 125 --bg-warm: var(--editorial-ground-warm); 126 --bg-card: var(--editorial-card); 127 --fg: var(--editorial-ink); 128 --fg-muted: var(--editorial-ink-muted); 129 --fg-faint: var(--editorial-ink-faint); 130 --rule: var(--editorial-rule); 131 --accent-primary: var(--cyan); 132 --accent-signal: var(--lime); 133 --score-low: var(--data-1); 134 --score-high: var(--data-9); 135 --fg-on-accent: var(--editorial-ink); /* ink on cyan/lime, both themes */ 136} 137 138/* ââ R7 terminal override (semantic tokens flip, anchors stay) ââââ */ 139[data-theme="dark"] { 140 --bg: var(--terminal-ground); 141 --bg-warm: var(--terminal-ground-soft); 142 --bg-card: var(--terminal-ground-elev); 143 --fg: var(--terminal-ink); 144 --fg-muted: var(--terminal-ink-muted); 145 --fg-faint: var(--terminal-ink-faint); 146 --rule: var(--terminal-rule); 147 --background: var(--terminal-ground); /* legacy compat */ 148 --foreground: var(--terminal-ink); 149} 150 151@media (prefers-color-scheme: dark) { 152 html:not([data-theme]) { 153 --bg: var(--terminal-ground); 154 --bg-warm: var(--terminal-ground-soft); 155 --bg-card: var(--terminal-ground-elev); 156 --fg: var(--terminal-ink); 157 --fg-muted: var(--terminal-ink-muted); 158 --fg-faint: var(--terminal-ink-faint); 159 --rule: var(--terminal-rule); 160 --background: var(--terminal-ground); 161 --foreground: var(--terminal-ink); 162 } 163} 164 165/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 166 7. PRINT LAYER (v1.0, resolves 02_color.md section 9 parked item) 167 168 Decision: print ALWAYS renders as R8-on-white. Terminal surfaces 169 never print (no toner-flood dark grounds). Lime and cyan flatten to 170 darker, gamut-safe siblings that hold on consumer inkjet. The 171 on-screen hue intent survives; the fluorescent register does not 172 (it cannot: lime #CFFF04 is out of CMYK gamut, see print-spec.md). 173 174 Contrast proofs vs white (computed 2026-06-05): 175 --print-signal-text #5C7300 5.37:1 AA normal text 176 --print-signal-fill #7A9900 3.29:1 AA large text / graphics 177 --print-cyan-text #006B80 6.15:1 AA normal text 178 --print-cyan-fill #007A8F 5.02:1 AA normal text + graphics 179 --print-pivot #8C8C8C 3.36:1 graphics (3:1) ok 180 ink on white ~19:1 AAA 181 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 182 183:root { 184 --print-ground: #FFFFFF; /* unprinted stock */ 185 --print-ink: #0A0A0A; /* body text, K100 in pro print */ 186 --print-ink-muted: #404040; /* secondary text (no rgba in print: */ 187 --print-ink-faint: #707070; /* alpha dithers badly on inkjet) */ 188 --print-rule: #C8C8C8; 189 --print-cyan-text: #006B80; /* cyan-coded TEXT on white */ 190 --print-cyan-fill: #007A8F; /* cyan-coded fills, chart marks */ 191 --print-signal-text: #5C7300; /* lime-coded TEXT on white */ 192 --print-signal-fill: #7A9900; /* lime-coded fills, score peak */ 193 --print-pivot: #8C8C8C; /* replaces #E5E5E5 (bleeds to white)*/ 194} 195 196@media print { 197 :root, [data-theme="dark"] { 198 /* Force R8-on-white regardless of active screen theme */ 199 --bg: var(--print-ground); 200 --bg-warm: var(--print-ground); 201 --bg-card: var(--print-ground); 202 --fg: var(--print-ink); 203 --fg-muted: var(--print-ink-muted); 204 --fg-faint: var(--print-ink-faint); 205 --rule: var(--print-rule); 206 207 /* Brand accents flatten to print-safe siblings */ 208 --accent-primary: var(--print-cyan-fill); 209 --accent-signal: var(--print-signal-fill); 210 --fg-on-accent: #FFFFFF; 211 212 /* Section accents neutralize: the color-shift journey is a screen 213 behavior; on paper it prints as six near-identical pastel slabs */ 214 --editorial-section-1: #FFFFFF; 215 --editorial-section-2: #FFFFFF; 216 --editorial-section-3: #FFFFFF; 217 --editorial-section-4: #FFFFFF; 218 --editorial-section-5: #FFFFFF; 219 --editorial-section-6: #FFFFFF; 220 } 221 222 body { 223 background: #FFFFFF !important; 224 color: var(--print-ink) !important; 225 -webkit-print-color-adjust: exact; 226 print-color-adjust: exact; 227 } 228
229 /* Halftone + cymatics textures off: they band on 300dpi inkjet */ 230 .terminal-halftone { background-image: none !important; } 231 232 /* Every chart mark gets an ink outline so pale ramp steps 233 never dissolve into the page (rule: print-spec.md section 4) */ 234 .chart-mark, .radar-polygon, .bar-fill, .dot-fill { 235 stroke: var(--print-ink); 236 stroke-width: 0.5pt; 237 } 238 239 /* Score band chips: outline + label carry the tier, not color alone */ 240 .band-chip { 241 border: 0.75pt solid var(--print-ink); 242 background: transparent !important; 243 color: var(--print-ink) !important; 244 } 245} 246 247/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 248 8. PRINT DATAVIZ RAMP (9 stops, darkened for white stock) 249 250 Same divergent shape as --data-1..9, every stop pulled toward ink so 251 the middle holds on paper. Pivot is a true mid-gray. Use ONLY inside 252 @media print or PDF-export render paths. 253 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 254 255:root { 256 --print-data-1: #007A8F; /* darkened cyan anchor */ 257 --print-data-2: #3D8FA3; 258 --print-data-3: #5E9FAE; 259 --print-data-4: #8AAEB5; 260 --print-data-5: #8C8C8C; /* true mid-gray pivot */ 261 --print-data-6: #A8B377; 262 --print-data-7: #99A93E; 263 --print-data-8: #8AA31D; 264 --print-data-9: #7A9900; /* darkened lime signal */ 265 266 --print-band-starter: var(--print-data-1); 267 --print-band-scaling: var(--print-data-3); 268 --print-band-system: var(--print-data-7); 269 --print-band-compound: var(--print-data-9); 270} 271 272@media print { 273 :root, [data-theme="dark"] { 274 --data-1: var(--print-data-1); 275 --data-2: var(--print-data-2); 276 --data-3: var(--print-data-3); 277 --data-4: var(--print-data-4); 278 --data-5: var(--print-data-5); 279 --data-6: var(--print-data-6); 280 --data-7: var(--print-data-7); 281 --data-8: var(--print-data-8); 282 --data-9: var(--print-data-9); 283 --band-starter: var(--print-band-starter); 284 --band-scaling: var(--print-band-scaling); 285 --band-system: var(--print-band-system); 286 --band-compound: var(--print-band-compound); 287 --score-low: var(--print-data-1); 288 --score-high: var(--print-data-9); 289 } 290} 291 292/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 293 9. CATEGORICAL VERTICAL PALETTE - PROPOSED v0.1, NOT LOCKED 294 295 02_color.md section 6 deferred this. Six non-ordinal, equally 296 weighted hues in the cool/electric register (no pinks, no lavender, 297 per the discarded 7-color attempt). DO NOT SHIP until Nico + Cami 298 sign off. Music stays aliased to brand cyan until then. 299 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 300 301:root { 302 --vertical-music: var(--cyan); /* LOCKED placeholder */ 303 304 /* PROPOSED, awaiting sign-off: */ 305 /* --vertical-music: #00B0CD; cyan (brand) */ 306 /* --vertical-creator: #2F6BFF; electric azure */ 307 /* --vertical-commerce: #00C389; signal mint */ 308 /* --vertical-hosp: #5AD7E6; ice cyan */ 309 /* --vertical-services: #8FD400; chartreuse (distinct from lime) */ 310 /* --vertical-other: #9DA8BF; cool steel (intentionally quiet) */ 311} 312</style> 313<style> 314 :root{ 315 --mono:'Space Mono',monospace; 316 --display:'Zodiak',serif; /* LOCKED */ 317 --body:'General Sans',sans-serif; /* LOCKED */ 318 --dw:700; 319 --morado:#9B8FFF; 320 --rosa:#FF7E8A; 321 --module-teal:#007A8F;
321 /* V18: disponible en ambos temas (ancla teal de los pares) */ 322 /* bordes difuminados (sin frame, fade a transparente · funciona en dark y light) 323 V16: fade más profundo â en light el corte se notaba como cuadrado */ 324 --feather: 325 linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%), 326 linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); 327 } 328 .soft-edge{ 329 -webkit-mask:var(--feather); mask:var(--feather); 330 -webkit-mask-composite:source-in; mask-composite:intersect; 331 } 332 html[data-theme="dark"]{ 333 --card-line:rgba(250,250,247,.16); 334 --card-line-strong:rgba(250,250,247,.3); 335 --panel:rgba(250,250,247,.045); 336 --shadow:0 40px 110px rgba(0,0,0,.5); 337 --meganum-op:.3; /* Cami R1 #4: back-numbers 10% -> 30% en dark (+20pp) */ 338 --cta-bg:var(--accent-signal); 339 --cta-fg:#0A0A0A; 340 } 341 html:not([data-theme="dark"]){ 342 --card-line:rgba(10,10,10,.14); 343 --card-line-strong:rgba(10,10,10,.42); 344 --panel:rgba(255,255,255,.55); /* glass real en light: translúcido + blur */ 345 --panel-tint:rgba(255,255,255,.66); /* paneles que necesitan más cuerpo */ 346 --shadow:0 24px 70px rgba(10,10,10,.12); 347 --meganum-op:.5; /* Cami R1 #4: back-numbers 10% -> 50% en light (+40pp) */ 348 --cta-bg:var(--accent-signal); /* CTA lime SIEMPRE; el teal es para logo y degradados */ 349 --cta-fg:#0A0A0A; 350 --module-teal:#007A8F; /* teal vibrante in-token (era #003A3A, murky) */ 351 } 352 html[data-theme="dark"]{ --panel-tint:rgba(250,250,247,.06); } 353 354 *{box-sizing:border-box;margin:0;padding:0;min-width:0} 355 html{scroll-behavior:smooth} 356 body{ 357 background:var(--bg);color:var(--fg);font-family:var(--body);line-height:1.55; 358 -webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:20px;transition:background .35s,color .35s; 359 } 360 html[data-theme="dark"] body{ 361 background: 362 radial-gradient(1100px 700px at 92% -10%, rgba(0,176,205,.10), transparent 55%), 363 linear-gradient(180deg,#191726 0%, #100E1A 34%, #0b0a12 65%, #07060c 100%); 364 } 365 .wrap{max-width:1460px;margin:0 auto;padding:0 44px;position:relative} 366 .disp{font-family:var(--display);font-weight:var(--dw);letter-spacing:-.015em;line-height:1.04} 367 .grad-text{background-clip:text;-webkit-background-clip:text;color:transparent} 368 .glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0} 369 .logo img{display:block;width:100%;height:100%;object-fit:contain} 370 /* Cami R3: single lime mark for both themes (dark/light swap removed) */ 371 h1,h2,h3,p{overflow-wrap:break-word} 372 373 /* P3 a11y: focus-visible explÃcito y rastreable por tab. Lime en dark, module-teal en papel. 374 outline (no border) + offset â sin layout shift; el offset deja ver el ring incluso sobre el CTA lime. */ 375 a:focus-visible,button:focus-visible{outline:3px solid var(--accent-signal);outline-offset:3px;border-radius:5px} 376 html:not([data-theme="dark"]) a:focus-visible, 377 html:not([data-theme="dark"]) button:focus-visible{outline-color:var(--module-teal)} 378 379 /* meganum: blob bright + número negativo blur · UN color por sección, legible en ambos temas */ 380 .meganum{position:absolute;width:clamp(340px,38vw,700px);aspect-ratio:1;pointer-events:none;user-select:none;z-index:0;display:flex;align-items:center;justify-content:center} 381 .meganum .blob{position:absolute;inset:0;border-radius:50%;filter:blur(40px);opacity:.9} 382 /* V19 (Cami): un solo coral para los meganúmeros, IGUAL en dark y light, sin stroke. 383 Antes el número usaba color:var(--bg) (recorte) y en papel quedaba casi invisible. */ 384 .meganum .n{position:relative;font-family:var(--display);font-weight:var(--dw);font-size:clamp(220px,24vw,430px);line-height:1;color:var(--rosa);opacity:.2;filter:blur(2px)} 385 .meganum .blob{background:radial-gradient(circle at 42% 42%, var(--rosa), transparent 72%);opacity:calc(var(--meganum-op) * .5)} 386 387 .rv{opacity:0;transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1)} 388 .rv[data-rv="up"]{transform:translateY(40px)} 389 .rv[data-rv="left"]{transform:translateX(-48px)} 390 .rv[data-rv="right"]{transform:translateX(48px)} 391 .rv[data-rv="scale"]{transform:scale(.93)} 392 .rv.in{opacity:1;transform:none} 393 394 .controls{position:fixed;top:78px;right:16px;z-index:99;display:flex;gap:6px;background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--card-line);border-radius:10px;padding:8px 10px;font-family:var(--mono);font-size:10px;align-items:center} 395 .controls .lab{color:var(--fg-faint);text-transform:uppercase;letter-spacing:.08em} 396 .controls button{font-family:var(--mono);font-size:10px;text-transform:uppercase;border:1px solid var(--card-line);background:transparent;color:var(--fg-muted);padding:5px 9px;border-radius:6px;cursor:pointer} 397 .controls button.on{background:var(--cta-bg);color:var(--cta-fg);border-color:var(--cta-bg);font-weight:700} 398 .controls .sep{width:1px;height:18px;background:var(--card-line);margin:0 3px} 399 400 /* ===== Cursor · ESPECTRO (V16) ===== 401 Prisma evolucionado: más faint, más vivo. Dos capas de degradado contra-rotando 402 que respiran a ritmos distintos + arrastre fantasma â un espectro alien que te sigue 403 sin bloquear la lectura. */ 404 /* V19 · ESPECTRO: 5% de presencia, una esfera que flota detrás del cursor. 405 La rotación NO es por tiempo: la dictan x/y del mouse (como girar una esfera con la mano). */ 406 #curHalo{position:fixed;left:0;top:0;pointer-events:none;z-index:9998;opacity:0;transition:opacity .6s;border-radius:50%;will-change:transform; 407 width:340px;height:340px;filter:blur(30px) saturate(1.1);mix-blend-mode:screen; 408 -webkit-mask:radial-gradient(circle,#000 22%,transparent 62%);mask:radial-gradient(circle,#000 22%,transparent 62%)} 409 #curHalo::before,#curHalo::after{content:"";position:absolute;inset:-24%;border-radius:50%} 410 #curHalo::before{background:conic-gradient(from 0deg, var(--data-1), var(--morado) 38%, transparent 56%, var(--accent-signal) 80%, var(--data-1));transform:rotate(var(--a1,0deg))} 411 #curHalo::after{background:radial-gradient(circle at var(--px,35%) var(--py,32%), rgba(255,255,255,.95), transparent 44%);opacity:.65;transform:rotate(var(--a2,0deg))} /* brillo especular: vende la esfera */ 412 body.cur-1 #curHalo{opacity:.28}
412 /* V20.8: brillo subido de .15 -> .28 (espectro embarca) */ 413 html:not([data-theme="dark"]) #curHalo{mix-blend-mode:multiply;filter:blur(30px) saturate(1.3)} 414 html:not([data-theme="dark"]) body.cur-1 #curHalo{opacity:.28} 415 416 /* V19 · LENTE "LOOKING GLASS": muestra el CÃDIGO real de lo que estás mirando. 417 Nada generado: elementFromPoint â su HTML. La analogÃa del producto: ver la data detrás. */ 418 #curCode{position:fixed;left:0;top:0;width:150px;height:150px;border-radius:50%;overflow:hidden;pointer-events:none;z-index:9997; 419 opacity:0;transition:opacity .35s;transform:translate(-50%,-50%);will-change:transform; 420 background:rgba(13,10,20,.75);backdrop-filter:blur(3px); /* 25% de transparencia */ 421 -webkit-mask:radial-gradient(circle closest-side,#000 calc(100% - 10px),transparent 100%); 422 mask:radial-gradient(circle closest-side,#000 calc(100% - 10px),transparent 100%)} /* feather 10px: el borde se funde */ 423 html:not([data-theme="dark"]) #curCode{background:rgba(250,250,247,.75)} 424 body.cur-2 #curCode{opacity:1} 425 #curCode pre{margin:0;padding:20px 16px;font-family:var(--mono);font-size:10px;line-height:1.55;color:var(--fg-muted);white-space:pre-wrap;word-break:break-all} 426 #curCode pre .tg{color:var(--accent-primary);font-weight:700} 427 html:not([data-theme="dark"]) #curCode pre .tg{color:var(--module-teal)} 428 #curCode pre .ccaret{display:inline-block;color:var(--accent-signal);animation:caretBlink .8s steps(1) infinite} 429 html:not([data-theme="dark"]) #curCode pre .ccaret{color:var(--module-teal)} 430 431 /* nav: logo colapsa al sÃmbolo, hover revela el nombre */ 432 nav{position:fixed;top:0;left:0;right:0;background:var(--terminal-sticky);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid var(--card-line)} 433 /* V20.8: en light el nav va EN PAPEL (igual que la botnav, top+bottom hacen match). 434 Las tintas no-adaptativas (brand lime, glyph cyan del metodo) se remapean a 435 --module-teal mas abajo · rosa/morado quedan (rule-ok en papel). */ 436 html:not([data-theme="dark"]) nav{background:rgba(250,250,247,.94)} 437 .nav-in{max-width:1460px;margin:0 auto;padding:11px 44px;display:flex;gap:26px;align-items:center;font-family:var(--mono);font-size:13px} 438 .brandwrap{display:flex;align-items:center;gap:12px;cursor:pointer} 439 .brandwrap .logo{width:34px;height:46px;flex:none} 440 .brandwrap .brand{font-weight:700;white-space:nowrap;overflow:hidden;max-width:240px;opacity:1;transition:max-width .7s cubic-bezier(.2,.7,.2,1), opacity .55s;color:var(--accent-signal)} /* el nombre sale del logo: mismo color */ 441 /* V20.8: el brand es lime en dark; en papel -> module-teal (cyan-on-paper rule, no lime text en papel). */ 442 html:not([data-theme="dark"]) .brandwrap .brand{color:var(--module-teal)} 443 body.brand-collapsed .brandwrap:not(:hover) .brand{max-width:0;opacity:0} 444 .nav-in a{text-decoration:none;display:flex;gap:8px;align-items:center;color:var(--fg-muted)} 445 .nav-in a:hover{color:var(--fg)} 446 .nav-in a .gl{font-size:16px;line-height:1} 447 .nav-in a.p .gl{color:var(--rosa)} .nav-in a.m .gl{color:var(--data-1)} 448 .nav-in a.v .gl{color:var(--accent-signal)} .nav-in a.n .gl{color:var(--morado)} 449 /* V20.8: en papel, lime (.v) y cyan (.m) -> module-teal; rosa (.p) y morado (.n) quedan (rule-ok). Igual que la botnav. */ 450 html:not([data-theme="dark"]) .nav-in a.v .gl, 451 html:not([data-theme="dark"]) .nav-in a.m .gl{color:var(--module-teal)} 452 /* Cami R1 #1: toggle de tema como control real de nav (reemplaza los botones R7/R8 del panel demo) */ 453 .nav-theme{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border:1px solid var(--card-line);background:transparent;color:var(--fg);border-radius:8px;cursor:pointer;font-size:15px;line-height:1;font-family:var(--mono);transition:border-color .15s,color .15s} 454 .nav-theme:hover{border-color:var(--card-line-strong)} 455 .nav-lang{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 10px;flex:none;border:1px solid var(--card-line);background:transparent;color:var(--fg);border-radius:8px;
455cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.08em;text-decoration:none;font-family:var(--mono);transition:border-color .15s,color .15s} 456 .nav-lang:hover{border-color:var(--fg)} 457 .nav-cta{background:var(--cta-bg);color:var(--cta-fg) !important;padding:10px 18px;border-radius:6px;font-weight:700;text-decoration:none} 458 .botnav{display:none} 459 460 .mark{padding:30px 0 26px;display:flex;align-items:center;gap:14px;font-family:var(--mono);position:relative;z-index:2} 461 .mark .gl{font-size:22px;line-height:1} 462 .mark .t{font-size:16px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--fg)} 463 464 /* ================= HERO (cyan prominente) ================= */ 465 .hero{min-height:96vh;display:flex;align-items:center;position:relative;padding:120px 0 50px;overflow:hidden} 466 .hero .glow.g1{width:900px;height:900px;top:-300px;right:-240px;background:radial-gradient(circle, rgba(0,176,205,.16), transparent 60%)} 467 .hero-in{position:relative;z-index:2} 468 .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center} 469 .kick{font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-primary);margin-bottom:26px;font-weight:700} 470 html:not([data-theme="dark"]) .kick{color:var(--module-teal)} /* P3: kick cyan â module-teal en papel */ 471 h1{font-size:clamp(40px,5.2vw,80px)} 472 h1 .a{background-image:linear-gradient(100deg,var(--data-1),var(--morado))} /* hero: libertad â cyan+morado */ 473 html:not([data-theme="dark"]) h1 .a{background-image:linear-gradient(100deg,var(--module-teal),var(--morado))} 474 .hero-sub{margin-top:26px;font-size:clamp(18px,1.6vw,23px);line-height:1.58;color:var(--fg-muted);max-width:52ch} 475 .hero-sub b{color:var(--fg);font-weight:700} 476 .cta-row{margin-top:32px;display:flex;align-items:center;gap:22px;flex-wrap:wrap} 477 .btn-main{display:inline-block;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--cta-bg);color:var(--cta-fg) !important;padding:17px 30px;border-radius:8px;text-decoration:none} 478 .btn-main:hover{filter:brightness(1.08)} 479 .cta-note{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted)} 480 .cta-note b{color:var(--accent-primary)} 481 html:not([data-theme="dark"]) .cta-note b{color:var(--module-teal)} /* P3: "10 MIN" cyan â module-teal en papel */ 482 483 .pillwrap{position:relative;display:flex;justify-content:center} 484 /* halo: duplicado del video, desenfocado detrás â glow suave que continúa el borde difuminado */ 485 /* halo con máscara RADIAL (V16): sin esquinas â era él quien dibujaba el cuadrado fantasma en light */ 486 .pill-glow{position:absolute;inset:-9%;overflow:hidden;filter:blur(70px);opacity:.5;transform:scale(1.08);pointer-events:none; 487 -webkit-mask:radial-gradient(56% 56% at 50% 50%, #000 32%, transparent 70%);mask:radial-gradient(56% 56% at 50% 50%, #000 32%, transparent 70%)} 488 html:not([data-theme="dark"]) .pill-glow{opacity:.38;filter:blur(80px)} 489 .pill-glow video{width:100%;height:100%;object-fit:cover} 490 .pill{position:relative;width:420px;height:560px;border:none} 491 .pill video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.96) contrast(1.04); 492 -webkit-mask:var(--feather);mask:var(--feather);-webkit-mask-composite:source-in;mask-composite:intersect} 493 .pill-cap{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(10,10,10,.55);backdrop-filter:blur(8px);padding:7px 16px;border-radius:20px;white-space:nowrap;z-index:3} 494 495 /* medición (dataviz: ramp permitido) · V15: vive AL LADO del laptop en RESULTS */ 496 .result-card{border:1.5px solid var(--card-line-strong);border-radius:16px;background:var(--panel);backdrop-filter:blur(14px);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column} 497 .p-bar{display:flex;align-items:center;gap:9px;padding:13px 20px;border-bottom:1.5px solid var(--card-line-strong)} 498 .p-bar i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--fg-muted);display:block;flex:none} 499 .p-bar .url{margin-left:10px;font-family:var(--mono);font-size:12.5px;color:var(--fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} 500 .rc-body{padding:26px 26px 24px;display:flex;flex-direction:column;gap:24px;flex:1} 501 .rc-score-row{display:flex;align-items:flex-end;
501gap:18px;flex-wrap:wrap} 502 .p-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:14px} 503 .score{font-family:var(--display);font-weight:var(--dw);font-size:84px;line-height:.9;letter-spacing:-.02em} 504 .score small{font-size:24px;color:var(--fg-faint)} 505 .score-tag{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:12px;background:var(--accent-signal);color:#0A0A0A;padding:4px 12px;border-radius:20px;font-weight:700} 506 .fbar{margin-bottom:14px} 507 .fbar:last-child{margin-bottom:0} 508 .fbar .t{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:12.5px;margin-bottom:6px;color:var(--fg)} 509 .fbar .t em{font-style:normal;font-weight:700} 510 .track{height:14px;border:1.5px solid var(--card-line-strong);border-radius:8px;background:var(--bg);position:relative;overflow:hidden} 511 .fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px 0 0 6px} 512 .fill.q1{background:var(--data-1)} 513 .fill.q2{background:var(--data-3)} 514 .fill.q3{background:var(--data-8)} 515 .bench{position:relative;height:52px;border:1.5px solid var(--card-line-strong);border-radius:10px;background:var(--bg)} 516 .bench .zone{position:absolute;top:0;bottom:0;left:34%;width:32%;background:color-mix(in srgb, var(--data-7) 30%, transparent);border-left:1px dashed var(--fg-faint);border-right:1px dashed var(--fg-faint)} 517 .bench .you{position:absolute;top:-10px;left:58%;display:flex;flex-direction:column;align-items:center;height:72px} 518 .bench .you i{width:15px;height:15px;background:var(--accent-signal);border:2px solid var(--fg);border-radius:50%} 519 .bench .you b{width:2px;flex:1;background:var(--fg)} 520 .bench-l{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--fg-muted);margin-top:8px} 521 .play{margin-top:14px;border:1.5px solid var(--card-line-strong);border-left:4px solid var(--accent-primary);border-radius:10px;padding:13px 15px;background:var(--bg-card);display:flex;gap:11px;font-size:14px} 522 .play .arrow{font-family:var(--mono);font-weight:700;color:var(--accent-primary)} 523 html:not([data-theme="dark"]) .play .arrow{color:var(--module-teal)} /* P3: flecha ⸠cyan â module-teal en papel */ 524 .p-foot{border-top:1.5px solid var(--card-line-strong);padding:11px 20px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)} 525 526 /* ticker (V17): vuelve el movimiento de v11 */ 527 .ticker{overflow:hidden;white-space:nowrap;padding:22px 0;border-top:1px solid var(--card-line);border-bottom:1px solid var(--card-line)} 528 /* P1 fix #5 (ticker sin layout shift/jank): will-change promueve a capa propia â translateX no 529 relayoutea; el contenido va duplicado (2 runs) y -50% = ancho de 1 run = loop sin salto. */ 530 .ticker-in{display:inline-block;animation:scroll 26s linear infinite;will-change:transform;backface-visibility:hidden;font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)} 531 .ticker-in span{margin:0 26px} 532 .ticker-in .k1{color:var(--accent-primary)}.ticker-in .k3{color:var(--accent-signal)} 533 html:not([data-theme="dark"]) .ticker-in .k3, 534 html:not([data-theme="dark"]) .ticker-in .k1{color:var(--module-teal)} /* P3: ticker cyan(k1)/lime(k3) â module-teal en papel */ 535 .ticker-in .dim{color:var(--fg-faint)} 536 @keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} 537 538 section{position:relative;padding:110px 0 84px;overflow:visible} 539 540 /* ===== 01 PROBLEMA · ROSA prominente ===== */ 541 .sec-prob .meganum{top:-80px;right:-60px} 542 .prob-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:stretch;position:relative;z-index:2} 543 .statement-panel{border:1px solid var(--card-line);border-radius:18px;background:var(--panel);backdrop-filter:blur(14px);padding:48px;display:flex;align-items:center;box-shadow:var(--shadow)} 544 /* statement con jerarquÃa (V16): pregunta grande â desarrollo legible â remate con regla rosa */ 545 .statement{display:flex;flex-direction:column;gap:24px} 546 .statement .st-q{font-family:var(--display);font-weight:var(--dw);font-size:clamp(30px,3.3vw,54px);line-height:1.05;letter-spacing:-.015em} 547 .statement .st-q em{font-style:normal;background-image:linear-gradient(100deg,var(--rosa),var(--morado));background-clip:text;-webkit-background-clip:text;color:transparent} 548 .statement .st-body{font-family:var(--body);font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1.62;color:var(--fg-muted);max-width:46ch} 549 .statement .st-body b{color:var(--fg);font-weight:600} 550 .statement .st-punch{font-family:var(--display);font-weight:var(--dw);font-size:clamp(20px,2vw,30px);line-height:1.32;padding-left:20px;border-left:3px solid var(--rosa)} 551 .statement .hl{background-image:linear-gradient(100deg,var(--rosa),var(--morado));background-clip:text;-webkit-background-clip:text;color:transparent} 552 .ns-panel{border:1px solid var(--card-line);border-radius:18px;background:var(--panel);backdrop-filter:blur(14px);overflow:hidden;display:flex;flex-direction:column;min-height:400px;box-shadow:var(--shadow)}
553 .ns-split{flex:1;display:grid;grid-template-columns:1fr 1fr} 554 .ns-half{position:relative;display:flex;flex-direction:column} 555 .ns-half:first-child{border-right:1px solid var(--card-line)} 556 .ns-half canvas{flex:1;width:100%;display:block} 557 .ns-half .cap{padding:14px 18px;border-top:1px solid var(--card-line);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase} 558 .ns-half .cap.r{color:var(--rosa)} 559 .ns-half .cap.s{color:var(--fg);font-weight:700} 560 561 /* ===== 02 MÃTODO · CYAN prominente ===== */ 562 .sec-met .meganum{top:-80px;left:-60px} 563 .met-intro{font-size:clamp(34px,4.2vw,64px);max-width:22ch;position:relative;z-index:2} 564 .met-intro .gnum{background-image:linear-gradient(100deg,var(--data-1),var(--data-3))} 565 html:not([data-theme="dark"]) .met-intro .gnum{background-image:linear-gradient(100deg,var(--module-teal),var(--data-1))} /* teal profundoâcyan: par del sistema en papel */ 566 .concept{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:100px;position:relative;z-index:2} 567 .concept.flip .c-copy{order:2} 568 .concept.flip .c-shape{order:1} 569 .c-copy .cn{font-family:var(--mono);font-size:14px;letter-spacing:.22em;margin-bottom:16px;display:block;font-weight:700;color:var(--accent-primary)} 570 html:not([data-theme="dark"]) .c-copy .cn{color:var(--module-teal)} 571 .c-copy h3{font-size:clamp(32px,3.4vw,52px);margin-bottom:12px} 572 .c-copy h3 .w{background-image:linear-gradient(120deg,var(--data-1),var(--data-3));background-clip:text;-webkit-background-clip:text;color:transparent} 573 html:not([data-theme="dark"]) .c-copy h3 .w{background-image:linear-gradient(120deg,var(--module-teal),var(--data-1))} 574 .c-copy p{color:var(--fg-muted);font-size:20px;max-width:40ch;line-height:1.6} 575 .c-copy p .eco{display:block;margin-top:10px;font-size:17px;color:var(--fg-faint)} 576 .c-shape{position:relative;height:380px;display:flex;align-items:center;justify-content:center;z-index:2} 577 .c-shape canvas{width:100%;height:100%;display:block} 578 .c-shape .shape-cap{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);white-space:nowrap} 579 580 /* ===== RESULTS · full-bleed, laptop + medición lado a lado (dirección algo.tv) ===== */ 581 .sec-prod{padding-top:60px} 582 /* layout asimétrico (V16, dirección algo.tv): el laptop sangra a la izquierda, 583 la card de medición se solapa encima y cae más abajo â capas, no espejo */ 584 .prod-duo{display:grid;grid-template-columns:1.95fr .92fr;gap:0;align-items:center;position:relative;z-index:2;padding:0 clamp(12px,1.8vw,32px) 0 0} 585 .prod-scene{margin-left:calc(-1*clamp(6px,1.2vw,24px))} 586 .prod-duo .result-card{position:relative;z-index:3;margin-left:clamp(-150px,-8vw,-56px);margin-top:110px} 587 .prod-wide{max-width:none;padding:0} /* casi sin white space lateral, como la ref */ 588 .prod-scene{position:relative;display:flex;flex-direction:column;align-items:center;z-index:2} 589 .mac{width:100%;position:relative} 590 .mac-lid{background:linear-gradient(180deg,#46474d,#1b1c20 10%,#0b0b0f 20%);border-radius:24px 24px 0 0;padding:14px 14px 16px;border:1px solid #55565c;border-bottom:none;position:relative} 591 .mac-lid::after{content:"";position:absolute;inset:0;border-radius:24px 24px 0 0;background:linear-gradient(115deg, rgba(255,255,255,.10), transparent 30%, transparent 75%, rgba(255,255,255,.05));pointer-events:none} 592 .mac-cam{width:8px;height:8px;border-radius:50%;background:#16202e;border:1px solid #2c3a4d;margin:0 auto 10px;position:relative;z-index:2} 593 .mac-cam::after{content:"";position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle at 35% 35%, #3f6f5a, #0d1b2a)} 594 .mac-screen{background:#0d0a14;border-radius:6px;overflow:hidden;position:relative;padding:22px 26px;aspect-ratio:16/9.6;min-height:300px;transition:background .35s} 595 html:not([data-theme="dark"]) .mac-screen{background:#F6F5EF} /* V18: la previsualización también cambia a light */ 596 .mac-hinge{height:11px;background:linear-gradient(180deg,#08080a,#33343a 70%,#222328);border-radius:0 0 3px 3px} 597 .mac-base{height:24px;background:linear-gradient(180deg,#eceef2 0%,#c9cbd1 40%,#94969d 100%);border-radius:3px 3px 18px 18px;position:relative;box-shadow:0 1.5px 0 rgba(255,255,255,.6) inset, 0 -3px 8px rgba(0,0,0,.18) inset} 598 .mac-base::before{content:"";position:absolute;
598left:50%;top:0;transform:translateX(-50%);width:160px;height:10px;background:linear-gradient(180deg,#83858c,#bcbec5);border-radius:0 0 12px 12px} 599 .mac-shadow{height:30px;margin:6px auto 0;width:84%;background:radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 70%);filter:blur(7px)} 600 .mac.photo .mac-lid,.mac.photo .mac-hinge,.mac.photo .mac-base,.mac.photo .mac-shadow{display:none} 601 .mac.photo{background:url('assets/macbook.png') center/contain no-repeat;aspect-ratio:1318/800;display:flex;align-items:flex-start;justify-content:center} 602 .mac.photo .mac-screen{position:absolute;left:11.5%;right:11.5%;top:6%;height:64%;border-radius:4px} 603 .brecha-head{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,250,247,.5);display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;flex-wrap:wrap} 604 .brecha-head b{color:var(--lime)} 605 html:not([data-theme="dark"]) .brecha-head{color:rgba(10,10,10,.55)} 606 html:not([data-theme="dark"]) .brecha-head b{color:var(--module-teal)} 607 .brecha-box{position:relative;height:calc(100% - 26px)} 608 #brecha{width:100%;height:100%} 609 .tip{position:absolute;transform:translate(-50%,-130%);background:#FAFAF7;color:#0A0A0A;border-radius:8px;padding:9px 13px;font-family:var(--mono);font-size:11.5px;line-height:1.4;white-space:nowrap;opacity:0;transition:opacity .35s, transform .35s;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:5} 610 .tip b{display:block;font-size:12.5px} 611 .tip::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:#FAFAF7} 612 .tip.show{opacity:1;transform:translate(-50%,-150%)} 613 .device-note{margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--fg-faint);text-align:right;width:min(920px,100%)} 614 615 /* ===== 03 TE LLEVAS · LIME prominente (teal en light) + MOVIMIENTO (V16) ===== */ 616 .sec-val{--val:var(--accent-signal)} /* V18: el entregable es LIME también en light; la legibilidad se resuelve con placas de tinta */ 617 .sec-val .mark .gl{color:var(--val)} 618 .sec-val .meganum{top:-70px;right:-50px} 619 .takes{position:relative;z-index:2;margin-top:56px} 620 .take{display:flex;gap:44px;align-items:center;margin-bottom:84px} 621 .take .big{font-size:clamp(30px,3.6vw,54px)} 622 .take .big .gn{font-family:var(--mono);font-size:.42em;font-weight:700;vertical-align:middle;border:1.5px solid var(--val);border-radius:7px;padding:5px 11px;margin-right:14px;letter-spacing:.08em;display:inline-block;position:relative; 623 background-image:linear-gradient(120deg,var(--data-9),var(--data-7));background-clip:text;-webkit-background-clip:text;color:transparent} 624 /* light: el chip lleva placa de tinta â lime sobre tinta = AAA, el lime no se toca */ 625 html:not([data-theme="dark"]) .take .big .gn::before{content:"";position:absolute;inset:0;border-radius:6px;background:#0A0A0A;z-index:-1} 626 .take p{margin-top:10px;color:var(--fg-muted);font-size:19px;max-width:40ch} 627 .take.t1{max-width:62%} 628 .take.t2{margin-left:auto;max-width:68%;flex-direction:row-reverse;text-align:right} 629 .take.t2 p{margin-left:auto} 630 .take.t3{margin-left:10%;max-width:70%} 631 /* 1 · HUD ring REAL del survey (V18): arco = peso del pilar, color = estado vs room */ 632 .hudwrap{position:relative;width:250px;flex:none} 633 .hudring{width:100%;display:block;color:var(--fg)} 634 .hudring path{stroke-dasharray:100;stroke-dashoffset:100} 635 .take.t1.in .hudring path{animation:rtDraw .7s cubic-bezier(.2,.7,.2,1) forwards} 636 .hudc{position:absolute;left:0;top:0;width:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none} 637 .hudc b{font-family:var(--display);font-weight:var(--dw);font-size:56px;line-height:1} 638 .hudc b small{font-size:18px;color:var(--fg-faint);font-family:var(--mono);font-weight:400} 639 .hudc i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--fg-muted);margin-top:8px;font-weight:700} 640 .hudcap{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--fg-faint);margin-top:12px;text-transform:uppercase} 641 /* 2 · radar REAL del survey (V18): tu señal vs el nivel del room */
642 .radarw{width:min(470px,100%);flex:none;color:var(--fg)} 643 .radarw svg{width:100%;display:block} 644 .radarw .you{transform-box:fill-box;transform-origin:center;transform:scale(.55);opacity:0;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .2s, opacity .8s .2s} 645 .take.t2.in .radarw .you{transform:scale(1);opacity:1} 646 @keyframes rtDraw{to{stroke-dashoffset:0}} 647 /* 3 · jugada (V19): la TERMINAL es la elegida â tipea la jugada real al entrar */ 648 .jugada{width:min(460px,100%);flex:none} 649 .term{border:1.5px solid var(--card-line-strong);border-radius:12px;overflow:hidden;background:#0d0a14;box-shadow:var(--shadow)} 650 .term-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(250,250,247,.12)} 651 .term-bar i{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(250,250,247,.4)} 652 .term-bar span{margin-left:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(250,250,247,.45);text-transform:uppercase} 653 .term-body{padding:18px 16px 22px;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--lime);white-space:pre-wrap;min-height:120px;margin:0} 654 .term-body .prompt{color:rgba(250,250,247,.5)} 655 .term-body .caret{display:inline-block;animation:caretBlink .9s steps(1) infinite} 656 @keyframes caretBlink{50%{opacity:0}} 657 658 /* ===== Cami R1 #6: "te llevas" en LIGHT = rellenos lime + texto/bordes negros (lime-as-fill, rule-safe; es la seccion regalo) ===== */ 659 html:not([data-theme="dark"]) .sec-val .term{background:var(--accent-signal)} 660 html:not([data-theme="dark"]) .sec-val .term-bar{border-bottom-color:rgba(10,10,10,.22)} 661 html:not([data-theme="dark"]) .sec-val .term-bar i{border-color:rgba(10,10,10,.5)} 662 html:not([data-theme="dark"]) .sec-val .term-bar span{color:rgba(10,10,10,.6)} 663 html:not([data-theme="dark"]) .sec-val .term-body{color:#0A0A0A} 664 html:not([data-theme="dark"]) .sec-val .term-body .prompt{color:rgba(10,10,10,.55)} 665 html:not([data-theme="dark"]) .sec-val .term-body .caret{color:#0A0A0A} 666 /* numeradores 01/02/03: relleno lime solido, texto y borde negros (antes: lime-text sobre placa de tinta) */ 667 html:not([data-theme="dark"]) .sec-val .take .big .gn{background-image:none;background-color:var(--accent-signal);-webkit-background-clip:border-box;background-clip:border-box;color:#0A0A0A;border-color:#0A0A0A} 668 html:not([data-theme="dark"]) .sec-val .take .big .gn::before{display:none} 669 /* score del HUD (#hudnum): chip lime con texto y borde negros */ 670 html:not([data-theme="dark"]) .sec-val .hudc b{background:var(--accent-signal);color:#0A0A0A;border:2px solid #0A0A0A;border-radius:12px;padding:4px 14px} 671 html:not([data-theme="dark"]) .sec-val .hudc b small{color:rgba(10,10,10,.55)} 672 673 /* ===== 04 NICO · TEAL/CYAN prominente, con track record ===== */ 674 .sec-nico .meganum{top:-70px;left:-50px} 675 .nico-panel{position:relative;z-index:2;border:1.5px solid var(--card-line-strong);border-radius:22px;background:var(--panel);backdrop-filter:blur(16px);padding:56px;box-shadow:var(--shadow)} 676 .nico-grid{display:grid;grid-template-columns:280px 1fr;gap:54px;align-items:center} 677 .retrato{position:relative;width:300px;height:400px;margin:0 auto} 678 .retrato-halo{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;object-position:top center;filter:blur(56px) saturate(1.05);opacity:.5;transform:scale(1.04);pointer-events:none; 679 -webkit-mask:radial-gradient(56% 56% at 50% 50%, #000 32%, transparent 70%);mask:radial-gradient(56% 56% at 50% 50%, #000 32%, transparent 70%)} 680 html:not([data-theme="dark"]) .retrato-halo{opacity:.38;filter:blur(64px) saturate(1.05)} 681 .retrato-main{position:relative;width:100%;height:100%;object-fit:cover;object-position:top center} 682 .retrato-cap{text-align:center;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--morado);font-weight:700} 683 .nico-copy p.main{font-size:clamp(20px,2vw,26px);line-height:1.55;max-width:46ch;font-family:var(--display);font-weight:var(--dw)} 684 .nico-copy p.main b{font-weight:700} 685 .creds{margin-top:22px;display:flex;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;color:var(--morado);font-weight:700} 686 .track-label{font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--morado);margin:44px 0 18px;font-weight:700} 687 .track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} 688 .tcard{border:1px solid var(--card-line);border-radius:14px;padding:24px;background:var(--bg-card)} 689 .tcard b{font-family:var(--display);font-weight:var(--dw);font-size:clamp(34px,2.8vw,48px);display:block;line-height:1;color:var(--morado)} 690 .tcard .sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);margin-top:8px;display:block;font-weight:700} 691 .tcard p{font-size:15px;color:var(--fg-muted);margin-top:10px;line-height:1.5} 692 693 /* ===== 05 CIERRE (sin logo) ===== */ 694 .cta{min-height:100vh;position:relative;display:flex;align-items:center;overflow:hidden} 695 #cymCta{position:absolute;inset:0;width:100%;height:100%} 696 .cta .vig{position:absolute;inset:0;background:radial-gradient(900px 600px at 30% 50%, color-mix(in srgb, var(--bg) 70%, transparent), transparent 70%);pointer-events:none} 697 .cta-card{position:relative;z-index:2;max-width:720px} 698 .cta-card h2{font-size:clamp(44px,5.6vw,86px)} 699 .cta-card h2 .a{background-image:linear-gradient(100deg,var(--data-1),var(--data-9))} 700 html:not([data-theme="dark"]) .cta-card h2 .a{background-image:linear-gradient(100deg,var(--module-teal),var(--data-1))} 701 .cta-card .sub{margin-top:16px;color:var(--fg-muted);font-size:20px;max-width:42ch} 702 .cta-state{position:absolute;right:44px;bottom:30px;font-family:var(--mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;z-index:2;transition:color .5s;font-weight:700} 703 704 /* ââ 05b · skills band (banda delgada sobre el footer · handoff §4 · 2026-07-01) ââ */ 705 .skills-band{border-top:1px solid var(--card-line);padding:44px 0;background:var(--bg);position:relative} 706 .skills-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap} 707 .skills-band h2{font-size:clamp(24px,3vw,34px)} 708 .skills-band .skills-sub{font-family:var(--mono);font-size:13px;color:var(--fg-muted);margin-top:10px;max-width:64ch;line-height:1.55} 709 @media(max-width:760px){.skills-band{padding:32px 0}} 710 footer{padding:26px 44px;font-family:var(--mono);font-size:12px;color:var(--fg-faint);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;border-top:1px solid var(--card-line)} 711 footer .logo{display:inline-block;width:22px;height:30px;margin-right:10px;vertical-align:middle} 712 713 /* ================= MOBILE ================= */ 714 @media(max-width:1020px){ 715 body{font-size:17px;padding-bottom:84px} 716 .wrap{padding:0 18px} 717 .nav-in{padding:9px max(12px,env(safe-area-inset-right)) 9px max(12px,env(safe-area-inset-left));gap:8px;justify-content:flex-start;flex-wrap:nowrap} 718 .brandwrap{flex:none} 719 .brandwrap .logo{width:34px;height:46px} 720 .brandwrap .brand,.nav-in a.p,.nav-in a.m,.nav-in a.v,.nav-in a.n{display:none} 721 /* Cami R1 #1: top-bar mobile = logo + toggle de tema + CTA, todo en frame a 390px sin clipping */ 722 .nav-theme{margin-left:auto;width:34px;height:34px;font-size:14px} 723 .nav-lang{height:34px;padding:0 8px;font-size:11px} 724 .nav-cta{display:inline-block;margin-left:0;flex:none;white-space:nowrap;padding:8px 12px;font-size:11.5px} 725 #curHalo{width:190px;height:190px} /* Cami R2: espectro más chico en mobile */ 726 .botnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--terminal-sticky);backdrop-filter:blur(16px);border-top:1px solid var(--card-line);padding:10px 6px calc(10px + env(safe-area-inset-bottom));justify-content:space-around;align-items:center} 727 .botnav .go{display:none} /* Cami R2: el CTA vive en el top-bar, no en el botnav */ 728 html:not([data-theme="dark"]) .botnav{background:rgba(250,250,247,.94)} 729 .botnav a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted)} 730 .botnav a .gl{font-size:17px;line-height:1} 731 .botnav a.p .gl{color:var(--rosa)} .botnav a.m .gl{color:var(--data-1)} 732 .botnav a.v .gl{color:var(--accent-signal)} .botnav a.n .gl{color:var(--morado)} 733 html:not([data-theme="dark"]) .botnav a.v .gl, 734 html:not([data-theme="dark"]) .botnav a.m .gl{color:var(--module-teal)} /* P3: igual que nav */ 735 .botnav .go{background:var(--cta-bg);color:var(--cta-fg) !important;border-radius:10px;padding:9px 13px;font-weight:700;font-size:11px;flex-direction:row;gap:6px} 736 .controls{top:auto;bottom:92px;right:10px} 737 .hero{padding:88px 0 36px;min-height:auto} 738 .hero-grid{grid-template-columns:1fr;gap:34px} 739 h1{font-size:clamp(32px,8.6vw,44px)} 740 .hero-sub{font-size:16.5px} 741 .pill-glow{display:none} /* sin halo en mobile (paint); el feather difumina solo */ 742 /* Cami R1 #5: el device NO se encoge â queda a tamaño full y el contenedor hace scroll horizontal (pan) */ 743 .pillwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;scrollbar-width:none;scroll-snap-type:x proximity} 744 .pillwrap::-webkit-scrollbar{display:none} 745 .pill{width:420px;height:560px;flex:none;margin:0;scroll-snap-align:center} 746 section{padding:72px 0 52px} 747 .meganum{width:clamp(220px,62vw,330px)} 748 .meganum .n{font-size:clamp(130px,38vw,200px);filter:blur(6px)} 749 .prod-duo{grid-template-columns:1fr;gap:24px;padding:0 12px} 750 .prod-scene{margin-left:0} 751 .prod-duo .result-card{margin-left:0;margin-top:0} 752 .rc-body{padding:18px 16px;gap:18px} 753 .score{font-size:56px} 754 .score small{font-size:17px} 755 .p-label{font-size:10px;margin-bottom:10px} 756 .fbar .t{font-size:11px} 757 .play{font-size:13px} 758 .p-bar .url{font-size:11px} 759 .prob-grid{grid-template-columns:1fr} 760 .statement-panel{padding:22px} 761 .statement{gap:16px} 762 .statement .st-q{font-size:clamp(24px,6.8vw,32px)} 763 .statement .st-body{font-size:15.5px} 764 .statement .st-punch{font-size:clamp(17px,4.6vw,21px);padding-left:14px} 765 .ticker{padding:16px 0} 766 .ticker-in{font-size:13px} 767 .ns-panel{min-height:300px} 768 .met-intro{font-size:clamp(28px,7.4vw,38px);max-width:none} 769 .concept{grid-template-columns:1fr;gap:20px;margin-top:58px} 770 .concept.flip .c-copy{order:1} 771 .concept.flip .c-shape{order:2} 772 .c-copy h3{font-size:clamp(26px,6.8vw,34px)} 773 .c-copy p{font-size:16px;max-width:none} 774 .c-copy p .eco{font-size:14.5px} 775 .c-shape{height:300px} 776 .mac-screen{padding:10px 12px;min-height:220px} 777 .brecha-head{font-size:8.5px;margin-bottom:4px} 778 .tip{font-size:9px;padding:5px 8px} 779 .take,.take.t1,.take.t2,.take.t3{max-width:100%;margin-left:0;flex-direction:column;align-items:flex-start;text-align:left;gap:20px;margin-bottom:54px} 780 .take.t2 p{margin-left:0} 781 .take .big{font-size:clamp(24px,6.6vw,32px)} 782 .take p{font-size:15.5px}
783 .hudwrap{width:200px} 784 .hudc b{font-size:42px} 785 .radarw,.jugada{width:100%} 786 .term-body{font-size:11.5px} 787 .nico-panel{padding:26px 20px} 788 .nico-grid{grid-template-columns:1fr;gap:26px;justify-items:center} 789 .retrato{width:240px;height:330px} 790 .nico-copy{width:100%} 791 .track-grid{grid-template-columns:1fr} 792 .cta{min-height:76vh} 793 .cta-card h2{font-size:clamp(32px,8.8vw,44px)} 794 .cta-state{right:18px;bottom:100px;font-size:10px} 795 } 796 797 /* ===== P2 · prefers-reduced-motion: congela movimiento (ticker, halo cursor, caret/typing, 798 reveals, ring/radar). Los canvases (cymatics + frecuencias) se congelan desde el JS a un 799 solo frame estatico. Globales primero, luego overrides explicitos por componente. ===== */ 800 @media (prefers-reduced-motion: reduce){ 801 *,*::before,*::after{ 802 animation-duration:.001ms !important; 803 animation-iteration-count:1 !important; 804 transition-duration:.001ms !important; 805 scroll-behavior:auto !important; 806 } 807 .ticker-in{animation:none !important;transform:none !important}
807 /* ticker quieto, sin desplazar */ 808 .term-body .caret,#curCode pre .ccaret{animation:none !important} /* caret sin parpadeo */ 809 #curHalo{transition:none !important} 810 .rv{opacity:1 !important;transform:none !important;transition:none !important} /* reveals visibles, sin deslizar */ 811 .hudring path{stroke-dashoffset:0 !important;animation:none !important} /* ring dibujado, sin trazo */ 812 .radarw .you{opacity:1 !important;transform:none !important;transition:none !important} 813 } 814</style> 815</head> 816<body> 817 818<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true"><symbol id="soundosLogo" viewBox="98 66 1595 2268"><path d="M0 0 C3.776 2.881 7.401 5.902 11 9 C12.1 9.938 13.2 10.875 14.301 11.812 C17.277 14.352 20.243 16.902 23.206 19.456 C25.535 21.461 27.871 23.458 30.206 25.456 C36.289 30.661 42.346 35.895 48.392 41.142 C54.329 46.292 60.295 51.407 66.266 56.516 C69.179 59.009 72.089 61.505 75 64 C76.167 65 77.333 66 78.5 67 C85.5 73 92.5 79 99.5 85 C100.077 85.495 100.655 85.99 101.25 86.5 C102.417 87.501 103.585 88.501 104.752 89.502 C107.655 91.991 110.559 94.479 113.465 96.965 C120.128 102.667 126.769 108.394 133.392 114.142 C139.329 119.292 145.295 124.407 151.266 129.516 C154.179 132.009 157.089 134.505 160 137 C161.167 138 162.333 139 163.5 140 C184.5 158 205.5 176 226.5 194 C227.077 194.495 227.655 194.99 228.25 195.5 C229.417 196.501 230.585 197.501 231.752 198.502 C234.655 200.991 237.559 203.479 240.465 205.965 C247.128 211.667 253.769 217.394 260.392 223.142 C266.329 228.292 272.295 233.407 278.266 238.516 C281.179 241.009 284.089 243.505 287 246 C288.167 247 289.333 248 290.5 249 C296.333 254 296.333 254 325.5 279 C326.077 279.495 326.655 279.99 327.25 280.5 C328.417 281.501 329.585 282.501 330.752 283.502 C333.655 285.991 336.559 288.479 339.465 290.965 C346.128 296.667 352.769 302.394 359.392 308.142 C365.329 313.292 371.295 318.407 377.266 323.516 C380.179 326.009 383.089 328.505 386 331 C387.167 332 388.333 333 389.5 334 C396.5 340 396.5 340 398.25 341.5 C399.416 342.499 400.582 343.499 401.748 344.498 C404.678 347.009 407.607 349.521 410.535 352.035 C416.174 356.876 421.822 361.705 427.5 366.5 C433.772 371.797 440.006 377.136 446.234 382.484 C449.154 384.991 452.077 387.495 455 390 C456.167 391 457.333 392 458.5 393 C459.078 393.495 459.655 393.99 460.25 394.5 C518 444 575.75 493.5 661.5 567 C662.078 567.495 662.655 567.99 663.25 568.5 C664.416 569.499 665.581 570.498 666.746 571.498 C669.682 574.017 672.622 576.53 675.57 579.035 C683.203 585.528 690.711 592.121 698 599 C698.257 599.24 698.257 599.24 699.556 600.453 C716.688 616.54 724.488 634.608 726 658 C726.135 662.833 726.136 667.665 726.129 672.5 C726.13 673.948 726.132 675.397 726.134 676.845 C726.139 680.816 726.137 684.786 726.135 688.757 C726.133 693.08 726.137 697.404 726.141 701.728 C726.146 709.302 726.147 716.877 726.146 724.451 C726.145 735.715 726.149 746.979 726.154 758.243 C726.164 779.533 726.166 800.822 726.167 822.111 C726.168 838.553 726.17 854.995 726.173 871.437 C726.174 876.17 726.175 880.903 726.175 885.636 C726.176 886.812 726.176 887.989 726.176 889.201 C726.182 922.299 726.186 955.396 726.186 988.494 C726.186 989.742 726.186 990.989 726.186 992.275 C726.186 998.6 726.186 1004.924 726.185 1011.249 C726.185 1011.877 726.185 1011.877 726.185 1015.055 C726.185 1017.595 726.185 1020.135 726.185 1022.675 C726.185 1062.191 726.192 1101.707 726.206 1141.223 C726.221 1185.623 726.23 1230.022 726.229 1274.421 C726.229 1279.156 726.229 1283.891 726.229 1288.627 C726.229 1289.793 726.229 1290.959 726.229 1292.16 C726.229 1310.915 726.235 1329.67 726.244 1348.426 C726.252 1367.279 726.253 1386.132 726.247 1404.985 C726.243 1416.181 726.245 1427.378 726.254 1438.574 C726.26 1446.06 726.259 1453.545 726.252 1461.031 C726.248 1465.292 726.247 1469.552 726.255 1473.813 C726.317 1508.325 725.106 1535.982 699.5 1561.688 C694.82 1566.316 690.037 1570.761 685 1575 C683.405 1576.363 681.813 1577.729 680.22 1579.095 C679.023 1580.123 677.824 1581.15 676.625 1582.176 C672.235 1585.934 667.864 1589.712 663.5 1593.5 C655.786 1600.195 648.032 1606.84 640.271 1613.479 C633.663 1619.133 627.068 1624.8 620.5 1630.5 C613.934 1636.199 607.34 1641.864 600.734 1647.516 C597.821 1650.009 594.911 1652.505 592 1655 C590.833 1656 589.667 1657 588.5 1658 C587.922 1658.495 587.345 1658.99 586.75 1659.5 C497.5 1736 497.5 1736 495.75 1737.5 C494.583 1738.501 493.415 1739.501 492.248 1740.502 C489.345 1742.991 486.441 1745.479 483.535 1747.965 C477.507 1753.124 471.493 1758.299 465.5 1763.5 C457.786 1770.194 450.032 1776.84 442.271 1783.479 C435.663 1789.133 429.068 1794.8 422.5 1800.5 C414.786 1807.194 407.032 1813.84 399.271 1820.479 C392.663 1826.133 386.068 1831.8 379.5 1837.5 C371.786 1844.194 364.032 1850.84 356.271 1857.479 C349.663 1863.133 343.068 1868.8 336.5 1874.5 C328.786 1881.194 321.032 1887.84 313.271 1894.479 C306.663 1900.133 300.068 1905.8 293.5 1911.5 C286.934 1917.199 280.34 1922.8
81864 273.734 1928.516 C270.821 1931.009 267.911 1933.505 265 1936 C261.513 1938.99 258.025 1941.979 254.535 1944.965 C247.872 1950.668 241.229 1956.395 234.606 1962.144 C229.843 1966.276 225.06 1970.382 220.27 1974.48 C215.999 1978.137 211.746 1981.814 207.5 1985.5 C199.786 1992.195 192.032 1998.84 184.271 2005.479 C177.028 2011.677 169.804 2017.896 162.606 2024.144 C157.843 2028.276 153.06 2032.382 148.27 2036.48 C143.999 2040.137 139.746 2043.814 135.5 2047.5 C130.107 2052.181 124.696 2056.838 119.27 2061.48 C114.999 2065.137 110.746 2068.814 106.5 2072.5 C98.786 2079.195 91.032 2085.84 83.271 2092.479 C76.028 2098.677 68.804 2104.896 61.606 2111.144 C56.843 2115.276 52.06 2119.382 47.27 2123.48 C42.999 2127.137 38.746 2130.815 34.5 2134.5 C32.615 2136.134 30.729 2137.768 28.844 2139.402 C27.635 2140.45 26.427 2141.498 25.219 2142.547 C-14.736 2177.229 -14.736 2177.229 -36 2176.41 C-51.037 2175.27 -63.543 2163.818 -74.429 2154.349 C-76.785 2152.326 -79.206 2150.385 -81.625 2148.438 C-86.329 2144.613 -90.791 2140.573 -95.25 2136.469 C-97.937 2134.056 -100.69 2131.767 -103.5 2129.5 C-107.285 2126.447 -110.922 2123.293 -114.5 2120 C-118.97 2115.886 -123.59 2112.029 -128.316 2108.215 C-131.806 2105.335 -135.13 2102.293 -138.473 2099.246 C-141.07 2096.938 -143.734 2094.744 -146.438 2092.562 C-151.211 2088.702 -155.734 2084.626 -160.25 2080.469 C-162.937 2078.056 -165.69 2075.767 -168.5 2073.5 C-172.285 2070.447 -175.922 2067.293 -179.5 2064 C-183.97 2059.886 -188.59 2056.029 -193.316 2052.215 C-196.806 2049.335 -200.13 2046.293 -203.473 2043.246 C-206.07 2040.938 -208.734 2038.744 -211.438 2036.562 C-216.21 2032.703 -220.731 2028.628 -225.246 2024.473 C-228.832 2021.253 -232.567 2018.241 -236.316 2015.215 C-239.806 2012.335 -243.13 2009.293 -246.473 2006.246 C-249.07 2003.938 -251.734 2001.744 -254.438 1999.562 C-259.21 1995.703 -263.731 1991.628 -268.246 1987.473 C-271.832 1984.253 -275.567 1981.241 -279.316 1978.215 C-282.806 1975.335 -286.13 1972.293 -289.473 1969.246 C-292.07 1966.938 -294.734 1964.744 -297.438 1962.562 C-302.211 1958.702 -306.734 1954.626 -311.25 1950.469 C-313.937 1948.056 -316.69 1945.767 -319.5 1943.5 C-323.285 1940.447 -326.922 1937.293 -330.5 1934 C-334.97 1929.886 -339.59 1926.029 -344.316 1922.215 C-346.947 1920.044 -349.479 1917.798 -352 1915.5 C-355.417 1912.385 -358.905 1909.408 -362.5 1906.5 C-366.964 1902.889 -371.23 1899.113 -375.473 1895.246 C-378.07 1892.938 -380.734 1890.744 -383.438 1888.562 C-388.211 1884.702 -392.734 1880.626 -397.25 1876.469 C-399.937 1874.056 -402.69 1871.767 -405.5 1869.5 C-410.256 1865.663 -414.755 1861.606 -419.25 1857.469 C-421.937 1855.056 -424.69 1852.767 -427.5 1850.5 C-431.285 1847.447 -434.922 1844.293 -438.5 1841 C-442.97 1836.886 -447.59 1833.029 -452.316 1829.215 C-454.947 1827.044 -457.479 1824.798 -460 1822.5 C-463.417 1819.385 -466.905 1816.408 -470.5 1813.5 C-474.963 1809.89 -479.227 1806.116 -483.469 1802.25 C-486.088 1799.921 -488.775 1797.704 -491.5 1795.5 C-495.964 1791.889 -500.23 1788.113 -504.473 1784.246 C-507.07 1781.938 -509.734 1779.744 -512.438 1777.562 C-517.21 1773.703 -521.731 1769.628 -526.246 1765.473 C-529.832 1762.253 -533.567 1759.241 -537.316 1756.215 C-540.806 1753.335 -544.13 1750.293 -547.473 1747.246 C-550.07 1744.938 -552.734 1742.744 -555.438 1740.562 C-560.21 1736.703 -564.731 1732.628 -569.246 1728.473 C-572.832 1725.253 -576.567 1722.241 -580.316 1719.215 C-582.947 1717.044 -585.479 1714.798 -588 1712.5 C-591.417 1709.385 -594.905 1706.408 -598.5 1703.5 C-602.095 1700.592 -605.583 1697.615 -609 1694.5 C-612.32 1691.477 -615.698 1688.575 -619.188 1685.75 C-625.627 1680.535 -631.855 1675.087 -638.104 1669.646 C-641.079 1667.064 -644.069 1664.499 -647.062 1661.938 C-647.636 1661.447 -648.209 1660.956 -648.8 1660.45 C-649.955 1659.461 -651.111 1658.472 -652.266 1657.484 C-655.179 1654.991 -658.089 1652.495 -661 1650 C-662.167 1649 -663.333 1648 -664.5 1647 C-671.5 1641 -678.5 1635 -685.5 1629 C-686.077 1628.505 -686.655 1628.01 -687.25 1627.5 C-688.417 1626.499 -689.585 1625.499 -690.752 1624.498 C-693.655 1622.009 -696.559 1619.521 -699.465 1617.035 C-706.125 1611.335 -712.764 1605.612 -719.383 1599.865 C-723.676 1596.139 -727.99 1592.44 -732.312 1588.75 C-737.199 1584.575 -742.013 1580.33 -746.773 1576.012 C-748.831 1574.153 -750.908 1572.321 -753 1570.5 C-754.333 1569.333 -755.667 1568.167 -757 1567 C-757.804 1566.301 -758.609
8181565.603 -759.438 1564.883 C-778.915 1547.722 -788.317 1528.882 -790 1503 C-790.136 1498.166 -790.136 1493.333 -790.129 1488.497 C-790.13 1487.049 -790.132 1485.6 -790.134 1484.151 C-790.139 1480.18 -790.137 1476.208 -790.135 1472.237 C-790.133 1467.912 -790.137 1463.588 -790.141 1459.264 C-790.146 1451.688 -790.147 1444.111 -790.146 1436.535 C-790.145 1425.269 -790.149 1414.003 -790.154 1402.736 C-790.164 1381.443 -790.166 1360.15 -790.167 1338.857 C-790.168 1322.413 -790.17 1305.969 -790.173 1289.525 C-790.174 1284.791 -790.175 1280.057 -790.175 1275.324 C-790.176 1274.147 -790.176 1272.97 -790.176 1271.758 C-790.182 1238.656 -790.186 1205.555 -790.186 1172.454 C-790.186 1171.206 -790.186 1169.958 -790.186 1168.673 C-790.186 1162.348 -790.186 1156.022 -790.185 1149.697 C-790.185 1148.441 -790.185 1147.185 -790.185 1145.891 C-790.185 1143.35 -790.185 1140.81 -790.185 1138.27 C-790.185 1098.747 -790.192 1059.224 -790.206 1019.701 C-790.221 975.296 -790.23 930.89 -790.229 886.485 C-790.229 881.749 -790.229 877.014 -790.229 872.278 C-790.229 871.112 -790.229 869.946 -790.229 868.745 C-790.229 849.986 -790.235 831.227 -790.244 812.468 C-790.252 793.612 -790.253 774.757 -790.247 755.901 C-790.243 744.703 -790.245 733.504 -790.254 722.305 C-790.26 714.819 -790.259 707.333 -790.252 699.847 C-790.248 695.585 -790.247 691.324 -790.255 687.062 C-790.361 627.52 -790.361 627.52 -767.392 604.402 C-766.065 603.065 -764.76 601.705 -763.457 600.344 C-758.538 595.276 -753.367 590.753 -747.852 586.348 C-744.796 583.832 -741.894 581.197 -739 578.5 C-734.39 574.21 -729.622 570.196 -724.715 566.246 C-721.893 563.912 -719.194 561.48 -716.5 559 C-712.03 554.886 -707.41 551.029 -702.684 547.215 C-700.053 545.044 -697.521 542.798 -695 540.5 C-691.68 537.477 -688.302 534.575 -684.812 531.75 C-678.373 526.535 -672.145 521.087 -665.896 515.646 C-661.202 511.571 -656.471 507.538 -651.747 503.497 C-649.962 501.967 -648.18 500.433 -646.398 498.898 C-641.064 494.306 -635.72 489.744 -630.25 485.312 C-625.868 481.757 -621.683 478.032 -617.512 474.234 C-614.998 471.999 -612.427 469.866 -609.812 467.75 C-603.389 462.547 -597.169 457.121 -590.939 451.689 C-587.798 448.953 -584.649 446.227 -581.5 443.5 C-577.737 440.24 -573.975 436.979 -570.215 433.715 C-562.412 426.943 -554.584 420.201 -546.734 413.484 C-543.821 410.991 -540.911 408.495 -538 406 C-536.833 405 -535.667 404 -534.5 403 C-533.923 402.505 -533.345 402.01 -532.75 401.5 C-531 400 -529.25 398.5 -527.5 397 C-526.922 396.505 -526.345 396.01 -525.75 395.5 C-524.584 394.501 -523.418 393.501 -522.252 392.502 C-519.322 389.991 -516.393 387.479 -513.465 384.965 C-507.294 379.668 -501.108 374.391 -494.894 369.144 C-490.914 365.781 -486.953 362.395 -483 359 C-478.515 355.149 -474.017 351.314 -469.5 347.5 C-459.471 339.028 -449.523 330.463 -439.608 321.858 C-433.671 316.708 -427.706 311.593 -421.734 306.484 C-418.821 303.991 -415.911 301.495 -413 299 C-409.513 296.01 -406.025 293.021 -402.535 290.035 C-396.507 284.876 -390.493 279.701 -384.5 274.5 C-377.934 268.801 -371.34 263.136 -364.734 257.484 C-361.821 254.991 -358.911 252.495 -356 250 C-354.833 249 -353.667 248 -352.5 247 C-351.923 246.505 -351.345 246.01 -350.75 245.5 C-293 196 -235.25 146.5 -161.75 83.5 C-160.583 82.499 -159.415 81.499 -158.248 80.498 C-155.345 78.009 -152.441 75.521 -149.535 73.035 C-143.507 67.876 -137.493 62.701 -131.5 57.5 C-124.934 51.801 -118.34 46.136 -111.734 40.484 C-109.405 38.491 -107.079 36.497 -104.752 34.502 C-103.003 33.002 -101.253 31.503 -99.504 30.004 C-96.568 27.487 -93.633 24.968 -90.7 22.449 C-88.944 20.943 -87.185 19.44 -85.426 17.938 C-83.201 16.036 -80.992 14.119 -78.793 12.188 C-72.988 7.125 -67.024 2.448 -60.688 -1.938 C-60.042 -2.386 -59.396 -2.835 -58.731 -3.297 C-38.191 -17.222 -19.629 -14.412 0 0 Z M-75 181 C-76.025 181.864 -77.051 182.728 -78.078 183.59 C-85.507 189.836 -92.87 196.161 -100.234 202.484 C-103.154 204.991 -106.077 207.495 -109 210 C-110.167 211 -111.333 212 -112.5 213 C-189.5 279 -189.5 279 -191.25 280.5 C-192.417 281.501 -193.585 282.501 -194.752 283.502 C-197.655 285.991 -200.559 288.479 -203.465 290.965 C-210.128 296.668 -216.771 302.395 -223.394 308.144 C-228.157 312.276 -232.94 316.382 -237.73 320.48 C-242.001 324.137 -246.254 327.814 -250.5 331.5 C-257.066 337.199 -263.66 342.864 -270.266 348.516 C-273.179 351.009 -276.089 353.505 -279 356 C-282.487 358.99 -285.975 361.979 -289.465 364.965 C-295.493 370.124 -301.507 375.299 -307.5 380.5 C-314.066 386.199 -320.66 391.864 -327.266 397.516 C-330.179 400.009 -333.089 402.505 -336 405 C-337.167 406 -338.333 407 -339.5 408 C-340.077 408.495 -340.655 408.99 -341.25 409.5 C-360.5 426 -360.5 426 -362.25 427.5 C-363.417 428.501 -364.585 429.501 -365.752 430.502 C-368.655 432.991 -371.559 435.479 -374.465 437.965 C-381.128 443.668 -387.771 449.395 -394.394 455.144 C-399.157 459.276 -403.94 463.382 -408.73 467.48 C-413.001 471.137 -417.254 474.814 -421.5 478.5 C-426.319 482.683 -431.151 486.851 -436 491 C-443.362 497.3 -450.683 503.648 -458 510 C-468.211 518.864 -478.454 527.69 -488.729 536.479 C-497.851 544.284 -506.935 552.13 -516 560 C-525.064 567.868 -534.146 575.713 -543.266 583.516 C-546.179 586.009 -549.089 588.505 -552 591 C-555.487 593.99 -558.975 596.979 -562.465 599.965 C-568.493 605.124 -574.507 610.299 -580.5 615.5 C-585.342 619.702 -590.194 623.892 -595.062 628.062 C-595.633 628.551 -596.204 629.04 -596.792 629.544 C-599.738 632.066 -602.686 634.585 -605.637 637.102 C-611.751 642.32 -617.815 647.578 -623.766 652.984 C-625.861 654.874 -627.986 656.722 -630.125 658.562 C-648.208 674.471 -657.84 692.453 -659.789 716.672 C-660.128 722.023 -660.138 727.361 -660.129 732.72 C-660.13 733.95 -660.132 735.179 -660.134 736.446 C-660.138 739.838 -660.137 743.231 -660.135 74
8186.623 C-660.133 750.321 -660.137 754.02 -660.141 757.718 C-660.146 764.193 -660.147 770.669 -660.146 777.144 C-660.145 786.774 -660.149 796.403 -660.154 806.033 C-660.164 824.233 -660.166 842.434 -660.167 860.634 C-660.168 874.691 -660.17 888.748 -660.173 902.804 C-660.174 906.852 -660.175 910.9 -660.175 914.948 C-660.176 915.955 -660.176 916.961 -660.176 917.998 C-660.182 946.301 -660.186 974.604 -660.186 1002.907 C-660.186 1003.974 -660.186 1005.041 -660.186 1006.14 C-660.186 1011.547 -660.186 1016.953 -660.185 1022.36 C-660.185 1023.434 -660.185 1024.508 -660.185 1025.614 C-660.185 1027.786 -660.185 1029.957 -660.185 1032.128 C-660.185 1065.912 -660.192 1099.695 -660.206 1133.478 C-660.221 1171.444 -660.23 1209.411 -660.229 1247.378 C-660.229 1251.427 -660.229 1255.477 -660.229 1259.527 C-660.229 1260.524 -660.229 1261.521 -660.229 1262.548 C-660.229 1278.582 -660.235 1294.616 -660.244 1310.65 C-660.252 1326.768 -660.253 1342.887 -660.247 1359.005 C-660.243 1368.576 -660.245 1378.146 -660.254 1387.716 C-660.26 1394.116 -660.259 1400.517 -660.252 1406.917 C-660.248 1410.559 -660.247 1414.2 -660.255 1417.842 C-660.326 1451.756 -657.297 1476.748 -632.688 1501.562 C-627.217 1507.011 -621.684 1512.135 -615.605 1516.898 C-612.617 1519.309 -609.806 1521.883 -607 1524.5 C-602.368 1528.811 -597.579 1532.851 -592.648 1536.82 C-590.027 1538.978 -587.508 1541.213 -585 1543.5 C-581.583 1546.615 -578.095 1549.592 -574.5 1552.5 C-570.905 1555.408 -567.417 1558.385 -564 1561.5 C-560.68 1564.523 -557.302 1567.425 -553.812 1570.25 C-547.373 1575.465 -541.145 1580.913 -534.896 1586.354 C-531.921 1588.936 -528.931 1591.501 -525.938 1594.062 C-525.364 1594.553 -524.791 1595.044 -524.2 1595.55 C-523.045 1596.539 -521.889 1597.528 -520.734 1598.516 C-517.821 1601.009 -514.911 1603.505 -512 1606 C-510.833 1607 -509.667 1608 -508.5 1609 C-492.167 1623 -475.833 1637 -459.5 1651 C-458.923 1651.495 -458.345 1651.99 -457.75 1652.5 C-456.583 1653.501 -455.415 1654.501 -454.248 1655.502 C-451.345 1657.991 -448.441 1660.479 -445.535 1662.965 C-438.872 1668.667 -432.231 1674.394 -425.608 1680.142 C-419.671 1685.292 -413.705 1690.407 -407.734 1695.516 C-404.821 1698.009 -401.911 1700.505 -399 1703 C-397.833 1704 -396.667 1705 -395.5 1706 C-393.167 1708 -390.833 1710 -388.5 1712 C-387.923 1712.495 -387.345 1712.99 -386.75 1713.5 C-385.583 1714.501 -384.415 1715.501 -383.248 1716.502 C-380.345 1718.991 -377.441 1721.479 -374.535 1723.965 C-367.872 1729.667 -361.231 1735.394 -354.608 1741.142 C-348.671 1746.292 -342.705 1751.407 -336.734 1756.516 C-333.236 1759.509 -329.742 1762.506 -326.248 1765.502 C-323.344 1767.991 -320.441 1770.479 -317.535 1772.965 C-310.872 1778.668 -304.229 1784.395 -297.606 1790.144 C-293.417 1793.778 -289.214 1797.395 -285 1801 C-280.151 1805.149 -275.319 1809.317 -270.5 1813.5 C-263.359 1819.697 -256.185 1825.854 -249 1832 C-241.181 1838.689 -233.379 1845.397 -225.608 1852.142 C-219.671 1857.292 -213.705 1862.407 -207.734 1867.516 C-204.236 1870.509 -200.742 1873.506 -197.248 1876.502 C-194.344 1878.991 -191.441 1881.479 -188.535 1883.965 C-181.872 1889.667 -175.231 1895.394 -168.608 1901.142 C-162.671 1906.292 -156.705 1911.407 -150.734 1916.516 C-147.821 1919.009 -144.911 1921.505 -142 1924 C-140.833 1925 -139.667 1926 -138.5 1927 C-136.167 1929 -133.833 1931 -131.5 1933 C-130.923 1933.495 -130.345 1933.99 -129.75 1934.5 C-128.583 1935.501 -127.415 1936.501 -126.248 1937.502 C-123.345 1939.991 -120.441 1942.479 -117.535 1944.965 C-111.507 1950.124 -105.493 1955.3 -99.5 1960.5 C-97.616 1962.133 -95.732 1963.765 -93.848 1965.397 C-92.632 1966.452 -91.417 1967.507 -90.203 1968.563 C-81.673 1975.98 -73.001 1983.161 -64 1990 C-63.552 1990.341 -63.552 1990.341 -61.285 1992.066 C-49.683 2000.553 -38.387 2004.533 -24 2003 C-8.863 1999.574 3.051 1988.185 14.473 1978.305 C16.84 1976.282 19.265 1974.331 21.688 1972.375 C26.081 1968.802 30.284 1965.064 34.469 1961.25 C37.978 1958.131 41.632 1955.203 45.281 1952.25 C47.921 1950.065 50.467 1947.808 53 1945.5 C57.3 1941.581 61.759 1937.908 66.281 1934.25 C69.779 1931.355 73.118 1928.304 76.473 1925.246 C79.07 1922.938 81.734 1920.744 84.438 1918.562 C88.241 1915.487 91.901 1912.312 95.5 1909 C99.97 1904.886 104.59 1901.029 109.316 1897.215 C111.947 1895.044 114.479 1892.798 117 1890.5 C120.396 1887.404 123.862 1884.448 127.438 1881.562 C131.241 1878.487 134.901 1875.312 138.5 1872 C142.97 1867.886 147.59 1864.029 152.316 1860.215 C154.947 1858.044 157.479 1855.798 160 1853.5 C164.3 1849.581 168.759 1845.908 173.281 1842.25 C176.779 1839.355 180.118 1836.304 183.473 1833.246 C186.07 1830.938 188.734 1828.744 191.438 1826.562 C196.211 1822.702 200.734 1818.626 205.25 1814.469 C208.812 1811.271 212.526 1808.286 216.25 1805.281 C219.081 1802.933 221.794 1800.491 224.5 1798
818C228.947 1793.906 233.547 1790.076 238.25 1786.281 C241.081 1783.933 243.794 1781.491 246.5 1779 C250.97 1774.886 255.59 1771.029 260.316 1767.215 C262.947 1765.044 265.479 1762.798 268 1760.5 C272.3 1756.581 276.759 1752.908 281.281 1749.25 C284.779 1746.355 288.118 1743.304 291.473 1740.246 C294.07 1737.938 296.734 1735.744 299.438 1733.562 C303.241 1730.487 306.901 1727.312 310.5 1724 C314.97 1719.886 319.59 1716.029 324.316 1712.215 C326.947 1710.044 329.479 1707.798 332 1705.5 C336.3 1701.581 340.759 1697.908 345.281 1694.25 C348.779 1691.355 352.118 1688.304 355.473 1685.246 C358.07 1682.938 360.734 1680.744 363.438 1678.562 C367.241 1675.487 370.901 1672.312 374.5 1669 C378.97 1664.886 383.59 1661.029 388.316 1657.215 C390.947 1655.044 393.479 1652.798 396 1650.5 C399.396 1647.404 402.862 1644.448 406.438 1641.562 C410.241 1638.487 413.901 1635.312 417.5 1632 C421.97 1627.886 426.59 1624.029 431.316 1620.215 C433.947 1618.044 436.479 1615.798 439 1613.5 C443.3 1609.581 447.759 1605.908 452.281 1602.25 C454.921 1600.065 457.467 1597.808 460 1595.5 C464.3 1591.581 468.759 1587.908 473.281 1584.25 C475.921 1582.065 478.467 1579.808 481 1577.5 C484.32 1574.477 487.698 1571.575 491.188 1568.75 C497.627 1563.535 503.855 1558.087 510.104 1552.646 C513.079 1550.064 516.069 1547.499 519.062 1544.938 C519.636 1544.447 520.209 1543.956 520.8 1543.45 C521.955 1542.461 523.111 1541.472 524.266 1540.484 C526.01 1538.991 527.753 1537.498 529.496 1536.004 C530.074 1535.508 530.653 1535.013 531.248 1534.502 C532.414 1533.502 533.58 1532.502 534.746 1531.502 C537.682 1528.983 540.622 1526.469 543.57 1523.965 C549.751 1518.706 555.856 1513.387 561.804 1507.865 C564.729 1505.15 567.714 1502.527 570.75 1499.938 C587.818 1484.749 594.544 1465.304 596 1443 C596.336 1433.915 596.275 1424.821 596.257 1415.731 C596.252 1412.026 596.258 1408.322 596.263 1404.617 C596.271 1398.139 596.27 1391.661 596.265 1385.182 C596.258 1375.549 596.262 1365.915 596.268 1356.281 C596.278 1339.071 596.277 1321.862 596.272 1304.652 C596.267 1289.591 596.265 1274.53 596.268 1259.469 C596.268 1258.469 596.268 1257.469 596.268 1256.439 C596.269 1252.379 596.269 1248.319 596.27 1244.259 C596.276 1206.195 596.271 1168.131 596.26 1130.067 C596.25 1096.27 596.251 1062.472 596.261 1028.675 C596.271 990.679 596.276 952.684 596.27 914.688 C596.269 910.636 596.268 906.583 596.268 902.531 C596.267 901.533 596.267 900.535 596.267 899.507 C596.265 884.458 596.268 869.409 596.273 854.36 C596.278 837.243 596.277 820.127 596.266 803.011 C596.26 793.438 596.26 783.866 596.267 774.294 C596.272 767.892 596.269 761.49 596.26 755.088 C596.256 751.446 596.254 747.804 596.261 744.162 C596.32 712.154 594.293 686.533 570.85 662.669 C565.42 657.219 559.895 651.946 554 647 C552.405 645.638 550.814 644.272 549.223 642.907 C548.024 641.878 546.825 640.851 545.625 639.824 C541.235 636.066 536.864 632.288 532.5 628.5 C527.681 624.317 522.849 620.149 518 616 C513.151 611.851 508.319 607.683 503.5 603.5 C496.934 597.801 490.34 592.136 483.734 586.484 C480.821 583.991 477.911 581.495 475 579 C473.833 578 472.667 577 471.5 576 C464.5 570 457.5 564 450.5 558 C449.923 557.505 449.345 557.01 448.75 556.5 C447.583 555.499 446.415 554.499 445.248 553.498 C442.345 551.009 439.441 548.521 436.535 546.035 C429.872 540.332 423.229 534.605 416.606 528.856 C412.417 525.222 408.214 521.605 404 518 C396.002 511.156 388.054 504.255 380.104 497.354 C372.845 491.054 365.573 484.768 358.269 478.519 C353.998 474.863 349.746 471.185 345.5 467.5 C326.138 450.705 326.138 450.705 318.25 444.312 C313.875 440.763 309.695 437.044 305.531 433.25 C302.912 430.921 300.225 428.704 297.5 426.5 C293.037 422.89 288.773 419.116 284.531 415.25 C281.912 412.921 279.225 410.704 276.5 408.5 C272.037 404.89 267.773 401.116 263.531 397.25 C260.912 394.921 258.225 392.704 255.5 390.5 C251.036 386.889 246.77 383.113 242.527 379.246 C239.93 376.938 237.266 374.744 234.562 372.562 C229.79 368.703 225.269 364.628 220.754 360.473 C217.168 357.253 213.433 354.241 209.684 351.215 C206.194 348.335 202.87 345.293 199.527 342.246 C196.93 339.938 194.266 337.744 191.562 335.562 C186.789 331.702 182.266 327.626 177.75 323.469 C175.063 321.056 172.31 318.767 169.5 316.5 C164.744 312.663 160.245 308.606 155.75 304.469 C153.063 302.056 150.31 299.767 147.5 297.5 C142.744 293.663 138.245 289.606 133.75 285.469 C131.063 283.056 128.31 280.767 125.5 278.5 C121.715 275.447 118.078 272.293 114.5 269 C110.03 264.886 105.41 261.029 100.684 257.215 C98.053 255.044 95.521 252.798 93 250.5 C89.583 247.385 86.095 244.408 82.5 241.5 C78.037 237.89 73.773 234.116 69.531 230.25 C66.912 227.921 64.225 225.704 61.5 223.5 C57.037 219.89 52.773 216.116 48.531 212.25 C45.912 209.921 43.225 207.704 40.5 205.5 C36.905 202.592 33.417 199.615 30 196.5 C25.812 192.693 21.513 189.069 17.105 185.52 C14.793 183.644 12.51 181.747 10.238 179.824 C-2.986 168.712 -16.822 158.063 -34.938 158.664 C-50.683 160.391 -63.386 171.043 -75 181 Z " transform="translate(928,119)"/><path d="M0 0 C38.61 0 77.22 0 117 0 C117.015 11.815 117.029 23.63 117.044 35.803 C117.093 73.67 117.156 111.538 117.229 149.405 C117.24 155.294 117.251 161.183 117.262 167.072 C117.265 168.244 117.267 169.416 117.269 170.624 C117.304 189.568 117.329 208.512 117.35 227.457 C117.372 246.917 117.405 266.377 117.449 285.837 C117.475 297.831 117.493 309.824 117.499 321.818 C117.505 330.059 117.521 338.299 117.546 346.54 C117.56 351.284 117.569 356.028 117.565 360.772 C117.536 406.153 122.101 452.533 152 489 C152.764 489.977 153.529 490.954 154.316 491.961 C158.526 497.274 162.795 501.681 168 506 C168 506.66 168 507.32 168 508 C168.593 508.263 169.185 508.526 169.796 508.798 C172.095 510.052 173.482 511.332 175.262 513.238 C178.859 516.937 182.697 520.085 186.812 523.188 C187.55 523.746 188.288 524.304 189.049 524.879 C211.267 541.51
8185 235.405 554.887 260.077 567.498 C265.288 570.176 270.462 572.922 275.638 575.667 C281.055 578.53 286.515 581.257 292 584 C292 494.24 292 404.48 292 312 C330.28 312 368.56 312 408 312 C408.33 422.88 408.66 533.76 409 648 C418.24 652.95 427.48 657.9 437 663 C441.537 665.434 446.075 667.867 450.75 670.375 C460.256 675.472 469.778 680.539 479.307 685.591 C489.897 691.206 500.466 696.853 510.978 702.614 C517.967 706.444 524.98 710.227 532 714 C540.908 718.789 549.798 723.609 558.672 728.461 C565.766 732.336 572.88 736.173 580 740 C590.769 745.79 601.512 751.627 612.24 757.493 C615.185 759.101 618.133 760.705 621.082 762.309 C622.083 762.853 623.083 763.398 624.114 763.958 C626.029 765 627.943 766.041 629.858 767.081 C633.955 769.311 638.03 771.548 642 774 C640.726 778.208 639.142 781.75 636.867 785.508 C636.234 786.563 635.601 787.617 634.949 788.704 C634.611 789.26 634.274 789.816 633.927 790.389 C632.105 793.396 630.303 796.415 628.5 799.434 C628.126 800.058 627.753 800.683 627.368 801.326 C623.448 807.896 619.654 814.536 615.875 821.188 C609.211 832.905 602.444 844.56 595.637 856.196 C591.402 863.45 587.203 870.726 583 878 C579.291 876.602 575.903 874.922 572.449 872.98 C571.371 872.377 570.292 871.773 569.18 871.152 C568.612 870.832 568.043 870.512 567.457 870.182 C564.423 868.477 561.383 866.781 558.344 865.086 C557.726 864.741 557.107 864.396 556.47 864.04 C550.568 860.75 544.633 857.522 538.688 854.312 C537.703 853.781 536.719 853.249 535.705 852.701 C533.751 851.646 531.798 850.591 529.844 849.537 C517.058 842.628 504.321 835.634 491.625 828.562 C480.086 822.136 468.489 815.823 456.866 809.55 C452.196 807.024 447.535 804.481 442.875 801.938 C441.972 801.445 441.069 800.952 440.138 800.444 C435.641 797.989 431.144 795.532 426.648 793.074 C424.849 792.091 423.05 791.108 421.25 790.125 C420.352 789.634 419.454 789.144 418.529 788.638 C413.577 785.937 408.616 783.254 403.645 780.59 C393.177 774.981 382.749 769.33 372.438 763.438 C363.4 758.276 354.229 753.424 344.978 748.659 C338.993 745.572 333.057 742.425 327.188 739.125 C319.676 734.903 312.1 730.811 304.5 726.75 C303.902 726.43 303.304 726.111 302.687 725.781 C300.254 724.481 297.821 723.181 295.387 721.881 C289.25 718.602 283.125 715.302 277 712 C239.073 691.569 239.073 691.569 224.125 683.812 C214.838 678.992 205.634 674.034 196.465 668.992 C192.825 666.992 189.172 665.02 185.504 663.07 C172.247 655.997 159.535 648.283 147 640 C146.168 639.452 145.337 638.904 144.48 638.339 C119.923 622.074 93.772 603.064 74.848 580.219 C73.306 578.368 71.731 576.572 70.121 574.781 C61.982 565.673 54.801 556.141 48 546 C47.523 545.291 47.046 544.581 46.554 543.85 C43.28 538.955 40.104 534.005 37 529 C36.612 528.379 36.225 527.758 35.826 527.118 C14.514 492.513 5.392 451.952 1 412 C0.911 411.229 0.821 410.459 0.729 409.665 C-0.151 401.267 -0.137 392.887 -0.12 384.454 C-0.121 382.79 -0.122 381.127 -0.123 379.463 C-0.125 374.916 -0.121 370.369 -0.116 365.822 C-0.112 360.909 -0.113 355.996 -0.114 351.084 C-0.114 342.58 -0.111 334.077 -0.106 325.573 C-0.098 313.279 -0.095 300.985 -0.094 288.69 C-0.092 268.742 -0.085 248.793 -0.075 228.844 C-0.066 209.47 -0.059 190.096 -0.055 170.721 C-0.055 169.527 -0.054 168.332 -0.054 167.101 C-0.053 161.106 -0.052 155.111 -0.05 149.117 C-0.04 99.411 -0.022 49.706 0 0 Z " transform="translate(764,587)"/><path d="M0 0 C4.002 0.59 6.853 1.846 10.332 3.887 C11.366 4.488 12.4 5.09 13.465 5.71 C14.569 6.363 15.674 7.015 16.812 7.688 C17.974 8.367 19.137 9.046 20.299 9.724 C22.694 11.122 25.086 12.524 27.476 13.929 C31.789 16.465 36.113 18.983 40.436 21.501 C43.426 23.243 46.414 24.989 49.402 26.734 C54.428 29.669 59.462 32.588 64.5 35.5 C81.27 45.197 97.985 54.988 114.693 64.791 C122.796 69.544 130.909 74.278 139.043 78.976 C148.353 84.355 157.635 89.781 166.919 95.202 C171.946 98.136 176.973 101.068 182 104 C184 105.167 186 106.333 188 107.5 C188.99 108.078 189.98 108.655 191 109.25 C194 111 197 112.75 200 114.5 C200.99 115.078 201.98 115.655 203 116.25 C204.999 117.416 206.997 118.582 208.996 119.748 C214.019 122.679 219.044 125.608 224.07 128.535 C233.625 134.101 243.171 139.68 252.688 145.312 C271.745 156.59 290.85 167.783 310.041 178.832 C317.149 182.926 324.233 187.057 331.297 191.227 C352.604 203.803 373.937 216.351 395.391 228.676 C407.2 235.46 418.942 242.336 430.603 249.373 C440.193 255.146 449.884 260.737 459.59 266.312 C465.783 269.87 471.957 273.46 478.125 277.062 C479.107 277.636 480.09 278.21 481.102 278.801 C483.079 279.956 485.056 281.111 487.032 282.266 C492.02 285.18 497.01 288.09 502 291 C504.007 292.171 506.013 293.341 508.02 294.512 C511.954 296.807 515.889 299.101 519.824 301.395 C530.725 307.748 541.617 314.117 552.5 320.5 C569.533 330.489 586.575 340.46 603.688 350.312 C613.024 355.689 622.334 361.109 631.625 366.562 C632.235 366.921 632.845 367.279 633.474 367.648 C635.906 369.075 638.338 370.503 640.77 371.931 C646.571 375.337 652.378 378.734 658.188 382.125 C659.154 382.689 660.12 383.253 661.116 383.834 C666.199 386.797 671.289 389.745 676.391 392.676 C688.247 399.487 700.038 406.386 711.748 413.445 C725.059 421.461 738.49 429.27 751.969 437 C753.143 437.674 754.318 438.349 755.492 439.023 C757.722 440.302 759.953 441.579 762.185 442.852 C768.285 446.35 774.212 450.004 780 454 C778.451 458.276 776.299 462.078 773.965 465.961 C773.766 466.295 773.766 466.295 772.76 467.984 C771.489 470.116 770.213 472.246 768.938 474.375 C768.107 475.767 767.277 477.159 766.447 478.551 C762.785 484.69 759.109 490.82 755.428 496.949 C751.449 503.577 747.49 510.216 743.562 516.875 C743.009 517.812 742.455 518.749 741.885 519.715 C739.381 523.954 736.882 528.196 734.402 532.449 C727.802 543.758 720.932 554.892 714 566 C710.167 565.418 707.428 564.311 704.105 562.332 C703.162 561.775 702.218 561.219 701.246 560.645 C700.237 560.04 699.227 559.436 698.188 558.812 C696.026 557.534 693.865 556.255 691.703 554.977 C690.595 554.318 689.487 553.66 688.346 552.981 C683.061 549.852 677.748 546.773 672.438 543.688 C666.141 540.02 659.858 536.336 653.625 532.562 C645.994 527.947 638.255 523.519 630.524 519.073 C622.118 514.233 613.74 509.349 605.375 504.438 C604.145 503.716 602.916 502.994 601.686 502.272 C599.867 501.204 598.048 500.137 596.23 499.069 C582 490.715 567.738 482.419 553.438 474.188 C546.261 470.055 539.102 465.904 532.018 461.614 C525.507 457.681 518.939 453.844 512.375 450 C511.757 449.638 511.139 449.276 510.502 448.903 C506.002 446.268 501.501 443.634 497 441 C491.874 438.001 486.749 435.001 481.625 432 C481.007 431.638 480.389 431.276 479.753 430.904 C473.212 427.072 466.677 423.232 460.188 419.312 C450.896 413.707 441.502 408.275 432.123 402.817 C427.185 399.944 422.248 397.066 417.312 394.188 C416.335 393.617 415.357 393.047 414.349 392.46 C408.881 389.27 403.416 386.073 397.957 382.867 C395.513 381.432 393.069 379.997 390.625 378.562 C390.32 378.384 390.32 378.384 388.779 377.479 C380.063 372.363 371.323 367.29 362.562 362.25 C347.617 353.651 332.785 344.871 318 336 C317.67 404.31 317.34 472.62 317 543 C274.43 543 231.86 543 188 543 C188.032 522.641 188.064 502.28
8181 188.098 481.305 C188.098 468.435 188.096 455.565 188.084 442.695 C188.078 435.937 188.072 429.178 188.067 422.419 C188.067 421.572 188.066 420.725 188.065 419.852 C188.056 406.172 188.078 392.492 188.113 378.812 C188.147 364.775 188.147 350.738 188.116 336.701 C188.098 328.037 188.106 319.375 188.148 310.711 C188.175 304.772 188.168 298.834 188.135 292.895 C188.117 289.467 188.114 286.04 188.15 282.612 C188.182 278.895 188.158 275.182 188.12 271.465 C188.143 270.382 188.165 269.298 188.188 268.181 C188.035 261.032 188.035 261.032 185.013 258.017 C182.733 256.477 180.471 255.204 178 254 C177.142 253.48 176.284 252.96 175.4 252.424 C174.707 252.035 174.014 251.646 173.301 251.246 C172.496 250.791 171.692 250.337 170.863 249.868 C170.022 249.396 169.18 248.924 168.312 248.438 C161 244.297 153.727 240.1 146.5 235.812 C137.993 230.768 129.471 225.749 120.938 220.75 C119.704 220.027 118.47 219.304 117.237 218.582 C111.652 215.309 106.066 212.038 100.479 208.769 C97.444 206.992 94.41 205.215 91.375 203.438 C90.775 203.086 90.176 202.735 89.558 202.373 C80.791 197.238 72.047 192.066 63.312 186.875 C53.395 180.983 43.427 175.187 33.426 169.438 C23.797 163.897 14.23 158.258 4.677 152.588 C-18.441 138.871 -41.631 125.285 -65 112 C-63.429 106.216 -60.516 101.516 -57.438 96.438 C-56.253 94.46 -55.07 92.482 -53.887 90.504 C-53.256 89.451 -52.624 88.398 -51.974 87.313 C-49.95 83.916 -47.948 80.506 -45.957 77.09 C-45.614 76.502 -45.272 75.915 -44.919 75.309 C-44.217 74.106 -43.516 72.902 -42.814 71.699 C-35.912 59.866 -28.879 48.12 -21.708 36.449 C-18.104 30.56 -14.668 24.626 -11.4 18.545 C-9.288 14.707 -6.975 11.008 -4.625 7.312 C-4.175 6.599 -3.725 5.886 -3.262 5.15 C-2.177 3.432 -1.089 1.716 0 0 Z " transform="translate(488,1145)"/></symbol></svg> 819 820<!-- Cami R1 #1: el toggle de tema se movio al nav. Este panel .controls queda SOLO con el cursor (review-only) 821 y se elimina entero en el build de prod (el toggle de tema del nav SI embarca). --> 822<!-- P4/Cami-R1 PROD BUILD: panel .controls (cursor demo) ELIMINADO. El toggle de TEMA del nav SI embarca. --> 823<!-- cursor · 1 espectro (esfera 5%) · 2 looking glass (el código de lo que miras) --> 824<div id="curCode" aria-hidden="true"><pre></pre></div> 825<div id="curHalo" aria-hidden="true"></div> 826 827<nav> 828 <div class="nav-in"> 829 <span class="brandwrap"> 830 <span class="logo"><img class="logo-mark" src="assets/ESS_logo_lime.svg" alt="" aria-hidden="true"></span>
831 <span class="brand">EL SOUND SYSTEM</span> 832 </span> 833 <a class="p" href="#problema" title="La señal enterrada en el ruido"><span class="gl">â</span>Problema</a> 834 <a class="m" href="#metodo" title="El prisma que escanea en 3 frecuencias"><span class="gl">â¬</span>Método</a> 835 <a class="v" href="#valor" title="La señal que te llevas"><span class="gl">â¦</span>Te llevas</a> 836 <a class="n" href="#nico" title="El operador detrás del sistema"><span class="gl">â</span>Nico</a> 837 <button class="nav-theme" id="navTheme" type="button" onclick="toggleTheme()" aria-label="Cambiar tema claro u oscuro" title="Tema claro / oscuro"><span class="ico" aria-hidden="true">â¾</span></button> 838 <a class="nav-lang" href="/en/" hreflang="en" title="English">EN</a> 839 <a class="nav-cta" href="https://www.elsoundsystem.com/soundcheck/music/survey">Sound Check â</a> 840 </div> 841</nav> 842 843<div class="botnav"> 844 <a class="p" href="#problema"><span class="gl">â</span>Problema</a> 845 <a class="m" href="#metodo"><span class="gl">â¬</span>Método</a> 846 <a class="v" href="#valor"><span class="gl">â¦</span>Te llevas</a> 847 <a class="n" href="#nico"><span class="gl">â</span>Nico</a> 848 <a class="go" href="#cta">â¶ Check</a> 849</div> 850 851<!-- ===== HERO (copy LOCKED) ===== --> 852<div class="hero"> 853 <div class="glow g1" data-px="0.04"></div> 854 <div class="wrap hero-in"> 855 <div class="hero-grid"> 856 <div> 857 <div class="kick rv" data-rv="up">El Sound System · Sound Check</div> 858 <h1 class="disp rv" data-rv="up" style="transition-delay:.12s">Obtén el <span class="a grad-text">Mapa de Crecimiento</span> de tu proyecto musical.</h1> 859 <p class="hero-sub rv" data-rv="up" style="transition-delay:.26s">Un <b>Sound Check</b> de 10 minutos que lee la data que ya tienes y te devuelve: tu <b>Health Score</b>, cómo te comparas con equipos en tu misma etapa, y un plan de acción con los primeros pasos para crecer.</p> 860 <div class="cta-row rv" data-rv="up" style="transition-delay:.4s"> 861 <a class="btn-main" href="#cta">Hacer mi Sound Check</a> 862 <span class="cta-note"><b>10 MIN</b> · GRATIS · SIN LLAMADA DE VENTAS</span> 863 </div> 864 </div> 865 <div class="pillwrap rv" data-rv="scale" style="transition-delay:.4s"> 866 <!-- P2 fix: el halo solo carga el video en desktop. <source media> evita la descarga en mobile 867 (donde .pill-glow es display:none pero el <video src> SI se descargaba ~4MB). --> 868 <div class="pill-glow"><video autoplay muted loop playsinline preload="metadata"><source src="assets/hero-the-shrinks-montage.mp4" media="(min-width:1021px)"></video></div> 869 <div class="pill"> 870 <video src="assets/hero-the-shrinks-montage.mp4" poster="assets/hero-the-shrinks-montage.webp" autoplay muted loop playsinline preload="metadata"></video> 871 </div> 872 </div> 873 </div> 874 875 <!-- medición removida del hero (V14) â desde V15 vive al lado del laptop en RESULTS --> 876 </div> 877</div> 878 879<!-- ticker (V17): el movimiento de v11, de vuelta --> 880<div class="ticker" aria-hidden="true"> 881 <div class="ticker-in"> 882 <span class="k3">10 minutos</span><span class="dim">·</span><span>gratis</span><span class="dim">·</span><span>sin llamada de ventas</span><span class="dim">·</span><span class="k3">Health Score</span><span class="dim">·</span><span class="k1">tu posición real</span><span class="dim">·</span><span class="k1">tu próxima jugada</span><span class="dim">·</span> 883 <span class="k3">10 minutos</span><span class="dim">·</span><span>gratis</span><span class="dim">·</span><span>sin llamada de ventas</span><span class="dim">·</span><span class="k3">Health Score</span><span class="dim">·</span><span class="k1">tu posición real</span><span class="dim">·</span><span class="k1">tu próxima jugada</span><span class="dim">·</span> 884 </div> 885</div> 886 887<!-- ===== 01 PROBLEMA ===== --> 888<section class="sec-prob" id="problema"> 889 <div class="meganum" data-px="0.07" style="top:-80px;right:-60px"><span class="blob"></span><span class="n disp">01</span></div> 890 <div class="wrap"> 891 <div class="mark"><span class="gl" style="color:var(--rosa)">â</span><span class="t">El problema</span></div> 892 <div class="prob-grid"> 893 <div class="statement-panel rv" data-rv="left"> 894 <div class="statement">
895 <span class="st-q rv" data-rv="up">¿Te sientes operando <em>a ciegas</em>?</span> 896 <span class="st-body rv" data-rv="up" style="transition-delay:.15s">Publicas contenido pero <b>no sabes qué es lo que mueve la aguja</b>. Buscas estrategias pero son consejos genéricos que no aplican a tus habilidades.</span> 897 <span class="st-punch rv" data-rv="up" style="transition-delay:.3s">Sin una señal clara, tu crecimiento es solo otro "vibe" y tus decisiones se limitan a <span class="hl">imitar lo que otros hacen</span>.</span> 898 </div> 899 </div> 900 <div class="ns-panel rv" data-rv="right" style="transition-delay:.2s"> 901 <div class="ns-split"> 902 <div class="ns-half"><canvas id="cymNoise"></canvas><div class="cap r">RUIDO · SIN PATRÃN</div></div> 903 <div class="ns-half"><canvas id="cymSignal"></canvas><div class="cap s">SEÃAL · PATRÃN CLARO</div></div> 904 </div> 905 </div> 906 </div> 907 </div> 908</section> 909 910<!-- ===== 02 MÃTODO ===== --> 911<section class="sec-met" id="metodo"> 912 <div class="meganum" data-px="0.07" style="top:-80px;left:-60px"><span class="blob"></span><span class="n disp">02</span></div> 913 <div class="wrap"> 914 <div class="mark"><span class="gl" style="color:var(--data-1)">â¬</span><span class="t">El método</span></div> 915 <h2 class="met-intro disp rv" data-rv="up">Un scan profundo en <span class="gnum grad-text">3 frecuencias crÃticas.</span></h2> 916 917 <div class="concept q1"> 918 <div class="c-copy"> 919 <span class="cn rv" data-rv="left">FRECUENCIA 1</span> 920 <h3 class="disp rv" data-rv="left" style="transition-delay:.1s"><span class="w">Estructura</span> y estrategia</h3> 921 <p class="rv" data-rv="left" style="transition-delay:.2s">Tu estructura dicta tu ritmo. Los sistemas deben trabajar para tu equipo, no tu equipo para el software.<span class="eco">Contexto, metas, infraestructura.</span></p> 922 </div> 923 <div class="c-shape rv" data-rv="right" style="transition-delay:.3s"> 924 <canvas id="shGrid"></canvas> 925 <span class="shape-cap">EL CAOS ENCUENTRA SU LUGAR</span> 926 </div> 927 </div> 928 929 <div class="concept q2 flip"> 930 <div class="c-copy"> 931 <span class="cn rv" data-rv="right">FRECUENCIA 2</span> 932 <h3 class="disp rv" data-rv="right" style="transition-delay:.1s"><span class="w">Motor</span> de crecimiento</h3> 933 <p class="rv" data-rv="right" style="transition-delay:.2s">Ecosistema, estrategia, contenido.<span class="eco">Cinco hábitos buenos le ganan a quince a medias: la profundidad es la palanca.</span></p> 934 </div> 935 <div class="c-shape rv" data-rv="left" style="transition-delay:.3s"> 936 <canvas id="shWheel"></canvas> 937 <span class="shape-cap">NO MÃS FUERTE: CONSTANTE</span> 938 </div> 939 </div> 940 941 <div class="concept q3"> 942 <div class="c-copy"> 943 <span class="cn rv" data-rv="left">FRECUENCIA 3</span> 944 <h3 class="disp rv" data-rv="left" style="transition-delay:.1s">Lectura de <span class="w">señal</span></h3> 945 <p class="rv" data-rv="left" style="transition-delay:.2s">Distingue la señal del ruido. El dato que brilla no siempre es el que vende: lo que no se mide con rigor, se pierde.<span class="eco">Datos, reportes, resultados.</span></p> 946 </div> 947 <div class="c-shape rv" data-rv="right" style="transition-delay:.3s"> 948 <canvas id="shWave"></canvas> 949 <span class="shape-cap">DEL RUIDO SALE LA ONDA</span> 950 </div> 951 </div> 952 </div> 953</section> 954 955<!-- ===== RESULTS · laptop + medición lado a lado (full-bleed, dirección algo.tv) ===== --> 956<section class="sec-prod"> 957 <div class="wrap prod-wide"> 958 <div class="prod-duo"> 959 <div class="prod-scene rv" data-rv="left"> 960 <div class="mac" id="mac" data-px="0.02"> 961 <div class="mac-lid"> 962 <div class="mac-cam"></div> 963 <div class="mac-screen"> 964 <div class="brecha-head"><span>TU SEÃAL POR DIMENSIÃN · VS LA SINTONÃA DE TU FRECUENCIA</sp
964an><b>SOUND CHECK RESULTS</b></div> 965 <div class="brecha-box"> 966 <svg id="brecha" viewBox="0 0 880 420" preserveAspectRatio="xMidYMid meet"></svg> 967 <div class="tip" id="tip"><b></b><span></span></div> 968 </div> 969 </div> 970 </div> 971 <div class="mac-hinge"></div> 972 <div class="mac-base"></div> 973 <div class="mac-shadow"></div> 974 </div> 975 <!-- nota dev (solo review, no embarca texto visible): suelta assets/macbook.png (PNG frontal, pantalla apagada) y el probe de P1 fix #1 lo usa automáticamente --> 976 <div class="device-note" aria-hidden="true"></div> 977 </div> 978 979 <aside class="result-card rv" data-rv="right" style="transition-delay:.15s"> 980 <div class="p-bar"><i></i><i></i><i></i><span class="url">elsoundsystem.com/soundcheck/results</span></div> 981 <div class="rc-body"> 982 <div class="rc-score-row"> 983 <div> 984 <div class="p-label">Tu Health Score</div> 985 <div class="score">64<small>/100</small></div> 986 </div> 987 <span class="score-tag">SINTONIZANDO</span> 988 </div> 989 <div> 990 <div class="p-label">3 frecuencias crÃticas</div> 991 <div class="fbar"><div class="t"><span>Estructura y estrategia</span><em>71</em></div><div class="track"><div class="fill q1" style="width:71%"></div></div></div> 992 <div class="fbar"><div class="t"><span>Motor de crecimiento</span><em>52</em></div><div class="track"><div class="fill q2" style="width:52%"></div></div></div> 993 <div class="fbar"><div class="t"><span>Lectura de señal</span><em>68</em></div><div class="track"><div class="fill q3" style="width:68%"></div></div></div> 994 </div> 995 <div> 996 <div class="p-label">Tu posición · equipos en tu etapa</div> 997 <div class="bench"><div class="zone"></div><div class="you"><i></i><b></b></div></div> 998 <div class="bench-l"><span>P25</span><span>P50</span><span>P75</span></div> 999 </div> 1000 <div class="play"><span class="arrow">â¸</span><span><b>Tu próxima jugada:</b> consolida la captura de data de tus shows en vivo antes de invertir más en contenido.</span></div> 1001 </div> 1002 <div class="p-foot">Resultado real de un Sound Check · escaneo #BC1640F3</div> 1003 </aside> 1004 </div> 1005 </div> 1006</section> 1007 1008<!-- ===== 03 TE LLEVAS ===== --> 1009<section class="sec-val" id="valor"> 1010 <div class="meganum" data-px="0.07" style="top:-70px;right:-50px"><span class="blob"></span><span class="n disp">03</span></div> 1011 <div class="wrap"> 1012 <div class="mark"><span class="gl">â¦</span><span class="t">Qué te llevas</span></div> 1013 <h2 class="met-intro disp rv" data-rv="up">Sales con tres cosas, no con un reporte:</h2> 1014 <div class="takes"> 1015 <div class="take t1 rv" data-rv="left"> 1016 <div> 1017 <div class="big disp"><span class="gn">01</span> Tu Health Score</div> 1018 <p>Una nota honesta en 3 frecuencias crÃticas.</p> 1019 </div> 1020 <div class="hudwrap"> 1021 <svg class="hudring" id="hudring" viewBox="0 0 300 300"></svg> 1022 <div class="hudc"><b><span id="hudnum">0</span><small>/100</small></b><i>TU SCORE</i></div> 1023 <div class="hudcap">Composición · ponderada</div> 1024 </div> 1025 </div> 1026 <div class="take t2 rv" data-rv="right" style="transition-delay:.1s"> 1027 <div> 1028 <div class="big disp"><span class="gn">02</span> Tu posición real</div> 1029 <p>Dónde suenas frente a equipos en tu etapa.</p> 1030 </div> 1031 <div class="radarw"><svg id="radarSvg" viewBox="0 0 560 560"></svg></div> 1032 </div> 1033 <div class="take t3 rv" data-rv="up" style="transition-delay:.15s"> 1034 <div> 1035 <div class="big disp"><span class="gn">03</span> Tu próxima jugada</div> 1036 <p>La única cosa que vale la pena arreglar este mes.</p> 1037 </div> 1038 <div class="jugada"> 1039 <div class="term"> 1040 <div class="term-bar"><i></i><i></i><i></i><span>soundcheck · agente</span></div> 1041 <pre class="term-body"><span class="prompt">$</span> <span id="termTxt"></span><span class="caret">â®</span></pre> 1042 </div> 1043 </div> 1044 </div> 1045 </div> 1046 </div> 1047</section> 1048 1049<!-- ===== 04 NICO ===== --> 1050<section class="sec-nico" id="nico"> 1051 <div class="meganum" data-px="0.07" style="top:-70px;left:-50px"><span class="blob"></span><span class="n disp">04</span></div> 1052 <div class="wrap"> 1053 <div class="mark"><span class="gl" style="color:var(--morado)">â</span><span class="t">Quién está detrás</span></div> 1054 <div class="nico-panel rv" data-rv="up"> 1055 <div class="nico-grid"> 1056 <div> 1057 <div class="retrato"> 1058 <img class="retrato-halo" src="assets/nico-portrait-dark.png" alt="" aria-hidden="true" loading="lazy" decoding="async"> 1059 <img class="retrato-main soft-edge" src="assets/nico-portrait-dark.png" alt="Nico Borja · founder, El Sound System" loading="lazy" decoding="async"> 1060 </div> 1061 <div class="retrato-cap">NICOLÃS BORJA · FOUNDER</div> 1062 </div> 1063 <div class="nico-copy"> 1064 <p class="main"><b>ConsultorÃa de élite, empaquetada en un diagnóstico.</b> He pasado 12 años afinando el crecimiento de marcas como Hyatt y artistas #1 en YouTube. El Sound System es el método que uso con ellos, ah
1064ora disponible para ti y tu equipo.</p> 1065 <div class="creds"><span>â Hyatt · 400% a 1,200% ROAS</span><span>â #1 Global YouTube</span><span>â 12+ años growth</span></div> 1066 </div> 1067 </div> 1068 <div class="track-label">Track Record</div> 1069 <div class="track-grid"> 1070 <div class="tcard"> 1071 <b>12+ años</b> 1072 <span class="sub">LATAM / US Hispanics</span> 1073 <p>Growth, operaciones y estrategia de audiencias en música, medios y servicios creativos.</p> 1074 </div> 1075 <div class="tcard"> 1076 <b>$1.5M</b> 1077 <span class="sub">400% â 1,200% ROAS · Hyatt</span> 1078 <p>Paid media para Hyatt Inclusive Collection: +800% de ROAS promedio, 2021 a 2023.</p> 1079 </div> 1080 <div class="tcard"> 1081 <b>#1 Global</b> 1082 <span class="sub">YouTube · Nov 2017</span> 1083 <p>"Criminal" (Natti Natasha à Ozuna) #1 global de YouTube por dos semanas · Vidaprimo.</p> 1084 </div> 1085 </div> 1086 </div> 1087 </div> 1088</section> 1089 1090<!-- ===== 05 CIERRE ===== --> 1091<div class="cta" id="cta"> 1092 <canvas id="cymCta"></canvas> 1093 <div class="vig"></div> 1094 <div class="wrap"> 1095 <div class="cta-card rv" data-rv="left"> 1096 <h2 class="disp">Haz tu <span class="a grad-text">Sound Check.</span></h2> 1097 <p class="sub">10 minutos. Sales sabiendo exactamente qué afinar primero: gratis, sin llamada de ventas.</p> 1098 <a class="btn-main" style="margin-top:28px" href="https://www.elsoundsystem.com/soundcheck/music/survey">Empezar ahora â</a> 1099 </div> 1100 </div> 1101 <div class="cta-state" id="ctaState" style="color:var(--fg-faint)">RUIDO</div> 1102</div> 1103 1104<!-- ===== 05b SKILLS · CTA a skills.elsoundsystem.com (handoff §4) ===== --> 1105<section class="skills-band" id="skills"> 1106 <div class="wrap"> 1107 <div> 1108 <h2 class="disp">Skills gratis para tu IA.</h2> 1109 <p class="skills-sub">Skills listas para Claude, ChatGPT, Gemini, Perplexity o la IA que prefieras. En Claude se instalan de un clic; en las demás, las subes y le pides que las use.</p> 1110 </div> 1111 <a class="btn-main" href="https://skills.elsoundsystem.com" target="_blank" rel="noopener noreferrer">Ver skills gratis â</a> 1112 </div> 1113</section> 1114 1115<footer> 1116 <span><span class="logo"><img class="logo-mark" src="assets/ESS_logo_lime.svg" alt="" aria-hidden="true"></span>EL SOUND SYSTEM · 2026</span> 1117 <span><a href="/privacidad/" style="color:inherit">Privacidad y cookies</a></span> 1118</footer> 1119 1120<!-- ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1121 CAMI R1 · LANDING VISUAL FIXES â 2026-06-08 (Claude Code / Pi). Base: V20.5. 1122 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1123 #1 Toggle de tema = control real de nav (.nav-theme, onclick toggleTheme). Sale del panel demo .controls; 1124 ese panel queda SOLO con el cursor (review-only) y el build de prod lo elimina, conservando el toggle 1125 del nav. Default dark. Mobile: el toggle va en el top-bar (logo + toggle + CTA, en frame a 390px). 1126 #2 Nav en light = colores de tema oscuro sobre superficie OSCURA. nav bg en light: rgba(250,250,247,.92) 1127 -> var(--terminal-sticky) (rgba(16,14,26,.92)); tokens --fg/--fg-muted/--card-line redefinidos dentro 1128 del nav a valores dark; revertidos los overrides P3 module-teal en a.v (lime)/a.m (cyan) y brand (lime). 1129 botnav NO se toca (sigue en papel con module-teal, rule-safe). 1130 #3 Cymatics/frecuencias: dot x0.55 bajo el breakpoint (innerWidth<=1020). Field d=dot*pxr -> *0.55; Shape 1131 d=3.2*pxr -> *0.55. 1132 #4 Meganum back-numbers: token --meganum-op. dark .1->.3 (+20pp), light .1->.5 (+40pp). 1133 #5 Device del hero (.pill dentro de .pillwrap): en mobile NO encoge; queda 420x560 y .pillwrap hace 1134 overflow-x:auto con momentum (pan horizontal). 1135 #6 "te llevas" en light: terminal del agente = fondo lime + texto negro; numeradores .gn (01/02/03) y el 1136 score del HUD (.hudc b / #hudnum) = relleno lime + texto y borde negros. Lime-as-fill (rule-safe). 1137 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1138 1139<!-- ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
1140 P1 · QA FUNCIONAL + RESPONSIVE â fixes aplicados 2026-06-08 (Claude Code / Pi) 1141 Base: V20.1. Sin tocar copy del hero ni decisiones §1 del sprint. 1142 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1143 #1 Consola limpia â assets/macbook.png no se envÃa en launch; el probe que 1144 lo buscaba tiraba 404 cada carga. Gateado tras USE_MAC_PHOTO=false (el 1145 mock CSS del laptop funciona sin el PNG). Flip a true cuando exista. 1146 #2 Cursor rAF gateado por modo â el loop ya no corre con mode=0 (Off, el 1147 default de prod). start/stop con cancelAnimationFrame en setCursor(): On 1148 arranca desde la posición actual, Off lo frena. 1149 #3 IntersectionObservers de canvases â VERIFICADO ya presentes y pausando: 1150 Shape() (frecuencias shGrid/shWheel/shWave, IO th .22, resetea el caos al 1151 salir y re-dispara la entrada al reentrar) y Field() (cymatics cymNoise/ 1152 cymSignal/cymCta, IO th .05 â running=isIntersecting). Solo confirmación. 1153 #4 Terminal "tu próxima jugada" â VERIFICADO dispara una sola vez: el IO hace 1154 ob.disconnect() en la primera intersección + guard `typing`. Sin cambio. 1155 #5 Ticker sin layout shift â will-change:transform en .ticker-in; contenido 1156 duplicado (2 runs) y translateX(-50%)=ancho de 1 run â loop sin salto. 1157 #6 Tokens 404 â el <link href="../../r7-r8-package-v1.0/tokens.css"> daba 404 1158 al montar el server por debajo de design-system/ y se romperÃa en el 1159 deploy estático plano. INLINED a <style id="tokens-inline"> (head). Cero 1160 dependencia externa. Re-sync en P4 si tokens.css cambia. 1161 #7 Rutas de assets â relativas al HTML (assets/â¦): favicon.svg y 1162 hero-mockumentary.mp4 existen y resuelven desde design-system/. El 1163 retrato de Nico aún apunta a URL absoluta de prod (bloqueante §2, lo 1164 verifica Nico). P4 aplanará assets/ junto al index.html. 1165 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1166 1167<!-- ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1168 P2 · PERFORMANCE + REDUCED-MOTION â fixes aplicados 2026-06-08 (Claude Code / Pi) 1169 Base: V20.2. Sin tocar copy del hero ni decisiones §1. (Los items P2 de §3 1170 "cursor rAF gate" e "IO pausan canvases" ya se cerraron en P1, no se repiten.) 1171 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1172 #1 prefers-reduced-motion â CSS @media (reduce): congela ticker (animation+ 1173 transform none), caret del terminal y del lente, halo del cursor, reveals 1174 .rv (visibles sin deslizar), trazo del ring y scale-in del radar. Honrado 1175 TAMBIEN desde el JS via const REDUCED: terminal muestra la jugada completa 1176 sin tipear; count-up del score salta a 64; parallax de scroll off; cursor 1177 no arranca su rAF; las frecuencias (Shape) pintan un frame ordenado y los 1178 cymatics (Field) convergen al patron Chladni y pintan UN frame estatico, 1179 sin rAF en ninguno; tooltip ciclico del laptop en pausa. 1180 #2 Hero video doble descarga â el <video> del halo .pill-glow cargaba el mismo 1181 ~4MB aun siendo display:none en mobile. Ahora usa <source media="(min-width: 1182 1021px)">: en mobile no hay source que matchee -> no se descarga. Ambos 1183 videos llevan preload="metadata" (no bajan el stream completo hasta play). 1184 (La re-codificacion a <=4MB es tarea de asset de Nico, §2, no de codigo.) 1185 #3 Lazy below-the-fold â los <img> del retrato de Nico ya tenian loading="lazy"; 1186 se les anadio decoding="async". No hay otras imagenes bajo el fold (logos = 1187 SVG inline, hero = video). Cumplido. 1188 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1189 1190<!-- ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1191 P3 · A11Y + SEO + COPY-LOCK â aplicado 2026-06-08 (Claude Code / Pi). Base: V20.3. 1192 Sigo la decision LOCKED del sprint §1 + AGENTS (cyan en papel = --module-teal #007A8F). 1193 NOTA de contradiccion DS: 02_color.md §5.3 dice #003A3A para cyan-texto-en-papel, pero el 1194 sprint §1 lo descarta como "murky" y fija #007A8F. Sigo el sprint (mas nuevo). Surface a Cami. 1195 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1196 #1 Light-mode lime/cyan-as-text â fixes (cyan-texto-en-papel â --module-teal): 1197 · .kick (cyan, ~2.3:1 en papel) â module-teal 1198 · .cta-note b "10 MIN" (cyan) â module-teal 1199 · .ticker-in .k1 (cyan, marquee visible) â module-teal 1200 · .play .arrow ⸠(cyan) â module-teal 1201 · .nav-in a.m .gl + .botnav a.m .gl (glyph cyan del metodo) â module-teal 1202 Ya correctos (override light previo): h1 .a, .met-intro .gnum, .c-copy .cn/h3 .w, 1203 .cta-card h2 .a, brand/logo, nav/botnav a.v glyph, .ticker-in .k3. 1204 By-design / NO tocado: lime en seccion "te llevas" (.gn con placa de tinta, ⦠mark) = 1205 decision LOCKED §1 (lime no se cambia; legibilidad por placas). Marcadores dataviz 1206 (ramp en ring/radar/brecha y sus labels internos) = exencion dataviz del DS. 1207 #2 focus-visible â outline explicito 3px en a/button (CTAs, nav, botnav, toggles del panel 1208 .controls): lime en dark, module-teal en papel; outline-offset:3px = visible incluso 1209 sobre el CTA lime, sin layout shift. Orden de tab rastreable.
1210 #3 SEO head â anadidos: meta description (ES, del copy del hero), canonical (placeholder), 1211 theme-color, Open Graph (type/site_name/title/description/url/image placeholder/locale), 1212 Twitter card. title + lang=es + viewport ya estaban. 1213 #4 Tooltips touch â ring y radar: ademas de mouseenter/leave, ahora 'click' = show y tap 1214 fuera = hide (document click). El tooltip del laptop (brecha) NO depende de hover: es 1215 auto-ciclico por setInterval, ya funciona en touch (y queda en pausa con reduced-motion). 1216 #5 Copy-lock (verificacion, SIN editar): 1217 · H1 = "Obtén el Mapa de Crecimiento de tu proyecto musical." â MATCH con §1. 1218 · Subhead: contiene "...y te devuelve: tu Health Score..." con ":" â MATCH (§1/knob V20.1). 1219 Observacion (no es mio para cambiar): el <title> usa em-dash "El Sound System â Sound 1220 Check"; AGENTS prohibe em-dash en copy. Es copy preexistente del title; lo reflejo tal 1221 cual en OG por consistencia. Surface a Nico para decidir (colon/pipe). 1222 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1223 1224<!-- ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1225 FONTS · SELF-HOST â aplicado 2026-06-08 (Claude Code / Pi). Base: V20.4. 1226 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1227 · Quitados: preconnect a fonts.googleapis + los 2 <link> CDN (Google Space Mono, Fontshare). 1228 Cero requests de fuentes externas; sirve todo desde assets/fonts/. 1229 · Self-host (8 woff2, ~154KB, solo pesos usados, sin itálicas): 1230 Zodiak: 700 -> zodiak-700.woff2 (Fontshare; 400 no se usaba) 1231 General Sans: 400, 600, 700 -> general-sans-{400,600,700}.woff2 (Fontshare; 500 no se usaba) 1232 Space Mono: 400, 700 (latin+latin-ext)-> space-mono-{400,700}-{latin,latin-ext}.woff2 (Google; vietnamese descartado) 1233 · @font-face con font-display:swap en todos; Space Mono conserva unicode-range (latin cubre ES; 1234 latin-ext casi nunca se descarga). preload (as=font, crossorigin) SOLO de los 2 criticos 1235 above-the-fold: Zodiak 700 (display del hero) + General Sans 400 (cuerpo). 1236 · OJO de fidelidad: General Sans 700 (.hero-sub b) ahora es face REAL; antes el CDN no cargaba 1237 700 y el navegador sintetizaba bold. Cambio de render (no de copy) â verificar el hero. 1238 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1239
1240<script> 1241/* P2: respeta prefers-reduced-motion en TODA la logica JS de movimiento (no solo CSS). */ 1242const REDUCED = !!(window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches); 1243function setTheme(t){ 1244 document.documentElement.setAttribute('data-theme', t); 1245 /* Cami R1 #1: el toggle de tema vive en el nav (los botones R7/R8 del panel .controls se quitaron). */ 1246 const nb=document.getElementById('navTheme'); 1247 if(nb){ const ico=nb.querySelector('.ico'); if(ico) ico.textContent = (t==='dark' ? 'â¾' : 'â'); } 1248 if(window.__brechaRender) window.__brechaRender(); /* V18: la pantalla del compu sigue el tema */ 1249} 1250function toggleTheme(){ setTheme(document.documentElement.getAttribute('data-theme')==='dark' ? 'light' : 'dark'); } 1251/* logo: llega completo, colapsa al sÃmbolo, hover lo revela */ 1252setTimeout(()=>document.body.classList.add('brand-collapsed'), 2200); 1253 1254/* ===== Cursor V19 · 1 ESPECTRO (esfera 5%, rota con xy) · 2 LOOKING GLASS (el código real) ===== */ 1255(function(){ 1256 const halo=document.getElementById('curHalo'); 1257 const code=document.getElementById('curCode'), codePre=code.querySelector('pre'); 1258 let mx=innerWidth/2, my=innerHeight/2, hx=mx, hy=my, lx=mx, ly=my, mode=0, fr=0, lastEl=null; 1259 addEventListener('mousemove',e=>{mx=e.clientX;my=e.clientY},{passive:true}); 1260 let tTarget='', tPos=0; 1261 function esc(s){return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')} 1262 function hl(s){return esc(s).replace(/(<\/?[a-z0-9-]+)/gi,'<span class="tg">$1</span>')} 1263 function compact(el){ 1264 let h=el.outerHTML||''; 1265 h=h.replace(/\s+/g,' ').replace(/></g,'>\n<'); 1266 return h.length>420 ? h.slice(0,420)+' â¦' : h; 1267 } 1268 /* P1 fix #2: el rAF del cursor ya no corre cuando mode=0 (default en prod). Antes el loop 1269 giraba cada frame con el cursor Off. Ahora arranca/para por modo (start/stop). */ 1270 let rafId=null; 1271 function loop(){ 1272 fr++; 1273 /* espectro: arrastre fantasma; la rotación la dicta la posición (esfera girada con la mano) */ 1274 hx+=(mx-hx)*0.07; hy+=(my-hy)*0.07; 1275 halo.style.transform=`translate(${hx}px,${hy}px) translate(-50%,-50%)`; 1276 if(mode===1){ 1277 const nx=hx/innerWidth, ny=hy/innerHeight; 1278 halo.style.setProperty('--a1', (nx*360+ny*160).toFixed(1)+'deg'); 1279 halo.style.setProperty('--a2', (-nx*220+ny*120).toFixed(1)+'deg'); 1280 halo.style.setProperty('--px', (28+nx*44).toFixed(1)+'%'); /* el brillo especular viaja: */ 1281 halo.style.setProperty('--py', (24+ny*48).toFixed(1)+'%'); /* la esfera "gira" contigo */ 1282 } 1283 /* looking glass: el código de lo que estás mirando, sin generar nada */ 1284 if(mode===2){ 1285 lx+=(mx-lx)*0.25; ly+=(my-ly)*0.25; 1286 code.style.left=lx+'px'; code.style.top=ly+'px'; 1287 if(fr%5===0){ 1288 const el=document.elementFromPoint(mx,my); 1289 if(el && el!==lastEl && el!==code && !code.contains(el)){ 1290 lastEl=el; tTarget=compact(el); tPos=0; /* nuevo elemento â el código se reescribe */ 1291 } 1292 } 1293 if(tPos<tTarget.length && fr%4===0){ /* V20.1: typewriter a 1/4 de velocidad */ 1294 tPos=Math.min(tTarget.length,tPos+7); 1295 codePre.innerHTML=hl(tTarget.slice(0,tPos))+'<span class="ccaret">â®</span>'; 1296 } 1297 } 1298 rafId=requestAnimationFrame(loop); 1299 } 1300 window.setCursor=function(n){ 1301 mode=n; 1302 document.body.classList.toggle('cur-1', n===1); 1303 document.body.classList.toggle('cur-2', n===2); 1304 for(let i=0;i<=2;i++){const b=document.getElementById('cur'+i); if(b) b.classList.toggle('on', i===n);} 1305 if(n!==2){lastEl=null;lx=mx;ly=my;} 1306 if(n===0){ if(rafId!==null){cancelAnimationFrame(rafId);rafId=null;} } /* Off â frena el loop por completo */ 1307 else if(rafId===null && !REDUCED){ hx=mx;hy=my; rafId=requestAnimationFrame(loop); } /* On â arranca desde la posición actual */ 1308 }; 1309 /* V20.8: el espectro embarca por defecto. En prod el panel .controls se elimina, 1310 asi que sin esto el cursor nunca arranca. REDUCED -> queda Off (a11y). */ 1311 if(!REDUCED) setCursor(1); 1312})(); 1313 1314/* ===== count-up del Health Score en "te llevas" ===== */ 1315(function(){
1316 const b=document.getElementById('hudnum'); if(!b) return; 1317 if(REDUCED){ b.textContent='64'; return; } /* P2: score final, sin count-up */ 1318 const ob=new IntersectionObserver((es)=>es.forEach(e=>{ 1319 if(!e.isIntersecting) return; ob.disconnect(); 1320 const T=1400, t0=performance.now(); 1321 (function tick(n){ 1322 const p=Math.min(1,(n-t0)/T); 1323 b.textContent=Math.round(64*(1-Math.pow(1-p,3))); 1324 if(p<1) requestAnimationFrame(tick); 1325 })(t0); 1326 }),{threshold:0.4}); 1327 ob.observe(b); 1328})(); 1329 1330/* ===== HUD ring real (te llevas · 1): arco = peso del pilar, color = estado vs room ===== */ 1331(function(){ 1332 const svg=document.getElementById('hudring'); if(!svg) return; 1333 const Wt=[.16,.14,.14,.10,.10,.10,.10,.08,.08]; 1334 const ROOM=[30,40,35,25,50,35,40,15,25]; 1335 const DIMS=[52,28,14,48,38,55,50,36,44]; 1336 const weak=DIMS.indexOf(Math.min(...DIMS)); 1337 const colOf=(g,f)=>f?'#CFFF04':g>=20?'#E1F291':g>0?'#00B0CD':g===0?'#9b94c4':'#FF9C87'; 1338 const C=150,R=110,GAP=4,TOT=360-GAP*9; 1339 const P=(a,r)=>[C+r*Math.cos(a*Math.PI/180),C+r*Math.sin(a*Math.PI/180)]; 1340 let a=-90, el=''; 1341 DIMS.forEach((s,i)=>{ 1342 const sweep=TOT*Wt[i], g=s-ROOM[i], f=i===weak, c=colOf(g,f); 1343 const p0=P(a,R), p1=P(a+sweep,R); 1344 el+=`<path d="M ${p0[0].toFixed(1)},${p0[1].toFixed(1)} A ${R} ${R} 0 0 1 ${p1[0].toFixed(1)},${p1[1].toFixed(1)}" fill="none" stroke="${c}" stroke-width="28" pathLength="100" data-d="${(i*0.07).toFixed(2)}"${f?' filter="drop-shadow(0 0 7px rgba(207,255,4,.55))"':''}/>`; 1345 const lp=P(a+sweep/2,137); 1346 el+=`<text x="${lp[0].toFixed(1)}" y="${(lp[1]+4).toFixed(1)}" text-anchor="middle" font-family="Space Mono" font-size="11" font-weight="${f?'700':'400'}" fill="currentColor" fill-opacity="${f?'1':'.5'}">${i+1}</text>`; 1347 a+=sweep+GAP; 1348 }); 1349 svg.innerHTML=el; 1350 svg.querySelectorAll('path').forEach(p=>p.style.animationDelay=p.dataset.d+'s'); 1351 /* V19: hover en cada segmento â tooltip con más info (mismo sistema .tip) */ 1352 const PNAMES=["Tu Motor de Ingresos","Tu Ritmo de Estrenos","Lealtad de tus Fans","Tus Canales Propios","Tu Máquina de Contenido","El Control de tus Datos","El Pulso de tu Operación","Tu Puerta a Sync y Marcas","Tu Equipo Extendido"]; 1353 const tip=document.createElement('div'); tip.className='tip'; tip.innerHTML='<b></b><span></span>'; 1354 svg.parentElement.appendChild(tip); 1355 svg.querySelectorAll('path').forEach((p,i)=>{ 1356 p.style.pointerEvents='stroke'; p.style.cursor='crosshair'; 1357 const show=()=>{ 1358 const g=DIMS[i]-ROOM[i], f=i===weak; 1359 tip.querySelector('b').textContent=PNAMES[i]+(f?' â ':''); 1360 tip.querySelector('span').textContent=`peso ${Math.round(Wt[i]*100)}% · tu señal ${DIMS[i]} · sintonÃa ${ROOM[i]} · ${g>0?'+'+g:g}`+(f?' â empieza aquÃ':''); 1361 const bb=p.getBBox(); 1362 tip.style.left=((bb.x+bb.width/2)/300*100)+'%'; 1363 tip.style.top=((bb.y+bb.height/2)/300*100)+'%'; 1364 tip.classList.add('show'); 1365 }; 1366 p.addEventListener('mouseenter',show); 1367 p.addEventListener('click',ev=>{ev.stopPropagation();show();}); /* P3: tap-to-show en touch */ 1368 p.addEventListener('mouseleave',()=>tip.classList.remove('show')); 1369 }); 1370 document.addEventListener('click',()=>tip.classList.remove('show')); /* P3: tap fuera â ocultar */ 1371})(); 1372 1373/* ===== Radar real (te llevas · 2): tu señal vs el nivel del room ===== */ 1374(function(){ 1375 const host=document.getElementById('radarSvg'); if(!host) return; 1376 const SHORT=["INGRESOS","ESTRENOS","FANS","CANALES","CONTENIDO","DATOS","OPERACIÃN","SYNC","EQUIPO"]; 1377 const ROOM=[30,40,35,25,50,35,40,15,25]; 1378 const DIMS=[52,28,14,48,38,55,50,36,44]; 1379 const weak=DIMS.indexOf(Math.min(...DIMS)); 1380 const cx=280,cy=262,Rr=182,N=9; 1381 const pt=(i,v)=>{const a=Math.PI*2*i/N-Math.PI/2,r=Rr*v/100;return[cx+r*Math.cos(a),cy+r*Math.sin(a)]}; 1382 const poly=v=>v.map((s,i)=>pt(i,s).map(n=>n.toFixed(1)).join(',')).join(' '); 1383 const rings=[25,50,75,100].map(v=>`<polygon points="${poly(Array(N).fill(v))}" fill="none" stroke="currentColor" stroke-opacity=".12"/>`).join(''); 1384 const spokes=Array.from({length:N},(_,i)=>{const p=pt(i,100);return `<line x1="${cx}" y1="${cy}" x2="${p[0].toFixed(1)}" y2="${p[1].toFixed(1)}" stroke="currentColor" stroke-opacity=".1" stroke-dasharray="2 4"/>`}).join(''); 1385 const labels=SHORT.map((s,i)=>{const p=pt(i,121);const f=i===weak;return `<text x="${p[0].toFixed(1)}" y="${p[1].toFixed(1)}" text-anchor="middle" font-family="Space Mono" font-size="11" letter-spacing=".06em" fill="currentColor" fill-opacity="${f?'1':'.55'}" font-weight="${f?'700':'400'}">${s}</text>`}).join('');
1386 const dots=DIMS.map((s,i)=>{const p=pt(i,s);const f=i===weak;return `<circle cx="${p[0].toFixed(1)}" cy="${p[1].toFixed(1)}" r="${f?7:5}" fill="${f?'#CFFF04':'#00B0CD'}" stroke="${f?'#0A0A0A':'none'}" stroke-width="${f?1.8:0}"/>`}).join(''); 1387 host.innerHTML=`${rings}${spokes} 1388 <polygon points="${poly(ROOM)}" fill="none" stroke="currentColor" stroke-opacity=".6" stroke-width="1.5" stroke-dasharray="5 4"/> 1389 <g class="you"><polygon points="${poly(DIMS)}" fill="rgba(0,176,205,.16)" stroke="#00B0CD" stroke-width="2.2" stroke-linejoin="round"/>${dots}</g> 1390 ${labels} 1391 <g font-family="Space Mono" font-size="10.5" letter-spacing=".08em"> 1392 <line x1="86" y1="540" x2="112" y2="540" stroke="#00B0CD" stroke-width="3"/><text x="120" y="544" fill="currentColor" fill-opacity=".7">TU SEÃAL</text> 1393 <line x1="190" y1="540" x2="216" y2="540" stroke="currentColor" stroke-opacity=".6" stroke-dasharray="5 4" stroke-width="1.5"/><text x="224" y="544" fill="currentColor" fill-opacity=".7">LA SINTONÃA DE TU FRECUENCIA</text> 1394 <circle cx="444" cy="540" r="5" fill="#CFFF04"/><text x="456" y="544" fill="currentColor" fill-opacity=".7">EMPIEZA AQUÃ</text> 1395 </g>`; 1396 /* V19: hover en los puntos del mapa â tooltip (mismo sistema .tip) */ 1397 const PNAMES=["Tu Motor de Ingresos","Tu Ritmo de Estrenos","Lealtad de tus Fans","Tus Canales Propios","Tu Máquina de Contenido","El Control de tus Datos","El Pulso de tu Operación","Tu Puerta a Sync y Marcas","Tu Equipo Extendido"]; 1398 const wrapEl=host.parentElement; wrapEl.style.position='relative'; 1399 const tip=document.createElement('div'); tip.className='tip'; tip.innerHTML='<b></b><span></span>'; 1400 wrapEl.appendChild(tip); 1401 const NS='http://www.w3.org/2000/svg'; 1402 DIMS.forEach((s,i)=>{ 1403 const p=pt(i,s); 1404 const hit=document.createElementNS(NS,'circle'); 1405 hit.setAttribute('cx',p[0].toFixed(1)); hit.setAttribute('cy',p[1].toFixed(1)); hit.setAttribute('r','16'); 1406 hit.setAttribute('fill','transparent'); hit.style.pointerEvents='all'; hit.style.cursor='crosshair'; 1407 host.appendChild(hit); 1408 const show=()=>{ 1409 const g=s-ROOM[i], f=i===weak; 1410 tip.querySelector('b').textContent=PNAMES[i]+(f?' â ':''); 1411 tip.querySelector('span').textContent=`tu señal ${s} · sintonÃa ${ROOM[i]} · ${g>0?'+'+g:g}`+(f?' â empieza aquÃ':''); 1412 tip.style.left=(p[0]/560*100)+'%'; 1413 tip.style.top=(p[1]/560*100)+'%'; 1414 tip.classList.add('show'); 1415 }; 1416 hit.addEventListener('mouseenter',show); 1417 hit.addEventListener('click',ev=>{ev.stopPropagation();show();}); /* P3: tap-to-show en touch */ 1418 hit.addEventListener('mouseleave',()=>tip.classList.remove('show')); 1419 }); 1420 document.addEventListener('click',()=>tip.classList.remove('show')); /* P3: tap fuera â ocultar */ 1421})(); 1422 1423/* ===== Terminal "tu próxima jugada" (te llevas · 3): tipea al entrar en viewport ===== */ 1424(function(){ 1425 const el=document.getElementById('termTxt'); if(!el) return; 1426 /* V20: lee como conversación con el agente del Sound Check */ 1427 const MSG="⺠Escaneé tus 9 pilares. Tu señal: 64/100.\n⺠FANS está -21 por debajo de tu sintonÃa · es tu palanca #1.\n⺠Mi jugada para ti: abre un grupo de WhatsApp o Discord e invita a tus 10 fans más activos. Ese canal es tuyo: ningún algoritmo te lo quita.\n⺠¿la armamos esta semana?"; 1428 if(REDUCED){ el.textContent=MSG; return; } /* P2: muestra la jugada completa, sin tipear */ 1429 let typing=false; 1430 function type(){ 1431 if(typing) return; typing=true; el.textContent=''; 1432 let i=0; 1433 (function step(){ 1434 if(i<=MSG.length){ el.textContent=MSG.slice(0,i); i++; setTimeout(step, MSG[i-1]==='\n'?260:18); } 1435 else typing=false; 1436 })(); 1437 } 1438 const host=document.querySelector('.take.t3')||el; 1439 const ob=new IntersectionObserver(es=>es.forEach(e=>{ 1440 if(!e.isIntersecting) return; ob.disconnect(); setTimeout(type,300); 1441 }),{threshold:0.4}); 1442 ob.observe(host); 1443})(); 1444 1445/* foto real del compu si existe · P1 fix #1 (consola limpia): assets/macbook.png NO se envÃa en launch 1446 (el mock CSS funciona sin él, ver §2 del sprint). El probe disparaba un 404 en consola cada carga. 1447 Gateado por flag: cuando Nico suelte el PNG, pon USE_MAC_PHOTO=true y vuelve el auto-detect. */ 1448(function(){
1449 const USE_MAC_PHOTO=false; 1450 if(!USE_MAC_PHOTO) return; 1451 const probe=new Image(); 1452 probe.onload=()=>document.getElementById('mac').classList.add('photo'); 1453 probe.src='assets/macbook.png'; 1454})(); 1455 1456const io = new IntersectionObserver(es=>es.forEach(e=>{ 1457 if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } 1458}),{threshold:0.16}); 1459document.querySelectorAll('.rv').forEach(el=>io.observe(el)); 1460window.addEventListener('scroll',()=>{ 1461 if(REDUCED) return; /* P2: sin parallax en reduced-motion */ 1462 document.querySelectorAll('[data-px]').forEach(el=>{ 1463 const r = el.getBoundingClientRect(); 1464 const mid = r.top + r.height/2 - innerHeight/2; 1465 el.style.translate = `0 ${(-mid*parseFloat(el.dataset.px)).toFixed(1)}px`; 1466 }); 1467},{passive:true}); 1468 1469/* ââââââââ FRECUENCIAS: una sola familia de puntos, tres comportamientos ââââââââ 1470 Mismos puntos, mismo color (cyan del módulo), mismo loop. Sin lÃneas finas. 1471 1 · grid-snap: el caos encuentra su lugar (estructura) 1472 2 · flywheel: orbita con pulso constante (motor) 1473 3 · wave: del ruido sale la onda y queda viva (señal) */ 1474function cyanRGB(){ 1475 const dark=document.documentElement.getAttribute('data-theme')==='dark'; 1476 return dark?[0,176,205]:[0,122,143]; /* light = #007A8F (module-teal, vibrante) */ 1477} 1478function Shape(id, mode){ 1479 const c=document.getElementById(id); if(!c)return; 1480 const ctx=c.getContext('2d'); 1481 let W=0,H=0,running=true,t=0,bt=0; 1482 let P=[]; const N = mode==='wheel' ? 150 : 220; 1483 function resize(){ 1484 const r=c.getBoundingClientRect(); if(r.width<4)return; 1485 const dpr=Math.min(devicePixelRatio||1,2); 1486 c.width=r.width*dpr;c.height=r.height*dpr;W=c.width;H=c.height; 1487 build(); 1488 } 1489 function rnd(a,b){return a+Math.random()*(b-a)} 1490 function build(){ 1491 P=[]; 1492 if(mode==='grid'){ 1493 const cols=11,rows=7, mx=W*0.14,my=H*0.16; 1494 for(let i=0;i<N;i++){ 1495 const gi=i%(cols*rows), gx=gi%cols, gy=(gi/cols)|0; 1496 P.push({ 1497 sx:rnd(0,W), sy:rnd(0,H), 1498 tx:mx+gx*(W-2*mx)/(cols-1), ty:my+gy*(H-2*my)/(rows-1), 1499 d:(rows-1-gy)/(rows-1)*0.45 + Math.random()*0.12, r:Math.random() 1500 }); 1501 } 1502 } else if(mode==='wheel'){ 1503 const RINGS=5, perRing=Math.ceil(N/RINGS); 1504 let idx=0; 1505 for(let b=0;b<RINGS;b++){ 1506 for(let k=0;k<perRing && idx<N;k++,idx++){ 1507 P.push({ 1508 a:(k/perRing)*Math.PI*2 + b*0.55, // ángulo distribuido por anillo 1509 po:b/RINGS, // phase offset â anillos concéntricos escalonados 1510 sx:rnd(0,W), sy:rnd(0,H), // caos inicial: entrada por partÃculas como A y C 1511 d:Math.random()*0.4, r:Math.random() 1512 }); 1513 } 1514 } 1515 } else { // wave 1516 for(let i=0;i<N;i++){ 1517 const fx=i/(N-1); 1518 P.push({sx:rnd(0,W), sy:rnd(0,H), fx, d:fx*0.35+Math.random()*0.1, r:Math.random()}); 1519 } 1520 } 1521 } 1522 addEventListener('resize',resize);resize(); 1523 let last=performance.now(); 1524 function frame(now){ 1525 if(!running){last=now;requestAnimationFrame(frame);return} 1526 const dt=Math.min(0.05,(now-last)/1000);last=now;t+=dt; 1527 if(W<4){resize();requestAnimationFrame(frame);return} 1528 ctx.clearRect(0,0,W,H); 1529 const C=cyanRGB(); 1530 const d=(devicePixelRatio>1?2:1)*3.2*(innerWidth<=1020?0.55:1); /* Cami R1 #3: frecuencias/puntos mas chicos en mobile (x0.55) */ 1531 bt+=dt; /* V17: entrada disparada por scroll, sin loop */ 1532 const build_=Math.min(bt/2.6,1); /* más lenta: ya no se precipita */ 1533 const fade=1; /* sin fade-out: el orden se queda */ 1534 1535 if(mode==='grid'){ 1536 P.forEach(p=>{ 1537 const lp=Math.max(0,Math.min(1,(build_-p.d)/0.5)); 1538 const e=1-Math.pow(1-lp,3); 1539 const X=p.sx+(p.tx-p.sx)*e, Y=p.sy+(p.ty-p.sy)*e + Math.sin(t*2+p.r*6)*2.5*e; 1540 ctx.globalAlpha=(0.25+0.75*e)*fade; 1541 ctx.fillStyle=`rgb(${C[0]},${C[1]},${C[2]})`; 1542 ctx.fillRect(X-d/2,Y-d/2,d,d); 1543 }); 1544 } 1545 else if(mode==='wheel'){ 1546 /* crecimiento concéntrico: el caos se ordena en anillos que crecen desde el centro */ 1547 const cx=W/2, cy=H/2, maxR=Math.min(W,H)*0.46, GROWTH=0.17; 1548 P.forEach(p=>{ 1549 const lp=Math.max(0,Math.min(1,(build_-p.d)/0.5)); // misma entrada que grid/wave 1550 const e=1-Math.pow(1-lp,3); 1551 const fr=((t*GROWTH+p.po)%1+1)%1; // viaje concéntrico hacia afuera 1552 const rad=fr*maxR; 1553 const tx=cx+Math.cos(p.a)*rad, ty=cy+Math.sin(p.a)*rad; 1554 const X=p.sx+(tx-p.sx)*e, Y=p.sy+(ty-p.sy)*e; 1555 const ripple=Math.min(fr/0.12,1)*(fr>0.72?(1-fr)/0.28:1); // nace en el centro, se desvanece en el borde 1556 ctx.globalAlpha=(0.16+0.84*ripple)*(0.25+0.75*e)*fade; 1557 ctx.fillStyle=`rgb(${C[0]},${C[1]},${C[2]})`; 1558 const dd=d*(0.7+fr*0.7); 1559 ctx.fillRect(X-dd/2,Y-dd/2,dd,dd); 1560 }); 1561 /* núcleo constante: el motor que no para (no más fuerte: constante) */ 1562 ctx.globalAlpha=fade; 1563 ctx.beginPath();ctx.arc(cx,cy,d*1.3,0,Math.PI*2); 1564 ctx.fillStyle=`rgb(${C[0]},${C[1]},${C[2]})`;ctx.fill(); 1565 } 1566 else { // wave 1567 const amp=H*0.22, mid=H/2; 1568 P.forEach(p=>{ 1569 const lp=Math.max(0,Math.min(1,(build_-p.d)/0.5)); 1570 const e=1-Math.pow(1-lp,3); 1571 const tx=W*0.06+p.fx*W*0.88; 1572 const ty=mid+Math.sin(p.fx*Math.PI*2*1.8 + t*1.4)*amp; /* onda viva */ 1573 const X=p.sx+(tx-p.sx)*e, Y=p.sy+(ty-p.sy)*e; 1574 ctx.globalAlpha=(0.25+0.75*e)*fade; 1575 ctx.fillStyle=`rgb(${C[0]},${C[1]},${C[2]})`; 1576 ctx.fillRect(X-d/2,Y-d/2,d,d); 1577 }); 1578 } 1579 ctx.globalAlpha=1; 1580 if(!REDUCED) requestAnimationFrame(frame); /* P2: reduced-motion -> un solo frame estatico, sin rAF */ 1581 } 1582 if(REDUCED){ bt=2.6; t=0; frame(performance.now()); return; } /* frecuencias congeladas en su estado ordenado */ 1583 requestAnimationFrame(frame); 1584 if('IntersectionObserver' in window){ 1585 /* V17: al salir del viewport se resetea el caos â al volver a entrar, la entrada se re-dispara */ 1586 new IntersectionObserver(es=>
1586es.forEach(e=>{ 1587 running=e.isIntersecting; 1588 if(!running){bt=0;build();} 1589 }),{threshold:0.22}).observe(c); 1590 } 1591} 1592Shape('shGrid','grid'); 1593Shape('shWheel','wheel'); 1594Shape('shWave','wave'); 1595 1596/* ===== GRÃFICA (V17): el signalfield REAL del survey (RESULTS_LAYOUT v1.2) ===== */ 1597(function(){ 1598 const svg=document.getElementById('brecha'); if(!svg) return; 1599 const SHORT=["INGRESOS","ESTRENOS","FANS","CANALES","CONTENIDO","DATOS","OPERACIÃN","SYNC","EQUIPO"]; 1600 const PILLARS=["Tu Motor de Ingresos","Tu Ritmo de Estrenos","Lealtad de tus Fans","Tus Canales Propios","Tu Máquina de Contenido","El Control de tus Datos","El Pulso de tu Operación","Tu Puerta a Sync y Marcas","Tu Equipo Extendido"]; 1601 const ROOM=[30,40,35,25,50,35,40,15,25]; 1602 const DIMS=[52,28,14,48,38,55,50,36,44]; 1603 const difs=DIMS.map((s,i)=>s-ROOM[i]); 1604 const weak=DIMS.indexOf(Math.min(...DIMS)); 1605 const colOf=(g,f)=>f?'#CFFF04':g>=20?'#E1F291':g>0?'#00B0CD':g===0?'#9b94c4':'#FF9C87'; 1606 const W=880,L=64,Rm=24,T=34,PH=280; 1607 const X=i=>L+(W-L-Rm)*(i+0.5)/9; 1608 const Y=g=>{const v=Math.max(-50,Math.min(25,g));return T+(25-v)*(PH/75)}; 1609 const pts=difs.map((g,i)=>[X(i),Y(g)]); 1610 let path=`M ${pts[0][0].toFixed(1)},${pts[0][1].toFixed(1)}`; 1611 for(let i=1;i<pts.length;i++){const x0=pts[i-1][0],y0=pts[i-1][1],x1=pts[i][0],y1=pts[i][1],cx=(x0+x1)/2; 1612 path+=` C ${cx.toFixed(1)},${y0.toFixed(1)} ${cx.toFixed(1)},${y1.toFixed(1)} ${x1.toFixed(1)},${y1.toFixed(1)}`} 1613 const yR=Y(0), fp=pts[weak]; 1614 let drawn=false; 1615 /* V18: render con tema â la pantalla del compu también cambia a light */ 1616 function render(){ 1617 const dark=document.documentElement.getAttribute('data-theme')==='dark'; 1618 const txt=dark?'250,250,247':'10,10,10'; 1619 const dotBg=dark?'#100E1A':'#F6F5EF'; 1620 const roomC=dark?'#E5E5E5':'#0A0A0A'; 1621 const roomTxt=dark?'#0A0A0A':'#FAFAF7'; 1622 const stops=difs.map((g,i)=>`<stop offset="${((X(i)-L)/(W-L-Rm)*100).toFixed(1)}%" stop-color="${colOf(g,i===weak)}"/>`).join(''); 1623 const grid=[25,0,-25,-50].map(v=>{const y=Y(v);return `<line x1="${L}" y1="${y}" x2="${W-Rm}" y2="${y}" stroke="rgb(${txt})" stroke-opacity=".1" stroke-dasharray="2 5"/><text x="${L-10}" y="${y+4}" text-anchor="end" font-family="Space Mono" font-size="11" fill="rgba(${txt},.45)">${v>0?'+'+v:v}</text>`}).join(''); 1624 const dots=difs.map((g,i)=>{const px=pts[i][0],py=pts[i][1],f=i===weak,c=colOf(g,f); 1625 return `<circle cx="${px.toFixed(1)}" cy="${py.toFixed(1)}" r="${f?14:12}" fill="${f?'#CFFF04':dotBg}" stroke="${f?'#0A0A0A':c}" stroke-width="2.2"/><text x="${px.toFixed(1)}" y="${(py+4).toFixed(1)}" text-anchor="middle" font-family="Space Mono" font-size="12" font-weight="700" fill="${f?'#0A0A0A':c}">${i+1}</text>`}).join(''); 1626 const labels=SHORT.map((s,i)=>{const f=i===weak; 1627 return `<text x="${X(i).toFixed(1)}" y="${T+PH+40}" text-anchor="middle" font-family="Space Mono" font-size="11.5" letter-spacing=".06em" fill="rgba(${txt},${f?'1':'.55'})" font-weight="${f?'700':'400'}">${s}</text>`}).join(''); 1628 svg.innerHTML=` 1629 <defs> 1630 <linearGradient id="sg" x1="0" x2="1" y1="0" y2="0">${stops}</linearGradient> 1631 <radialGradient id="haloW"><stop offset="0%" stop-color="#CFFF04" stop-opacity=".6"/><stop offset="100%" stop-color="#CFFF04" stop-opacity="0"/></radialGradient> 1632 <linearGradient id="cloud" x1="0" x2="0" y1="0" y2="1"> 1633 <stop offset="0%" stop-color="#00B0CD" stop-opacity=".13"/><stop offset="33%" stop-color="#00B0CD" stop-opacity="0"/> 1634 <stop offset="34%" stop-color="#FF9C87" stop-opacity="0"/><stop offset="100%" stop-color="#FF9C87" stop-opacity=".15"/> 1635 </linearGradient> 1636 </defs> 1637 <rect x="${L}" y="${T}" width="${W-L-Rm}" height="${PH}" fill="url(#cloud)" rx="8"/> 1638 ${grid} 1639 <line x1="${L}" y1="${yR}" x2="${W-Rm}" y2="${yR}" stroke="${roomC}" stroke-width="2"/> 1640 <rect x="${W-Rm-64}" y="${yR-11}" width="62" height="20" rx="4" fill="${roomC}"/> 1641 <text x="${W-Rm-33}" y="${yR+3}" text-anchor="middle" font-family="Space Mono" font-size="10" font-weight="700" fill="${roomTxt}">SINTONÃA</text> 1642 <circle cx="${fp[0].toFixed(1)}" cy="${fp[1].toFixed(1)}" r="32" fill="url(#haloW)"/> 1643 <path d="${path}
1643" fill="none" stroke="url(#sg)" stroke-width="7" opacity=".18" stroke-linecap="round"/> 1644 <path id="sigLine" d="${path}" fill="none" stroke="url(#sg)" stroke-width="3" stroke-linecap="round"/> 1645 ${dots}${labels} 1646 <text x="${L-10}" y="${T-14}" text-anchor="end" font-family="Space Mono" font-size="10" letter-spacing=".12em" fill="rgba(${txt},.45)">VS TU SINTONÃA</text>`; 1647 const line=svg.querySelector('#sigLine'); 1648 const Lp=line.getTotalLength(); 1649 line.style.strokeDasharray=Lp; 1650 line.style.strokeDashoffset=drawn?0:Lp; 1651 } 1652 render(); 1653 window.__brechaRender=render; 1654 const ob=new IntersectionObserver(es=>es.forEach(e=>{ 1655 if(!e.isIntersecting) return; ob.disconnect(); 1656 drawn=true; 1657 const line=svg.querySelector('#sigLine'); 1658 line.animate([{strokeDashoffset:line.getTotalLength()},{strokeDashoffset:0}],{duration:1800,easing:'cubic-bezier(.2,.7,.2,1)',fill:'forwards'}); 1659 }),{threshold:0.35}); 1660 if(REDUCED){ drawn=true; render(); } /* P2: linea de senal en su estado final, sin trazo animado */ 1661 else ob.observe(svg); 1662 /* tooltip cÃclico con los nombres COMPLETOS de los pilares (v1.2) */ 1663 const tip=document.getElementById('tip'); 1664 if(tip){ 1665 let ti=0; 1666 const phrase=i=>i===weak?`tu jugada: aquà recuperas la señal â `:(difs[i]>0?`tu señal suena ${difs[i]} arriba de tu sintonÃa`:difs[i]<0?`tu señal cae ${-difs[i]} abajo de tu sintonÃa`:`estás justo en tu sintonÃa`); 1667 function showTip(){ 1668 const i=ti%9; 1669 tip.querySelector('b').textContent=PILLARS[i]+(i===weak?' â ':''); 1670 tip.querySelector('span').textContent=phrase(i); 1671 tip.style.left=(X(i)/W*100)+'%'; 1672 tip.style.top=(Y(difs[i])/420*100)+'%'; 1673 tip.classList.add('show'); 1674 setTimeout(()=>tip.classList.remove('show'),2100); 1675 ti++; 1676 } 1677 if(!REDUCED){ setInterval(showTip,2600); setTimeout(showTip,3200); } /* P2: sin tooltip auto-ciclico en reduced-motion */ 1678 } 1679})(); 1680 1681/* ===== ENGINE Chladni rectangular (problema + cierre) ===== */ 1682const LIMEC=[207,255,4]; 1683function fgRGB(){ 1684 const v=getComputedStyle(document.body).color; 1685 const m=v.match(/(\d+),\s*(\d+),\s*(\d+)/); 1686 return m?[+m[1],+m[2],+m[3]]:[240,242,245]; 1687} 1688function sigRGB(){ 1689 const dark=document.documentElement.getAttribute('data-theme')==='dark'; 1690 return dark?LIMEC:[0,122,143]; /* light = #007A8F (era #003A3A, murky) */ 1691} 1692function lerp3(a,b,f){return [a[0]+(b[0]-a[0])*f,a[1]+(b[1]-a[1])*f,a[2]+(b[2]-a[2])*f]} 1693function Field(id,cfg){ 1694 const c=document.getElementById(id); if(!c)return; 1695 const ctx=c.getContext('2d'); 1696 const K={k:0.98,Rp:1.45}; 1697 const N=cfg.count||2000, dot=cfg.dot||1.5; 1698 let pts=null,W=0,H=0,sc=1,ax=1,ay=1,running=true; 1699 let st={mode:0,t:0}; 1700 function seed(){ 1701 pts=new Float32Array(N*2); 1702 for(let i=0;i<N;i++){pts[i*2]=(Math.random()*2-1)*ax;pts[i*2+1]=(Math.random()*2-1)*ay} 1703 } 1704 function resize(){ 1705 const r=c.getBoundingClientRect(); if(r.width<4)return; 1706 const dpr=Math.min(devicePixelRatio||1,2); 1707 c.width=r.width*dpr;c.height=r.height*dpr;W=c.width;H=c.height; 1708 sc=Math.min(W,H)/(2*1.55*(cfg.zoomOut||1)); 1709 ax=W/(2*sc);ay=H/(2*sc); 1710 seed(); 1711 } 1712 addEventListener('resize',resize);resize(); 1713 const nm=cfg.lock||[2,3]; 1714 function chl(x,y){const u=x/K.Rp,v=y/K.Rp,PI=Math.PI; 1715 return Math.cos(nm[0]*PI*u)*Math.cos(nm[1]*PI*v)-K.k*Math.cos(nm[1]*PI*u)*Math.cos(nm[0]*PI*v)} 1716 function step(i,vib,pure){ 1717 let x=pts[i*2],y=pts[i*2+1]; 1718 const a=chl(x,y); 1719 const jit=pure ? vib*0.55 : Math.max(0.0015,Math.abs(a))*vib; 1720 x+=(Math.random()*2-1)*jit;y+=(Math.random()*2-1)*jit; 1721 if(x<-ax)x=-ax;else if(x>ax)x=ax; 1722 if(y<-ay)y=-ay;else if(y>ay)y=ay; 1723 pts[i*2]=x;pts[i*2+1]=y; 1724 return [W/2+x*sc,H/2+y*sc]; 1725 } 1726 let last=performance.now(); 1727 function frame(now){ 1728 if(!running){last=now;requestAnimationFrame(frame);return} 1729 const dt=Math.min(0.05,(now-last)/1000);last=now; 1730 if(W<4){resize();requestAnimationFrame(frame);return} 1731 ctx.clearRect(0,0,W,H); 1732 const pxr=devicePixelRatio>1?2:1,d=dot*pxr*(innerWidth<=1020?0.55:1); /* Cami R1 #3: cymatics/Chladni mas chicas en mobile (x0.55) */ 1733 const FG=fgRGB(), SIG=sigRGB(); 1734 if(cfg.mode==='noise'){ 1735 ctx.fillStyle=`rgba(${FG[0]},${FG[1]},${FG[2]},0.4)`; 1736 for(let i=0;i<N;i++){const[X,Y]=step(i,0.075,true);ctx.fillRect(X,Y,d,d)} 1737 } 1738 else if(cfg.mode==='lock'){ 1739 st.t+=dt; 1740 if(st.t>
17407){st.t=0;seed()} 1741 const prog=Math.min(1,st.t/1.5); 1742 const vib=0.06-0.047*prog; 1743 const col=lerp3(FG,SIG,Math.min(1,prog*1.4)); 1744 ctx.fillStyle=`rgba(${col[0]|0},${col[1]|0},${col[2]|0},${0.5+0.4*prog})`; 1745 for(let i=0;i<N;i++){const[X,Y]=step(i,vib,false);ctx.fillRect(X,Y,d,d)} 1746 } 1747 else if(cfg.mode==='emerge'){ 1748 st.t+=dt; 1749 const NOISY=3.4, SETTLE=7.5; 1750 if(st.mode===0&&st.t>NOISY){st.mode=1;st.t=0;if(cfg.onState)cfg.onState(1)} 1751 else if(st.mode===1&&st.t>SETTLE){st.mode=0;st.t=0;seed();if(cfg.onState)cfg.onState(0)} 1752 if(st.mode===0){ 1753 ctx.fillStyle=`rgba(${FG[0]},${FG[1]},${FG[2]},0.38)`; 1754 for(let i=0;i<N;i++){const[X,Y]=step(i,0.10,true);ctx.fillRect(X,Y,d,d)} 1755 }else{ 1756 const prog=Math.min(1,st.t/3.0); 1757 const vib=0.065-0.052*prog; 1758 const col=lerp3(FG,SIG,Math.min(1,prog*1.3)); 1759 ctx.fillStyle=`rgba(${col[0]|0},${col[1]|0},${col[2]|0},${0.45+0.5*prog})`; 1760 const dd=d*(1+prog*0.6); 1761 for(let i=0;i<N;i++){const[X,Y]=step(i,vib,false);ctx.fillRect(X,Y,dd,dd)} 1762 } 1763 } 1764 if(!REDUCED) requestAnimationFrame(frame); /* P2: reduced-motion -> un solo frame estatico, sin rAF */ 1765 } 1766 if(REDUCED){ 1767 /* converge una vez sobre el patron Chladni y pinta un frame estatico (sin rAF) */ 1768 if(cfg.mode==='lock'||cfg.mode==='emerge'){ 1769 for(let k=0;k<240;k++){for(let i=0;i<N;i++){step(i,0.012,false);}} 1770 st.mode=1; st.t=3; 1771 if(cfg.mode==='emerge'&&cfg.onState)cfg.onState(1); 1772 } 1773 frame(performance.now()); 1774 return; 1775 } 1776 requestAnimationFrame(frame); 1777 if('IntersectionObserver' in window){ 1778 new IntersectionObserver(es=>es.forEach(e=>running=e.isIntersecting),{threshold:0.05}).observe(c); 1779 } 1780} 1781Field('cymNoise', {mode:'noise', count:1700, dot:1.5}); 1782Field('cymSignal',{mode:'lock', count:2000, dot:1.6, lock:[2,3]}); 1783const ctaState=document.getElementById('ctaState'); 1784Field('cymCta', {mode:'emerge', count:6500, dot:1.8, lock:[2,3], zoomOut:0.8, onState:s=>{ 1785 ctaState.textContent = s ? 'EL CAOS SE ORDENA' : 'RUIDO'; 1786 ctaState.style.color = s ? 'var(--accent-primary)' : 'var(--fg-faint)'; 1787}}); 1788</script>
1788 1789 1790<!-- ââââ ANALYTICS (P7 · 02_ANALYTICS_SETUP.md) ââââ 1791 GTM container GTM-5J36VLF6 (el mismo del app Next.js) con Consent Mode v2 default-denied. 1792 Gate por hostname: NO carga en localhost / file / review local, solo en elsoundsystem.com y *.vercel.app. 1793 Eventos dataLayer: cta_click {cta_location, cta_href} · theme_toggle {theme_to} · scroll_depth {section_id}. 1794 Los triggers GA4 correspondientes se crean en GTM (dashboard, ver sprint doc). Sin PII en params. -->
1795<script> 1796(function(){ 1797 var h=location.hostname; 1798 var prod=/(\.|^)elsoundsystem\.com$/.test(h)||/\.vercel\.app$/.test(h); 1799 window.dataLayer=window.dataLayer||[]; 1800 function gtag(){dataLayer.push(arguments);} 1801 /* Consent Mode v2: default denied ANTES de cargar GTM (LFPDPPP) */ 1802 gtag('consent','default',{analytics_storage:'denied',ad_storage:'denied',ad_user_data:'denied',ad_personalization:'denied'}); 1803 /* Decision previa persistida (misma key que el app: el consentimiento vale en todo el dominio) */ 1804 var CKEY='sound-analytics-consent'; 1805 var stored=null; 1806 try{stored=localStorage.getItem(CKEY);}catch(e){} 1807 if(stored==='granted'){gtag('consent','update',{analytics_storage:'granted'});} 1808 if(prod){ 1809 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'}); 1810 var f=d.getElementsByTagName(s)[0],j=d.createElement(s);j.async=true; 1811 j.src='https://www.googletagmanager.com/gtm.js?id='+i;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-5J36VLF6'); 1812 /* Vercel Web Analytics: sin cookies, no requiere consentimiento (ver /privacidad/) */ 1813 var va=document.createElement('script');va.defer=true;va.src='/_vercel/insights/script.js';document.head.appendChild(va); 1814 } 1815 /* cta_click: nav, hero, botnav, cierre */ 1816 function ctaLoc(a){ 1817 if(a.classList.contains('nav-cta'))return 'nav'; 1818 if(a.classList.contains('go'))return 'botnav'; 1819 if(a.closest('.hero'))return 'hero'; 1820 if(a.closest('.skills-band'))return 'skills'; 1821 if(a.closest('.cta'))return 'cierre'; 1822 return 'otro'; 1823 } 1824 document.querySelectorAll('a.btn-main, a.nav-cta, .botnav a.go').forEach(function(a){ 1825 a.addEventListener('click',function(){ 1826 dataLayer.push({event:'cta_click',cta_location:ctaLoc(a),cta_href:a.getAttribute('href')}); 1827 }); 1828 }); 1829 /* theme_toggle: envuelve toggleTheme sin tocar su logica */ 1830 if(typeof window.toggleTheme==='function'){ 1831 var _tt=window.toggleTheme; 1832 window.toggleTheme=function(){ 1833 _tt(); 1834 dataLayer.push({event:'theme_toggle',theme_to:document.documentElement.getAttribute('data-theme')}); 1835 }; 1836 } 1837 /* scroll_depth: una vez por seccion (hero, problema, metodo, valor, nico, cta) */ 1838 if('IntersectionObserver' in window){ 1839 var seen={}; 1840 var io=new IntersectionObserver(function(es){es.forEach(function(e){ 1841 if(e.isIntersecting){ 1842 var id=e.target.id||e.target.className.split(' ')[0]; 1843 if(!seen[id]){seen[id]=1;dataLayer.push({event:'scroll_depth',section_id:id});} 1844 } 1845 });},{threshold:0.4}); 1846 ['problema','metodo','valor','nico','skills','cta'].forEach(function(id){ 1847 var el=document.getElementById(id);if(el)io.observe(el); 1848 }); 1849 } 1850 /* Banner de consentimiento (LFPDPPP): solo si no hay decision previa */ 1851 if(stored!=='granted'&&stored!=='denied'){ 1852 var bar=document.createElement('div'); 1853 bar.id='consent-bar'; 1854 bar.setAttribute('role','region'); 1855 bar.setAttribute('aria-label','Aviso de cookies de analÃtica'); 1856 bar.style.cssText='position:fixed;left:16px;right:16px;bottom:16px;z-index:90;margin:0 auto;max-width:720px;padding:14px 18px;border-radius:12px;background:var(--bg);color:var(--fg);border:1px solid var(--card-line);box-shadow:0 10px 30px rgba(0,0,0,.18);display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:14px;line-height:1.5'; 1857 bar.innerHTML='<p style="flex:1 1 240px;margin:0">Usamos cookies de analÃtica para mejorar el sitio. Tú decides. <a href="/privacidad/" style="color:inherit">Más info</a></p>'+ 1858 '<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center">'+ 1859 '<button type="button" id="consent-no" style="background:transparent;color:var(--fg);border:1px solid var(--card-line);border-radius:8px;padding:10px 16px;min-height:44px;font-size:13px;cursor:pointer;font-family:inherit">Solo lo esencial</button>'+ 1860 '<button type="button" id="consent-ok" style="background:var(--cta-bg);color:var(--cta-fg);border:1px solid var(--cta-bg);border-radius:8px;padding:10px 18px;min-height:44px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit">Aceptar</button></div>'; 1861 var decide=function(v){
1862 try{localStorage.setItem(CKEY,v);}catch(e){} 1863 if(v==='granted'){gtag('consent','update',{analytics_storage:'granted'});} 1864 if(bar.parentNode){bar.parentNode.removeChild(bar);} 1865 }; 1866 document.body.appendChild(bar); 1867 bar.querySelector('#consent-ok').addEventListener('click',function(){decide('granted');}); 1868 bar.querySelector('#consent-no').addEventListener('click',function(){decide('denied');}); 1869 } 1870})(); 1871</script>
1871 1872<!-- sync-probe --> 1873</body> 1874</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.