rafaguiar-dev.github.io/template.html at main · rafaguiar-dev/rafaguiar-dev.github.io · GitHub

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
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Rafael Aguiar, AI Automation Engineer. Transformo copy em vídeo pronto e construo os pipelines que fazem isso em escala.">
<meta name="theme-color" content="#0A0A0A">
<meta name="author" content="Rafael Aguiar">
<meta name="copyright" content="© 2026 Rafael Aguiar. All rights reserved.">
<title>Rafael Aguiar · Vídeo com IA e Automação</title>
<!-- ícone: um play feito de pixels roxos com a sombra ciano da marca (vídeo + código).
     O SVG vai embutido para funcionar também no mockup.html; os PNG ficam em docs/. -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iNyIgZmlsbD0iIzBBMEEwQSIvPjxyZWN0IHg9Ii41IiB5PSIuNSIgd2lkdGg9IjMxIiBoZWlnaHQ9IjMxIiByeD0iNi41IiBmaWxsPSJub25lIiBzdHJva2U9IiNCRjg1RjkiIHN0cm9rZS1vcGFjaXR5PSIuNDUiLz48cmVjdCB4PSIxMS44MiIgeT0iNS43MiIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iIzJERDRCRiIgZmlsbC1vcGFjaXR5PSIwLjMzIi8+PHJlY3QgeD0iMTEuODIiIHk9IjguMTgiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiMyREQ0QkYiIGZpbGwtb3BhY2l0eT0iMC4zMyIvPjxyZWN0IHg9IjE0LjI3IiB5PSI4LjE4IiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjMkRENEJGIiBmaWxsLW9wYWNpdHk9IjAuMzkiLz48cmVjdCB4PSIxMS44MiIgeT0iMTAuNjIiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiMyREQ0QkYiIGZpbGwtb3BhY2l0eT0iMC4zMyIvPjxyZWN0IHg9IjE0LjI3IiB5PSIxMC42MiIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iIzJERDRCRiIgZmlsbC1vcGFjaXR5PSIwLjM5Ii8+PHJlY3QgeD0iMTYuNzMiIHk9IjEwLjYyIiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjMkRENEJGIiBmaWxsLW9wYWNpdHk9IjAuNDQiLz48cmVjdCB4PSIxMS44MiIgeT0iMTMuMDciIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiMyREQ0QkYiIGZpbGwtb3BhY2l0eT0iMC4zMyIvPjxyZWN0IHg9IjE0LjI3IiB5PSIxMy4wNyIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iIzJERDRCRiIgZmlsbC1vcGFjaXR5PSIwLjM5Ii8+PHJlY3QgeD0iMTYuNzMiIHk9IjEzLjA3IiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjMkRENEJGIiBmaWxsLW9wYWNpdHk9IjAuNDQiLz48cmVjdCB4PSIxOS4xOCIgeT0iMTMuMDciIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiMyREQ0QkYiIGZpbGwtb3BhY2l0eT0iMC41MCIvPjxyZWN0IHg9IjExLjgyIiB5PSIxNS41MyIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iIzJERDRCRiIgZmlsbC1vcGFjaXR5PSIwLjMzIi8+PHJlY3QgeD0iMTQuMjciIHk9IjE1LjUzIiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjMkRENEJGIiBmaWxsLW9wYWNpdHk9IjAuMzkiLz48cmVjdCB4PSIxNi43MyIgeT0iMTUuNTMiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiMyREQ0QkYiIGZpbGwtb3BhY2l0eT0iMC40NCIvPjxyZWN0IHg9IjE5LjE4IiB5PSIxNS41MyIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iIzJERDRCRiIgZmlsbC1vcGFjaXR5PSIwLjUwIi8+PHJlY3QgeD0iMjEuNjIiIHk9IjE1LjUzIiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjMkRENEJGIiBmaWxsLW9wYWNpdHk9IjAuNTUiLz48cmVjdCB4PSIxMS44MiIgeT0iMTcuOTgiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiMyREQ0QkYiIGZpbGwtb3BhY2l0eT0iMC4zMyIvPjxyZWN0IHg9IjE0LjI3IiB5PSIxNy45OCIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iIzJERDRCRiIgZmlsbC1vcGFjaXR5PSIwLjM5Ii8+PHJlY3QgeD0iMTYuNzMiIHk9IjE3Ljk4IiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjMkRENEJGIiBmaWxsLW9wYWNpdHk9IjAuNDQiLz48cmVjdCB4PSIxOS4xOCIgeT0iMTcuOTgiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiMyREQ0QkYiIGZpbGwtb3BhY2l0eT0iMC41MCIvPjxyZWN0IHg9IjExLjgyIiB5PSIyMC40MyIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iIzJERDRCRiIgZmlsbC1vcGFjaXR5PSIwLjMzIi8+PHJlY3QgeD0iMTQuMjciIHk9IjIwLjQzIiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjMkRENEJGIiBmaWxsLW9wYWNpdHk9IjAuMzkiLz48cmVjdCB4PSIxNi43MyIgeT0iMjAuNDMiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiMyREQ0QkYiIGZpbGwtb3BhY2l0eT0iMC40NCIvPjxyZWN0IHg9IjExLjgyIiB5PSIyMi44OCIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iIzJERDRCRiIgZmlsbC1vcGFjaXR5PSIwLjMzIi8+PHJlY3QgeD0iMTQuMjciIHk9IjIyLjg4IiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjMkRENEJGIiBmaWxsLW9wYWNpdHk9IjAuMzkiLz48cmVjdCB4PSIxMS44MiIgeT0iMjUuMzMiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiMyREQ0QkYiIGZpbGwtb3BhY2l0eT0iMC4zMyIvPjxyZWN0IHg9IjExLjA3IiB5PSI0Ljk3IiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjQkY4NUY5IiBmaWxsLW9wYWNpdHk9IjAuNjAiLz48cmVjdCB4PSIxMS4wNyIgeT0iNy40MiIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iI0JGODVGOSIgZmlsbC1vcGFjaXR5PSIwLjYwIi8+PHJlY3QgeD0iMTMuNTIiIHk9IjcuNDIiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiNCRjg1RjkiIGZpbGwtb3BhY2l0eT0iMC43MCIvPjxyZWN0IHg9IjExLjA3IiB5PSI5Ljg4IiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjQkY4NUY5IiBmaWxsLW9wYWNpdHk9IjAuNjAiLz48cmVjdCB4PSIxMy41MiIgeT0iOS44OCIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iI0JGODVGOSIgZmlsbC1vcGFjaXR5PSIwLjcwIi8+PHJlY3QgeD0iMTUuOTciIHk9IjkuODgiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiNCRjg1RjkiIGZpbGwtb3BhY2l0eT0iMC44MCIvPjxyZWN0IHg9IjExLjA3IiB5PSIxMi4zMiIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iI0JGODVGOSIgZmlsbC1vcGFjaXR5PSIwLjYwIi8+PHJlY3QgeD0iMTMuNTIiIHk9IjEyLjMyIiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjQkY4NUY5IiBmaWxsLW9wYWNpdHk9IjAuNzAiLz48cmVjdCB4PSIxNS45NyIgeT0iMTIuMzIiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiNCRjg1RjkiIGZpbGwtb3BhY2l0eT0iMC44MCIvPjxyZWN0IHg9IjE4LjQzIiB5PSIxMi4zMiIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iI0JGODVGOSIgZmlsbC1vcGFjaXR5PSIwLjkwIi8+PHJlY3QgeD0iMTEuMDciIHk9IjE0Ljc4IiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjQkY4NUY5IiBmaWxsLW9wYWNpdHk9IjAuNjAiLz48cmVjdCB4PSIxMy41MiIgeT0iMTQuNzgiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiNCRjg1RjkiIGZpbGwtb3BhY2l0eT0iMC43MCIvPjxyZWN0IHg9IjE1Ljk3IiB5PSIxNC43OCIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iI0JGODVGOSIgZmlsbC1vcGFjaXR5PSIwLjgwIi8+PHJlY3QgeD0iMTguNDMiIHk9IjE0Ljc4IiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjQkY4NUY5IiBmaWxsLW9wYWNpdHk9IjAuOTAiLz48cmVjdCB4PSIyMC44OCIgeT0iMTQuNzgiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiNCRjg1RjkiIGZpbGwtb3BhY2l0eT0iMS4wMCIvPjxyZWN0IHg9IjExLjA3IiB5PSIxNy4yMyIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iI0JGODVGOSIgZmlsbC1vcGFjaXR5PSIwLjYwIi8+PHJlY3QgeD0iMTMuNTIiIHk9IjE3LjIzIiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjQkY4NUY5IiBmaWxsLW9wYWNpdHk9IjAuNzAiLz48cmVjdCB4PSIxNS45NyIgeT0iMTcuMjMiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiNCRjg1RjkiIGZpbGwtb3BhY2l0eT0iMC44MCIvPjxyZWN0IHg9IjE4LjQzIiB5PSIxNy4yMyIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iI0JGODVGOSIgZmlsbC1vcGFjaXR5PSIwLjkwIi8+PHJlY3QgeD0iMTEuMDciIHk9IjE5LjY4IiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjQkY4NUY5IiBmaWxsLW9wYWNpdHk9IjAuNjAiLz48cmVjdCB4PSIxMy41MiIgeT0iMTkuNjgiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiNCRjg1RjkiIGZpbGwtb3BhY2l0eT0iMC43MCIvPjxyZWN0IHg9IjE1Ljk3IiB5PSIxOS42OCIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iI0JGODVGOSIgZmlsbC1vcGFjaXR5PSIwLjgwIi8+PHJlY3QgeD0iMTEuMDciIHk9IjIyLjEyIiB3aWR0aD0iMi4wNSIgaGVpZ2h0PSIyLjA1IiByeD0iLjM1IiBmaWxsPSIjQkY4NUY5IiBmaWxsLW9wYWNpdHk9IjAuNjAiLz48cmVjdCB4PSIxMy41MiIgeT0iMjIuMTIiIHdpZHRoPSIyLjA1IiBoZWlnaHQ9IjIuMDUiIHJ4PSIuMzUiIGZpbGw9IiNCRjg1RjkiIGZpbGwtb3BhY2l0eT0iMC43MCIvPjxyZWN0IHg9IjExLjA3IiB5PSIyNC41OCIgd2lkdGg9IjIuMDUiIGhlaWdodD0iMi4wNSIgcng9Ii4zNSIgZmlsbD0iI0JGODVGOSIgZmlsbC1vcGFjaXR5PSIwLjYwIi8+PC9zdmc+">
