:root {
    --dark-blue: #0A192F;
    --corporate-blue: #0c4a6e; /* Azul legado para textos de reseña */
    --gold-accent: #FFD700;
    --gold-darker: #f0b90b;
    --light-slate: #ccd6f6;
    --slate: #8892b0;
    --white: #ffffff;
    --background: #F8F9FA;
    --border-radius: 12px;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background);
    color: var(--slate);
    font-weight: 300;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

h2, h3, .font-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--dark-blue);
}

h1.font-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--white);
}

#preloader { position: fixed; inset: 0; z-index: 10000; background-color: var(--dark-blue); display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.75s ease-out, visibility 0.75s ease-out; }
#preloader.hidden { opacity: 0; visibility: hidden; }
.preloader-logo { transition: transform 1s ease-in-out; transform: scale(0.9); }
.preloader-logo.loaded { transform: scale(1); }
.progress-bar { height: 2px; width: 150px; background-color: rgba(255, 255, 255, 0.2); margin-top: 1.5rem; border-radius: 2px; overflow: hidden; }
.progress-bar-inner { height: 100%; width: 0%; background-color: var(--gold-accent); transition: width 2s cubic-bezier(0.25, 1, 0.5, 1); }

#main-content { opacity: 0; transition: opacity 0.75s ease-in-out; }
#main-content.loaded { opacity: 1; }
.hero-bg { background-image: url('https://firebasestorage.googleapis.com/v0/b/sitioweb-31ef2.firebasestorage.app/o/IMG_3655%20Copy.JPG?alt=media&token=a7faae32-c844-4dfb-934e-b259986121ab'); }
.text-shadow { text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); }
.gradient-overlay { background: linear-gradient(45deg, rgba(2,0,36,0.7) 0%, rgba(10,25,47,0.6) 35%, rgba(0,212,255,0.2) 100%); }

.btn { display: inline-block; font-weight: 600; padding: 12px 32px; border-radius: var(--border-radius); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; position: relative; overflow: hidden; }
.btn-primary { background-image: linear-gradient(45deg, #0c4a6e 0%, #3b82f6 100%); color: white; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5); }

input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; cursor: pointer; background: #e2e8f0; border-radius: 3px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 24px; width: 24px; border-radius: 50%; background: var(--dark-blue); cursor: pointer; margin-top: -9px; box-shadow: 0 0 10px rgba(0,0,0,0.2); transition: transform 0.2s ease; }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.1); }
.surface-button.active { background-color: var(--dark-blue); color: white; border-color: var(--dark-blue); }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); }
.slide-in-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); }
.slide-in-right { opacity: 0; transform: translateX(30px); transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1); }

.is-visible { opacity: 1; transform: translateX(0) translateY(0); }

.lifestyle-gallery figure.is-visible {
     opacity: 1;
     transform: scale(1);
}
.lifestyle-gallery figure {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.text-focus-in { animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; }
@keyframes text-focus-in { 0% { filter: blur(12px); opacity: 0; } 100% { filter: blur(0px); opacity: 1; } }

.lifestyle-gallery figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 2rem 1rem 1rem;
    font-weight: bold;
    text-align: center;
    transition: opacity 0.3s ease;
}

/* === COVERFLOW CAROUSEL STYLES === */
#coverflow-carousel-container {
    width: 100%;
    padding: 2rem 0;
    overflow: hidden;
}
.coverflow-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 800px;
    position: relative;
    height: 400px;
}
.coverflow-carousel .carousel-item {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    cursor: pointer;
}
.coverflow-carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.carousel-nav.prev { left: 10%; }
.carousel-nav.next { right: 10%; }
.carousel-subtitle {
    text-align: center;
    margin-top: 1.5rem;
    font-weight: 600;
    color: var(--dark-blue);
    transition: opacity 0.5s;
    height: 2em;
}


@media (max-width: 768px) {
    header.hero-bg { height: 100vh; min-height: 600px; }
    header.hero-bg > div { height: 100%; }
    
    .coverflow-carousel {
        height: 280px; /* Adjust height for mobile */
    }
    .coverflow-carousel .carousel-item {
        width: 250px; /* Make items smaller on mobile */
        height: 250px;
    }

    .carousel-nav.prev { left: 1rem; }
    .carousel-nav.next { right: 1rem; }
}