/* =========================================================================
   Home hero "El sabor manda" (OpenSpec rediseno-tienda, fase sabores).

   Standalone sheet for a standalone template
   (templates/storefront/partials/home-hero-sabores.twig): the hero is the only
   product-coupled block of the home, so it can be redesigned here without
   touching home.css or the rest of the storefront. Loaded after home.css, only
   on the home, so the few shared selectors (.vc-home a) lose the cascade tie
   without needing !important.

   Tile colours are the whole point of the block: home_flavor_swatch() maps a
   flavour name to one of these eight keys, so swapping the four products in the
   admin recolours the wall by itself.
   ========================================================================= */

/* Display face: self-hosted latin subset, weight 800 only — the hero is the
   only place that uses it, and it is one 38 KB request (guide §1: no
   third-party font requests). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/bricolage-800.woff2") format("woff2");
}

.vc-sabor {
  --sabor-ink: #171512;
  --sabor-soft: #5f584f;
  --sabor-mute: #a49b90;
  --sabor-line: #e6e0d6;
  --sabor-paper: #fffdfa;
  --sabor-pop: #d8ff6b;
  --sabor-display: "Bricolage Grotesque", "Poppins", system-ui, sans-serif;

  background: var(--sabor-paper);
  padding: 36px 0 26px;
  color: var(--sabor-ink);
}

.vc-sabor__inner {
  max-width: var(--vc-maxw);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}

/* ---- Copy column ---- */
.vc-sabor__eyebrow {
  display: inline-block;
  background: var(--sabor-pop);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.vc-sabor .vc-sabor__title {
  font-family: var(--sabor-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 16px 0 16px;
  color: var(--sabor-ink);
}

.vc-sabor__lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sabor-soft);
  margin: 0 0 22px;
  max-width: 27em;
}

.vc-sabor__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.vc-sabor .vc-sabor__chip {
  display: inline-block;
  border: 1px solid var(--sabor-line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sabor-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.vc-sabor .vc-sabor__chip:hover { border-color: var(--sabor-ink); }

.vc-sabor .vc-sabor__chip.is-on {
  background: var(--sabor-ink);
  border-color: var(--sabor-ink);
  color: #fff;
}

.vc-sabor__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.vc-sabor .vc-sabor__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.vc-sabor .vc-sabor__btn--ink { background: var(--sabor-ink); color: #fff; }
.vc-sabor .vc-sabor__btn--ink:hover { background: var(--vc-action); }

.vc-sabor .vc-sabor__btn--line {
  background: transparent;
  color: var(--sabor-ink);
  border: 1.5px solid var(--sabor-ink);
}
.vc-sabor .vc-sabor__btn--line:hover { background: var(--sabor-ink); color: #fff; }

.vc-sabor__legal {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--sabor-mute);
}

/* ---- Flavour wall ---- */
.vc-sabor__wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vc-sabor__tile {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--tile, #f3efe8);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vc-sabor__tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(23, 21, 18, 0.13);
}

.vc-sabor .vc-sabor__link {
  display: block;
  padding: 16px 18px 18px;
  text-decoration: none;
  color: var(--sabor-ink);
}

/* The catalogue photographs products on white, so multiply drops the box and
   leaves the device sitting on the tile colour — no cut-outs to maintain. */
.vc-sabor__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.vc-sabor__price {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  background: var(--sabor-ink);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
}

.vc-sabor__meta {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  opacity: 0.55;
}

.vc-sabor__name {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.25;
  margin-top: 2px;
}

/* ---- Swatches: one class per key returned by home_flavor_swatch() ---- */
.vc-sabor__tile--grape { --tile: #efe6ff; }
.vc-sabor__tile--peach { --tile: #ffe7dd; }
.vc-sabor__tile--mint  { --tile: #defaf0; }
.vc-sabor__tile--amber { --tile: #fff2cc; }
.vc-sabor__tile--blue  { --tile: #e3eeff; }
.vc-sabor__tile--lime  { --tile: #ecf9d2; }
.vc-sabor__tile--pink  { --tile: #ffe6ee; }
.vc-sabor__tile--sand  { --tile: #f4ece0; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .vc-sabor__inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .vc-sabor__lead { max-width: none; }
}

@media (max-width: 560px) {
  .vc-sabor { padding: 26px 0 20px; }
  .vc-sabor .vc-sabor__title { margin: 12px 0 12px; }
  .vc-sabor__wall { gap: 10px; }
  .vc-sabor .vc-sabor__link { padding: 12px 13px 14px; }
  .vc-sabor__name { font-size: 0.95rem; }
  .vc-sabor .vc-sabor__btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .vc-sabor__tile,
  .vc-sabor .vc-sabor__chip,
  .vc-sabor .vc-sabor__btn { transition: none; }
  .vc-sabor__tile:hover { transform: none; }
}