/* =========================================
   ESTILOS MAESTROS DE NAVEGACIÓN (HEADER)
   ========================================= */

/* 1. CONTENEDOR PRINCIPAL */
.lab-header {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 80px;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lab-nav-container {
    max-width: 1400px; height: 100%; margin: 0 auto; padding: 0 5%;
    display: flex; justify-content: space-between; align-items: center;
}

/* 2. LOGO */
.lab-logo-link { display: flex; align-items: center; margin-right: 40px; }
.lab-logo-img { height: 50px; width: auto; transition: 0.3s; }
.lab-logo-link:hover .lab-logo-img { transform: scale(1.05); }

/* 3. MENÚ DE ESCRITORIO (Por defecto) */
.lab-nav { display: flex; gap: 30px; }

.lab-link {
    font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 600;
    color: #bbb; text-decoration: none; text-transform: uppercase;
    transition: 0.3s; position: relative;
}
.lab-link:hover { color: white; }
.nav-badge {
    background: var(--lab-purple); color: white; font-size: 0.6rem;
    padding: 2px 5px; border-radius: 4px; margin-left: 5px; vertical-align: middle;
}

/* 4. BOTONES DE ACCIÓN */
.lab-header-actions { display: flex; align-items: center; gap: 15px; }

.lab-btn-back {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.75rem; color: white; text-decoration: none;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 8px 16px; border-radius: 50px; transition: 0.3s;
}
.lab-btn-back:hover { background: white; color: black; }
.lab-btn-back strong { color: var(--lab-cyan); font-weight: 800; }

/* Botón Hamburguesa (Oculto en PC) */
.lab-menu-toggle { display: none; color: white; font-size: 1.5rem; cursor: pointer; }


/* =========================================
   MODO RESPONSIVE (MÓVIL / TABLET)
   ========================================= */
@media (max-width: 1024px) {
    
    /* Ocultar navegación de escritorio y mostrar botón hamburguesa */
    .lab-btn-back .btn-text { display: none; } /* Solo icono en móvil */
    .lab-menu-toggle { display: block; }       /* Mostrar hamburguesa */

    /* EL MENÚ MÓVIL (Estado Cerrado) */
    .lab-nav {
        position: fixed;
        top: 80px; left: 0; width: 100%;
        height: 0; /* Altura 0 para ocultar */
        overflow: hidden; /* Cortar contenido */
        background: rgba(5, 5, 5, 0.98);
        flex-direction: column; /* Lista vertical */
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        transition: height 0.4s ease; /* Animación de apertura */
        border-bottom: 1px solid var(--lab-purple);
    }

    /* EL MENÚ MÓVIL (Estado ABIERTO - JS agrega esta clase) */
    .lab-nav.active {
        height: 100vh; /* Se abre toda la pantalla */
        padding-top: 50px;
    }

    /* Estilo de enlaces grandes en móvil */
    .lab-link {
        font-size: 1.5rem; margin: 15px 0; display: block;
        opacity: 0; transform: translateY(20px); transition: 0.5s;
    }
    
    /* Animación de entrada de textos */
    .lab-nav.active .lab-link { opacity: 1; transform: translateY(0); }
}