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.