/* ═══════════════════════════════════════════════════════════════════════════
   GIARDINI CAFÉ — MENU PAGE (Green-Atmospheric Theme)
   ═══════════════════════════════════════════════════════════════════════════
   Chromatic strategy: The ENTIRE page lives inside the Giardini green world.
   
   Hero:        Dark cinematic green  (#0C1A10 → #162218)
   Bridge:      Gradient from dark green → light green
   Body:        Light green atmospheric (#EFF4F0 / #E5ECE7)
   Surfaces:    Green-tinted glass, not white/cream
   
   Color tokens:
     --m-bg:        #EFF4F0  (light sage — main body bg)
     --m-bg-deep:   #E5ECE7  (slightly deeper sage for cards/sections)
     --m-bg-glow:   #DDE6DF  (warm sage for emphasized areas)
     --c-dark:      #1A1A1A  (near-black text)
     --c-primary:   #2B4A3B  (forest green — brand anchor)
     --c-gold:      #B79358  (warm gold — hero accents only)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══ 1. GLOBALS ══════════════════════════════════════════════════════════ */

:root {
  /* Elevado para o tom floresta (família Location), menos preto */
  --c-bg: #0E1B13;
  --m-bg: #0E1B13;
  --m-bg-deep: #0A140F;
  --m-bg-glow: #132419;
  --m-bg-surface: rgba(234, 228, 217, 0.04);
  --c-dark: #FDFBF7;
  --c-primary: #2B4A3B;
  --c-brand-muted: #8E9C92;
  --c-gold: #B79358;
  --c-editorial: #C2B49A;
  --c-accent: #EAE4D9;
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Premium deep green gradient matching Location family but strictly darker */
  background: linear-gradient(160deg, #132419 0%, #0E1B13 45%, #0A140F 100%) fixed !important;
}

body {
  background: transparent !important;
}

@media (max-width: 767px) {
  html {
    scroll-behavior: auto;
    background: #0A140F !important;
    background-attachment: scroll !important;
  }
}

body {
  background: var(--m-bg) !important;
  color: var(--c-dark);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Green atmospheric tint — subtle warm ivory glows to balance the dark green */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 15% 25%, rgba(234, 228, 217, 0.03) 0%, transparent 58%),
    radial-gradient(ellipse 80% 60% at 85% 65%, rgba(234, 228, 217, 0.02) 0%, transparent 52%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(183, 147, 88, 0.02) 0%, transparent 55%);
}

body::after {
  display: none;
}


/* ══ 2. NOISE OVERLAY ════════════════════════════════════════════════════ */

.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* Disabled dark-theme ambient elements */
#lateral-vignette,
#particle-canvas,
#menu-orb-1,
#menu-orb-2,
.product-glow,
.product-shadow {
  display: none;
}


/* ══ 3. LOADER ═══════════════════════════════════════════════════════════ */

.loader {
  position: fixed;
  inset: 0;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.loader-text {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: var(--c-accent);
  letter-spacing: -0.02em;
}

.loader-tagline {
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-top: 1.8rem;
  animation: loaderTaglinePulse 2.5s ease-in-out infinite;
}

@keyframes loaderTaglinePulse {

  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.65;
  }
}

.loader-track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
}

.loader-bar {
  height: 100%;
  width: 0%;
  background: var(--c-gold);
  position: relative;
  overflow: hidden;
}

.loader-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(234, 228, 217, 0.5), transparent);
  animation: loaderShimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes loaderShimmer {
  to {
    left: 200%;
  }
}


/* ══ 4. NAVBAR — Green glass ═════════════════════════════════════════════ */

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2.25rem 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 500;
  border-bottom: 1px solid transparent;
  transition:
    padding 0.8s var(--expo),
    background-color 0.8s var(--expo),
    border-color 0.8s var(--expo),
    backdrop-filter 0.8s var(--expo);
}

/* Initial state: transparent over dark hero */
#navbar.nav-light {
  background-color: transparent;
}

/* Scrolled state: green-tinted glass */
#navbar.is-scrolled {
  background-color: rgba(12, 22, 16, 0.85);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.nav-logo {
  font-family: 'Instrument Serif', serif;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  flex: 1;
  display: flex;
  align-items: center;
  color: #fff;
  transition: color 0.6s var(--expo);
}

.is-scrolled .nav-logo {
  color: var(--c-accent);
}

.nav-menu {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
  flex: 2;
}

.nav-actions {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.nav-link {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
  position: relative;
  transition: color 0.4s ease;
}

.nav-link::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--expo);
}

.nav-link:hover::before {
  width: 100%;
}

.nav-link:hover {
  color: #fff;
}

.is-scrolled .nav-link {
  color: rgba(234, 228, 217, 0.65);
}

.is-scrolled .nav-link:hover {
  color: #fff;
}

/* CTA Button */
.nav-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 9999px;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  transition: all 0.35s var(--expo);
}

.nav-cta:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.is-scrolled .nav-cta {
  border-color: rgba(234, 228, 217, 0.4);
  color: var(--c-accent);
  background: transparent;
}

.is-scrolled .nav-cta:hover {
  background: rgba(234, 228, 217, 0.1);
  color: #fff;
}

/* Shimmer beam */
.s4-beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.15) 55%, transparent 100%);
  transform: translateX(-110%) skewX(-18deg);
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transition: opacity 0.1s;
}

.nav-cta:hover .s4-beam,
.btn-primary:hover .s4-beam,
.hero-btn-primary:hover .s4-beam,
.loc-beam-container:hover .s4-beam,
.pdf-btn:hover .s4-beam {
  opacity: 1;
  animation: s4-shimmer 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes s4-shimmer {
  from {
    transform: translateX(-110%) skewX(-18deg);
  }

  to {
    transform: translateX(220%) skewX(-18deg);
  }
}

/* Hamburger */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
}

/* Mobile menu */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 490;
  background: rgba(12, 22, 16, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-link {
  font-family: 'Instrument Serif', serif;
  font-size: 2.2rem;
  color: var(--c-dark);
  text-decoration: none;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.4s var(--expo), transform 0.5s var(--expo), color 0.3s ease;
}

#mobile-menu.open .mobile-link {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#mobile-menu.open .mobile-link:nth-child(2) {
  transition-delay: 0.1s;
}

#mobile-menu.open .mobile-link:nth-child(3) {
  transition-delay: 0.18s;
}

#mobile-menu.open .mobile-link:nth-child(4) {
  transition-delay: 0.26s;
}

#mobile-menu.open .mobile-link:nth-child(5) {
  transition-delay: 0.34s;
}

.mobile-link:hover {
  color: var(--c-primary);
}

.mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--c-dark);
  opacity: 0;
  transition: opacity 0.5s ease;
}

#mobile-menu.open .mobile-close {
  opacity: 1;
  transition-delay: 0.4s;
}


/* ══ 5. HERO — Cinematic Dark Green (slightly lighter) ═══════════════════ */

#hero-pin-wrapper {
  position: relative;
  width: 100%;
  background: var(--m-bg, #0E1B13);
}

/* GSAP ScrollTrigger creates a .pin-spacer wrapper — ensure it matches */
.pin-spacer {
  background: var(--m-bg, #0E1B13) !important;
}

#hero-viewport {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--m-bg, #0E1B13);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Remove white gradient from components.css */
#hero-viewport::after {
  display: none !important;
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 2rem;
  pointer-events: none;
}

.hero-content>* {
  pointer-events: auto;
}

/* Hero background: slightly lighter green-black — still cinematic, but lifted */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse at 50% 55%, #0E1E12 0%, #091410 60%, #050C07 100%);
}

/* Hero section bridge — seamless blend into dark menu body */
#hero-pin-wrapper::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(to bottom,
      transparent 0%,
      var(--m-bg) 100%);
  z-index: 10;
  pointer-events: none;
}

#hero-bridge {
  display: none;
}

/* Canvas frame — fullscreen, same as reservation hero */
#video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  border-radius: 0;
  border: none;
  box-shadow: none;
  opacity: 1;
}

#video-frame:hover {
  transform: none !important;
}

#seq-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(10px);
  opacity: 0;
  transform: scale(1.05);
}

#seq-canvas.ready {
  filter: blur(0) contrast(1.1) brightness(1.05);
  opacity: 1;
  transform: scale(1);
  transition: filter 2.5s var(--expo), opacity 2s ease, transform 2.5s var(--expo);
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(8, 18, 10, 0.68) 0%,
      rgba(8, 18, 10, 0.48) 18%,
      rgba(8, 18, 10, 0.25) 36%,
      rgba(8, 18, 10, 0.05) 52%,
      transparent 64%),
    radial-gradient(ellipse at 50% 62%,
      transparent 28%,
      rgba(6, 14, 8, 0.30) 60%,
      rgba(6, 14, 8, 0.82) 100%);
}

.hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.hero-text-scrim {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 65% at 50% 38%,
      rgba(8, 16, 10, 0.40) 0%, rgba(8, 16, 10, 0.18) 48%, transparent 72%);
}

.hero-title-sep {
  display: none;
}

.line {
  display: block;
  overflow: visible;
  padding-bottom: 4px;
}

.line-inner {
  display: block;
  transform: translateY(115%);
  will-change: transform;
  opacity: 0;
}

.hero-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: var(--c-editorial);
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(10px);
}

.kicker-line {
  width: 28px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(194, 180, 154, 0.65));
  flex-shrink: 0;
}

.kicker-line:last-of-type {
  background: linear-gradient(to left, transparent, rgba(194, 180, 154, 0.65));
}

.hero-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(3.8rem, 9.5vw, 8.2rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: rgba(244, 242, 237, 0.97);
  margin-bottom: 0;
}

.hero-title .line-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  will-change: transform, opacity;
}

.hero-title em {
  font-style: italic;
  color: var(--c-editorial);
  font-weight: 400;
  -webkit-text-fill-color: var(--c-editorial);
}

.hero-sub {
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(234, 228, 217, 0.75);
  letter-spacing: 0.025em;
  max-width: 460px;
  line-height: 1.75;
  margin: 2.25rem auto 3.5rem;
  opacity: 0;
  transform: translateY(10px);
}

.mobile-text {
  display: none;
}

.desktop-text {
  display: inline;
}


.hero-cta-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  transform: translateY(10px);
}

/* Beam CTA button */
.loc-beam-container {
  position: relative;
  display: inline-flex;
  border-radius: 9999px;
  overflow: hidden;
  transition: transform 0.7s var(--expo);
  z-index: 10;
}

.loc-beam-container:hover {
  transform: scale(1.03) translateY(-2px);
}

.loc-beam-border {
  position: absolute;
  width: 400%;
  height: 400%;
  top: -150%;
  left: -150%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 20%, rgba(43, 74, 59, 0.3) 45%, rgba(200, 225, 208, 0.85) 60%, rgba(43, 74, 59, 0.3) 75%, transparent 100%);
  filter: blur(1.5px);
  opacity: 1;
  animation: rotate-beam 4s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes rotate-beam {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.hero-btn-primary {
  background: var(--c-primary);
  color: var(--c-dark);
  padding: 1.15rem 2.9rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 99px;
  transition: all 0.42s var(--expo);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 20px rgba(255, 255, 255, 0.02);
  width: 100%;
  height: 100%;
}

.hero-btn-primary:active {
  transform: scale(0.98);
}

.hero-btn-secondary {
  background: transparent;
  color: rgba(234, 228, 217, 0.50);
  padding: 1.05rem 0.25rem;
  font-size: 0.60rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 0;
  position: relative;
  transition: color 0.38s var(--expo);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.hero-btn-secondary::after {
  content: '';
  position: absolute;
  bottom: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: rgba(183, 147, 88, 0.6);
  transition: width 0.45s var(--expo);
}

.hero-btn-secondary:hover {
  color: rgba(234, 228, 217, 0.90);
}

.hero-btn-secondary:hover::after {
  width: 100%;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(234, 228, 217, 0.5);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
}

.hero-scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(234, 228, 217, 0.4), transparent);
}


/* ══ 6. CATEGORY NAV — Green glass pill ══════════════════════════════════ */

@keyframes cat-nav-inner-reveal {
  from {
    opacity: 0;
    transform: translateY(-10px) scaleX(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleX(1);
  }
}

#cat-nav {
  width: 100%;
  background: transparent;
  padding: 0.5rem 0;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 400;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

#cat-nav.is-pinned {
  position: fixed;
  top: 72px;
  left: 0;
  width: 100vw;
  padding: 0.6rem 0;
  background: transparent;
}

/* Green glass pill — matches green atmospheric body */
#cat-nav.is-pinned .cat-nav-inner {
  background: rgba(18, 28, 22, 0.85);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-radius: 9999px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 8px 24px -4px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  animation: cat-nav-inner-reveal 0.45s var(--expo) forwards;
}

.cat-nav-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  width: fit-content;
  gap: 0;
  padding: 0.85rem 2rem;
  margin: 0;
  position: relative;
  pointer-events: auto;
  transition:
    background 0.45s var(--expo),
    box-shadow 0.45s var(--expo),
    border-radius 0.45s var(--expo);
}

