body { font-family: "Poppins", system-ui, -apple-system, Arial, sans-serif; margin: 0; color: #222; }
h1, h2 { margin: 0 0 8px 0; }
img { max-width: 100%; height: auto; display: block; }


#pagina { display: grid; gap: 16px; }
#carrito { margin: 0 16px 24px; }


.encabezado { background: #f6f3ee; padding: 12px 16px; display: grid; grid-template-columns: 64px auto 1fr; gap: 12px; align-items: center; }
.logo { border-radius: 50%; }
.titulo { font-size: 28px; font-weight: 600; color: #9a5534; }

.menuprincipal ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; }
.menuprincipal a { text-decoration: none; color: #333; padding: 6px 10px; border-radius: 8px; background: #efece7; }


.portada { height: 260px; background-image: url("../imagenes/fotodefondo.jpg"); background-size: cover; background-position: center; border-block: 1px solid #e8e4dd; }


.categorias ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.categorias a { text-decoration: none; color: #333; padding: 6px 10px; border-radius: 8px; background: #efece7; }


.menuprincipal a:hover,
.categorias a:hover,
.agregar:hover,
#vaciar:hover,
#confirmar:hover { filter: brightness(0.95); }

input:focus, select:focus { outline: 2px solid #9a5534; }


.contenido { padding: 0 16px; display: grid; gap: 16px; }
.seccion { background: #fff; border: 1px solid #e6e2db; border-radius: 10px; padding: 12px; }


.producto { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; border: 1px solid #eee; border-radius: 10px; padding: 10px; }
.precio { color: #9a5534; font-weight: 600; }
.agregar, #vaciar, #confirmar { padding: 6px 10px; border-radius: 10px; border: 1px solid #d9d4cc; background: #efece7; cursor: pointer; }


#form-pedido { display: grid; gap: 8px; margin-top: 12px; }
#form-pedido h3 { margin: 4px 0 8px; }


@media (min-width: 980px) {
  #pagina { grid-template-columns: 1fr 340px; }
  .portada { grid-column: 1 / -1; }   
  .contenido { grid-column: 1 / 2; }
  #carrito { grid-column: 2 / 3; position: sticky; top: 12px; height: fit-content; }
}


label { display: block; margin: 8px 0 4px; }
output { display: block; margin-top: 8px; }