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

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#080812;
color:white;
overflow-x:hidden;
}

header{
position:sticky;
top:0;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
background:rgba(8,8,18,.95);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,204,0,.15);
box-shadow:0 0 20px rgba(153,0,204,.4);
z-index:1000;
}

header h1{
color:#9900CC;
}

nav{
display:flex;
gap:20px;
}

nav a{
color:white;
text-decoration:none;
font-weight:600;
transition:.3s;
}

nav a:hover{
color:#FFCC00;
}

.hero{
min-height:120vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
padding-top:120px;
background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url("hero.jpg");
background-size:cover;
background-position:center;
}

.hero h2{
font-size:4rem;
color:#9900CC;
text-shadow:0 0 20px #9900CC;
}

.hero h3{
margin:20px 0;
}

.monto{
color:#FFCC00;
font-size:1.3rem;
font-weight:700;
}

.btn-principal{
display:inline-block;
margin-top:30px;
padding:15px 25px;
font-size:1.2rem;
font-weight:800;
background:#9900CC;
color:white;
text-decoration:none;
border-radius:20px;
box-shadow:0 0 30px #9900CC;
animation:brillo 1.5s infinite;
margin-bottom:20px;
transition:.3s;
}

.btn-principal:hover{
transform:translateY(-3px);
box-shadow:0 0 40px #9900CC;
}

@keyframes brillo{
0%{box-shadow:0 0 10px #9900CC;}
50%{box-shadow:0 0 35px #9900CC;}
100%{box-shadow:0 0 10px #9900CC;}
}

.beneficios,
.premios,
.registro{
padding:100px 8%;
text-align:center;
}

.beneficios h2,
.premios h2,
.registro h2{
margin-bottom:50px;
color:#9900CC;
}

.grid,
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.box,
.card{
background:#181818;
padding:25px;
border-radius:20px;
border:2px solid #9900CC;
box-shadow:0 0 20px rgba(153,0,204,.5);
transition:.4s;
}

.card:hover,
.box:hover{
transform:translateY(-5px);
box-shadow:0 0 30px rgba(153,0,204,.8);
}

.card img{
width:100%;
height:250px;
object-fit:cover;
border-radius:15px;
margin-bottom:15px;
}

.card{
overflow:hidden;
}

.card img{
transition:0.5s;
}

.card:hover img{
transform:scale(1.08);
}

.card h3{
color:#FFCC00;
margin-bottom:10px;
}

footer{
padding:60px 20px;
text-align:center;
background:#120018;
border-top:1px solid rgba(255,204,0,.15);
}

footer h2{
color:#FFCC00;
margin-bottom:20px;
}

.whatsapp{
position:fixed;
bottom:20px;
right:20px;
width:65px;
height:65px;
border-radius:50%;
background:#25D366;
display:flex;
justify-content:center;
align-items:center;
font-size:30px;
text-decoration:none;
color:white;
box-shadow:0 0 25px rgba(37,211,102,.5);
transition:.3s;
z-index:9999;
}

.whatsapp:hover{
transform:scale(1.1);
  }

.menu-toggle{
display:none;
font-size:2rem;
cursor:pointer;
}

@media(max-width:768px){

header{
padding:15px 5%;
}

header h1{
font-size:1.2rem;
}

.menu-toggle{
display:block;
}

nav{
display:none;
position:absolute;
top:80px;
left:0;
width:100%;
background:#120018;
flex-direction:column;
padding:20px;
text-align:center;
}

nav.active{
display:flex;
}

.hero h2{
font-size:2.4rem;
}

}

.subinfo{
margin-top:15px;
font-size:1rem;
color:#d9b3ff;
font-weight:600;
}
  
.hero p{
max-width:700px;
margin:auto;
line-height:1.6;
}

.testimonios{
padding:100px 8%;
text-align:center;
}

.testimonios h2{
margin-bottom:50px;
color:#9900CC;
}
.stats{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
padding:70px 8%;
}

.stat{
background:#181818;
padding:25px;
min-width:220px;
border-radius:20px;
border:2px solid #9900CC;
box-shadow:0 0 20px rgba(153,0,204,.3);
transition:.3s;
}

.stat:hover{
transform:translateY(-5px);
}

.stat h3{
color:#FFCC00;
font-size:2rem;
margin-bottom:10px;
}

.hero-content{
max-width:900px;
margin:auto;
}

.beneficios{
  padding:80px 8%;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

.beneficio{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:30px;
  text-align:center;
  transition:.3s;
}

.beneficio:hover{
  transform:translateY(-8px);
}

.beneficio h3{
  margin-bottom:15px;
  color:#8b5cf6;
}

.beneficio p{
  color:#ccc;
}