:root {
  --primary: #5a4fcf;
  --light: #c6bad2;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Poppins',sans-serif;background:#f8f9fa;}
.logo{height:50px;}
.hero-section{
  position:relative;height:100vh;
  background:url('imagenes/dibujo.png') center/cover fixed;
}
.overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(0,0,0,0.3),rgba(0,0,0,0.5));
}
.hero-content{
  position:relative;z-index:2;color:#fff;
  animation:fadeIn 1.2s ease-out;
}
.hero-content h1{font-size:3rem;margin-bottom:1rem;text-shadow:2px 2px 8px rgba(0,0,0,0.7);}
.hero-content p{font-size:1.25rem;margin-bottom:2rem;}
.btn-hero{padding:0.75rem 2rem;border-radius:50px;}
.btn-hero:hover{background:var(--primary);transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,0.3);}
@keyframes fadeIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

/* Cards styling */
#games .card{
  border:none;
  transition:transform 0.3s,box-shadow 0.3s;
}
#games .card:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
}
#games .card-title{margin:0.5rem 0;}

.nav-link {
  position: relative;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient-main);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 100%;
}