.cat-nav-inner::after {
  display: none;
}

.cat-btn {
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid transparent;
  color: rgba(234, 228, 217, 0.50);
  font-family: 'Inter', sans-serif;
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.55rem 1.4rem;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.35s var(--expo), border-bottom-color 0.3s ease;
}

.cat-btn:hover {
  color: rgba(234, 228, 217, 0.85);
}

.cat-btn.active {
  color: rgba(234, 228, 217, 0.97);
  border-bottom-color: var(--c-gold);
}

.cat-btn::before,
.cat-btn::after {
  display: none;
}


/* ══ 7. MENU BODY ═══════════════════════════════════════════════════════ */

.menu-main-wrapper {
  max-width: 1040px;
  margin: 0 auto;
  display: block;
  padding: 5rem 40px 0;
  position: relative;
  z-index: 20;
}

#menu-body {
  position: relative;
  flex-grow: 1;
  padding-top: 0;
  padding-bottom: 3rem;
  min-width: 0;
}


/* ══ 8. CATEGORY GROUPS — Scroll anchors ═════════════════════════════════ */

.category-group {
  margin-bottom: 5.5rem;
  scroll-margin-top: 160px;
  /* navbar + cat-nav height clearance */
}

.category-group:last-child {
  margin-bottom: 3rem;
}

/* Decorative divider between category groups */
.category-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0 0;
  margin-bottom: 4.5rem;
  position: relative;
}

.category-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.category-divider-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(183, 147, 88, 0.35);
  box-shadow: 0 0 8px rgba(183, 147, 88, 0.20);
  flex-shrink: 0;
}


/* ══ 9. MENU SECTIONS ════════════════════════════════════════════════════ */

.menu-section {
  padding: 0 0 3rem 0;
  border-bottom: none;
  position: relative;
  z-index: 1;
}

.menu-section:last-child {
  padding-bottom: 0;
}

.menu-container {
  max-width: none;
  margin: 0;
  padding: 0;
}


/* ══ 10. SECTION HEADERS ═════════════════════════════════════════════════ */

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
}

/* Subtle shimmer line on the bottom border */
.section-header::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -1px;
  left: 0;
  background: linear-gradient(90deg,
      var(--c-gold) 0%,
      rgba(183, 147, 88, 0.55) 30%,
      rgba(183, 147, 88, 0.20) 60%,
      transparent 100%);
  background-size: 200% 100%;
  animation: shimmerLine 6s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.8s ease;
  transform-origin: left;
}

.section-header.is-visible::after {
  opacity: 1;
}

@keyframes shimmerLine {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.section-kicker {
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(183, 147, 88, 0.90);
  opacity: 1;
  margin-bottom: 0.55rem;
}

.section-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--c-dark);
}

.section-title em {
  font-style: italic;
  color: var(--c-editorial);
}

.section-count {
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(183, 147, 88, 0.50);
  white-space: nowrap;
  padding-bottom: 0.2rem;
}

/* Ghost watermark letter */
.section-watermark {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.03em;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.02);
  color: transparent;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
}


/* ══ 11. MENU GRID ═══════════════════════════════════════════════════════ */

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  row-gap: 0;
  /* Separator between columns via box-shadow on right-column items */
}


/* ══ 12. MENU ITEMS ══════════════════════════════════════════════════════ */

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.25rem 1.25rem;
  padding: 1.35rem 1.25rem;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  border-radius: 10px;
  position: relative;
  transition: background 0.35s var(--expo), transform 0.35s var(--expo), border-color 0.35s var(--expo);
}

/* Right column items get a subtle left border as column separator */
.menu-grid>.menu-item:nth-child(even) {
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 0 10px 10px 0;
}

.menu-grid>.menu-item:nth-child(odd) {
  border-radius: 10px 0 0 10px;
}

.menu-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(234, 228, 217, 0.0);
  transition: border-color 0.35s var(--expo);
  pointer-events: none;
}

.menu-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* 2-col: remove border on second-to-last if it's on the left */
@media (min-width: 861px) {
  .menu-grid .menu-item:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

/* Thumbnail support - Refined grid for better balance with variants */
.menu-item:has(.item-thumb) {
  grid-template-columns: 88px 1fr minmax(90px, auto);
  gap: 0.25rem 1.1rem;
}

.item-thumb {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  position: relative;
}

.item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.15);
  transition: transform 0.6s var(--expo);
  will-change: transform;
}

.menu-item:hover .item-thumb img {
  transform: scale(1.22);
}

.item-dots {
  display: none;
}

.item-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.item-name {
  font-family: 'Instrument Serif', serif;
  font-size: 1.18rem;
  letter-spacing: 0;
  color: var(--c-dark);
  margin: 0;
  line-height: 1.2;
  transition: color 0.35s var(--expo);
  white-space: normal;
}

.item-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.77rem;
  font-weight: 400;
  color: rgba(234, 228, 217, 0.50);
  line-height: 1.5;
  white-space: normal;
  transition: color 0.35s var(--expo);
  margin-top: 0.1rem;
}

.item-price {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  font-style: normal;
  color: var(--c-gold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  text-align: right;
  padding-top: 0.1rem;
}

.item-price-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(183, 147, 88, 0.60);
  text-transform: uppercase;
  text-align: right;
  margin-top: 0.1rem;
}

/* ── VARIANT SYSTEM ────────────────────────────────────────────── */

.variant-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  width: 100%;
}

.variant-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.0;
}

/* Compact layout for variants — label and price on the same line */
.variant-item--compact {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.3rem;
  min-width: 0;
}

.variant-label {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--c-gold);
  opacity: 0.72;
  transition: opacity 0.4s var(--expo);
}

.variant-price {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c-gold);
}

.variant-separator {
  opacity: 0.3;
  color: var(--c-gold);
  font-size: 0.7rem;
}

.menu-item:hover .variant-label {
  opacity: 1;
}

/* Hover states */
.menu-item:hover {
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: transparent;
  transform: translateY(-2px);
}

.menu-item:hover::after {
  border-color: rgba(234, 228, 217, 0.06);
}

.menu-item:hover .item-name {
  color: var(--c-gold);
}

.menu-item:hover .item-desc {
  color: rgba(234, 228, 217, 0.90);
}


/* ══ 13. BADGES ══════════════════════════════════════════════════════════ */

.item-badges {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(234, 228, 217, 0.65);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  background: transparent;
  border: none;
}

.badge::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--c-gold);
  opacity: 0.7;
}

.badge-new,
.badge-veg,
.badge-hot {
  /* Inherits uniform editorial system */
}