<link rel="icon" type="image/png" sizes="32x32" href="https://rafaguiar-dev.github.io/favicon-32.png">
<link rel="apple-touch-icon" href="https://rafaguiar-dev.github.io/apple-touch-icon.png">
<!-- prévia do link no WhatsApp, LinkedIn etc. -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://rafaguiar-dev.github.io/">
<meta property="og:title" content="Rafael Aguiar · Vídeo com IA e Automação">
<meta property="og:description" content="Transformo copy em vídeo pronto e construo os pipelines que fazem isso em escala.">
<meta property="og:image" content="https://rafaguiar-dev.github.io/og.png">
<meta property="og:image:width" content="1200"><meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Archivo:wght@300;400;500;600&display=swap">

<style>
/* ═══════════════════════════════════════════════════════════════════
   paleta: ascii-motion.com  (#0A0A0A / #FAFAFA / roxo 270°)
   o ciano entra só como sombra deslocada, como no logo deles.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0A0A0A; --bg-2:#111111; --card:#141414; --card-2:#1A1A1A;
  --ink:#FAFAFA; --ink-2:#A3A3A3; --ink-3:#666666;
  /* cinza so do hero: os readouts sobre o campo ASCII pediam mais presenca
     que o #666 usado no resto da pagina */
  --ink-hero:#8E8E98;
  --line:#262626; --line-2:#1C1C1C;
  --purple:#BF85F9; --purple-deep:#9938FA; --purple-dim:rgba(191,133,249,.12);
  --cyan:#2DD4BF; --ok:#4ADE80;
  --radius:8px;
  --max:1200px; --gut:clamp(18px,4.5vw,52px);
  --s--2:11px;
  --s--1:clamp(.72rem,.7rem + .1vw,.79rem);
  --s-0:clamp(.95rem,.92rem + .16vw,1.03rem);
  --s-1:clamp(1.1rem,1rem + .5vw,1.35rem);
  --s-2:clamp(1.4rem,1.15rem + 1.3vw,2.2rem);
  --s-3:clamp(1.9rem,1.35rem + 2.9vw,3.6rem);
  --s-4:clamp(2.6rem,1.2rem + 7.4vw,7rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Sem scroll-snap. Ate 'proximity' fazia a pagina puxar o scroll de volta
   quando voce parava perto do topo de uma secao — parecia travada. O encaixe
   agora so acontece quando VOCE pede: clicando um link da nav (scroll-behavior
   :smooth + scroll-margin-top pra nao ficar embaixo da barra fixa). */
.hero,section.sec{scroll-margin-top:72px}   /* 60px da barra fixa + folga */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

body{
  margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--s-0);line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;line-height:1;letter-spacing:-.045em;font-weight:800}
p{margin:0}
a{color:inherit}
.sans{font-family:"Archivo","Helvetica Neue",Arial,sans-serif}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:3px}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
::selection{background:var(--purple);color:var(--bg)}

/* ═══ barra de progresso do scroll ════════════════════════════════ */
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:90;
  background:linear-gradient(90deg,var(--purple-deep),var(--purple),var(--cyan));
  box-shadow:0 0 12px var(--purple)}

/* ═══ grade de fundo ══════════════════════════════════════════════ */
.gridbg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(130% 95% at 50% 0%,#000 10%,transparent 74%);
          mask-image:radial-gradient(130% 95% at 50% 0%,#000 10%,transparent 74%)}
main{position:relative;z-index:1}

/* ═══ nav ═════════════════════════════════════════════════════════ */
header.nav{position:sticky;top:0;z-index:70;backdrop-filter:blur(14px) saturate(150%);
  background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line-2)}
.nav-in{display:flex;align-items:center;height:60px;gap:clamp(10px,3vw,24px)}
.brand{font-size:var(--s--1);text-decoration:none;font-weight:700;letter-spacing:.04em;white-space:nowrap;
  text-shadow:1.5px 1.5px 0 var(--cyan)}
.brand span{color:var(--ink-3);text-shadow:none;font-weight:400}
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:var(--s--1);color:var(--ink-2)}
.nav-links a{text-decoration:none;position:relative;transition:color .2s}
.nav-links a::before{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;
  background:var(--purple);transition:right .28s cubic-bezier(.2,.8,.2,1)}
.nav-links a:hover,.nav-links a.here{color:var(--purple)}
.nav-links a:hover::before,.nav-links a.here::before{right:0}
@media(max-width:880px){.nav-links{display:none}}
.switches{display:flex;gap:7px;margin-left:auto}
.nav-links+.switches{margin-left:22px}
.sw{font-family:inherit;font-size:var(--s--2);letter-spacing:.08em;background:transparent;color:var(--ink-2);
  border:1px solid var(--line);padding:6px 10px;border-radius:var(--radius);cursor:pointer;transition:.2s}
.sw:hover{color:var(--purple);border-color:var(--purple);background:var(--purple-dim)}

/* Cadeado: os dois rótulos acompanham a tradução do HTML. */
.sw-lock{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px}
.sw-lock svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sw-lock [hidden]{display:none}
.sw-lock[aria-pressed="true"]{color:var(--purple)}
.lock-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sw-lock.lock-hint{animation:lock-hint 950ms ease-out 1}
@keyframes lock-hint{50%{background:var(--purple-dim);box-shadow:0 0 14px var(--purple)}}

/* ═══ botões ══════════════════════════════════════════════════════ */
.btn{font-size:var(--s--1);text-decoration:none;padding:12px 20px;border-radius:var(--radius);
  border:1px solid var(--line);transition:.22s;display:inline-flex;gap:10px;align-items:center;font-weight:500}
.btn.solid{background:var(--purple);color:#0A0A0A;border-color:var(--purple)}
.btn.solid:hover{box-shadow:0 0 28px -4px var(--purple);transform:translateY(-1px)}
.btn.ghost:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-dim)}
.btn .ar{transition:transform .25s}
.btn:hover .ar{transform:translateX(4px)}

/* ═══ HERO · ROBOT SIGNAL FIELD ════════════════════════════════════ */
.hero{position:relative;isolation:isolate;min-height:min(96vh,940px);display:flex;align-items:center;
  overflow:hidden;background:var(--bg)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,10,10,.28) 0%,rgba(10,10,10,.06) 38%,transparent 62%),
    radial-gradient(ellipse 36% 62% at 77% 46%,rgba(168,91,208,.075),transparent 72%),
    radial-gradient(ellipse 58% 82% at 78% 48%,transparent 38%,rgba(10,10,10,.08) 72%,rgba(10,10,10,.50) 112%),
    linear-gradient(180deg,rgba(10,10,10,.34),transparent 18%,transparent 76%,rgba(10,10,10,.58));
  box-shadow:inset 0 0 150px rgba(0,0,0,.24)}
#stage{position:absolute;inset:0;z-index:0}
#photo{position:absolute;filter:contrast(1.04) saturate(1.04);
  -webkit-mask-image:radial-gradient(108% 98% at 68% 46%,#000 42%,transparent 90%);
          mask-image:radial-gradient(108% 98% at 68% 46%,#000 42%,transparent 90%)}
#asciiSource{display:none}
#ascii{position:absolute;inset:0}
/* z-index 2 poe os rotulos acima do veu (::before, z-index 1). A copy do
   hero tambem e 2, mas vem depois no HTML, entao continua por cima. */
#asciiTop{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-in{position:relative;z-index:2;width:100%;padding-block:clamp(76px,10vh,124px);pointer-events:none}
.hero-in a,.hero-in button{pointer-events:auto}
.hero-copy{position:relative;width:min(740px,61vw)}
.hero-copy::before{content:"01 / LIVE SYSTEM";display:block;margin-bottom:13px;color:var(--ink-hero);
  font-size:9px;letter-spacing:.24em;font-weight:500}

.kicker{display:inline-flex;align-items:center;gap:9px;font-size:var(--s--1);color:var(--ink-2);
  padding:0;margin-bottom:24px;letter-spacing:.04em}
.kicker i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

.hero h1{font-size:var(--s-4);letter-spacing:-.06em;line-height:.84;
  text-shadow:1.5px 1.5px 0 rgba(93,58,113,.72)}
.hero h1 .l2{display:block;color:var(--purple)}
.role{margin-top:24px;font-size:clamp(.86rem,.78rem + .25vw,1rem);line-height:1.55;
  font-weight:700;letter-spacing:-.01em;padding-left:14px;
  border-left:1px solid color-mix(in srgb,var(--purple) 70%,transparent)}
.role b{color:var(--purple);font-weight:700}
.one-line{margin-top:14px;max-width:34ch;font-size:var(--s-1);font-weight:300;color:var(--ink-2);line-height:1.45}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.hero .btn{border-radius:2px;position:relative;overflow:hidden}
.hero .btn::before{content:"";position:absolute;inset:0;translate:-105% 0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transition:translate .46s ease}
.hero .btn:hover::before{translate:105% 0}
.hint{margin-top:30px;font-size:var(--s--2);color:var(--ink-hero);letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px}
.hint b{width:16px;height:1px;overflow:hidden;color:transparent;background:var(--purple);font-weight:400;
  box-shadow:8px 0 14px color-mix(in srgb,var(--purple) 60%,transparent);animation:hintline 2.8s ease-in-out infinite}
@keyframes hintline{0%,100%{transform:scaleX(.45);transform-origin:left;opacity:.55}50%{transform:scaleX(1);opacity:1}}
.core-status{position:absolute;right:var(--gut);bottom:clamp(76px,9vh,110px);z-index:3;width:clamp(170px,16vw,238px);
  display:grid;grid-template-columns:1fr auto;gap:7px 12px;color:var(--ink-hero);font-size:9px;
  letter-spacing:.16em;pointer-events:none;text-transform:uppercase}
.core-status b{color:var(--purple);font-weight:700;font-variant-numeric:tabular-nums}
.core-status i{grid-column:1/-1;height:2px;background:color-mix(in srgb,var(--purple) 16%,transparent);overflow:hidden}
.core-status em{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--purple-deep),var(--purple),var(--cyan));
  transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px var(--purple)}
.scrollcue{position:absolute;bottom:22px;left:50%;translate:-50% 0;z-index:3;
  font-size:var(--s--2);letter-spacing:.28em;color:var(--ink-hero);display:flex;flex-direction:column;
  align-items:center;gap:9px}
