/* ============================================
   COMPLEJOS BERILDE — Minimalist Design
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

html { scroll-behavior: smooth; }

body { 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    background-color: #f8fafc; /* slate-50 */
    color: #0f172a; /* slate-900 */
}

/* --- Hero Split Accordion --- */
.hero-split-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.hero-pane {
    position: relative;
    flex: 1;
    overflow: hidden;
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

.hero-pane:hover {
    flex: 1.4;
}

.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s linear;
}

.hero-pane:hover .hero-img {
    transform: scale(1.05);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.4) 100%);
    transition: background 0.5s ease;
}

.hero-pane:hover .hero-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.2) 100%);
}

.hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3rem;
    color: white;
    transform: translateY(20px);
    opacity: 0.8;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.hero-pane:hover .hero-content {
    transform: translateY(0);
    opacity: 1;
}

@media (max-width: 768px) {
    .hero-split-container {
        flex-direction: column;
    }
    .hero-pane {
        flex: 1;
    }
    .hero-pane:hover {
        flex: 1.2;
    }
    .hero-content {
        padding: 2rem;
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- Clean Animations --- */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Menu overlay --- */
#menu-overlay.menu-active {
    transform: translateX(0);
}