<script src="https://cdn.tailwindcss.com"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">


<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Plus Jakarta Sans', 'sans-serif'],
},
colors: {
eventure: {
blue: '#0a4988', /* Deep Ocean Blue */
pink: '#e2107b', /* Vibrant Magenta */
purple: '#674d9c', /* Soft Violet */
sky: '#f0f7ff' /* Light Peaceful Sky */
}
},
boxShadow: {
'soft': '0 20px 50px rgba(10, 73, 136, 0.08)',
'glow-pink': '0 10px 25px rgba(226, 16, 123, 0.25)',
'glow-blue': '0 10px 25px rgba(10, 73, 136, 0.2)',
}
}
}
}
</script>

<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #ffffff;
color: #1e293b;
overflow-x: hidden;
}

@keyframes floatSlow {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes planeLoop {
0% { transform: translate(-10px, 10px) rotate(-5deg); }
50% { transform: translate(15px, -15px) rotate(3deg); }
100% { transform: translate(-10px, 10px) rotate(-5deg); }
}

.animate-float {
animation: floatSlow 6s ease-in-out infinite;
}

.animate-plane {
animation: planeLoop 7s ease-in-out infinite;
}

.sky-bg-gradient {
background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
}

.pink-gradient-btn {
background: linear-gradient(135deg, #e2107b 0%, #ff4d9e 100%);
}

.blue-gradient-btn {
background: linear-gradient(135deg, #0a4988 0%, #1d6cb9 100%);
}

.whatsapp-gradient-btn {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}
</style>

<div class="absolute top-12 left-8 w-64 h-64 bg-blue-100/60 rounded-full blur-3xl -z-10 pointer-events-none"></div>
<div class="absolute bottom-10 right-8 w-72 h-72 bg-pink-100/50 rounded-full blur-3xl -z-10 pointer-events-none"></div>


<div class="hidden lg:block absolute top-24 left-16 text-eventure-purple/30 text-4xl animate-float">
<i class="fa-solid fa-cloud"></i>
</div>
<div class="hidden lg:block absolute bottom-32 left-24 text-eventure-pink/20 text-3xl animate-float" style="animation-delay: 2s;">
<i class="fa-solid fa-compass"></i>
</div>
<div class="hidden lg:block absolute top-36 right-24 text-eventure-blue/20 text-3xl animate-plane">
<i class="fa-solid fa-paper-plane"></i>
</div>


<header class="w-full max-w-5xl flex justify-between items-center z-10 py-2 sm:py-4">
<div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-eventure-sky border border-eventure-blue/15 text-eventure-blue text-xs font-semibold tracking-wide">
<span class="w-2 h-2 rounded-full bg-eventure-pink animate-pulse"></span>
<span>Agencia de Viajes & Experiencias</span>
</div>

<button onclick="toggleConfigModal()" class="flex items-center gap-2 bg-white hover:bg-slate-50 text-slate-600 hover:text-eventure-blue text-xs sm:text-sm font-medium px-3.5 py-2 rounded-full border border-slate-200 shadow-sm transition hover:shadow">
<i class="fa-solid fa-gear text-eventure-pink"></i>
<span>Personalizar datos</span>
</button>
</header>


<main class="w-full max-w-3xl my-auto z-10 py-6">
<div class="bg-white/90 backdrop-blur-md rounded-3xl p-6 sm:p-10 md:p-14 text-center shadow-soft border border-slate-100 relative">


<div class="mb-8 flex justify-center items-center">
<img id="brandLogo" src="eventure.png" alt="Eventure Travel" class="max-h-28 sm:max-h-36 md:max-h-40 w-auto object-contain hover:scale-105 transition duration-300" onerror="this.onerror=null; this.src='https://placehold.co/400x150/0a4988/ffffff?text=Eventure';">
</div>


<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold tracking-tight mb-4 text-eventure-blue leading-tight">
¡Sitio Web en <span class="text-eventure-pink">Construcción!</span>
</h1>

<p class="text-slate-600 text-sm sm:text-base md:text-lg max-w-xl mx-auto mb-8 font-normal leading-relaxed">
Estamos preparando la plataforma de viajes de tus sueños. Muy pronto podrás planificar, reservar y vivir experiencias inolvidables.
</p>


<div class="mb-10">
<p class="text-xs font-bold uppercase tracking-wider text-eventure-purple mb-4">Lanzamiento en</p>
<div class="grid grid-cols-4 gap-2 sm:gap-4 max-w-md mx-auto">
<div class="bg-eventure-sky/80 border border-blue-100 rounded-2xl p-2.5 sm:p-4 text-center shadow-sm">
<span id="days" class="block font-extrabold text-2xl sm:text-4xl text-eventure-blue">30</span>
<span class="text-[10px] sm:text-xs font-semibold text-slate-500 uppercase tracking-wider">Días</span>
</div>
<div class="bg-eventure-sky/80 border border-blue-100 rounded-2xl p-2.5 sm:p-4 text-center shadow-sm">
<span id="hours" class="block font-extrabold text-2xl sm:text-4xl text-eventure-blue">00</span>
<span class="text-[10px] sm:text-xs font-semibold text-slate-500 uppercase tracking-wider">Horas</span>
</div>
<div class="bg-eventure-sky/80 border border-blue-100 rounded-2xl p-2.5 sm:p-4 text-center shadow-sm">
<span id="minutes" class="block font-extrabold text-2xl sm:text-4xl text-eventure-blue">00</span>
<span class="text-[10px] sm:text-xs font-semibold text-slate-500 uppercase tracking-wider">Mins</span>
</div>
<div class="bg-eventure-sky/80 border border-blue-100 rounded-2xl p-2.5 sm:p-4 text-center shadow-sm">
<span id="seconds" class="block font-extrabold text-2xl sm:text-4xl text-eventure-pink">00</span>
<span class="text-[10px] sm:text-xs font-semibold text-slate-500 uppercase tracking-wider">Segs</span>
</div>
</div>
</div>


<div class="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4">
<a id="whatsappBtn" href="https://wa.me/5491122566696?text=Hola%20Eventure!%20Quisiera%20consultar%20por%20un%20viaje" target="_blank" rel="noopener noreferrer" class="w-full sm:w-auto flex items-center justify-center gap-3 px-6 py-3.5 rounded-2xl whatsapp-gradient-btn text-white font-bold shadow-lg shadow-emerald-500/20 hover:shadow-emerald-500/30 transition transform hover:-translate-y-0.5">
<i class="fa-brands fa-whatsapp text-xl"></i>
<span>WhatsApp</span>
</a>

<a id="instagramBtn" href="https://instagram.com/eventure.travel" target="_blank" rel="noopener noreferrer" class="w-full sm:w-auto flex items-center justify-center gap-3 px-6 py-3.5 rounded-2xl pink-gradient-btn text-white font-bold shadow-glow-pink transition transform hover:-translate-y-0.5">
<i class="fa-brands fa-instagram text-xl"></i>
<span>Instagram</span>
</a>

<a id="emailBtn" href="mailto:ventas@eventure.com.ar" class="w-full sm:w-auto flex items-center justify-center gap-3 px-6 py-3.5 rounded-2xl blue-gradient-btn text-white font-bold shadow-glow-blue transition transform hover:-translate-y-0.5">
<i class="fa-regular fa-envelope text-lg"></i>
<span>Email</span>
</a>
</div>
</div>
</main>


<footer class="w-full max-w-5xl text-center z-10 py-4 text-xs font-medium text-slate-400">
<p>© <span id="currentYear"></span> Eventure Viajes. Todos los derechos reservados.</p>
</footer>


<div id="configModal" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
<div class="bg-white rounded-3xl w-full max-w-md p-6 sm:p-8 shadow-2xl border border-slate-100 relative">
<button onclick="toggleConfigModal()" class="absolute top-5 right-5 text-slate-400 hover:text-slate-600 transition">
<i class="fa-solid fa-xmark text-xl"></i>
</button>

<div class="flex items-center gap-3 mb-2">
<div class="w-8 h-8 rounded-full bg-eventure-sky flex items-center justify-center text-eventure-pink">
<i class="fa-solid fa-sliders"></i>
</div>
<h3 class="text-xl font-bold text-eventure-blue">Editar Datos de Contacto</h3>
</div>
<p class="text-xs text-slate-500 mb-6">Ingresa tus datos reales para actualizar los enlaces.</p>

<div class="space-y-4">
<div>
<label class="block text-xs font-bold text-slate-700 mb-1">WhatsApp (con código de país)</label>
<input type="text" id="inputPhone" placeholder="Ej: 5491112345678" value="5491112345678" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-sm text-slate-800 focus:outline-none focus:border-eventure-blue">
</div>

<div>
<label class="block text-xs font-bold text-slate-700 mb-1">Instagram (sin @)</label>
<input type="text" id="inputInstagram" placeholder="Ej: eventure.viajes" value="eventure.viajes" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-sm text-slate-800 focus:outline-none focus:border-eventure-blue">
</div>

<div>
<label class="block text-xs font-bold text-slate-700 mb-1">Correo Electrónico</label>
<input type="email" id="inputEmail" placeholder="contacto@eventure.com" value="contacto@eventure.com" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-sm text-slate-800 focus:outline-none focus:border-eventure-blue">
</div>

<button onclick="saveConfiguration()" class="w-full pink-gradient-btn text-white font-bold py-3 rounded-xl shadow-glow-pink transition mt-4">
Guardar Cambios
</button>
</div>
</div>
</div>


<script>
document.getElementById('currentYear').textContent = new Date().getFullYear();

let targetDate = new Date();
targetDate.setDate(targetDate.getDate() + 30);

function updateCountdown() {
const now = new Date().getTime();
const distance = targetDate.getTime() - now;

if (distance < 0) return;

const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById('days').innerText = String(days).padStart(2, '0');
document.getElementById('hours').innerText = String(hours).padStart(2, '0');
document.getElementById('minutes').innerText = String(minutes).padStart(2, '0');
document.getElementById('seconds').innerText = String(seconds).padStart(2, '0');
}

setInterval(updateCountdown, 1000);
updateCountdown();

function toggleConfigModal() {
document.getElementById('configModal').classList.toggle('hidden');
}

function saveConfiguration() {
const email = document.getElementById('inputEmail').value.trim();
const phone = document.getElementById('inputPhone').value.trim();
const instagram = document.getElementById('inputInstagram').value.trim();

if (email) document.getElementById('emailBtn').href = `mailto:${email}`;
if (phone) document.getElementById('whatsappBtn').href = `https://wa.me/${phone}?text=Hola%20Eventure!%20Quisiera%20consultar%20por%20un%20viaje`;
if (instagram) document.getElementById('instagramBtn').href = `https://instagram.com/${instagram.replace('@', '')}`;

toggleConfigModal();
}
</script>