body{
font-family:Arial;
margin:0;
background:#0f172a;
color:white;
}

header{
background:#020617;
padding:20px;
display:flex;
justify-content:space-between;
}

nav a{
color:white;
margin:10px;
text-decoration:none;
}

.hero{
text-align:center;
padding:60px;
background:#1e293b;
}

.buscador{
text-align:center;
padding:20px;
}

input{
padding:10px;
width:300px;
}

.catalogo{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
padding:40px;
}

.producto{
background:#1e293b;
padding:20px;
border-radius:10px;
text-align:center;
}

.producto img{
width:100%;
height:150px;
object-fit:cover;
}

button{
background:#22c55e;
border:none;
padding:10px;
cursor:pointer;
}

#acordeon{
width:80%;
margin:auto;
}

.acordeon{
background:#111827;
color:white;
padding:15px;
width:80%;
border:none;
margin-top:10px;
cursor:pointer;
}

.panel{
display:none;
background:#1e293b;
padding:10px;
width:80%;
margin:auto;
}

#pedido{
text-align:center;
padding:40px;
}

form{
display:flex;
flex-direction:column;
width:300px;
margin:auto;
}

form input,form textarea{
margin:10px;
padding:10px;
}

footer{
text-align:center;
padding:20px;
background:#020617;
}
let carrito = [];
let total = 0;

function agregarCarrito(nombre, precio){

carrito.push({nombre, precio});

total += precio;

mostrarCarrito();

}

function mostrarCarrito(){

let lista = document.getElementById("lista-carrito");

lista.innerHTML = "";

carrito.forEach((producto, index)=>{

let li = document.createElement("li");

li.innerHTML =
producto.nombre +
" - $" +
producto.precio +
" <button onclick='eliminarProducto(" +
index +
")'>❌</button>";

lista.appendChild(li);

});

document.getElementById("total").textContent = total;

}

function eliminarProducto(index){

total -= carrito[index].precio;

carrito.splice(index,1);

mostrarCarrito();

}

function finalizarCompra(){

if(carrito.length === 0){

alert("El carrito está vacío");

return;

}

document.getElementById("mensaje").innerHTML =
"✅ Compra realizada con éxito";

carrito = [];
total = 0;

mostrarCarrito();

}

function buscarProducto(){

let input =
document.getElementById("buscar").value.toLowerCase();

let productos =
document.querySelectorAll(".producto");

productos.forEach(producto=>{

let nombre =
producto.innerText.toLowerCase();

if(nombre.includes(input)){

producto.style.display = "block";

}else{

producto.style.display = "none";

}

});

}

let acordeones =
document.getElementsByClassName("acordeon");

for(let i=0;i<acordeones.length;i++){

acordeones[i].addEventListener("click",function(){

let panel = this.nextElementSibling;

if(panel.style.display === "block"){

panel.style.display = "none";

}else{

panel.style.display = "block";

}

});

}