body { margin:0; font-family:Arial,sans-serif; background:#e6f2e6; }
header { background:#2e7d32; color:white; padding:1rem; text-align:center; box-shadow:0 2px 5px rgba(0,0,0,0.2); }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; margin:1rem; padding:1rem; }
.card { background:white; border-radius:10px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:transform 0.3s, box-shadow 0.3s; padding:0.5rem; }
.card:hover { transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.25); }
.card img { width:100%; height:160px; object-fit:cover; border-radius:10px 10px 0 0; }
.card h3 { margin:0.5rem 0; }
.card p { margin:0.2rem 0; font-size:0.9rem; }
.card button { margin-top:0.5rem; background:#e53935; width:100%; border:none; padding:0.5rem; cursor:pointer; border-radius:0 0 10px 10px; }
.card button:hover { background:#b71c1c; }

form { max-width:400px; margin:1rem; background:#f9fff9; padding:1rem; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
form input { margin:0.3rem 0; padding:0.5rem; width:100%; border-radius:5px; border:1px solid #ccc; box-sizing:border-box; }
form input[type="password"] { background-color:#fffbe6; }
form input[type="password"]:focus { border-color:#2e7d32; outline:none; box-shadow:0 0 5px rgba(46,125,50,0.5); }

.presentacion { background:#f0fff0; padding:1rem; border-radius:10px; margin:1rem 0; box-shadow:0 2px 5px rgba(0,0,0,0.1); }
#productos-list .card img { height:150px; object-fit:cover; }