expandir a 9 páginas: +cuerpo, sombra, cosmos, practica, olvido
1/* === Tokens === */
2:root {
3 --bg: #06050d;
4 --fg: #e8eaf5;
5 --gold: #d8a85d;
6 --gold-deep: #b77e34;
7 --aire: #d0dbff;
8 --agua: #6cd0f3;
9 --fuego: #f59056;
10 --tierra: #d49873;
11 --cuerpo: #e07a5f;
12 --sombra: #4a4a5a;
13 --cosmos: #d4a843;
14 --practica: #2d936c;
15 --olvido: #b0b8c0;
16
17 --ease-emerge: cubic-bezier(0.22, 0.61, 0.20, 1);
18 --ease-magma: cubic-bezier(0.32, 0, 0.05, 1);
19 --ease-page: cubic-bezier(0.22, 0.61, 0.36, 1);
20
21 --taskbar-height: 52px;
22}
23
24* { box-sizing: border-box; }
25
26html, body {
27 margin: 0;
28 padding: 0;
29 width: 100%;
30 height: 100%;
31 background: var(--bg);
32 color: var(--fg);
33 font-family: 'Inter', system-ui, -apple-system, sans-serif;
34 font-weight: 300;
35 overflow: hidden;
36}
37
38/* === Canvas WebGL === */
39#gioser-canvas {
40 position: fixed;
41 inset: 0;
42 width: 100vw;
43 height: 100vh;
44 display: block;
45 z-index: 0;
46 transition: opacity 600ms var(--ease-emerge), filter 600ms var(--ease-emerge);
47}
48body.deck-visible #gioser-canvas {
49 opacity: 0.30;
50 filter: blur(4px) saturate(80%);
51}
52
53/* === Tips (botones cardinales sobre el aro) === */
54#tips {
55 position: fixed;
56 inset: 0;
57 pointer-events: none;
58 z-index: 5;
59 transition: opacity 250ms ease;
60}
61body.deck-visible #tips {
62 opacity: 0;
63 pointer-events: none;
64}
65
66.tip {
67 position: absolute;
68 top: 0; left: 0;
69 pointer-events: auto;
70 text-decoration: none;
71 color: var(--fg);
72 user-select: none;
73 cursor: pointer;
74
75 display: flex;
76 flex-direction: column;
77 align-items: center;
78 gap: 0.55rem;
79 padding: 1.1rem 1.6rem 0.95rem;
80 min-width: 168px;
81
82 background:
83 radial-gradient(ellipse at top, rgba(255, 255, 255, 0.04), transparent 65%),
84 rgba(8, 6, 22, 0.55);
85 backdrop-filter: blur(12px) saturate(140%);
86 -webkit-backdrop-filter: blur(12px) saturate(140%);
87 border-radius: 20px;
88 border: 1px solid rgba(216, 168, 93, 0.25);
89
90 box-shadow:
91 0 12px 36px rgba(0, 0, 0, 0.40),
92 inset 0 0 0 1px rgba(255, 255, 255, 0.04);
93
94 transition:
95 box-shadow 350ms var(--ease-emerge),
96 border-color 350ms var(--ease-emerge),
97 background 350ms var(--ease-emerge);
98}
99.tip::before {
100 content: "";
101 position: absolute;
102 inset: -10px;
103 border-radius: 26px;
104 border: 1px solid currentColor;
105 opacity: 0;
106 transition: opacity 400ms ease, inset 400ms var(--ease-emerge);
107 pointer-events: none;
108}
109.tip:hover {
110 border-color: currentColor;
111 background:
112 radial-gradient(ellipse at top, rgba(255, 255, 255, 0.07), transparent 65%),
113 rgba(20, 14, 40, 0.72);
114}
115.tip:hover::before {
116 opacity: 0.45;
117 inset: -16px;
118}
119.tip-glyph {
120 width: 54px;
121 height: 54px;
122 color: currentColor;
123 filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 16px currentColor);
124 transition: filter 320ms ease, transform 350ms var(--ease-emerge);
125}
126.tip:hover .tip-glyph {
127 filter: drop-shadow(0 0 14px currentColor) drop-shadow(0 0 28px currentColor);
128 transform: translateY(-3px);
129}
130.tip-label {
131 font-family: 'Cinzel', serif;
132 font-size: 0.95rem;
133 letter-spacing: 0.42em;
134 font-weight: 600;
135 text-indent: 0.42em;
136 margin-top: 0.15rem;
137}
138.tip-sub {
139 font-family: 'Inter', sans-serif;
140 font-size: 0.7rem;
141 letter-spacing: 0.22em;
142 font-weight: 300;
143 color: rgba(232, 234, 245, 0.62);
144 text-transform: uppercase;
145 text-indent: 0.22em;
146}
147.tip-aire { color: var(--aire); }
148.tip-fuego { color: var(--fuego); }
149.tip-agua { color: var(--agua); }
150.tip-tierra { color: var(--tierra); }
151.tip-cuerpo { color: var(--cuerpo); }
152.tip-sombra { color: var(--sombra); }
153.tip-cosmos { color: var(--cosmos); }
154.tip-practica { color: var(--practica); }
155.tip-olvido { color: var(--olvido); }
156
157/* === DECK: contenedor único de páginas swipeable === */
158.deck {
159 position: fixed;
160 top: 0;
161 left: 0;
162 right: 0;
163 bottom: var(--taskbar-height);
164 z-index: 100;
165 pointer-events: none;
166 opacity: 0;
167 visibility: hidden;
168 transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
169 transform: scale(0.0);
170 overflow: hidden;
171 touch-action: pan-y;
172 background:
173 radial-gradient(ellipse at center, var(--deck-glow, rgba(216, 168, 93, 0.15)), transparent 65%),
174 rgba(6, 5, 13, 0.96);
175 backdrop-filter: blur(28px) saturate(140%);
176 -webkit-backdrop-filter: blur(28px) saturate(140%);
177 transition:
178 transform 600ms var(--ease-magma),
179 opacity 450ms ease,
180 visibility 0s 600ms;
181}
182.deck.open {
183 pointer-events: auto;
184 opacity: 1;
185 visibility: visible;
186 transform: scale(1);
187 transition:
188 transform 600ms var(--ease-magma),
189 opacity 450ms ease,
190 visibility 0s;
191}
192/* Acento del deck según elemento activo: glow radial del color. */
193body.deck-active-aire .deck { --deck-glow: rgba(208, 219, 255, 0.22); }
194body.deck-active-fuego .deck { --deck-glow: rgba(245, 144, 86, 0.28); }
195body.deck-active-agua .deck { --deck-glow: rgba(108, 208, 243, 0.22); }
196body.deck-active-tierra .deck { --deck-glow: rgba(212, 152, 115, 0.24); }
197
198/* Strip horizontal con páginas — vista-web traslada esto.
199 touch-action: pan-y declara al browser "yo manejo horizontal, el
200 vertical (scroll interno de cada página) lo dejas pasar". Sin esto
201 el navegador móvil se traga el gesto horizontal antes de que JS
202 pueda capturarlo. */
203.deck-strip {
204 display: flex;
205 flex-direction: row;
206 width: 100%;
207 height: 100%;
208 transform: translate3d(var(--vista-offset, 0px), 0, 0);
209 transition: transform 360ms var(--ease-page);
210 will-change: transform;
211 touch-action: pan-y;
212}
213/* Asegurar que TODOS los descendientes del strip hereden el contrato
214 touch-action — si el toque llega a un párrafo o <a>, el browser
215 chequea el touch-action del target, no del padre. */
216.deck-strip * {
217 touch-action: pan-y;
218}
219.deck-strip.vista-dragging,
220.deck-strip.vista-instant {
221 transition: none;
222}
223
224.deck-page {
225 flex: 0 0 100%;
226 width: 100%;
227 height: 100%;
228 position: relative;
229 overflow-y: auto;
230 overflow-x: hidden;
231 touch-action: pan-y;
232}
233.deck-page[data-element="aire"] { --page-accent: var(--aire); }
234.deck-page[data-element="fuego"] { --page-accent: var(--fuego); }
235.deck-page[data-element="agua"] { --page-accent: var(--agua); }
236.deck-page[data-element="tierra"] { --page-accent: var(--tierra); }
237
238/* Ambience por página */
239.page-ambience {
240 position: absolute;
241 inset: 0;
242 pointer-events: none;
243 z-index: 0;
244 transition: opacity 2s ease;
245 filter: blur(60px);
246 opacity: 0.5;
247}
248.deck-page[data-element="aire"] .page-ambience {
249 background: radial-gradient(circle at 50% 50%, rgba(208,219,255,0.22), transparent 60%);
250 animation: page-breathe 8s ease-in-out infinite alternate;
251}
252.deck-page[data-element="fuego"] .page-ambience {
253 background: radial-gradient(circle at 50% 50%, rgba(245,144,86,0.22), transparent 60%);
254 animation: page-breathe 6s ease-in-out infinite alternate;
255}
256.deck-page[data-element="agua"] .page-ambience {
257 background: radial-gradient(circle at 50% 50%, rgba(108,208,243,0.22), transparent 60%);
258 animation: page-breathe 10s ease-in-out infinite alternate;
259}
260.deck-page[data-element="tierra"] .page-ambience {
261 background: radial-gradient(circle at 50% 50%, rgba(140,100,60,0.22), transparent 60%);
262 animation: page-breathe 7s ease-in-out infinite alternate;
263}
264@keyframes page-breathe {
265 from { opacity: 0.30; }
266 to { opacity: 0.60; }
267}
268
269/* Head + controls — fijos en el deck, no dentro de la página */
270.page-controls {
271 position: fixed;
272 top: 1.2rem;
273 right: 1.2rem;
274 z-index: 100;
275 display: flex;
276 gap: 0.5rem;
277 opacity: 0;
278 pointer-events: none;
279 transition: opacity 0.3s ease;
280}
281body.deck-visible .page-controls {
282 opacity: 1;
283 pointer-events: auto;
284}
285.page-control-btn {
286 width: 40px;
287 height: 40px;
288 border-radius: 50%;
289 background: rgba(255, 255, 255, 0.04);
290 border: 1px solid rgba(255, 255, 255, 0.18);
291 color: var(--page-accent, var(--gold));
292 font-size: 1.2rem;
293 line-height: 1;
294 cursor: pointer;
295 display: inline-flex;
296 align-items: center;
297 justify-content: center;
298 padding: 0;
299 font-family: 'Inter', sans-serif;
300 transition:
301 background 200ms ease,
302 border-color 200ms ease,
303 transform 250ms var(--ease-emerge);
304}
305.page-control-btn:hover {
306 background: rgba(255, 255, 255, 0.10);
307 border-color: currentColor;
308}
309.page-minimize svg {
310 width: 18px;
311 height: 18px;
312}
313.page-close {
314 font-size: 1.6rem;
315}
316.page-close:hover { transform: rotate(90deg); }
317
318.page-head {
319 position: relative;
320 z-index: 2;
321 text-align: center;
322 padding: 7vh 8vw 2vh;
323 color: var(--page-accent, var(--gold));
324}
325.page-mark {
326 display: inline-block;
327 font-family: 'Inter', sans-serif;
328 font-size: 0.7rem;
329 letter-spacing: 0.55em;
330 text-transform: uppercase;
331 color: rgba(232, 234, 245, 0.6);
332 margin-bottom: 0.4rem;
333 text-indent: 0.55em;
334}
335.page-title {
336 font-family: 'Cinzel', serif;
337 font-weight: 700;
338 font-size: clamp(2.4rem, 6vw, 4.6rem);
339 margin: 0;
340 letter-spacing: 0.08em;
341 color: var(--page-accent, var(--gold));
342 text-shadow: 0 0 28px currentColor, 0 0 56px rgba(255, 255, 255, 0.10);
343}
344.page-tag {
345 display: block;
346 font-family: 'Inter', sans-serif;
347 font-size: 0.78rem;
348 letter-spacing: 0.32em;
349 text-transform: uppercase;
350 color: rgba(232, 234, 245, 0.55);
351 margin-top: 0.7rem;
352 text-indent: 0.32em;
353}
354.page-content {
355 position: relative;
356 z-index: 2;
357 padding: 1vh 10vw 8vh;
358 opacity: 0;
359 transition: opacity 400ms ease 250ms;
360}
361.deck.open .deck-page .page-content {
362 opacity: 1;
363}
364
365/* === pluma-doc dentro de la página === */
366.pluma-doc {
367 max-width: 760px;
368 margin: 0 auto;
369 font-family: 'Inter', sans-serif;
370 font-weight: 300;
371 font-size: 1.05rem;
372 line-height: 1.78;
373 color: rgba(232, 234, 245, 0.92);
374}
375.pluma-doc > * + * { margin-top: 1.0em; }
376.pluma-doc h1 {
377 font-family: 'Cinzel', serif;
378 font-weight: 700;
379 font-size: clamp(1.7rem, 3vw, 2.4rem);
380 color: var(--page-accent);
381 text-shadow: 0 0 18px currentColor;
382 letter-spacing: 0.04em;
383 margin-top: 1.4em;
384}
385.pluma-doc h2 {
386 font-family: 'Cinzel', serif;
387 font-weight: 500;
388 font-size: 1.5rem;
389 color: var(--page-accent);
390 letter-spacing: 0.04em;
391 margin-top: 1.6em;
392 padding-bottom: 0.3em;
393 border-bottom: 1px solid rgba(255, 255, 255, 0.10);
394}
395.pluma-doc h3 {
396 font-family: 'Inter', sans-serif;
397 font-weight: 600;
398 font-size: 1.18rem;
399 color: rgba(255, 255, 255, 0.92);
400 letter-spacing: 0.03em;
401 margin-top: 1.6em;
402}
403.pluma-doc p { margin: 0; }
404.pluma-doc a {
405 color: var(--page-accent);
406 text-decoration: none;
407 border-bottom: 1px solid currentColor;
408 transition: opacity 200ms ease;
409}
410.pluma-doc a:hover { opacity: 0.7; }
411.pluma-doc strong { color: rgba(255, 255, 255, 0.98); font-weight: 600; }
412.pluma-doc em { color: rgba(255, 255, 255, 0.92); }
413.pluma-doc code {
414 font-family: 'JetBrains Mono', ui-monospace, monospace;
415 background: rgba(255, 255, 255, 0.06);
416 padding: 0.12em 0.45em;
417 border-radius: 4px;
418 font-size: 0.92em;
419 color: var(--page-accent);
420}
421.pluma-doc pre {
422 background: rgba(0, 0, 0, 0.45);
423 border: 1px solid rgba(255, 255, 255, 0.08);
424 border-left: 3px solid var(--page-accent);
425 border-radius: 8px;
426 padding: 1rem 1.2rem;
427 overflow-x: auto;
428 font-size: 0.92rem;
429}
430.pluma-doc pre code {
431 background: transparent;
432 color: rgba(232, 234, 245, 0.92);
433 padding: 0;
434}
435.pluma-doc blockquote {
436 border-left: 3px solid var(--page-accent);
437 padding: 0.4em 1.2em;
438 color: rgba(232, 234, 245, 0.75);
439 font-style: italic;
440 background: rgba(255, 255, 255, 0.03);
441 border-radius: 0 6px 6px 0;
442}
443.pluma-doc ul, .pluma-doc ol { padding-left: 1.6em; }
444.pluma-doc li { margin: 0.4em 0; }
445.pluma-doc li::marker { color: var(--page-accent); }
446.pluma-doc hr {
447 border: none;
448 height: 1px;
449 background: linear-gradient(to right, transparent, var(--page-accent), transparent);
450 margin: 2em 0;
451}
452.pluma-doc table {
453 border-collapse: collapse;
454 width: 100%;
455 font-size: 0.95rem;
456}
457.pluma-doc th, .pluma-doc td {
458 padding: 0.55em 0.9em;
459 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
460 text-align: left;
461}
462.pluma-doc th {
463 color: var(--page-accent);
464 font-weight: 600;
465 letter-spacing: 0.04em;
466}
467.pluma-loading, .pluma-error {
468 display: flex;
469 align-items: center;
470 justify-content: center;
471 min-height: 30vh;
472 color: rgba(232, 234, 245, 0.55);
473 font-family: 'Cinzel', serif;
474 letter-spacing: 0.4em;
475 font-size: 0.9rem;
476}
477.pluma-loading::before {
478 content: "";
479 width: 28px;
480 height: 28px;
481 margin-right: 1rem;
482 border: 1px solid var(--page-accent);
483 border-top-color: transparent;
484 border-radius: 50%;
485 animation: pluma-spin 1s linear infinite;
486}
487.pluma-error { color: var(--fuego); font-style: italic; }
488@keyframes pluma-spin { to { transform: rotate(360deg); } }
489
490/* === Taskbar estilo Windows === */
491.taskbar {
492 position: fixed;
493 left: 0;
494 right: 0;
495 bottom: 0;
496 height: var(--taskbar-height);
497 z-index: 200;
498 display: flex;
499 align-items: center;
500 gap: 0.5rem;
501 padding: 0 0.8rem;
502 background: linear-gradient(to top, rgba(6, 5, 13, 0.94), rgba(8, 6, 22, 0.80));
503 backdrop-filter: blur(24px) saturate(140%);
504 -webkit-backdrop-filter: blur(24px) saturate(140%);
505 border-top: 1px solid rgba(216, 168, 93, 0.22);
506 box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.45);
507}
508
509.taskbar-home {
510 width: 40px;
511 height: 40px;
512 display: inline-flex;
513 align-items: center;
514 justify-content: center;
515 background: transparent;
516 border: 1px solid rgba(216, 168, 93, 0.32);
517 color: var(--gold);
518 border-radius: 9px;
519 cursor: pointer;
520 padding: 0;
521 transition: all 220ms var(--ease-emerge);
522}
523.taskbar-home:hover {
524 border-color: var(--gold);
525 background: rgba(216, 168, 93, 0.12);
526 box-shadow: 0 0 16px rgba(216, 168, 93, 0.35);
527 transform: translateY(-1px);
528}
529.taskbar-home-glyph {
530 width: 22px;
531 height: 22px;
532 filter: drop-shadow(0 0 6px currentColor);
533}
534
535.taskbar-brand {
536 font-family: 'Cinzel', serif;
537 font-weight: 700;
538 font-size: 1.30rem;
539 letter-spacing: 0.07em;
540 color: #f4eedf;
541 text-decoration: none;
542 text-shadow: 0 0 14px rgba(216, 168, 93, 0.45);
543 padding: 0 0.55rem;
544 user-select: none;
545 transition: text-shadow 220ms ease, color 220ms ease;
546 white-space: nowrap;
547}
548.taskbar-brand:hover {
549 color: #ffffff;
550 text-shadow: 0 0 20px rgba(216, 168, 93, 0.7), 0 0 36px rgba(245, 144, 86, 0.30);
551}
552.taskbar-brand .brand-dot {
553 color: var(--gold);
554 margin: 0 0.05em;
555}
556
557.taskbar-divider {
558 display: inline-block;
559 width: 1px;
560 height: 26px;
561 background: rgba(255, 255, 255, 0.12);
562 margin: 0 0.25rem;
563}
564
565.taskbar-list {
566 list-style: none;
567 margin: 0;
568 padding: 0;
569 display: flex;
570 gap: 0.4rem;
571 overflow-x: auto;
572 scrollbar-width: none;
573 -ms-overflow-style: none;
574}
575.taskbar-list::-webkit-scrollbar { display: none; }
576
577.taskbar-item {
578 height: 38px;
579 padding: 0 1.0rem;
580 display: inline-flex;
581 align-items: center;
582 gap: 0.55rem;
583 background: rgba(255, 255, 255, 0.04);
584 border: 1px solid rgba(255, 255, 255, 0.10);
585 border-radius: 9px;
586 color: var(--task-color, var(--fg));
587 font-family: 'Cinzel', serif;
588 font-size: 0.72rem;
589 letter-spacing: 0.36em;
590 text-indent: 0.36em;
591 font-weight: 600;
592 cursor: pointer;
593 transition: all 260ms var(--ease-emerge);
594 white-space: nowrap;
595}
596.taskbar-item:hover {
597 background: rgba(255, 255, 255, 0.09);
598 border-color: var(--task-color, currentColor);
599 transform: translateY(-1px);
600}
601.taskbar-item.active {
602 background: rgba(255, 255, 255, 0.11);
603 border-color: var(--task-color);
604 box-shadow:
605 0 0 18px var(--task-color),
606 inset 0 -2px 0 0 var(--task-color);
607}
608.taskbar-item-dot {
609 width: 8px;
610 height: 8px;
611 border-radius: 50%;
612 background: var(--task-color, var(--gold));
613 box-shadow: 0 0 8px currentColor;
614}
615.taskbar-item[data-task="aire"] { --task-color: var(--aire); }
616.taskbar-item[data-task="fuego"] { --task-color: var(--fuego); }
617.taskbar-item[data-task="tierra"] { --task-color: var(--tierra); }
618.taskbar-item[data-task="agua"] { --task-color: var(--agua); }
619
620.taskbar-spacer {
621 flex: 1;
622 min-width: 0.6rem;
623}
624
625.taskbar-credit {
626 display: inline-flex;
627 align-items: center;
628 gap: 0.4rem;
629 font-family: 'Inter', sans-serif;
630 font-size: 0.78rem;
631 letter-spacing: 0.04em;
632 color: rgba(216, 168, 93, 0.75);
633 text-decoration: none;
634 padding: 0.35rem 0.7rem;
635 border-radius: 8px;
636 border: 1px solid transparent;
637 transition: all 220ms var(--ease-emerge);
638 white-space: nowrap;
639}
640.taskbar-credit:hover {
641 color: var(--gold);
642 border-color: rgba(216, 168, 93, 0.25);
643 background: rgba(216, 168, 93, 0.06);
644}
645.copyleft-mark {
646 display: inline-block;
647 font-size: 1rem;
648 /* © con escala horizontal -1 = copyleft visual. */
649 transform: scaleX(-1);
650 color: currentColor;
651}
652
653@media (max-width: 720px) {
654 .tip { min-width: 110px; padding: 0.7rem 0.9rem; }
655 .tip-glyph { width: 36px; height: 36px; }
656 .tip-label { font-size: 0.72rem; }
657 .tip-sub { display: none; }
658 .page-head { padding: 5vh 5vw 1vh; }
659 .page-content { padding: 0 5vw 5vh; }
660 .taskbar { height: 46px; padding: 0 0.4rem; gap: 0.3rem; }
661 .taskbar-home { width: 36px; height: 36px; }
662 .taskbar-item { height: 34px; padding: 0 0.7rem; font-size: 0.65rem; }
663 .taskbar-brand { font-size: 1.05rem; padding: 0 0.3rem; }
664 .taskbar-credit-text { display: none; }
665 .deck { bottom: 46px; }
666 :root { --taskbar-height: 46px; }
667}
668
669/* Los tips nuevos (cuerpo, sombra, cosmos, practica, olvido) existen
670 en el DOM para navegación JS (popstate, grafo), pero no se ven en
671 la chacana — no hay canvas-glyph para ellos. Se ocultan por defecto. */
672.tip-hidden {
673 position: absolute;
674 visibility: hidden;
675 pointer-events: none;
676 width: 0;
677 height: 0;
678 overflow: hidden;
679}