*{
box-sizing:border-box;
}


body{

margin:0;
font-family:Arial;
background:linear-gradient(135deg,#050505,#1e1b4b);
color:white;

}



.container{

max-width:1200px;
margin:auto;
padding:30px;

}



nav{

display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:#111827;
border-radius:20px;

}



nav h2{

color:#a855f7;

}


nav a{

color:white;
text-decoration:none;
margin:15px;

}



.hero{

text-align:center;
padding:70px 20px;

}



.hero h1{

font-size:50px;
color:#c084fc;

}



.hero p{

font-size:20px;

}



button{

background:#7c3aed;
color:white;
border:none;
padding:15px 30px;
border-radius:20px;

}



.servicios{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;

}



figure{

margin:0;
background:#111827;
border-radius:20px;
overflow:hidden;
transition:.4s;

}



figure:hover{

transform:scale(1.05);

}



img{

width:100%;
height:250px;
object-fit:cover;

}



figcaption{

padding:20px;

}




.stats{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin:50px 0;

}



.stats div{

background:#111827;
padding:30px;
text-align:center;
border-radius:20px;

}



table{

width:100%;
background:#111827;
border-collapse:collapse;
margin-top:30px;

}



th{

background:#7c3aed;
padding:15px;

}


td{

padding:15px;
text-align:center;

}



tr:nth-child(even){

background:#222;

}




form{

background:#111827;
padding:30px;
border-radius:20px;

}



input,select{

width:100%;
padding:12px;
margin:10px 0;

}



@media(max-width:800px){

.servicios,
.stats{

grid-template-columns:1fr;

}

}