.scrollcue s{text-decoration:none;width:1px;height:34px;background:linear-gradient(var(--purple),transparent);
  animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:900px){
  .hero{min-height:max(820px,100svh);align-items:flex-end}
  .hero-in{padding-top:min(48vh,430px);padding-bottom:66px}
  .hero-copy{width:min(100%,620px)}
  .core-status{top:74px;right:18px;bottom:auto;width:150px}
}
@media(max-width:780px){
  .scrollcue{display:none}
  .hero::before{background:linear-gradient(180deg,transparent 0 34%,rgba(10,10,10,.68) 53%,var(--bg) 78%)}
  .hero-in{padding-top:min(44vh,390px)}
  .role{max-width:31ch;font-size:.9rem}
  .one-line{font-size:1rem}
  .hint{margin-top:24px;letter-spacing:.06em}
}

/* ═══ seções ══════════════════════════════════════════════════════ */
section.sec{padding-block:clamp(62px,9vw,120px);position:relative}
.head{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(20px,3vw,34px);
  border-bottom:1px solid var(--line-2);padding-bottom:14px}
.head .slug{font-size:var(--s--1);color:var(--purple);font-weight:500;padding:5px 13px;
  border:1px solid color-mix(in srgb,var(--purple) 34%,transparent);background:var(--purple-dim);
  border-radius:999px;line-height:1}
.head .note{font-size:var(--s--2);color:var(--ink-3);letter-spacing:.14em;margin-left:auto}
h2.t{font-size:var(--s-3);max-width:19ch}
h2.t em{font-style:normal;color:var(--ink-3)}
.sub{margin-top:14px;max-width:56ch;color:var(--ink-2);font-weight:300;font-size:var(--s-1);line-height:1.5;
  font-family:"Archivo",sans-serif}

/* ═══ marquee ═════════════════════════════════════════════════════ */
.track{overflow:hidden;border-block:1px solid var(--line-2);padding-block:12px;position:relative;z-index:1;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.track+.track{border-top:none}
.tick{display:flex;width:max-content;will-change:transform}
.tick span{padding:0 22px;font-size:var(--s--1);color:var(--ink-2);white-space:nowrap;letter-spacing:.04em}
.tick span::after{content:"/";margin-left:22px;color:var(--purple)}

/* ═══ stats com contador ══════════════════════════════════════════ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--bg);padding:clamp(18px,2.6vw,28px)}
.stat .n{font-size:var(--s-2);font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--purple)}
.stat .l{margin-top:7px;font-size:var(--s--2);color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
.tbd{border-bottom:1px dotted currentColor}
/* so para leitor de tela: entrega o numero final em vez da contagem */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ═══ 01 · /reel: a ilha de edição (v25) ══════════════════════════
   Monitor de programa à esquerda (fixo), folha de contatos à direita,
   filtros como trilhas com uma régua embaixo. Nada de parede que anda:
   o que está parado se lê, o que está sob a faixa do meio da tela toca.
   O ASCII roxo é a transição do site: nasce o card e marca cada corte
   dos cards de sequência.                                            */
.trab-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40ch);gap:clamp(16px,3vw,48px);align-items:end}
.trab-top h2.t{max-width:none}
.trab-top .sub{margin:0 0 .5em;font-size:var(--s-0)}

/* os filtros: trilhas sobre uma régua; a faixa roxa é a área de trabalho */
.trab-bar{margin-top:clamp(26px,3.4vw,44px)}
.chips{position:relative;display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scrollbar-width:none;
  padding-bottom:17px;
  background:
    repeating-linear-gradient(90deg,var(--ink-3) 0 1px,transparent 1px 60px) left bottom/100% 9px no-repeat local,
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 12px) left bottom/100% 5px no-repeat local,
    linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat local}
.chips::-webkit-scrollbar{display:none}
.chips::after{content:"";position:absolute;left:var(--px,0);bottom:0;width:var(--pw,0);height:3px;background:var(--purple);
  box-shadow:0 0 14px var(--purple);transition:left .5s cubic-bezier(.65,0,.35,1),width .5s cubic-bezier(.65,0,.35,1);pointer-events:none}
.chip{all:unset;box-sizing:border-box;flex:none;cursor:pointer;display:inline-flex;align-items:baseline;gap:7px;padding:6px 0 4px;
  font-size:var(--s--2);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;transition:color .2s}
.chip sup{font-size:9px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ink-3);transition:color .2s}
.chip:hover,.chip:hover sup{color:var(--purple)}
.chip[aria-pressed="true"]{color:var(--ink);font-weight:700}
.chip[aria-pressed="true"] sup{color:var(--purple)}
.chip:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.trab-desc{margin-top:16px;padding-left:12px;border-left:1px solid color-mix(in srgb,var(--purple) 55%,transparent);
  font-family:"Archivo",sans-serif;font-weight:300;font-size:var(--s--1);line-height:1.55;color:var(--ink-2);max-width:64ch;min-height:1.55em}
.trab-desc p[hidden]{display:none}

.trab-main{display:grid;grid-template-columns:clamp(268px,28vw,380px) minmax(0,1fr);gap:clamp(22px,3vw,44px);
  margin-top:clamp(22px,3vw,34px);align-items:start}

/* o monitor de programa */
.mon{--mh:clamp(300px,calc(100vh - 350px),540px);position:sticky;top:84px;scroll-margin-top:84px;
  padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.mon-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
  font-size:var(--s--2);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mon-tag{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
.mon-tag s{width:6px;height:6px;border-radius:50%;background:var(--purple);box-shadow:0 0 8px var(--purple)}
.mon-n{font-variant-numeric:tabular-nums}
.mon-stage{position:relative;min-height:calc(var(--mh) * .76);padding:15px;display:grid;place-items:center;border-radius:6px;background:#0C0C0C;
  box-shadow:inset 0 0 0 1px var(--line-2)}
.mon-clip{width:min(100%,calc((var(--mh) - 30px) * var(--n,.8)));aspect-ratio:var(--r);cursor:pointer}
.mon-clip:not(.seq) .segs{display:none}
.mon-clip figcaption{display:none}
/* as marcas de canto do enquadramento */
.crop{position:absolute;width:9px;height:9px;border:0 solid var(--ink-3);pointer-events:none}
.crop.a{left:8px;top:8px;border-width:1px 0 0 1px}.crop.b{right:8px;top:8px;border-width:1px 1px 0 0}
.crop.c{left:8px;bottom:8px;border-width:0 0 1px 1px}.crop.d{right:8px;bottom:8px;border-width:0 1px 1px 0}
/* régua do monitor: tique a cada 8 px, um maior a cada 40; o roxo é o que já passou */
.mon-rule{position:relative;height:20px;margin-top:10px;cursor:pointer;touch-action:none;
  background:
    repeating-linear-gradient(90deg,var(--ink-3) 0 1px,transparent 1px 40px) left bottom/100% 9px no-repeat,
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px) left bottom/100% 5px no-repeat,
    linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat}
.mon-fill{position:absolute;left:0;bottom:0;height:2px;width:var(--p,0%);background:var(--purple)}
.mon-fill::after{content:"";position:absolute;right:-5px;bottom:0;width:10px;height:12px;background:var(--purple);
  clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.mon-cuts u{display:none;position:absolute;bottom:0;width:1px;height:14px;background:var(--ink)}
.is-seq .mon-cuts u{display:block}
/* o JS cria uma marca por corte (n-1) e põe o left de cada uma */
.mon-tc{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.mon-tc b{font-weight:500;color:var(--ink);letter-spacing:.04em}
.mon-info{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);min-height:62px}
.mi{display:grid;gap:3px}
.mi[hidden]{display:none}
.mi b{font-size:var(--s--2);letter-spacing:.14em;text-transform:uppercase;color:var(--purple);font-weight:700}
.mi span{font-size:var(--s-1);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.mi i{font-style:normal;font-size:11px;color:var(--ink-3);letter-spacing:.04em}

/* a folha de contatos: linhas justificadas, todas na altura de uma faixa */
.wall{--rh:clamp(172px,15vw,224px);--gap:10px;display:grid;gap:24px;min-width:0}
.wall-block{min-width:0}.wall-block[hidden]{display:none}
.wall-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;
  padding-bottom:6px;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.12em;color:var(--ink-3)}
.wall-label span:last-child{color:var(--purple);font-variant-numeric:tabular-nums}
.wall-rows{display:grid;gap:var(--gap)}
.wall-row{display:flex;gap:var(--gap);min-width:0}
.clip{position:relative;margin:0;overflow:hidden;border-radius:6px;background:var(--card);
  outline:1px solid var(--line-2);outline-offset:-1px;cursor:pointer}
.wall .clip{height:var(--row-h,var(--rh));min-width:0;flex:var(--tile-n,var(--n,.56)) 1 0;
  transition:opacity .3s,box-shadow .3s,outline-color .3s}
.clip[hidden]{display:none}
.clip img,.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wall .clip img,.wall .clip video{object-position:var(--pos,center)}
.clip video{z-index:1;opacity:0;transition:opacity .4s ease;pointer-events:none}
.clip video.ready{opacity:1}
.clip figcaption{position:absolute;left:0;right:0;bottom:0;z-index:5;display:grid;gap:1px;padding:26px 9px 8px;
  background:linear-gradient(to top,rgba(8,7,12,.88),rgba(8,7,12,.5) 55%,transparent);pointer-events:none;
  font-size:10px;line-height:1.3;color:#FAFAFA}
.clip figcaption b{color:var(--purple);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:9px}
.clip figcaption span,.clip figcaption em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clip figcaption em{font-style:normal;font-size:9px;letter-spacing:.04em;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* O trecho selecionado mantém a cor e ganha um selo de estado. */
.wall .clip.sel{outline:1px solid var(--purple);outline-offset:-1px}
.monitor-badge{display:none;position:absolute;top:8px;left:8px;z-index:6;padding:3px 6px;
  border:1px solid rgba(191,133,249,.5);border-radius:3px;background:rgba(10,10,10,.86);
  color:var(--purple);font-size:9px;line-height:1.4;white-space:nowrap}
.clip.sel .monitor-badge{display:block}
.clip.sel .segs{top:32px}
.clip:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
@media (hover:hover){
  .wall:has(.clip:hover) .clip:not(:hover){opacity:.5}
  .wall .clip:hover{outline-color:var(--purple);box-shadow:-3px 0 0 var(--cyan),3px 0 0 var(--purple),0 14px 40px rgba(0,0,0,.55)}
  .wall .clip:hover figcaption em{color:var(--ink)}
}
/* a barra de cortes dos cards de sequência (6 ou 9), como stories */
.segs{position:absolute;left:8px;right:8px;top:8px;z-index:5;display:flex;gap:3px;pointer-events:none}
.segs i{flex:1;height:2px;border-radius:2px;background:rgba(250,250,250,.26);overflow:hidden}
.segs i::after{content:"";display:block;height:100%;width:var(--p,0%);background:#FAFAFA}

/* camadas do ASCII: .asc + .scanl na entrada do card; .xf + .xl em cada corte */
.clip .asc,.clip .xf{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:none;pointer-events:none}
.clip.asc-on .asc{display:block}
.clip .scanl,.clip .xl{position:absolute;inset:0;z-index:4;pointer-events:none;display:none;
  border-top:2px solid var(--purple);box-shadow:0 -8px 22px -6px var(--purple)}
.clip.scan .asc{animation:ascOut .95s cubic-bezier(.45,0,.2,1) var(--d,0s) both}
.clip.scan .scanl{display:block;animation:scanDown .95s cubic-bezier(.45,0,.2,1) var(--d,0s) both}
@keyframes ascOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}
@keyframes scanDown{0%{transform:translateY(0);opacity:1}88%{opacity:1}100%{transform:translateY(100%);opacity:0}}
@media (prefers-reduced-motion:reduce){.clip .asc,.clip .scanl,.clip .xf,.clip .xl{display:none!important}}

@media(max-width:900px){
  .trab-top{grid-template-columns:minmax(0,1fr)}
  .trab-top .sub{max-width:44ch}
  .chips{margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    gap:20px}
  .trab-main{grid-template-columns:minmax(0,1fr);gap:18px}
  .mon{position:static;--mh:clamp(300px,52vh,440px)}
  .wall{--rh:clamp(150px,28vw,210px);--gap:8px;gap:20px}
}
@media(max-width:560px){
  .clip figcaption em{display:none}
  .clip figcaption{padding:22px 7px 6px}
}

/* o filtro troca 29 cards por 8: sem isto o Chrome "compensa" a altura e joga a página centenas de px para cima */
#reel{overflow-anchor:none}

/* ═══ 02 · /work: os dois apps em destaque + o que mais eu construí ══ */
.app{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.4vw,52px);
  align-items:center;margin-top:clamp(30px,4.4vw,60px)}
.app.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.app.rev .app-stage{order:2}
@media(max-width:900px){.app,.app.rev{grid-template-columns:1fr}.app.rev .app-stage{order:0}}
@media(max-width:560px){.app-tabs button{font-size:var(--s--2)}}
.app-stage{position:relative;min-width:0}
/* o brilho embaixo do palco e o único enfeite da seção */
.app-stage::before{content:"";position:absolute;inset:12% 8% -6%;z-index:-1;filter:blur(46px);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--purple) 34%,transparent),transparent)}
.app-win{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0d0b14;
  border:1px solid var(--line);box-shadow:0 28px 70px -34px rgba(0,0,0,.9)}
