/* =========================================================================
   FICHAS DE PRODUCTO — rediseño v4. Lienzo oscuro, Bricolage Grotesque +
   Public Sans, misma gramática que Home (cards de vidrio, glow verde).
   ========================================================================= */

/* ===== Hero de producto ===== */
.product-hero--green {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.product-hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 44px;
  align-items: center;
}
.product-hero-tag {
  display: inline-block;
  font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-green-dark);
  background: var(--color-badge-bg-green);
  border: 1px solid oklch(70% 0.15 142 / .35);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
}
.product-hero-title { font: 800 clamp(32px, 4.6vw, 48px)/1.08 var(--font-display); margin: 18px 0 18px; color: var(--color-text); letter-spacing: -.01em; }
.product-hero-desc { font: 17px/1.65 var(--font-body); color: var(--color-text-muted); margin: 0 0 24px; max-width: 46ch; }

.product-swatch {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-hero);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Foto de producto como <img> real (indexable por Google Imágenes y con alt),
   no como background-image. object-fit reproduce el antiguo
   background-size: cover/contain + background-position: center. */
.product-swatch picture, .product-swatch img { display: block; width: 100%; height: 100%; }
.product-swatch img { object-fit: cover; object-position: center; }
.product-swatch::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
}
.product-swatch--creatina {
  aspect-ratio: 1400 / 788;
  background-color: var(--color-bg-elevated-2);
}
.product-swatch--creatina img { object-fit: contain; }

.product-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-green-mid);
  color: #fff;
  font: 700 13px var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.product-hero-cta:hover { transform: translateY(-2px); background: var(--color-green-hover); color: #fff; box-shadow: var(--glow-green); }

/* ===== Grid de información ===== */
.product-info-grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 72px) 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}
@media (max-width: 759px) {
  .product-info-grid { padding: 40px 24px; }
}
.product-info-grid h2 { font: 800 20px var(--font-display); letter-spacing: -.01em; margin: 0 0 14px; color: var(--color-text); }
.product-info-grid p { font: 15px/1.7 var(--font-body); color: var(--color-text-muted); margin: 0 0 30px; }
.product-info-grid p:last-child { margin-bottom: 0; }

.benefits-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.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; box-shadow: 0 0 8px oklch(56% 0.16 142 / .5); }
.benefit-item p { margin: 0; font: 15px/1.6 var(--font-body); color: var(--color-text-muted); }

.ingredient-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ingredient-pill { background: var(--color-bg-elevated); border: 1px solid var(--color-border); color: var(--color-text); font: 600 13px var(--font-body); padding: 7px 14px; border-radius: var(--radius-pill); }

.glossary-note { font: 13px/1.5 var(--font-body); color: var(--color-text-muted); margin: 12px 0 0; font-style: italic; }

/* ===== Sabores / variantes — ficha desplegable por SKU (Docs/Productos.md) ===== */
.flavors-section { max-width: 1080px; margin: 0 auto; padding: 0 40px clamp(48px, 7vw, 72px); }
.flavors-section h2 { font: 800 20px var(--font-display); letter-spacing: -.01em; margin: 0 0 6px; color: var(--color-text); }
.flavors-section-note { font: 14px/1.6 var(--font-body); color: var(--color-text-muted); margin: 0 0 20px; max-width: 60ch; }

.sku-group + .sku-group { margin-top: 34px; }
.sku-group-label { font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-green); margin: 0 0 12px; }

.sku-list { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }

.sku-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-elevated);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .2s ease;
}
.sku-card[open] { box-shadow: var(--shadow-card-hover); border-color: oklch(70% 0.15 142 / .4); }

.sku-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  -webkit-tap-highlight-color: transparent;
}
.sku-card summary::-webkit-details-marker { display: none; }
.sku-card summary::marker { content: ''; }

.sku-card-name-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sku-card-name { display: flex; align-items: center; gap: 8px; font: 700 16px var(--font-display); letter-spacing: -.005em; color: var(--color-text); }
.sku-card-name::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--sku-accent, var(--color-green-mid));
}
.sku-card-format { font: 13px var(--font-body); color: var(--color-text-muted); margin-left: 17px; }
.sku-card-chevron { flex: none; width: 20px; height: 20px; color: var(--color-text-muted); transition: transform .25s ease; }
.sku-card[open] .sku-card-chevron { transform: rotate(180deg); }

