:root {
    --celeste: #3498db;
    --text-dark: #2c3e50;
    --sand: #fbf9f3;
    --border-tan: #e8e1d5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; line-height: 1.6; color: var(--text-dark); background-color: white; overflow-x: hidden; }
h1, h2, .logo { font-family: 'Caveat', cursive; }

/* --- HEADER --- */
#main-header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000; 
    transition: 0.4s ease; 
    padding: 25px 60px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

#main-header.scrolled { 
    background: rgba(255, 255, 255, 0.98); 
    padding: 15px 60px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); 
}

.logo-wrapper { display: flex; align-items: center; gap: 40px; }

.logo { 
    font-size: 3.5rem; 
    color: white; 
    transition: 0.4s; 
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3); 
}

#main-header.scrolled .logo { 
    color: var(--celeste); 
    font-size: 2.8rem; 
    text-shadow: none; 
}

.header-contact-wrapper { display: flex; gap: 25px; align-items: center; background: rgba(255, 255, 255, 0.15); padding: 8px 22px; border-radius: 50px; }
#main-header.scrolled .header-contact-wrapper { background: rgba(0, 0, 0, 0.05); }
.header-contact-text { font-size: 0.82rem; font-weight: 600; color: white; }
#main-header.scrolled .header-contact-text { color: var(--text-dark); }

.navbar { display: flex; align-items: center; }
.nav-links { display: flex; list-style: none; gap: 30px; align-items: center; }
.nav-links a { text-decoration: none; color: white; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }
#main-header.scrolled .nav-links a { color: var(--text-dark); }

/* --- BARRA DE CONTACTO MÓVIL --- */
.mobile-contact-bar {
    display: none;
    background: #fbf9f3;
    padding: 12px 20px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 85px;
    border-bottom: 1px solid var(--border-tan);
}

