/* ==========================================================
   SABORES — una cookie protagonista por vez
   ========================================================== */
.flavors {
  --fl-ink: #4A2B12; --fl-accent: #F4D56B;
  position: relative; isolation: isolate; color: var(--fl-ink); padding: clamp(72px, 9vw, 130px) 0 clamp(48px, 6vw, 90px);
  overflow: hidden;
}
.flavors__bg { position: absolute; inset: 0; z-index: -1; background: #F8EFC6; }
.flavors .eyebrow, .flavors h2 em { color: inherit; }
.flavors__head { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 8px; position: relative; z-index: 4; }
.flavors__head h2 { margin-top: 14px; font-size: clamp(2.1rem, 5.2vw, 4.6rem); }
.flavors__head h2 em { opacity: .8; }

/* Teléfono: nombre, foto y datos, uno debajo del otro. Escritorio: foto a un lado y datos al otro. */
.fl-stage {
  position: relative; max-width: var(--maxw); margin: 0 auto; padding: 4px var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "visual" "info"; justify-items: center;
}
.fl-name {
  grid-area: name; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: 0 .24em;
  min-height: 2.2em; margin: 8px 0 12px; text-align: center; pointer-events: none;
  font: 400 clamp(2.3rem, 11.4vw, 4rem)/1.06 var(--f-flavor); letter-spacing: -.012em;
}
.fl-name__word { display: inline-block; overflow: hidden; padding: .06em .02em .14em; margin: -.06em -.02em -.14em; vertical-align: top; }
.fl-name__word .ch { display: inline-block; will-change: transform; }

.fl-count { position: absolute; z-index: 4; right: var(--gutter); top: 0; font: 700 .8rem/1 var(--f-body); letter-spacing: .18em; font-variant-numeric: tabular-nums; }

/* Foto fija */
.fl-visual { grid-area: visual; position: relative; z-index: 2; width: 100%; display: flex; justify-content: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.fl-arch {
  position: relative; width: min(74vw, 360px); aspect-ratio: 4 / 5.2; border-radius: 999px 999px 26px 26px; overflow: hidden;
  border: 7px solid var(--paper); box-shadow: 0 34px 50px -26px rgba(50, 26, 4, .6); background: var(--paper); will-change: transform;
}
.fl-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.fl-side { display: grid; place-items: center; position: absolute; z-index: 8; top: 44%; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); color: var(--fl-ink); box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .45); }
.fl-side svg { width: 22px; height: 22px; }
.fl-side--prev { left: -4px; } .fl-side--next { right: -4px; }
.fl-side:active { transform: scale(.92); }

.fl-info { grid-area: info; display: grid; gap: 12px; margin: 16px 0 6px; max-width: 46ch; text-align: center; justify-items: center; }
.fl-tag { font: italic 600 clamp(1.2rem, 1.7vw, 1.6rem)/1.18 var(--f-serif); letter-spacing: -.01em; text-wrap: balance; }
.fl-seen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fl-seen li { font-size: .82rem; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 62%, transparent); border: 1.5px solid color-mix(in srgb, var(--fl-ink) 25%, transparent); }

/* Selector de cantidad: lo usa el carrito */
.qty { display: inline-flex; align-items: center; border: 2px solid var(--choc); border-radius: 999px; height: 50px; }
.qty button { width: 44px; height: 100%; font: 800 1.3rem/1 var(--f-body); border-radius: 999px; transition: background .2s; }
.qty button:hover { background: var(--butter-300); }
.qty output { min-width: 28px; text-align: center; font-weight: 800; }

/* Navegación por bloques de color */
.fl-nav { position: relative; z-index: 6; max-width: var(--maxw); margin: clamp(20px, 3vw, 40px) auto 0; padding: 0 var(--gutter); display: grid; gap: 18px; }
.fl-nav__bar { display: flex; align-items: center; gap: 12px; }
.fl-arrow { width: 54px; height: 54px; flex: none; border-radius: 50%; border: 2px solid var(--fl-ink); display: grid; place-items: center; transition: background .25s, color .25s, transform .3s var(--ease); }
.fl-arrow svg { width: 22px; height: 22px; }
.fl-arrow:hover { background: var(--fl-ink); color: var(--paper); transform: scale(1.06); }
.fl-chips { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 8px 4px 14px; margin: 0 -4px; scrollbar-width: none; flex: 1; -webkit-overflow-scrolling: touch; }
.fl-chips::-webkit-scrollbar { display: none; }
.fl-chip {
  flex: none; scroll-snap-align: center; width: 112px; height: 132px; border-radius: 22px 22px 18px 18px; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 4px;
  padding: 10px 8px 12px; background: var(--chip-bg); color: var(--chip-ink); border: 2px solid transparent; transition: transform .45s var(--ease), border-color .25s, width .45s var(--ease);
  font-weight: 800; font-size: .74rem; line-height: 1.1; text-align: center; overflow: hidden;
}
.fl-chip__img { width: 66px; height: 66px; display: grid; place-items: center; }
.fl-chip__img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(50,25,4,.3)); }
.fl-chip__img img.round { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: none; border: 3px solid var(--paper); }
.fl-chip:hover { transform: translateY(-6px); }
.fl-chip[aria-pressed="true"] { border-color: var(--fl-ink); transform: translateY(-8px) scale(1.04); box-shadow: 0 14px 20px -12px rgba(0,0,0,.5); }
.fl-chip small { display: block; font-size: .6rem; font-weight: 700; opacity: .65; letter-spacing: .04em; text-transform: uppercase; }
.fl-more { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .86rem; font-weight: 600; }
.fl-more b { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; margin-right: 4px; }
.fl-more a { text-decoration: none; padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 55%, transparent); border: 1.5px solid color-mix(in srgb, var(--fl-ink) 30%, transparent); }
.fl-more a:hover { background: var(--fl-ink); color: var(--paper); }

/* ----- Escritorio ----- */
@media (min-width: 1001px) {
  .flavors { padding-top: clamp(64px, 7vw, 100px); }
  .flavors__head h2 { font-size: clamp(2rem, 4.2vw, 3.8rem); }
  .fl-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "visual ." "visual name" "visual info" "visual ."; column-gap: clamp(24px, 5vw, 80px); padding-top: 18px; }
  .fl-name { justify-content: flex-start; justify-self: start; text-align: left; min-height: 0; margin: 0 0 14px; font-size: clamp(3rem, 5.6vw, 5.6rem); }
  .fl-visual { justify-content: flex-end; }
  .fl-arch { width: min(100%, clamp(280px, 30vw, 450px)); }
  .fl-side { display: none; }
  .fl-info { justify-self: start; justify-items: start; text-align: left; margin: 0; }
  .fl-seen { justify-content: flex-start; }
  .fl-seen li { font-size: .9rem; padding: 7px 13px; }
  .fl-count { top: 8px; }
}

/* ----- Móvil / tablet ----- */
@media (max-width: 1000px) {
  .fl-chip { width: 98px; height: 120px; }
  .fl-arrow { display: none; }
}