.app-win video,.app-win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.app-win.shot{aspect-ratio:1280/846}
.app-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.app-tabs button{all:unset;box-sizing:border-box;cursor:pointer;font-size:var(--s--1);color:var(--ink-3);
  transition:color .2s}
.app-tabs button:hover,.app-tabs button.on{color:var(--ink)}
.app-tabs button:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.app-tabs i{display:block;height:2px;margin-top:8px;background:var(--line);overflow:hidden}
.app-tabs i::after{content:"";display:block;height:100%;width:var(--p,0%);background:var(--purple);
  transition:width .25s linear}
/* o holofote do Avatarize: uma etapa de cada vez, 2 s cada, em ciclo */
.call{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);z-index:2;
  border:1.5px solid var(--purple);border-radius:8px;pointer-events:none;opacity:0;
  box-shadow:0 0 0 9999px rgba(6,4,12,.52),0 0 26px -4px var(--purple);
  animation:callOn 12s ease var(--d,0s) infinite both;animation-play-state:paused}
.app.live .call{animation-play-state:running}
.call b{position:absolute;left:-1px;bottom:calc(100% + 7px);white-space:nowrap;font-weight:600;
  font-size:var(--s--2);line-height:1;background:var(--purple);color:#0A0A0A;padding:5px 8px;border-radius:4px}
@keyframes callOn{0%{opacity:0;transform:scale(1.03)}2%{opacity:1;transform:none}15.5%{opacity:1}17.5%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.call{display:none}}

.app-info{min-width:0}
.app-id{display:flex;align-items:center;gap:14px}
.app-id img{border-radius:12px;flex:none}
.app-id h3{font-size:var(--s-2);letter-spacing:-.035em;line-height:1}
.app-id span{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:var(--s--1);color:var(--ink-3)}
.app-id s{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.app-pitch{margin:20px 0 0;max-width:30ch;font-family:"Archivo",sans-serif;font-weight:400;
  font-size:var(--s-1);line-height:1.4;letter-spacing:-.01em}
.app-pts{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.app-pts li{position:relative;padding-left:18px;color:var(--ink-2);font-family:"Archivo",sans-serif;
  font-weight:300;font-size:var(--s-0);line-height:1.5}
.app-pts li::before{content:"▹";position:absolute;left:0;color:var(--purple)}
.app-cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.app-cta .btn{padding:11px 18px}

/* "também construí": uma linha larga por projeto, nome grande e o fluxo
   dele em pílulas que acendem em sequência quando a linha está na tela */
.also{margin-top:clamp(56px,7vw,100px)}
/* line-height 1.6: o reveal corta no clip-path tudo que passa da borda, e o acento do É ficava fora */
.also-h{display:flex;align-items:center;gap:14px;line-height:1.6;font-size:var(--s--2);font-weight:500;color:var(--ink-3);
  letter-spacing:.16em;text-transform:uppercase}
.also-h::after{content:"";flex:1;height:1px;background:var(--line-2)}
.ax-list{margin-top:6px}
.ax{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(14px,2.6vw,40px);align-items:center;padding:clamp(24px,3vw,38px) clamp(4px,1vw,14px);
  border-bottom:1px solid var(--line-2);isolation:isolate}
.ax::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:linear-gradient(90deg,var(--purple-dim),transparent 70%)}
.ax:hover::before{opacity:1}
.ax-n{align-self:start;padding-top:.55em;font-size:var(--s--1);color:var(--ink-3);letter-spacing:.1em;transition:color .3s}
.ax:hover .ax-n{color:var(--purple)}
.ax h4{margin:0;font-size:var(--s-2);font-weight:800;letter-spacing:-.045em;line-height:1.05;overflow-wrap:anywhere}
.ax p{margin:12px 0 0;max-width:46ch;color:var(--ink-2);font-family:"Archivo",sans-serif;font-weight:300;
  font-size:var(--s-0);line-height:1.55}
.ax-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px;font-size:var(--s--2);
  color:var(--ink-3);letter-spacing:.06em}
.ax-meta em{font-style:normal;border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.ax-flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:12px}
.ax-flow li{position:relative;font-size:var(--s--1);color:var(--ink-3);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:8px 13px;background:var(--bg);
  transition:color .35s,border-color .35s,background .35s,box-shadow .35s}
.ax-flow li+li{margin-left:30px}
.ax-flow li+li::before{content:"";position:absolute;right:calc(100% + 5px);top:50%;width:20px;height:1px;
  background:var(--line);transition:background .35s}
.ax-flow li+li::after{content:"";position:absolute;right:calc(100% + 5px);top:calc(50% - 3px);width:6px;height:6px;
  border-top:1px solid var(--line);border-right:1px solid var(--line);transform:rotate(45deg);transition:border-color .35s}
.ax-flow li:last-child{color:var(--ink);border-color:color-mix(in srgb,var(--purple) 45%,transparent)}
.ax-flow li.lit{color:var(--ink);border-color:color-mix(in srgb,var(--purple) 70%,transparent);background:var(--purple-dim)}
.ax-flow li.lit::before{background:var(--purple)}
.ax-flow li.lit::after{border-color:var(--purple)}
.ax-flow li.now{box-shadow:0 0 22px -4px var(--purple);border-color:var(--purple)}
@media(max-width:900px){
  .ax{grid-template-columns:34px minmax(0,1fr);align-items:start}
  .ax-flow{grid-column:2}
}
@media(max-width:520px){.ax-flow li+li{margin-left:24px}.ax-flow li+li::before{width:14px}}

/* ═══ 03 · /stack: três etapas com telas vivas (v24) ═══════════════
   Cada etapa tem uma tela em ASCII roxo desenhada num canvas (JS 9b).
   Um pulso corre pela borda de cima e acende a etapa por onde passa. */
.pipe{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  margin-top:clamp(24px,3.4vw,40px);background:var(--line-2);border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.pipe-run{position:absolute;top:0;left:0;z-index:3;width:24%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--purple) 45%,var(--cyan) 55%,transparent);
  box-shadow:0 0 18px var(--purple);transform:translateX(var(--x,-100%))}
.stg{background:var(--bg);display:flex;flex-direction:column;min-width:0}
.scr{position:relative;aspect-ratio:4/3;background:#0B0911;border-bottom:1px solid var(--line-2);overflow:hidden}
.scr::after{content:"";position:absolute;inset:0;pointer-events:none;transition:box-shadow .5s;
  background:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(0,0,0,.45))}
.stg.hot .scr::after{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--purple) 40%,transparent),
  inset 0 0 60px -20px color-mix(in srgb,var(--purple) 50%,transparent)}
.scr canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stg-b{padding:clamp(20px,2.4vw,30px)}
.stg-n{display:block;font-size:var(--s--2);color:var(--purple);letter-spacing:.16em}
.stg h3{margin-top:12px;font-size:var(--s-2);letter-spacing:-.045em;transition:text-shadow .4s}
.stg.hot h3{text-shadow:2px 2px 0 var(--cyan)}
.stg p{margin:10px 0 0;max-width:32ch;color:var(--ink-2);font-family:"Archivo",sans-serif;font-weight:300;
  font-size:var(--s-0);line-height:1.5}
.stg-tools{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;font-size:var(--s--1);color:var(--ink-2)}
.stg-tools li::before{content:"▹";margin-right:8px;color:var(--purple)}
@media(max-width:900px){
  .pipe{grid-template-columns:1fr}
  .pipe-run{display:none}
  .scr{aspect-ratio:16/10}
}

/* ═══ 04 · /career: a linha do tempo (o que sobrou do /track-record) ══ */
.rows{border-top:1px solid var(--line-2);position:relative;padding-left:28px}
.rows::before{content:"";position:absolute;left:7px;top:0;bottom:18px;width:1px;background:var(--line)}
.row{position:relative;display:grid;grid-template-columns:145px 1fr auto;gap:clamp(12px,3vw,30px);
  padding:18px 0;border-bottom:1px solid var(--line-2);align-items:baseline;transition:padding-left .3s}
.row::before{content:"";position:absolute;left:-25px;top:26px;width:7px;height:7px;border-radius:50%;
  background:var(--bg);border:1px solid var(--purple);transition:background .3s}
