1/* ===================================================
2 GioSer · Estilos de Portada (Chakana 2×2)
3 =================================================== */
4
5*,
6*::before,
7*::after {
8 margin: 0;
9 padding: 0;
10 box-sizing: border-box;
11}
12
13:root {
14 --bg: #0c0c0c;
15 --bg-alt: #111;
16 --fg: #c8c8c8;
17 --fg-dim: #666;
18 --fg-bright: #e0e0e0;
19 --accent: #a0a0a0;
20 --accent-glow: #c0c0c0;
21 --reticula: #2a2a2a;
22 --reticula-hover: rgba(192, 192, 192, 0.12);
23 --border: #2a2a2a;
24 --border-hover: #555;
25 --font: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
26 --font-ui: -apple-system, 'Inter', 'Segoe UI', sans-serif;
27}
28
29html, body {
30 height: 100%;
31 width: 100%;
32 overflow: hidden;
33 background: var(--bg);
34 color: var(--fg);
35 font-family: var(--font);
36 font-size: 14px;
37 line-height: 1.4;
38 -webkit-font-smoothing: antialiased;
39}
40
41/* ===================================================
42 PORTADA — retícula 2×2
43 =================================================== */
44
45.portada {
46 position: fixed;
47 inset: 0;
48 display: grid;
49 grid-template-columns: 1fr 1fr;
50 grid-template-rows: 1fr 1fr;
51 z-index: 10;
52 background: var(--bg);
53}
54
55/* Líneas de retícula */
56.reticula-v {
57 position: absolute;
58 top: 0;
59 left: 50%;
60 width: 1px;
61 height: 100%;
62 background: var(--reticula);
63 z-index: 1;
64 pointer-events: none;
65 transition: background 0.4s ease, box-shadow 0.4s ease;
66}
67
68.reticula-v.brighter {
69 background: rgba(192, 192, 192, 0.35);
70 box-shadow: -2px 0 8px rgba(192, 192, 192, 0.18), 2px 0 8px rgba(192, 192, 192, 0.18);
71}
72
73.reticula-h {
74 position: absolute;
75 top: 50%;
76 left: 0;
77 width: 100%;
78 height: 1px;
79 background: var(--reticula);
80 z-index: 1;
81 pointer-events: none;
82 transition: background 0.4s ease, box-shadow 0.4s ease;
83}
84
85.reticula-h.brighter {
86 background: rgba(192, 192, 192, 0.35);
87 box-shadow: 0 -2px 8px rgba(192, 192, 192, 0.18), 0 2px 8px rgba(192, 192, 192, 0.18);
88}
89
90.reticula-center {
91 position: absolute;
92 top: calc(50% - 12px);
93 left: calc(50% - 12px);
94 width: 24px;
95 height: 24px;
96 border: 1px solid var(--border);
97 border-radius: 50%;
98 z-index: 2;
99 pointer-events: none;
100 transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
101 background: transparent;
102}
103
104.reticula-center.brighter {
105 border-color: rgba(192, 192, 192, 0.35);
106 box-shadow: 0 0 10px rgba(192, 192, 192, 0.2);
107 background: rgba(192, 192, 192, 0.04);
108}
109
110/* ===================================================
111 CUADRANTES
112 =================================================== */
113
114.cuadrante {
115 position: relative;
116 background: transparent;
117 border: none;
118 cursor: pointer;
119 z-index: 5;
120 overflow: hidden;
121 transition: background 0.3s ease;
122 text-align: left;
123 font-family: var(--font);
124 color: var(--fg);
125 padding: 0;
126}
127
128.cuadrante:hover {
129 background: var(--reticula-hover);
130}
131
132/* Borde iluminado en hover */
133.cuadrante-border {
134 position: absolute;
135 inset: -1px;
136 border: 1px solid transparent;
137 transition: border-color 0.3s ease;
138 pointer-events: none;
139}
140
141.cuadrante:hover .cuadrante-border {
142 border-color: var(--border-hover);
143}
144
145/* Contenido */
146.cuadrante-content {
147 position: absolute;
148 inset: 0;
149 display: flex;
150 flex-direction: column;
151 justify-content: center;
152 padding: 40px 32px;
153 opacity: 0.7;
154 transition: opacity 0.3s ease;
155}
156
157/* Alineación: cuadrantes izquierda miran a la izquierda, derecha a la derecha */
158.cuadrante-01 .cuadrante-content,
159.cuadrante-02 .cuadrante-content {
160 align-items: flex-start;
161 text-align: left;
162}
163
164.cuadrante-00 .cuadrante-content,
165.cuadrante-03 .cuadrante-content {
166 align-items: flex-end;
167 text-align: right;
168}
169
170.cuadrante:hover .cuadrante-content {
171 opacity: 1;
172}
173
174.cuadrante-hex {
175 font-size: 11px;
176 font-weight: 600;
177 color: var(--fg-dim);
178 letter-spacing: 0.15em;
179 margin-bottom: 6px;
180 font-family: var(--font);
181}
182
183.cuadrante-title {
184 font-size: 17px;
185 font-weight: 600;
186 color: var(--fg-bright);
187 letter-spacing: 0.06em;
188 margin-bottom: 12px;
189 font-family: var(--font-ui);
190}
191
192.cuadrante-context {
193 font-size: 13px;
194 color: var(--fg-dim);
195 line-height: 1.6;
196 margin-bottom: 16px;
197 max-width: 70%;
198 font-family: var(--font-ui);
199}
200
201.cuadrante-01 .cuadrante-context,
202.cuadrante-02 .cuadrante-context {
203 text-align: left;
204}
205
206.cuadrante-00 .cuadrante-context,
207.cuadrante-03 .cuadrante-context {
208 text-align: right;
209}
210
211.cuadrante-meta {
212 display: flex;
213 align-items: center;
214 gap: 14px;
215 margin-bottom: 12px;
216}
217
218.cuadrante-01 .cuadrante-meta,
219.cuadrante-02 .cuadrante-meta {
220 flex-direction: row;
221}
222
223.cuadrante-00 .cuadrante-meta,
224.cuadrante-03 .cuadrante-meta {
225 flex-direction: row-reverse;
226}
227
228.meta-cta {
229 font-size: 11px;
230 font-weight: 600;
231 color: var(--accent);
232 font-family: var(--font);
233 letter-spacing: 0.05em;
234 border: 1px solid var(--border);
235 padding: 2px 8px;
236 border-radius: 2px;
237 transition: border-color 0.3s ease, color 0.3s ease;
238}
239
240.cuadrante:hover .meta-cta {
241 border-color: var(--accent-glow);
242 color: var(--fg-bright);
243}
244
245.meta-stat {
246 font-size: 10px;
247 color: var(--fg-dim);
248 letter-spacing: 0.08em;
249 font-family: var(--font);
250 opacity: 0;
251 transition: opacity 0.4s ease;
252}
253
254.cuadrante:hover .meta-stat {
255 opacity: 0.7;
256}
257
258.cuadrante-crates {
259 list-style: none;
260 font-size: 11px;
261 color: var(--fg-dim);
262 font-family: var(--font);
263 line-height: 1.6;
264 margin: 0;
265 opacity: 0;
266 transition: opacity 0.4s ease;
267}
268
269.cuadrante:hover .cuadrante-crates {
270 opacity: 0.6;
271}
272
273.cuadrante-crates li::before {
274 content: '◆ ';
275 color: var(--fg-dim);
276 font-size: 7px;
277 opacity: 0.4;
278}
279
280/* ===================================================
281 TRANSICIÓN CIERRE PORTADA
282 =================================================== */
283
284.portada-closing {
285 animation: portadaFade 0.6s ease forwards;
286}
287
288@keyframes portadaFade {
289 0% {
290 opacity: 1;
291 pointer-events: auto;
292 }
293 100% {
294 opacity: 0;
295 pointer-events: none;
296 }
297}
298
299/* ===================================================
300 DECK (páginas md, mismo estilo de antes)
301 =================================================== */
302
303.deck {
304 position: fixed;
305 inset: 0;
306 z-index: 20;
307 background: var(--bg);
308 opacity: 0;
309 transition: opacity 0.5s ease;
310}
311
312.deck:not([aria-hidden]) {
313 opacity: 1;
314}
315
316.deck-strip {
317 height: 100%;
318 width: 100%;
319 display: flex;
320 overflow-x: auto;
321 overflow-y: hidden;
322 scroll-snap-type: x mandatory;
323 -webkit-overflow-scrolling: touch;
324}
325
326/* ===================================================
327 CONTROLES DE PÁGINA
328 =================================================== */
329
330.page-controls {
331 position: fixed;
332 top: 12px;
333 right: 12px;
334 display: flex;
335 gap: 8px;
336 z-index: 100;
337 transition: opacity 0.3s ease;
338}
339
340.page-control-btn {
341 width: 32px;
342 height: 32px;
343 background: rgba(255,255,255,0.04);
344 border: 1px solid var(--border);
345 border-radius: 4px;
346 color: var(--fg);
347 cursor: pointer;
348 display: flex;
349 align-items: center;
350 justify-content: center;
351 transition: background 0.2s ease, border-color 0.2s ease;
352}
353
354.page-control-btn:hover {
355 background: rgba(255,255,255,0.08);
356 border-color: var(--border-hover);
357}
358
359.page-close {
360 font-size: 18px;
361 font-family: var(--font-ui);
362 font-weight: 300;
363}
364
365/* ===================================================
366 TASKBAR
367 =================================================== */
368
369.taskbar {
370 position: fixed;
371 bottom: 0;
372 left: 0;
373 right: 0;
374 height: 40px;
375 background: rgba(12, 12, 12, 0.92);
376 border-top: 1px solid var(--border);
377 display: flex;
378 align-items: center;
379 gap: 6px;
380 padding: 0 10px;
381 z-index: 200;
382 backdrop-filter: blur(8px);
383 -webkit-backdrop-filter: blur(8px);
384 font-family: var(--font);
385 font-size: 12px;
386}
387
388.taskbar-home,
389.taskbar-brand {
390 display: flex;
391 align-items: center;
392 gap: 4px;
393 color: var(--fg);
394 cursor: pointer;
395 text-decoration: none;
396 background: transparent;
397 border: none;
398 font-family: var(--font);
399 font-size: 12px;
400 padding: 4px 8px;
401 border-radius: 3px;
402 transition: background 0.2s ease;
403}
404
405.taskbar-home:hover,
406.taskbar-brand:hover {
407 background: rgba(255,255,255,0.06);
408}
409
410.taskbar-home-glyph {
411 width: 16px;
412 height: 16px;
413}
414
415.brand-dot {
416 color: var(--fg-dim);
417 margin: 0 1px;
418}
419
420.taskbar-divider {
421 width: 1px;
422 height: 20px;
423 background: var(--border);
424 margin: 0 4px;
425}
426
427.taskbar-list {
428 display: flex;
429 gap: 2px;
430 list-style: none;
431 margin: 0;
432 padding: 0;
433 max-width: 60vw;
434 overflow-x: auto;
435}
436
437.taskbar-list::-webkit-scrollbar {
438 height: 0;
439}
440
441.taskbar-spacer {
442 flex: 1;
443}
444
445.taskbar-credit {
446 color: var(--fg-dim);
447 text-decoration: none;
448 display: flex;
449 align-items: center;
450 gap: 4px;
451 padding: 4px 8px;
452 border-radius: 3px;
453 transition: color 0.2s ease;
454 font-size: 11px;
455}
456
457.taskbar-credit:hover {
458 color: var(--fg);
459}
460
461.copyleft-mark {
462 font-size: 11px;
463}
464
465/* ===================================================
466 SCROLLBAR
467 =================================================== */
468
469::-webkit-scrollbar {
470 width: 6px;
471 height: 6px;
472}
473
474::-webkit-scrollbar-track {
475 background: transparent;
476}
477
478::-webkit-scrollbar-thumb {
479 background: var(--border);
480 border-radius: 3px;
481}
482
483::-webkit-scrollbar-thumb:hover {
484 background: var(--border-hover);
485}