/* 
   NAVIGATION.CSS - HOTEL NEW PREMIUM
   Versión Final: Glassmorphism + Borde Giratorio + Centrado Flex + Drawer Móvil
*/

/* --- 1. HEADER BASE (EFECTO BORDE GIRATORIO + GLASS) --- */
.site-header {
    position: fixed;
    top: 10px; 
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1400px;
    
    height: 50px;
    z-index: 99999;
    
    background: transparent; 
    border: none; 
    border-radius: 50px; 
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    
    display: flex; 
    align-items: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CAPA 1: EL BORDE GIRATORIO (Detrás) */
.site-header::before {
    content: '';
    position: absolute;
    inset: -2px; /* Borde fino */
    z-index: -2;
    background: linear-gradient(90deg, var(--color-gold), #1a1f2c, #fcd34d, #1a1f2c, var(--color-gold));
    background-size: 300% 100%;
    animation: borderRotate 4s linear infinite;
    
    /* Hereda la forma redonda */
    border-radius: 50px; 
}

/* CAPA 2: EL VIDRIO (Encima del borde, tapa el centro) */
.site-header::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(21, 25, 34, 0.7); /* Un poco más oscuro para elegancia */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* Hereda la forma redonda */
    border-radius: 50px; 
    transition: background 0.4s ease;
}

@keyframes borderRotate {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.container-fluid {
    width: 100%;
    padding: 0 4%;
    max-width: 1800px;
    margin: 0 auto;
}

.header-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* --- 2. LOGO WRAPPER --- */
/* Por defecto: logo pequeño en header (todas las páginas excepto home) */
.logo-wrapper {
    position: absolute;
    top: -1px; 
    left: 0;
    z-index: 1002;
    width: 40px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-logo img {
    filter: none;
    transition: filter 0.3s;
}

/* Solo en la página de INICIO: logo grande que cuelga */
.home .logo-wrapper {
    width: 145px;
    top: 53px;
}

.home .brand-logo img {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

/* --- 3. HEADER SCROLLED (AL BAJAR) --- */
.site-header.scrolled {
    top: 2px; /* Se acerca más al techo */
    width: 98%; /* Se ensancha un poco */
    height: 60px;
    background: transparent;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

/* Al bajar, el fondo se vuelve CASI SÓLIDO para leer bien el menú */
.site-header.scrolled::after {
    background: rgba(21, 25, 34, 0.95); /* Casi sólido al bajar */
}

/* Logo pequeño centrado en 60px */
.site-header.scrolled .logo-wrapper {
    width: 45px; 
    
    /* Cálculo centro: (60px altura - 45px logo) / 2 = 7.5px */
    top: -3px; 
}
.site-header.scrolled .brand-logo img { filter: none; }


/* --- 4. NAVEGACIÓN DESKTOP (CENTRADO PERFECTO) --- */
.main-navigation {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Por defecto: sin compensación (logo pequeño) */
    padding-left: 50px; 
    
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Solo en home: compensación para logo grande */
.home .main-navigation {
    padding-left: 140px;
}

/* Al hacer scroll en home: reducimos la compensación */
.home .site-header.scrolled .main-navigation {
    padding-left: 50px; 
}

.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 1.5rem; /* Espacio equilibrado */
    margin: 0; padding: 0;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.main-navigation a {
    font-family: 'Montserrat', sans-serif;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.75rem; 
    font-weight: 600; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Evita que el texto se rompa */
    
    padding: 28px 0;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

@media (max-width: 1366px) {
    .main-navigation { padding-left: 100px; }
    .main-navigation ul { gap: 1rem; }
}

.main-navigation a:hover { color: var(--color-gold); }

/* Línea animada inferior */
.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 22px; left: 0; width: 100%; height: 1px;
    background-color: var(--color-gold);
    transform: scaleX(0); transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
}

.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after {
    transform: scaleX(1);
}
.main-navigation .current-menu-item > a { color: var(--color-gold); }


/* --- 5. BOTONES Y CONTROLES --- */
.header-right-controls {
    display: flex; align-items: center; gap: 1rem;
}

.header-actions .btn {
    font-family: 'Montserrat', sans-serif;
    border: 1px solid var(--color-gold); 
    color: var(--color-gold);
    border-radius: 50px; 
    padding: 12px 15px;
    font-size: 0.7rem; 
    font-weight: 600; 
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: transparent; 
    transition: all 0.3s ease; 
    white-space: nowrap;
}
.header-actions .btn:hover {
    background: var(--color-gold); color: #0d1116; box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.menu-toggle { display: none; } 
.mobile-cta-container { display: none; }


/* --- 6. RESPONSIVE / MÓVIL (DRAWER SIDEBAR) --- */
@media (max-width: 1200px) {
    
    /* A. AJUSTE BARRA MÓVIL */
    .site-header, .site-header.scrolled {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: 60px;
        background: #1a1f2c;
        border-bottom: 1px solid rgba(212, 175, 55, 0.3);
        border-radius: 0;
        padding: 0 15px;
        justify-content: space-between;
        z-index: 99999;
        box-sizing: border-box;
    }

    /* Ocultamos efectos pesados de PC */
    .site-header::before, .site-header::after { display: none; } 
    
    .container-fluid { 
        padding: 0; 
        width: 100%;
    }
    
    .header-inner {
        width: 100%;
        display: flex;
        justify-content: space-between; /* Asegura extremos */
        align-items: center;
    }

    /* B. LOGO MÓVIL */
    .logo-wrapper,
    .home .logo-wrapper,
    .site-header.scrolled .logo-wrapper {
        position: relative;
        top: auto !important; 
        left: auto !important;
        transform: none !important;
        width: 45px !important; /* Tamaño fijo pequeño */
        margin-right: auto;     /* Empuja el resto a la derecha */
        padding: 0;
        flex-shrink: 0;
    }
    .brand-logo img { filter: none; }

    /* C. MENÚ "DRAWER" (CAJÓN) */
    .main-navigation,
    .home .main-navigation {
        position: fixed; 
        top: 60px; /* Debajo del header */
        right: -100%; /* Oculto */
        width: 85%; 
        max-width: 400px; 
        height: calc(100vh - 60px); /* Altura restante */
        background: rgba(21, 25, 34, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column; 
        justify-content: flex-start; 
        align-items: center; /* Centrar contenido */
        margin-left: 0 !important; /* Reset margen de PC */
        padding: 40px 20px;
        padding-left: 20px !important; /* Reset del padding-left de home */
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        overflow-y: auto; 
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
        
        z-index: 99998; /* Justo debajo del header pero encima de todo lo demás */
    }
    
    /* Backdrop oscuro al abrir */
    .main-navigation.is-open { 
        right: 0; 
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.8);
    }

    .main-navigation ul {
        flex-direction: column; 
        gap: 0; 
        width: 100%; 
        text-align: center;
        padding: 0;
    }
    
    .main-navigation a {
        font-size: 1.1rem; 
        padding: 15px 0; 
        display: block;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        color: rgba(255,255,255,0.8);
    }
    .main-navigation a:hover {
        color: var(--color-gold); 
    }

    /* D. BOTÓN DE RESERVA MÓVIL */
    .header-actions { display: none; } /* Ocultar el del header */

    .mobile-cta-container {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    
    .btn-full {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 45px;
        width: auto;
        min-width: 200px;
        padding: 0 20px;
        
        background: transparent;
        border: 1px solid var(--color-gold);
        color: var(--color-gold);
        
        /* CORREGIDO: Redondeado para estética */
        border-radius: 50px; 
        
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 0.75rem; 
        letter-spacing: 1px; 
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
    }
    
    .btn-full:active {
        background: var(--color-gold);
        color: #000;
    }

    /* E. HAMBURGUESA */
    .header-right-controls {
        margin-left: auto; /* Empujar a la derecha */
        display: flex;
        align-items: center;
    }

    .menu-toggle {
        display: block !important; /* Forzar visibilidad */
        background: none; 
        border: none;
        color: var(--color-gold); 
        font-size: 2rem; 
        cursor: pointer;
        padding: 0; 
        line-height: 1;
        margin-left: 15px;
    }
}