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

:root{
--morado:#7b2cbf;
--morado2:#9d4edd;
--amarillo:#ffb703;
--amarillo2:#ffcc33;
--rojo:#ff4d4d;
--blanco:#ffffff;
--gris:#f8f9fa;
--gris2:#ececec;
--texto:#222;
--sombra:0 10px 22px rgba(0,0,0,.08);
--radio:18px;
}

html{
scroll-behavior:smooth;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:linear-gradient(to bottom,#f8f5ff,#ffffff);
color:var(--texto);
line-height:1.4;
}

/* GENERALES */

img{
max-width:100%;
display:block;
}

button{
font-family:inherit;
}

a{
transition:.3s;
text-decoration:none;
}

/* HEADER */

header{
background:linear-gradient(135deg,var(--morado),var(--morado2));
color:white;
text-align:center;
padding:28px 20px;
}

header img{
width:90px;
margin:0 auto 10px;
}

header h1{
font-size:2.2rem;
margin-bottom:8px;
}

header p{
font-size:1rem;
opacity:.95;
}

/* BOTON MENU */

.menu-btn{
display:none;
background:var(--morado);
color:white;
border:none;
font-size:30px;
padding:14px;
width:100%;
cursor:pointer;
font-weight:bold;
}

/* NAV */

nav{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:12px;
padding:15px;
background:var(--morado2);
position:sticky;
top:0;
z-index:999;
}

nav a{
color:white;
font-weight:bold;
padding:10px 18px;
border-radius:10px;
}

nav a:hover{
background:rgba(255,255,255,.18);
}

/* HERO */

.hero{
text-align:center;
padding:55px 20px;
max-width:900px;
margin:auto;
}

.hero h2{
font-size:2.4rem;
color:var(--morado);
margin-bottom:12px;
}

.hero p{
font-size:1.08rem;
margin-bottom:20px;
}

/* BOTONES */

.btn,
.card button,
.resumen button{
display:inline-block;
background:var(--amarillo);
color:#222;
padding:12px 22px;
font-weight:bold;
border:none;
border-radius:12px;
cursor:pointer;
transition:.3s;
}

.btn:hover,
.card button:hover,
.resumen button:hover{
transform:translateY(-2px);
background:var(--amarillo2);
}

.btn-vaciar{
background:var(--gris2) !important;
color:#222;
margin-top:12px;
}

/* PRODUCTOS */

#productos{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px;
padding:20px;
max-width:1300px;
margin:auto;
}

.card{
background:white;
border-radius:var(--radio);
overflow:hidden;
box-shadow:var(--sombra);
transition:.3s;
}

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

.card img{
width:100%;
height:250px;
object-fit:contain;
padding:12px;
background:white;
}

.card h3{
font-size:1.1rem;
padding:10px 14px 4px;
color:var(--morado);
}

.card p{
padding:0 14px;
font-size:1.08rem;
font-weight:bold;
}

.card button{
width:calc(100% - 28px);
margin:14px;
}

/* CARRITO */

#carrito{
max-width:1200px;
margin:auto;
padding:20px;
}

.carrito-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
gap:22px;
}

.carrito-card{
display:flex;
gap:16px;
background:white;
padding:18px;
border-radius:var(--radio);
box-shadow:var(--sombra);
align-items:center;
}

.carrito-card img{
width:100px;
height:100px;
object-fit:contain;
background:#f7f7f7;
padding:8px;
border-radius:12px;
}

.carrito-info{
flex:1;
}

.carrito-info h3{
color:var(--morado);
margin-bottom:8px;
}

.acciones{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:10px;
}

.acciones button{
padding:9px 12px;
border:none;
border-radius:10px;
cursor:pointer;
background:var(--gris2);
font-weight:bold;
}

.eliminar{
background:var(--rojo) !important;
color:white;
}

.resumen{
margin-top:25px;
background:white;
padding:25px;
border-radius:var(--radio);
text-align:center;
box-shadow:var(--sombra);
}

.resumen h2{
color:var(--morado);
margin-bottom:14px;
}

/* FOOTER */

footer{
background:var(--morado);
color:white;
text-align:center;
padding:18px;
margin-top:40px;
}

/* TABLET */

@media(max-width:900px){

header h1{
font-size:1.9rem;
}

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

.carrito-grid{
grid-template-columns:1fr;
}

}

/* MOVIL */

@media(max-width:768px){

.menu-btn{
display:block;
position:sticky;
top:0;
z-index:1001;
}

nav{
display:none;
flex-direction:column;
width:100%;
padding:0;
gap:0;
position:relative;
top:0;
}

nav.activo{
display:flex;
}

nav a{
width:100%;
text-align:center;
padding:18px;
border-bottom:1px solid rgba(255,255,255,.12);
border-radius:0;
}

#productos{
grid-template-columns:1fr 1fr;
gap:16px;
padding:16px;
}

.card img{
height:180px;
}

.carrito-card{
flex-direction:column;
text-align:center;
}

.acciones{
justify-content:center;
}

}

/* CELULAR */

@media(max-width:520px){

header{
padding:22px 15px;
}

header h1{
font-size:1.6rem;
}

.hero{
padding:35px 15px;
}

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

#productos{
grid-template-columns:1fr;
}

}