/* V21 — compatibilidade, orientação e fluidez sem mudar a direção visual. */

@media (min-width: 1181px) {
  .header { height: 88px; padding-inline: clamp(22px,3.15vw,58px); gap: clamp(22px,2vw,34px); }
  .brand img { width: 166px; max-height: 72px; }
  .brand small { font-size: 10.5px; line-height: 1.25; letter-spacing: .13em; }
  .nav-group { gap: clamp(15px,1.45vw,26px); font-size: 11.5px; letter-spacing: .065em; }
}

.scroll-guide-v21 {
  position: absolute;
  z-index: 45;
  top: max(98px,calc(env(safe-area-inset-top) + 84px));
  right: clamp(18px,3.5vw,56px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: currentColor;
  background: color-mix(in srgb,currentColor 7%,transparent);
  font: 800 8px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: .72;
  backdrop-filter: blur(8px);
}

.scroll-guide-v21::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  animation: guideDownV21 1.55s ease-in-out infinite;
}

@keyframes guideDownV21 {
  0%,100% { transform: rotate(45deg) translate(-1px,-3px); opacity: .42; }
  50% { transform: rotate(45deg) translate(3px,1px); opacity: 1; }
}

.category-arrow > span {
  width: 13px;
  height: 13px;
  display: block;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  border-top: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
}
.category-arrow--next > span { transform: rotate(45deg) translate(-2px,2px); }
.category-arrow--prev > span { transform: rotate(-135deg) translate(-2px,2px); }

.story-reasons-v5 .story-reason { opacity: 1; }
html.reasons-pending-v21 .story-reasons-v5 .story-reason {
  --reason-scroll-x: 0px;
  --reason-scroll-y: 0px;
  --reason-scroll-r: 0deg;
  opacity: 1 !important;
}
html.reasons-pending-v21 .story-reasons-v5 {
  visibility: hidden;
}
html:not(.reasons-pending-v21) .story-reasons-v5 {
  visibility: visible;
}

.journey-food {
  transition: transform .065s linear,opacity .16s linear;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.journey-food img,.special-product img,.special-finale img {
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}

@media (max-width: 820px) {
  html { width: 100%; max-width: 100%; overflow-x: clip !important; overflow-y: auto; overscroll-behavior-x: none; }
  body { min-width: 0; width: 100%; max-width: 100%; overflow-x: clip !important; overflow-y: visible !important; overscroll-behavior-x: none; }

  .hero > .scroll-guide-v21,
  .range-v4 > .scroll-guide-v21,
  .experience-v4 > .scroll-guide-v21,
  .reviews-v4 > .scroll-guide-v21 {
    top: calc(env(safe-area-inset-top) + 84px);
    right: 16px;
    padding: 8px 10px;
    font-size: 7px;
    opacity: .62;
  }
  .specials-v2 .specials-product-deck,
  .specials-v2 .specials-stage[data-special-state] .specials-product-deck {
    left: 50% !important;
    top: 31% !important;
    width: min(82vw,430px) !important;
    height: 38svh !important;
    transition: none !important;
  }
  .specials-v2 .specials-stage[data-special-state="4"] .specials-product-deck {
    top: 28% !important;
    width: min(94vw,540px) !important;
    height: 33svh !important;
  }
  .specials-v2 .specials-copy,
  .specials-v2 .specials-stage[data-special-state="1"] .specials-copy[data-special-copy="1"],
  .specials-v2 .specials-stage[data-special-state="3"] .specials-copy[data-special-copy="3"] {
    bottom: max(180px,calc(env(safe-area-inset-bottom) + 168px)) !important;
  }
  .specials-v2 .specials-copy[data-special-copy="0"] {
    bottom: max(172px,calc(env(safe-area-inset-bottom) + 160px)) !important;
  }
  .specials-v2 .specials-copy--final {
    bottom: max(142px,calc(env(safe-area-inset-bottom) + 130px)) !important;
  }
  .special-product,.special-product.is-active,.special-product.is-past,
  .special-finale,.special-finale.is-active { transition-duration: .42s !important; }
}

@media (max-width: 390px), (max-height: 720px) and (max-width: 820px) {
  .specials-v2 .specials-product-deck,
  .specials-v2 .specials-stage[data-special-state] .specials-product-deck {
    top: 30% !important;
    width: min(77vw,350px) !important;
    height: 33svh !important;
  }
  .specials-v2 .specials-copy:not(.specials-copy--final) {
    bottom: max(150px,calc(env(safe-area-inset-bottom) + 138px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) { .scroll-guide-v21::after { animation: none; } }
@supports not (height: 100svh) {
  @media (max-width: 820px) { .specials-v2 > .specials-stage,.reviews-v4-sticky { height: 100vh !important; } }
}
@supports not (background: color-mix(in srgb,black 10%,transparent)) {
  .scroll-guide-v21 { background: rgba(17,17,17,.08); }
}