/* ══ 14. REVEAL ANIMATIONS ═══════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s var(--expo),
    transform 0.6s var(--expo);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

/* Stagger for grid items */
.menu-grid .reveal:nth-child(1) {
  transition-delay: 0.00s;
}

.menu-grid .reveal:nth-child(2) {
  transition-delay: 0.04s;
}

.menu-grid .reveal:nth-child(3) {
  transition-delay: 0.08s;
}

.menu-grid .reveal:nth-child(4) {
  transition-delay: 0.12s;
}

.menu-grid .reveal:nth-child(5) {
  transition-delay: 0.16s;
}

.menu-grid .reveal:nth-child(6) {
  transition-delay: 0.20s;
}

.menu-grid .reveal:nth-child(7) {
  transition-delay: 0.06s;
}

.menu-grid .reveal:nth-child(8) {
  transition-delay: 0.10s;
}


/* ══ 15. PDF SECTION ═════════════════════════════════════════════════════ */

#pdf-section {
  padding: 5rem 2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

.pdf-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(234, 228, 217, 0.55);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.pdf-label::before,
.pdf-label::after {
  content: '';
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.pdf-heading {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-dark);
  margin-bottom: 0.75rem;
}

.pdf-heading em {
  font-style: italic;
  color: var(--c-editorial);
}

.pdf-sub {
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(234, 228, 217, 0.65);
  margin-bottom: 2.5rem;
}

.pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: var(--c-primary);
  border: none;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 9999px;
  transition: all 0.4s var(--expo);
  position: relative;
  overflow: hidden;
}

.pdf-btn:hover {
  background: #1C3328;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.3);
}

.pdf-btn svg {
  flex-shrink: 0;
}


/* ══ 16. FOOTER — Green atmospheric ══════════════════════════════════════ */

footer {
  padding: 3.5rem 4rem 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.01);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  position: relative;
}

.footer-logo {
  font-family: 'Instrument Serif', serif;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--c-dark);
  text-decoration: none;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.footer-link {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(234, 228, 217, 0.75);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateY(-2px);
}

.footer-copy {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(234, 228, 217, 0.35);
}


/* ══ 18. MODAL / BOTTOM SHEET ═══════════════════════════════════════════ */

#menu-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s var(--expo), visibility 0.5s;
}

#menu-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 11, 0.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.modal-content {
  position: relative;
  background: var(--m-bg-deep);
  border: 1px solid rgba(234, 228, 217, 0.08);
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.5s var(--expo);
}

#menu-modal.is-open .modal-content {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--c-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s var(--expo);
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.modal-image-wrapper {
  width: 100%;
  aspect-ratio: 4/3;
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  overflow: hidden;
}

.modal-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-body {
  padding: 2rem 2.5rem;
}

.modal-title {
  font-family: 'Instrument Serif', serif;
  font-size: 2rem;
  color: var(--c-dark);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.modal-price {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-gold);
  margin-bottom: 1.25rem;
}

.modal-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(234, 228, 217, 0.75);
  margin-bottom: 1.5rem;
}

.modal-attr-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-attr-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal-attr-heading {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(234, 228, 217, 0.4);
}

.modal-attr-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.modal-attr-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.65rem;
  color: rgba(234, 228, 217, 0.85);
  transition: background 0.3s var(--expo);
}

.modal-attr-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.modal-attr-icon {
  font-size: 0.95rem;
  color: var(--c-gold);
  opacity: 0.9;
}

/* ══ 19. CUSTOM CURSOR ═══════════════════════════════════════════════════ */

#custom-cursor {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(183, 147, 88, 0.80);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: normal;
  transition: width 0.2s, height 0.2s;
}

#custom-cursor-ring {
  position: fixed;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(183, 147, 88, 0.40);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}


/* ══ 20. SCROLLBAR ═══════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (max-width: 1024px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .hero-content {
    padding-bottom: 5rem;
    gap: 1.75rem;
  }

  .menu-main-wrapper {
    padding: 4rem 28px 0;
  }

  #cat-nav {
    position: sticky;
    top: 72px;
    margin-bottom: 3rem;
  }

  .cat-nav-inner {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding: 0.75rem 1.5rem;
    margin: 0;
  }

  .cat-nav-inner::-webkit-scrollbar {
    display: none;
  }

  .cat-btn {
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    padding: 0.95rem 1.4rem !important;
    min-height: 48px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    color: rgba(234, 228, 217, 0.45) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
  }

  .cat-btn.active {
    color: rgba(244, 240, 232, 0.95) !important;
    font-weight: 600 !important;
    border-bottom-color: rgba(183, 147, 88, 0.85) !important;
  }

  .menu-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Kill column separators on single-col layout */
  .menu-grid>.menu-item:nth-child(even),
  .menu-grid>.menu-item:nth-child(odd) {
    border-left: none;
    border-radius: 10px;
  }
}

