html,body {
    margin:0;
    padding:0;
    font-family:Arial,Helvetica,sans-serif;
    color:#333;
    background:#fafafa;
}
header,footer {
    background:rgba(0,0,0,.6);
    padding:1rem;
#    text-align:center;
}
nav {
    background:#4caf50;
    display:flex;
#    justify-content:center;
    gap:1rem;
    padding:.5rem 0;
}
nav a {
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}
.product-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:1rem;
    padding:1rem;
}
.product {
    background:#fff;
    border:1px solid #ddd;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.product img {
    width:100%;
    height:auto;
    display:block;
}
.product h3 {margin:.5rem 0 .25rem;padding:0 .5rem;}
.product p  {margin:0;padding:.5rem;font-size:.9rem;}
#contacto {
    padding:1rem;
    background:#e8f5e9;
#    text-align:center;
}
@media (max-width:600px){
    .hero {min-height:200px;}
}