/**********************************/
/*********** NAVBAR ***************/
/**********************************/


/* CONTENEDOR PADRE */
.navbar-container {
    height: 80px;
    min-height: 80px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-navbar);
    box-sizing: border-box;
    padding: 10px 30px;
    contain: size layout;
}

/* Estructura lateral */
.nav-logo, .actions-menu {
    flex: 1;
    display: flex;
    align-items: center;
    z-index: 10002;
}

/* LOGO: Bloqueo de relación de aspecto */
.nav-logo {
    flex: 1;
    display: flex;
    align-items: center;
    z-index: 10002;
}

.nav-logo img {
    display: block;
    width: 110px;
    height: auto;
    aspect-ratio: 238 / 31;
    object-fit: contain;
    content-visibility: auto;
    transition: filter 0.4s ease;
}

/* Navbar sobre fondo claro — aurea section transición negro→blanco */
.navbar-container.navbar--on-light .nav-logo img {
    filter: invert(1);
}

.navbar-container.navbar--on-light .nav-item {
    color: rgba(0, 0, 0, 0.6);
}

.navbar-container.navbar--on-light .nav-item.active {
    background: rgba(0, 0, 0, 0.08);
    color: #000;
}

.navbar-container.navbar--on-light .nav-item:hover:not(.active) {
    color: #000;
    background: rgba(0, 0, 0, 0.06);
}

.navbar-container.navbar--on-light .talk-btn-glass {
    color: #000;
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.04);
}

.navbar-container.navbar--on-light .menu-toggle .bar {
    background-color: #000;
}

/* Con menú móvil abierto sobre fondo oscuro: revertir a blanco */
.navbar-container.navbar--on-light:has(.navbar.is-active) .nav-logo img {
    filter: none;
}

.navbar-container.navbar--on-light:has(.navbar.is-active) .talk-btn-glass {
    color: var(--color-white);
    border-color: var(--glass-border);
    background: var(--glass-bg);
}

.navbar-container.navbar--on-light:has(.navbar.is-active) .menu-toggle .bar {
    background-color: var(--color-white);
}

/* --- ESTADO DESKTOP (Cápsula de Cristal) --- */
.navbar {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-pill);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    margin: 0;
    transition: background 0.3s ease;
}

/* Elementos que solo existen en móvil se ocultan aquí */
.social-col, .menu-label, .menu-footer {
    display: none;
}

/* Wrapper de links para mantener horizontalidad en desktop */
.menu-links-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-item {
    min-width: 80px;
    font-family: var(--font-main);
    font-weight: var(--weight-medium);
    color: var(--color-white-muted);
    /* font-size: 0.9rem; */ /* Tamaño ligeramente reducido para un look más elegante */
    padding: 10px 18px;
    text-decoration: none;
    border-radius: var(--border-radius-card);
    transition: var(--transition-smooth);
    text-align: center;
}

.nav-item.active {
    background: var(--color-primary-bg);
    color: var(--color-white);
}

.nav-item:hover:not(.active) {
    color: var(--color-white);
    background: var(--color-white-dim);
}

.actions-menu {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    align-items: center;
}

/* Botón Talk (Global) */
.talk-btn-glass {
    font-family: var(--font-main);
    font-weight: var(--weight-medium);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    color: var(--color-white);
    padding: 12px 24px;
    border-radius: var(--border-radius-pill);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.talk-btn-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.8);
    flex-shrink: 0;
    animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.4; transform: scale(0.75); }
}

/* Ocultar hamburguesa en desktop */
.menu-toggle { display: none; }

/* ── Menú desktop ── */
.menu-toggle-desktop {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-white);
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: var(--weight-medium);
    padding: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: opacity 0.2s ease;
}

.menu-toggle-desktop:hover { opacity: 0.7; }

