body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  margin: 0;
  padding: 20px;
}

h1 { text-align:center; color:#333; }
.categoria { margin-bottom:40px; }
.productos {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:20px;
}


.producto {
  background:#fff;
  border-radius:10px;
  padding:10px;
  text-align:center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.producto img {
  width:100px;
  height:100px;
  object-fit:cover;
  margin-bottom:10px;
}

.nombre { font-weight:bold; margin:5px 0; }
.precio { color:#444; margin-bottom:10px; }
select { padding:5px; }
#total {
  margin-top:30px;
  text-align:center;
  font-size:1.5em;
  font-weight:bold;
  color:#222;
}

button {
  padding:10px 20px;
  margin:5px;
  border:none;
  border-radius:5px;
  cursor:pointer;
}

#btn-enviar { display:block; margin:20px auto; background:#4CAF50; color:#fff; }
#btn-confirmar { background:#2196F3; color:#fff; }
#btn-cancelar { background:#f44336; color:#fff; }
#btn-whatsapp { background:#25D366; color:#fff; }
#btn-correo { background:#FF9900; color:#fff; }

.top-header { 
  width: 100%; 
  background-image: url(img/snacks.png); 
  background-size: auto 98%; 
  background-position: center; 
} 


.top-header > h1 { 
  color: white; 
  background-color: rgba(0,0,0,0.3); 
  padding: 2em 1em; 
  font-family: sans-serif; 
}


/* Modal */
.modal {
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.5);
  justify-content:center;
  align-items:center;
}

.modal-contenido {
  background:#fff;
  padding:20px;
  border-radius:10px;
  max-width:90%;
  max-height:90%;
  overflow:auto;
}


/* Responsivo */
@media(max-width:600px){
  .productos { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
  .producto img { width:80px; height:80px; }
  #total { font-size:1.2em; }
  button { padding:8px 12px; font-size:0.9em; }
}


.notificacion {
  color: green;
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
  animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}


.banner {
  background: #4CAF50;
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  margin-bottom: 10px;
  animation: fadeInOut 3s ease-in-out;
}