/* --- HERO --- */
.hero { height: 100vh; background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('img/hero-beach.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: white; text-align: center; }
.hero h1 { font-size: clamp(4rem, 12vw, 7.5rem); text-shadow: 2px 2px 15px rgba(0,0,0,0.3); line-height: 0.8; }
.hero-tagline { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; margin: 40px 0 60px 0; text-shadow: 2px 2px 10px rgba(0,0,0,0.3); }

/* --- FLOATING SECTIONS --- */
.floating-section { padding: 100px 0; position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.floating-container { max-width: 1900px; width: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0 3%; }
.floating-container.reverse { flex-direction: row-reverse; }

.floating-image-wrapper { flex: 2.6; position: relative; z-index: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 35px 80px rgba(0,0,0,0.18); }
.floating-img { width: 100%; height: 850px; object-fit: cover; display: block; transition: 0.6s ease; }
.floating-image-wrapper:hover .floating-img { transform: scale(1.03); }

.floating-text-card { 
    flex: 1; background: white; padding: 80px 65px; margin-left: -120px; 
    position: relative; z-index: 10; border-radius: 12px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.14); display: flex; flex-direction: column; 
    justify-content: center; min-height: 520px; 
}
.menu-panel-large { flex: 1.4; margin-left: -180px; padding: 85px 65px; }
.floating-container.reverse .floating-text-card { margin-left: 0; margin-right: -120px; }

.floating-text-card h2 { font-size: 4.8rem; line-height: 1.1; margin-bottom: 22px; font-weight: 400; color: var(--text-dark); }
.sub-title { color: var(--celeste); text-transform: uppercase; letter-spacing: 3.5px; font-weight: 600; font-size: 0.85rem; display: block; margin-bottom: 12px; }

/* --- MENU 3 COLUMNS --- */
.menu-lists-wrapper { display: flex; gap: 40px; margin-top: 35px; text-align: left; }
.menu-column { flex: 1; }
.menu-column h3 { font-size: 0.9rem; text-transform: uppercase; color: var(--celeste); border-bottom: 1px solid var(--border-tan); margin-bottom: 15px; padding-bottom: 8px; }
.menu-column li { font-size: 1.15rem; margin-bottom: 8px; font-weight: 300; }

/* --- RESERVATIONS --- */
.res-bg { padding: 130px 20px; background: var(--sand); }
.res-container { max-width: 1450px; margin: 0 auto; display: flex; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,0.08); min-height: 650px; }
.res-form-side { flex: 1; padding: 80px; display: flex; flex-direction: column; justify-content: center; }
.res-map-side { flex: 1.5; position: relative; background: #eee; }
.res-map-side iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.booking-form input, .booking-form select { padding: 18px; border: 1px solid #ddd; border-radius: 6px; width: 100%; margin-bottom: 16px; font-size: 1.05rem; }

/* --- BOTONES --- */
.btn-white, .btn-solid, .btn-res { padding: 18px 46px; border-radius: 6px; text-decoration: none; font-weight: 600; transition: 0.3s; display: inline-block; text-transform: uppercase; font-size: 0.85rem; border: none; cursor: pointer; letter-spacing: 1.5px; }
.btn-white { background: white; color: var(--text-dark); }
.btn-solid { background: var(--celeste); color: white; }
/*.btn-res { background: var(--text-dark); color: white; width: 100%; }*/
/* Añade esto a tu CSS */
.btn-res:disabled {
    background-color: #d1d1d1 !important;
    color: #888 !important;
    cursor: not-allowed;
    border: none;
}

footer { padding: 90px 20px; text-align: center; font-size: 0.95rem; font-weight: 600; letter-spacing: 1.2px; background: white; }

/* --- RESPONSIVE & MOBILE (CORREGIDO TOTAL) --- */
.menu-toggle { display: none; cursor: pointer; }

@media (max-width: 992px) {
    /* Header & Logo */
    #main-header, #main-header.scrolled { 
        padding: 15px 20px !important; 
        background: white !important; 
        height: 70px !important; 
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .logo, #main-header.scrolled .logo { 
        color: var(--celeste) !important; 
        font-size: 2.4rem !important; 
        text-shadow: none !important; 
        transition: none !important;
        position: relative;
        z-index: 1200;
    }
    
    /* HAMBURGUESA: Forzamos su aparición y centrado */
    .menu-toggle { 
        display: flex !important; 
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute; 
        left: 50%; 
        top: 50%; 
        transform: translate(-50%, -50%); 
        z-index: 1300; /* Por encima de todo */
        width: 40px;
        height: 40px;
    }

    .menu-toggle span { 
        background: var(--text-dark) !important; 
        width: 28px; 
        height: 3px; 
        display: block; 
        margin: 3px 0; 
        transition: 0.3s;
    }

    /* Navbar Móvil */
    .navbar { 
        position: fixed; 
        top: 0; 
        right: -100%; 
        width: 100%; 
        height: 100vh; 
        background: white; 
        z-index: 1100; 
        transition: 0.4s ease-in-out; 
        display: flex !important; /* Asegura que se vea al activarse */
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
    }
    
    .navbar.active { 
        right: 0 !important; 
    }

    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        list-style: none;
        text-align: center;
    }

    .nav-links a { 
        color: var(--text-dark) !important; 
        font-size: 1.6rem !important; 
        font-weight: 700;
    }

    /* Ocultar elementos innecesarios */
    .header-contact-wrapper { display: none !important; }
    .mobile-contact-bar { display: flex; flex-direction: column; gap: 6px; }

    /* --- TARJETAS CENTRADAS --- */
    .floating-container, .floating-container.reverse { 
        flex-direction: column !important; 
        padding: 0 !important; 
    }

    .floating-image-wrapper { width: 100% !important; height: 380px !important; border-radius: 0 !important; }

    .floating-text-card, 
    .menu-panel-large,
    .floating-container.reverse .floating-text-card { 
        width: 90% !important; 
        margin: -50px auto 40px auto !important; 
        padding: 40px 20px !important; 
        text-align: center !important; 
        min-height: auto !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;
        left: 0 !important;
        right: 0 !important;
    }

    .floating-text-card h2 { font-size: 3rem !important; }
    .menu-lists-wrapper { flex-direction: column !important; gap: 20px !important; }

    /* Reservaciones móvil */
    .res-container { flex-direction: column !important; }
    .res-form-side { padding: 40px 20px !important; order: 1; }
    .res-map-side { height: 300px !important; width: 100% !important; order: 2; flex: none !important; }
    .res-map-side iframe { position: relative !important; height: 300px !important; }
}