PageSourceSearch

https://www.elsoundsystem.com/

html elsoundsystem.com collected 2026-10-06 13:36:14 UTC 158,834 bytes, 1,874 lines download raw bytes

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,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}
1262  function hl(s){return esc(s).replace(/(&lt;\/?[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.