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

/* ===== Hero de producto (tintado por color de línea) ===== */
.product-hero--green { background: linear-gradient(180deg, oklch(96% 0.02 142), oklch(98% 0.006 140)); }
.product-hero--orange { background: linear-gradient(180deg, oklch(96% 0.02 55), oklch(98% 0.006 140)); }

.product-hero-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 40px 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 44px;
  align-items: center;
}
.product-hero-tag { font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: oklch(45% 0.14 55); }
.product-hero-title { font: 400 44px var(--font-display); margin: 12px 0 18px; color: oklch(14% 0 0); }
.product-hero-desc { font: 17px/1.65 var(--font-body); color: oklch(32% 0.01 140); margin: 0; }

.product-swatch { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-hero); }
.product-swatch--green {
  background-image:
    repeating-linear-gradient(45deg, oklch(96% 0.02 142 / .5) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, oklch(88% 0.05 142), oklch(78% 0.08 142));
}
.product-swatch--orange {
  background-image:
    repeating-linear-gradient(45deg, oklch(96% 0.02 55 / .5) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, oklch(88% 0.05 55), oklch(78% 0.08 55));
}

/* ===== Grid de información ===== */
.product-info-grid {
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
}
@media (max-width: 759px) {
  .product-info-grid { padding: 40px 24px; }
}
.product-info-grid h2 { font: 400 22px var(--font-display); margin: 0 0 14px; color: oklch(14% 0 0); }
.product-info-grid p { font: 15px/1.7 var(--font-body); color: oklch(35% 0.01 140); margin: 0 0 26px; }
.product-info-grid p:last-child { margin-bottom: 0; }

.benefits-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.benefit-item { display: flex; gap: 10px; align-items: flex-start; }
.benefit-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-green-mid); margin-top: 8px; flex: none; }
.benefit-item p { margin: 0; font: 15px/1.6 var(--font-body); color: oklch(35% 0.01 140); }

.ingredient-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ingredient-pill { background: oklch(95% 0.03 142); color: oklch(32% 0.12 142); font: 600 13px var(--font-body); padding: 7px 12px; border-radius: var(--radius-pill); }

.glossary-note { font: 13px/1.5 var(--font-body); color: oklch(50% 0.01 140); margin: 10px 0 0; font-style: italic; }

/* ===== Sabores disponibles ===== */
.flavors-section { max-width: 1000px; margin: 0 auto; padding: 0 40px 56px; }
.flavors-section h2 { font: 400 22px var(--font-display); margin: 0 0 14px; color: oklch(14% 0 0); }
.flavor-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.flavor-pill { background: #fff; border: 1px solid oklch(90% 0.02 55); color: oklch(30% 0.01 140); font: 600 14px var(--font-body); padding: 9px 16px; border-radius: var(--radius-panel); }

/* ===== Placeholder de ficha nutricional ===== */
.nutrition-placeholder-wrap { max-width: 1000px; margin: 0 auto 72px; padding: 0 40px; }
.nutrition-placeholder { border: 1.5px dashed oklch(80% 0.02 140); border-radius: var(--radius-card); padding: 28px 30px; }
.nutrition-placeholder h2 { font: 700 13px var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: oklch(50% 0.01 140); margin: 0 0 6px; }
.nutrition-placeholder p { font: 14px/1.6 monospace; color: oklch(50% 0.01 140); margin: 0; }