/* Second chapter only: photographic break, condensed live type, quiet controls. */
.flavor {
  --flavor-black: #0b0906;
  --flavor-cream: #fff8eb;
  --flavor-orange: #ff4b00;
  --flavor-warm-glow: #46251435;
  --flavor-pouch-light: #d7925c56;
  container-type: inline-size;
  height: 100dvh;
  min-height: 640px;
  color: var(--flavor-cream);
  background:
    radial-gradient(ellipse 42% 12% at 74% 100%, var(--flavor-warm-glow), var(--clear)),
    radial-gradient(ellipse at 64% 30%, var(--flavor-warm-glow), var(--clear) 72%),
    var(--flavor-black);
}
.flavor::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h128v128H0z' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}
.flavor .flavor-eyebrow { left: 8.7%; top: max(8.3%,88px); z-index: 6; font-size: 6.153846cqw; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; }
.flavor .flavor-title { display: contents; }
.flavor .flavor-word { margin: 0; bottom: auto; right: auto; transform: none; transform-origin: center; pointer-events: none; letter-spacing: 0; }
.flavor .flavor-word--outline { --crunch-type-size: 300px; left: 4%; top: max(13.5%,112px); width: 76%; height: 25.5%; rotate: -5deg; color: var(--flavor-cream); -webkit-text-stroke: 0; }
.flavor .flavor-word--solid { --crunch-type-size: 280px; left: 2.2%; top: 53%; width: 93.5%; height: 24%; rotate: -8deg; color: var(--flavor-orange); }
.flavor .crunch-type { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; }
.flavor .crunch-type text { font-family: Barlow,system-ui,sans-serif; font-weight: 900; font-size: var(--crunch-type-size); letter-spacing: -2px; }
.flavor .flavor-word--outline text { fill: none; stroke: currentColor; stroke-width: 4.5px; vector-effect: non-scaling-stroke; paint-order: stroke; }
.flavor .crunch-layer { inset: 0; width: 100%; height: 100%; rotate: none; translate: none; filter: none; z-index: 3; }
.flavor .crunch-layer img { width: 100%; height: 100%; object-fit: fill; }
.flavor .flavor-description { left: 8.7%; top: 79%; bottom: auto; z-index: 6; font-size: 4.615385cqw; line-height: 1.05; font-weight: 600; }
.flavor .flavor-description::after { width: 22cqw; height: 2px; margin-top: 12px; background: var(--flavor-orange); rotate: -7deg; border-radius: 50%; }
.flavor .flavor-thread { inset: 0; width: 100%; height: 100%; color: var(--flavor-orange); z-index: 2; }
.flavor .flavor-thread path { stroke-width: 2.4px; }
.flavor-actions {
  position: absolute;
  left: 8.7%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 7;
}
.flavor-pack {
  position: absolute;
  right: max(48px, calc(9% + 8px));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 5;
  width: clamp(106px, 29.7cqw, 150px);
  pointer-events: none;
}
.flavor-pouch {
  position: relative;
  isolation: isolate;
}
@supports (mask-image: image-set(url("assets/images/nomada-tocineta-ahumada-bolsa-30g-320.webp") type("image/webp"))) {
  .flavor-pouch::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 36% 90% at 9% 34%, var(--flavor-pouch-light) 15%, var(--clear));
    mix-blend-mode: screen;
    mask-image: image-set(
      url("assets/images/nomada-tocineta-ahumada-bolsa-30g-320.avif") type("image/avif"),
      url("assets/images/nomada-tocineta-ahumada-bolsa-30g-320.webp") type("image/webp")
    );
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }
}
.flavor-food {
  position: absolute;
  bottom: -20px;
  left: -48%;
  z-index: 1;
  width: 176%;
  mask-image: linear-gradient(to bottom, var(--flavor-black) 88%, var(--clear));
}
.flavor-actions .button { padding: 8px 16px; font-size: clamp(14px, 4.1cqw, 18px); background: var(--flavor-cream); color: var(--flavor-black); }
.flavor-actions .icon { width: 18px; height: 18px; flex-basis: 18px; }
.flavor .next-scene { right: 0; bottom: 2.4%; }
.flavor .next-scene .icon { width: 24px; height: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .flavor.is-active .next-scene .icon { animation: hero-scroll-cue 1.6s ease-in-out infinite; }
  .page-hidden .flavor .next-scene .icon { animation-play-state: paused; }
}
@media (max-width: 599px) {
  body[data-scene="crunch"] .scene-nav { top: 14.3%; }
  body[data-scene="crunch"] .scene-nav a { height: 16px; }
  body[data-scene="crunch"] .scene-nav span { width: 8px; height: 8px; background: var(--clear); }
  body[data-scene="crunch"] .scene-nav [aria-current] span { background: var(--hero-reference-orange); border-color: var(--clear); }
}
@media (max-width: 359px) {
  .flavor-food { left: -14%; width: 156%; }
}
@media (min-width: 600px) {
  .flavor { min-height: 720px; }
  .flavor .flavor-eyebrow { left: 8%; top: 15%; font-size: 26px; }
  .flavor .flavor-word--outline { left: 6%; top: 22%; width: 50%; height: 39%; }
  .flavor .flavor-word--solid { left: auto; right: 5%; top: 57%; width: 60%; height: 31%; }
  .flavor .crunch-layer { inset: 0; width: 100%; height: 100%; }
  .flavor .crunch-layer img { object-fit: contain; object-position: center; }
  .flavor .flavor-description { left: 8%; top: 20%; font-size: 20px; }
  .flavor .flavor-description::after { width: 88px; }
  .flavor-actions { left: 8%; bottom: max(32px, env(safe-area-inset-bottom)); }
  .flavor-pack { right: max(88px, calc(6% + 8px)); bottom: max(32px, env(safe-area-inset-bottom)); width: clamp(128px, 15.4cqw, 202px); }
  .flavor-actions .button { min-width: 152px; font-size: 18px; padding: 12px 24px; }
  .flavor-actions .icon { width: 20px; height: 20px; flex-basis: 20px; }
  .flavor .next-scene { right: 32px; bottom: 16px; }
}
@media (min-width: 900px) {
  .flavor { --flavor-copy-top: max(calc(var(--header-height) + 4px), 12%); }
  .flavor .flavor-eyebrow { top: var(--flavor-copy-top); }
  .flavor .flavor-description { top: calc(var(--flavor-copy-top) + 34px); }
  .flavor .flavor-description::after { margin-top: 8px; }
}