/* css/style.css */

/* Configuración base */
body { 
    font-weight: 300; 
}

/* Animaciones */
.fade-in {
    animation: fadeIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
.delay-100 { animation-delay: 0.2s; }
.delay-200 { animation-delay: 0.4s; }
.delay-300 { animation-delay: 0.6s; }

/* Navbar */
#navbar { transition: all 0.5s ease; }

/* ESTILOS PARA LOS LOGOS - ESTO ES LO QUE HACE QUE SE CAMBIEN */
/* Estado Normal (Transparente): Muestra blanco, oculta oscuro */
.logo-white { display: block; }
.logo-dark { display: none; }

/* Estado Scrolled (Blanco): Oculta blanco, muestra oscuro */
.nav-scrolled .logo-white { display: none; }
.nav-scrolled .logo-dark { display: block; }

.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border-bottom: 1px solid rgba(0,43,78,0.05);
}

.nav-scrolled .nav-link { color: #002B4E !important; }
.nav-scrolled .nav-link:hover { color: #C5A065 !important; }

/* Botón Cotizar */
.nav-scrolled .reserve-btn { 
    border-color: #002B4E !important; 
    color: #002B4E !important; 
}
.nav-scrolled .reserve-btn:hover { 
    background-color: #002B4E !important; 
    color: white !important; 
}

/* Efectos de texto */
.text-hero-shadow { text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.text-glow { text-shadow: 0 0 15px rgba(197, 160, 101, 0.5); }

/* Tarjetas */
.package-card {
    background: white;
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05);
    height: 100%;
}
.package-card:hover {
    transform: translateY(-5px);
    border-color: rgba(197, 160, 101, 0.4);
    box-shadow: 0 20px 50px rgba(0,43,78,0.1);
}

/* Botones */
.btn-gold {
    background-color: #C5A065;
    color: white;
    border: 1px solid #C5A065;
    transition: all 0.3s ease;
}
.btn-gold:hover {
    background-color: #002B4E;
    border-color: #002B4E;
}

/* Inputs */
.input-float {
    border-bottom: 1px solid #d1d5db;
    transition: border-color 0.3s;
}
.input-float:focus {
     border-bottom-color: #C5A065;
}

/* Modal */
#gallery-modal { transition: opacity 0.3s ease-in-out; }
.modal-content { transform: scale(0.95); transition: transform 0.3s ease-out; }
#gallery-modal.active .modal-content { transform: scale(1); }