/* =========================
   RESET BASICO
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family: Arial, Helvetica, sans-serif;
}


/* =========================
   NAVBAR PRINCIPAL
========================= */

.navbar{

position:fixed;

top:20px;
left:50%;

transform:translateX(-50%);

z-index:1000;

width:1480px;
height:70px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 30px;

border-radius:16px;

/* Glassmorphism */

background:linear-gradient(
135deg,
rgba(166,107,211,0.25) 10%,
rgba(82,103,217,0.25) 50%,
rgba(58,32,151,0.25) 100%
);

backdrop-filter:blur(14px);

box-shadow:0 10px 30px rgba(0,0,0,0.35);

transition:all .4s ease;

}


/* =========================
   LOGO
========================= */

.logo img{

height:50px;

}


/* =========================
   MENU HORIZONTAL
========================= */

.custom-nav-menu{

list-style:none;

display:flex;

flex-direction:row;

align-items:center;

gap:18px;

margin:0;
padding:0;

}

.custom-nav-menu li{

display:flex;

}


/* =========================
   LINKS
========================= */

.custom-nav-link{

display:flex;

align-items:center;

justify-content:center;

gap:8px;

padding:10px 20px;

border-radius:30px;

text-decoration:none;

color:white;

font-size:15px;

background:rgba(255,255,255,0.08);

backdrop-filter:blur(6px);

transition:all .3s ease;

}


/* HOVER */

.custom-nav-link:hover{

background:rgba(255,255,255,0.18);

}


/* ACTIVO */

.custom-active{

background:rgba(0,0,0,0.35);

}


/* =========================
   ICONOS
========================= */

.nav-icon{

display:none;

width:18px;
height:18px;

fill:#cfcfcf;

}

.nav-icon svg{

width:100%;
height:100%;

}

.nav-text{

display:inline;

}


/* =========================
   MODO COMPACTO (SCROLL)
========================= */

.navbar.compact{

width:420px;

height:55px;

padding:0 10px;

}


/* ocultar logo */

.navbar.compact .logo{

display:none;

}


/* ocultar texto */

.navbar.compact .nav-text{

display:none;

}


/* mostrar iconos */

.navbar.compact .nav-icon{

display:block;

}


/* botones circulares */

.navbar.compact .custom-nav-link{

width:40px;
height:40px;

padding:0;

border-radius:50%;

justify-content:center;

}



/* =========================
   INDICADOR ANIMADO
========================= */

.nav-indicator{

position:absolute;

height:4px;

bottom:-6px;

border-radius:20px;

background:linear-gradient(
90deg,
#a66bd3,
#5267D9,
#3a2097
);

transition:all .35s cubic-bezier(.4,0,.2,1);

}


/* contenedor relativo */

.custom-nav-menu{

position:relative;

}


/* =========================
   MICRO ANIMACIONES ICONOS
========================= */

.custom-nav-link svg{

transition:transform .25s ease;

}

.custom-nav-link:hover svg{

transform:scale(1.15);

}


/* efecto glow sutil */

.custom-nav-link:hover{

box-shadow:0 0 10px rgba(166,107,211,.35);

}

/* Añadir al final para mejor feedback visual */

.custom-nav-link {
    position: relative;
    overflow: hidden;
}

.custom-nav-link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.custom-nav-link:active::after {
    width: 100px;
    height: 100px;
}

/* Mejora para el indicador */
.nav-indicator {
    box-shadow: 0 0 15px rgba(166, 107, 211, 0.8);
}