/* ================================================================
   COMPONENTS/CARDS.CSS — Product cards, testimonial cards
================================================================ */

/* ── Product card ──────────────────────────────────────────── */
.prod-card {
  background: var(--crw);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column;
}
.prod-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.prod-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.prod-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.prod-card:hover .prod-img img { transform: scale(1.08); }

.prod-tag {
  position: absolute; top: .8rem; left: .8rem;
  padding: .25rem .7rem;
  border-radius: var(--radius-full);
  font-size: .65rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.prod-tag.popular  { background: var(--gold);  color: var(--g0); }
.prod-tag.nuevo    { background: var(--gm);    color: #fff; }
.prod-tag.favorito { background: var(--g0);    color: var(--gold); }

.prod-body {
  padding: 1.25rem var(--sp-md);
  flex: 1;
  display: flex; flex-direction: column;
}
.prod-name {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
  color: var(--g0);
  margin-bottom: .4rem;
}
.prod-desc {
  font-size: .87rem;
  color: #5a6b5e;
  line-height: 1.55;
  flex: 1;
  margin-bottom: var(--sp-md);
}
.prod-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid #eef2ee;
  padding-top: .9rem;
}
.prod-price {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--gm);
}
.prod-unit { font-size: .72rem; color: #8a9e8d; margin-left: .2rem; font-weight: var(--fw-regular); }
.prod-btn {
  display: flex; align-items: center; gap: .35rem;
  padding: .55rem 1rem;
  background: var(--wa); color: #fff;
  border-radius: var(--radius-full);
  font-size: .78rem; font-weight: var(--fw-bold);
  transition: background var(--dur-base), transform var(--dur-fast);
}
.prod-btn:hover { background: var(--wad); transform: scale(1.04); }

/* ── Testimonial card ─────────────────────────────────────── */
.tcard {
  background: var(--crw);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.tcard-stars { color: var(--gold); font-size: 1rem; margin-bottom: .75rem; }

.tcard-text {
  font-size: .95rem;
  color: #3d4f41;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: var(--sp-md);
  position: relative;
}
.tcard-text::before {
  content: '\201C';
  font-family: var(--ff-display);
  font-size: 4rem;
  color: var(--gll);
  position: absolute;
  top: -1.2rem; left: -.5rem;
  line-height: 1;
}

.tcard-author { display: flex; align-items: center; gap: .9rem; }
.tcard-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gll);
}
.tcard-name { font-weight: var(--fw-semi); color: var(--g0); font-size: .9rem; }
.tcard-loc  { font-size: .78rem; color: #7a9180; }
.tcard-prod { font-size: .73rem; color: var(--gm); font-weight: var(--fw-medium); }

.tcard-badge {
  float: right;
  background: var(--gll);
  color: var(--gm);
  font-size: .65rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: var(--radius-full);
}