.row:hover::before{background:var(--purple)}
.row:hover{padding-left:10px}
@media(max-width:700px){.row{grid-template-columns:1fr;gap:4px}
  /* numa coluna so, o 'where' e' o cargo/empresa e tem que vir logo abaixo
     da data; sem o order ele cai depois dos bullets e vira rodape solto. */
  .row .where{text-align:left}.row .what{order:1;margin-top:6px}}
.row .when{font-size:var(--s--1);color:var(--ink-3)}
.row .what{font-weight:700;font-size:var(--s-1);letter-spacing:-.025em;transition:color .3s}
.row:hover .what>h3{color:var(--purple)}
.row .what>h3{font-size:inherit;font-weight:inherit;letter-spacing:inherit;transition:color .3s}
/* bullets do cargo, no formato do dyegocruz.com.br: o que eu fiz, e depois
   uma linha "Ambiente:" com a stack daquela funcao. */
.row .bul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.row .bul li{position:relative;padding-left:16px;font-size:var(--s-0);line-height:1.6;
  font-weight:300;font-family:"Archivo",sans-serif;color:var(--ink-2)}
.row .bul li::before{content:"▹";position:absolute;left:0;top:0;color:var(--purple);font-size:.85em}
.row .env{margin-top:10px;font-size:var(--s--2);color:var(--ink-3);line-height:1.6}
.row .env b{color:var(--ink-2);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.row .where{font-size:var(--s--2);color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;text-align:right}

/* ═══ 05 · contato ════════════════════════════════════════════════ */
.avail{margin:14px 0 0;font-size:var(--s--1);color:var(--ink-3)}
.contact{border-top:1px solid var(--line-2);position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(80% 120% at 50% 128%,var(--purple-dim),transparent 60%)}
/* o pulso mora atras de tudo e nao intercepta clique nenhum */
#ping{position:absolute;inset:0;z-index:0;pointer-events:none}
.contact .wrap{position:relative;z-index:1}
.contact h2.t{max-width:29ch;font-size:clamp(1.9rem,1.35rem + 3.1vw,3.9rem);line-height:1.08;text-wrap:balance}
/* a pergunta vira a linha de chamada: própria linha, menor que a afirmação, em roxo da marca */
.contact h2.t em{display:block;margin-top:.45em;font-size:.6em;line-height:1.2;letter-spacing:-.035em;
  color:var(--purple);text-shadow:1.5px 1.5px 0 var(--cyan)}
.contact .big-mail{margin-top:clamp(28px,3.6vw,48px)}
.big-mail{display:inline-block;font-weight:800;font-size:clamp(1.25rem,5.2vw,3.4rem);letter-spacing:-.055em;
  text-decoration:none;line-height:1.05;margin-top:18px;overflow-wrap:anywhere;
  border-bottom:2px solid transparent;transition:.25s}
.big-mail:hover{color:var(--purple);border-bottom-color:var(--purple)}
.socials{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
footer{border-top:1px solid var(--line-2);padding-block:26px;font-size:var(--s--2);color:var(--ink-3)}
.foot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;letter-spacing:.08em}
.foot-nav{display:flex;gap:16px}
.foot-nav a{text-decoration:none;transition:color .2s}
.foot-nav a:hover{color:var(--purple)}

/* ═══ reveals ═════════════════════════════════════════════════════ */
.js [data-rv]{opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.25,1),transform .8s cubic-bezier(.2,.7,.25,1),clip-path .9s cubic-bezier(.2,.7,.25,1)}
.js [data-rv="up"]{transform:translateY(26px)}
.js [data-rv="scale"]{transform:scale(.965)}
.js [data-rv="wipe"]{clip-path:inset(0 100% 0 0);opacity:1}
.js [data-rv].in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.js [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important}}
</style>

<script>document.documentElement.classList.add("js");
/* o site sempre abre no hero: sem isto o Chrome devolve a posição da visita anterior ao
   recarregar e a pessoa cai no meio dos vídeos. Link com #seção continua indo para a seção. */
if ("scrollRestoration" in history) history.scrollRestoration = "manual";
if (!location.hash) addEventListener("load", () => scrollTo(0, 0));</script>

<!-- ícones de conceito (não são logos de marca) -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<symbol id="i-term" viewBox="0 0 24 24"><rect x="2.5" y="4" width="19" height="16" rx="2"/><path d="M6.5 9.5 9.5 12l-3 2.5M12.5 15h5"/></symbol>
<symbol id="i-box" viewBox="0 0 24 24"><path d="M12 2.8 21 7.4v9.2L12 21.2 3 16.6V7.4z"/><path d="M3 7.4 12 12l9-4.6M12 12v9.2"/></symbol>
<symbol id="i-flow" viewBox="0 0 24 24"><circle cx="5" cy="5.5" r="2.4"/><circle cx="19" cy="5.5" r="2.4"/><circle cx="12" cy="18.5" r="2.4"/><path d="M6.6 7.4 10.6 16.4M17.4 7.4 13.4 16.4M7.4 5.5h9.2"/></symbol>
<symbol id="i-wave" viewBox="0 0 24 24"><path d="M2.5 12h2M7 7.5v9M11 4v16M15 8.5v7M19 10.5v3"/></symbol>
<symbol id="i-film" viewBox="0 0 24 24"><rect x="2.5" y="5" width="19" height="14" rx="2"/><path d="M7 5v14M17 5v14M2.5 12h19"/></symbol>
<symbol id="i-brain" viewBox="0 0 24 24"><path d="M12 5.2a3.2 3.2 0 0 0-6 1.4A3 3 0 0 0 4.4 12 3 3 0 0 0 6 17.2 3.2 3.2 0 0 0 12 18.8z"/><path d="M12 5.2a3.2 3.2 0 0 1 6 1.4A3 3 0 0 1 19.6 12 3 3 0 0 1 18 17.2a3.2 3.2 0 0 1-6 1.6z"/><path d="M12 5.2v13.6"/></symbol>
<symbol id="i-plug" viewBox="0 0 24 24"><path d="M9 3v5M15 3v5M6.5 8h11v3.5a5.5 5.5 0 0 1-11 0zM12 17v4"/></symbol>
<symbol id="i-db" viewBox="0 0 24 24"><ellipse cx="12" cy="6" rx="8" ry="3.2"/><path d="M4 6v12c0 1.8 3.6 3.2 8 3.2s8-1.4 8-3.2V6M4 12c0 1.8 3.6 3.2 8 3.2s8-1.4 8-3.2"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12.3l2.7 2.7L16 9.5"/></symbol>
<symbol id="i-cloud" viewBox="0 0 24 24"><path d="M7 18.5a4.2 4.2 0 0 1-.4-8.4 5.6 5.6 0 0 1 10.8-1.3A3.9 3.9 0 0 1 17.8 18.5z"/></symbol>
<symbol id="i-branch" viewBox="0 0 24 24"><circle cx="6.5" cy="5" r="2.2"/><circle cx="6.5" cy="19" r="2.2"/><circle cx="17.5" cy="9" r="2.2"/><path d="M6.5 7.2v9.6M6.5 12h6.8a4.2 4.2 0 0 0 4.2-2.6"/></symbol>
<symbol id="i-eye" viewBox="0 0 24 24"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle cx="12" cy="12" r="2.8"/></symbol>
</defs></svg>

<div id="prog"></div>
<div class="gridbg"></div>

<header class="nav">
  <div class="wrap nav-in">
    <a class="brand" href="#top">RAFAGUIAR<span>.DEV</span></a>
    <nav class="nav-links">
      <a href="#reel">/reel</a>
      <a href="#work">/work</a>
      <a href="#do">/stack</a>
      <a href="#career">/career</a>
      <a href="#contact">/contact</a>
    </nav>
    <div class="switches">
      <button class="sw sw-lock" id="section-lock" type="button" aria-pressed="false" aria-label="Section alignment: off" title="Section alignment: off">
        <span data-lock="on" hidden>
          <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v3"/></svg>
          <span class="lock-label" data-pt="Encaixe por seção: ligado" data-aria-pt="Encaixe por seção: ligado" aria-label="Section alignment: on">Section alignment: on</span>
        </span>
        <span data-lock="off">
          <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 7.5-2M12 14v3"/></svg>
          <span class="lock-label" data-pt="Encaixe por seção: desligado" data-aria-pt="Encaixe por seção: desligado" aria-label="Section alignment: off">Section alignment: off</span>
        </span>
      </button>
      <button class="sw" id="lang" aria-label="Trocar idioma">PT</button>
      </div>
  </div>
</header>

<main id="top">

<!-- ══ HERO ═══════════════════════════════════════════════════════ -->
<section class="hero">
  <div id="stage">
    <img id="photo" src="hero.png" data-embed="{{HERO}}" alt="Rafael Aguiar">
    <img id="asciiSource" src="hero-ascii-robot.png" data-embed="{{ASCII_ROBOT}}" alt="" aria-hidden="true">
    <canvas id="ascii"></canvas>
  </div>
  <!-- Os nomes dos modulos moram AQUI, e nao no #ascii, porque o veu do
       .hero::before fica entre os dois. Ver o comentario em drawModuleLabels. -->
  <canvas id="asciiTop" aria-hidden="true"></canvas>

  <div class="wrap hero-in">
    <div class="hero-copy">
      <div class="kicker"><i></i><span data-pt="Disponível para trabalho remoto">Available for remote work</span></div>
      <h1>RAFAEL<span class="l2">AGUIAR</span></h1>
      <p class="role">AI Automation Engineer <b>/</b> <span data-pt="Criativo de IA para Direct Response">Creative AI for Direct Response</span></p>
      <p class="one-line sans" data-pt="Transformo copy em vídeo pronto e construo os pipelines que fazem isso em escala.">
        I turn copy into finished video and build the pipelines that do it at scale.</p>
      <div class="hero-cta">
        <a class="btn solid" href="#work" data-pt="Ver o trabalho">See the work <span class="ar">→</span></a>
        <a class="btn ghost" href="#contact" data-pt="Falar comigo">Get in touch</a>
      </div>
      <p class="hint"><b>▚</b><span data-pt="desvie o fluxo · clique para revelar">bend the flow · click to reveal</span></p>
    </div>
  </div>

  <div class="scrollcue"><span>SCROLL</span><s></s></div>
  <div class="core-status" aria-hidden="true"><span>CORE SYNC</span><b id="corePct">000%</b><i><em id="coreFill"></em></i></div>
</section>

<div class="track"><div class="tick" id="t1"></div></div>
<div class="track"><div class="tick" id="t2"></div></div>