@media (max-width: 860px) {
  .menu-grid {
    grid-template-columns: 1fr;
  }

  .menu-grid .menu-item:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .menu-grid>.menu-item:nth-child(even),
  .menu-grid>.menu-item:nth-child(odd) {
    border-left: none;
    border-radius: 10px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — SMARTPHONE (max-width: 767px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── NAVBAR ── */
  #navbar {
    position: absolute !important;
    top: 0 !important;
    padding: 1rem 1.25rem;
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  #navbar.is-scrolled {
    position: absolute !important;
    /* Evita colar na tela rolando */
    top: 0 !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: transparent !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  #navbar .nav-logo {
    font-size: 1.3rem;
    flex: unset;
  }

  .nav-menu {
    display: none;
  }

  .nav-actions {
    gap: 0.85rem;
    flex: unset;
  }

  .nav-cta {
    display: none;
  }

  .nav-hamburger {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
  }

  /* Scrolled state: dark icon */
  .is-scrolled .nav-hamburger {
    color: var(--c-dark);
  }

  .is-scrolled .nav-logo {
    color: var(--c-brand-muted) !important;
  }

  /* Over hero: white text */
  #navbar.nav-light .nav-logo {
    color: #fff;
  }

  #navbar.nav-light .nav-hamburger {
    color: rgba(255, 255, 255, 0.95);
  }

  /* ── MOBILE MENU ── */
  #mobile-menu {
    gap: 2rem;
    padding: 2rem;
  }

  .mobile-link {
    font-size: 2.6rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .mobile-close {
    top: 1.25rem;
    right: 1.25rem;
    font-size: 1.4rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ══════════════════════════════════════════════════════════════
     HERO — Premium Mobile (Segunda versão lapidada)
     Estrutura preservada: centralizado, coluna, canvas fullscreen.
     Apenas tamanhos, espaçamentos e hierarquia refinados.
     ══════════════════════════════════════════════════════════════ */
  #hero-viewport {
    height: 100svh !important;
    min-height: 600px;
    max-height: 920px;
  }

  /* Container: centralizado c/ clearance da navbar no topo */
  .hero-content {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: max(4.75rem, 68px) 1.75rem 2rem !important;
    gap: 0 !important;
  }

  /* Kicker: letter-spacing calibrado (era 0.5em — muito aberto) */
  .hero-kicker {
    font-size: 0.54rem !important;
    letter-spacing: 0.30em !important;
    gap: 0.65rem !important;
    margin-bottom: 1rem !important;
    justify-content: center !important;
    color: var(--c-editorial) !important;
  }
  .kicker-line {
    width: 18px !important;
  }

  /* Headline: ligeiramente maior, line-height equilibra as duas linhas */
  .hero-title {
    font-size: clamp(3.4rem, 12.5vw, 4.6rem) !important;
    line-height: 0.97 !important;
    letter-spacing: -0.033em !important;
    text-align: center !important;
    color: rgba(244, 242, 237, 0.97) !important;
    margin-bottom: 0 !important;
  }
  .hero-title em {
    color: var(--c-editorial) !important;
    -webkit-text-fill-color: var(--c-editorial) !important;
  }

  /* Loader */
  .loader { background: var(--c-bg) !important; }
  .loader-text { color: var(--c-accent) !important; }
  .loader-tagline { color: var(--c-gold) !important; }

  /* Separador: margens menores, mais sutil */
  .hero-title-sep {
    display: block !important;
    width: 32px !important;
    height: 1px !important;
    background: rgba(194, 180, 154, 0.36) !important;
    margin: 0.95rem auto !important;
    border: none !important;
  }

  /* Subtítulo: line-height mais aberto, margem inferior menor */
  .hero-sub {
    font-size: 0.86rem !important;
    line-height: 1.74 !important;
    max-width: 280px !important;
    text-align: center !important;
    margin: 0 auto 1.65rem !important;
    color: rgba(194, 180, 154, 0.72) !important;
  }
  .desktop-text { display: none !important; }
  .mobile-text  { display: inline !important; }

  /* CTA wrap: segunda versão em coluna, gap calibrado */
  .hero-cta-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.55rem !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  /* Botão primário: font maior, padding proporcional */
  .hero-btn-primary {
    padding: 0.88rem 2.4rem !important;
    font-size: 0.60rem !important;
    letter-spacing: 0.20em !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  /* CTA secundário: intencional, dim mas legível */
  .hero-btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.57rem !important;
    letter-spacing: 0.18em !important;
    color: rgba(194, 180, 154, 0.50) !important;
    padding: 0.6rem 0.5rem !important;
    white-space: nowrap !important;
  }

  /* Canvas fullscreen cinematic */
  #video-frame {
    width: 100vw !important;
    height: 100svh !important;
    max-width: none !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.65 !important;
    mix-blend-mode: screen !important;
    aspect-ratio: auto !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  #hero-pin-wrapper::after { height: 90px !important; }

  /* Scrim superior — legibilidade da navbar */
  #hero-viewport::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 130px;
    background: linear-gradient(to bottom,
      rgba(8, 20, 12, 0.85) 0%,
      rgba(8, 20, 12, 0.35) 55%,
      transparent 100%);
    z-index: 4;
    pointer-events: none;
  }

  /* Scroll indicator */
  .hero-scroll {
    display: flex !important;
    bottom: clamp(1.5rem, 4svh, 2.5rem) !important;
    color: rgba(194, 180, 154, 0.35) !important;
    font-size: 0.42rem !important;
    letter-spacing: 0.36em !important;
    gap: 0.45rem !important;
  }
  .hero-scroll-line {
    height: 26px !important;
    background: linear-gradient(to bottom, rgba(194, 180, 154, 0.32), transparent) !important;
  }

  #hero-bridge {
    display: none;
  }

  #custom-cursor,
  #custom-cursor-ring {
    display: none;
  }

  /* ── MENU WRAPPER ── */
  .menu-main-wrapper {
    padding: 2.5rem 18px 0;
  }

  #menu-body {
    padding-bottom: 4rem;
  }

  /* ── CATEGORY NAV ── */
  #cat-nav {
    position: relative !important;
    top: auto !important;
    margin-bottom: 2rem !important;
  }

  #cat-nav.is-pinned {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: 400 !important;
    background: linear-gradient(180deg,
      rgba(12, 22, 16, 0.97) 0%,
      rgba(14, 27, 19, 0.94) 100%) !important;
    backdrop-filter: blur(24px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow:
      0 1px 0 0 rgba(183, 147, 88, 0.12),
      0 8px 32px -8px rgba(0, 0, 0, 0.6) !important;
  }

  /* Gold hairline at the bottom of the pinned bar */
  #cat-nav.is-pinned::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 8% !important;
    right: 8% !important;
    height: 1px !important;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(183, 147, 88, 0.25) 20%,
      rgba(183, 147, 88, 0.4) 50%,
      rgba(183, 147, 88, 0.25) 80%,
      transparent 100%) !important;
  }

  /* No mobile: nav-inner é flat e ocupa toda a largura — sem cápsula/cilindro */
  #cat-nav.is-pinned .cat-nav-inner {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    animation: none !important;
  }

  .cat-nav-inner {
    padding: 0 16px;
    margin: 0;
    gap: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  }

  .cat-nav-inner::-webkit-scrollbar {
    display: none;
  }

  .cat-btn {
    padding: 0.95rem 1.4rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.14em !important;
    white-space: nowrap !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
    color: rgba(234, 228, 217, 0.45) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.3s ease, border-bottom-color 0.3s ease !important;
    position: relative !important;
  }

  .cat-btn.active {
    color: rgba(244, 240, 232, 0.95) !important;
    font-weight: 600 !important;
    border-bottom-color: rgba(183, 147, 88, 0.85) !important;
  }

  /* No mobile: linha full-width, flush com borda inferior da barra */
  .cat-btn::after {
    bottom: -1px;
    left: 0;
    right: 0;
  }

  /* ── CATEGORY GROUPS ── */
  .category-group {
    margin-bottom: 3rem;
    scroll-margin-top: 130px;
  }

  .category-divider {
    margin-bottom: 2rem;
    padding: 0;
    gap: 1.25rem;
  }

  /* ── SECTIONS ── */
  .menu-section {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 0 2rem 0 !important;
  }

  .menu-section:last-child {
    padding-bottom: 0 !important;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    flex-wrap: nowrap;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .section-header>div {
    flex: 1;
    width: 100%;
  }

  .section-watermark {
    display: none;
  }

  .section-count {
    display: inline;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    opacity: 0.45;
    align-self: flex-end;
    margin-top: -0.25rem;
  }

  .section-kicker {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: rgba(183, 147, 88, 0.90);
    opacity: 1;
    margin-bottom: 0.6rem;
  }

  .section-title {
    font-size: clamp(2.8rem, 11vw, 3.8rem);
    line-height: 1.0;
    letter-spacing: -0.03em;
  }

  /* ── ITEMS — card layout per reference ───────────────────────
     Grid goes to strict 3-column (thumb|body|price) for clean read.
     ───────────────────────────────────────────────────────────── */
  .menu-grid {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  /* ── 1. CORE CARD ── */
  .menu-item {
    display: grid !important;
    grid-template-columns: 140px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto;
    column-gap: 16px !important;
    align-items: start !important;
    padding: 20px 4px !important;
    min-height: 140px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 0 !important;
  }

  .menu-item:not(:has(.item-thumb)) {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
  }

  .menu-item:last-child {
    border-bottom: none !important;
  }

  .menu-item:hover {
    transform: none !important;
    background: transparent !important;
  }

  /* ── 2. THUMBNAIL ── */
  .item-thumb {
    width: 140px !important;
    height: 140px !important;
    border-radius: 8px !important;
    grid-row: 1 / span 4 !important;
    grid-column: 1 !important;
    overflow: hidden !important;
    margin: 0 !important;
    flex: none !important;
  }

  .item-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transform: none !important;
  }

  .item-body {
    display: contents !important;
    /* Forces children into the parent grid */
  }

  /* ── 3. NAME ── */
  .item-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 1.18rem !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    font-family: 'Instrument Serif', serif !important;
    color: rgba(244, 240, 232, 0.95) !important;
  }

  .menu-item:not(:has(.item-thumb)) .item-name {
    grid-column: 1 !important;
  }

  /* ── 4. PRICE ── */
  .menu-item>div:last-child {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 0 5px 0 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
  }

  .menu-item:not(:has(.item-thumb))>div:last-child {
    grid-column: 1 !important;
  }

  .item-price {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: rgba(183, 147, 88, 1) !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
  }

  .item-price-sub {
    font-size: 0.72rem !important;
    margin-top: 0.2rem !important;
    letter-spacing: 0.08em !important;
    color: rgba(183, 147, 88, 0.65) !important;
    text-transform: uppercase !important;
  }

  /* ── 4b. VARIANT SYSTEM — force left-align on mobile ──
     Variants are right-aligned by default (desktop price column).
     On mobile the price lives in column 2, so everything must align left. */
  .item-price {
    text-align: left !important;
  }

  .variant-list {
    align-items: flex-start !important;
    width: 100% !important;
    gap: 0.15rem !important;
  }

  .variant-item {
    align-items: flex-start !important;
    text-align: left !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }

  .variant-item--compact {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }

  .variant-label {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    opacity: 0.80 !important;
    white-space: nowrap !important;
  }

  .variant-price {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  .variant-separator {
    font-size: 0.75rem !important;
    opacity: 0.35 !important;
  }

  /* ── 5. DESCRIPTION ── */
  .item-desc {
    grid-column: 2 !important;
    grid-row: 3 !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    margin: 5px 0 0 !important;
    color: rgba(234, 228, 217, 0.52) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .menu-item:not(:has(.item-thumb)) .item-desc {
    grid-column: 1 !important;
  }

  /* ── 6. BADGES ── */
  .item-badges {
    grid-column: 2 !important;
    grid-row: 4 !important;
    margin-top: 2px !important;
    gap: 0.4rem !important;
  }

  .menu-item:not(:has(.item-thumb)) .item-badges {
    grid-column: 1 !important;
  }

  /* Circulares vazados conforme a referência fotográfica */
  .attr-badge {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }

  .attr-badge iconify-icon {
    font-size: 0.75rem !important;
  }

  .attr-label {
    display: none !important;
    /* Remove o texto para usar apenas os círculos */
  }

  /* ── ARRASTÕES DE LINHAS FANTASMAS — Kill it ──
     Desliga grid marks (horizontais/verticais) no mobile, 
     linhas decoradoras de scroll formadas e divisores de header/footer errantes.
     Abaixo também morre o Shimmer Line (linha verde de varredura infinita
     sob os títulos das Categorias/Section Headers, L943). */
  #menu-body::after,
  #menu-body::before,
  .menu-main-wrapper::after,
  .menu-main-wrapper::before,
  #hero-bg-cols,
  .hero-grid-bg,
  .hero-col,
  .scroll-indicator-wrap,
  #scroll-progress-line,
  #cat-nav::after,
  #cat-nav::before,
  #hero-left::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    background: transparent !important;
    animation: none !important;
    /* Trava imediatamente os infinite shimmers */
  }

  /* Desliga o texto animado em degradê nos títulos das seções (ex: "Clássicos da Manhã") */
  .section-title {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--c-dark) !important;
    color: var(--c-dark) !important;
  }

  .section-title em {
    -webkit-text-fill-color: var(--c-editorial) !important;
    color: var(--c-editorial) !important;
  }

  /* Also kill the menu-item hover pseudo border */
  .menu-item::after {
    display: none !important;
  }

  /* ── PDF SECTION ── */
  #pdf-section {
    padding: 5rem 1.5rem 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .pdf-label {
    font-size: 0.48rem;
    letter-spacing: 0.40em;
    margin-bottom: 1.5rem;
  }

  .pdf-heading {
    font-size: clamp(1.65rem, 7.5vw, 2.2rem);
    line-height: 1.05;
    margin-bottom: 1.25rem;
  }

  .pdf-sub {
    font-size: 0.82rem;
    line-height: 1.6;
    margin-bottom: 2.75rem;
    max-width: 280px;
  }

  .pdf-btn {
    padding: 1rem 3rem;
    font-size: 0.6rem;
  }

  /* ── FOOTER ── */
  footer {
    padding: 3.5rem 1.5rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.75rem;
  }

  .footer-logo {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
  }

  .footer-links {
    gap: 1.25rem;
  }

  .footer-link {
    width: 3rem;
    height: 3rem;
  }

  .footer-copy {
    font-size: 0.52rem;
    margin-top: 0.5rem;
  }

  /* ── BOTTOM SHEET (MODAL OVERRIDE) ── */
  #menu-modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal-content {
    border-radius: 24px 24px 0 0;
    max-width: 100%;
    max-height: 85vh;
    border-bottom: none;
    border-left: none;
    border-right: none;
    transform: translateY(100%);
  }

  #menu-modal.is-open .modal-content {
    transform: translateY(0);
  }

  .modal-content::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 20;
  }

  .modal-close {
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(8, 16, 11, 0.5);
    backdrop-filter: blur(4px);
  }

  .modal-body {
    padding: 2rem 1.5rem;
  }

  .modal-title {
    font-size: 1.8rem;
  }

  /* ── 5. PADRONIZAÇÃO DO FUNDO MOBILE ──
     Devolvemos a luminosidade nativa do PC removendo a trava de noise/glow. */
  body,
  #menu-body,
  .menu-main-wrapper {
    background: transparent !important;
  }

  body::before,
  body::after,
  html::before,
  html::after,
  #global-grain,
  .hero-grain,
  #menu-orb-1,
  #menu-orb-2,
  #lateral-vignette {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
    content: none !important;
    background: none !important;
  }

  /* ═══ MOBILE PERFORMANCE KILL LIST ═══════════════════════════════
     Extra decorative elements to hide/stop on mobile for fluidity.
     Zero visual impact — user won't notice any difference.
     ═══════════════════════════════════════════════════════════════ */

  /* Noise overlay — full-viewport, fixed-position SVG texture */
  .noise-overlay {
    display: none !important;
  }

  /* Particle canvas — ambient JS canvas particles, hidden anyway */
  #particle-canvas {
    display: none !important;
  }

  /* Product glow/shadow — decorative radial gradients behind hero frame */
  .product-glow,
  .product-shadow {
    display: none !important;
  }

  /* Hero text scrim — subtle gradient, barely visible on mobile */
  .hero-text-scrim {
    display: none !important;
  }

  /* Hero video overlay — remove backdrop-filter (expensive on mobile GPU) */
  .hero-video-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Custom cursor — never visible on touch devices */
  #custom-cursor,
  #custom-cursor-ring {
    display: none !important;
  }

  /* Category divider dot — kill infinite pulse animation */
  .category-divider-dot {
    animation: none !important;
  }

  /* Category divider line shimmer — kill infinite sweep */
  .category-divider-line::after {
    animation: none !important;
  }

  /* Section kicker line shimmer */
  .section-kicker::after {
    animation: none !important;
  }

  /* PDF section beam */
  .pdf-btn .s4-beam {
    display: none !important;
  }

  /* Nav CTA beam — too small to notice on mobile */
  .nav-cta .s4-beam {
    display: none !important;
  }

  /* Remove will-change from non-animating elements */
  .word-inner {
    will-change: auto !important;
  }

  /* Modal backdrop — remove blur filter on mobile */
  .modal-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.65) !important;
  }

  /* Modal close button — remove backdrop-filter */
  .modal-close {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Increase hero background size to fix color divergence instead of hiding it */
  .hero-bg {
    height: 150vh !important;
    background: radial-gradient(ellipse at 50% 40%, #0E1E12 0%, #091410 50%, #050C07 100%) !important;
  }

  /* Aplica background solid sem borders ou box-shadow em todos os elementos de categoria e wrapper */
  .category-group {
    background: transparent !important;
  }

  /* ── REVEALS — force visible on mobile ──
     The IntersectionObserver + GSAP loader chain can fail on mobile,
     leaving items with opacity:0 and clip-path:inset(0 0 100% 0).
     Force everything visible immediately on mobile. */
  .reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
  }

  /* ── 8. MOBILE HIERARCHY & NAVIGATION REFINEMENT ──
     Requested by User: Make hierarchy cleaner, stronger, more professional. */

  /* Cat-nav pinning is handled by JS .is-pinned class — see cat-nav.is-pinned above */
  .cat-nav-inner {
    padding: 0 12px !important;
    margin: 0 !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    border-radius: 0 !important;
    /* Soft edges for scroll */
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) !important;
  }

  .cat-nav-inner::-webkit-scrollbar {
    display: none !important;
  }

  .cat-btn {
    padding: 0.95rem 1.4rem !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
    min-height: 48px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    color: rgba(234, 228, 217, 0.45) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
  }

  .cat-btn.active {
    color: rgba(244, 240, 232, 0.95) !important;
    font-weight: 600 !important;
    border-bottom-color: rgba(183, 147, 88, 0.85) !important;
  }

  /* Defensively wipe out any second-layer subcategory navigation rows (if added) */
  .sub-cat-nav,
  .subcategory-nav {
    display: none !important;
  }

  /* Subcategories become strong section headings */
  .menu-section {
    padding-bottom: 2.2rem !important;
    /* Compact but breathable rhythm */
  }

  .menu-section:last-child {
    padding-bottom: 0 !important;
  }

  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding-bottom: 1.35rem !important;
    margin-bottom: 1.75rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .section-title {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.0 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.95) !important;
  }

  /* Eyebrow Labels */
  .section-kicker {
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.30em !important;
    text-transform: uppercase !important;
    color: rgba(183, 147, 88, 0.90) !important;
    margin-bottom: 0.3rem !important;
    opacity: 1 !important;
  }

  /* Item count */
  .section-count {
    display: inline !important;
    font-size: 0.52rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    color: rgba(183, 147, 88, 0.45) !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
  }

  .menu-grid .reveal:nth-child(n) {
    transition-delay: 0s;
  }

  /* Override clip-path reveal from components.css */
  .menu-item.reveal {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .menu-item.reveal .item-body {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Ensure all menu item children are visible */
  .menu-item .item-thumb,
  .menu-item .item-thumb img,
  .menu-item .item-body,
  .menu-item .item-name,
  .menu-item .item-desc,
  .menu-item .item-price,
  .menu-item .item-badges {
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
    transform: none !important;
  }

  /* Section headers also need to be visible */
  .section-header.reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Mantém o efeito da linha dourada visível no mobile */
  .section-header::after {
    opacity: 1 !important;
  }

  .section-header .section-kicker {
    opacity: 1 !important;
    animation: none !important;
  }

  /* Base selector wrapper (tapioca/cuscuz toggle) */
  .reveal.base-selector-wrapper {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — LARGE DESKTOP (min-width: 992px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {

  /* 1. Core Structure */
  .menu-main-wrapper {
    max-width: 1180px;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* 2. Product Row Expansion */
  .menu-item {
    padding: 1.5rem 1.35rem;
  }

  /* 3. Thumbnails */
  .item-thumb {
    width: 96px;
    height: 96px;
  }

  .menu-item:has(.item-thumb) {
    grid-template-columns: 96px 1fr auto;
    gap: 0.25rem 1.2rem;
  }

  /* 4. Typography Hierarchy */
  .item-name {
    font-size: 1.25rem;
  }

  .item-price {
    font-size: 1.05rem;
  }

  .item-desc {
    font-size: 0.82rem;
  }

  .cat-btn {
    font-size: 0.72rem;
  }

  /* 5. Section Headers */
  .section-title {
    font-size: clamp(1.9rem, 2.8vw, 2.7rem);
  }

  .section-header {
    margin-bottom: 2.75rem;
    padding-bottom: 1.6rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — COMPACT PHONE (max-width: 430px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 430px) {
  .hero-title {
    font-size: clamp(2.8rem, 13vw, 3.8rem);
    line-height: 0.92;
  }

  .hero-title-sep {
    margin: 1rem auto;
    width: 28px;
  }

  .hero-sub {
    font-size: 0.75rem;
    max-width: 240px;
    margin: 0 auto 1.4rem;
  }

  .hero-content {
    padding-top: 5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hero-btn-primary {
    padding: 0.9rem 2.4rem;
    font-size: 0.55rem;
  }

  #video-frame {
    width: 95vw;
    max-width: 380px;
    top: 98%;
  }

  .hero-scroll {
    bottom: 1.5rem;
  }

  .nav-logo {
    font-size: 1.2rem;
  }

  .menu-main-wrapper {
    padding: 2rem 16px 0;
  }

  #cat-nav {
    top: 0;
    margin-bottom: 2rem;
    padding: 0;
  }

  .cat-nav-inner {
    padding: 0 12px;
    margin: 0;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0;
    border-radius: 0 !important;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  }

  .cat-btn {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    padding: 0.9rem 1.2rem;
    min-height: 44px;
    border-radius: 0;
    font-weight: 500;
    color: rgba(234, 228, 217, 0.45);
    border: none;
    border-bottom: 2px solid transparent;
  }

  .cat-btn.active {
    color: rgba(244, 240, 232, 0.95);
    font-weight: 600;
    border-bottom-color: rgba(183, 147, 88, 0.85);
  }

  /* Fine-tune section title for very small screens */
  .section-title {
    font-size: clamp(2.2rem, 9vw, 3rem) !important;
  }

  /* Product cards on very small screens */
  .menu-item {
    grid-template-columns: 120px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    min-height: 120px !important;
    padding: 18px 0 !important;
  }

  .item-thumb {
    width: 120px !important;
    height: 120px !important;
  }

  .item-name {
    font-size: 1.08rem !important;
    margin: 0 0 5px 0 !important;
  }

  .item-price {
    font-size: 1rem !important;
  }

  .item-desc {
    font-size: 0.78rem !important;
    -webkit-line-clamp: 2 !important;
  }

  footer {
    padding: 2.5rem 1.25rem;
    gap: 1.25rem;
  }

  .mobile-link {
    font-size: 2.2rem;
  }
}

/* ---------------------------------------------------------------------------
   PREMIUM SEGMENTED CONTROL (TAPIOCA/CUSCUZ)
   --------------------------------------------------------------------------- */

.base-selector-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  padding: 1.1rem 1.35rem !important;
  margin-bottom: 2.5rem !important;
  margin-top: 0 !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
}

.base-selector-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  color: rgba(183, 147, 88, 0.85) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.base-selector {
  display: inline-flex !important;
  background-color: rgba(10, 20, 14, 0.80) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.03) !important;
  flex-shrink: 0 !important;
}

.base-toggle-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 0.52rem 1.75rem !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  color: rgba(234, 228, 217, 0.45) !important;
  cursor: pointer !important;
  transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: 'Inter', sans-serif !important;
  outline: none !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.base-toggle-btn:hover {
  color: rgba(234, 228, 217, 0.75) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Active Toggle: gold pill — matches the editorial gold accent system */
.base-toggle-btn.active {
  background: rgba(183, 147, 88, 0.15) !important;
  border-color: rgba(183, 147, 88, 0.40) !important;
  box-shadow: 0 2px 10px rgba(183, 147, 88, 0.10) !important;
  color: rgba(183, 147, 88, 0.95) !important;
  font-weight: 600 !important;
}

@media (max-width: 767px) {
  .base-selector-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1.1rem 1.1rem !important;
  }

  .base-selector {
    display: flex !important;
    width: 100% !important;
  }

  .base-toggle-btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 0.65rem 0.75rem !important;
    letter-spacing: 0.12em !important;
  }
}

/* To hide thumbnails when cuscuz is toggled */
.menu-item.thumb-hidden {
  grid-template-columns: 1fr auto !important;
}

.menu-item.thumb-hidden .item-thumb {
  display: none !important;
}

@media (max-width: 767px) {

  /* On mobile, thumb-hidden reverts to single column with no price column */
  .menu-item.thumb-hidden {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE NUCLEAR OVERRIDE — GUARANTEE PRODUCT VISIBILITY
   ═══════════════════════════════════════════════════════════════════════════
   This block sits at the VERY END of the last CSS file loaded for the menu
   page (menu.css loads after components.css). Combined with !important,
   these rules have the highest effective priority in the cascade.
   
   Problem: components.css applies clip-path: inset(0 0 100% 0) and 
   opacity: 0 via .reveal / .menu-item.reveal at the global level.
   The JS IntersectionObserver that adds .is-visible can fail on mobile.
   
   Solution: On mobile, skip all reveal animations entirely.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Force ALL reveals visible — items, headers, selectors */
  .reveal,
  .reveal.is-visible,
  .menu-item.reveal,
  .menu-item.reveal.is-visible,
  .section-header.reveal,
  .section-header.reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
  }

  /* Force all child content visible */
  .menu-item .item-thumb,
  .menu-item .item-thumb img,
  .menu-item .item-body,
  .menu-item .item-name,
  .menu-item .item-desc,
  .menu-item .item-price,
  .menu-item .item-price-sub,
  .menu-item .item-badges,
  .menu-item .badge,
  .section-count {
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  /* Kicker must always show */
  .section-kicker {
    opacity: 1 !important;
    animation: none !important;
  }

  /* Base selector fully visible */
  .base-selector-wrapper,
  .base-selector,
  .base-toggle-btn {
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
  }

  /* Variant elements visible and left-aligned — definitive override */
  .menu-item .variant-list,
  .menu-item .variant-item,
  .menu-item .variant-label,
  .menu-item .variant-price,
  .menu-item .variant-separator {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* ── VARIANT ALIGNMENT FINAL LOCK ──
     Overrides any inherited right-alignment from the desktop variant system.
     This must be at the END of the file to win the cascade. */
  .variant-list {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .variant-item,
  .variant-item--compact {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    flex-wrap: wrap !important;
  }

  .variant-label,
  .variant-price,
  .variant-separator {
    text-align: left !important;
  }

  .item-price,
  .item-price-sub {
    text-align: left !important;
  }
}