.sku-card-body { padding: 0 22px 24px; }
.sku-card-desc { font: 15px/1.7 var(--font-body); color: var(--color-text-muted); margin: 0 0 18px; }
.sku-card-body strong { color: var(--color-text); font-weight: 700; }

.sku-card-subhead {
  font: 700 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-green); margin: 20px 0 10px;
}
.sku-card-subhead:first-child { margin-top: 0; }

.sku-benefits, .sku-science { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sku-benefits li, .sku-science li { display: flex; gap: 9px; align-items: flex-start; font: 14px/1.6 var(--font-body); color: var(--color-text-muted); }
.sku-benefits li::before, .sku-science li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex: none;
}
.sku-benefits li::before { background: var(--color-green-mid); box-shadow: 0 0 6px oklch(56% 0.16 142 / .4); }
.sku-science li::before { background: var(--color-border); }

.sku-card-nutri {
  margin: 20px 0 0; padding: 12px 16px;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-panel);
  font: 13px/1.6 var(--font-data); color: var(--color-text-muted);
}
.sku-card-pending { font: 14px/1.6 var(--font-body); color: var(--color-text-muted); font-style: italic; margin: 0; }

/* ===== Cuadro comparativo — datos reales de Docs/Productos.md ===== */
.compare-table-wrap { max-width: 1080px; margin: 0 auto clamp(56px, 8vw, 88px); padding: 0 40px; }
.compare-table-wrap h2 { font: 800 20px var(--font-display); letter-spacing: -.01em; margin: 0 0 6px; color: var(--color-text); }
.compare-table-note { font: 13px/1.5 var(--font-body); color: var(--color-text-muted); margin: 0 0 16px; }
.compare-table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td { padding: 12px 16px; text-align: left; font: 13px var(--font-data); color: var(--color-text-muted); white-space: nowrap; }
.compare-table thead th { font: 700 11px var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--color-text); background: var(--color-bg-elevated-2); }
.compare-table tbody tr:nth-child(even) { background: var(--color-bg-elevated-2); }
.compare-table tbody td:first-child { font: 600 13px var(--font-body); color: var(--color-text); white-space: normal; }
.compare-table-footnote { font: 12px/1.5 var(--font-body); color: var(--color-text-muted); margin: 10px 0 0; font-style: italic; }

@media (max-width: 759px) {
  .flavors-section { padding: 0 24px 48px; }
  .compare-table-wrap { padding: 0 24px; }
  .sku-card summary { padding: 16px 18px; }
  .sku-card-body { padding: 0 18px 20px; }
}

/* Acento por sabor de cada .sku-card. Antes iba como style="--sku-accent: ..."
   en el HTML, pero la CSP del sitio (style-src 'self') descarta los atributos
   style, asi que el acento nunca se aplicaba. */
.sku-accent--avellana { --sku-accent: var(--flavor-hover-avellana); }
.sku-accent--brownie { --sku-accent: var(--flavor-hover-brownie); }
.sku-accent--choco-menta { --sku-accent: var(--flavor-hover-choco-menta); }
.sku-accent--coco { --sku-accent: var(--flavor-hover-coco); }
.sku-accent--fresa { --sku-accent: var(--flavor-hover-fresa); }
.sku-accent--frutos-rojos { --sku-accent: var(--flavor-hover-frutos-rojos); }
.sku-accent--leche-coco { --sku-accent: var(--flavor-hover-leche-coco); }
.sku-accent--naranja { --sku-accent: var(--flavor-hover-naranja); }
.sku-accent--tarta-queso { --sku-accent: var(--flavor-hover-tarta-queso); }
.sku-accent--vainilla { --sku-accent: var(--flavor-hover-vainilla); }
.sku-accent--creatina-cola { --sku-accent: var(--flavor-active-creatina-cola); }
.sku-accent--creatina-pura { --sku-accent: var(--flavor-active-creatina-pura); }
.sku-accent--creatina-sandia { --sku-accent: var(--flavor-active-creatina-sandia); }