<!-- ══ 01 REEL ════════════════════════════════════════════════════ -->
<section class="sec" id="reel">
  <div class="wrap">
    <div class="head" data-rv="wipe"><span class="slug">/reel</span><span class="note">01</span></div>

    <!-- Parede no estilo do alisson-ai-cuts: o texto gruda a esquerda e as
         colunas de video deslizam em velocidades diferentes com o scroll.
         Cada trecho tem a proporcao da cena (9:16, 4:5 ou 1:1). Em "Todos",
         Personagem, Produto e B-roll viram um card so de cortes de 3 s: seis, nove e nove
         (media/reel/seq-*.mp4) e o ASCII roxo marca cada troca. mural.py corta. -->
    <div class="trab">
      <div class="trab-top">
        <h2 class="t" data-rv="up" data-pt="Trabalhos.">Selected work.</h2>
        <p class="sub" data-rv="up" data-pt="Avatares, UGC, produto e inserts 3D para VSLs e anúncios.">Avatars, UGC, product and 3D inserts for VSLs and ads.</p>
      </div>

      <!-- A seção é uma ilha de edição: à esquerda o monitor de programa (o trecho
           escolhido, em tela maior, com timecode e régua); à direita a folha de
           contatos com os 29 trechos, todos na altura de uma linha de timeline e
           na proporção real de cada cena. Os filtros são as trilhas: a faixa roxa
           da régua é a área de trabalho e anda até o filtro escolhido. O que passa
           pela faixa do meio da tela toca; o resto fica em poster. Em "Todos",
           Personagem, Produto e B-roll viram um card só de cortes de 3 s: seis,
           nove e nove (media/reel/seq-*.mp4) e o ASCII roxo marca cada troca. mural.py corta. -->
      <div class="trab-bar" data-rv="up">
        <div class="chips" role="group" aria-label="Filter the videos" data-aria-pt="Filtrar os vídeos">
          <button type="button" class="chip" data-f="all" aria-pressed="true"><span data-pt="Todos">All</span><sup>29</sup></button>
          <button type="button" class="chip" data-f="avatar" aria-pressed="false"><span data-pt="Avatares">Avatars</span><sup>10</sup></button>
          <button type="button" class="chip" data-f="ugc" aria-pressed="false"><span>UGC</span><sup>8</sup></button>
          <button type="button" class="chip" data-f="insert" aria-pressed="false"><span data-pt="Inserts 3D">3D inserts</span><sup>8</sup></button>
          <button type="button" class="chip" data-f="produto" aria-pressed="false"><span data-pt="Produto">Product</span><sup>12</sup></button>
          <button type="button" class="chip" data-f="personagem" aria-pressed="false"><span data-pt="Personagem">Character</span><sup>6</sup></button>
          <button type="button" class="chip" data-f="broll" aria-pressed="false"><span>B-roll</span><sup>9</sup></button>
        </div>
        <div class="trab-desc" aria-live="polite">
          <p data-f="all" data-pt="Personagem, produto e B-roll aparecem aqui como um card de cortes seguidos. O filtro abre as cenas, uma a uma.">Character, product and B-roll show up here as one card of back-to-back cuts. The filter opens the scenes one by one.</p>
          <p data-f="avatar" hidden data-pt="Avatares falando com lipsync, a partir de uma foto e um áudio.">Talking avatars with lipsync, made from a photo and an audio file.</p>
          <p data-f="ugc" hidden data-pt="Gente comum falando para o celular, no formato de anúncio.">Ordinary people talking to the phone, in ad format.</p>
          <p data-f="insert" hidden data-pt="O que a copy descreve, virado imagem.">What the copy describes, turned into an image.</p>
          <p data-f="produto" hidden data-pt="O frasco em cenários que nunca foram fotografados.">The bottle in settings that were never photographed.</p>
          <p data-f="personagem" hidden data-pt="A mesma apresentadora em seis cenas do mesmo vídeo.">The same presenter across six scenes of one video.</p>
          <p data-f="broll" hidden data-pt="Uma receita de gelatina, na ordem do preparo: mão, líquido e vapor de perto, onde a IA costuma errar.">One gelatin recipe in order of preparation: hands, liquid and steam up close, where AI usually breaks.</p>
        </div>
      </div>

      <div class="trab-main">
        <div class="mon" id="monitor">
          <div class="mon-head"><span class="mon-tag"><s></s><span data-pt="Programa">Program</span></span><span class="mon-n" id="mon-n">01 / 29</span></div>
          <div class="mon-stage">
            <figure class="clip mon-clip" id="mon-clip" style="--r:9/16;--n:.5625" data-src="" tabindex="0" role="button"
                    data-aria-pt="Tocar ou pausar o trecho do monitor" aria-label="Play or pause the monitor clip">
              <img src="media/reel/avatar-1.jpg" width="360" height="640" alt="">
              <span class="segs" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span>
            </figure>
            <i class="crop a"></i><i class="crop b"></i><i class="crop c"></i><i class="crop d"></i>
          </div>
          <div class="mon-rule" id="mon-rule" aria-hidden="true"><span class="mon-fill"></span><span class="mon-cuts"></span></div>
          <div class="mon-tc" aria-hidden="true"><b id="mon-t">00:00:00:00</b><span id="mon-d">/ 00:00:04:00</span></div>
          <div class="mon-info" aria-live="polite">
            <div class="mi" data-k="avatar-1" hidden><b>Avatar</b><span data-pt="Com o produto">With the product</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="avatar-2" hidden><b>Avatar</b><span data-pt="Fim de tarde">Late afternoon</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="avatar-3" hidden><b>Avatar</b><span data-pt="Selfie ao ar livre">Outdoor selfie</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="avatar-4" hidden><b>Avatar</b><span data-pt="Depoimento">Testimonial</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="avatar-5" hidden><b>Avatar</b><span data-pt="Cientista">Scientist</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="avatar-6" hidden><b>Avatar</b><span data-pt="Mãe em casa">Mom at home</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="avatar-7" hidden><b>Avatar</b><span data-pt="Apresentadora">Presenter</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="avatar-8" hidden><b>Avatar</b><span data-pt="Selfie em casa">Selfie at home</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="avatar-9" hidden><b>Avatar</b><span data-pt="No carro">In the car</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="avatar-10" hidden><b>Avatar</b><span data-pt="Na cozinha">In the kitchen</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="ugc-1" hidden><b>UGC</b><span data-pt="Receita">Recipe</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="ugc-2" hidden><b>UGC</b><span data-pt="Na oficina">In the workshop</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="ugc-3" hidden><b>UGC</b><span data-pt="Antes e depois">Before and after</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="ugc-4" hidden><b>UGC</b><span data-pt="Na sala">Living room</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="ugc-5" hidden><b>UGC</b><span data-pt="Produto na mão">Product in hand</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="ugc-6" hidden><b>UGC</b><span data-pt="Selfie na rua">Street selfie</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="ugc-7" hidden><b>UGC</b><span data-pt="De casaco">In a jacket</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="ugc-8" hidden><b>UGC</b><span data-pt="Depoimento em casa">Testimonial at home</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="insert-1" hidden><b data-pt="Insert 3D">3D insert</b><span data-pt="Vaso sanguíneo">Blood vessel</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="insert-2" hidden><b data-pt="Insert 3D">3D insert</b><span data-pt="Esponja de insulina">Insulin sponge</span><i>1:1 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="insert-3" hidden><b data-pt="Insert 3D">3D insert</b><span data-pt="Pâncreas em raio X">Pancreas X-ray</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="insert-4" hidden><b data-pt="Insert 3D">3D insert</b><span data-pt="Termografia">Thermography</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="insert-5" hidden><b data-pt="Insert 3D">3D insert</b><span data-pt="Parede intestinal">Gut wall</span><i>1:1 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="insert-6" hidden><b data-pt="Insert 3D">3D insert</b><span data-pt="Cápsula neon">Neon capsule</span><i>1:1 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="insert-7" hidden><b data-pt="Insert 3D">3D insert</b><span data-pt="Sistema nervoso">Nervous system</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="insert-8" hidden><b data-pt="Insert 3D">3D insert</b><span data-pt="Cápsula no estômago">Capsule in the stomach</span><i>1:1 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="seq-personagem" hidden><b data-pt="Personagem">Character</b><span data-pt="Seis cenas">Six scenes</span><i data-pt="1:1 · 6 cortes · 24 fps">1:1 · 6 cuts · 24 fps</i></div>
            <div class="mi" data-k="seq-produto" hidden><b data-pt="Produto">Product</b><span data-pt="Nove cenários">Nine settings</span><i data-pt="9:16 · 9 cortes · 24 fps">9:16 · 9 cuts · 24 fps</i></div>
            <div class="mi" data-k="seq-broll" hidden><b>B-roll</b><span data-pt="Receita em nove cortes">Recipe in nine cuts</span><i data-pt="9:16 · 9 cortes · 24 fps">9:16 · 9 cuts · 24 fps</i></div>
            <div class="mi" data-k="personagem-1" hidden><b data-pt="Personagem">Character</b><span data-pt="Cena 1">Scene 1</span><i>1:1 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="personagem-2" hidden><b data-pt="Personagem">Character</b><span data-pt="Cena 2">Scene 2</span><i>1:1 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="personagem-3" hidden><b data-pt="Personagem">Character</b><span data-pt="Cena 3">Scene 3</span><i>1:1 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="personagem-4" hidden><b data-pt="Personagem">Character</b><span data-pt="Cena 4">Scene 4</span><i>1:1 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="personagem-5" hidden><b data-pt="Personagem">Character</b><span data-pt="Cena 5">Scene 5</span><i>1:1 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="personagem-6" hidden><b data-pt="Personagem">Character</b><span data-pt="Cena 6">Scene 6</span><i>1:1 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="produto-1" hidden><b data-pt="Produto">Product</b><span data-pt="Respingo de água">Water splash</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="produto-2" hidden><b data-pt="Produto">Product</b><span data-pt="Explosão de trigo">Wheat burst</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="produto-3" hidden><b data-pt="Produto">Product</b><span data-pt="Pódio zen">Zen podium</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="produto-4" hidden><b data-pt="Produto">Product</b><span data-pt="Órbita de átomos">Atom orbit</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="produto-5" hidden><b data-pt="Produto">Product</b><span data-pt="Cápsulas caindo">Falling capsules</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="produto-6" hidden><b data-pt="Produto">Product</b><span data-pt="Riacho">Stream</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="produto-7" hidden><b data-pt="Produto">Product</b><span data-pt="Esponja de insulina">Insulin sponge</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="produto-8" hidden><b data-pt="Produto">Product</b><span data-pt="Pedra e faíscas">Stone and sparks</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="produto-9" hidden><b data-pt="Produto">Product</b><span data-pt="Seda azul-noite">Midnight silk</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="produto-10" hidden><b data-pt="Produto">Product</b><span data-pt="Neuro Prime e Focus Max">Neuro Prime and Focus Max</span><i>1:1 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="produto-11" hidden><b data-pt="Produto">Product</b><span data-pt="Gotas de água">Water drops</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="produto-12" hidden><b data-pt="Produto">Product</b><span data-pt="Mármore">Marble</span><i>4:5 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="broll-1" hidden><b>B-roll</b><span data-pt="Água fervendo">Boiling water</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="broll-2" hidden><b>B-roll</b><span data-pt="Água na tigela">Water in the bowl</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="broll-3" hidden><b>B-roll</b><span data-pt="Dissolvendo">Dissolving</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="broll-4" hidden><b>B-roll</b><span data-pt="Banho-maria">Double boiler</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="broll-5" hidden><b>B-roll</b><span data-pt="Mistura quente">Hot mix</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="broll-6" hidden><b>B-roll</b><span data-pt="Creme">Cream</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="broll-7" hidden><b>B-roll</b><span data-pt="Ponto do creme">Smooth cream</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="broll-8" hidden><b>B-roll</b><span data-pt="Na travessa">Into the dish</span><i>9:16 · 0:04 · 24 fps</i></div>
            <div class="mi" data-k="broll-9" hidden><b>B-roll</b><span data-pt="Firme">Set</span><i>9:16 · 0:04 · 24 fps</i></div>
          </div>
        </div>
        <div class="wall" id="mural">
