/* 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;
}

/* 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;
}

/* PRODUCTOS */

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

/* GRID */

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

/* TARJETAS */

.productos li a{
display:block;
padding:20px;
text-align:center;
text-decoration:none;
color:#e6ccff;
font-size:1.2rem;
font-weight:bold;
border-radius:15px;
background:rgba(178,102,255,0.15);
transition:all 0.3s ease;
}

/* HOVER */

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

/* BOTÓN 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;
}

/* RESPONSIVE */

@media(max-width:700px){

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

.productos{
padding:25px;
}

.productos li a{
font-size:1rem;
padding:15px;
}

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

}