/* ============================================================
   La oferta: grid de productos y cards
   ============================================================ */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.card{
  background:var(--card-bg);
  border-radius:var(--bo-radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--bo-shadow);
}
.card .ph img{
  width:100%;
  aspect-ratio:4/3;
  height:auto;
  object-fit:cover;
}
.card .body{
  padding:24px 24px 26px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.card h3{
  font-weight:500;
  font-size:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.card .desc{
  margin:0;
  font-size:14.5px;
  color:var(--text-soft);
  text-wrap:pretty;
  flex:1;
}
.card .foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
}
.card .price{
  font-family:var(--bo-display);
  font-weight:500;
  font-size:19px;
  letter-spacing:.01em;
  color:var(--accent);
}
.card .price small{
  font-family:var(--bo-body);
  font-size:12px;
  color:var(--muted);
}

@media (max-width:840px){
  .grid{
    grid-template-columns:1fr;
    max-width:440px;
    margin-inline:auto;
  }
}