<div class="wall-block" data-group="avatar"><div class="wall-label"><span data-pt="V1 · AVATARES">V1 · AVATARS</span><span>10</span></div><div class="wall-rows">
<figure class="clip" data-cat="avatar" data-in="all cat" style="--r:9/16;--n:0.5625;--pos:50% 18%" data-src="media/reel/avatar-1.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/avatar-1.jpg" width="360" height="640"
                 alt="AI-generated video: with the product" data-alt-pt="Vídeo gerado por IA: com o produto">
            <figcaption><b data-pt="Avatar">Avatar</b><span data-pt="Com o produto">With the product</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="avatar" data-in="all cat" style="--r:4/5;--n:0.8" data-src="media/reel/avatar-2.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/avatar-2.jpg" width="360" height="450"
                 alt="AI-generated video: late afternoon" data-alt-pt="Vídeo gerado por IA: fim de tarde">
            <figcaption><b data-pt="Avatar">Avatar</b><span data-pt="Fim de tarde">Late afternoon</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="avatar" data-in="all cat" style="--r:9/16;--n:0.5625;--pos:50% 18%" data-src="media/reel/avatar-3.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/avatar-3.jpg" width="360" height="640"
                 alt="AI-generated video: outdoor selfie" data-alt-pt="Vídeo gerado por IA: selfie ao ar livre">
            <figcaption><b data-pt="Avatar">Avatar</b><span data-pt="Selfie ao ar livre">Outdoor selfie</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="avatar" data-in="all cat" style="--r:9/16;--n:0.5625;--pos:50% 18%" data-src="media/reel/avatar-4.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/avatar-4.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: testimonial" data-alt-pt="Vídeo gerado por IA: depoimento">
            <figcaption><b data-pt="Avatar">Avatar</b><span data-pt="Depoimento">Testimonial</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="avatar" data-in="all cat" style="--r:4/5;--n:0.8" data-src="media/reel/avatar-5.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/avatar-5.jpg" loading="lazy" width="360" height="450"
                 alt="AI-generated video: scientist" data-alt-pt="Vídeo gerado por IA: cientista">
            <figcaption><b data-pt="Avatar">Avatar</b><span data-pt="Cientista">Scientist</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="avatar" data-in="all cat" style="--r:4/5;--n:0.8" data-src="media/reel/avatar-6.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/avatar-6.jpg" loading="lazy" width="360" height="450"
                 alt="AI-generated video: mom at home" data-alt-pt="Vídeo gerado por IA: mãe em casa">
            <figcaption><b data-pt="Avatar">Avatar</b><span data-pt="Mãe em casa">Mom at home</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="avatar" data-in="all cat" style="--r:4/5;--n:0.8" data-src="media/reel/avatar-7.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/avatar-7.jpg" loading="lazy" width="360" height="450"
                 alt="AI-generated video: presenter in the kitchen" data-alt-pt="Vídeo gerado por IA: apresentadora na cozinha">
            <figcaption><b data-pt="Avatar">Avatar</b><span data-pt="Apresentadora">Presenter</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="avatar" data-in="all cat" style="--r:9/16;--n:0.5625;--pos:50% 18%" data-src="media/reel/avatar-8.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/avatar-8.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: selfie at home" data-alt-pt="Vídeo gerado por IA: selfie em casa">
            <figcaption><b data-pt="Avatar">Avatar</b><span data-pt="Selfie em casa">Selfie at home</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="avatar" data-in="all cat" style="--r:4/5;--n:0.8" data-src="media/reel/avatar-9.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/avatar-9.jpg" loading="lazy" width="360" height="450"
                 alt="AI-generated video: in the car" data-alt-pt="Vídeo gerado por IA: no carro">
            <figcaption><b data-pt="Avatar">Avatar</b><span data-pt="No carro">In the car</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="avatar" data-in="all cat" style="--r:9/16;--n:0.5625;--pos:50% 18%" data-src="media/reel/avatar-10.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/avatar-10.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: in the kitchen" data-alt-pt="Vídeo gerado por IA: na cozinha">
            <figcaption><b data-pt="Avatar">Avatar</b><span data-pt="Na cozinha">In the kitchen</span><em>9:16 · 0:04</em></figcaption></figure>
</div></div>
<div class="wall-block" data-group="ugc"><div class="wall-label"><span data-pt="V2 · UGC">V2 · UGC</span><span>08</span></div><div class="wall-rows">
<figure class="clip" data-cat="ugc" data-in="all cat" style="--r:9/16;--n:0.5625" data-src="media/reel/ugc-1.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/ugc-1.jpg" width="360" height="640"
                 alt="AI-generated video: recipe" data-alt-pt="Vídeo gerado por IA: receita">
            <figcaption><b>UGC</b><span data-pt="Receita">Recipe</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="ugc" data-in="all cat" style="--r:4/5;--n:0.8" data-src="media/reel/ugc-2.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/ugc-2.jpg" width="360" height="450"
                 alt="AI-generated video: workshop testimonial" data-alt-pt="Vídeo gerado por IA: depoimento na oficina">
            <figcaption><b>UGC</b><span data-pt="Na oficina">In the workshop</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="ugc" data-in="all cat" style="--r:9/16;--n:0.5625;--pos:50% 0%" data-src="media/reel/ugc-3.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/ugc-3.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: before and after" data-alt-pt="Vídeo gerado por IA: antes e depois">
            <figcaption><b>UGC</b><span data-pt="Antes e depois">Before and after</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="ugc" data-in="all cat" style="--r:4/5;--n:0.8" data-src="media/reel/ugc-4.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/ugc-4.jpg" loading="lazy" width="360" height="450"
                 alt="AI-generated video: living room testimonial" data-alt-pt="Vídeo gerado por IA: depoimento na sala">
            <figcaption><b>UGC</b><span data-pt="Na sala">Living room</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="ugc" data-in="all cat" style="--r:9/16;--n:0.5625" data-src="media/reel/ugc-5.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/ugc-5.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: product in hand" data-alt-pt="Vídeo gerado por IA: produto na mão">
            <figcaption><b>UGC</b><span data-pt="Produto na mão">Product in hand</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="ugc" data-in="all cat" style="--r:9/16;--n:0.5625" data-src="media/reel/ugc-6.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/ugc-6.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: street selfie" data-alt-pt="Vídeo gerado por IA: selfie na rua">
            <figcaption><b>UGC</b><span data-pt="Selfie na rua">Street selfie</span><em>9:16 · 0:04</em></figcaption></figure><figure class="clip" data-cat="ugc" data-in="all cat" style="--r:4/5;--n:.8" data-src="media/reel/ugc-7.mp4" tabindex="0" role="button">
      <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
      <img src="media/reel/ugc-7.jpg" loading="lazy" width="360" height="450" alt="AI-generated video: In a jacket" data-alt-pt="Vídeo gerado por IA: de casaco">
      <figcaption><b data-pt="UGC">UGC</b><span data-pt="De casaco">In a jacket</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="ugc" data-in="all cat" style="--r:4/5;--n:.8" data-src="media/reel/ugc-8.mp4" tabindex="0" role="button">
      <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
      <img src="media/reel/ugc-8.jpg" loading="lazy" width="360" height="450" alt="AI-generated video: testimonial at home" data-alt-pt="Vídeo gerado por IA: depoimento em casa">
      <figcaption><b data-pt="UGC">UGC</b><span data-pt="Depoimento em casa">Testimonial at home</span><em>4:5 · 0:04</em></figcaption></figure>