.menu-toggle-desktop__bars {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.menu-toggle-desktop__bars .bar {
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    display: block;
    transition: width 0.25s ease, transform 0.35s ease, opacity 0.25s ease;
}

.menu-toggle-desktop__bars .bar:nth-child(1) { width: 24px; }
.menu-toggle-desktop__bars .bar:nth-child(2) { width: 16px; }
.menu-toggle-desktop__bars .bar:nth-child(3) { width: 24px; }

.menu-toggle-desktop:hover .menu-toggle-desktop__bars .bar:nth-child(2) { width: 24px; }

.navbar-container.navbar--on-light .menu-toggle-desktop {
    color: #000;
}


/* --- ESTADO MÓVIL (Estructura 2 Columnas / Fondo Blanco) --- */
@media (max-width: 991px) {
    .menu-toggle-desktop { display: none; }
    .navbar-container {
        height: 70px;
        min-height: 70px;
        top: 0px;
        padding: 20px;
    }

    .nav-logo img {
        /* Dimensiones fijas para que el navegador reserve el espacio exacto */
        width: 120px;
        height: 18px;
    }

    /* Menú transformado a pantalla completa blanca */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 75vh !important;
        background: var(--color-black-pure) !important; /* Fondo blanco estilo QCLAY */
        flex-direction: column !important;
        justify-content: space-around !important;
        align-items: flex-start !important;
        padding: 120px 40px 90px !important;
        z-index: 1000 !important;
        border: none !important;
        border-radius: 0 !important;
        /* Fondo sólido: backdrop-filter no tiene efecto visual pero crea una capa GPU en Safari
           que persiste tras la animación y degrada el scroll. Lo eliminamos explícitamente. */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        /* Capa GPU permanente: evita el ciclo crear/destruir al abrir y cerrar el menú */
        will-change: opacity;

        /* Visibilidad manejada por GSAP */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .navbar.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    /* Mostrar elementos de móvil */
    .menu-content {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 40px;
        width: 100%;
    }

    .social-col, .menu-label, .menu-footer {
        display: block;
    }

    .menu-label {
        font-family: var(--font-main);
        font-weight: 500; /* Medium para labels pequeños */
        display: block;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--color-white-muted);
        margin-bottom: 10px;
        letter-spacing: 1px;
        font-weight: 600;
    }

    /* Links principales (Derecha) */
    .menu-links-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .navbar .nav-item {
        font-size: 2.2rem !important; /* Grande como la captura */
        font-weight: var(--weight-light) !important; /* Peso 200: Look elegante */
        font-weight: 500;
        color: var(--color-white) !important;
        padding: 0 !important;
        background: transparent !important;
        font-weight: 100;
    }

    /* Links sociales (Izquierda) */
    .nav-item-social {
        font-family: var(--font-main);
        font-weight: var(--weight-normal); /* Peso 400 */
        display: block;
        color: var(--color-white);
        text-decoration: none;
        font-size: 1.1rem;
        margin-bottom: 15px;
        transition: opacity 0.3s;
    }

    .nav-item-social:hover { opacity: 0.6; }

    /* Footer del menú */
    .menu-footer {
        width: 80%;
        border-top: 1px solid var(--color-white);
        padding-top: 30px;
    }

    .footer-email {
        font-family: var(--font-main);
        font-weight: var(--weight-medium); /* Peso 500 */
        font-size: 1rem;
        color: var(--color-white);
        text-decoration: none;
        display: inline-block;
        margin-bottom: 25px;
        font-weight: 500;
    }

    .footer-bottom {
        font-family: var(--font-main);
        font-weight: var(--weight-light); /* Peso 200 */
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        font-size: 0.8rem;
        color: #666;
    }

    .footer-bottom a { color: #666; text-decoration: none; }

    /* Ajuste Botón Talk en móvil */
    .talk-btn-glass {
        padding: 12px 20px;
        font-size: 0.8rem;
        /* Si el menú está abierto, lo cambiamos a negro para que se vea */
        position: relative;
    }

    /* Botón Hamburguesa */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        background: transparent !important;
        border: none !important;
        cursor: pointer;
        z-index: var(--z-mobile-menu);
        padding: 8px;
    }

    .menu-toggle-bars {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
    }

    .menu-toggle .bar {
        height: 1.5px;
        background-color: var(--color-white);
        border-radius: 2px;
        display: block;
        transition: transform 0.35s ease, opacity 0.25s ease, width 0.25s ease;
    }

    .menu-toggle-bars .bar:nth-child(1) { width: 24px; }
    .menu-toggle-bars .bar:nth-child(2) { width: 16px; }
    .menu-toggle-bars .bar:nth-child(3) { width: 24px; }

    .menu-toggle:hover .menu-toggle-bars .bar:nth-child(2) { width: 24px; }

    /* Invertir color si el menú está abierto (sobre blanco) */
    .menu-toggle.is-active .bar {
        background-color: var(--color-white) !important;
    }

    /* Animación X */
    .menu-toggle.is-active .menu-toggle-bars .bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .menu-toggle.is-active .menu-toggle-bars .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .menu-toggle-bars .bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* Ocultamos los elementos de entrada por defecto en CSS */
    .menu-label,
    .nav-item-social,
    .nav-item,
    .menu-footer {
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none; /* Evita clics accidentales mientras están ocultos */
    }

    /* Cuando el menú está activo, permitimos que los elementos reciban clics */
    .navbar.is-active .nav-item,
    .navbar.is-active .nav-item-social,
    .navbar.is-active .menu-footer {
        pointer-events: auto;
    }
}

@media (min-width: 1800px) {
    .nav-logo img {
        width: 20%;
    }
}