/* RESET */

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

/* BODY */

body{
font-family:'Cinzel', serif;
background: radial-gradient(circle at center, #2a003f 0%, #14001f 60%, #000000 100%);
color:#e6ccff;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
padding:40px 20px;

font-family:'Cinzel', serif;
background: radial-gradient(circle at center, #2a003f 0%, #14001f 60%, #000000 100%);
color:#e6ccff;
min-height:100vh;
display:flex;
flex-direction:column;

}

main{
flex:1;
}
/* HEADER */

.header{
text-align:center;
margin-bottom:40px;
}

.header h1{
font-size:3rem;
color:#d8a6ff;
text-shadow:0 0 15px #b266ff;
}

.subtitulo{
margin-top:10px;
color:#cfa6ff;
font-size:1.1rem;
}

/* SERVICIOS */

.servicios{
width:100%;
max-width:900px;
background:rgba(84,12,152,0.6);
padding:40px;
border-radius:20px;
box-shadow:0 0 30px #6a0dad;
backdrop-filter:blur(6px);
}

/* GRID */

.servicios ul{
list-style:none;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

/* TARJETAS */

.servicios li a{
display:block;
text-decoration:none;
padding:25px;
border-radius:15px;
background:rgba(178,102,255,0.15);
color:#e6ccff;
transition:0.3s;
height:100%;
}

/* TITULO SERVICIO */

.servicios h2{
color:#d8a6ff;
margin-bottom:10px;
}

/* TEXTO */

.servicios p{
font-size:0.95rem;
line-height:1.5;
}

/* HOVER */

.servicios li a:hover{
transform:translateY(-6px);
background:rgba(178,102,255,0.35);
box-shadow:0 0 20px #b266ff;
}

/* BOTON VOLVER */

.volver{
position:fixed;
bottom:30px;
right:30px;
background:#8648c1;
color:white;
padding:12px 25px;
border-radius:30px;
text-decoration:none;
font-weight:bold;
transition:0.3s ease;
box-shadow:0 0 15px #6a0dad;
}

.volver:hover{
transform:scale(1.1);
box-shadow:0 0 25px #b266ff;
}

/* FOOTER */

footer{
margin-top:50px;
color:#d8a6ff;
font-size:0.9rem;
text-align:center;
text-align:center;
padding:20px;
color:#d8a6ff;
margin-top:auto;
}

/* RESPONSIVE */

@media(max-width:700px){

.header h1{
font-size:2.2rem;
}

.servicios{
padding:25px;
}

.servicios h2{
font-size:1.3rem;
}

.servicios p{
font-size:0.9rem;
}

.volver{
bottom:15px;
right:15px;
padding:10px 18px;
font-size:0.9rem;
}

}