.navbar{

position:fixed;
top:0;
width:100%;

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

padding:18px 40px;

background:rgba(49,33,95,0.85);

backdrop-filter: blur(10px);

z-index:1000;

}

.logo{

font-family:var(--title-font);
font-weight:700;
font-size:20px;

color:white;

}

.nav-links{

display:flex;
gap:30px;

}

.nav-links a{

color:white;

font-weight:500;

transition:0.3s;

}

.nav-links a:hover{

color:#998ac5;

}





#scrollTop{

position:fixed;

bottom:30px;
right:30px;

width:55px;
height:55px;

border-radius:50%;

background:linear-gradient(135deg,#31215f,#6b53b1);

color:white;

border:none;

font-size:22px;

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

cursor:pointer;

box-shadow:0 8px 20px rgba(0,0,0,0.15);

transition:all 0.3s ease;

z-index:1000;

opacity:0;
visibility:hidden;

}

/* cuando aparece */

#scrollTop.show{

opacity:1;
visibility:visible;

}

/* hover */

#scrollTop:hover{

transform:translateY(-4px);

box-shadow:0 12px 25px rgba(0,0,0,0.2);

}





.skills-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;

}

.skill-card{

background:#f5f3ff;

padding:20px;

border-radius:12px;

text-align:center;

font-weight:500;

transition:0.3s;

}

.skill-card:hover{

transform:translateY(-5px);
background:var(--accent-color);
color:white;

}





.hero-buttons{

display:flex;
gap:20px;

}

.btn-primary{

background:var(--primary-color);
color:white;

padding:14px 32px;

border-radius:30px;

font-weight:500;

transition:0.3s;

}

.btn-primary:hover{

background:var(--secondary-color);

}

.btn-secondary{

border:2px solid var(--primary-color);
color:var(--primary-color);

padding:14px 32px;

border-radius:30px;

font-weight:500;

transition:0.3s;

}

.btn-secondary:hover{

background:var(--primary-color);
color:white;

}