</div></div>
<div class="wall-block" data-group="insert"><div class="wall-label"><span data-pt="V3 · INSERTS 3D">V3 · 3D INSERTS</span><span>08</span></div><div class="wall-rows">
<figure class="clip" data-cat="insert" data-in="all cat" style="--r:4/5;--n:0.8" data-src="media/reel/insert-1.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/insert-1.jpg" width="360" height="450"
                 alt="AI-generated video: blood vessel" data-alt-pt="Vídeo gerado por IA: vaso sanguíneo">
            <figcaption><b data-pt="Insert 3D">3D insert</b><span data-pt="Vaso sanguíneo">Blood vessel</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="insert" data-in="all cat" style="--r:1/1;--n:1" data-src="media/reel/insert-2.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/insert-2.jpg" width="360" height="360"
                 alt="AI-generated video: insulin sponge" data-alt-pt="Vídeo gerado por IA: esponja de insulina">
            <figcaption><b data-pt="Insert 3D">3D insert</b><span data-pt="Esponja de insulina">Insulin sponge</span><em>1:1 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="insert" data-in="all cat" style="--r:9/16;--n:0.5625" data-src="media/reel/insert-3.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/insert-3.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: pancreas X-ray" data-alt-pt="Vídeo gerado por IA: pâncreas em raio X">
            <figcaption><b data-pt="Insert 3D">3D insert</b><span data-pt="Pâncreas em raio X">Pancreas X-ray</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="insert" data-in="all cat" style="--r:9/16;--n:0.5625" data-src="media/reel/insert-4.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/insert-4.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: thermography" data-alt-pt="Vídeo gerado por IA: termografia">
            <figcaption><b data-pt="Insert 3D">3D insert</b><span data-pt="Termografia">Thermography</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="insert" data-in="all cat" style="--r:1/1;--n:1" data-src="media/reel/insert-5.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/insert-5.jpg" loading="lazy" width="360" height="360"
                 alt="AI-generated video: gut wall" data-alt-pt="Vídeo gerado por IA: parede intestinal">
            <figcaption><b data-pt="Insert 3D">3D insert</b><span data-pt="Parede intestinal">Gut wall</span><em>1:1 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="insert" data-in="all cat" style="--r:1/1;--n:1" data-src="media/reel/insert-6.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/insert-6.jpg" loading="lazy" width="360" height="360"
                 alt="AI-generated video: neon capsule" data-alt-pt="Vídeo gerado por IA: cápsula neon">
            <figcaption><b data-pt="Insert 3D">3D insert</b><span data-pt="Cápsula neon">Neon capsule</span><em>1:1 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="insert" data-in="all cat" style="--r:4/5;--n:0.8" data-src="media/reel/insert-7.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/insert-7.jpg" loading="lazy" width="360" height="450"
                 alt="AI-generated video: nervous system" data-alt-pt="Vídeo gerado por IA: sistema nervoso">
            <figcaption><b data-pt="Insert 3D">3D insert</b><span data-pt="Sistema nervoso">Nervous system</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="insert" data-in="all cat" style="--r:1/1;--n:1" data-src="media/reel/insert-8.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/insert-8.jpg" loading="lazy" width="360" height="360"
                 alt="AI-generated video: capsule in the stomach" data-alt-pt="Vídeo gerado por IA: cápsula no estômago">
            <figcaption><b data-pt="Insert 3D">3D insert</b><span data-pt="Cápsula no estômago">Capsule in the stomach</span><em>1:1 · 0:04</em></figcaption></figure>
</div></div>
<div class="wall-block" data-group="seq"><div class="wall-label"><span data-pt="V4 · SEQUÊNCIAS">V4 · SEQUENCES</span><span>03</span></div><div class="wall-rows">
<figure class="clip seq" data-cat="personagem" data-in="all" style="--r:1/1;--n:1" data-src="media/reel/seq-personagem.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/seq-personagem.jpg" width="360" height="360"
                 alt="AI-generated video: same presenter, six scenes" data-alt-pt="Vídeo gerado por IA: mesma apresentadora, seis cenas">
            <span class="segs" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span>
            <figcaption><b data-pt="Personagem">Character</b><span data-pt="Seis cenas">Six scenes</span><em data-pt="1:1 · 6 cortes">1:1 · 6 cuts</em></figcaption></figure>
<figure class="clip seq" data-cat="produto" data-in="all" style="--r:9/16;--n:0.5625" data-src="media/reel/seq-produto.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/seq-produto.jpg" width="360" height="640"
                 alt="AI-generated video: nine bottles, nine settings" data-alt-pt="Vídeo gerado por IA: nove frascos, nove cenários">
            <span class="segs" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
            <figcaption><b data-pt="Produto">Product</b><span data-pt="Nove cenários">Nine settings</span><em data-pt="9:16 · 9 cortes">9:16 · 9 cuts</em></figcaption></figure>
<figure class="clip seq" data-cat="broll" data-in="all" style="--r:9/16;--n:0.5625" data-src="media/reel/seq-broll.mp4" tabindex="0" role="button">
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/seq-broll.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: a recipe in nine cuts" data-alt-pt="Vídeo gerado por IA: uma receita em nove cortes">
            <span class="segs" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
            <figcaption><b>B-roll</b><span data-pt="Receita em nove cortes">Recipe in nine cuts</span><em data-pt="9:16 · 9 cortes">9:16 · 9 cuts</em></figcaption></figure>
</div></div>
<div class="wall-block" data-group="personagem"><div class="wall-label"><span data-pt="V5 · PERSONAGEM">V5 · CHARACTER</span><span>06</span></div><div class="wall-rows">
<figure class="clip" data-cat="personagem" data-in="cat" style="--r:1/1;--n:1" data-src="media/reel/personagem-1.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/personagem-1.jpg" loading="lazy" width="360" height="360"
                 alt="AI-generated video: scene 1" data-alt-pt="Vídeo gerado por IA: cena 1">
            <figcaption><b data-pt="Personagem">Character</b><span data-pt="Cena 1">Scene 1</span><em>1:1 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="personagem" data-in="cat" style="--r:1/1;--n:1" data-src="media/reel/personagem-2.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/personagem-2.jpg" loading="lazy" width="360" height="360"
                 alt="AI-generated video: scene 2" data-alt-pt="Vídeo gerado por IA: cena 2">
            <figcaption><b data-pt="Personagem">Character</b><span data-pt="Cena 2">Scene 2</span><em>1:1 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="personagem" data-in="cat" style="--r:1/1;--n:1" data-src="media/reel/personagem-3.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/personagem-3.jpg" loading="lazy" width="360" height="360"
                 alt="AI-generated video: scene 3" data-alt-pt="Vídeo gerado por IA: cena 3">
            <figcaption><b data-pt="Personagem">Character</b><span data-pt="Cena 3">Scene 3</span><em>1:1 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="personagem" data-in="cat" style="--r:1/1;--n:1" data-src="media/reel/personagem-4.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/personagem-4.jpg" loading="lazy" width="360" height="360"
                 alt="AI-generated video: scene 4" data-alt-pt="Vídeo gerado por IA: cena 4">
            <figcaption><b data-pt="Personagem">Character</b><span data-pt="Cena 4">Scene 4</span><em>1:1 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="personagem" data-in="cat" style="--r:1/1;--n:1" data-src="media/reel/personagem-5.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/personagem-5.jpg" loading="lazy" width="360" height="360"
                 alt="AI-generated video: scene 5" data-alt-pt="Vídeo gerado por IA: cena 5">
            <figcaption><b data-pt="Personagem">Character</b><span data-pt="Cena 5">Scene 5</span><em>1:1 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="personagem" data-in="cat" style="--r:1/1;--n:1" data-src="media/reel/personagem-6.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/personagem-6.jpg" loading="lazy" width="360" height="360"
                 alt="AI-generated video: scene 6" data-alt-pt="Vídeo gerado por IA: cena 6">
            <figcaption><b data-pt="Personagem">Character</b><span data-pt="Cena 6">Scene 6</span><em>1:1 · 0:04</em></figcaption></figure>
</div></div>
<div class="wall-block" data-group="produto"><div class="wall-label"><span data-pt="V6 · PRODUTO">V6 · PRODUCT</span><span>12</span></div><div class="wall-rows">
<figure class="clip" data-cat="produto" data-in="cat" style="--r:4/5;--n:0.8" data-src="media/reel/produto-1.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/produto-1.jpg" loading="lazy" width="360" height="450"
                 alt="AI-generated video: water splash" data-alt-pt="Vídeo gerado por IA: respingo de água">
            <figcaption><b data-pt="Produto">Product</b><span data-pt="Respingo de água">Water splash</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="produto" data-in="cat" style="--r:9/16;--n:0.5625" data-src="media/reel/produto-2.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/produto-2.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: wheat burst" data-alt-pt="Vídeo gerado por IA: explosão de trigo">
            <figcaption><b data-pt="Produto">Product</b><span data-pt="Explosão de trigo">Wheat burst</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="produto" data-in="cat" style="--r:9/16;--n:0.5625" data-src="media/reel/produto-3.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/produto-3.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: zen podium" data-alt-pt="Vídeo gerado por IA: pódio zen">
            <figcaption><b data-pt="Produto">Product</b><span data-pt="Pódio zen">Zen podium</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="produto" data-in="cat" style="--r:9/16;--n:0.5625" data-src="media/reel/produto-4.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/produto-4.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: atom orbit" data-alt-pt="Vídeo gerado por IA: órbita de átomos">
            <figcaption><b data-pt="Produto">Product</b><span data-pt="Órbita de átomos">Atom orbit</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="produto" data-in="cat" style="--r:4/5;--n:0.8" data-src="media/reel/produto-5.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/produto-5.jpg" loading="lazy" width="360" height="450"
                 alt="AI-generated video: falling capsules" data-alt-pt="Vídeo gerado por IA: cápsulas caindo">
            <figcaption><b data-pt="Produto">Product</b><span data-pt="Cápsulas caindo">Falling capsules</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="produto" data-in="cat" style="--r:9/16;--n:0.5625" data-src="media/reel/produto-6.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/produto-6.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: stream" data-alt-pt="Vídeo gerado por IA: riacho">
            <figcaption><b data-pt="Produto">Product</b><span data-pt="Riacho">Stream</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="produto" data-in="cat" style="--r:9/16;--n:0.5625" data-src="media/reel/produto-7.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/produto-7.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: insulin sponge" data-alt-pt="Vídeo gerado por IA: esponja de insulina">
            <figcaption><b data-pt="Produto">Product</b><span data-pt="Esponja de insulina">Insulin sponge</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="produto" data-in="cat" style="--r:9/16;--n:0.5625" data-src="media/reel/produto-8.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/produto-8.jpg" loading="lazy" width="360" height="640"
                 alt="AI-generated video: stone and sparks" data-alt-pt="Vídeo gerado por IA: pedra e faíscas">
            <figcaption><b data-pt="Produto">Product</b><span data-pt="Pedra e faíscas">Stone and sparks</span><em>9:16 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="produto" data-in="cat" style="--r:4/5;--n:0.8" data-src="media/reel/produto-9.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/produto-9.jpg" loading="lazy" width="360" height="450"
                 alt="AI-generated video: midnight silk" data-alt-pt="Vídeo gerado por IA: seda azul-noite">
            <figcaption><b data-pt="Produto">Product</b><span data-pt="Seda azul-noite">Midnight silk</span><em>4:5 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="produto" data-in="cat" style="--r:1/1;--n:1" data-src="media/reel/produto-10.mp4" tabindex="0" role="button" hidden>
            <span class="monitor-badge" data-pt="● no monitor">● on monitor</span>
<img src="media/reel/produto-10.jpg" loading="lazy" width="360" height="360"
                 alt="AI-generated video: Neuro Prime and Focus Max" data-alt-pt="Vídeo gerado por IA: neuro prime e focus max">
            <figcaption><b data-pt="Produto">Product</b><span data-pt="Neuro Prime e Focus Max">Neuro Prime and Focus Max</span><em>1:1 · 0:04</em></figcaption></figure>
<figure class="clip" data-cat="produto" data-in="cat" style="--r:4/5;--n:0.8" data-src="media/reel/produto-11.mp4" tabindex="0" role="button" hidden>