PageSourceSearch

https://vueltalaazulita.com/

html vueltalaazulita.com collected 2026-10-03 18:39:07 UTC 96,413 bytes, 1,439 lines download raw bytes

1<!DOCTYPE html>
2<html lang="es">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>XXIX Vuelta Internacional a La Azulita 2026 — Universidad del Ciclismo de Montaña</title>
7    
8    <!-- Favicon -->
9    <link rel="shortcut icon" href="https://vueltalaazulita.com/images/logo-vuelta-2026.png" type="image/x-icon">
10    <link rel="icon" href="https://vueltalaazulita.com/images/logo-vuelta-2026.png" type="image/png">
11
12    <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 68 bytes, lines 12-13
12
13    <script async src="https://www.googletagmanager.com/gtag/js?id=
13G-3DZR798BEP
vendor: 16 bytes, lines 13-14
13"></script>
14    
14<script>
15        
vendor: 152 bytes, lines 15-19
15window.dataLayer = window.dataLayer || [];
16        function gtag(){dataLayer.push(arguments);}
17        gtag('js', new Date());
18
19        gtag('config', '
19G-3DZR798BEP
vendor: 8 bytes, lines 19-20
19');
20    
20</script>
20
21
22    <!-- Vite Assets -->
23    <link rel="preload" as="style" href="https://vueltalaazulita.com/build/assets/app-CBDNEjAz.css" /><link rel="modulepreload" as="script" href="https://vueltalaazulita.com/build/assets/app-BSAh87Jk.js" /><link rel="stylesheet" href="https://vueltalaazulita.com/build/assets/app-CBDNEjAz.css" />
23<script type="module" src="https://vueltalaazulita.com/build/assets/app-BSAh87Jk.js"></script>
23    
24    <!-- Google Fonts -->
25    <link rel="preconnect" href="https://fonts.googleapis.com">
26    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
27    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Oswald:wght@500;600;700&display=swap" rel="stylesheet">
28
29    <!-- Custom Premium Styles -->
30    <style>
31        :root {
32            --primary: #ff5a00;
33            --primary-rgb: 255, 90, 0;
34            --dark-bg: #050806;
35            --card-bg: #0d1511;
36            --border-color: rgba(255, 90, 0, 0.15);
37            --text-gray: #94a3b8;
38        }
39
40        body {
41            background-color: var(--dark-bg);
42            color: #f1f5f9;
43            font-family: 'Montserrat', sans-serif;
44            overflow-x: hidden;
45        }
46
47        .text-muted {
48            color: #cbd5e1 !important; /* Brighter light gray for high contrast readability */
49        }
50
51        .text-white-50 {
52            color: #e2e8f0 !important; /* Brighter silver-white for readability */
53        }
54
55        .opacity-75 {
56            opacity: 0.92 !important; /* Increase opacity for high readability */
57        }
58        
59        .font-heading {
60            font-family: 'Oswald', sans-serif;
61        }
62
63        /* Glassmorphism Styles */
64        .glass-panel {
65            background: rgba(13, 21, 17, 0.75);
66            backdrop-filter: blur(12px);
67            border: 1px solid var(--border-color);
68            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
69            border-radius: 16px;
70        }
71
72        .glass-badge {
73            background: rgba(255, 255, 255, 0.04);
74            backdrop-filter: blur(8px);
75            border: 1px solid rgba(255, 255, 255, 0.08);
76            transition: all 0.3s ease-in-out;
77        }
78
79        .glass-badge:hover {
80            background: rgba(255, 255, 255, 0.08);
81            border-color: rgba(255, 90, 0, 0.3);
82        }
83
84        /* Floating / Parallax effect */
85        .neon-glow {
86            text-shadow: 0 0 20px rgba(255, 90, 0, 0.4);
87        }
88
89        .border-glow:hover {
90            border-color: var(--primary) !important;
91            box-shadow: 0 0 20px rgba(255, 90, 0, 0.2) !important;
92        }
93
94        /* Photo Placeholders */
95        .photo-placeholder {
96            min-height: 280px;
97            background: linear-gradient(135deg, rgba(13, 21, 17, 0.6) 0%, rgba(5, 8, 6, 0.9) 100%);
98            border: 2px dashed rgba(255, 90, 0, 0.25) !important;
99            transition: all 0.3s ease-in-out;
100        }
101
102        .photo-placeholder:hover {
103            background: linear-gradient(135deg, rgba(255, 90, 0, 0.04) 0%, rgba(13, 21, 17, 0.8) 100%);
104            border-color: var(--primary) !important;
105        }
106
107        /* Reveal on Scroll Animations */
108        .reveal {
109            opacity: 0;
110            transform: translateY(40px);
111            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
112        }
113
114        .reveal.active {
115            opacity: 1;
116            transform: translateY(0);
117        }
118
119        /* Custom Scrollbar */
120        ::-webkit-scrollbar {
121            width: 8px;
122        }
123        ::-webkit-scrollbar-track {
124            background: var(--dark-bg);
125        }
126        ::-webkit-scrollbar-thumb {
127            background: #1e3028;
128            border-radius: 4px;
129        }
130        ::-webkit-scrollbar-thumb:hover {
131            background: var(--primary);
132        }
133
134        /* Background Slideshow Zoom */
135        @keyframes subtle-zoom {
136            0% { transform: scale(1.05); }
137            50% { transform: scale(1.12); }
138            100% { transform: scale(1.05); }
139        }
140
141        .animate-bg-zoom {
142            animation: subtle-zoom 25s ease-in-out infinite;
143        }
144
145        @keyframes heart-pulse {
146            0% { transform: scale(1); opacity: 0.9; }
147            50% { transform: scale(1.15); opacity: 1; }
148            100% { transform: scale(1); opacity: 0.9; }
149        }
150
151        .animate-heart-pulse {
152            animation: heart-pulse 2s infinite ease-in-out;
153            display: inline-block;
154        }
155
156        .slide {
157            position: absolute;
158            inset: 0;
159            width: 100%;
160            height: 100%;
161            background-size: cover;
162            background-position: center;
163            opacity: 0;
164            transition: opacity 2s ease-in-out;
165            z-index: 0;
166        }
167        
168        .slide.active {
169            opacity: 1;
170        }
171
172        /* Sticky transparent navbar */
173        .navbar-custom {
174            background: rgba(13, 21, 17, 0.6);
175            backdrop-filter: blur(10px);
176            border-bottom: 1px solid rgba(255, 90, 0, 0.1);
177            transition: background 0.3s;
178        }
179
180        .navbar-custom.scrolled {
181            background: rgba(13, 21, 17, 0.95);
182            border-bottom: 1px solid rgba(255, 90, 0, 0.25);
183        }
184
185        .nav-link {
186            font-size: 0.85rem;
187            font-weight: 600;
188            letter-spacing: 0.05em;
189            transition: color 0.2s;
190        }
191        .nav-link:hover, .nav-link.active {
192            color: var(--primary) !important;
193        }
194
195        /* Custom Timeline for History */
196        .timeline-step {
197            position: relative;
198            padding-left: 30px;
199            border-left: 2px solid rgba(255, 90, 0, 0.2);
200        }
201
202        .timeline-step::before {
203            content: '';
204            position: absolute;
205            left: -7px;
206            top: 5px;
207            width: 12px;
208            height: 12px;
209            border-radius: 50%;
210            background: var(--primary);
211            box-shadow: 0 0 10px var(--primary);
212        }
213
214        /* Interactive Category Hover */
215        .cat-card {
216            transition: all 0.3s ease-in-out;
217            background: rgba(13, 21, 17, 0.5) !important;
218        }
219        .cat-card:hover {
220            transform: translateY(-5px);
221            background: rgba(13, 21, 17, 0.9) !important;
222            border-color: var(--primary) !important;
223        }
224
225        /* Minimalist & Prolijo Button Styling System */
226        .btn-pro-primary {
227            background: linear-gradient(135deg, #ff9000 0%, #ff5a00 100%) !important;
228            color: #050806 !important;
229            font-family: 'Oswald', sans-serif;
230            font-weight: 700;
231            text-transform: uppercase;
232            letter-spacing: 0.04em;
233            border: 1px solid rgba(255, 255, 255, 0.35) !important;
234            border-radius: 50rem;
235            padding: 0.7rem 1.6rem;
236            font-size: 0.95rem;
237            box-shadow: 0 4px 18px rgba(255, 90, 0, 0.3);
238            transition: all 0.25s ease-in-out;
239            text-decoration: none !important;
240            display: inline-flex;
241            align-items: center;
242            justify-content: center;
243        }
244        .btn-pro-primary:hover {
245            transform: translateY(-2px);
246            box-shadow: 0 6px 25px rgba(255, 90, 0, 0.5);
247            color: #000000 !important;
248        }
249
250        .btn-pro-danger {
251            background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
252            color: #ffffff !important;
253            font-family: 'Oswald', sans-serif;
254            font-weight: 700;
255            text-transform: uppercase;
256            letter-spacing: 0.04em;
257            border: 1px solid rgba(255, 255, 255, 0.3) !important;
258            border-radius: 50rem;
259            padding: 0.7rem 1.5rem;
260            font-size: 0.92rem;
261            box-shadow: 0 4px 16px rgba(225, 29, 72, 0.3);
262            transition: all 0.25s ease-in-out;
263            text-decoration: none !important;
264            display: inline-flex;
265            align-items: center;
266            justify-content: center;
267        }
268        .btn-pro-danger:hover {
269            transform: translateY(-2px);
270            box-shadow: 0 6px 22px rgba(225, 29, 72, 0.5);
271            color: #ffffff !important;
272        }
273
274        .btn-pro-outline {
275            background: rgba(13, 21, 17, 0.75) !important;
276            color: #f8fafc !important;
277            font-family: 'Oswald', sans-serif;
278            font-weight: 600;
279            text-transform: uppercase;
280            letter-spacing: 0.04em;
281            border: 1px solid rgba(255, 90, 0, 0.4) !important;
282            border-radius: 50rem;
283            padding: 0.65rem 1.4rem;
284            font-size: 0.9rem;
285            backdrop-filter: blur(8px);
286            transition: all 0.25s ease-in-out;
287            text-decoration: none !important;
288            display: inline-flex;
289            align-items: center;
290            justify-content: center;
291        }
292        .btn-pro-outline:hover {
293            transform: translateY(-2px);
294            border-color: #ff5a00 !important;
295            background: rgba(255, 90, 0, 0.18) !important;
296            color: #ffffff !important;
297        }
298
299        @media (max-width: 768px) {
300            .btn-pro-primary, .btn-pro-danger, .btn-pro-outline {
301                width: 100% !important;
302                padding: 0.6rem 1.1rem !important;
303                font-size: 0.85rem !important;
304                letter-spacing: 0.02em !important;
305            }
306            .btn-pro-primary i, .btn-pro-danger i, .btn-pro-outline i {
307                font-size: 1rem !important;
308            }
309        }
310    </style>
311</head>
312<body class="min-vh-100 d-flex flex-column text-light">
313
314    
315    <!-- Sticky Transparent Navbar -->
316    <nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom" id="mainNavbar">
317        <div class="container">
318            <a class="navbar-brand fw-bold text-uppercase d-flex align-items-center gap-2 font-heading" href="#" style="letter-spacing: 0.05em;">
319                <img src="https://vueltalaazulita.com/images/logo-vuelta-2026.png" alt="Logo Vuelta a La Azulita" height="42" class="d-inline-block align-top" style="filter: drop-shadow(0 0 4px rgba(255, 90, 0, 0.25));">
320                Vuelta a <span class="text-primary">La Azulita</span>
321            </a>
322            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
323                <span class="navbar-toggler-icon"></span>
324            </button>
325            <div class="collapse navbar-collapse" id="navbarNav">
326                <ul class="navbar-nav ms-auto gap-1 font-heading text-uppercase">
327                    <li class="nav-item"><a class="nav-link" href="#hero">Inicio</a></li>
328                                            <li class="nav-item"><a class="nav-link text-white-50 opacity-75" href="https://vueltalaazulita.com/resultados"><i class="bi bi-hourglass-split me-1"></i> Resultados (En Revisión)</a></li>
329                                        <li class="nav-item"><a class="nav-link text-warning fw-bold" href="#cierre-vuelta"><i class="bi bi-award-fill me-1"></i> Campeones Generales</a></li>
330                    <li class="nav-item"><a class="nav-link" href="#sobre-la-vuelta">Identidad</a></li>
331                    <li class="nav-item"><a class="nav-link" href="#historia">Historia</a></li>
332                    <li class="nav-item"><a class="nav-link" href="#recorrido">Recorrido</a></li>
333                    <li class="nav-item"><a class="nav-link" href="#categorias">Categorías</a></li>
334                    <li class="nav-item"><a class="nav-link" href="#destino">Destino</a></li>
335                                        <li class="nav-item">
336                        <a class="nav-link text-warning disabled opacity-50" 
337                           id="nav-teams-link" 
338                           href="https://vueltalaazulita.com/equipos"
339                           style="pointer-events: none; cursor: not-allowed;">
340                            <i class="bi bi-trophy-fill"></i> Equipos
341                        </a>
342                    </li>
343                </ul>
344            </div>
345        </div>
346    </nav>
347
348    <!-- Background Parallax/Slideshow Hero Header -->
349    <header id="hero" class="position-relative min-vh-100 d-flex align-items-center justify-content-center overflow-hidden pt-5">
350        <div id="slideshow-container" class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 0;">
351            <!-- Subtle Overlay -->
352            <div class="position-absolute top-0 start-0 w-100 h-100" 
353                 style="background: linear-gradient(to bottom, rgba(5,8,6,0.92) 0%, rgba(5,8,6,0.7) 50%, rgba(5,8,6,0.95) 100%); z-index: 1;">
354            </div>
355        </div>
356
357        <div class="container position-relative z-2 px-4 text-center mt-5" style="max-width: 900px; z-index: 2;">
358            <!-- Hero Logo -->
359            <div class="mb-4 d-flex justify-content-center">
360                <img src="https://vueltalaazulita.com/images/logo-vuelta-2026.png" alt="Logo Vuelta a La Azulita" class="img-fluid" style="max-height: 250px; filter: drop-shadow(0 0 25px rgba(255, 90, 0, 0.45));">
361            </div>
362
363            <!-- Prominent Date & Location Hero Panel -->
364            <div class="my-4 py-3 px-4 rounded-4 glass-panel border-glow d-inline-block text-center mx-auto" style="border-color: rgba(255, 90, 0, 0.45) !important; background: rgba(13, 21, 17, 0.85); box-shadow: 0 0 25px rgba(255, 90, 0, 0.15);">
365                <h3 class="font-heading text-uppercase text-white m-0 tracking-wider fs-3">
366                    <span class="text-primary"><i class="bi bi-calendar3"></i> 20 AL 22 DE AGOSTO, 2026</span>
367                </h3>
368                <div class="text-white-50 mt-1 small text-uppercase tracking-widest fw-bold" style="font-size: 0.85rem; letter-spacing: 0.08em;">
369                    XXIX Edición · <i class="bi bi-geo-alt-fill text-primary"></i> La Azulita, Mérida, Venezuela
370                </div>
371            </div>
372
373            <h3 class="font-heading text-uppercase text-primary tracking-wide fs-4 mt-2 mb-4">
374                La Universidad del Ciclismo de Montaña en Venezuela
375            </h3>
376
377            <p class="lead text-light opacity-75 max-w-2xl mx-auto mb-4 fw-light" style="font-size: 1.15rem;">
378                Cuatro etapas, montaña real, técnica, resistencia y una tradición que ha convertido a La Azulita en uno de los grandes referentes del MTB venezolano y andino.
379            </p>
380            
381            <p class="text-white-50 mx-auto mb-5 small text-center" style="max-width: 700px; line-height: 1.6;">
382                Del 20 al 22 de agosto de 2026, la XXIX Vuelta Internacional a La Azulita en Bicicleta de Montaña “Antonio Prieto” vuelve a reunir a ciclistas, equipos y aficionados en un recorrido exigente por las aldeas, ascensos y descensos del municipio Andrés Bello.
383            </p>
384
385            <!-- Navigation Anchors -->
386            <div class="d-flex flex-wrap justify-content-center gap-3 align-items-center mb-5">
387                <a href="#recorrido" class="btn btn-outline-light rounded-pill px-4 py-2.5 text-uppercase fw-bold glass-badge border-0 font-heading">
388                    <i class="bi bi-map-fill text-primary"></i> Ver etapas
389                </a>
390                <a href="#categorias" class="btn btn-outline-light rounded-pill px-4 py-2.5 text-uppercase fw-bold glass-badge border-0 font-heading">
391                    <i class="bi bi-tags-fill text-primary"></i> Ver categorías
392                </a>
393                <a href="#destino" class="btn btn-outline-light rounded-pill px-4 py-2.5 text-uppercase fw-bold glass-badge border-0 font-heading">
394                    <i class="bi bi-geo-alt-fill text-primary"></i> Conocer La Azulita
395                </a>
396            </div>
397            
398            <!-- Parallax indicator -->
399            <div class="w-100 d-flex justify-content-center mt-3">
400                <a href="#sobre-la-vuelta" class="text-white-50 text-decoration-none animate-bounce" style="animation: bounce 2s infinite;">
401                    <i class="bi bi-chevron-double-down fs-4"></i>
402                </a>
403            </div>
404        </div>
405    </header>
406
407    <!-- SECTION: Ganadores de la Etapa & Cuadro de Honor -->
408    
409    <!-- BANNER DESTACADO: GRAN CIERRE DE LA XXIX VUELTA A LA AZULITA -->
410    <section class="py-4 position-relative z-3 my-2" id="cierre-vuelta">
411        <div class="container">
412            <div class="glass-panel p-4 p-md-5 text-center max-w-5xl mx-auto border-glow rounded-4" style="background: radial-gradient(circle at center, rgba(255, 90, 0, 0.28) 0%, rgba(13, 21, 17, 0.97) 100%); border: 2px solid #ff5a00 !important; box-shadow: 0 0 50px rgba(255, 90, 0, 0.4);">
413                <div class="py-2">
414                    <span class="badge bg-warning text-dark font-heading text-uppercase px-4 py-2 rounded-pill fw-bold mb-3 shadow-lg" style="font-size: 0.95rem; letter-spacing: 0.08em; background: linear-gradient(135deg, #ffc107 0%, #ff9000 100%);">
415                        🏁 ¡XXIX VUELTA A LA AZULITA CONCLUIDA CON ÉXITO!
416                    </span>
417                    <h2 class="fw-extrabold text-uppercase text-white font-heading display-5 mb-2 text-shadow">
418                        Gran Cierre de Competencia 2026
419                    </h2>
420                    <p class="text-white-50 max-w-2xl mx-auto fs-5 mb-4">
421                        Agradecemos a todos los atletas, equipos, patrocinadores y a la afición azulitense por hacer posible la edición más vibrante en la historia de la carrera.
422                    </p>
423
424                    <!-- Tarjetas de Campeones Destacados -->
425                    <div class="row g-4 justify-content-center my-3 text-start">
426                        <!-- Campeón Masculino -->
427                        <div class="col-md-6">
428                            <div class="card bg-dark border-0 rounded-4 overflow-hidden shadow-lg h-100 position-relative border-glow" style="background: linear-gradient(145deg, rgba(255, 90, 0, 0.18) 0%, rgba(13, 21, 17, 0.96) 100%) !important; border: 2px solid rgba(255, 90, 0, 0.6) !important;">
429                                <div class="row g-0 align-items-center h-100">
430                                    <div class="col-5 position-relative overflow-hidden" style="min-height: 220px; max-height: 260px;">
431                                        <img src="https://vueltalaazulita.com/images/campeon_masculino.jpg" alt="Jhon Jairo Botero - Campeón Masculino" class="w-100 h-100 object-fit-cover d-block" style="object-position: center top;">
432                                        <span class="position-absolute top-0 start-0 m-2 badge bg-warning text-dark font-heading fw-bold px-2 py-1 shadow" style="font-size: 0.75rem;">
433                                            🥇 CAMPEÓN
434                                        </span>
435                                    </div>
436                                    <div class="col-7">
437                                        <div class="card-body p-3.5">
438                                            <span class="badge bg-primary text-uppercase font-heading fw-bold px-2.5 py-1 mb-1" style="font-size: 0.7rem;">Campeón Masculino</span>
439                                            <h4 class="fw-bold text-white font-heading mb-1 text-uppercase tracking-wide">JHON JAIRO BOTERO</h4>
440                                            <div class="badge bg-warning text-dark font-heading fw-extrabold px-2.5 py-0.5 mb-2">DORSAL #54</div>
441                                            <div class="text-warning small fw-bold mb-1"><i class="bi bi-tags-fill me-1"></i>Master B</div>
442                                            <div class="text-white-50 small"><i class="bi bi-shield-shaded me-1"></i>Colombia Master B</div>
443                                        </div>
444                                    </div>
445                                </div>
446                            </div>
447                        </div>
448
449                        <!-- Campeona Femenina -->
450                        <div class="col-md-6">
451                            <div class="card bg-dark border-0 rounded-4 overflow-hidden shadow-lg h-100 position-relative border-glow" style="background: linear-gradient(145deg, rgba(244, 63, 94, 0.18) 0%, rgba(13, 21, 17, 0.96) 100%) !important; border: 2px solid rgba(244, 63, 94, 0.6) !important;">
452                                <div class="row g-0 align-items-center h-100">
453                                    <div class="col-5 position-relative overflow-hidden" style="min-height: 220px; max-height: 260px;">
454                                        <img src="https://vueltalaazulita.com/images/campeona_femenina.jpg" alt="Andrea Contreras - Campeona Femenina" class="w-100 h-100 object-fit-cover d-block" style="object-position: center top;">
455                                        <span class="position-absolute top-0 start-0 m-2 badge bg-danger text-white font-heading fw-bold px-2 py-1 shadow" style="font-size: 0.75rem; background: #f43f5e !important;">
456                                            🥇 CAMPEONA
457                                        </span>
458                                    </div>
459                                    <div class="col-7">
460                                        <div class="card-body p-3.5">
461                                            <span class="badge bg-danger text-uppercase font-heading fw-bold px-2.5 py-1 mb-1" style="font-size: 0.7rem; background: #f43f5e !important;">Campeona Femenina</span>
462                                            <h4 class="fw-bold text-white font-heading mb-1 text-uppercase tracking-wide">ANDREA CONTRERAS</h4>
463                                            <div class="badge bg-danger text-white font-heading fw-extrabold px-2.5 py-0.5 mb-2" style="background: #e11d48 !important;">DORSAL #175</div>
464                                            <div class="text-danger small fw-bold mb-1" style="color: #fb7185 !important;"><i class="bi bi-tags-fill me-1"></i>Femenino Libre</div>
465                                            <div class="text-white-50 small"><i class="bi bi-shield-shaded me-1"></i>Cookies CU</div>
466                                        </div>
467                                    </div>
468                                </div>
469                            </div>
470                        </div>
471                    </div>
472
473                    <div class="d-flex flex-wrap justify-content-center gap-3 mt-4">
474                                                    <a href="https://vueltalaazulita.com/resultados" class="btn-pro-outline text-warning">
475                                <i class="bi bi-hourglass-split me-1.5"></i> Resultados en Revisión por Comisarios
476                            </a>
477                                            </div>
478                </div>
479            </div>
480        </div>
481    </section>
482                    <!-- SECTION BANNER: ACCESO DIRECTO A CLASIFICACIONES EN PÁGINA INTERNA -->
483    <section class="py-5 position-relative z-3 my-4" id="seccion-clasificaciones">
484        <div class="container">
485            <div class="glass-panel p-4 p-md-5 text-center max-w-5xl mx-auto border-glow rounded-4" style="background: radial-gradient(circle at center, rgba(255, 90, 0, 0.25) 0%, rgba(13, 21, 17, 0.96) 100%); border: 2px solid rgba(255, 90, 0, 0.6) !important; box-shadow: 0 0 35px rgba(255, 90, 0, 0.35);">
486                <div class="py-2">
487                    <span class="badge bg-warning text-dark font-heading text-uppercase px-3 py-1.5 rounded-pill fw-bold mb-3" style="font-size: 0.85rem; letter-spacing: 0.05em;">
488                        📊 CLASIFICACIONES OFICIALES Y BOLETÍN EXTRAOFICIAL
489                    </span>
490                    <h2 class="fw-extrabold text-uppercase text-white font-heading display-6 mb-2">
491                        Resultados y Clasificaciones por Etapas
492                    </h2>
493                    <p class="text-white-50 max-w-2xl mx-auto mb-4" style="font-size: 1.05rem;">
494                        Accede a la sección de clasificaciones oficiales para ver los tiempos de las 3 etapas concluidas, el acumulado de cada competidor por categoría (con E-Bike en exhibición de última), espacios reservados para la 4ta etapa, el resultado general de la carrera y descarga del Boletín en PDF.
495                    </p>
496
497                    <!-- Buscador Rápido por Número de Dorsal -->
498                    <form action="https://vueltalaazulita.com/clasificaciones" method="GET" class="max-w-md mx-auto mb-4">
499                        <div class="input-group">
500                            <span class="input-group-text bg-dark text-warning border-secondary border-opacity-50"><i class="bi bi-123"></i></span>
501                            <input type="number" name="bib" class="form-control bg-dark text-white border-secondary border-opacity-50 fw-bold" placeholder="Consultar Dorsal (Ej. 54, 12...)" required>
502                            <button class="btn btn-warning text-dark font-heading text-uppercase fw-bold px-3" type="submit">
503                                <i class="bi bi-search me-1"></i> Buscar
504                            </button>
505                        </div>
506                    </form>
507
508                    <!-- Botones de Acción Principal a la Página Interna de Clasificaciones -->
509                    <div class="d-flex flex-column flex-sm-row justify-content-center align-items-center gap-2.5 max-w-3xl mx-auto">
510                                                    <a href="https://vueltalaazulita.com/clasificaciones?stage_id=4" class="btn-pro-primary">
511                                <i class="bi bi-bar-chart-line-fill me-1"></i> Clasificaciones Completas
512                            </a>
513                        
514                                                    <a href="https://vueltalaazulita.com/prensa/boletin-preliminar-general/pdf?stage_id=4" class="btn-pro-danger">
515                                <i class="bi bi-file-earmark-pdf-fill me-1"></i> Descargar Boletín PDF
516                            </a>
517                        
518                                            </div>
519                </div>
520            </div>
521        </div>
522    </section>
523
524    <!-- SECTION: Solidaridad con Venezuela -->
525    <section class="py-3 position-relative z-3 my-4">
526        <div class="container">
527            <div class="glass-panel p-4 max-w-4xl mx-auto border-glow" style="border: 1px solid rgba(255, 90, 0, 0.3) !important; background: rgba(13, 21, 17, 0.85); box-shadow: 0 0 25px rgba(255, 90, 0, 0.15);">
528                <div class="d-flex flex-column flex-md-row align-items-center gap-4 px-md-3 text-center text-md-start">
529                    <div class="text-primary fs-1 animate-heart-pulse">
530                        <i class="bi bi-heart-fill" style="color: #ff5a00;"></i>
531                    </div>
532                    <div>
533                        <h5 class="fw-bold m-0 font-heading text-uppercase text-white" style="letter-spacing: 0.05em;">Solidaridad con Venezuela</h5>
534                        <p class="text-light opacity-75 small m-0 mt-2" style="line-height: 1.6;">
535                            La organización de la <strong>Vuelta Internacional a La Azulita</strong> expresa su más profunda solidaridad y apoyo a todas las víctimas y familias afectadas por el doble terremoto ocurrido el pasado 24 de Junio en nuestro país. Acompañamos en su dolor y dificultad a los habitantes del estado La Guaira, la región capital y las demás zonas de la geografía nacional afectadas por este lamentable suceso, manifestando nuestra unión y aliento en estos momentos difíciles. ¡Fuerza, Venezuela!
536                        </p>
537                    </div>
538                </div>
539            </div>
540        </div>
541    </section>
542
543    <!-- SECTION: Sobre la Vuelta / Identidad -->
544    <section id="sobre-la-vuelta" class="py-5 my-5 reveal">
545        <div class="container">
546            <div class="row g-5 align-items-center">
547                <div class="col-lg-6">
548                    <span class="text-primary text-uppercase tracking-wider font-heading fw-bold d-block mb-2">Mucho más que una carrera</span>
549                    <h2 class="fw-bold text-white font-heading text-uppercase mb-4">La Universidad del Ciclismo de Montaña</h2>
550                    <p class="text-light opacity-75 mb-3" style="line-height: 1.7;">
551                        La Vuelta a La Azulita no es solo una competencia: es una escuela de carácter, estrategia y resistencia sobre la bicicleta. Por eso muchos la reconocen como <strong>La Universidad del Ciclismo de Montaña en Venezuela</strong>, un evento donde cada etapa pone a prueba la preparación física, la técnica y la mentalidad del corredor.
552                    </p>
553                    <p class="text-light opacity-75 mb-4" style="line-height: 1.7;">
554                        Su historia, su dureza y el respeto que genera entre corredores y aficionados la han convertido en una cita emblemática del ciclismo de montaña. Aquí no solo se compite: aquí se aprende, se sufre, se crece y se deja huella.
555                    </p>
556                    <div class="border-start border-primary border-4 ps-3 py-1 my-3 bg-dark bg-opacity-20 rounded-end">
557                        <p class="m-0 small text-white-50 italic">
558                            La Vuelta a La Azulita es una competencia de ciclismo de montaña con historia, identidad y carácter propio. Nació en 1995 y desde entonces se ha consolidado como uno de los eventos más respetados del MTB en Venezuela. Su esencia está en la montaña, en el pueblo y en una ruta que exige lo mejor de cada corredor.
559                        </p>
560                    </div>
561                </div>
562                <div class="col-lg-6">
563                    <!-- Action image -->
564                    <div class="position-relative overflow-hidden rounded-3 shadow border-glow" style="border: 1px solid var(--border-color); aspect-ratio: 16/9; max-height: 380px;">
565                        <img src="https://vueltalaazulita.com/images/foto_montana.jpg" alt="Acción en la Montaña" class="w-100 h-100 object-fit-cover d-block" style="transition: transform 0.5s ease-in-out;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
566                        <div class="position-absolute bottom-0 start-0 w-100 p-3" style="background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);">
567                            <span class="text-white fw-bold font-heading text-uppercase tracking-wider" style="font-size: 0.85rem; letter-spacing: 0.05em;">Acción en la Montaña</span>
568                        </div>
569                    </div>
570                </div>
571            </div>
572        </div>
573    </section>
574
575    <!-- SECTION: Historia -->
576    <section id="historia" class="py-5 my-5 bg-dark bg-opacity-25 reveal">
577        <div class="container">
578            <div class="row g-5 align-items-center flex-row-reverse">
579                <div class="col-lg-6">
580                    <span class="text-primary text-uppercase tracking-wider font-heading fw-bold d-block mb-2">Historia y Tradición</span>
581                    <h2 class="fw-bold text-white font-heading text-uppercase mb-4">Una tradición nacida en la montaña</h2>
582                    
583                    <div class="timeline-step mb-4">
584                        <h5 class="fw-bold text-white font-heading mb-1">1995 — El Origen</h5>
585                        <p class="text-muted small m-0">Nació como una iniciativa deportiva impulsada por la comunidad azulitense y por un grupo de jóvenes comprometidos con crear un evento que estuviera a la altura de la geografía y el espíritu del pueblo.</p>
586                    </div>
587
588                    <div class="timeline-step mb-4">
589                        <h5 class="fw-bold text-white font-heading mb-1">Antonio Argenis Prieto — Legado Eterno</h5>
590                        <p class="text-muted small m-0">El mentor de la idea fue Antonio Argenis Prieto, figura clave de la organización en sus inicios, y con el tiempo la competencia adoptó 
590su nombre como homenaje permanente a su dedicación.</p>
591                    </div>
592
593                    <div class="timeline-step">
594                        <h5 class="fw-bold text-white font-heading mb-1">Actualidad — Referente de Prestigio</h5>
595                        <p class="text-muted small m-0">Años después, la carrera pasó a consolidarse como una referencia del ciclismo de montaña, reforzando su vocación competitiva y su proyección nacional e internacional en los Andes venezolanos.</p>
596                    </div>
597                </div>
598                <div class="col-lg-6">
599                    <!-- Tradition image -->
600                    <div class="position-relative overflow-hidden rounded-3 shadow border-glow" style="border: 1px solid var(--border-color); aspect-ratio: 16/9; max-height: 380px;">
601                        <img src="https://vueltalaazulita.com/images/foto_salida.jpg" alt="Partida de la Vuelta" class="w-100 h-100 object-fit-cover d-block" style="transition: transform 0.5s ease-in-out;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
602                        <div class="position-absolute bottom-0 start-0 w-100 p-3" style="background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);">
603                            <span class="text-white fw-bold font-heading text-uppercase tracking-wider" style="font-size: 0.85rem; letter-spacing: 0.05em;">Partida de la Competencia en La Azulita</span>
604                        </div>
605                    </div>
606                </div>
607            </div>
608        </div>
609    </section>
610
611    <!-- SECTION: Experiencia y Etapas -->
612    <section id="recorrido" class="py-5 my-5 reveal">
613        <div class="container">
614            <div class="text-center mb-5">
615                <span class="text-primary text-uppercase tracking-wider font-heading fw-bold d-block mb-2">El Trazado Oficial</span>
616                <h2 class="fw-bold text-white font-heading text-uppercase display-6">Recorrido Oficial 2026</h2>
617                <p class="text-muted max-w-2xl mx-auto mt-2" style="max-width: 600px;">
618                    Cuatro etapas diseñadas para exigir al máximo la técnica, la resistencia y la capacidad de recuperación de cada corredor.
619                </p>
620            </div>
621
622            <!-- Experience Callout Banner -->
623            <div class="glass-panel p-4 mb-5 border-start border-primary border-4 text-center text-md-start">
624                <div class="row align-items-center">
625                    <div class="col-md-9 px-4">
626                        <h5 class="fw-bold text-white font-heading text-uppercase m-0">Cuatro etapas. Una sola verdad: aquí se viene a correr de verdad.</h5>
627                        <p class="text-muted small m-0 mt-1">La edición XXIX se disputará en cuatro etapas distribuidas en tres días (del 20 al 22 de agosto), con un recorrido total aproximado de 107 kilómetros.</p>
628                    </div>
629                    <div class="col-md-3 text-md-end px-4 mt-3 mt-md-0">
630                        <span class="text-primary font-heading fw-bold fs-5 tracking-widest text-uppercase">107 KM TOTAL</span>
631                    </div>
632                </div>
633            </div>
634
635            <div class="row g-4 justify-content-center">
636                <!-- Etapas Cards Grid -->
637                <div class="col-lg-10 col-xl-9">
638                    <div class="accordion border-0" id="stagesAccordion">
639                        
640                        <!-- Etapa 1 -->
641                        <div class="accordion-item glass-panel mb-3 border-0 overflow-hidden">
642                            <h2 class="accordion-header">
643                                <button class="accordion-button bg-transparent text-white font-heading text-uppercase fw-bold py-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStage1" aria-expanded="false" aria-controls="collapseStage1">
644                                    <span class="text-primary me-3">Etapa 1</span> 20 de Agosto · 31,8 Km
645                                </button>
646                            </h2>
647                            <div id="collapseStage1" class="accordion-collapse collapse" data-bs-parent="#stagesAccordion">
648                                <div class="accordion-body text-white-50 bg-black bg-opacity-20 p-4">
649                                    <div class="row g-2 mb-4">
650                                        <div class="col-6 col-md-3">
651                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
652                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Distancia</small>
653                                                <span class="text-white fw-bold font-heading">31.8 km</span>
654                                            </div>
655                                        </div>
656                                        <div class="col-6 col-md-3">
657                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
658                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Desnivel (+)</small>
659                                                <span class="text-primary fw-bold font-heading">~1,100 m</span>
660                                            </div>
661                                        </div>
662                                        <div class="col-6 col-md-3">
663                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
664                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Dificultad</small>
665                                                <span class="text-danger fw-bold font-heading">Muy Alta</span>
666                                            </div>
667                                        </div>
668                                        <div class="col-6 col-md-3">
669                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
670                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Tipo de Ruta</small>
671                                                <span class="text-white fw-bold font-heading" style="font-size: 0.85rem;">Circular</span>
672                                            </div>
673                                        </div>
674                                    </div>
675                                    <div class="mb-2"><strong class="text-white">Hora de salida:</strong> 10:00 a. m.</div>
676                                    <div class="mb-2"><strong class="text-white">Ruta de competencia:</strong></div>
677                                    <p class="m-0 text-white font-monospace text-uppercase" style="font-size: 0.85rem;">La Azulita – Mesa Alta – Saisayal – Paramito – Las Adjuntas – San Luis – El Salado – Agua Blanca – La Victoria – La Azulita.</p>
678                                    <div class="mt-3">
679                                        <iframe src="https://es.wikiloc.com/wikiloc/embedv2.do?id=225559444&elevation=on&images=on&maptype=H" width="100%" height="350" style="border:0; border-radius: 8px; background: #000;" allowfullscreen="" loading="lazy"></iframe>
680                                        <div class="text-end mt-2">
681                                            <a href="https://loc.wiki/t/225559444?wa=sc" target="_blank" class="btn btn-sm btn-outline-primary fw-bold font-heading"><i class="bi bi-box-arrow-up-right"></i> Abrir Mapa Completo</a>
682                                        </div>
683                                    </div>
684                                </div>
685                            </div>
686                        </div>
687
688                        <!-- Etapa 2 -->
689                        <div class="accordion-item glass-panel mb-3 border-0 overflow-hidden">
690                            <h2 class="accordion-header">
691                                <button class="accordion-button bg-transparent text-white font-heading text-uppercase fw-bold py-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStage2" aria-expanded="false" aria-controls="collapseStage2">
692                                    <span class="text-primary me-3">Etapa 2</span> 21 de Agosto · 36,3 Km (Etapa Reina)
693                                </button>
694                            </h2>
695                            <div id="collapseStage2" class="accordion-collapse collapse" data-bs-parent="#stagesAccordion">
696                                <div class="accordion-body text-white-50 bg-black bg-opacity-20 p-4">
697                                    <div class="row g-2 mb-4">
698                                        <div class="col-6 col-md-3">
699                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
700                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Distancia</small>
701                                                <span class="text-white fw-bold font-heading">36.3 km</span>
702                                            </div>
703                                        </div>
704                                        <div class="col-6 col-md-3">
705                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
706                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Desnivel (+)</small>
707                                                <span class="text-primary fw-bold font-heading">~1,450 m</span>
708                                            </div>
709                                        </div>
710                                        <div class="col-6 col-md-3">
711                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
712                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Dificultad</small>
713                                                <span class="text-danger fw-bold font-heading" style="text-shadow: 0 0 10px rgba(220, 53, 69, 0.4);">Extrema (Reina)</span>
714                                            </div>
715                                        </div>
716                                        <div class="col-6 col-md-3">
717                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
718                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Tipo de Ruta</small>
719                                                <span class="text-white fw-bold font-heading" style="font-size: 0.85rem;">Circular</span>
720                                            </div>
721                                        </div>
722                                    </div>
723                                    <div class="mb-2"><strong class="text-white">Hora de salida:</strong> 10:00 a. m.</div>
724                                    <div class="mb-2"><strong class="text-white">Ruta de competencia:</strong></div>
725                                    <p class="m-0 text-white font-monospace text-uppercase" style="font-size: 0.85rem;">La Azulita – Agua Blanca – El Salado – Mirabel – Las Cumbres – Sinaral – Agua Blanca – La Azulita.</p>
726                                    <div class="mt-3">
727                                        <iframe src="https://es.wikiloc.com/wikiloc/embedv2.do?id=225560807&elevation=on&images=on&maptype=H" width="100%" height="350" style="border:0; border-radius: 8px; background: #000;" allowfullscreen="" loading="lazy"></iframe>
728                                        <div class="text-end mt-2">
729                                            <a href="https://loc.wiki/t/225560807?wa=sc" target="_blank" class="btn btn-sm btn-outline-primary fw-bold font-heading"><i class="bi bi-box-arrow-up-right"></i> Abrir Mapa Completo</a>
730                                        </div>
731                                    </div>
732                                </div>
733                            </div>
734                        </div>
735
736                        <!-- Etapa 3 -->
737                        <div class="accordion-item glass-panel mb-3 border-0 overflow-hidden">
738                            <h2 class="accordion-header">
739                                <button class="accordion-button bg-transparent text-white font-heading text-uppercase fw-bold py-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStage3" aria-expanded="false" aria-controls="collapseStage3">
740                                    <span class="text-primary me-3">Etapa 3</span> 22 de Agosto (Mañana) · 24 Km
741                                </button>
742                            </h2>
743                            <div id="collapseStage3" class="accordion-collapse collapse" data-bs-parent="#stagesAccordion">
744                                <div class="accordion-body text-white-50 bg-black bg-opacity-20 p-4">
745                                    <div class="row g-2 mb-4">
746                                        <div class="col-6 col-md-3">
747                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
748                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Distancia</small>
749                                                <span class="text-white fw-bold font-heading">24.0 km</span>
750                                            </div>
751                                        </div>
752                                        <div class="col-6 col-md-3">
753                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
754                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Desnivel (+)</small>
755                                                <span class="text-primary fw-bold font-heading">~800 m</span>
756                                            </div>
757                                        </div>
758                                        <div class="col-6 col-md-3">
759                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
760                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Dificultad</small>
761                                                <span class="text-warning fw-bold font-heading">Alta</span>
762                                            </div>
763                                        </div>
764                                        <div class="col-6 col-md-3">
765                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
766                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Tipo de Ruta</small>
767                                                <span class="text-white fw-bold font-heading" style="font-size: 0.85rem;">Circular</span>
768                                            </div>
769                                        </div>
770                                    </div>
771                                    <div class="mb-2"><strong class="text-white">Hora de salida:</strong> 9:00 a. m.</div>
772                                    <div class="mb-2"><strong class="text-white">Ruta de competencia:</strong></div>
773                                    <p class="m-0 text-white font-monospace text-uppercase" style="font-size: 0.85rem;">La Azulita – San Rafael – San Pedro – Olinda – La Palmita – Bolivia – Bachaquero – La Azulita.</p>
774                                    <div class="mt-3">
775                                        <iframe src="https://es.wikiloc.com/wikiloc/embedv2.do?id=225561071&elevation=on&images=on&maptype=H" width="100%" height="350" style="border:0; border-radius: 8px; background: #000;" allowfullscreen="" loading="lazy"></iframe>
776                                        <div class="text-end mt-2">
777                                            <a href="https://loc.wiki/t/225561071?wa=sc" target="_blank" class="btn btn-sm btn-outline-primary fw-bold font-heading"><i class="bi bi-box-arrow-up-right"></i> Abrir Mapa Completo</a>
778                                        </div>
779                                    </div>
780                                </div>
781                            </div>
782                        </div>
783
784                        <!-- Etapa 4 -->
785                        <div class="accordion-item glass-panel border-0 overflow-hidden">
786                            <h2 class="accordion-header">
787                                <button class="accordion-button bg-transparent text-white font-heading text-uppercase fw-bold py-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStage4" aria-expanded="false" aria-controls="collapseStage4">
788                                    <span class="text-primary me-3">Etapa 4</span> 22 de Agosto (Tarde) · 15 Km (Circuito)
789                                </button>
790                            </h2>
791                            <div id="collapseStage4" class="accordion-collapse collapse" data-bs-parent="#stagesAccordion">
792                                <div class="accordion-body text-white-50 bg-black bg-opacity-20 p-4">
793                                    <div class="row g-2 mb-4">
794                                        <div class="col-6 col-md-3">
795                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
796                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Distancia</small>
797                                                <span class="text-white fw-bold font-heading">15.0 km</span>
798                                            </div>
799                                        </div>
800                                        <div class="col-6 col-md-3">
801                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
802                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Desnivel (+)</small>
803                                                <span class="text-primary fw-bold font-heading">~300 m</span>
804                                            </div>
805                                        </div>
806                                        <div class="col-6 col-md-3">
807                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
808                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Dificultad</small>
809                                                <span class="text-success fw-bold font-heading">Media-Técnica</span>
810                                            </div>
811                                        </div>
812                                        <div class="col-6 col-md-3">
813                                            <div class="p-2 rounded bg-dark bg-opacity-50 border border-secondary border-opacity-25 text-center">
814                                                <small class="text-muted d-block text-uppercase" style="font-size: 0.65rem;">Tipo de Ruta</small>
815                                                <span class="text-white fw-bold font-heading" style="font-size: 0.85rem;">Circuito</span>
816                                            </div>
817                                        </div>
818                                    </div>
819                                    <div class="mb-2"><strong class="text-white">Hora de salida:</strong> 3:00 p. m.</div>
820                                    <div class="mb-2"><strong class="text-white">Ruta de competencia:</strong></div>
821                                    <p class="m-0 text-white font-monospace text-uppercase" style="font-size: 0.85rem;">Circuito cerrado urbano entre Plaza Bolívar, Liceo Bolivariano La Azulita, avenida Bolívar y avenida Páez.</p>
822                                    <div class="mt-3">
823                                        <iframe src="https://es.wikiloc.com/wikiloc/embedv2.do?id=225583976&elevation=on&images=on&maptype=H" width="100%" height="350" style="border:0; border-radius: 8px; background: #000;" allowfullscreen="" loading="lazy"></iframe>
824                                        <div class="text-end mt-2">
825                                            <a href="https://loc.wiki/t/225583976?wa=sc" target="_blank" class="btn btn-sm btn-outline-primary fw-bold font-heading"><i class="bi bi-box-arrow-up-right"></i> Abrir Mapa Completo</a>
826                                        </div>
827                                    </div>
828                                </div>
829                            </div>
830                        </div>
831
832                    </div>
833                </div>
834            </div>
835
836            <!-- Microcopy Quote -->
837            <div class="text-center mt-5 pt-3">
838                <h4 class="font-heading text-uppercase text-primary tracking-widest italic fs-5">
839                    "Montaña, clima, barro, ritmo, estrategia y corazón: eso es La Azulita."
840                </h4>
841            </div>
842        </div>
843    </section>
844
845    <!-- CTA 2: Mid-page Roster & History Callout -->
846    <section class="py-5 bg-dark bg-opacity-25 position-relative reveal">
847        <div class="container text-center">
848            <div class="glass-panel p-5 max-w-4xl mx-auto border-glow">
849                <h3 class="fw-bold font-heading text-uppercase text-white mb-2"><i class="bi bi-award-fill text-warning me-2"></i> La Universidad del Ciclismo de Montaña</h3>
850                <p class="text-muted max-w-2xl mx-auto mb-4" style="max-width: 600px;">Montaña, técnica, resistencia y una tradición viva en los Andes venezolanos. Revisa la nómina oficial de competidores y los resultados por etapa.</p>
851                
852                <div class="d-flex flex-wrap justify-content-center gap-3 align-items-center">
853                    <a href="https://vueltalaazulita.com/listado-verificados" class="btn btn-warning text-dark text-uppercase fw-extrabold font-heading px-5 py-3 rounded-pill shadow-lg" style="background: linear-gradient(135deg, #ff9000 0%, #ff5a00 50%, #d97706 100%) !important; border: 2px solid #ffffff !important;">
854                        <i class="bi bi-people-fill me-2"></i> Ver Nómina de Corredores
855                    </a>
856                    <a href="#ganadores-etapa" class="btn btn-outline-light text-uppercase fw-bold font-heading px-4 py-3 rounded-pill glass-badge border-0">
857                        <i class="bi bi-trophy-fill text-warning me-1"></i> Ver Cuadro de Honor
858                    </a>
859                </div>
860            </div>
861        </div>
862    </section>
863
864    <!-- SECTION: Categorías -->
865    <section id="categorias" class="py-5 my-5 reveal">
866        <div class="container">
867            <div class="text-center mb-5">
868                <span class="text-primary text-uppercase tracking-wider font-heading fw-bold d-block mb-2">Grupos Oficiales</span>
869                <h2 class="fw-bold text-white font-heading text-uppercase display-6">Categorías de Competencia</h2>
870                <p class="text-muted max-w-2xl mx-auto mt-2" style="max-width: 600px;">
871                    La Vuelta contempla participación en modalidad individual y por equipos, con categorías masculinas y femeninas.
872                </p>
873            </div>
874
875            <div class="row g-4">
876                <!-- Masculino -->
877                <div class="col-md-6">
878                    <div class="card border-0 shadow-lg h-100 rounded-4 cat-card border-top border-primary border-3">
879                        <div class="card-body p-4 p-md-5">
880                            <h4 class="fw-bold text-white font-heading text-uppercase mb-4 border-bottom pb-2">
881                                <i class="bi bi-gender-male text-primary"></i> Categorías Masculinas
882                            </h4>
883                            <ul class="list-group list-group-flush bg-transparent">
884                                <li class="list-group-item bg-transparent px-0 d-flex justify-content-between border-secondary">
885                                    <span class="fw-semibold">Élite</span>
886                                    <span class="text-primary">23 a 34 años</span>
887                                </li>
888                                <li class="list-group-item bg-transparent px-0 d-flex justify-content-between border-secondary">
889                                    <span class="fw-semibold">Sub 23</span>
890                                    <span class="text-primary">19 a 22 años</span>
891                                </li>
892                                <li class="list-group-item bg-transparent px-0 d-flex justify-content-between border-secondary">
893                                    <span class="fw-semibold">Juvenil</span>
894                                    <span class="text-primary">17 a 18 años</span>
895                                </li>
896                                <li class="list-group-item bg-transparent px-0 d-flex justify-content-between border-secondary">
897                                    <span class="fw-semibold">Máster A</span>
898                                    <span class="text-primary">30 a 39 años</span>
899                                </li>
900                                <li class="list-group-item bg-transparent px-0 d-flex justify-content-between border-secondary">
901                                    <span class="fw-semibold">Máster B</span>
902                                    <span class="text-primary">40 a 49 años</span>
903                                </li>
904                                <li class="list-group-item bg-transparent px-0 d-flex justify-content-between border-secondary">
905                                    <span class="fw-semibold">Máster C</span>
906                                    <span class="text-primary">50 a 59 años</span>
907                                </li>
908                                <li class="list-group-item bg-transparent px-0 d-flex justify-content-between border-secondary">
909                                    <span class="fw-semibold">Máster D</span>
910                                    <span class="text-primary">60 años en adelante</span>
911                                </li>
912                                <li class="list-group-item bg-transparent px-0 d-flex justify-content-between border-secondary">
913                                    <span class="fw-semibold">Aficionado Masculino</span>
914                                    <span class="text-primary">17 años en adelante</span>
915                                </li>
916                            </ul>
917                        </div>
918                    </div>
919                </div>
920
921                <!-- Femenino -->
922                <div class="col-md-6">
923                    <div class="card border-0 shadow-lg h-100 rounded-4 cat-card border-top border-primary border-3">
924                        <div class="card-body p-4 p-md-5">
925                            <h4 class="fw-bold text-white font-heading text-uppercase mb-4 border-bottom pb-2">
926                                <i class="bi bi-gender-female text-primary"></i> Categorías Femeninas
927                            </h4>
928                            <ul class="list-group list-group-flush bg-transparent mb-5">
929                                <li class="list-group-item bg-transparent px-0 d-flex justify-content-between border-secondary">
930                                    <span class="fw-semibold">Libre Femenino</span>
931                                    <span class="text-primary">17 a 34 años</span>
932                                </li>
933                                <li class="list-group-item bg-transparent px-0 d-flex justify-content-between border-secondary">
934                                    <span class="fw-semibold">Máster Femenino</span>
935                                    <span class="text-primary">35 años en adelante</span>
936                                </li>
937                                <li class="list-group-item bg-transparent px-0 d-flex justify-content-between border-secondary">
938                                    <span class="fw-semibold">Aficionado Femenino</span>
939                                    <span class="text-primary">17 años en adelante</span>
940                                </li>
941                            </ul>
942
943                            <h4 class="fw-bold text-white font-heading text-uppercase mb-3 border-bottom pb-2">
944                                <i class="bi bi-lightning-charge-fill text-warning"></i> Open E-Bike
945                            </h4>
946                            <p class="small text-muted mb-0">Modalidad libre e-bike open mixta con asistencia eléctrica de competencia oficial.</p>
947                        </div>
948                    </div>
949                </div>
950            </div>
951
952            <!-- Extra Info Card -->
953            <div class="glass-panel p-4 mt-4 border-glow">
954                <div class="row align-items-center">
955                    <div class="col-md-2 text-center text-md-start fs-1 text-primary ps-md-4">
956                        <i class="bi bi-info-circle-fill"></i>
957                    </div>
958                    <div class="col-md-10 pe-md-4">
959                        <p class="m-0 small text-white-50" style="line-height: 1.6;">
960                            Los equipos deben estar conformados por cuatro corredores y un delegado, con posibilidad de integrar distintas categorías, salvo juveniles. Además, el uso del casco es obligatorio durante todo el recorrido y se recomienda a los ciclistas contar con su respectiva licencia federativa vigente.
961                        </p>
962                    </div>
963                </div>
964            </div>
965        </div>
966    </section>
967
968    <!-- SECTION: Noticias & Notas de Prensa (Ubicada justo después de Categorías) -->
969            <section id="noticias" class="py-5 my-5 reveal">
970        <div class="container">
971            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-md-between mb-5">
972                <div>
973                    <span class="text-primary text-uppercase tracking-wider font-heading fw-bold d-block mb-1">
974                        <i class="bi bi-newspaper me-1"></i> Sala de Prensa & Blog
975                    </span>
976                    <h2 class="fw-bold text-white font-heading text-uppercase m-0 display-6">Noticias y Comunicados Oficiales</h2>
977                </div>
978                <div class="mt-3 mt-md-0">
979                    <a href="https://vueltalaazulita.com/noticias" class="btn btn-outline-primary rounded-pill px-4 font-heading text-uppercase fw-bold d-inline-flex align-items-center gap-2">
980                        Ver Sala de Prensa <i class="bi bi-arrow-right"></i>
981                    </a>
982                </div>
983            </div>
984
985            <div class="row g-4">
986                                    <div class="col-md-4">
987                        <div class="glass-panel h-100 p-0 overflow-hidden d-flex flex-column border-glow" style="transition: transform 0.3s ease;">
988                            <div class="position-relative bg-dark" style="height: 230px; overflow: hidden;">
989                                <img src="https://vueltalaazulita.com/uploads/press_releases/main_1787448368_F8aQZqTh.jpeg" alt="Jhon Jairo Botero en lo más alto de la Vuelta a la Azulita" class="w-100 h-100" style="object-fit: cover; object-position: center;">
990                                                                    <sp
990an class="position-absolute top-0 end-0 m-3 badge bg-primary font-heading text-uppercase shadow">
991                                        2026
992                                    </span>
993                                                            </div>
994                            <div class="p-4 d-flex flex-column flex-grow-1">
995                                <div class="text-primary small fw-semibold mb-2 d-flex align-items-center gap-2">
996                                    <span><i class="bi bi-calendar3 me-1"></i>22/08/2026</span>
997                                </div>
998                                <h3 class="font-heading text-white fw-bold h5 mb-3">
999                                    <a href="https://vueltalaazulita.com/noticias/jhon-jairo-botero-en-lo-mas-alto-de-la-vuelta-a-la-azulita" class="text-white text-decoration-none" style="transition: color 0.2s;" onmouseover="this.style.color='#ff5a00'" onmouseout="this.style.color='#ffffff'">
1000                                        Jhon Jairo Botero en lo más alto de la Vuelta a la Azulita
1001                                    </a>
1002                                </h3>
1003                                <p class="text-light opacity-75 small mb-4 flex-grow-1" style="line-height: 1.6;">
1004                                    Por: José Antonio García 
1005CNP-11496
1006
1007El colombiano Jhon Jairo Botero se acreditó como campeón absoluto de l...
1008                                </p>
1009                                <div class="pt-3 border-top border-white border-opacity-10 d-flex align-items-center justify-content-between mt-auto">
1010                                    <span class="text-muted small">
1011                                        <i class="bi bi-eye me-1"></i>201 lecturas
1012                                    </span>
1013                                    <a href="https://vueltalaazulita.com/noticias/jhon-jairo-botero-en-lo-mas-alto-de-la-vuelta-a-la-azulita" class="text-primary fw-bold small text-decoration-none d-inline-flex align-items-center gap-1">
1014                                        Leer Nota <i class="bi bi-chevron-right"></i>
1015                                    </a>
1016                                </div>
1017                            </div>
1018                        </div>
1019                    </div>
1020                                    <div class="col-md-4">
1021                        <div class="glass-panel h-100 p-0 overflow-hidden d-flex flex-column border-glow" style="transition: transform 0.3s ease;">
1022                            <div class="position-relative bg-dark" style="height: 230px; overflow: hidden;">
1023                                <img src="https://vueltalaazulita.com/uploads/press_releases/main_1787253191_DqQpFfrs.jpeg" alt="Jhon Jairo Botero  se acreditó la primera etapa" class="w-100 h-100" style="object-fit: cover; object-position: center;">
1024                                                                    <span class="position-absolute top-0 end-0 m-3 badge bg-primary font-heading text-uppercase shadow">
1025                                        2026
1026                                    </span>
1027                                                            </div>
1028                            <div class="p-4 d-flex flex-column flex-grow-1">
1029                                <div class="text-primary small fw-semibold mb-2 d-flex align-items-center gap-2">
1030                                    <span><i class="bi bi-calendar3 me-1"></i>20/08/2026</span>
1031                                </div>
1032                                <h3 class="font-heading text-white fw-bold h5 mb-3">
1033                                    <a href="https://vueltalaazulita.com/noticias/jhon-jairo-botero-se-acredito-la-primera-etapa" class="text-white text-decoration-none" style="transition: color 0.2s;" onmouseover="this.style.color='#ff5a00'" onmouseout="this.style.color='#ffffff'">
1034                                        Jhon Jairo Botero  se acreditó la primera etapa
1035                                    </a>
1036                                </h3>
1037                                <p class="text-light opacity-75 small mb-4 flex-grow-1" style="line-height: 1.6;">
1038                                    Por: José Antonio García 
1039CNP-11496
1040Fotos: José León
1041
1042El colombiano Jhon Jairo Botero se hizo ganador de l...
1043                                </p>
1044                                <div class="pt-3 border-top border-white border-opacity-10 d-flex align-items-center justify-content-between mt-auto">
1045                                    <span class="text-muted small">
1046                                        <i class="bi bi-eye me-1"></i>203 lecturas
1047                                    </span>
1048                                    <a href="https://vueltalaazulita.com/noticias/jhon-jairo-botero-se-acredito-la-primera-etapa" class="text-primary fw-bold small text-decoration-none d-inline-flex align-items-center gap-1">
1049                                        Leer Nota <i class="bi bi-chevron-right"></i>
1050                                    </a>
1051                                </div>
1052                            </div>
1053                        </div>
1054                    </div>
1055                                    <div class="col-md-4">
1056                        <div class="glass-panel h-100 p-0 overflow-hidden d-flex flex-column border-glow" style="transition: transform 0.3s ease;">
1057                            <div class="position-relative bg-dark" style="height: 230px; overflow: hidden;">
1058                                <img src="https://vueltalaazulita.com/uploads/press_releases/main_1787189444_aKbS5Y5O.jpeg" alt="Con el congresillo técnico arranco la vuelta a la Azulita" class="w-100 h-100" style="object-fit: cover; object-position: center;">
1059                                                                    <span class="position-absolute top-0 end-0 m-3 badge bg-primary font-heading text-uppercase shadow">
1060                                        2026
1061                                    </span>
1062                                                            </div>
1063                            <div class="p-4 d-flex flex-column flex-grow-1">
1064                                <div class="text-primary small fw-semibold mb-2 d-flex align-items-center gap-2">
1065                                    <span><i class="bi bi-calendar3 me-1"></i>19/08/2026</span>
1066                                </div>
1067                                <h3 class="font-heading text-white fw-bold h5 mb-3">
1068                                    <a href="https://vueltalaazulita.com/noticias/con-el-congresillo-tecnico-arranco-la-vuelta-a-la-azulita" class="text-white text-decoration-none" style="transition: color 0.2s;" onmouseover="this.style.color='#ff5a00'" onmouseout="this.style.color='#ffffff'">
1069                                        Con el congresillo técnico arranco la vuelta a la Azulita
1070                                    </a>
1071                                </h3>
1072                                <p class="text-light opacity-75 small mb-4 flex-grow-1" style="line-height: 1.6;">
1073                                    La noche de este miércoles se desarrollo el congresillo técnico de la 29 edición de la Vuelta a la Azulita, en...
1074                                </p>
1075                                <div class="pt-3 border-top border-white border-opacity-10 d-flex align-items-center justify-content-between mt-auto">
1076                                    <span class="text-muted small">
1077                                        <i class="bi bi-eye me-1"></i>162 lecturas
1078                                    </span>
1079                                    <a href="https://vueltalaazulita.com/noticias/con-el-congresillo-tecnico-arranco-la-vuelta-a-la-azulita" class="text-primary fw-bold small text-decoration-none d-inline-flex align-items-center gap-1">
1080                                        Leer Nota <i class="bi bi-chevron-right"></i>
1081                                    </a>
1082                                </div>
1083                            </div>
1084                        </div>
1085                    </div>
1086                            </div>
1087        </div>
1088    </section>
1089    
1090    <!-- SECTION: Prestigio -->
1091    <section class="py-5 my-5 bg-dark bg-opacity-25 reveal">
1092        <div class="container">
1093            <div class="row g-5 align-items-center">
1094                <div class="col-lg-6">
1095                    <span class="text-primary text-uppercase tracking-wider font-heading fw-bold d-block mb-2">Prestigio Competitivo</span>
1096                    <h2 class="fw-bold text-white font-heading text-uppercase mb-4">Donde se mide el verdadero nivel</h2>
1097                    <p class="text-light opacity-75 mb-3" style="line-height: 1.7;">
1098                        La Vuelta a La Azulita es una vitrina competitiva de alto valor para el ciclismo de montaña. Aquí se produce un roce deportivo real entre corredores experimentados, jóvenes promesas y atletas que llegan dispuestos a medirse con una de las pruebas más exigentes del calendario nacional.
1099                    </p>
1100                    <p class="text-light opacity-75 mb-4" style="line-height: 1.7;">
1101                        Su formato por etapas, su tradición y la dificultad natural del terreno han construido una reputación sólida durante décadas. Correr en La Azulita no es solo completar una ruta: es medirse con una prueba que exige preparación integral y respeto por la montaña.
1102                    </p>
1103                </div>
1104                <div class="col-lg-6">
1105                    <!-- Podium image -->
1106                    <div class="position-relative overflow-hidden rounded-3 shadow border-glow" style="border: 1px solid var(--border-color); aspect-ratio: 16/12; max-height: 380px;">
1107                        <img src="https://vueltalaazulita.com/images/foto_podio.png" alt="Podio y Premiación" class="w-100 h-100 object-fit-cover d-block" style="transition: transform 0.5s ease-in-out;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
1108                        <div class="position-absolute bottom-0 start-0 w-100 p-3" style="background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);">
1109                            <span class="text-white fw-bold font-heading text-uppercase tracking-wider" style="font-size: 0.85rem; letter-spacing: 0.05em;">Podio y Premiación Femenina - Edición anterior</span>
1110                        </div>
1111                    </div>
1112                </div>
1113            </div>
1114
1115            <!-- Media Coverage sub-row -->
1116            <div class="row g-5 align-items-center mt-5 pt-4 border-top border-secondary border-opacity-10">
1117                <div class="col-lg-6 order-lg-2">
1118                    <span class="text-primary text-uppercase tracking-wider font-heading fw-bold d-block mb-2">Cobertura y Difusión</span>
1119                    <h3 class="fw-bold text-white font-heading text-uppercase mb-4">Gran Proyección en Medios</h3>
1120                    <p class="text-light opacity-75 mb-3" style="line-height: 1.7;">
1121                        La Vuelta a La Azulita recibe una amplia cobertura por parte de medios nacionales, internacionales, radio, televisión y portales web.
1122                    </p>
1123                    <p class="text-light opacity-75 mb-4" style="line-height: 1.7;">
1124                        Es una plataforma de gran alcance donde los competidores y las marcas patrocinantes recibirán cientos de miles de visualizaciones e impactos mediáticos a lo largo de las etapas.
1125                    </p>
1126                </div>
1127                <div class="col-lg-6 order-lg-1">
1128                    <!-- Interview image -->
1129                    <div class="position-relative overflow-hidden rounded-3 shadow border-glow" style="border: 1px solid var(--border-color); aspect-ratio: 16/10; max-height: 380px;">
1130                        <img src="https://vueltalaazulita.com/images/foto_entrevista.jpg" alt="Cobertura de Medios" class="w-100 h-100 object-fit-cover d-block" style="transition: transform 0.5s ease-in-out;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
1131                        <div class="position-absolute bottom-0 start-0 w-100 p-3" style="background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);">
1132                            <span class="text-white fw-bold font-heading text-uppercase tracking-wider" style="font-size: 0.85rem; letter-spacing: 0.05em;">Cobertura de Prensa y Medios</span>
1133                        </div>
1134                    </div>
1135                </div>
1136            </div>
1137        </div>
1138    </section>
1139
1140    <!-- SECTION: Destino La Azulita -->
1141    <section id="destino" class="py-5 my-5 reveal">
1142        <div class="container">
1143            <div class="row g-5 align-items-center flex-row-reverse">
1144                <div class="col-lg-6">
1145                    <span class="text-primary text-uppercase tracking-wider font-heading fw-bold d-block mb-2">Turismo y Naturaleza</span>
1146                    <h2 class="fw-bold text-white font-heading text-uppercase mb-4">La Azulita: montaña, pueblo y naturaleza</h2>
1147                    <p class="text-light opacity-75 mb-3" style="line-height: 1.7;">
1148                        La Azulita es la capital del municipio Andrés Bello, en el estado Mérida, ubicada a 1.135 metros sobre el nivel del mar y con un clima de montaña privilegiado.
1149                    </p>
1150                    <p class="text-light opacity-75 mb-4" style="line-height: 1.7;">
1151                        Su entorno combina bosques, cascadas, miradores, zonas agrícolas y paisajes andinos que convierten la carrera en una experiencia deportiva y visual única. Además de la exigencia del recorrido, quienes llegan al evento se encuentran con un pueblo de tradición, hospitalidad y fuerte identidad ecológica.
1152                    </p>
1153                </div>
1154                <div class="col-lg-6">
1155                    <!-- Landscape image -->
1156                    <div class="position-relative overflow-hidden rounded-3 shadow border-glow" style="border: 1px solid var(--border-color); aspect-ratio: 16/9; max-height: 380px;">
1157                        <img src="https://vueltalaazulita.com/images/foto_sendero.jpg" alt="Paisajes de La Azulita" class="w-100 h-100 object-fit-cover d-block" style="transition: transform 0.5s ease-in-out;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
1158                        <div class="position-absolute bottom-0 start-0 w-100 p-3" style="background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);">
1159                            <span class="text-white fw-bold font-heading text-uppercase tracking-wider" style="font-size: 0.85rem; letter-spacing: 0.05em;">Senderos y Paisajes Andinos de La Azulita</span>
1160                        </div>
1161                    </div>
1162                </div>
1163            </div>
1164        </div>
1165    </section>
1166
1167    <!-- SECTION: Cierre y CTA Final -->
1168    <section class="py-5 my-5 bg-dark bg-opacity-50 text-center reveal">
1169        <div class="container">
1170            <div class="max-w-3xl mx-auto py-4">
1171                <span class="badge bg-primary bg-opacity-20 text-primary border border-primary border-opacity-50 py-2 px-3 text-uppercase tracking-widest fw-bold mb-4 font-heading" style="font-size: 0.8rem;">
1172                    20 al 22 de Agosto, 2026
1173                </span>
1174                
1175                <h2 class="fw-bold text-white font-heading text-uppercase display-6 mb-3">Nos vemos en la montaña</h2>
1176                
1177                <p class="text-light opacity-75 max-w-2xl mx-auto mb-4" style="max-width: 650px; line-height: 1.7;">
1178                    La XXIX Vuelta a La Azulita volverá a convertir al municipio Andrés Bello en el gran punto de encuentro del ciclismo de montaña venezolano del 20 al 22 de agosto de 2026. Serán tres días, cuatro etapas y una experiencia que honra la historia del evento, el legado de Antonio Prieto y la dureza noble de las montañas de La Azulita.
1179                </p>
1180
1181                <h5 class="text-primary font-heading text-uppercase fw-bold tracking-wider mb-5">
1182                    Prepárate para vivir la carrera que muchos conocen como la Universidad del Ciclismo de Montaña en Venezuela.
1183                </h5>
1184
1185                <div id="countdown-3" class="mb-4 d-none"></div>
1186
1187                <div class="d-flex flex-wrap align-items-center justify-content-center gap-3">
1188                    <a href="https://vueltalaazulita.com/inscripcion" id="reg-btn-3" class="btn btn-primary btn-lg rounded-pill px-5 py-3 text-uppercase fw-bold shadow-lg border-0 font-heading">
1189                        <span id="reg-btn-text-3">Registrar Inscripción</span>
1190                    </a>
1191                    <a href="https://vueltalaazulita.com/listado-verificados" 
1192                       class="btn btn-warning btn-lg rounded-pill px-5 py-3 text-uppercase fw-bold shadow-lg font-heading d-inline-flex align-items-center gap-2"
1193                       style="background: linear-gradient(135deg, #ff9000 0%, #ff5a00 50%, #d97706 100%) !important; border: 2px solid #ffffff !important; box-shadow: 0 0 30px rgba(255, 90, 0, 0.7) !important; color: #050806 !important;">
1194                        <i class="bi bi-people-fill fs-4 me-1"></i> 📋 VER NÓMINA DE COMPETIDORES
1195                    </a>
1196                </div>
1197            </div>
1198        </div>
1199    </section>
1200
1201    <!-- Footer -->
1202    <footer class="text-white-50 py-4 mt-auto border-top" style="background: #0d1511; border-color: rgba(255, 90, 0, 0.15) !important;">
1203        <div class="container text-center">
1204            <p class="mb-1 fw-bold text-white text-uppercase tracking-wider font-heading">Vuelta a La Azulita en Bicicleta de Montaña Antonio Prieto</p>
1205            <p class="small mb-0">© Todos los derechos reservados. Desarrollado por <a href="https://juanpenalver.com" target="_blank" class="text-primary text-decoration-none">Juan Peñalver</a>.</p>
1206            <div class="mt-2 text-muted" style="font-size: 0.7rem;">
1207                Tradición MTB desde 1995 · Mérida, Venezuela
1208                <span class="mx-2">·</span>
1209                <a href="https://vueltalaazulita.com/admin" class="text-white-50 text-decoration-none" style="transition: color 0.2s;" onmouseover="this.style.color='#ff5a00'" onmouseout="this.style.color='#cbd5e1'"><i class="bi bi-lock-fill" style="font-size: 0.65rem;"></i> Admin</a>
1210            </div>
1211        </div>
1212    </footer>
1213
1214    <!-- Background Slideshow and Scroll Animations Script -->
1215    
1215<script>
1216        document.addEventListener("DOMContentLoaded", () => {
1217            // Background slideshow images
1218            const images = [
1219                'https://vueltalaazulita.com/images/foto_salida.jpg',
1220                'https://vueltalaazulita.com/images/foto_montana.jpg',
1221                'https://vueltalaazulita.com/images/foto_sendero.jpg',
1222                'https://vueltalaazulita.com/images/foto_entrevista.jpg',
1223                'https://vueltalaazulita.com/vuelta2025%20(1).jpg',
1224                'https://vueltalaazulita.com/vuelta2025%20(2).jpg',
1225                'https://vueltalaazulita.com/vuelta2025%20(3).jpg',
1226                'https://vueltalaazulita.com/vuelta2025%20(4).jpg',
1227                'https://vueltalaazulita.com/vuelta2025%20(5).jpg',
1228                'https://vueltalaazulita.com/vuelta2025%20(6).jpg',
1229                'https://vueltalaazulita.com/vuelta2025%20(7).jpg',
1230                'https://vueltalaazulita.com/vuelta2025%20(8).jpg',
1231                'https://vueltalaazulita.com/vuelta2025%20(9).jpg',
1232                'https://vueltalaazulita.com/vuelta2025%20(10).jpg',
1233                'https://vueltalaazulita.com/vuelta2025%20(11).jpg'
1234            ];
1235
1236            const container = document.getElementById('slideshow-container');
1237            const slideElements = [];
1238
1239            // Inject slideshow images
1240            images.forEach((imgSrc, index) => {
1241                const slide = document.createElement('div');
1242                slide.className = `slide animate-bg-zoom ${index === 0 ? 'active' : ''}`;
1243                slide.style.backgroundImage = `url('${imgSrc}')`;
1244                container.appendChild(slide);
1245                slideElements.push(slide);
1246            });
1247
1248            let currentSlide = 0;
1249            setInterval(() => {
1250                if (slideElements.length > 0) {
1251                    slideElements[currentSlide].classList.remove('active');
1252                    currentSlide = (currentSlide + 1) % slideElements.length;
1253                    slideElements[currentSlide].classList.add('active');
1254                }
1255            }, 5000);
1256
1257            // Dynamic Campaign Dates Logic for 3 buttons
1258            const isManualClosed = true;
1259            const startMadrugador = new Date("2026-05-25T06:00:00").getTime();
1260            const endMadrugador = new Date("2026-05-31T23:59:59").getTime();
1261            const startPrimera = new Date("2026-06-03T06:00:00").getTime();
1262            const endPrimera = new Date("2026-06-30T23:59:59").getTime();
1263            const startSegunda = new Date("2026-07-01T00:00:00").getTime();
1264            const endSegunda = new Date("2026-07-31T23:59:59").getTime();
1265            const startTercera = new Date("2026-08-01T00:00:00").getTime();
1266            const endTercera = new Date("2026-08-16T23:59:59").getTime();
1267
1268            const buttons = [
1269                {
1270                    btn: document.getElementById('reg-btn-1'),
1271                    text: document.getElementById('reg-btn-text-1'),
1272                    countdown: document.getElementById('countdown-1')
1273                },
1274                {
1275                    btn: document.getElementById('reg-btn-2'),
1276                    text: document.getElementById('reg-btn-text-2'),
1277                    countdown: document.getElementById('countdown-2')
1278                },
1279                {
1280                    btn: document.getElementById('reg-btn-3'),
1281                    text: document.getElementById('reg-btn-text-3'),
1282                    countdown: document.getElementById('countdown-3')
1283                }
1284            ];
1285
1286            const checkCampaignStatus = () => {
1287                const now = new Date().getTime();
1288                let label = '';
1289                let btnClass = '';
1290                let showCountdown = false;
1291                let countdownStr = '';
1292                let pointerEvents = 'auto';
1293
1294                if (isManualClosed) {
1295                    label = "Inscripciones Cerradas";
1296                    btnClass = "btn btn-danger disabled";
1297                    pointerEvents = 'none';
1298                } else if (now < startMadrugador) {
1299                    const diff = startMadrugador - now;
1300                    const d = Math.floor(diff / (1000 * 60 * 60 * 24));
1301                    const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
1302                    const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
1303                    const s = Math.floor((diff % (1000 * 60)) / 1000);
1304                    
1305                    countdownStr = (d > 0 ? `${d}d ` : '') + `${h.toString().padStart(2, '0')}h ${m.toString().padStart(2, '0')}m ${s.toString().padStart(2, '0')}s`;
1306                    label = "Abre Preventa";
1307                    btnClass = "btn btn-secondary disabled";
1308                    pointerEvents = 'none';
1309                    showCountdown = true;
1310                } else if (now >= startMadrugador && now <= endMadrugador) {
1311                    label = "Inscribirse en Madrugadores ($50)";
1312                    btnClass = "btn btn-primary";
1313                } else if (now > endMadrugador && now < startPrimera) {
1314                    const diff = startPrimera - now;
1315                    const d = Math.floor(diff / (1000 * 60 * 60 * 24));
1316                    const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
1317                    const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
1318                    const s = Math.floor((diff % (1000 * 60)) / 1000);
1319                    
1320                    countdownStr = (d > 0 ? `${d}d ` : '') + `${h.toString().padStart(2, '0')}h ${m.toString().padStart(2, '0')}m ${s.toString().padStart(2, '0')}s`;
1321                    label = "Primera fase de Inscripciones";
1322                    btnClass = "btn btn-secondary disabled";
1323                    pointerEvents = 'none';
1324                    showCountdown = true;
1325                } else if (now >= startPrimera && now <= endPrimera) {
1326                    label = "Inscribirse en 1era Jornada ($60)";
1327                    btnClass = "btn btn-success text-white";
1328                } else if (now > endPrimera && now < startSegunda) {
1329                    const diff = startSegunda - now;
1330                    const d = Math.floor(diff / (1000 * 60 * 60 * 24));
1331                    const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
1332                    const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
1333                    const s = Math.floor((diff % (1000 * 60)) / 1000);
1334                    
1335                    countdownStr = (d > 0 ? `${d}d ` : '') + `${h.toString().padStart(2, '0')}h ${m.toString().padStart(2, '0')}m ${s.toString().padStart(2, '0')}s`;
1336                    label = "Segunda fase de Inscripciones";
1337                    btnClass = "btn btn-secondary disabled";
1338                    pointerEvents = 'none';
1339                    showCountdown = true;
1340                } else if (now >= startSegunda && now <= endSegunda) {
1341                    label = "Inscribirse en 2da Jornada ($80)";
1342                    btnClass = "btn btn-success text-white";
1343                } else if (now > endSegunda && now < startTercera) {
1344                    const diff = startTercera - now;
1345                    const d = Math.floor(diff / (1000 * 60 * 60 * 24));
1346                    const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
1347                    const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
1348                    const s = Math.floor((diff % (1000 * 60)) / 1000);
1349                    
1350                    countdownStr = (d > 0 ? `${d}d ` : '') + `${h.toString().padStart(2, '0')}h ${m.toString().padStart(2, '0')}m ${s.toString().padStart(2, '0')}s`;
1351                    label = "Fase Final de Inscripciones";
1352                    btnClass = "btn btn-secondary disabled";
1353                    pointerEvents = 'none';
1354                    showCountdown = true;
1355                } else if (now >= startTercera) {
1356                    label = "Inscribirse en Jornada Final ($80)";
1357                    btnClass = "btn btn-success text-white";
1358                    pointerEvents = 'auto';
1359                } else {
1360                    label = "Inscribirse en Jornada Final ($80)";
1361                    btnClass = "btn btn-success text-white";
1362                    pointerEvents = 'auto';
1363                }
1364
1365                buttons.forEach(item => {
1366                    if (!item.btn) return;
1367                    item.text.textContent = label;
1368                    item.btn.className = `${btnClass} btn-pro-primary`;
1369                    item.btn.style.pointerEvents = pointerEvents;
1370                    
1371                    if (item.countdown) {
1372                        if (showCountdown) {
1373                            item.countdown.innerHTML = `<span class="badge bg-dark border border-secondary text-warning font-monospace p-2 mt-2 d-inline-block" style="font-size: 0.85rem;"><i class="bi bi-clock-fill"></i> Abre en: ${countdownStr}</span>`;
1374                            item.countdown.classList.remove('d-none');
1375                        } else {
1376                            item.countdown.classList.add('d-none');
1377                        }
1378                    }
1379                });
1380
1381                // Toggle Teams Link Activation dynamically
1382                const isRegActive = !isManualClosed && (now >= startMadrugador);
1383                const teamsLinks = [
1384                    document.getElementById('nav-teams-link'),
1385                    document.getElementById('nav-teams-link-public')
1386                ];
1387                
1388                teamsLinks.forEach(link => {
1389                    if (!link) return;
1390                    if (isRegActive) {
1391                        link.classList.remove('disabled', 'opacity-50');
1392                        link.style.pointerEvents = 'auto';
1393                        link.style.cursor = 'pointer';
1394                    } else {
1395                        link.classList.add('disabled', 'opacity-50');
1396                        link.style.pointerEvents = 'none';
1397                        link.style.cursor = 'not-allowed';
1398                    }
1399                });
1400            };
1401
1402            setInterval(checkCampaignStatus, 1000);
1403            checkCampaignStatus();
1404
1405            // Navbar background transition on scroll
1406            const navbar = document.getElementById('mainNavbar');
1407            window.addEventListener('scroll', () => {
1408                if (window.scrollY > 50) {
1409                    navbar.classList.add('scrolled');
1410                } else {
1411                    navbar.classList.remove('scrolled');
1412                }
1413            });
1414
1415            // IntersectionObserver for reveal animations
1416            const reveals = document.querySelectorAll('.reveal');
1417            const observer = new IntersectionObserver((entries) => {
1418                entries.forEach(entry => {
1419                    if (entry.isIntersecting) {
1420                        entry.target.classList.add('active');
1421                    }
1422                });
1423            }, {
1424                threshold: 0.1
1425            });
1426
1427            reveals.forEach(r => observer.observe(r));
1428        });
1429
1430        function switchHomeCategory(catKey, btn) {
1431            document.querySelectorAll('.home-category-block').forEach(b => b.style.display = 'none');
1432            document.querySelectorAll('#seccion-tiempos-acumulados .cat-pill').forEach(b => b.classList.remove('active'));
1433            if (btn) btn.classList.add('active');
1434            const target = document.getElementById('home-cat-block-' + catKey);
1435            if (target) target.style.display = 'block';
1436        }
1437    </script>
1437
1438</body>
1439</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.