/* COGNILAB - NAVEGACIÓN */

/* Header principal */
.header{position:fixed;top:0;left:0;right:0;z-index:1030;background:linear-gradient(135deg, rgba(7,7,10,.75), rgba(7,7,10,.55));-webkit-backdrop-filter:blur(10px) saturate(110%);backdrop-filter:blur(10px) saturate(110%);border-bottom:1px solid rgba(255,255,255,0);transition:all var(--t2, 0.7s ease-in-out);height:var(--nh);box-shadow:none}
.header.scrolled{background:linear-gradient(135deg, rgba(7,7,10,.75), rgba(7,7,10,.55));border-bottom:1px solid rgba(255,255,255,0);box-shadow:none}

/* Navegación */
.nav{height:var(--nh);display:flex;align-items:center}
.nav-container{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--mw);margin:0 auto;padding:0 var(--pad)}

/* Logo */
.nav-logo img{height:32px;width:auto;max-height:calc(var(--nh) - 24px)}

/* Enlaces de navegación */
.nav-links{display:flex;list-style:none;gap:var(--s8);margin:0;padding:0}
.nav-links a{color:var(--txt2);text-decoration:none;font-weight:500;font-size:1rem;position:relative;padding:var(--s2) var(--s3);border-radius:var(--r2);transition:color var(--t1, 0.5s ease-out), background var(--t1, 0.5s ease-out), transform 0.4s ease;display:inline-flex;align-items:center;overflow:hidden}

/* Efecto hover simple de color para navegación */
.nav-links a::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.05);opacity:0;transition:opacity 0.25s ease;z-index:0}
.nav-links a:hover::before{opacity:1}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.active{color:var(--txt);background:rgba(255,255,255,.08)}

/* Botones de autenticación */
.nav-auth{display:flex;align-items:center;gap:var(--s4)}

/* Menú hamburguesa */
.hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:var(--s2)}
.hamburger-line{width:24px;height:2px;background:var(--txt);transition:all var(--t1, 0.5s ease-out)}
.hamburger:hover .hamburger-line{opacity:.9;transform:translateY(-1px)}
.hamburger.active .hamburger-line:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.hamburger.active .hamburger-line:nth-child(2){opacity:0}
.hamburger.active .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}

/* Menú móvil */
.mobile-menu{position:fixed;top:0;right:-100%;width:300px;height:100vh;background:linear-gradient(135deg, rgba(7,7,10,.72), rgba(7,7,10,.52));-webkit-backdrop-filter:blur(10px) saturate(110%);backdrop-filter:blur(10px) saturate(110%);z-index:1050;transition:right var(--t2, 0.7s ease-in-out);border-left:1px solid rgba(255,255,255,.1);box-shadow:none}
.mobile-menu.active{right:0}

.mobile-header{display:flex;justify-content:space-between;align-items:center;padding:var(--s4) var(--s6);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:none}
.mobile-close{background:none;border:none;color:var(--txt);font-size:1.25rem;cursor:pointer;padding:var(--s2)}
.mobile-close:hover{opacity:.9;transform:translateY(-1px)}

.mobile-nav{padding:var(--s6)}
.mobile-links{list-style:none;margin:0 0 var(--s8);padding:0}
.mobile-links li{margin-bottom:var(--s4)}
.mobile-links a{color:var(--txt2);text-decoration:none;font-size:1.125rem;font-weight:500;display:block;padding:var(--s3);border-radius:var(--r2);transition:color var(--t1, 0.5s ease-out), background var(--t1, 0.5s ease-out), transform 0.4s ease;position:relative;overflow:hidden}

/* Efecto hover simple de color para enlaces móviles */
.mobile-links a::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.05);opacity:0;transition:opacity 0.25s ease;z-index:0}
.mobile-links a:hover::before{opacity:1}
.mobile-links a:hover,.mobile-links a:focus-visible,.mobile-links a.active{color:var(--txt);background:rgba(255,255,255,.08)}

.mobile-auth{display:flex;flex-direction:column;gap:var(--s3)}

/* Overlay del menú móvil */
.mobile-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1049;opacity:0;visibility:hidden;transition:all var(--t2, 0.7s ease-in-out);pointer-events:none}
.mobile-overlay.active{opacity:1;visibility:visible;pointer-events:auto}

/* Responsive */
@media(max-width:768px){
    .nav-links{display:none}
    .hamburger{display:flex}
}

/* Dropdown Portafolio (desktop) */
.menu-desplegable{position:relative}
.menu-desplegable > .enlace-portafolio{display:inline-flex;align-items:center;gap:8px}
.menu-desplegable .flecha{font-size:.9rem;opacity:.7}

.menu-desplegable .submenu{position:absolute;top:100%;left:0;min-width:220px;list-style:none;margin:0;padding:8px;background:linear-gradient(135deg, rgba(7,7,10,.92), rgba(7,7,10,.82));-webkit-backdrop-filter:blur(10px) saturate(110%);backdrop-filter:blur(10px) saturate(110%);border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.45);display:none;z-index:2000}
.menu-desplegable .submenu li{margin:0}
.menu-desplegable .submenu a{display:flex;align-items:center;gap:10px;color:var(--txt2);text-decoration:none;padding:10px 12px;border-radius:10px;transition:color var(--t1, .3s ease), background var(--t1, .3s ease)}
.menu-desplegable .submenu a:hover,.menu-desplegable .submenu a:focus-visible{color:var(--txt);background:rgba(255,255,255,.08)}

.menu-desplegable:focus-within .submenu,
.menu-desplegable:hover .submenu,
.menu-desplegable.open .submenu{display:block}

/* ---------------------------------------
   Botones del header: mejora de hover
   (solo afecta a botones dentro del header)
---------------------------------------- */
.header .nav-auth .btn{
    transition:
        background var(--t1, 0.4s ease),
        border-color var(--t1, 0.4s ease),
        box-shadow var(--t1, 0.4s ease),
        transform var(--t1, 0.3s ease);
    will-change: transform, box-shadow, background, border-color;
}

.header .nav-auth .btn:hover{
    transform: translateY(-1px);
}

.header .nav-auth .btn-primary:hover{
    background: linear-gradient(135deg, rgba(7,7,10,.62), rgba(7,7,10,.46));
    border-color: rgba(255,255,255,.28);
    box-shadow:
        0 8px 24px rgba(0,0,0,.38),
        0 0 0 1px rgba(255,255,255,.06) inset;
}

.header .nav-auth .btn-outline:hover{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.32);
    box-shadow:
        0 6px 18px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Forzar altura fija del contenedor nav para mantener tamaño consistente en todas las páginas */
.nav{height:var(--nh);display:flex;align-items:center}
/* Asegurar que el logo no rompa la altura del header */
.nav-logo img{height:32px;width:auto;max-height:calc(var(--nh) - 24px)}
/* Botones de autenticación en el header: tamaño consistente */
.header .nav-auth .btn{min-height:40px;line-height:40px;padding:0 var(--s4);font-size:0.95rem;border-radius:var(--r2)}
.header .nav-auth .btn.btn-sm{min-height:40px;line-height:40px;padding:0 var(--s4);font-size:0.95rem}
/* En pantallas pequeñas, mantener proporción */
@media(max-width:768px){
    .header{height:var(--nh)}
    .nav{height:var(--nh)}
    .header .nav-auth .btn,.header .nav-auth .btn.btn-sm{min-height:36px;line-height:36px;padding:0 var(--s3);font-size:0.9rem}
}