/* Home-specific adjustments */
/* (Core home layout presently handled by components.css) */

/* ── BREAKPOINT 390x844: Deslocar EXPLORE um pouco mais para baixo ── */
/* Focado especificamente no iPhone 12/13/14/15 Pro (390px wide, high resolution) */
@media (max-width: 390px) and (min-height: 840px) {
  #hero-viewport.is-mobile-stack .hero-scroll-wrapper {
    margin-top: 3.5rem !important; /* Aumenta o respiro abaixo do vídeo significativamente */
    padding-top: 1.5rem !important; /* Descer a palavra EXPLORE em relação ao topo do container */
    padding-bottom: 5rem !important; /* Empurra o conteúdo final mais para baixo na área segura lateral */
  }
}

/* ── INLINE GRID FIXES & PREMIUM MOBILE CAROUSELS ── */
.s3-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* ── MOBILE-DESTAQUE-HIDE: used in HTML but had no CSS definition ── */
.mobile-destaque-hide {
  display: none !important;
}

/* ── SECTION 2 DUAL COPY: desktop/mobile text toggle ── */
/* Mobile text hidden by default (desktop shows full copy) */
.s2-mobile-text {
  display: none;
}
@media (max-width: 767px) {
  .s2-desktop-text { display: none !important; }
  .s2-mobile-text { display: inline !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   TRUE MOBILE: 767px Scope
   ══════════════════════════════════════════════════════════════════════
   Fluid responsive system:
     320–374 px = small mobile
     375–429 px = standard mobile
     430–767 px = large mobile

   Strategy: base styles apply to 320–767px range.
   clamp() handles fluid scaling across all tiers.
   Only critical sub-breakpoints used for edge cases.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ═════════════════════════════════════════════════════════════════
     A. PERFORMANCE — Eliminate GPU-costly layers
     ═════════════════════════════════════════════════════════════════ */

  /* 1. Hero atmospheric layers — strip all */
  #hero-vig, #hero-warm, #hero-spotlight, #hero-bg-cols, #global-grain,
  #hero-depth, #hero-image-glow, .h-orb, .h-orb-1, .h-orb-2, .video-glow,
  .clube-orb-1, .clube-orb-2 {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  #hero-left::after {
    display: none !important;
  }

  #hero-viewport {
    background: #fdfbf7 !important;
    overflow: hidden !important;
    height: 100vh !important;
  }

  #hero-pin-wrapper {
    background: #fdfbf7 !important;
  }

  #hero-right {
    display: none !important;
  }

  /* Canvas: override inline sizing to fill expanding frame */
  #seq-canvas {
    width: 100% !important;
    height: 100% !important;
  }



  /* 3. Suppress expensive background animations */
  body::before { animation: none !important; }
  #lateral-vignette { animation: none !important; }

  /* 4. Hide GPU-costly decorations */
  #s5-particles { display: none !important; }
  .s5-corner { display: none !important; }
  #hero-wm { display: none !important; }

  /* ═══ MOBILE ANIMATION KILL LIST ═══════════════════════════════
     Stops infinite CSS animations that burn CPU/GPU on mobile
     for decorative elements with minimal visual payoff on small screens.
     ═══════════════════════════════════════════════════════════════ */

  /* Location section floating orbs */
  .loc-dk-orb1, .loc-dk-orb2 {
    animation: none !important;
  }

  /* Location divider shimmer sweep */
  .loc-dk-divider::after {
    animation: none !important;
  }

  /* Location grain texture (expensive bg-image + blend) */
  .loc-dk-grain {
    display: none !important;
  }

  /* Location dots pattern */
  .loc-dk-dots {
    display: none !important;
  }

  /* Location watermark */
  #loc-dk-wm {
    display: none !important;
  }

  /* Footer logo shimmer sweep */
  .ft-logo-text {
    animation: none !important;
  }

  /* Footer floating orbs */
  .ft-orb-1, .ft-orb-2 {
    animation: none !important;
    display: none !important;
  }

  /* Footer grain texture */
  .ft-grain {
    display: none !important;
  }

  /* Section 3 featured divider shimmer beams */
  .s3-divider::after,
  .s3-label-line::after {
    animation: none !important;
  }

  /* Section 5 separator infinite shimmer and pulse */
  .s5-sep::after {
    animation: none !important;
  }

  /* Global grain noise (fixed position, full-viewport, infinite drift) */
  #global-grain {
    animation: none !important;
  }

  /* Hero scroll float animation */
  .hero-scroll-wrapper {
    animation: none !important;
  }

  /* Section 3 ambient glows (inside featured section) */
  #featured > div[style*="border-radius:40px"] > div[class*="animate-float"] {
    animation: none !important;
  }

  /* Clube do Livro floating orbs */
  .clube-orb-1, .clube-orb-2 {
    animation: none !important;
    display: none !important;
  }

  /* Clube marquee scroll — always running, never visible enough on mobile */
  .clube-marquee-content {
    animation: none !important;
  }

  /* Section 5 video section floating orbs */
  #experience-video > div[style*="border-radius:50%"] {
    animation: none !important;
  }

  /* Video frame hover effect — no hover on mobile */
  #video-frame:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Reduce will-change on elements not being animated */
  .hero-col, .word-inner {
    will-change: auto !important;
  }

  /* Disable backdrop-filter on location CTA (expensive on mobile GPU) */
  .loc-btn-shimmer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Hide scroll progress indicator — desktop-only UI, invisible on mobile */
  .scroll-indicator-wrap {
    display: none !important;
  }

  /* Hide hero grid background — decorative, hidden by cream bg anyway */
  .hero-grid-bg {
    display: none !important;
  }

  /* 5. Remove rotating beam animation on mobile CTAs — saves continuous GPU usage */
  .loc-beam-container .loc-beam-border {
    animation: none !important;
  }
  /* Re-enable beam border for hero CTA — most important interactive element */
  .hero-cta-primary-wrap .loc-beam-border {
    animation: rotate-beam 4s linear infinite !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Re-enable beam border for Section 3 Cardápio CTA too */
  #featured .loc-beam-container .loc-beam-border {
    animation: rotate-beam 4s linear infinite !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 6. Hide S4 shimmer beams that animate infinitely */
  .s4-beam {
    display: none !important;
  }
  /* Re-enable shimmer beam for hero CTA button */
  .hero-cta-primary-wrap .s4-beam {
    display: block !important;
  }

  /* 7. Navbar: always light on mobile (hero is cream, never dark) */
  #navbar,
  #navbar.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(253, 251, 247, 0.97) !important;
    border-bottom-color: rgba(0, 0, 0, 0.05) !important;
  }

  /* Force dark text on mobile navbar — layout.css defaults are white for dark desktop hero */
  #navbar .nav-logo,
  #navbar.is-scrolled .nav-logo {
    color: var(--c-dark) !important;
  }

  #navbar .nav-link,
  #navbar.is-scrolled .nav-link {
    color: rgba(26, 26, 26, 0.6) !important;
  }

  #navbar .nav-link:hover,
  #navbar.is-scrolled .nav-link:hover {
    color: var(--c-primary) !important;
  }

  #navbar .nav-cta,
  #navbar.is-scrolled .nav-cta {
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
    background: transparent !important;
  }

  #navbar .nav-cta:hover,
  #navbar.is-scrolled .nav-cta:hover {
    background: var(--c-primary) !important;
    color: #FDFBF7 !important;
  }

  /* 8. Kill unnecessary ambient glow divs in Clube do Livro bg */
  #clube-livro > div[style*="radial-gradient"] {
    opacity: 0 !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     B. HERO SECTION — Premium Mobile Layout
     ═════════════════════════════════════════════════════════════════ */

  /* Hero left column: fluid padding */
  #hero-left {
    padding-left: clamp(1.25rem, 5vw, 2rem) !important;
    padding-right: clamp(1.25rem, 5vw, 2rem) !important;
    padding-top: clamp(5.5rem, 16vw, 8rem) !important;
    padding-bottom: 1rem !important;
  }

  /* Hero headline: dominant focal point — clearly larger than CTA */
  #hero-headline {
    font-size: clamp(3.1rem, 12vw, 4.2rem) !important;
    line-height: 1.10 !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: -0.03em !important;
  }

  /* Kicker: slightly more prominent on mobile */
  .kicker {
    margin-bottom: 1.5rem !important;
    gap: 0.75rem !important;
    font-size: 0.62rem !important;
  }

  /* CTA buttons: medium, not bulky — secondary to headline */
  .hero-cta {
    gap: 1.25rem !important;
    margin-top: 0.5rem !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .btn-primary.btn-order {
    padding: 0.8rem 1.85rem !important;
    font-size: 0.64rem !important;
    min-height: 44px !important;
    border-radius: 9999px !important;
  }

  /* Ghost link: subtle, not competing */
  .link-ghost {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.64rem !important;
    min-height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    opacity: 0.55 !important;
  }

  /* Explore indicator: positioned below the video at viewport bottom */
  .hero-scroll-wrapper {
    position: absolute !important;
    bottom: 2.5rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
    padding: 0 !important;
    pointer-events: none;
  }

  /* ═════════════════════════════════════════════════════════════════
     C. SECTION 2 — A EXPERIÊNCIA (Mobile Polish)
     ═════════════════════════════════════════════════════════════════ */

  #experience {
    padding-top: clamp(3.5rem, 10vw, 5rem) !important;
    padding-bottom: clamp(5rem, 13vw, 7.5rem) !important;
    padding-left: clamp(1.5rem, 5.5vw, 2rem) !important;
    padding-right: clamp(1.5rem, 5.5vw, 2rem) !important;
    border-radius: 0 !important;
  }

  /* Grid gap tighter on mobile */
  #experience .grid {
    gap: clamp(1.25rem, 4vw, 2rem) !important;
  }

  /* Hide experience image on mobile */
  #experience .exp-left {
    display: none !important;
  }

  /* Section title: one step below hero headline (+10%) */
  #experience h2 {
    font-size: clamp(2.3rem, 8.5vw, 3.1rem) !important;
    line-height: 1.08 !important;
  }

  /* Body copy: readable with breathing room (+6%) */
  #experience p.mb-10,
  #experience .text-\[1\.05rem\] {
    font-size: clamp(0.93rem, 2.6vw, 1.04rem) !important;
    line-height: 1.72 !important;
    margin-bottom: 1.25rem !important;
  }

  /* Divider spacing: compact flow directly after title on mobile */
  #experience .s2-divider-track {
    margin-bottom: 1.75rem !important;
  }

  /* Section label: balanced gap below */
  #experience .flex.items-center.gap-3 {
    margin-bottom: 1rem !important;
  }

  /* Title wrapper: balanced gap to divider */
  #experience .word-wrap.mb-8 {
    margin-bottom: 1.25rem !important;
  }

  /* Pillars: generous padding for mobile (+12%) */
  .exp-pillar {
    padding: 1rem 1rem 1rem 1.15rem !important;
  }

  .exp-pillar h4 {
    font-size: clamp(1.12rem, 3.4vw, 1.32rem) !important;
    margin-bottom: 0.2rem !important;
  }

  .exp-pillar p {
    font-size: clamp(0.85rem, 2.4vw, 0.94rem) !important;
    line-height: 1.65 !important;
  }

  /* Pillar number compact */
  .exp-pillar-num {
    font-size: 0.55rem !important;
  }

  /* Vertical line shorter */
  .exp-pillar-vline {
    min-height: 28px !important;
  }

  /* Inner flex gap */
  .exp-pillar .flex.items-start {
    gap: clamp(0.75rem, 2.8vw, 1.1rem) !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     D. SECTION 3 — SABORES & OBRAS (Carousel + Polish)
     ═════════════════════════════════════════════════════════════════ */

  /* Section container: tighter vertical padding */
  #featured {
    padding: clamp(4rem, 11vw, 5.5rem) 0 clamp(2.5rem, 7vw, 3.5rem) !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    box-shadow: none !important;
  }

  /* Remove rounded clip container on mobile — it creates a dark gap */
  #featured > div[style*="border-radius:40px"] {
    border-radius: 0 !important;
  }

  /* Main container: fluid padding */
  #featured > div[style*="max-width:1440px"] {
    padding-left: clamp(1.25rem, 5vw, 2rem) !important;
    padding-right: clamp(1.25rem, 5vw, 2rem) !important;
  }

  /* Section header spacing: tighter */
  #featured .feat-reveal[style*="margin-bottom:5.5rem"] {
    margin-bottom: clamp(2rem, 6vw, 3rem) !important;
  }

  /* Section title: consistent with Experience section (+10%) */
  #featured-title {
    font-size: clamp(2.3rem, 8.5vw, 3.1rem) !important;
    line-height: 1.05 !important;
  }

  /* Logo badge: premium on mobile */
  #s3-logo-badge {
    top: -44px !important;
  }
  #s3-logo-badge-ring {
    width: 88px !important;
    height: 88px !important;
    border-width: 3px !important;
    border-color: rgba(183, 147, 88, 0.35) !important;
    box-shadow:
      0 0 0 1px rgba(183, 147, 88, 0.15),
      0 0 24px 4px rgba(183, 147, 88, 0.12),
      0 12px 40px rgba(43, 74, 59, 0.22),
      0 4px 12px rgba(43, 74, 59, 0.10) !important;
  }

  /* Swipe carousel */
  .s3-gallery-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem !important;
    padding-bottom: 2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(-1 * clamp(1.25rem, 5vw, 2rem)) !important;
    padding-left: clamp(1.25rem, 5vw, 2rem);
    padding-right: clamp(1.25rem, 5vw, 2rem);
  }
  .s3-gallery-grid::-webkit-scrollbar { display: none; }

  /* ── MOBILE CARD TOGGLE: neutralize :hover, use .mobile-active ── */
  /* On mobile, CSS :hover gets "stuck" after tap (no mouseleave event).
     We disable all :hover effects and let JS toggle .mobile-active instead. */
  .feat-card:hover {
    transform: none !important;
  }
  .feat-card:hover img {
    transform: none !important;
  }
  .feat-card-inner:hover {
    box-shadow: none !important;
    transform: none !important;
  }
  .feat-card-inner:hover img.feat-img {
    transform: scale(1.0) !important;
    filter: none !important;
  }
  .feat-card-inner:hover .feat-veil {
    opacity: 0 !important;
  }
  .feat-card-inner:hover .feat-panel {
    opacity: 0 !important;
    transform: translateY(10px) !important;
  }
  .feat-card-inner:hover .s4-beam {
    opacity: 0 !important;
    animation: none !important;
  }
  .feat-card-inner:hover + .feat-label {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Apply effects ONLY via .mobile-active class (JS toggle) */
  .feat-card-inner.mobile-active {
    box-shadow: 0 28px 72px rgba(26,26,26,0.14), 0 6px 18px rgba(26,26,26,0.07) !important;
    transform: translateY(-6px) !important;
  }
  .feat-card-inner.mobile-active img.feat-img {
    transform: scale(1.04) !important;
  }
  .feat-card-inner.mobile-active .feat-veil {
    opacity: 1 !important;
  }
  .feat-card-inner.mobile-active .feat-panel {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .feat-card-inner.mobile-active .feat-card-line {
    transform: scaleX(1) !important;
    opacity: 1 !important;
  }

  .feat-card {
    flex: 0 0 clamp(80%, 82vw, 88%);
    scroll-snap-align: center;
    margin-top: 0 !important;
  }

  /* Card aspect ratio: slightly taller on mobile for impact */
  .feat-card-inner {
    aspect-ratio: 3 / 4 !important;
  }

  /* Card labels: more readable (+8%) */
  .s3-card-label {
    padding: 1rem 0 0 !important;
    gap: 0.75rem !important;
  }

  .s3-card-label-tag {
    font-size: 0.55rem !important;
  }

  .s3-card-label-name {
    font-size: 0.84rem !important;
  }

  /* CTA area */
  .s3-cta-wrap {
    margin-top: 1.5rem !important;
  }

  .s3-cta-divider-row {
    gap: 1rem !important;
    margin-bottom: 1.75rem !important;
  }

  .s3-cta-divider-label {
    font-size: clamp(0.90rem, 2.7vw, 1.05rem) !important;
  }

  /* CTA button: medium, consistent with hero CTA weight */
  .s3-cta-wrap .loc-beam-container {
    min-height: 46px !important;
  }

  .s3-cta-wrap .loc-beam-container > div:last-child {
    padding: 0.75rem clamp(1.4rem, 4.5vw, 2rem) !important;
    font-size: 0.62rem !important;
  }

  /* Section editorial vertical lines: hide on mobile */
  #featured > div[style*="padding:0 4rem"] {
    display: none !important;
  }

  /* Fade out + transition bridge */
  .s3-fade-out {
    display: none !important;
  }

  .feat-reveal {
    margin-bottom: 2.5rem !important;
  }

  /* Transition bridge: just the shimmer line, no dark gap */
  .s3-transition-bridge {
    height: 2px !important;
    margin: 0 !important;
    position: relative !important;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(43,74,59,0.08) 15%,
      rgba(183,147,88,0.28) 40%,
      rgba(43,74,59,0.22) 50%,
      rgba(183,147,88,0.28) 60%,
      rgba(43,74,59,0.08) 85%,
      transparent 100%
    ) !important;
    z-index: 61 !important;
  }
  .s3-transition-bridge::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      to right,
      transparent,
      rgba(255,255,255,0.6) 45%,
      rgba(255,255,255,0.85) 50%,
      rgba(255,255,255,0.6) 55%,
      transparent
    ) !important;
    animation: featDivider 4.5s ease-in-out infinite 1s !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Cream backdrop covers any dark gap between sections */
  .s3-transition-bridge::after {
    content: '' !important;
    position: absolute !important;
    top: -2rem !important;
    bottom: -2rem !important;
    left: -2rem !important;
    right: -2rem !important;
    background: var(--c-bg) !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     E. CLUBE DO LIVRO (Mobile Optimized)
     ═════════════════════════════════════════════════════════════════ */

  #clube-livro {
    padding: clamp(4.5rem, 12vw, 6rem) 0 clamp(3.5rem, 9vw, 4.5rem) !important;
  }

  /* Container: fluid padding */
  #clube-livro > .max-w-\[1480px\] {
    padding-left: clamp(1.25rem, 5vw, 2rem) !important;
    padding-right: clamp(1.25rem, 5vw, 2rem) !important;
  }

  /* Hide GPU-costly background textures on mobile */
  #clube-livro > div[style*="background-image:radial-gradient"],
  #clube-livro > div[style*="repeating-linear-gradient"],
  #clube-livro > div[style*="background-image:url"] {
    display: none !important;
  }

  /* Section header: tighter */
  .clube-reveal__header {
    margin-bottom: clamp(1.5rem, 5vw, 2.5rem) !important;
  }

  /* Title: fluid, tighter spacing */
  .clube-reveal__title {
    margin-bottom: clamp(2rem, 6vw, 3.5rem) !important;
  }

  .clube-reveal__title h2 {
    font-size: clamp(2.3rem, 8.5vw, 3.1rem) !important;
    line-height: 1.02 !important;
  }

  /* Mosaic: vertical stack, tighter */
  .clube-mosaic {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(1.75rem, 5vw, 2.5rem) !important;
  }

  .clube-reveal__left {
    padding-top: 0 !important;
    gap: 1.5rem !important;
  }

  /* Quote block: generous padding */
  #clube-quote-block {
    padding: 1.25rem 1.5rem !important;
    border-radius: 0 12px 12px 0 !important;
  }

  /* Hide oversized guillemet on mobile — it crowds compact layout */
  #clube-quote-block > div[style*="font-size:5rem"] {
    display: none !important;
  }

  #clube-quote-block blockquote {
    font-size: clamp(0.98rem, 2.8vw, 1.1rem) !important;
    line-height: 1.75 !important;
    padding-top: 0.25rem !important;
  }

  /* Steps: generous vertical rhythm (+20% spacing) */
  .clube-step {
    padding: 1.25rem 0 !important;
    gap: 1rem !important;
  }

  .clube-step > span:first-child {
    font-size: 1.4rem !important;
  }

  .clube-step p {
    font-size: clamp(0.88rem, 2.5vw, 0.94rem) !important;
    line-height: 1.65 !important;
  }

  /* "Como funciona" label: tighter */
  .clube-reveal__left > div:last-child > div:first-child {
    margin-bottom: 1.25rem !important;
  }

  /* Right column image: portrait on mobile for impact */
  .clube-reveal__right {
    margin-top: 0 !important;
  }

  .clube-img-main {
    aspect-ratio: 4 / 5 !important;
    border-radius: 16px !important;
  }

  /* Pill badge on image: scale down */
  .clube-img-main > div[style*="pill"] {
    padding: 0.3rem 0.75rem !important;
  }

  .clube-img-main > div[style*="top:1.25rem"] {
    top: 0.85rem !important;
    left: 0.85rem !important;
  }

  /* Bottom caption: readable, more contrast */
  .clube-img-main > div[style*="position:absolute;bottom:0"] {
    padding: 1.25rem 1rem 1rem !important;
  }

  .clube-img-main > div[style*="position:absolute;bottom:0"] h3 {
    font-size: 1.22rem !important;
  }

  .clube-img-main > div[style*="position:absolute;bottom:0"] p {
    font-size: 0.75rem !important;
    color: rgba(255,255,255,0.72) !important;
  }

  /* Background textures: reduce opacity on mobile */
  #clube-livro > div[style*="background-image:radial-gradient"] {
    opacity: 0.04 !important;
  }

  /* Watermark: hidden on mobile — no visual payoff */
  #clube-wm {
    display: none !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     F. SECTION VIDEO (Reserve sua mesa) — Mobile Professional Layout
     ═════════════════════════════════════════════════════════════════ */

  /* Section: fills viewport but ends a bit earlier on mobile */
  #experience-video {
    min-height: 85svh !important;
  }

  /* ── Content wrapper ─────────────────────────────────────────────
     Single centered column. Top/bottom padding keep content away from
     the navbar and the section edge while the centred flex fills the
     viewport gracefully.
  ────────────────────────────────────────────────────────────────── */
  #experience-video > div[style*="z-index:10"] {
    padding-top:    clamp(5rem, 14vw, 6rem)    !important;
    padding-bottom: clamp(2rem, 6vw, 3rem)     !important;
    padding-left:   clamp(1.5rem,  6vw, 2rem)  !important;
    padding-right:  clamp(1.5rem,  6vw, 2rem)  !important;
    min-height: 85svh !important;
    display: flex          !important;
    flex-direction: column !important;
    align-items: center    !important;
    justify-content: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── 1. Section label  ───────────────────────────────────────── */
  #experience-video .s5-reveal-up:first-child {
    margin-bottom: 1.75rem !important;
  }

  /* ── 2. Headline ────────────────────────────────────────────── */
  #experience-video h2 {
    font-size: clamp(2.6rem, 10vw, 3.6rem) !important;
    line-height: 1.0 !important;
    letter-spacing: -0.03em !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The two spans are display:block — pull them tight against each other */
  #experience-video h2 span {
    display: block !important;
    line-height: 0.88 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Second line: pull up to close the gap caused by font em-square metrics */
  #experience-video h2 span:last-child {
    margin-top: -0.22em !important;
  }

  /* Headline wrapper bottom gap → leads into subline */
  #experience-video div[style*="text-align:center;margin-bottom:1.75rem"],
  #experience-video div[style*="text-align:center;margin-bottom:2.5rem"] {
    margin-bottom: 1.25rem !important;
    width: 100% !important;
  }

  /* ── 3. Subline  ─────────────────────────────────────────────── */
  #experience-video p[style*="max-width:400px"] {
    font-size: 0.85rem !important;
    max-width: 82% !important;
    line-height: 1.65 !important;
    margin-bottom: 0 !important;
    color: rgba(255,255,255,0.65) !important;
    text-align: center !important;
  }

  /* ── 4. Separator line  ──────────────────────────────────────── */
  .s5-sep {
    max-width: 160px !important;
    margin-top:    1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* ── 5. CTA button  ──────────────────────────────────────────── */
  #s5-cta {
    padding: 1rem 2.4rem !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    min-height: 52px !important;
    width: auto !important;
  }

  /* ── 6. Benefits line  ───────────────────────────────────────── */
  #experience-video p[style*="margin-top:1.5rem"] {
    margin-top:    1.25rem !important;
    margin-bottom: 0       !important;
    font-size: 0.52rem !important;
    letter-spacing: 0.14em !important;
    color: rgba(255,255,255,0.35) !important;
    line-height: 2.0 !important;
    text-align: center !important;
    max-width: 88% !important;
  }



  /* ═════════════════════════════════════════════════════════════════
     G. LOCATION SECTION — Mobile Premium Redesign
     ═════════════════════════════════════════════════════════════════ */

  /* Section padding: generous vertical space */
  #location {
    padding-top: clamp(3.5rem, 10vw, 5rem) !important;
    padding-bottom: clamp(3.5rem, 10vw, 5rem) !important;
  }

  /* Kill large background glows — too aggressive on small screens */
  #location > div[style*="radial-gradient"] {
    opacity: 0 !important;
  }
  /* Kill horizontal rhythm lines — visual noise on mobile */
  .loc-dk-hline {
    display: none !important;
  }
  /* Watermark: hidden on mobile */
  #loc-dk-wm {
    display: none !important;
  }
  /* Cinematic bleed transition: shorter on mobile */
  div[style*="height:240px;margin-top:-240px"] {
    height: 120px !important;
    margin-top: -120px !important;
  }

  /* Main grid: single-column, left-aligned, consistent padding */
  #location .grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-left: clamp(1.25rem, 5vw, 2rem) !important;
    padding-right: clamp(1.25rem, 5vw, 2rem) !important;
  }

  /* LEFT column (text content): full-width */
  #location .lg\:col-span-5 {
    width: 100% !important;
    padding-top: 0 !important;
  }

  /* Section badge row */
  #location .loc-dr.d1 {
    margin-bottom: 1.5rem !important;
    align-items: center !important;
  }
  .loc-dk-badge {
    padding: 0.25rem 0.65rem !important;
  }

  /* Headline: strong but mobile-appropriate size (+7%) */
  #location h2 {
    font-size: clamp(3rem, 12.5vw, 4.2rem) !important;
    line-height: 0.92 !important;
    margin-bottom: 1.75rem !important;
    padding-bottom: 0.15rem !important;
    letter-spacing: -0.035em !important;
  }

  /* Description: readable, better contrast (+6%) */
  #location p[style*="max-width:400px"] {
    font-size: 0.93rem !important;
    max-width: 100% !important;
    line-height: 1.75 !important;
    margin-bottom: 0 !important;
    color: rgba(255,255,255,0.45) !important;
    padding-top: 0 !important;
  }
  /* Description wrapper: controlled bottom margin */
  #location .overflow-hidden.mb-10 {
    margin-bottom: 1.75rem !important;
  }

  /* Divider: subtle horizontal separator */
  .loc-dk-divider {
    max-width: 100% !important;
    margin-bottom: 1.75rem !important;
  }

  /* Data rows container: consistent vertical spacing (24px grid) */
  #location div[style*="gap:3.5rem;margin-bottom:3.5rem"] {
    gap: 2rem !important;
    margin-bottom: 2rem !important;
  }

  /* Row fine-line accent */
  .loc-dk-fineline {
    margin-bottom: 0.6rem !important;
  }

  /* Row labels (Localização, Rotina) */
  #location .loc-dk-row h4 {
    font-size: 0.5rem !important;
    color: rgba(255,255,255,0.32) !important;
    margin-bottom: 0.65rem !important;
    letter-spacing: 0.28em !important;
  }

  /* Address text: clear, readable (+8%) */
  #location .loc-dk-row p[style*="font-size:1.55rem"] {
    font-size: 1.3rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    color: rgba(255,255,255,0.90) !important;
  }
  /* Neighborhood sub-label */
  #location .loc-dk-row p[style*="font-size:0.68rem"] {
    font-size: 0.6rem !important;
    color: rgba(255,255,255,0.3) !important;
    margin-top: 0.25rem !important;
  }

  /* Hours — primary time */
  #location .loc-dk-row p[style*="font-size:2rem"] {
    font-size: 1.55rem !important;
    letter-spacing: -0.04em !important;
  }
  /* Hours — Sunday times */
  #location .loc-dk-row p[style*="font-size:1.3rem"] {
    font-size: 1.05rem !important;
    letter-spacing: -0.025em !important;
  }

  /* CTA button: medium, not oversized */
  .loc-btn-shimmer {
    min-height: 46px !important;
    padding: 0.85rem 1.75rem !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.14em !important;
  }

  /* RIGHT column (map): push below all text with clear separation (32px) */
  #location .lg\:col-span-7 {
    margin-top: 3rem !important;
    width: 100% !important;
    perspective: none !important;
  }

  /* Map container: clean rounded card */
  .ed-map-container {
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
    outline: none !important;
  }

  /* Map bottom info bar */
  .loc-map-bar {
    padding: 0.9rem 1rem 0.8rem !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
    align-items: flex-start !important;
  }
  .loc-map-bar p[style*="font-size:1.1rem"] {
    font-size: 0.85rem !important;
  }
  .loc-map-bar > span {
    font-size: 0.46rem !important;
    padding: 0.35rem 0.8rem !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     H. FOOTER — Mobile Premium Redesign (Left-Aligned Vertical Stack)
     ═════════════════════════════════════════════════════════════════ */

  /* Section container: consistent side padding, generous vertical space */
  #site-footer > div[style*="max-width:1340px"] {
    padding: 3.5rem clamp(1.5rem, 5.5vw, 2rem) 0 !important;
  }

  /* ── Grid: collapse to single column, uniform gap between sections */
  .ft-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Each footer column: consistent bottom spacing + separator line (24px) */
  .ft-reveal.ft-reveal-d1,
  .ft-reveal.ft-reveal-d2,
  .ft-reveal.ft-reveal-d3 {
    padding-bottom: 2rem !important;
    margin-bottom: 2rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }

  /* ── COL 1: Brand ──────────────────────────────────────────────── */
  /* Logo row: left-aligned, tighter */
  .ft-grid > div:first-child > div[style*="display:flex"][style*="margin-bottom:2rem"] {
    margin-bottom: 1rem !important;
    gap: 0.65rem !important;
  }

  /* Gold accent line next to logo: shorter on mobile */
  .ft-grid > div:first-child > div > span[style*="width:28px"] {
    width: 18px !important;
  }

  /* Brand name: strong and clear (+7%) */
  .ft-grid > div:first-child .ft-nav-link[style*="font-size:1.6rem"] {
    font-size: 1.45rem !important;
    line-height: 1.12 !important;
    min-height: unset !important;
  }

  /* Tagline: readable, not too dim (+6%) */
  .ft-grid > div:first-child p[style*="max-width:320px"] {
    max-width: 100% !important;
    font-size: 0.85rem !important;
    line-height: 1.8 !important;
    margin-bottom: 1.5rem !important;
    color: rgba(255,255,255,0.40) !important;
  }

  /* Social icons: proper touch targets */
  .ft-social {
    width: 40px !important;
    height: 40px !important;
  }

  /* ── COL 2: Navigation ─────────────────────────────────────────── */
  /* Section label */
  .ft-reveal.ft-reveal-d2 p[style*="letter-spacing:0.28em"],
  .ft-reveal.ft-reveal-d3 p[style*="letter-spacing:0.28em"] {
    font-size: 0.52rem !important;
    color: rgba(183,147,88,0.65) !important;
    margin-bottom: 1.1rem !important;
    letter-spacing: 0.3em !important;
  }

  /* Nav links: vertical stack, comfortable tap targets */
  .ft-reveal.ft-reveal-d2 nav {
    gap: 0 !important;
  }
  .ft-nav-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.88rem !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }
  /* Last nav link: no bottom border */
  .ft-reveal.ft-reveal-d2 nav a:last-child {
    border-bottom: none !important;
  }

  /* ── COL 3: Onde Estamos ───────────────────────────────────────── */
  /* Info blocks: consistent internal gap */
  .ft-reveal.ft-reveal-d3 > div[style*="flex-direction:column"] {
    gap: 1.5rem !important;
  }

  /* Sub-labels (Endereço, Horário, Contato) */
  .ft-reveal.ft-reveal-d3 p[style*="letter-spacing:0.12em"] {
    font-size: 0.54rem !important;
    color: rgba(255,255,255,0.28) !important;
    margin-bottom: 0.4rem !important;
  }

  /* Address text (+6%) */
  .ft-reveal.ft-reveal-d3 p[style*="font-size:0.88rem"] {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    color: rgba(255,255,255,0.58) !important;
  }

  /* Hours text: readable italic (+5%) */
  .ft-reveal.ft-reveal-d3 p[style*="font-size:0.95rem"] {
    font-size: 0.93rem !important;
    color: rgba(255,255,255,0.52) !important;
  }
  .ft-reveal.ft-reveal-d3 p[style*="font-size:0.85rem"] {
    font-size: 0.85rem !important;
    color: rgba(255,255,255,0.30) !important;
  }

  /* Email contact link (+6%) */
  .ft-reveal.ft-reveal-d3 a[href^="mailto"] {
    font-size: 0.84rem !important;
    color: rgba(255,255,255,0.40) !important;
  }

  /* ── DIVIDER ───────────────────────────────────────────────────── */
  .ft-divider {
    opacity: 0.4 !important;
    margin-top: 0 !important;
  }

  /* ── BOTTOM BAR ────────────────────────────────────────────────── */
  /* Stack all items, center-aligned */
  #site-footer .ft-reveal.ft-reveal-d5[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    padding: 1.5rem 0 3rem !important;
    text-align: center !important;
  }

  /* Copyright: small and dim */
  #site-footer .ft-reveal-d5 > p {
    font-size: 0.54rem !important;
    letter-spacing: 0.12em !important;
    color: rgba(255,255,255,0.14) !important;
  }

  /* "feito com calma" signature */
  #site-footer .ft-reveal-d5 > div[style*="opacity:0.22"] {
    opacity: 0.18 !important;
  }

  /* "Topo" back-to-top link */
  #site-footer .ft-reveal-d5 > a.ft-nav-link {
    font-size: 0.54rem !important;
    color: rgba(255,255,255,0.18) !important;
    min-height: unset !important;
    border-bottom: none !important;
  }

  /* ── HIDE DECORATIVE NOISE ON MOBILE ──────────────────────────── */
  .ft-orb-1, .ft-orb-2 {
    display: none !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     I. GLOBAL MOBILE TYPOGRAPHY & SPACING
     ═════════════════════════════════════════════════════════════════ */

  /* Sections using px-8 → fluid */
  .px-8 {
    padding-left: clamp(1.25rem, 5vw, 2rem) !important;
    padding-right: clamp(1.25rem, 5vw, 2rem) !important;
  }

  /* Consistent section vertical rhythm */
  .py-32 {
    padding-top: clamp(4rem, 12vw, 6rem) !important;
    padding-bottom: clamp(4rem, 12vw, 6rem) !important;
  }

  /* Hero grid background: match desktop appearance */
  .hero-grid-bg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 50%, transparent 80%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 50%, transparent 80%) !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     J. SMALL MOBILE ADJUSTMENTS (320–374px)
     ═════════════════════════════════════════════════════════════════ */
  @media (max-width: 374px) {
    /* Tighter headline */
    #hero-headline {
      font-size: 2.2rem !important;
    }

    /* Carousel card slightly wider for visibility */
    .feat-card {
      flex: 0 0 88% !important;
    }

    /* Location heading even smaller */
    #location h2 {
      font-size: 2.6rem !important;
    }

    /* Reduce section label text */
    .s3-section-label,
    .clube-reveal__header span[style*="letter-spacing"] {
      font-size: 0.5rem !important;
      letter-spacing: 0.18em !important;
    }

    /* Navbar tighter */
    #navbar {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
  }

  /* ═════════════════════════════════════════════════════════════════
     K. LARGE MOBILE ADJUSTMENTS (430–767px)
     ═════════════════════════════════════════════════════════════════ */
  @media (min-width: 430px) {
    /* More breathing room on bigger phones */
    #hero-left {
      padding-top: clamp(7rem, 18vw, 9rem) !important;
    }

    /* Carousel: slightly smaller proportion for larger screens */
    .feat-card {
      flex: 0 0 75% !important;
    }

    /* Image height can be taller */
    #experience .exp-left {
      height: clamp(42vh, 55vw, 50vh) !important;
    }

    /* Wider CTA */
    .btn-primary.btn-order {
      padding: 1.05rem 2.5rem !important;
    }
  }
/* ══════════════════════════════════════════════════════════════════
   MOBILE HERO REFINEMENT — merged into main block above.
   This section kept only for video-frame border-radius override.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #video-frame {
    border-radius: 12px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(43, 74, 59, 0.06) !important;
  }
}
}