-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
3077 lines (2951 loc) · 212 KB
/
Copy pathindex.html
File metadata and controls
3077 lines (2951 loc) · 212 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title id="docTitle">Automata101</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="assets/tailwind.css" />
<link rel="icon" href="assets/brand/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="assets/brand/favicon.svg" />
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<style>
@keyframes popIn { from { transform: scale(0.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes fadeUp { from { transform: translateY(6px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.pop-in { animation: popIn .25s ease-out both }
.fade-up { animation: fadeUp .3s ease-out both }
.shake { animation: shake .35s ease-in-out }
@keyframes shake { 20%,60% {transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }
html { scroll-behavior: smooth }
html[data-reduced-motion="true"] { scroll-behavior: auto }
html[data-reduced-motion="true"] *, html[data-reduced-motion="true"] *::before, html[data-reduced-motion="true"] *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.skip-link{position:absolute;left:-9999px;top:12px;z-index:100;padding:8px 14px;border-radius:8px;background:#0a0a0a;color:#fff;font-size:14px}
.skip-link:focus{left:12px}
button:disabled{opacity:.5;cursor:not-allowed}
.repo-popup-layer{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:6rem 1rem 1.5rem;background:rgba(10,10,10,.45)}
.repo-popup-layer.hidden{display:none}
.repo-popup-card{position:relative;width:min(100%,28rem);border:1px solid #e5e7eb;border-radius:1rem;background:#fff;padding:1.5rem;box-shadow:0 24px 60px rgba(15,23,42,.2)}
.repo-popup-close{position:absolute;right:.75rem;top:.75rem;z-index:2}
.study-route-grid,.study-foundation-grid,.study-two-grid,.study-method-grid,.study-glossary-grid,.study-practice-grid,.study-resource-grid{display:grid}
.study-route-grid,.study-foundation-grid,.study-two-grid,.study-method-grid,.study-glossary-grid,.study-practice-grid,.study-resource-grid{grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){
.study-route-grid,.study-glossary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.study-foundation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.study-practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){
.study-route-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.study-foundation-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.study-two-grid,.study-resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.study-method-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.study-glossary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.tour-hl { outline: 3px solid #22c55e; outline-offset: 4px; border-radius: 14px }
/* ===== DEVOT ===== */
#petWrap{position:fixed;left:0;bottom:10px;z-index:60;width:96px;height:128px;transform:translateX(24px);cursor:pointer;user-select:none;-webkit-user-drag:none}
#petWrap:focus-visible{outline:2px solid #16a34a;outline-offset:5px;border-radius:14px}
#pet{position:absolute;bottom:8px;left:2px;background-color:transparent;background-repeat:no-repeat;background-position:0 0;background-clip:padding-box;border:0;outline:0;box-shadow:none;image-rendering:auto}
#petWrap.hop #pet{animation:petHop .62s cubic-bezier(.35,.65,.45,1)}
@keyframes petHop{0%{bottom:8px}36%{bottom:56px}70%{bottom:16px}86%{bottom:5px}100%{bottom:8px}}
#petShadow{position:absolute;bottom:2px;left:50%;width:44px;height:8px;margin-left:-22px;border-radius:50%;background:rgba(10,10,10,.16);transition:transform .2s,opacity .2s}
#petWrap.hop #petShadow{animation:shadowHop .62s ease}
@keyframes shadowHop{0%,100%{transform:scaleX(1);opacity:.16}40%{transform:scaleX(.5);opacity:.07}80%{transform:scaleX(1.15);opacity:.22}}
#petBubble{position:absolute;bottom:118px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:11px;background:#fff;border:1px solid #d4d4d4;border-radius:10px;padding:4px 9px;box-shadow:0 2px 8px rgba(0,0,0,.1);opacity:0;transition:opacity .25s;pointer-events:none;color:#0a0a0a}
#petBadge{position:absolute;bottom:116px;left:50%;transform:translateX(-50%);font:600 9px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:999px;padding:4px 8px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
#petWrap.teaching #petBadge{opacity:1}
#petWrap.teaching #pet{filter:drop-shadow(0 0 5px rgba(22,163,74,.2))}
.fallback3d{height:100%;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);font-family:Inter,sans-serif}
.fallback3d-card{width:min(620px,100%);border:1px solid #e5e7eb;border-radius:18px;background:#fff;padding:22px;box-shadow:0 12px 28px rgba(15,23,42,.06)}
.fallback3d-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:20px}
.fallback3d-kicker{font:700 10px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#16a34a}
.fallback3d-note{font:11px/1.4 'JetBrains Mono',monospace;color:#9ca3af;text-align:right}
.fallback3d-stage{min-height:170px;display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:20px;border-radius:14px;background:radial-gradient(circle at 50% 15%,#fff 0%,#f3f4f6 100%);border:1px solid #f0f0f0}
.fallback3d-block{width:60px;height:54px;border:1px solid #14532d;border-radius:10px 10px 6px 6px;background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;display:flex;align-items:center;justify-content:center;font:700 18px 'JetBrains Mono',monospace;box-shadow:0 5px 0 #bbf7d0,0 10px 18px rgba(22,101,52,.12);animation:popIn .25s ease-out both}
.fallback3d-block.muted{border-color:#374151;background:linear-gradient(135deg,#374151,#111827);box-shadow:0 5px 0 #e5e7eb,0 10px 18px rgba(17,24,39,.12)}
.fallback3d-empty{color:#9ca3af;font:12px 'JetBrains Mono',monospace}
@media(max-width:640px){#petWrap{width:82px;height:106px}#petBubble{font-size:10px;bottom:108px}#petBadge{bottom:96px;font-size:8px}.fallback3d-stage{gap:5px;padding:12px}.fallback3d-block{width:46px;height:46px;font-size:15px}}
</style>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
}
}
</script>
</head>
<body class="bg-white text-ink font-sans antialiased">
<a href="#main-content" class="skip-link">Saltar al contenido</a>
<!-- NAV -->
<header class="sticky top-0 z-50 bg-white/90 backdrop-blur border-b border-neutral-200">
<nav class="max-w-6xl mx-auto flex items-center justify-between px-5 h-16" aria-label="Navegación principal">
<!-- LOGO -->
<a href="#" class="flex items-center group" aria-label="teoria.">
<img src="assets/brand/logo.svg" alt="teoria." width="142" height="36" class="h-9 w-auto" />
</a>
<div class="hidden md:flex items-center gap-5 text-[13px] font-medium text-neutral-600">
<a href="#guia" class="hover:text-ink transition-colors" data-i18n="navGuide">Guía</a>
<a href="#pilas" class="hover:text-ink transition-colors" data-i18n="navStacks">Pilas</a>
<a href="#automatas" class="hover:text-ink transition-colors" data-i18n="navAutomata">Autómatas</a>
<a href="#pda" class="hover:text-ink transition-colors">PDA</a>
<a href="#editor" class="hover:text-ink transition-colors" data-i18n="navEditor">Editor</a>
<a href="#turing" class="hover:text-ink transition-colors" data-i18n="navTuring">Máquina de Turing</a>
<a href="#tresd" class="hover:text-ink transition-colors" data-i18n="nav3D">3D</a>
<a href="#jerarquia" class="hover:text-ink transition-colors" data-i18n="navHierarchy">Jerarquía</a>
<a href="#retos" class="hover:text-ink transition-colors" data-i18n="navRetos">Retos</a>
</div>
<div class="flex items-center gap-2">
<!-- TOUR -->
<button id="tourBtn" onclick="startTour(0)" title="Tour guiado" data-i18n-title="tourBtnTitle" aria-label="Tour guiado"
class="p-2 rounded-full border border-neutral-300 text-neutral-500 hover:text-leaf-700 hover:border-leaf-600 outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 transition-colors">
<i data-lucide="graduation-cap" class="w-4 h-4" stroke-width="1.5"></i>
</button>
<!-- TOGGLE IDIOMA -->
<div class="flex items-center rounded-full border border-neutral-300 p-0.5 text-xs font-semibold select-none" role="group" aria-label="Idioma / Language">
<button id="btnEs" onclick="setLang('es')" class="px-2.5 py-1 rounded-full bg-ink text-white transition-colors">ES</button>
<button id="btnEn" onclick="setLang('en')" class="px-2.5 py-1 rounded-full text-neutral-500 hover:text-ink transition-colors">EN</button>
</div>
<button id="menuBtn" class="md:hidden p-2 rounded-lg hover:bg-neutral-100 outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 transition-colors" aria-label="Menú" aria-controls="mobileMenu" aria-expanded="false">
<i data-lucide="menu" class="w-5 h-5" stroke-width="1.5"></i>
</button>
</div>
</nav>
<div id="mobileMenu" class="hidden md:hidden border-t border-neutral-200 bg-white px-5 py-3 space-y-1">
<a href="#guia" class="block px-3 py-2 rounded-lg hover:bg-neutral-100 text-sm font-medium" data-i18n="navGuide">Guía</a>
<a href="#pilas" class="block px-3 py-2 rounded-lg hover:bg-neutral-100 text-sm font-medium" data-i18n="navStacks">Pilas</a>
<a href="#automatas" class="block px-3 py-2 rounded-lg hover:bg-neutral-100 text-sm font-medium" data-i18n="navAutomata">Autómatas</a>
<a href="#pda" class="block px-3 py-2 rounded-lg hover:bg-neutral-100 text-sm font-medium">PDA</a>
<a href="#editor" class="block px-3 py-2 rounded-lg hover:bg-neutral-100 text-sm font-medium" data-i18n="navEditor">Editor</a>
<a href="#turing" class="block px-3 py-2 rounded-lg hover:bg-neutral-100 text-sm font-medium" data-i18n="navTuring">Máquina de Turing</a>
<a href="#tresd" class="block px-3 py-2 rounded-lg hover:bg-neutral-100 text-sm font-medium" data-i18n="nav3D">3D</a>
<a href="#jerarquia" class="block px-3 py-2 rounded-lg hover:bg-neutral-100 text-sm font-medium" data-i18n="navHierarchy">Jerarquía</a>
<a href="#retos" class="block px-3 py-2 rounded-lg hover:bg-neutral-100 text-sm font-medium" data-i18n="navRetos">Retos</a>
</div>
</header>
<!-- REPOSITORY POPUP -->
<div id="repoPopup" class="repo-popup-layer fixed inset-0 z-[100] flex items-start justify-center bg-black/40 p-4 sm:pt-20"
role="dialog" aria-modal="true" aria-labelledby="repoPopupTitle" aria-describedby="repoPopupText"
>
<div class="repo-popup-card pop-in relative w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-6 shadow-2xl">
<button id="repoPopupClose" type="button"
class="repo-popup-close absolute right-3 top-3 inline-flex h-9 w-9 items-center justify-center rounded-full text-neutral-500 hover:bg-neutral-100 hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 transition-colors"
aria-label="Close announcement" data-i18n-aria="repoPopupClose" title="Close announcement" data-i18n-title="repoPopupClose">
<i data-lucide="x" class="h-4 w-4" stroke-width="1.7"></i>
</button>
<div class="flex items-start gap-4 pr-8">
<div class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-ink text-white" aria-hidden="true">
<svg viewBox="0 0 24 24" class="h-6 w-6" fill="#ffffff" aria-hidden="true">
<path d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.11.79-.25.79-.56v-2.17c-3.22.7-3.9-1.38-3.9-1.38-.53-1.36-1.29-1.72-1.29-1.72-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.19 1.77 1.19 1.04 1.77 2.72 1.26 3.38.96.11-.75.41-1.26.74-1.55-2.57-.29-5.28-1.29-5.28-5.73 0-1.27.45-2.31 1.19-3.12-.12-.29-.52-1.47.11-3.07 0 0 .97-.31 3.17 1.19a10.98 10.98 0 0 1 5.77 0c2.2-1.5 3.17-1.19 3.17-1.19.63 1.6.23 2.78.11 3.07.74.81 1.19 1.85 1.19 3.12 0 4.45-2.71 5.44-5.29 5.72.42.36.79 1.07.79 2.16v3.2c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5Z"/>
</svg>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-leaf-700" data-i18n="repoPopupKicker">Open source project</p>
<h2 id="repoPopupTitle" class="mt-1 text-xl font-semibold tracking-tight text-ink" data-i18n="repoPopupTitle">Learn, explore and contribute</h2>
<p id="repoPopupText" class="mt-2 text-sm leading-relaxed text-neutral-600" data-i18n="repoPopupText">This resource grows with the community. Explore the code, suggest improvements and share your ideas.</p>
</div>
</div>
<a href="https://github.com/DevCop95/automata101" target="_blank" rel="noopener noreferrer"
class="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-ink px-4 py-3 text-sm font-semibold text-white hover:bg-neutral-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 focus-visible:ring-offset-2 transition-colors">
<svg viewBox="0 0 24 24" class="h-4 w-4" fill="#ffffff" aria-hidden="true">
<path d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.11.79-.25.79-.56v-2.17c-3.22.7-3.9-1.38-3.9-1.38-.53-1.36-1.29-1.72-1.29-1.72-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.19 1.77 1.19 1.04 1.77 2.72 1.26 3.38.96.11-.75.41-1.26.74-1.55-2.57-.29-5.28-1.29-5.28-5.73 0-1.27.45-2.31 1.19-3.12-.12-.29-.52-1.47.11-3.07 0 0 .97-.31 3.17 1.19a10.98 10.98 0 0 1 5.77 0c2.2-1.5 3.17-1.19 3.17-1.19.63 1.6.23 2.78.11 3.07.74.81 1.19 1.85 1.19 3.12 0 4.45-2.71 5.44-5.29 5.72.42.36.79 1.07.79 2.16v3.2c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5Z"/>
</svg>
<span data-i18n="repoPopupBtn">View repository on GitHub</span>
<i data-lucide="arrow-up-right" class="h-4 w-4" stroke-width="1.7"></i>
</a>
</div>
</div>
<main id="main-content">
<!-- HERO -->
<section class="max-w-6xl mx-auto px-5 pt-16 pb-20 md:pt-24 md:pb-28">
<p class="text-sm font-semibold text-leaf-600 uppercase tracking-widest mb-3" data-i18n="heroKicker">Computabilidad · Lenguajes formales</p>
<h1 class="text-4xl md:text-6xl font-semibold tracking-tight leading-[1.05] max-w-3xl">
<span data-i18n="heroTitle1">Los conceptos de la computación,</span><br class="hidden md:block" />
<span data-i18n="heroTitle2">explicados</span> <span class="underline decoration-alert decoration-4 underline-offset-8" data-i18n="heroTitleAccent">visualmente</span>.
</h1>
<p class="mt-6 max-w-xl text-lg text-neutral-600 leading-relaxed">
<span data-i18n="heroSub1">Explora pilas, autómatas finitos y la máquina de Turing con simuladores interactivos.</span>
<span class="text-alert" data-i18n="heroSub2">Nada de teoría abstracta: toca, ejecuta y observa cómo funciona cada modelo.</span>
</p>
<div class="mt-8 flex flex-wrap gap-3">
<a href="#guia" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-ink text-white text-sm font-medium hover:bg-neutral-800 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-leaf-600 transition-colors">
<i data-lucide="play" class="w-4 h-4" stroke-width="1.5"></i> <span data-i18n="heroCta1">Empezar a explorar</span>
</a>
<a href="#jerarquia" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-neutral-300 text-sm font-medium hover:border-leaf-600 hover:text-leaf-700 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-leaf-600 transition-colors">
<span data-i18n="heroCta2">Ver el panorama</span> <i data-lucide="arrow-right" class="w-4 h-4" stroke-width="1.5"></i>
</a>
</div>
<div class="mt-14 grid grid-cols-1 sm:grid-cols-3 gap-px bg-neutral-200 rounded-2xl overflow-hidden border border-neutral-200">
<div class="bg-white p-6">
<i data-lucide="layers" class="w-6 h-6 text-leaf-600" stroke-width="1.5"></i>
<h3 class="mt-3 font-semibold tracking-tight" data-i18n="card1T">LIFO / FIFO</h3>
<p class="mt-1 text-sm text-neutral-600 leading-relaxed"><span class="text-alert" data-i18n="card1A">El orden de llegada importa:</span> <span data-i18n="card1B">pilas y colas estructuran datos.</span></p>
</div>
<div class="bg-white p-6">
<i data-lucide="git-branch" class="w-6 h-6 text-leaf-600" stroke-width="1.5"></i>
<h3 class="mt-3 font-semibold tracking-tight" data-i18n="card2T">Estados</h3>
<p class="mt-1 text-sm text-neutral-600 leading-relaxed"><span class="text-alert" data-i18n="card2A">Los autómatas deciden</span> <span data-i18n="card2B">si una cadena pertenece a un lenguaje.</span></p>
</div>
<div class="bg-white p-6">
<i data-lucide="cpu" class="w-6 h-6 text-leaf-600" stroke-width="1.5"></i>
<h3 class="mt-3 font-semibold tracking-tight" data-i18n="card3T">Cómputo universal</h3>
<p class="mt-1 text-sm text-neutral-600 leading-relaxed"><span class="text-alert" data-i18n="card3A">Turing define</span> <span data-i18n="card3B">el límite de lo calculable.</span></p>
</div>
</div>
</section>
<!-- GUÍA DE REPASO -->
<section id="guia" class="border-t border-neutral-200 bg-neutral-50/60 scroll-mt-16">
<div class="max-w-6xl mx-auto px-5 py-16 md:py-24">
<div class="max-w-3xl">
<span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-leaf-700">
<i data-lucide="book-open-check" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="guideKicker">Guía de repaso</span>
</span>
<h2 class="mt-3 text-3xl md:text-5xl font-semibold tracking-tight" data-i18n="guideTitle">Del símbolo al límite</h2>
<p class="mt-4 text-lg text-neutral-600 leading-relaxed" data-i18n="guideDesc">Una ruta completa para entender cómo los modelos de computación leen, recuerdan, transforman y deciden sobre la información.</p>
</div>
<div class="mt-10 grid study-route-grid gap-4">
<a href="#fundamentos" class="group rounded-2xl border border-neutral-200 bg-white p-5 hover:border-leaf-600 hover:shadow-sm transition-all">
<span class="font-mono text-xs text-leaf-700">01 / BASICS</span>
<h3 class="mt-4 font-semibold tracking-tight group-hover:text-leaf-700 transition-colors">Fundamentals</h3>
<p class="mt-2 text-sm text-neutral-600 leading-relaxed">Alphabets, strings, languages and the minimum notation for precise explanations.</p>
<span class="mt-5 inline-flex items-center gap-1 text-xs font-medium text-neutral-500">Start here <span aria-hidden="true">→</span></span>
</a>
<a href="#pilas" class="group rounded-2xl border border-neutral-200 bg-white p-5 hover:border-leaf-600 hover:shadow-sm transition-all">
<span class="font-mono text-xs text-leaf-700">02 / MEMORY</span>
<h3 class="mt-4 font-semibold tracking-tight group-hover:text-leaf-700 transition-colors">Structures and states</h3>
<p class="mt-2 text-sm text-neutral-600 leading-relaxed">Compare LIFO, FIFO, finite states and auxiliary memory with runnable examples.</p>
<span class="mt-5 inline-flex items-center gap-1 text-xs font-medium text-neutral-500">Open simulators <span aria-hidden="true">→</span></span>
</a>
<a href="#metodo" class="group rounded-2xl border border-neutral-200 bg-white p-5 hover:border-leaf-600 hover:shadow-sm transition-all">
<span class="font-mono text-xs text-leaf-700">03 / METHOD</span>
<h3 class="mt-4 font-semibold tracking-tight group-hover:text-leaf-700 transition-colors">Solve and justify</h3>
<p class="mt-2 text-sm text-neutral-600 leading-relaxed">Learn to model a problem, follow a trace and prove that your idea works.</p>
<span class="mt-5 inline-flex items-center gap-1 text-xs font-medium text-neutral-500">Use the method <span aria-hidden="true">→</span></span>
</a>
<a href="#practica" class="group rounded-2xl border border-neutral-200 bg-white p-5 hover:border-leaf-600 hover:shadow-sm transition-all">
<span class="font-mono text-xs text-leaf-700">04 / PRACTICE</span>
<h3 class="mt-4 font-semibold tracking-tight group-hover:text-leaf-700 transition-colors">Consolidate</h3>
<p class="mt-2 text-sm text-neutral-600 leading-relaxed">Graduated exercises, reasoned answers and a route for continued study.</p>
<span class="mt-5 inline-flex items-center gap-1 text-xs font-medium text-neutral-500">Open exercises <span aria-hidden="true">→</span></span>
</a>
</div>
<div id="fundamentos" class="mt-14 grid study-foundation-grid gap-4 scroll-mt-24">
<article class="rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6">
<div class="flex items-center gap-3">
<span class="flex h-9 w-9 items-center justify-center rounded-xl bg-leaf-50 font-mono text-sm font-semibold text-leaf-700">Σ</span>
<h3 class="font-semibold tracking-tight">Alphabet, string and language</h3>
</div>
<p class="mt-4 text-sm text-neutral-600 leading-relaxed">An <strong class="text-ink">alphabet</strong> Σ is a finite set of symbols. A <strong class="text-ink">string</strong> is a finite sequence of symbols; a <strong class="text-ink">language</strong> is a set of strings over Σ.</p>
<div class="mt-4 rounded-xl bg-neutral-50 border border-neutral-100 p-4 font-mono text-xs leading-loose">
Σ = {0, 1}<br />
w = 0101 → |w| = 4<br />
L = { w ∈ Σ* : w termina en 01 }
</div>
<p class="mt-3 text-xs text-neutral-500">The central question is always: <em>does w belong to L?</em></p>
</article>
<article class="rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6">
<div class="flex items-center gap-3">
<span class="flex h-9 w-9 items-center justify-center rounded-xl bg-leaf-50 font-mono text-sm font-semibold text-leaf-700">∗</span>
<h3 class="font-semibold tracking-tight">Operations that appear in exams</h3>
</div>
<ul class="mt-4 space-y-3 text-sm text-neutral-600 leading-relaxed">
<li><code class="font-mono text-ink">uv</code> concatenates u and v; order matters.</li>
<li><code class="font-mono text-ink">ε</code> is the empty string and <code class="font-mono text-ink">|ε| = 0</code>.</li>
<li><code class="font-mono text-ink">Σ*</code> contains every finite string, including ε.</li>
<li><code class="font-mono text-ink">Lᶜ</code> contains the strings in Σ* that are not in L.</li>
<li><code class="font-mono text-ink">L*</code> allows concatenating zero or more strings from L.</li>
</ul>
</article>
<article class="rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6">
<div class="flex items-center gap-3">
<span class="flex h-9 w-9 items-center justify-center rounded-xl bg-leaf-50 font-mono text-sm font-semibold text-leaf-700">?</span>
<h3 class="font-semibold tracking-tight">Recognizing is not generating</h3>
</div>
<p class="mt-4 text-sm text-neutral-600 leading-relaxed">A model <strong class="text-ink">recognizes</strong> a language when it receives a string and answers yes/no. A generator describes how to produce valid strings. The same idea can be expressed as an automaton, a regular expression or a grammar.</p>
<div class="mt-4 grid grid-cols-2 gap-2 text-xs">
<div class="rounded-xl border border-neutral-200 p-3"><span class="font-semibold text-ink">Input</span><br /><span class="text-neutral-500">string w</span></div>
<div class="rounded-xl border border-neutral-200 p-3"><span class="font-semibold text-ink">Output</span><br /><span class="text-neutral-500">accept / reject</span></div>
</div>
</article>
</div>
<div class="mt-8 grid study-two-grid gap-4">
<article class="rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6">
<h3 class="font-semibold tracking-tight flex items-center gap-2"><i data-lucide="route" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i>Which model do I need?</h3>
<div class="mt-5 divide-y divide-neutral-100 text-sm">
<div class="grid grid-cols-[90px_1fr] gap-4 py-3 first:pt-0"><strong class="font-mono text-leaf-700">DFA</strong><span class="text-neutral-600">It only needs to remember a finite number of situations.</span></div>
<div class="grid grid-cols-[90px_1fr] gap-4 py-3"><strong class="font-mono text-leaf-700">PDA</strong><span class="text-neutral-600">It needs to count or nest without knowing the size in advance.</span></div>
<div class="grid grid-cols-[90px_1fr] gap-4 py-3"><strong class="font-mono text-leaf-700">TM</strong><span class="text-neutral-600">It needs rewritable memory and movement in both directions.</span></div>
</div>
<p class="mt-4 rounded-xl bg-leaf-50 p-3 text-xs leading-relaxed text-leaf-800">Key idea: do not choose a model by the problem's name; choose it by the memory the solution needs.</p>
</article>
<article class="rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6">
<h3 class="font-semibold tracking-tight flex items-center gap-2"><i data-lucide="list-checks" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i>Submission checklist</h3>
<ol class="mt-5 space-y-3 text-sm text-neutral-600">
<li class="flex gap-3"><span class="font-mono text-xs text-leaf-700">01</span><span>Define Σ, the language and what acceptance means.</span></li>
<li class="flex gap-3"><span class="font-mono text-xs text-leaf-700">02</span><span>State the initial state, stack or configuration.</span></li>
<li class="flex gap-3"><span class="font-mono text-xs text-leaf-700">03</span><span>Write at least one accepted and one rejected trace.</span></li>
<li class="flex gap-3"><span class="font-mono text-xs text-leaf-700">04</span><span>Justify with an invariant, not only a diagram.</span></li>
<li class="flex gap-3"><span class="font-mono text-xs text-leaf-700">05</span><span>Check ε, short strings, unexpected symbols and cost.</span></li>
</ol>
</article>
</div>
<div class="mt-8 rounded-2xl border border-neutral-200 bg-ink p-5 sm:p-6 text-white flex flex-col md:flex-row md:items-center gap-4">
<i data-lucide="lightbulb" class="w-6 h-6 shrink-0 text-lime-300" stroke-width="1.5"></i>
<p class="text-sm leading-relaxed text-neutral-200"><strong class="text-white">Rule of thumb:</strong> a trace shows what happened for one input; an invariant explains why the model keeps working for every input.</p>
</div>
</div>
</section>
<!-- PILAS Y COLAS -->
<section id="pilas" class="border-t border-neutral-200 bg-neutral-50/60 scroll-mt-16">
<div class="max-w-6xl mx-auto px-5 py-16 md:py-24 grid lg:grid-cols-2 gap-12 lg:gap-16 items-start">
<div>
<span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-leaf-700">
<i data-lucide="hash" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="dsKicker">Estructura de datos</span>
</span>
<h2 id="dsTitle" class="mt-3 text-3xl md:text-4xl font-semibold tracking-tight">Pilas <span class="text-neutral-400">(Stack)</span></h2>
<p id="dsDesc" class="mt-4 text-neutral-600 leading-relaxed"></p>
<ul class="mt-6 space-y-3" id="dsList"></ul>
<div class="mt-6 p-4 rounded-xl border border-neutral-200 bg-white">
<p id="dsCode" class="font-mono text-xs leading-loose"></p>
</div>
</div>
<!-- Demo -->
<div class="rounded-2xl border border-neutral-200 bg-white shadow-sm overflow-hidden">
<div class="flex items-center justify-between px-5 py-3.5 border-b border-neutral-200">
<div class="flex items-center gap-2">
<span class="flex gap-1.5">
<span class="w-2.5 h-2.5 rounded-full bg-neutral-300"></span>
<span class="w-2.5 h-2.5 rounded-full bg-neutral-300"></span>
<span class="w-2.5 h-2.5 rounded-full bg-neutral-300"></span>
</span>
<span id="dsSimName" class="text-xs font-mono text-neutral-500 ml-2">simulador-pila</span>
</div>
<span id="dsCount" class="text-xs font-mono px-2 py-0.5 rounded-full bg-leaf-50 text-leaf-700 border border-leaf-100">size: 0</span>
</div>
<div class="p-5 sm:p-8 flex flex-col items-center">
<!-- Tabs Stack / Queue -->
<div class="flex w-full max-w-[280px] rounded-xl bg-neutral-100 p-1 mb-6">
<button id="tabStack" onclick="setMode('stack')" class="flex-1 inline-flex items-center justify-center gap-2 py-2 rounded-lg text-sm font-medium transition-all">
<i data-lucide="layers" class="w-4 h-4" stroke-width="1.5"></i> <span data-i18n="tabStackL">Pila</span>
</button>
<button id="tabQueue" onclick="setMode('queue')" class="flex-1 inline-flex items-center justify-center gap-2 py-2 rounded-lg text-sm font-medium transition-all">
<i data-lucide="move-horizontal" class="w-4 h-4" stroke-width="1.5"></i> <span data-i18n="tabQueueL">Cola</span>
</button>
</div>
<div id="dsStageWrap" class="relative w-full max-w-[260px] min-h-[240px] flex items-end justify-center">
<div id="dsStage" class="w-full"></div>
</div>
<p id="dsMsg" class="mt-3 h-5 text-sm font-mono text-neutral-500"> </p>
<div class="mt-3 w-full flex flex-col sm:flex-row gap-2">
<input id="dsInput" type="text" maxlength="3" placeholder="A"
class="flex-1 min-w-0 px-4 py-2.5 rounded-xl border border-neutral-300 font-mono text-sm uppercase focus:outline-none focus:ring-2 focus:ring-leaf-600 focus:border-transparent placeholder:text-neutral-400" />
<button id="dsAddBtn" onclick="dsAdd()" class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-leaf-600 text-white text-sm font-medium hover:bg-leaf-700 active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 focus-visible:ring-offset-2 transition-all">
<i data-lucide="arrow-up-to-line" class="w-4 h-4" stroke-width="1.5"></i> <span id="dsAddLabel">Apilar</span>
</button>
<button id="dsRemoveBtn" onclick="dsRemove()" class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-neutral-300 text-sm font-medium hover:border-alert hover:text-alert active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-alert focus-visible:ring-offset-2 transition-all">
<i data-lucide="arrow-down-from-line" class="w-4 h-4" stroke-width="1.5"></i> <span id="dsRemoveLabel">Desapilar</span>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- 3D -->
<section id="tresd" class="border-t border-neutral-200 scroll-mt-16">
<div class="max-w-6xl mx-auto px-5 py-16 md:py-24">
<div class="max-w-2xl mb-10">
<span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-leaf-700">
<i data-lucide="box" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="threeKicker">Exploración en 3D</span>
</span>
<h2 class="mt-3 text-3xl md:text-4xl font-semibold tracking-tight" data-i18n="threeTitle">La pila, en tres dimensiones</h2>
<p class="mt-4 text-neutral-600 leading-relaxed">
<span data-i18n="threeDesc1">Los mismos datos del simulador anterior, renderizados como bloques 3D.</span>
<span class="text-alert" data-i18n="threeDesc2">Arrastra para orbitar y usa la rueda para acercarte:</span>
<span data-i18n="threeDesc3">cada push hace caer un bloque nuevo desde arriba.</span>
</p>
</div>
<div class="relative rounded-2xl border border-neutral-200 bg-white overflow-hidden shadow-sm">
<div id="canvasWrap" class="h-[380px] sm:h-[480px] w-full touch-none" role="img" aria-live="polite" aria-label="Visualización interactiva de una pila de datos en tres dimensiones"></div>
<!-- controles superiores -->
<div class="absolute top-4 left-4 flex flex-wrap gap-2">
<button onclick="push3D()" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-ink text-white text-sm font-medium hover:bg-neutral-800 active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 focus-visible:ring-offset-2 transition-all shadow-sm">
<i data-lucide="plus" class="w-4 h-4" stroke-width="1.5"></i> <span data-i18n="pushBtn">Push</span>
</button>
<button onclick="pop3D()" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-white border border-neutral-300 text-sm font-medium hover:border-alert hover:text-alert active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-alert focus-visible:ring-offset-2 transition-all shadow-sm">
<i data-lucide="minus" class="w-4 h-4" stroke-width="1.5"></i> <span data-i18n="popBtn">Pop</span>
</button>
</div>
<!-- toggles inferiores -->
<div class="absolute bottom-4 left-4 flex flex-wrap gap-2">
<button id="spinToggle" onclick="toggleSpin()" class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl bg-white border border-neutral-200 text-xs font-medium text-neutral-500 hover:text-ink hover:border-neutral-400 transition-colors shadow-sm">
<i data-lucide="rotate-3d" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="autoRotate">Auto-giro</span>
</button>
<button id="threeModeToggle" onclick="toggle3DMode()" aria-pressed="false" class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl bg-white border border-neutral-200 text-xs font-medium text-neutral-500 hover:text-ink hover:border-neutral-400 transition-colors shadow-sm">
<i data-lucide="gauge" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="lightMode">Modo ligero</span>
</button>
<button id="reset3DView" onclick="resetView()" class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl bg-white border border-neutral-200 text-xs font-medium text-neutral-500 hover:text-ink hover:border-neutral-400 transition-colors shadow-sm">
<i data-lucide="scan" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="resetView">Reencuadrar</span>
</button>
</div>
<div class="absolute bottom-4 right-4 hidden sm:flex items-center gap-3 text-[11px] font-mono text-neutral-400 pointer-events-none">
<span class="inline-flex items-center gap-1"><i data-lucide="mouse-pointer-2" class="w-3 h-3" stroke-width="1.5"></i><span data-i18n="hintDrag">arrastra · rotar</span></span>
<span class="inline-flex items-center gap-1"><i data-lucide="mouse" class="w-3 h-3" stroke-width="1.5"></i><span data-i18n="hintZoom">rueda · zoom</span></span>
</div>
</div>
</div>
</section>
<!-- AUTÓMATAS -->
<section id="automatas" class="border-t border-neutral-200 scroll-mt-16">
<div class="max-w-6xl mx-auto px-5 py-16 md:py-24">
<div class="max-w-2xl">
<span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-leaf-700">
<i data-lucide="git-branch" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="dfaKicker">Modelos de cómputo</span>
</span>
<h2 class="mt-3 text-3xl md:text-4xl font-semibold tracking-tight" data-i18n="dfaTitle">Autómatas finitos (AFD)</h2>
<p class="mt-4 text-neutral-600 leading-relaxed">
<span data-i18n="dfaDesc1">Un autómata finito determinista lee una cadena símbolo a símbolo y salta entre estados según transiciones fijas.</span>
<span class="text-alert" data-i18n="dfaDesc2">Si al terminar está en un estado de aceptación (doble círculo), la cadena pertenece al lenguaje.</span>
</p>
</div>
<div class="mt-10 grid study-method-grid gap-8 items-start">
<!-- Diagrama -->
<div class="lg:col-span-3 rounded-2xl border border-neutral-200 bg-white p-4 sm:p-6 overflow-x-auto">
<svg viewBox="0 0 520 240" class="min-w-[480px] w-full" fill="none">
<defs>
<marker id="ah" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
<path d="M0,0 L9,3 L0,6 Z" fill="currentColor"/>
</marker>
</defs>
<line x1="30" y1="80" x2="78" y2="80" stroke="currentColor" class="text-ink" stroke-width="1.5" marker-end="url(#ah)"/>
<circle cx="18" cy="80" r="4" class="fill-ink"/>
<path d="M 130 40 C 120 5, 180 5, 170 40" stroke="currentColor" class="text-ink" stroke-width="1.5" marker-end="url(#ah)"/>
<text x="150" y="24" class="fill-neutral-600" font-size="13" font-family="JetBrains Mono" text-anchor="middle">1</text>
<path d="M 110 118 C 70 160, 140 175, 128 122" stroke="currentColor" class="text-ink" stroke-width="1.5" marker-end="url(#ah)"/>
<text x="105" y="165" class="fill-neutral-600" font-size="13" font-family="JetBrains Mono" text-anchor="middle">0</text>
<path d="M 330 40 C 320 5, 380 5, 370 40" stroke="currentColor" class="text-ink" stroke-width="1.5" marker-end="url(#ah)"/>
<text x="350" y="24" class="fill-neutral-600" font-size="13" font-family="JetBrains Mono" text-anchor="middle">0</text>
<line x1="184" y1="80" x2="308" y2="80" stroke="currentColor" class="text-ink" stroke-width="1.5" marker-end="url(#ah)"/>
<text x="248" y="70" class="fill-neutral-600" font-size="13" font-family="JetBrains Mono" text-anchor="middle">1</text>
<line x1="384" y1="102" x2="452" y2="146" stroke="currentColor" class="text-ink" stroke-width="1.5" marker-end="url(#ah)"/>
<text x="430" y="112" class="fill-neutral-600" font-size="13" font-family="JetBrains Mono" text-anchor="middle">1</text>
<path d="M 442 190 C 340 250, 150 235, 132 126" stroke="currentColor" class="text-ink" stroke-width="1.5" marker-end="url(#ah)"/>
<text x="290" y="232" class="fill-neutral-600" font-size="13" font-family="JetBrains Mono" text-anchor="middle">0, 1</text>
<g id="st-q0"><circle cx="140" cy="80" r="34" stroke="currentColor" class="text-ink" stroke-width="1.5" fill="#ffffff"/><circle cx="140" cy="80" r="41" stroke="transparent" stroke-width="1.5" fill="transparent"/><text x="140" y="85" class="fill-ink" font-size="15" font-family="JetBrains Mono" text-anchor="middle">q₀</text></g>
<g id="st-q1"><circle cx="350" cy="80" r="34" stroke="currentColor" class="text-ink" stroke-width="1.5" fill="#ffffff"/><circle cx="350" cy="80" r="41" stroke="transparent" stroke-width="1.5" fill="transparent"/><text x="350" y="85" class="fill-ink" font-size="15" font-family="JetBrains Mono" text-anchor="middle">q₁</text></g>
<g id="st-q2">
<circle cx="482" cy="168" r="34" stroke="currentColor" class="text-ink" stroke-width="1.5" fill="#ffffff"/>
<circle cx="482" cy="168" r="27" stroke="currentColor" class="text-ink" stroke-width="1.5" fill="none"/>
<text x="482" y="173" class="fill-ink" font-size="15" font-family="JetBrains Mono" text-anchor="middle">q₂</text>
</g>
</svg>
<p class="mt-3 text-xs font-mono text-neutral-500 text-center" data-i18n="dfaCaption">L = cadenas binarias que terminan en «01» · q₂ es estado de aceptación (doble círculo)</p>
</div>
<!-- Simulador + quiz -->
<div class="lg:col-span-2 space-y-4">
<div class="rounded-2xl border border-neutral-200 bg-neutral-50/60 p-5 sm:p-6">
<h3 class="font-semibold tracking-tight flex items-center gap-2">
<i data-lucide="terminal" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i> <span data-i18n="simTitle">Simulador</span>
</h3>
<label class="mt-4 block text-xs font-medium text-neutral-500 uppercase tracking-wide" data-i18n="inputLabel">Cadena de entrada (0 y 1)</label>
<input id="dfaInput" type="text" maxlength="12" value="101" placeholder="0101"
onkeydown="if(event.key==='Enter')dfaRun()"
class="mt-2 w-full px-4 py-2.5 rounded-xl border border-neutral-300 bg-white font-mono text-sm focus:outline-none focus:ring-2 focus:ring-leaf-600 focus:border-transparent placeholder:text-neutral-400" />
<div class="mt-4 flex flex-wrap gap-1.5" id="dfaTape"></div>
<div class="mt-4 flex items-center justify-between text-sm font-mono">
<span class="text-neutral-500" data-i18n="currentState">estado actual</span>
<span id="dfaState" class="px-2.5 py-0.5 rounded-full bg-leaf-50 text-leaf-700 border border-leaf-100">q₀</span>
</div>
<div class="mt-5 flex gap-2">
<button onclick="dfaRun()" class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-ink text-white text-sm font-medium hover:bg-neutral-800 active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 focus-visible:ring-offset-2 transition-all">
<i data-lucide="play" class="w-4 h-4" stroke-width="1.5"></i> <span data-i18n="runBtn">Ejecutar</span>
</button>
<button onclick="dfaReset()" class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-neutral-300 text-sm font-medium hover:border-leaf-600 hover:text-leaf-700 active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 focus-visible:ring-offset-2 transition-all">
<i data-lucide="rotate-ccw" class="w-4 h-4" stroke-width="1.5"></i>
</button>
</div>
<p id="dfaResult" class="mt-4 text-sm font-mono min-h-[20px] text-neutral-500"> </p>
</div>
<!-- QUIZ -->
<div id="quizCard" class="rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6">
<div class="flex items-center justify-between gap-2">
<h3 class="font-semibold tracking-tight flex items-center gap-2 min-w-0">
<i data-lucide="target" class="w-4 h-4 text-leaf-600 shrink-0" stroke-width="1.5"></i> <span data-i18n="quizTitle" class="truncate">Quiz: ¿acepta o rechaza?</span>
</h3>
<div class="flex items-center gap-1.5 shrink-0">
<span id="quizStreak" title="" data-i18n-title="streakT" class="hidden sm:inline-flex items-center gap-1 text-xs font-mono px-2 py-0.5 rounded-full border border-neutral-200 text-neutral-500"><i data-lucide="flame" class="w-3 h-3" stroke-width="1.5"></i><span id="quizStreakV">0</span></span>
<span id="quizBest" title="" data-i18n-title="bestT" class="inline-flex items-center gap-1 text-xs font-mono px-2 py-0.5 rounded-full border border-neutral-200 text-neutral-500"><i data-lucide="crown" class="w-3 h-3" stroke-width="1.5"></i><span id="quizBestV">0</span></span>
<span id="quizScore" class="text-xs font-mono px-2 py-0.5 rounded-full bg-leaf-50 text-leaf-700 border border-leaf-100">0 / 0</span>
</div>
</div>
<div class="mt-4 relative">
<p class="font-mono text-2xl tracking-[0.3em] text-center py-3 rounded-xl bg-neutral-50 border border-neutral-100" id="quizWord">—</p>
<button id="proToggle" onclick="togglePro()" class="absolute top-1/2 -translate-y-1/2 right-2 inline-flex items-center gap-1 px-2 py-1 rounded-lg bg-white border text-[10px] font-semibold uppercase tracking-wide text-neutral-400 hover:text-leaf-700 hover:border-leaf-600 transition-colors" title="" data-i18n-title="proMode">
<i data-lucide="brain" class="w-3 h-3" stroke-width="1.5"></i> <span data-i18n="proBtn">PRO</span>
</button>
</div>
<div id="quizNormBtns" class="mt-4 grid grid-cols-2 gap-2">
<button onclick="quizAnswer(true)" class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-leaf-600 text-white text-sm font-medium hover:bg-leaf-700 active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 focus-visible:ring-offset-2 transition-all">
<i data-lucide="check" class="w-4 h-4" stroke-width="1.5"></i> <span data-i18n="acceptBtn">Acepta</span>
</button>
<button onclick="quizAnswer(false)" class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-neutral-300 text-sm font-medium hover:border-alert hover:text-alert active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-alert focus-visible:ring-offset-2 transition-all">
<i data-lucide="x" class="w-4 h-4" stroke-width="1.5"></i> <span data-i18n="rejectBtn">Rechaza</span>
</button>
</div>
<div id="quizProBtns" class="mt-4 hidden grid-cols-3 gap-2">
<button onclick="quizAnswer('q0')" class="px-3 py-2.5 rounded-xl border border-neutral-300 font-mono text-sm font-medium hover:border-ink active:scale-[0.98] transition-all">q₀</button>
<button onclick="quizAnswer('q1')" class="px-3 py-2.5 rounded-xl border border-neutral-300 font-mono text-sm font-medium hover:border-ink active:scale-[0.98] transition-all">q₁</button>
<button onclick="quizAnswer('q2')" class="px-3 py-2.5 rounded-xl border border-neutral-300 font-mono text-sm font-medium hover:border-ink active:scale-[0.98] transition-all">q₂</button>
</div>
<p id="quizFeedback" class="mt-3 h-5 text-sm font-mono text-center text-neutral-500"> </p>
<div class="mt-3 pt-3 border-t border-neutral-100">
<p class="text-[10px] font-semibold uppercase tracking-widest text-neutral-400 mb-2" data-i18n="achvTitle">Logros</p>
<div id="achRow" class="flex flex-wrap gap-1.5"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PDA -->
<section id="pda" class="border-t border-neutral-200 bg-neutral-50/60 scroll-mt-16">
<div class="max-w-6xl mx-auto px-5 py-16 md:py-24">
<div class="max-w-2xl">
<span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-leaf-700">
<i data-lucide="columns-3" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="pdaKicker">El puente: estados + memoria</span>
</span>
<h2 class="mt-3 text-3xl md:text-4xl font-semibold tracking-tight" data-i18n="pdaTitle">Autómata con pila (PDA)</h2>
<p class="mt-4 text-neutral-600 leading-relaxed">
<span data-i18n="pdaDesc1">Un AFD no puede recordar cuántas «a» leyó. Un autómata con pila añade una pila como memoria auxiliar,</span>
<span class="text-alert" data-i18n="pdaDesc2">y de repente lenguajes como aⁿbⁿ se vuelven reconocibles:</span>
<span data-i18n="pdaDesc3">apila una ficha por cada «a» y desapila una por cada «b». Si la pila queda vacía justo al terminar, la cadena es válida.</span>
</p>
</div>
<div class="mt-10 grid lg:grid-cols-5 gap-8 items-start">
<!-- Diagrama -->
<div class="lg:col-span-3 rounded-2xl border border-neutral-200 bg-white p-4 sm:p-6 overflow-x-auto">
<svg viewBox="0 0 520 240" class="min-w-[460px] w-full" fill="none">
<line x1="30" y1="120" x2="78" y2="120" stroke="currentColor" class="text-ink" stroke-width="1.5" marker-end="url(#ah)"/>
<circle cx="18" cy="120" r="4" class="fill-ink"/>
<path d="M 130 80 C 120 45, 180 45, 170 80" stroke="currentColor" class="text-ink" stroke-width="1.5" marker-end="url(#ah)"/>
<text id="pdaLbA" x="150" y="64" class="fill-neutral-600" font-size="13" font-family="JetBrains Mono" text-anchor="middle">a · apilar</text>
<line x1="184" y1="120" x2="338" y2="120" stroke="currentColor" class="text-ink" stroke-width="1.5" marker-end="url(#ah)"/>
<text id="pdaLbB1" x="262" y="110" class="fill-neutral-600" font-size="13" font-family="JetBrains Mono" text-anchor="middle">b · desapilar</text>
<path d="M 390 80 C 380 45, 440 45, 430 80" stroke="currentColor" class="text-ink" stroke-width="1.5" marker-end="url(#ah)"/>
<text id="pdaLbB2" x="410" y="64" class="fill-neutral-600" font-size="13" font-family="JetBrains Mono" text-anchor="middle">b · desapilar</text>
<g id="st-pq0"><circle cx="140" cy="120" r="34" stroke="currentColor" class="text-ink" stroke-width="1.5" fill="#ffffff"/><circle cx="140" cy="120" r="41" stroke="transparent" stroke-width="1.5" fill="transparent"/><text x="140" y="125" class="fill-ink" font-size="15" font-family="JetBrains Mono" text-anchor="middle">q₀</text></g>
<g id="st-pq1">
<circle cx="400" cy="120" r="34" stroke="currentColor" class="text-ink" stroke-width="1.5" fill="#ffffff"/>
<circle cx="400" cy="120" r="27" stroke="currentColor" class="text-ink" stroke-width="1.5" fill="none"/>
<text x="400" y="125" class="fill-ink" font-size="15" font-family="JetBrains Mono" text-anchor="middle">q₁</text>
</g>
</svg>
<p class="mt-3 text-xs font-mono text-neutral-500 text-center" data-i18n="pdaCaption">L = aⁿbⁿ · aceptación: estado q₁ con pila vacía (solo el fondo Z)</p>
<!-- cinta de entrada -->
<label class="block mt-6 mb-2 text-xs font-medium text-neutral-500 uppercase tracking-wide" data-i18n="pdaInputL">Cadena de entrada (a y b)</label>
<input id="pdaInput" type="text" maxlength="14" value="aabb" placeholder="aabb"
onkeydown="if(event.key==='Enter')pdaRun()"
class="w-full px-4 py-2.5 rounded-xl border border-neutral-300 bg-white font-mono text-sm focus:outline-none focus:ring-2 focus:ring-leaf-600 focus:border-transparent placeholder:text-neutral-400" />
<div class="mt-3 flex flex-wrap gap-1.5 min-h-[32px]" id="pdaTape"></div>
<div class="mt-4 flex items-center justify-between text-sm font-mono">
<span class="text-neutral-500" data-i18n="currentState">estado actual</span>
<span id="pdaState" class="px-2.5 py-0.5 rounded-full bg-leaf-50 text-leaf-700 border border-leaf-100">q₀</span>
</div>
<div class="mt-5 flex gap-2">
<button onclick="pdaRun()" class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-ink text-white text-sm font-medium hover:bg-neutral-800 active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 focus-visible:ring-offset-2 transition-all">
<i data-lucide="play" class="w-4 h-4" stroke-width="1.5"></i> <span data-i18n="runBtn">Ejecutar</span>
</button>
<button onclick="pdaReset()" class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-neutral-300 text-sm font-medium hover:border-leaf-600 hover:text-leaf-700 active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 focus-visible:ring-offset-2 transition-all">
<i data-lucide="rotate-ccw" class="w-4 h-4" stroke-width="1.5"></i>
</button>
</div>
<p id="pdaResult" class="mt-4 text-sm font-mono min-h-[20px] text-neutral-500"> </p>
</div>
<!-- Pila -->
<div class="lg:col-span-2 rounded-2xl border border-neutral-200 bg-neutral-50/60 p-5 sm:p-6 flex flex-col">
<h3 class="font-semibold tracking-tight flex items-center gap-2">
<i data-lucide="layers-2" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i> <span data-i18n="pdaStackT">Memoria auxiliar</span>
</h3>
<p id="pdaStackHint" class="mt-2 text-sm text-neutral-600 leading-relaxed"></p>
<div class="mt-5 flex justify-center flex-1">
<div class="flex flex-col-reverse items-stretch w-32">
<div class="h-9 rounded-b-lg bg-ink text-white font-mono text-xs flex items-center justify-center">Z₀</div>
<div id="pdaStackArea" class="flex flex-col-reverse gap-1 pb-1"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- MÉTODO DE RESOLUCIÓN -->
<section id="metodo" class="border-t border-neutral-200 scroll-mt-16">
<div class="max-w-6xl mx-auto px-5 py-16 md:py-24">
<div class="max-w-3xl">
<span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-leaf-700">
<i data-lucide="brackets" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="methodKicker">Pensar como diseñador</span>
</span>
<h2 class="mt-3 text-3xl md:text-4xl font-semibold tracking-tight" data-i18n="methodTitle">Cómo resolver un ejercicio de computabilidad</h2>
<p class="mt-4 text-neutral-600 leading-relaxed" data-i18n="methodDesc">La teoría deja de parecer una colección de dibujos cuando sigues siempre la misma secuencia: especificar, elegir memoria, ejecutar y demostrar.</p>
</div>
<div class="mt-10 grid lg:grid-cols-5 gap-8 items-start">
<div class="lg:col-span-3 rounded-2xl border border-neutral-200 bg-white p-5 sm:p-7">
<h3 class="font-semibold tracking-tight">The five-step method</h3>
<div class="mt-6 space-y-5">
<div class="flex gap-4"><span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-ink text-white font-mono text-xs">1</span><div><h4 class="font-medium">Specify the language</h4><p class="mt-1 text-sm text-neutral-600 leading-relaxed">Write the alphabet and a mathematical definition of L. Avoid ambiguous phrases such as “valid strings”.</p></div></div>
<div class="flex gap-4"><span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-ink text-white font-mono text-xs">2</span><div><h4 class="font-medium">Identify the required memory</h4><p class="mt-1 text-sm text-neutral-600 leading-relaxed">If a finite summary is enough, use a DFA. If you must match or nest, think about a stack.</p></div></div>
<div class="flex gap-4"><span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-ink text-white font-mono text-xs">3</span><div><h4 class="font-medium">Define the configuration</h4><p class="mt-1 text-sm text-neutral-600 leading-relaxed">State the head position, current state and the symbols left to read or stored in memory.</p></div></div>
<div class="flex gap-4"><span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-ink text-white font-mono text-xs">4</span><div><h4 class="font-medium">Trace boundary cases</h4><p class="mt-1 text-sm text-neutral-600 leading-relaxed">Test ε, the shortest valid string, a near miss and a string that breaks the rule at the first symbol.</p></div></div>
<div class="flex gap-4"><span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-leaf-600 text-white font-mono text-xs">5</span><div><h4 class="font-medium">Justify with an invariant</h4><p class="mt-1 text-sm text-neutral-600 leading-relaxed">Explain what each state or memory symbol represents after every prefix has been read.</p></div></div>
</div>
</div>
<div class="lg:col-span-2 space-y-4">
<article class="rounded-2xl border border-neutral-200 bg-neutral-50/60 p-5 sm:p-6">
<span class="font-mono text-[11px] uppercase tracking-widest text-leaf-700">Example A / DFA</span>
<h3 class="mt-2 font-semibold tracking-tight">Strings ending in 01</h3>
<p class="mt-3 text-sm text-neutral-600 leading-relaxed">For <code class="font-mono text-ink">w = 1101</code>, the trace is:</p>
<p class="mt-3 rounded-xl bg-white border border-neutral-200 p-3 font-mono text-xs leading-loose">q₀ <span class="text-neutral-400">—1→</span> q₀ <span class="text-neutral-400">—1→</span> q₀ <span class="text-neutral-400">—0→</span> q₁ <span class="text-neutral-400">—1→</span> q₂</p>
<p class="mt-3 text-xs text-neutral-500">It ends in q₂, so it accepts. The automaton only needs to remember the most relevant recent symbols.</p>
</article>
<article class="rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6">
<span class="font-mono text-[11px] uppercase tracking-widest text-leaf-700">Example B / PDA</span>
<h3 class="mt-2 font-semibold tracking-tight">The aⁿbⁿ invariant</h3>
<p class="mt-3 text-sm text-neutral-600 leading-relaxed">After reading <code class="font-mono text-ink">aⁱbʲ</code>, the stack contains exactly <code class="font-mono text-ink">Aⁱ⁻ʲ</code>. If an <code class="font-mono text-ink">a</code> appears after a <code class="font-mono text-ink">b</code>, the language's shape has already been broken.</p>
<p class="mt-3 rounded-xl bg-leaf-50 p-3 text-xs leading-relaxed text-leaf-800">For aabb: push A, A; pop A, A; only Z₀ remains, so the string is accepted.</p>
</article>
</div>
</div>
<div class="mt-8 rounded-2xl border border-alert/30 bg-red-50/50 p-5 sm:p-6">
<h3 class="font-semibold tracking-tight flex items-center gap-2"><i data-lucide="triangle-alert" class="w-4 h-4 text-alert" stroke-width="1.5"></i>Common mistakes to avoid</h3>
<div class="mt-4 grid md:grid-cols-2 gap-x-8 gap-y-3 text-sm text-neutral-600">
<p><strong class="text-ink">Confusing acceptance with halting:</strong> a TM may halt and reject; halting does not mean accepting.</p>
<p><strong class="text-ink">Counting with a DFA:</strong> an arbitrary count cannot fit in finite memory.</p>
<p><strong class="text-ink">Forgetting ε:</strong> the empty string may belong to the language and should be tested separately.</p>
<p><strong class="text-ink">Drawing without an invariant:</strong> a nice diagram does not prove that it covers every string.</p>
</div>
</div>
<div class="mt-8 grid md:grid-cols-2 gap-4">
<article class="rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6">
<h3 class="font-semibold tracking-tight flex items-center gap-2"><i data-lucide="sigma" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i>Proof toolkit</h3>
<div class="mt-4 space-y-3 text-sm text-neutral-600 leading-relaxed">
<p><strong class="text-ink">Induction:</strong> prove a base case and show that each step preserves the property.</p>
<p><strong class="text-ink">Pumping lemma:</strong> use it to show that a language cannot be regular or context-free.</p>
<p><strong class="text-ink">Closure:</strong> if a family is closed under union, complement or intersection, you can build new languages.</p>
<p><strong class="text-ink">Reduction:</strong> transform a known problem into the one you are analyzing; if the first is impossible, so is the second.</p>
</div>
</article>
<article class="rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6">
<h3 class="font-semibold tracking-tight flex items-center gap-2"><i data-lucide="gauge" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i>Power and cost are different</h3>
<div class="mt-4 divide-y divide-neutral-100 text-sm">
<div class="flex items-start justify-between gap-4 py-3 first:pt-0"><span class="font-mono text-leaf-700">DFA</span><span class="text-right text-neutral-600">reads n symbols in O(n) and uses constant memory.</span></div>
<div class="flex items-start justify-between gap-4 py-3"><span class="font-mono text-leaf-700">Stack</span><span class="text-right text-neutral-600">push, pop and peek cost O(1); traversing costs O(n).</span></div>
<div class="flex items-start justify-between gap-4 py-3"><span class="font-mono text-leaf-700">TM</span><span class="text-right text-neutral-600">can solve more, but runtime depends on the program and may not halt.</span></div>
</div>
<p class="mt-4 rounded-xl bg-neutral-50 p-3 text-xs leading-relaxed text-neutral-600">More memory expands the class of languages you can recognize; it does not guarantee a fast algorithm.</p>
</article>
</div>
</div>
</section>
<!-- EDITOR -->
<section id="editor" class="border-t border-neutral-200 scroll-mt-16">
<div class="max-w-6xl mx-auto px-5 py-16 md:py-24">
<div class="max-w-2xl">
<span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-leaf-700">
<i data-lucide="pencil-ruler" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="edKicker">Construye el tuyo</span>
</span>
<h2 class="mt-3 text-3xl md:text-4xl font-semibold tracking-tight" data-i18n="edTitle">Editor de autómatas</h2>
<p class="mt-4 text-neutral-600 leading-relaxed">
<span data-i18n="edDesc1">Crea estados, conéctalos con transiciones 0/1, marca el inicial (doble clic) y los de aceptación.</span>
<span class="text-alert" data-i18n="edDesc2">Tu autómata se guarda automáticamente</span>
<span data-i18n="edDesc3">y puedes exportarlo o importarlo como JSON.</span>
</p>
</div>
<div class="mt-10 rounded-2xl border border-neutral-200 bg-white overflow-hidden shadow-sm">
<!-- barra de herramientas -->
<div class="flex flex-wrap items-center gap-1.5 px-4 py-3 border-b border-neutral-200 bg-neutral-50/60">
<button data-edmode="move" onclick="edSetMode('move')" class="ed-mbtn inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium"><i data-lucide="mouse-pointer-2" class="w-3.5 h-3.5" stroke-width="1.5"></i><span data-i18n="edMv">Mover</span></button>
<button data-edmode="link" onclick="edSetMode('link')" class="ed-mbtn inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium"><i data-lucide="spline" class="w-3.5 h-3.5" stroke-width="1.5"></i><span data-i18n="edLn">Conectar</span></button>
<button data-edmode="accept" onclick="edSetMode('accept')" class="ed-mbtn inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium"><i data-lucide="circle-dot" class="w-3.5 h-3.5" stroke-width="1.5"></i><span data-i18n="edAc">Aceptar</span></button>
<button data-edmode="del" onclick="edSetMode('del')" class="ed-mbtn inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium"><i data-lucide="eraser" class="w-3.5 h-3.5" stroke-width="1.5"></i><span data-i18n="edDl">Borrar</span></button>
<span class="mx-1 h-5 w-px bg-neutral-300"></span>
<button onclick="edAddNode()" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-leaf-600 text-white hover:bg-leaf-700 transition-colors"><i data-lucide="plus" class="w-3.5 h-3.5" stroke-width="1.5"></i><span data-i18n="edAdd">Estado</span></button>
<button onclick="edLoadExample()" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-neutral-300 hover:border-leaf-600 hover:text-leaf-700 transition-colors"><i data-lucide="shapes" class="w-3.5 h-3.5" stroke-width="1.5"></i><span data-i18n="edEx">Ejemplo</span></button>
<button onclick="edClear()" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-neutral-300 hover:border-alert hover:text-alert transition-colors"><i data-lucide="trash-2" class="w-3.5 h-3.5" stroke-width="1.5"></i><span data-i18n="edClr">Limpiar</span></button>
<button onclick="edToggleIO()" class="ml-auto inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-neutral-300 hover:border-ink transition-colors"><i data-lucide="file-json-2" class="w-3.5 h-3.5" stroke-width="1.5"></i>JSON</button>
</div>
<!-- lienzo -->
<div id="edCanvas" class="relative h-[380px] sm:h-[460px] bg-white touch-none select-none overflow-hidden">
<svg id="edSvg" class="absolute inset-0 w-full h-full pointer-events-none"></svg>
<div id="edChips" class="absolute inset-0"></div>
<div id="edNodesLayer" class="absolute inset-0"></div>
<div id="edHint" class="absolute inset-0 flex items-center justify-center pointer-events-none">
<div class="text-center">
<i data-lucide="mouse-pointer-click" class="w-6 h-6 text-neutral-300 mx-auto" stroke-width="1.5"></i>
<p class="mt-2 text-sm text-neutral-400 font-mono" data-i18n="edHintTxt">clic para crear estados · arrastra para mover</p>
</div>
</div>
<div id="edPicker" class="hidden absolute z-20 flex items-center gap-1 p-1.5 rounded-xl bg-white border border-neutral-200 shadow-lg">
<span id="edPickLbl" class="text-[11px] font-mono text-neutral-500 mr-1 whitespace-nowrap"></span>
<button onclick="edCreateEdge('0')" class="px-2.5 py-1 rounded-lg border border-neutral-300 text-xs font-mono hover:border-leaf-600 hover:text-leaf-700">0</button>
<button onclick="edCreateEdge('1')" class="px-2.5 py-1 rounded-lg border border-neutral-300 text-xs font-mono hover:border-leaf-600 hover:text-leaf-700">1</button>
<button onclick="edCreateEdge('01')" class="px-2.5 py-1 rounded-lg border border-neutral-300 text-xs font-mono hover:border-leaf-600 hover:text-leaf-700">0·1</button>
<button onclick="edCancelLink()" class="px-1.5 py-1 rounded-lg text-neutral-400 hover:text-alert"><i data-lucide="x" class="w-3.5 h-3.5" stroke-width="1.5"></i></button>
</div>
</div>
<!-- prueba -->
<div class="px-4 sm:px-5 py-4 border-t border-neutral-200 space-y-3">
<div class="flex flex-col sm:flex-row gap-2">
<input id="edTestInput" type="text" maxlength="14" placeholder="0101"
onkeydown="if(event.key==='Enter')edRunTest()"
class="flex-1 min-w-0 px-4 py-2.5 rounded-xl border border-neutral-300 bg-white font-mono text-sm focus:outline-none focus:ring-2 focus:ring-leaf-600 focus:border-transparent placeholder:text-neutral-400" />
<button onclick="edRunTest()" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-ink text-white text-sm font-medium hover:bg-neutral-800 active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 focus-visible:ring-offset-2 transition-all">
<i data-lucide="play" class="w-4 h-4" stroke-width="1.5"></i> <span data-i18n="runBtn">Ejecutar</span>
</button>
<button onclick="edTestReset()" class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-neutral-300 text-sm font-medium hover:border-leaf-600 hover:text-leaf-700 transition-colors">
<i data-lucide="rotate-ccw" class="w-4 h-4" stroke-width="1.5"></i>
</button>
</div>
<div class="flex flex-wrap gap-1.5 min-h-[32px]" id="edTestTape"></div>
<p id="edTestMsg" class="text-sm font-mono min-h-[20px] text-neutral-500"> </p>
</div>
<!-- import / export -->
<div id="edIoPanel" class="hidden px-4 sm:px-5 py-4 border-t border-neutral-200 bg-neutral-50/60 space-y-2">
<textarea id="edIoText" rows="5" spellcheck="false" class="w-full px-3 py-2 rounded-xl border border-neutral-300 bg-white font-mono text-xs focus:outline-none focus:ring-2 focus:ring-leaf-600 focus:border-transparent"></textarea>
<div class="flex flex-wrap gap-2">
<button onclick="edDoExport()" class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg bg-ink text-white text-xs font-medium hover:bg-neutral-800 transition-colors"><i data-lucide="clipboard-copy" class="w-3.5 h-3.5" stroke-width="1.5"></i><span data-i18n="ioCopy">Exportar al portapapeles</span></button>
<button onclick="edDoImport()" class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg border border-neutral-300 text-xs font-medium hover:border-leaf-600 hover:text-leaf-700 transition-colors"><i data-lucide="clipboard-paste" class="w-3.5 h-3.5" stroke-width="1.5"></i><span data-i18n="ioImport">Importar JSON</span></button>
<button onclick="edToggleIO()" class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-xs font-medium text-neutral-500 hover:text-ink transition-colors"><span data-i18n="ioClose">Cerrar</span></button>
<span id="edIoMsg" class="text-xs font-mono text-leaf-700 self-center ml-1"> </span>
</div>
</div>
</div>
<p class="mt-3 text-xs font-mono text-neutral-400 text-center" data-i18n="edLegend">doble clic sobre un estado → marcarlo como inicial · clic en la etiqueta de una transición (modo borrar) para eliminarla</p>
</div>
</section>
<!-- TURING -->
<section id="turing" class="border-t border-neutral-200 bg-neutral-50/60 scroll-mt-16">
<div class="max-w-6xl mx-auto px-5 py-16 md:py-24">
<div class="max-w-2xl">
<span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-leaf-700">
<i data-lucide="cpu" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="tmKicker">El modelo fundacional · 1936</span>
</span>
<h2 class="mt-3 text-3xl md:text-4xl font-semibold tracking-tight" data-i18n="tmTitle">Máquina de Turing</h2>
<p class="mt-4 text-neutral-600 leading-relaxed">
<span data-i18n="tmDesc1">Una cinta infinita, un cabezal que lee/escribe y un conjunto de reglas. Con solo eso,</span>
<span class="text-alert" data-i18n="tmDesc2">cualquier problema computable puede resolverse</span>
<span data-i18n="tmDesc3">— y también quedan definidos los problemas indecidibles, como el problema de la parada.</span>
</p>
</div>
<div class="mt-10 grid lg:grid-cols-5 gap-8 items-start">
<!-- Cinta -->
<div class="lg:col-span-3 rounded-2xl border border-neutral-200 bg-white p-5 sm:p-8 overflow-hidden">
<label class="block text-xs font-medium text-neutral-500 uppercase tracking-wide mb-2" data-i18n="tapeLabel">Escribe en las celdas y ejecuta · número inicial:</label>
<div class="overflow-x-auto pb-2">
<div id="tmTape" class="flex gap-px min-w-max"></div>
</div>
<div class="mt-6 grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
<div class="rounded-xl border border-neutral-200 px-3 py-2.5">
<p class="text-[11px] uppercase tracking-wide text-neutral-400" data-i18n="tmStateL">Estado</p>
<p id="tmState" class="font-mono font-medium text-leaf-700">q₀</p>
</div>
<div class="rounded-xl border border-neutral-200 px-3 py-2.5">
<p class="text-[11px] uppercase tracking-wide text-neutral-400" data-i18n="tmStepL">Paso</p>
<p id="tmStep" class="font-mono font-medium">0</p>
</div>
<div class="rounded-xl border border-neutral-200 px-3 py-2.5">
<p class="text-[11px] uppercase tracking-wide text-neutral-400" data-i18n="tmRuleL">Regla aplicada</p>
<p id="tmRule" class="font-mono font-medium truncate">—</p>
</div>
<div class="rounded-xl border border-neutral-200 px-3 py-2.5">
<p class="text-[11px] uppercase tracking-wide text-neutral-400" data-i18n="tmResultL">Resultado</p>
<p id="tmResult" class="font-mono font-medium text-neutral-400" data-i18n="tmWaiting">en espera</p>
</div>
</div>
<div class="mt-6 flex flex-wrap gap-2">
<button onclick="tmStepOnce()" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-neutral-300 text-sm font-medium hover:border-leaf-600 hover:text-leaf-700 active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 focus-visible:ring-offset-2 transition-all">
<i data-lucide="redo" class="w-4 h-4" stroke-width="1.5"></i> <span data-i18n="stepBtn">Paso</span>
</button>
<button id="tmPlayBtn" onclick="tmTogglePlay()" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-leaf-600 text-white text-sm font-medium hover:bg-leaf-700 active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 focus-visible:ring-offset-2 transition-all">
<i data-lucide="play" class="w-4 h-4" stroke-width="1.5"></i> <span id="tmPlayLabel" data-i18n="autoBtn">Auto</span>
</button>
<button onclick="tmReset()" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-neutral-300 text-sm font-medium hover:border-leaf-600 hover:text-leaf-700 active:scale-[0.98] outline-none focus-visible:ring-2 focus-visible:ring-leaf-600 focus-visible:ring-offset-2 transition-all">
<i data-lucide="rotate-ccw" class="w-4 h-4" stroke-width="1.5"></i> <span data-i18n="resetBtn">Reiniciar</span>
</button>
</div>
</div>
<!-- Explicación -->
<div class="lg:col-span-2 space-y-4">
<div class="rounded-2xl border border-neutral-200 bg-white p-5">
<h3 class="font-semibold tracking-tight flex items-center gap-2 text-sm">
<i data-lucide="list-plus" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i> <span data-i18n="progLoaded">Programa cargado</span>
</h3>
<p class="mt-2 text-sm text-neutral-600 leading-relaxed" data-i18n="progDesc">Esta máquina incrementa un número binario en 1. Recorre la cinta hasta el final y suma con acarreo hacia la izquierda.</p>
<p id="tmCode" class="mt-3 font-mono text-xs leading-loose bg-neutral-50 border border-neutral-100 rounded-lg p-3"></p>
</div>
<div class="rounded-2xl border border-neutral-200 bg-white p-5">
<h3 class="font-semibold tracking-tight flex items-center gap-2 text-sm">
<i data-lucide="lightbulb" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i> <span data-i18n="whyTitle">¿Por qué importa?</span>
</h3>
<p class="mt-2 text-sm text-neutral-600 leading-relaxed">
<span data-i18n="whyDesc1">La tesis de Church-Turing sostiene que nada que sea «computable» supera a esta máquina simple.</span>
<span class="text-alert" data-i18n="whyDesc2">Todo tu ordenador es, en esencia, una máquina de Turing muy rápida.</span>
</p>
</div>
</div>
</div>
</div>
</section>
<!-- JERARQUÍA -->
<section id="jerarquia" class="border-t border-neutral-200 scroll-mt-16">
<div class="max-w-6xl mx-auto px-5 py-16 md:py-24">
<div class="max-w-2xl">
<span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-leaf-700">
<i data-lucide="network" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="chKicker">Panorama</span>
</span>
<h2 class="mt-3 text-3xl md:text-4xl font-semibold tracking-tight" data-i18n="chTitle">Jerarquía de Chomsky</h2>
<p class="mt-4 text-neutral-600 leading-relaxed">
<span data-i18n="chDesc1">Cada tipo de gramática tiene su autómata asociado.</span>
<span class="text-alert" data-i18n="chDesc2">A más potencia, más coste de cómputo.</span>
</p>
</div>
<div class="mt-10 overflow-x-auto rounded-2xl border border-neutral-200">
<table class="w-full min-w-[720px] text-sm">
<thead>
<tr class="bg-neutral-50 border-b border-neutral-200 text-left text-xs uppercase tracking-wide text-neutral-500">
<th class="px-5 py-3.5 font-medium" data-i18n="thType">Tipo</th>
<th class="px-5 py-3.5 font-medium" data-i18n="thGrammar">Gramática</th>
<th class="px-5 py-3.5 font-medium" data-i18n="thAutomaton">Autómata</th>
<th class="px-5 py-3.5 font-medium" data-i18n="thExample">Ejemplo de lenguaje</th>
</tr>
</thead>
<tbody class="divide-y divide-neutral-200 bg-white">
<tr class="hover:bg-leaf-50/50 transition-colors cursor-default">
<td class="px-5 py-4"><span class="inline-flex items-center gap-2 font-medium"><i data-lucide="type" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i> Type 3</span></td>
<td class="px-5 py-4 ch-g">Regular</td>
<td class="px-5 py-4 font-mono text-xs">AFD / AFN</td>
<td class="px-5 py-4 font-mono text-xs text-neutral-500">a*b | (ab)*</td>
</tr>
<tr class="hover:bg-leaf-50/50 transition-colors cursor-default">
<td class="px-5 py-4"><span class="inline-flex items-center gap-2 font-medium"><i data-lucide="braces" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i> Type 2</span></td>
<td class="px-5 py-4 ch-g">Context-free</td>
<td class="px-5 py-4 font-mono text-xs ch-a">Pushdown automaton</td>
<td class="px-5 py-4 font-mono text-xs text-neutral-500">aⁿbⁿ</td>
</tr>
<tr class="hover:bg-leaf-50/50 transition-colors cursor-default">
<td class="px-5 py-4"><span class="inline-flex items-center gap-2 font-medium"><i data-lucide="square-stack" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i> Type 1</span></td>
<td class="px-5 py-4 ch-g">Context-sensitive</td>
<td class="px-5 py-4 font-mono text-xs ch-a">Linear bounded automaton</td>
<td class="px-5 py-4 font-mono text-xs text-neutral-500">aⁿbⁿcⁿ</td>
</tr>
<tr class="hover:bg-leaf-50/50 transition-colors cursor-default">
<td class="px-5 py-4"><span class="inline-flex items-center gap-2 font-medium"><i data-lucide="infinity" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i> Type 0</span></td>
<td class="px-5 py-4 ch-g">Unrestricted</td>
<td class="px-5 py-4 font-mono text-xs ch-a">Turing machine</td>
<td class="px-5 py-4 font-mono text-xs text-neutral-500" data-i18n="chEx0">todo lo decidible… y más</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6 flex flex-col sm:flex-row items-start gap-4">
<i data-lucide="octagon-alert" class="w-5 h-5 shrink-0 text-alert mt-0.5" stroke-width="1.5"></i>
<p class="text-sm text-neutral-600 leading-relaxed">
<strong class="text-ink" data-i18n="limitT">El límite existe:</strong>
<span class="text-alert" data-i18n="limitB">hay problemas que ninguna máquina de Turing puede resolver</span>
<span data-i18n="limitC"> — como decidir si un programa arbitrario termina (problema de la parada, Alan Turing, 1936). No es falta de velocidad ni memoria: es una imposibilidad matemática.</span>
</p>
</div>
</div>
</section>
<!-- GLOSARIO Y PRÁCTICA -->
<section id="glosario" class="border-t border-neutral-200 bg-neutral-50/60 scroll-mt-16">
<div class="max-w-6xl mx-auto px-5 py-16 md:py-24">
<div class="max-w-3xl">
<span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-leaf-700">
<i data-lucide="library" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="glossaryKicker">Consulta rápida</span>
</span>
<h2 class="mt-3 text-3xl md:text-4xl font-semibold tracking-tight" data-i18n="glossaryTitle">Glosario de bolsillo</h2>
<p class="mt-4 text-neutral-600 leading-relaxed" data-i18n="glossaryDesc">Las palabras que aparecen una y otra vez en teoría de la computación, explicadas en una línea para que puedas volver a ellas mientras resuelves.</p>
</div>
<div class="mt-10 grid study-glossary-grid gap-3">
<article class="rounded-2xl border border-neutral-200 bg-white p-4"><h3 class="font-mono text-sm text-leaf-700">Σ · alphabet</h3><p class="mt-2 text-sm text-neutral-600 leading-relaxed">Finite set of symbols allowed as input.</p></article>
<article class="rounded-2xl border border-neutral-200 bg-white p-4"><h3 class="font-mono text-sm text-leaf-700">Σ* · closure</h3><p class="mt-2 text-sm text-neutral-600 leading-relaxed">Every finite string over Σ, including the empty string ε.</p></article>
<article class="rounded-2xl border border-neutral-200 bg-white p-4"><h3 class="font-mono text-sm text-leaf-700">ε · empty string</h3><p class="mt-2 text-sm text-neutral-600 leading-relaxed">A string with no symbols; its length is 0, but it is still a string.</p></article>
<article class="rounded-2xl border border-neutral-200 bg-white p-4"><h3 class="font-mono text-sm text-leaf-700">L · language</h3><p class="mt-2 text-sm text-neutral-600 leading-relaxed">Subset of Σ*. The recognition problem asks whether w ∈ L.</p></article>
<article class="rounded-2xl border border-neutral-200 bg-white p-4"><h3 class="font-mono text-sm text-leaf-700">δ · transition</h3><p class="mt-2 text-sm text-neutral-600 leading-relaxed">Rule that gives the next state or configuration after reading a symbol.</p></article>
<article class="rounded-2xl border border-neutral-200 bg-white p-4"><h3 class="font-mono text-sm text-leaf-700">State</h3><p class="mt-2 text-sm text-neutral-600 leading-relaxed">Summary of the information the model keeps at a given moment.</p></article>
<article class="rounded-2xl border border-neutral-200 bg-white p-4"><h3 class="font-mono text-sm text-leaf-700">Determinism</h3><p class="mt-2 text-sm text-neutral-600 leading-relaxed">From a given configuration and symbol, there is at most one next action.</p></article>
<article class="rounded-2xl border border-neutral-200 bg-white p-4"><h3 class="font-mono text-sm text-leaf-700">Invariant</h3><p class="mt-2 text-sm text-neutral-600 leading-relaxed">Property that remains true after every execution step.</p></article>
<article class="rounded-2xl border border-neutral-200 bg-white p-4"><h3 class="font-mono text-sm text-leaf-700">Decidable</h3><p class="mt-2 text-sm text-neutral-600 leading-relaxed">A machine exists that always halts and answers yes or no correctly.</p></article>
<article class="rounded-2xl border border-neutral-200 bg-white p-4"><h3 class="font-mono text-sm text-leaf-700">Recognizable</h3><p class="mt-2 text-sm text-neutral-600 leading-relaxed">A machine accepts the language's strings, although it may not halt outside the language.</p></article>
<article class="rounded-2xl border border-neutral-200 bg-white p-4"><h3 class="font-mono text-sm text-leaf-700">Closure</h3><p class="mt-2 text-sm text-neutral-600 leading-relaxed">Property of a language family that remains in the family after an operation.</p></article>
<article class="rounded-2xl border border-neutral-200 bg-white p-4"><h3 class="font-mono text-sm text-leaf-700">Reduction</h3><p class="mt-2 text-sm text-neutral-600 leading-relaxed">Transformation showing that solving one problem would let us solve another.</p></article>
</div>
<div id="practica" class="mt-14 scroll-mt-24">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div class="max-w-2xl">
<span class="font-mono text-[11px] uppercase tracking-widest text-leaf-700">Guided practice</span>
<h2 class="mt-2 text-2xl md:text-3xl font-semibold tracking-tight" data-i18n="practiceTitle">Banco de ejercicios razonados</h2>
<p class="mt-3 text-neutral-600 leading-relaxed" data-i18n="practiceDesc">Intenta responder antes de abrir la solución. La explicación importa tanto como el resultado.</p>
</div>
<span class="inline-flex items-center gap-2 text-xs font-mono text-neutral-500"><i data-lucide="lock-open" class="w-3.5 h-3.5" stroke-width="1.5"></i> expandable solutions</span>
</div>
<div class="mt-7 grid study-practice-grid gap-3">
<details class="group rounded-2xl border border-neutral-200 bg-white p-5">
<summary class="cursor-pointer list-none flex items-start gap-3"><span class="font-mono text-xs text-leaf-700">01</span><span class="font-medium">Does 0101 belong to the language of strings ending in 01?</span><span class="ml-auto text-neutral-400 group-open:rotate-45 transition-transform">＋</span></summary>
<p class="mt-4 ml-7 border-l-2 border-leaf-600 pl-4 text-sm text-neutral-600 leading-relaxed"><strong class="text-ink">Yes.</strong> The string ends in 01 and the DFA trace ends in q₂. Its length and earlier symbols do not change that condition.</p>
</details>
<details class="group rounded-2xl border border-neutral-200 bg-white p-5">
<summary class="cursor-pointer list-none flex items-start gap-3"><span class="font-mono text-xs text-leaf-700">02</span><span class="font-medium">Does aabbb belong to {aⁿbⁿ : n ≥ 0}?</span><span class="ml-auto text-neutral-400 group-open:rotate-45 transition-transform">＋</span></summary>
<p class="mt-4 ml-7 border-l-2 border-leaf-600 pl-4 text-sm text-neutral-600 leading-relaxed"><strong class="text-ink">No.</strong> It has two a symbols and three b symbols. The PDA runs out of stack tokens before reading the last b; the counts must match.</p>
</details>
<details class="group rounded-2xl border border-neutral-200 bg-white p-5">
<summary class="cursor-pointer list-none flex items-start gap-3"><span class="font-mono text-xs text-leaf-700">03</span><span class="font-medium">Design a DFA for strings with an even number of 1s.</span><span class="ml-auto text-neutral-400 group-open:rotate-45 transition-transform">＋</span></summary>
<p class="mt-4 ml-7 border-l-2 border-leaf-600 pl-4 text-sm text-neutral-600 leading-relaxed">Use two states: <code class="font-mono text-ink">q_even</code> (initial and accepting) and <code class="font-mono text-ink">q_odd</code>. On 0, stay in the same state; on 1, switch between them.</p>
</details>
<details class="group rounded-2xl border border-neutral-200 bg-white p-5">
<summary class="cursor-pointer list-none flex items-start gap-3"><span class="font-mono text-xs text-leaf-700">04</span><span class="font-medium">What does the stack represent after reading aaabb?</span><span class="ml-auto text-neutral-400 group-open:rotate-45 transition-transform">＋</span></summary>
<p class="mt-4 ml-7 border-l-2 border-leaf-600 pl-4 text-sm text-neutral-600 leading-relaxed"><code class="font-mono text-ink">A</code> remains above the bottom marker <code class="font-mono text-ink">Z₀</code>: three tokens were pushed and two were popped. The string is not accepted yet because one b is missing.</p>
</details>
<details class="group rounded-2xl border border-neutral-200 bg-white p-5">
<summary class="cursor-pointer list-none flex items-start gap-3"><span class="font-mono text-xs text-leaf-700">05</span><span class="font-medium">What does the TM produce when incrementing 111?</span><span class="ml-auto text-neutral-400 group-open:rotate-45 transition-transform">＋</span></summary>
<p class="mt-4 ml-7 border-l-2 border-leaf-600 pl-4 text-sm text-neutral-600 leading-relaxed"><strong class="text-ink">1000.</strong> The machine changes each 1 to 0 while carrying left; when it reaches the blank, it writes a 1.</p>
</details>
<details class="group rounded-2xl border border-neutral-200 bg-white p-5">
<summary class="cursor-pointer list-none flex items-start gap-3"><span class="font-mono text-xs text-leaf-700">06</span><span class="font-medium">What is the cost of push, pop and peek?</span><span class="ml-auto text-neutral-400 group-open:rotate-45 transition-transform">＋</span></summary>
<p class="mt-4 ml-7 border-l-2 border-leaf-600 pl-4 text-sm text-neutral-600 leading-relaxed">In a correctly implemented stack, all three operations are <code class="font-mono text-ink">O(1)</code>. Traversing or copying the entire stack costs <code class="font-mono text-ink">O(n)</code>.</p>
</details>
</div>
</div>
<div class="mt-10 grid study-resource-grid gap-4">
<article class="rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6">
<h3 class="font-semibold tracking-tight flex items-center gap-2"><i data-lucide="calendar-days" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i>Suggested 60-minute route</h3>
<ol class="mt-4 space-y-2 text-sm text-neutral-600 leading-relaxed">
<li><span class="font-mono text-leaf-700">15 min</span> · Read the basics and write three languages with their alphabets.</li>
<li><span class="font-mono text-leaf-700">15 min</span> · Run one accepted and one rejected string in each simulator.</li>
<li><span class="font-mono text-leaf-700">15 min</span> · Build a DFA in the editor and test boundary cases.</li>
<li><span class="font-mono text-leaf-700">15 min</span> · Solve two exercises without looking at the solution and explain the invariant.</li>
</ol>
</article>
<article class="rounded-2xl border border-neutral-200 bg-white p-5 sm:p-6">
<h3 class="font-semibold tracking-tight flex items-center gap-2"><i data-lucide="book-marked" class="w-4 h-4 text-leaf-600" stroke-width="1.5"></i>Go deeper</h3>
<p class="mt-3 text-sm text-neutral-600 leading-relaxed">Once this page feels familiar, compare your solutions with reference texts: <em>Introduction to the Theory of Computation</em> by Michael Sipser, <em>Introduction to Automata Theory, Languages, and Computation</em> by Hopcroft, Motwani and Ullman, or <em>An Introduction to Formal Languages and Automata</em> by Peter Linz.</p>
<p class="mt-3 text-xs text-neutral-500">Community tip: share the trace and reasoning, not only the final answer.</p>
</article>
</div>
</div>
</section>
<!-- RETOS -->
<section id="retos" class="border-t border-neutral-200 bg-neutral-50/60 scroll-mt-16">
<div class="max-w-6xl mx-auto px-5 py-16 md:py-24">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
<div class="max-w-xl">
<span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-leaf-700">
<i data-lucide="flag" class="w-3.5 h-3.5" stroke-width="1.5"></i> <span data-i18n="retoKicker">Ponte a prueba</span>
</span>