Univiajes
/* Estilos Base y Tipografía */
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
color: #FFFFFF;
background-color: #000;
}
/* Contenedor del Carrusel */
.slider-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
/* Diapositivas Individuales */
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.5s ease-in-out;
background-size: cover;
background-position: center;
}
.slide.active {
opacity: 1;
}
/* Capa de Superposición con Gradiente */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
padding: 1rem;
z-index: 2;
}
/* Logo Principal */
.logo-header {
max-width: 400px;
margin-top: 1rem;
margin-bottom: 0.5rem;
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
}
.logo-header img {
max-height: 160px;
width: auto;
}
.main-headline {
font-size: 3rem;
font-weight: 900;
line-height: 1;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
margin-bottom: 0.25rem;
text-transform: uppercase;
}
.sub-text {
font-size: 1.1rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
max-width: 500px;
margin-bottom: 2rem;
opacity: 0.95;
}
/* CAJA VIAJERA (Glassmorphism) */
.travel-box {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
padding: 2rem;
border-radius: 2rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
max-width: 420px;
width: 100%;
z-index: 3;
border: 1px solid rgba(255, 255, 255, 0.25);
position: relative;
margin-top: 1.5rem;
}
/* Círculo para el Logo del Segmento */
.segment-logo-circle {
width: 110px;
height: 110px;
background: white;
border-radius: 50%;
margin: -65px auto 1rem auto;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
border: 4px solid #ff9900;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
opacity: 0;
transform: scale(0.6);
}
.segment-logo-circle.show {
opacity: 1;
transform: scale(1);
}
.segment-logo-circle img {
max-width: 85%;
max-height: 85%;
object-fit: contain;
}
.segment-desc {
font-size: 0.95rem;
color: white;
font-weight: 600;
margin-bottom: 1.5rem;
line-height: 1.4;
min-height: 2.8em;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.travel-box label {
text-align: left;
display: block;
font-weight: 800;
margin-bottom: 0.5rem;
font-size: 0.85rem;
color: #ff9900;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.travel-box select {
width: 100%;
padding: 0.8rem 1rem;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 1rem;
margin-bottom: 1.5rem;
background: rgba(255,255,255,0.98);
color: #1a1a1a;
font-size: 1.1rem;
outline: none;
font-weight: 600;
cursor: pointer;
}
.btn-search {
width: 100%;
padding: 1.2rem;
background: #ff9900;
color: white;
font-weight: 900;
font-size: 1.2rem;
border-radius: 1rem;
transition: all 0.3s;
box-shadow: 0 6px 20px rgba(255, 153, 0, 0.5);
text-transform: uppercase;
cursor: pointer;
border: none;
}
.btn-search:hover {
background: #e68a00;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 153, 0, 0.7);
}
.link-home {
margin-top: 2rem;
font-weight: 700;
font-size: 1rem;
color: rgba(255,255,255,0.9);
text-decoration: none;
transition: color 0.3s;
background: rgba(0,0,0,0.3);
padding: 0.5rem 1.5rem;
border-radius: 2rem;
}
.link-home:hover {
color: #ff9900;
background: rgba(0,0,0,0.5);
}
/* Botón Flotante de Contacto */
.float-contact {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 100;
display: flex;
align-items: center;
text-decoration: none;
transition: transform 0.3s ease;
}
.float-contact:hover {
transform: scale(1.05);
}
.contact-label {
background: white;
color: #1a1a1a;
padding: 0.5rem 1.25rem;
border-radius: 2rem;
margin-right: -1rem;
padding-right: 2rem;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
pointer-events: none;
transform: translateX(10px);
opacity: 0;
transition: all 0.3s ease;
}
.float-contact:hover .contact-label {
opacity: 1;
transform: translateX(0);
}
.contact-icon {
width: 60px;
height: 60px;
background: #ff9900;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(255, 153, 0, 0.5);
border: 3px solid white;
position: relative;
}
.contact-icon::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: #ff9900;
z-index: -1;
animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(1.5); opacity: 0; }
}
/* Ajustes Mobile */
@media (max-width: 768px) {
.logo-header {
max-width: 280px;
margin-top: 0.5rem;
}
.logo-header img {
max-height: 100px;
}
.main-headline {
font-size: 2rem;
}
.sub-text {
font-size: 1rem;
margin-bottom: 2rem;
}
.travel-box {
padding: 1.5rem;
margin-top: 2rem;
}
.segment-logo-circle {
width: 90px;
height: 90px;
margin-top: -60px;
}
.float-contact {
bottom: 1.5rem;
right: 1.5rem;
}
.contact-icon {
width: 50px;
height: 50px;
}
.contact-label {
display: none; /* Ocultar etiqueta en móvil para no tapar contenido */
}
}
Tu próxima aventura
Los destinos más espectaculares te esperan.
Elige una opción...
Travesías por el Mundo
Colombia Biodiversa
Playas Verde Azul
Vamos A (Turismo Deportivo)
// Lógica del Carrusel de Fondo
const slidesWrapper = document.getElementById('slides-wrapper');
const images = [
'https://assets.zyrosite.com/mp840ZBZVXsDzKk2/copia-de-presentacian-mundial-2-YNqMbN9bkZt8rPVj.png',
'https://univiajes.univiajes.site/wp-content/uploads/2025/10/pexels-gabriela-palai-129458-404960-scaled.jpg',
'https://univiajes.univiajes.site/wp-content/uploads/2025/10/pexels-torie-roman-70202610-12113752-scaled.jpg',
'https://univiajes.univiajes.site/wp-content/uploads/2025/10/pexels-pic-matti-450440252-34471962-scaled.jpg',
'https://univiajes.univiajes.site/wp-content/uploads/2025/10/pexels-fabianwiktor-4011450-scaled.jpg'
];
// Crear diapositivas dinámicamente
images.forEach((url, i) => {
const div = document.createElement('div');
div.className = `slide ${i === 0 ? 'active' : ''}`;
div.style.backgroundImage = `url('${url}')`;
slidesWrapper.appendChild(div);
});
// Intervalo para cambiar de imagen cada 6 segundos
let idx = 0;
setInterval(() => {
const slides = document.querySelectorAll('.slide');
if (slides.length > 0) {
slides[idx].classList.remove('active');
idx = (idx + 1) % slides.length;
slides[idx].classList.add('active');
}
}, 6000);
// Lógica para actualizar la Interfaz al seleccionar un plan
function updateUI() {
const select = document.getElementById('segment-select');
const circle = document.getElementById('logo-circle');
const img = document.getElementById('selected-segment-img');
const desc = document.getElementById('segment-desc');
const selected = select.options[select.selectedIndex];
if (selected.value) {
img.src = selected.getAttribute('data-img');
desc.textContent = selected.getAttribute('data-desc');
// Mostrar el círculo con animación
circle.classList.add('show');
// Pequeño efecto de entrada para la descripción
desc.style.opacity = '0';
setTimeout(() => {
desc.style.transition = 'opacity 0.4s ease';
desc.style.opacity = '1';
}, 50);
}
}
// Navegar a la URL del plan seleccionado
function handleTravel() {
const url = document.getElementById('segment-select').value;
if (url) {
window.open(url, '_blank');
}
}
// Inicializar iconos de Lucide
window.onload = () => {
if (window.lucide) {
lucide.createIcons();
}
};
