@import url("/css/components.css");

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 100px 40px;
}
@media (max-width: 759px) {
  .hero { padding: 64px 24px; }
}

.hero-bg {
  position: absolute;
  inset: -60px 0 -60px 0;
  background: url("/assets/home/hero-bg.png") center / cover no-repeat;
  will-change: transform, opacity;
}
.hero-scrim {
  position: absolute;
  inset: -60px 0 -60px 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3025) 45%, rgba(0,0,0,0) 80%);
  will-change: transform;
}
.hero-content {
  position: relative;
  max-width: 760px;
  width: 100%;
  will-change: transform, opacity;
}
.hero-badge {
  display: inline-block;
  padding: 6px 16px;
  background: oklch(90% 0.06 142 / .9);
  color: var(--color-green-dark);
  border-radius: var(--radius-pill);
  font: 700 12px var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-title {
  font: 400 clamp(30px, 7vw, 56px)/1.08 var(--font-display);
  letter-spacing: .01em;
  margin: 0 0 20px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero-title .accent { color: var(--color-green-bright); }
.hero-body {
  font: 16px/1.6 var(--font-body);
  max-width: 396px;
  width: 100%;
  color: #D2C5BE;
  margin: 0;
}

/* ===== Grid de productos ===== */
.products-section { max-width: 1120px; margin: 0 auto; padding: 64px 40px; }
.products-heading { font: 400 34px var(--font-display); text-align: center; margin: 0 0 8px; color: oklch(14% 0 0); }
.products-subheading { text-align: center; color: oklch(45% 0.01 140); font: 15px var(--font-body); margin: 0 0 40px; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.product-card {
  background: #fff;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.product-card-img-wrap { height: 180px; overflow: hidden; position: relative; flex: none; }
.product-card-img-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; }
.product-card-img-wrap.hoverzoom img { cursor: pointer; transition: transform .35s ease; }

.product-card-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-card-tag { font: 700 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-orange); }
.product-card-name { font: 400 24px var(--font-display); margin: 0; color: oklch(14% 0 0); }
.product-card-desc { font: 14px/1.55 var(--font-body); color: oklch(42% 0.01 140); margin: 0; flex: 1; }
.product-card-link { font: 700 13px var(--font-body); color: var(--color-green); margin-top: 6px; }