File size: 41,528 Bytes
07da34f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GLP-1 Proteína: La Hormona Clave en el Metabolismo</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 50%, #6366f1 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .smooth-scroll {
            scroll-behavior: smooth;
        }
        .molecule {
            filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.5));
        }
    </style>
</head>
<body class="smooth-scroll bg-gray-50 font-sans antialiased">
    <!-- Navigation -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fas fa-dna text-indigo-500 text-2xl mr-2"></i>
                        <span class="text-xl font-bold text-indigo-600">GLP-1</span>
                    </div>
                    <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                        <a href="#about" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Inicio</a>
                        <a href="#functions" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Funciones</a>
                        <a href="#research" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Investigación</a>
                        <a href="#applications" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Aplicaciones</a>
                    </div>
                </div>
                <div class="hidden sm:ml-6 sm:flex sm:items-center">
                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
                        Más información
                    </button>
                </div>
                <div class="-mr-2 flex items-center sm:hidden">
                    <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-- Mobile menu -->
        <div class="hidden sm:hidden" id="mobile-menu">
            <div class="pt-2 pb-3 space-y-1">
                <a href="#about" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Inicio</a>
                <a href="#functions" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Funciones</a>
                <a href="#research" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Investigación</a>
                <a href="#applications" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Aplicaciones</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div id="about" class="gradient-bg text-white py-20 relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="relative z-10">
                <div class="text-center">
                    <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
                        <span class="block">GLP-1</span>
                        <span class="block text-2xl md:text-3xl font-medium mt-2">Péptido Similar al Glucagón 1</span>
                    </h1>
                    <p class="mt-6 max-w-lg mx-auto text-lg md:text-xl">
                        La hormona incretina clave en el metabolismo de la glucosa y el control del apetito.
                    </p>
                    <div class="mt-10 flex justify-center space-x-4">
                        <a href="#functions" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-100 transition duration-300">
                            Explorar funciones <i class="fas fa-arrow-down ml-2"></i>
                        </a>
                        <a href="#research" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-700 hover:bg-indigo-800 transition duration-300">
                            Investigación <i class="fas fa-flask ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-white opacity-10"></div>
        <div class="absolute bottom-20 right-20 w-24 h-24 rounded-full bg-white opacity-10"></div>
        <div class="absolute top-1/3 right-1/3 w-16 h-16 rounded-full bg-white opacity-10"></div>
        
        <!-- Floating molecule animation -->
        <div class="absolute top-1/3 right-20 molecule floating hidden md:block">
            <!-- Simple molecule structure using font awesome -->
            <div class="text-white opacity-70 text-6xl">
                <i class="fas fa-atom"></i>
            </div>
        </div>
    </div>

    <!-- Quick Facts -->
    <div class="bg-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center">
                <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Datos clave</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    ¿Qué es GLP-1?
                </p>
                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                    El péptido similar al glucagón 1 (GLP-1) es una incretina producida en el intestino que juega un papel crucial en el metabolismo.
                </p>
            </div>

            <div class="mt-10">
                <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
                    <div class="bg-indigo-50 rounded-lg p-6 card-hover">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
                            <i class="fas fa-clock"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">Hormona intestinal</h3>
                        <p class="text-gray-500">
                            Secretada por las células L del intestino en respuesta a la ingestión de alimentos.
                        </p>
                    </div>

                    <div class="bg-indigo-50 rounded-lg p-6 card-hover">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
                            <i class="fas fa-seedling"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">Vida media corta</h3>
                        <p class="text-gray-500">
                            Degradada rápidamente por la enzima DPP-4 con una vida media de solo 1-2 minutos.
                        </p>
                    </div>

                    <div class="bg-indigo-50 rounded-lg p-6 card-hover">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
                            <i class="fas fa-brain"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">Acciones múltiples</h3>
                        <p class="text-gray-500">
                            Actúa sobre páncreas, cerebro, estómago, hígado y sistema cardiovascular.
                        </p>
                    </div>

                    <div class="bg-indigo-50 rounded-lg p-6 card-hover">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
                            <i class="fas fa-pills"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">Blanco terapéutico</h3>
                        <p class="text-gray-500">
                            Base para fármacos contra diabetes tipo 2 y obesidad como exenatida y liraglutida.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Functions Section -->
    <div id="functions" class="bg-gray-50 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center mb-12">
                <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Roles fisiológicos</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    Funciones clave de GLP-1
                </p>
                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                    El GLP-1 ejerce múltiples efectos en diferentes órganos del cuerpo humano.
                </p>
            </div>

            <div class="mt-10">
                <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12">
                    <!-- Function 1 -->
                    <div class="relative group">
                        <div class="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-indigo-300 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-500"></div>
                        <div class="relative bg-white rounded-lg p-6 h-full card-hover">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3 text-white">
                                    <i class="fas fa-syringe text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h3 class="text-lg font-medium text-gray-900">Páncreas</h3>
                                </div>
                            </div>
                            <div class="mt-4">
                                <p class="text-gray-600">
                                    - Estimula la secreción de insulina dependiente de glucosa<br>
                                    - Inhibe la liberación de glucagón<br>
                                    - Promueve la proliferación de células β<br>
                                    - Reduce la apoptosis de células β
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Function 2 -->
                    <div class="relative group">
                        <div class="absolute -inset-1 bg-gradient-to-r from-amber-500 to-amber-300 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-500"></div>
                        <div class="relative bg-white rounded-lg p-6 h-full card-hover">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 bg-amber-500 rounded-md p-3 text-white">
                                    <i class="fas fa-weight text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h3 class="text-lg font-medium text-gray-900">Sistema nervioso</h3>
                                </div>
                            </div>
                            <div class="mt-4">
                                <p class="text-gray-600">
                                    - Suprime el apetito al actuar sobre núcleos hipotalámicos<br>
                                    - Induce saciedad<br>
                                    - Regula preferencias alimentarias<br>
                                    - Reducel consumo de alimentos
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Function 3 -->
                    <div class="relative group">
                        <div class="absolute -inset-1 bg-gradient-to-r from-emerald-500 to-emerald-300 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-500"></div>
                        <div class="relative bg-white rounded-lg p-6 h-full card-hover">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 bg-emerald-500 rounded-md p-3 text-white">
                                    <i class="fas fa-heart text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h3 class="text-lg font-medium text-gray-900">Tracto gastrointestinal</h3>
                                </div>
                            </div>
                            <div class="mt-4">
                                <p class="text-gray-600">
                                    - Retrasa el vaciamiento gástrico<br>
                                    - Reduce la motilidad intestinal<br>
                                    - Disminuye la absorción de nutrientes<br>
                                    - Puede tener efectos protectores sobre la mucosa
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Function 4 -->
                    <div class="relative group">
                        <div class="absolute -inset-1 bg-gradient-to-r from-purple-500 to-purple-300 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-500"></div>
                        <div class="relative bg-white rounded-lg p-6 h-full card-hover">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 bg-purple-500 rounded-md p-3 text-white">
                                    <i class="fas fa-heartbeat text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h3 class="text-lg font-medium text-gray-900">Sistema cardiovascular</h3>
                                </div>
                            </div>
                            <div class="mt-4">
                                <p class="text-gray-600">
                                    - Mejora la función endotelial<br>
                                    - Efectos cardioprotectores<br>
                                    - Reduce la presión arterial<br>
                                    - Disminuye la inflamación vascular
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Research Section -->
    <div id="research" class="bg-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center">
                <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Avances científicos</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    Investigación sobre GLP-1
                </p>
                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                    Descubrimientos recientes y direcciones futuras de investigación.
                </p>
            </div>

            <div class="mt-12">
                <div class="bg-gray-50 rounded-xl p-8 md:p-12 shadow-inner">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            <h3 class="text-lg font-medium text-indigo-600 mb-4">Mecanismos de acción</h3>
                            <ul class="space-y-4">
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 h-6 w-6 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600">
                                        <i class="fas fa-check text-xs"></i>
                                    </span>
                                    <p class="ml-3 text-gray-600">Receptor GLP-1 acoplado a proteína G (GLP-1R) distribuido en múltiples órganos</p>
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 h-6 w-6 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600">
                                        <i class="fas fa-check text-xs"></i>
                                    </span>
                                    <p class="ml-3 text-gray-600">Activación de AMPK y otras vías intracelulares</p>
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 h-6 w-6 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600">
                                        <i class="fas fa-check text-xs"></i>
                                    </span>
                                    <p class="ml-3 text-gray-600">Influencia en la plasticidad sináptica neuronal</p>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-indigo-600 mb-4">Áreas prometedoras</h3>
                            <ul class="space-y-4">
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 h-6 w-6 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600">
                                        <i class="fas fa-brain text-xs"></i>
                                    </span>
                                    <p class="ml-3 text-gray-600">Potencial en enfermedades neurodegenerativas</p>
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 h-6 w-6 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600">
                                        <i class="fas fa-heart text-xs"></i>
                                    </span>
                                    <p class="ml-3 text-gray-600">Efectos cardioprotectores en insuficiencia cardíaca</p>
                                </li>
                                <li class="flex items-start">
                                    <span class="flex-shrink-0 h-6 w-6 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600">
                                        <i class="fas fa-weight text-xs"></i>
                                    </span>
                                    <p class="ml-3 text-gray-600">Nuevos análogos con mayor duración de acción</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="mt-10 bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-flask text-indigo-500 text-2xl"></i>
                            </div>
                            <div class="ml-4">
                                <h4 class="text-lg font-medium text-gray-900">Impacto en diabetes tipo 2</h4>
                                <p class="mt-2 text-gray-600">
                                    Los análogos de GLP-1 han revolucionado el tratamiento de la diabetes tipo 2, no solo mejorando el control glucémico sino también promoviendo la pérdida de peso y mostrando efectos protectores cardiovasculares en ensayos clínicos.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Applications Section -->
    <div id="applications" class="bg-indigo-50 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Usos terapéuticos</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    Aplicaciones clínicas de GLP-1
                </p>
                <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
                    Terapias basadas en GLP-1 para diversas condiciones médicas.
                </p>
            </div>

            <div class="mt-12">
                <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
                    <!-- App 1 -->
                    <div class="pt-6">
                        <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full shadow-sm card-hover">
                            <div class="-mt-6">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto">
                                    <i class="fas fa-vial text-xl"></i>
                                </div>
                                <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Diabetes Mellitus Tipo 2</h3>
                                <p class="mt-5 text-base text-gray-500">
                                    Análogos de GLP-1 como exenatida, liraglutida, dulaglutida, y semaglutida mejoran el control glucémico con bajo riesgo de hipoglucemia.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- App 2 -->
                    <div class="pt-6">
                        <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full shadow-sm card-hover">
                            <div class="-mt-6">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto">
                                    <i class="fas fa-weight text-xl"></i>
                                </div>
                                <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Obesidad</h3>
                                <p class="mt-5 text-base text-gray-500">
                                    Liraglutida y semaglutida en dosis más altas están aprobadas para el tratamiento de la obesidad, mostrando reducciones significativas de peso.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- App 3 -->
                    <div class="pt-6">
                        <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full shadow-sm card-hover">
                            <div class="-mt-6">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto">
                                    <i class="fas fa-brain text-xl"></i>
                                </div>
                                <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Enfermedades Neurodegenerativas</h3>
                                <p class="mt-5 text-base text-gray-500">
                                    En investigación para enfermedades como Alzheimer y Parkinson, mostrando potencial neuroprotector en modelos animales.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- App 4 -->
                    <div class="pt-6">
                        <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full shadow-sm card-hover">
                            <div class="-mt-6">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto">
                                    <i class="fas fa-heart text-xl"></i>
                                </div>
                                <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Enfermedad Cardiovascular</h3>
                                <p class="mt-5 text-base text-gray-500">
                                    Algunos análogos han demostrado reducir eventos cardiovasculares mayores en pacientes con diabetes y enfermedad cardiovascular establecida.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- App 5 -->
                    <div class="pt-6">
                        <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full shadow-sm card-hover">
                            <div class="-mt-6">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto">
                                    <i class="fas fa-pills text-xl"></i>
                                </div>
                                <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Síndrome Metabólico</h3>
                                <p class="mt-5 text-base text-gray-500">
                                    Beneficios sobre múltiples componentes del síndrome metabólico, incluyendo resistencia a la insulina, obesidad abdominal y dislipidemia.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- App 6 -->
                    <div class="pt-6">
                        <div class="flow-root bg-white rounded-lg px-6 pb-8 h-full shadow-sm card-hover">
                            <div class="-mt-6">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mx-auto">
                                    <i class="fas fa-liver text-xl"></i>
                                </div>
                                <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">EHNA (Esteatohepatitis No Alcohólica)</h3>
                                <p class="mt-5 text-base text-gray-500">
                                    Estudios en curso analizan su potencial para reducir la inflamación y fibrosis hepática en pacientes con EHNA.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Comparison Table -->
    <div class="bg-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="sm:flex sm:items-center">
                <div class="sm:flex-auto">
                    <h2 class="text-xl font-semibold text-gray-900">Comparación de análogos de GLP-1</h2>
                    <p class="mt-2 text-sm text-gray-600">
                        Principales características de los fármacos basados en GLP-1 disponibles actualmente.
                    </p>
                </div>
            </div>
            <div class="mt-8 flex flex-col">
                <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
                    <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
                        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                            <table class="min-w-full divide-y divide-gray-300">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Fármaco</th>
                                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Frecuencia</th>
                                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Aprobación</th>
                                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Efecto HbA1c</th>
                                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Pérdida de peso</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200 bg-white">
                                    <tr>
                                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">Exenatida</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">2x/día o 1x/semana</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">2005</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">-0.7 a -1.3%</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">2-3 kg</td>
                                    </tr>
                                    <tr>
                                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">Liraglutida</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">1x/día</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">2009</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">-0.8 a -1.5%</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">2-4 kg (4.5 kg en obesidad)</td>
                                    </tr>
                                    <tr>
                                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">Dulaglutida</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">1x/semana</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">2014</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">-1.0 a -1.6%</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">1-3 kg</td>
                                    </tr>
                                    <tr>
                                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-indigo-600 sm:pl-6">Semaglutida</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-indigo-600">1x/semana</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-indigo-600">2017</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-indigo-600">-1.5 a -2.0%</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-indigo-600">5-10 kg (15% en obesidad)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA -->
    <div class="bg-indigo-700">
        <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
                <span class="block">¿Quieres aprender más sobre GLP-1?</span>
                <span class="block text-indigo-200">Suscríbete a nuestra newsletter científica</span>
            </h2>
            <p class="mt-4 text-lg leading-6 text-indigo-200">
                Recibe las últimas investigaciones, novedades terapéuticas y avances en el campo de las incretinas directamente en tu correo.
            </p>
            <form class="mt-8 sm:flex">
                <label for="email-address" class="sr-only">Email address</label>
                <input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 rounded-md" placeholder="Ingresa tu email">
                <button type="submit" class="mt-3 w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white sm:mt-0 sm:ml-3 sm:w-auto sm:flex-shrink-0">
                    Suscribirse
                </button>
            </form>
            <p class="mt-3 text-sm text-indigo-200">
                Respetamos tu privacidad. Sin spam, sólo contenido de valor.
            </p>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-800">
        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">GLP-1</h3>
                    <ul class="mt-4 space-y-4">
                        <li><a href="#about" class="text-base text-gray-300 hover:text-white">Inicio</a></li>
                        <li><a href="#functions" class="text-base text-gray-300 hover:text-white">Funciones</a></li>
                        <li><a href="#research" class="text-base text-gray-300 hover:text-white">Investigación</a></li>
                        <li><a href="#applications" class="text-base text-gray-300 hover:text-white">Aplicaciones</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Recursos</h3>
                    <ul class="mt-4 space-y-4">
                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Artículos científicos</a></li>
                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Guías clínicas</a></li>
                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Ensayos clínicos</a></li>
                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Protocolos</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Comunidad</h3>
                    <ul class="mt-4 space-y-4">
                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Foro científico</a></li>
                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Eventos</a></li>
                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Webinars</a></li>
                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Cursos</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Contacto</h3>
                    <ul class="mt-4 space-y-4">
                        <li><a href="#" class="text-base text-gray-300 hover:text-white">[email protected]</a></li>
                        <li><a href="#" class="text-base text-gray-300 hover:text-white">+1 (555) 123-4567</a></li>
                        <li class="flex space-x-6 mt-6">
                            <a href="#" class="text-gray-400 hover:text-white">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white">
                                <i class="fab fa-youtube"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="mt-12 border-t border-gray-700 pt-8">
                <p class="text-base text-gray-400 text-center">
                    &copy; 2023 Centro de Investigación en GLP-1. Todos los derechos reservados.
                </p>
            </div>
        </div>
    </footer>

    <!-- Back to top button -->
    <button id="back-to-top" class="hidden fixed bottom-8 right-8 p-3 bg-indigo-600 text-white rounded-full shadow-lg hover:bg-indigo-700 transition duration-300">
        <i class="fas fa-arrow-up"></i>
    </button>

    <script>
        // Mobile menu toggle
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        });

        // Back to top button
        const backToTopButton = document.getElementById('back-to-top');
        window.addEventListener('scroll', function() {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.remove('hidden');
            } else {
                backToTopButton.classList.add('hidden');
            }
        });

        backToTopButton.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    const mobileMenu = document.getElementById('mobile-menu');
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=venezianof/spazio-mio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>