<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Golden Sabana Tours | Transporte Privado y Turismo Regional</title> <!-- Tailwind CSS desde CDN para diseño responsive y moderno --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { gold: { 500: '#D4AF37', 600: '#B89220', }, navy: { 800: '#111827', 900: '#0B132B' } } } } } </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body class="bg-gray-50 text-gray-800 font-sans antialiased"> <!-- Navegación --> <nav class="bg-navy-900 text-white sticky top-0 z-50 shadow-xl"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-20"> <div class="flex items-center space-x-3"> <i class="fa-solid fa-compass text-2xl text-gold-500"></i> <span class="text-2xl font-bold tracking-wider">GOLDEN <span class="text-gold-500">SABANA</span></span> </div> <div class="hidden md:flex space-x-8 font-medium"> <a href="#inicio" class="hover:text-gold-500 transition">Inicio</a> <a href="#servicios" class="hover:text-gold-500 transition">Servicios</a> <a href="#flota" class="hover:text-gold-500 transition">Flota</a> <a href="#destinos" class="hover:text-gold-500 transition">10 Destinos</a> </div> <div> <a href="https://wa.me/573106088604?text=Hola,%20deseo%20cotizar%20un%20servicio%20de%20transporte%20o%20tour" target="_blank" class="bg-gold-500 hover:bg-gold-600 text-navy-900 font-bold px-5 py-2.5 rounded-full transition duration-300 shadow-md inline-flex items-center"> <i class="fa-brands fa-whatsapp text-lg mr-2"></i> 310 608 8604 </a> </div> </div> </nav> <!-- Hero Section --> <section id="inicio" class="relative bg-navy-900 text-white py-24 px-4 sm:px-6 lg:px-8 overflow-hidden"> <div class="absolute inset-0 opacity-20 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?q=80&w=1200');"></div> <div class="max-w-5xl mx-auto text-center relative z-10"> <span class="bg-gold-500/20 text-gold-500 border border-gold-500/40 text-xs sm:text-sm font-semibold px-4 py-1.5 rounded-full uppercase tracking-widest"> Transporte Privado & Tours Regionales </span> <h1 class="text-4xl sm:text-6xl font-extrabold mt-4 mb-6 leading-tight"> Viaja con confort, seguridad y elegancia por la Sabana de Bogotá </h1> <p class="text-lg sm:text-xl text-gray-300 mb-8 max-w-3xl mx-auto"> Servicios ejecutivos desde el Aeropuerto El Dorado y rutas turísticas exclusivas hacia los mejores destinos de Cundinamarca y Boyacá. </p> <div class="flex flex-col sm:flex-row justify-center gap-4"> <a href="https://wa.me/573106088604?text=Hola,%20quisiera%20reservar%20un%20traslado" target="_blank" class="bg-gold-500 text-navy-900 font-bold px-8 py-4 rounded-xl hover:bg-gold-600 transition text-lg shadow-lg"> <i class="fa-solid fa-car mr-2"></i> Reservar Traslado </a> <a href="#destinos" class="border-2 border-white text-white font-semibold px-8 py-4 rounded-xl hover:bg-white hover:text-navy-900 transition text-lg"> Explorar Destinos </a> </div> </div> </section> <!-- Servicios --> <section id="servicios" class="py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-3xl font-bold text-navy-900">Nuestros Servicios Premium</h2> <div class="w-20 h-1 bg-gold-500 mx-auto mt-2"></div> <p class="text-gray-600 mt-4">Atención personalizada para ejecutivos, turistas y grupos familiares.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white p-8 rounded-2xl shadow-md hover:shadow-xl transition border-t-4 border-gold-500"> <div class="w-14 h-14 bg-amber-100 text-gold-600 rounded-xl flex items-center justify-center text-2xl mb-6"> <i class="fa-solid fa-plane-arrival"></i> </div> <h3 class="text-xl font-bold text-navy-900 mb-3">Transfers Aeropuerto</h3> <p class="text-gray-600">Recepción privada en El Dorado con monitoreo de vuelo. Traslados directos hacia hoteles o municipios de la Sabana.</p> </div> <div class="bg-white p-8 rounded-2xl shadow-md hover:shadow-xl transition border-t-4 border-navy-900"> <div class="w-14 h-14 bg-blue-100 text-navy-900 rounded-xl flex items-center justify-center text-2xl mb-6"> <i class="fa-solid fa-route"></i> </div> <h3 class="text-xl font-bold text-navy-900 mb-3">Tours Personalizados</h3> <p class="text-gray-600">Rutas guiadas a tu propio ritmo por pueblos patrimonio, minas de sal y atractivos naturales y culturales.</p> </div> <div class="bg-white p-8 rounded-2xl shadow-md hover:shadow-xl transition border-t-4 border-gold-500"> <div class="w-14 h-14 bg-amber-100 text-gold-600 rounded-xl flex items-center justify-center text-2xl mb-6"> <i class="fa-solid fa-briefcase"></i> </div> <h3 class="text-xl font-bold text-navy-900 mb-3">Transporte Ejecutivo</h3> <p class="text-gray-600">Disponibilidad por horas o días completos para agendas corporativas, eventos y movilidad empresarial.</p> </div> </div> </section> <!-- Flota de Vehículos --> <section id="flota" class="bg-gray-100 py-20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-3xl font-bold text-navy-900">Nuestra Flota Moderna</h2> <div class="w-20 h-1 bg-gold-500 mx-auto mt-2"></div> <p class="text-gray-600 mt-4">Vehículos blancos impecables, climatizados y con mantenimiento preventivo constante.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-10"> <!-- Camioneta Jetour 7 Puestos --> <div class="bg-white rounded-2xl overflow-hidden shadow-lg flex flex-col"> <div class="relative h-64 bg-gray-200"> <img src="https://images.unsplash.com/photo-1519641471654-76ce0107ad1b?q=80&w=800" alt="Camioneta Jetour 7 Puestos Blanca" class="w-full h-full object-cover"> <span class="absolute top-4 left-4 bg-gold-500 text-navy-900 font-bold text-xs px-3 py-1.5 rounded-full uppercase"> 7 Pasajeros • Color Blanco </span> </div> <div class="p-8 flex-1 flex flex-col justify-between"> <div> <h3 class="text-2xl font-bold text-navy-900">Camioneta Jetour (7 Puestos)</h3> <p class="text-gray-600 mt-2">Máximo espacio y confort para familias y grupos de viaje. Cuenta con interiores amplios, aire acondicionado independiente y excelente capacidad de equipaje.</p> <div class="grid grid-cols-2 gap-2 mt-4 text-sm text-gray-500"> <div><i class="fa-solid fa-check text-gold-500 mr-2"></i> 7 Asientos confortables</div> <div><i class="fa-solid fa-check text-gold-500 mr-2"></i> Color Blanco Ejecutivo</div> <div><i class="fa-solid fa-check text-gold-500 mr-2"></i> Amplio baúl</div> <div><i class="fa-solid fa-check text-gold-500 mr-2"></i> USB / Climatizador</div> </div> </div> <a href="https://wa.me/573106088604?text=Hola,%20quiero%20cotizar%20la%20Camioneta%20Jetour%20Blanca%207%20puestos" target="_blank" class="mt-6 block text-center bg-navy-900 hover:bg-gold-500 hover:text-navy-900 text-white font-bold py-3 rounded-xl transition"> Cotizar Camioneta Jetour </a> </div> </div> <!-- Renault Logan 2026 --> <div class="bg-white rounded-2xl overflow-hidden shadow-lg flex flex-col"> <div class="relative h-64 bg-gray-200"> <img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?q=80&w=800" alt="Renault Logan 2026 Blanco" class="w-full h-full object-cover"> <span class="absolute top-4 left-4 bg-navy-900 text-white font-bold text-xs px-3 py-1.5 rounded-full uppercase"> Sedán Ejecutivo • Color Blanco </span> </div> <div class="p-8 flex-1 flex flex-col justify-between"> <div> <h3 class="text-2xl font-bold text-navy-900">Renault Logan 2026</h3> <p class="text-gray-600 mt-2">Sedán de última generación, ágil y cómodo. Ideal para traslados ejecutivos individuales, parejas o familias pequeñas con baúl de gran tamaño.</p> <div class="grid grid-cols-2 gap-2 mt-4 text-sm text-gray-500"> <div><i class="fa-solid fa-check text-gold-500 mr-2"></i> Modelo 2026 Impecable</div> <div><i class="fa-solid fa-check text-gold-500 mr-2"></i> Color Blanco</div> <div><i class="fa-solid fa-check text-gold-500 mr-2"></i> Gran baúl de 510L</div> <div><i class="fa-solid fa-check text-gold-500 mr-2"></i> Aire Acondicionado</div> </div> </div> <a href="https://wa.me/573106088604?text=Hola,%20quiero%20cotizar%20el%20Renault%20Logan%202026%20Blanco" target="_blank" class="mt-6 block text-center bg-navy-900 hover:bg-gold-500 hover:text-navy-900 text-white font-bold py-3 rounded-xl transition"> Cotizar Renault Logan 2026 </a> </div> </div> </div> </div> </section> <!-- 10 Destinos Turísticos --> <section id="destinos" class="py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-3xl font-bold text-navy-900">10 Destinos Imperdibles</h2> <div class="w-20 h-1 bg-gold-500 mx-auto mt-2"></div> <p class="text-gray-600 mt-4">Diseñamos rutas privadas hacia las principales joyas culturales y naturales de la región.</p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- 1. Zipaquirá --> <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1583324113626-70df0f4deaab?q=80&w=600" alt="Catedral de Sal Zipaquirá" class="h-48 w-full object-cover"> <div class="p-6"> <span class="text-xs font-bold text-gold-600 uppercase tracking-wider">Destino #1</span> <h3 class="text-xl font-bold text-navy-900 mt-1">Catedral de Sal de Zipaquirá</h3> <p class="text-gray-600 text-sm mt-2">Primera Maravilla de Colombia. Una majestuosa obra construida en las galerías subterráneas de una mina de sal.</p> <a href="https://wa.me/573106088604?text=Quiero%20información%20del%20tour%20a%20Zipaquirá" target="_blank" class="mt-4 inline-block text-gold-600 font-bold hover:underline text-sm">Cotizar Ruta Zipaquirá →</a> </div> </div> <!-- 2. Guatavita --> <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=600" alt="Laguna de Guatavita" class="h-48 w-full object-cover"> <div class="p-6"> <span class="text-xs font-bold text-gold-600 uppercase tracking-wider">Destino #2</span> <h3 class="text-xl font-bold text-navy-900 mt-1">Laguna Sagrada de Guatavita</h3> <p class="text-gray-600 text-sm mt-2">Lugar de origen de la mística leyenda de El Dorado. Senderismo ecológico rodeado de paisajes altoandinos.</p> <a href="https://wa.me/573106088604?text=Quiero%20información%20del%20tour%20a%20Guatavita" target="_blank" class="mt-4 inline-block text-gold-600 font-bold hover:underline text-sm">Cotizar Ruta Guatavita →</a> </div> </div> <!-- 3. Monserrate y La Candelaria --> <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1596422846543-75c6fc197f07?q=80&w=600" alt="Monserrate Bogotá" class="h-48 w-full object-cover"> <div class="p-6"> <span class="text-xs font-bold text-gold-600 uppercase tracking-wider">Destino #3</span> <h3 class="text-xl font-bold text-navy-900 mt-1">Monserrate y La Candelaria</h3> <p class="text-gray-600 text-sm mt-2">Panorámica icónica de Bogotá desde el cerro tutelar y recorrido histórico por calles coloniales y museos.</p> <a href="https://wa.me/573106088604?text=Quiero%20información%20del%20tour%20a%20Monserrate%20y%20Candelaria" target="_blank" class="mt-4 inline-block text-gold-600 font-bold hover:underline text-sm">Cotizar Ruta Bogotá →</a> </div> </div> <!-- 4. Nemocón --> <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1518709268805-4e9042af9f23?q=80&w=600" alt="Mina de Sal Nemocón" class="h-48 w-full object-cover"> <div class="p-6"> <span class="text-xs font-bold text-gold-600 uppercase tracking-wider">Destino #4</span> <h3 class="text-xl font-bold text-navy-900 mt-1">Mina de Sal de Nemocón</h3> <p class="text-gray-600 text-sm mt-2">60 metros bajo tierra con impresionantes espejos de salmuera naturales y cascadas de sal.</p> <a href="https://wa.me/573106088604?text=Quiero%20información%20del%20tour%20a%20Nemocón" target="_blank" class="mt-4 inline-block text-gold-600 font-bold hover:underline text-sm">Cotizar Ruta Nemocón →</a> </div> </div> <!-- 5. Chía y Andrés Carne de Res --> <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?q=80&w=600" alt="Gastronomía en Chía" class="h-48 w-full object-cover"> <div class="p-6"> <span class="text-xs font-bold text-gold-600 uppercase tracking-wider">Destino #5</span> <h3 class="text-xl font-bold text-navy-900 mt-1">Chía & Ruta Gastronómica</h3> <p class="text-gray-600 text-sm mt-2">Gastronomía de alta calidad, ambiente campestre y visita al icónico restaurante Andrés Carne de Res.</p> <a href="https://wa.me/573106088604?text=Quiero%20información%20de%20la%20ruta%20a%20Chía" target="_blank" class="mt-4 inline-block text-gold-600 font-bold hover:underline text-sm">Cotizar Ruta Chía →</a> </div> </div> <!-- 6. Sopó y Cabaña Alpina --> <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?q=80&w=600" alt="Sopó Cundinamarca" class="h-48 w-full object-cover"> <div class="p-6"> <span class="text-xs font-bold text-gold-600 uppercase tracking-wider">Destino #6</span> <h3 class="text-xl font-bold text-navy-900 mt-1">Sopó & Cabaña Alpina</h3> <p class="text-gray-600 text-sm mt-2">Pueblo de tradición láctea, postres típicos, parque Pionono y vistas espectaculares del valle.</p> <a href="https://wa.me/573106088604?text=Quiero%20información%20del%20tour%20a%20Sopó" target="_blank" class="mt-4 inline-block text-gold-600 font-bold hover:underline text-sm">Cotizar Ruta Sopó →</a> </div> </div> <!-- 7. Parque Jaime Duque --> <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?q=80&w=600" alt="Parque Jaime Duque Tocancipá" class="h-48 w-full object-cover"> <div class="p-6"> <span class="text-xs font-bold text-gold-600 uppercase tracking-wider">Destino #7</span> <h3 class="text-xl font-bold text-navy-900 mt-1">Parque Jaime Duque</h3> <p class="text-gray-600 text-sm mt-2">Ubicado en Tocancipá; réplicas del Taj Mahal, reserva biocultural, aviario y diversión familiar.</p> <a href="https://wa.me/573106088604?text=Quiero%20información%20del%20tour%20al%20Parque%20Jaime%20Duque" target="_blank" class="mt-4 inline-block text-gold-600 font-bold hover:underline text-sm">Cotizar Ruta Jaime Duque →</a> </div> </div> <!-- 8. Cajicá --> <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=600" alt="Cajicá Cundinamarca" class="h-48 w-full object-cover"> <div class="p-6"> <span class="text-xs font-bold text-gold-600 uppercase tracking-wider">Destino #8</span> <h3 class="text-xl font-bold text-navy-900 mt-1">Cajicá & Ruta Artesanal</h3> <p class="text-gray-600 text-sm mt-2">Tranquilidad Sabanera, artesanías en lana de oveja, centro cultural y arquitectura pintoresca.</p> <a href="https://wa.me/573106088604?text=Quiero%20información%20del%20tour%20a%20Cajicá" target="_blank" class="mt-4 inline-block text-gold-600 font-bold hover:underline text-sm">Cotizar Ruta Cajicá →</a> </div> </div> <!-- 9. Villa de Leyva --> <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?q=80&w=600" alt="Villa de Leyva Boyacá" class="h-48 w-full object-cover"> <div class="p-6">