/* 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;
  }

  /* 2. Section 3 guaranteed visibility */
  .sect3-line-inner, .feat-reveal {
    transform: none !important;
    opacity: 1 !important;
    filter: none !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; }

  /* 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;
  }

  /* 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: fluid sizing across all phones */
  #hero-headline {
    font-size: clamp(2.4rem, 9vw, 3.3rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 1.25rem !important;
    letter-spacing: -0.025em !important;
  }

  /* Kicker: slightly more prominent on mobile */
  .kicker {
    margin-bottom: 1.25rem !important;
    gap: 0.65rem !important;
    font-size: 0.58rem !important;
  }

  /* CTA buttons: better touch targets */
  .hero-cta {
    gap: 1rem !important;
    margin-top: 0.75rem !important;
  }

  .btn-primary.btn-order {
    padding: clamp(0.9rem, 2.5vw, 1.1rem) clamp(1.8rem, 6vw, 2.5rem) !important;
    font-size: clamp(0.64rem, 1.8vw, 0.72rem) !important;
    min-height: 48px !important; /* Minimum touch target */
  }

  /* Ghost link: better touch area */
  .link-ghost {
    padding: 0.5rem 0.75rem !important;
    font-size: clamp(0.64rem, 1.8vw, 0.72rem) !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !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(3rem, 9vw, 4.5rem) !important;
    padding-bottom: clamp(4.5rem, 12vw, 7rem) !important;
    padding-left: clamp(1.25rem, 5vw, 2rem) !important;
    padding-right: clamp(1.25rem, 5vw, 2rem) !important;
    border-radius: 0 !important;
  }

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

  /* Image: tighter height for better proportion */
  #experience .exp-left {
    height: clamp(32vh, 46vw, 42vh) !important;
    border-radius: 18px !important;
  }

  /* Section title: fluid */
  #experience h2 {
    font-size: clamp(2.2rem, 8vw, 3rem) !important;
    line-height: 1.05 !important;
  }

  /* Body copy: tighter line-height for scanning */
  #experience p.mb-10,
  #experience .text-\[1\.05rem\] {
    font-size: clamp(0.88rem, 2.4vw, 0.98rem) !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
  }

  /* Divider spacing */
  #experience .s2-divider-track {
    margin-bottom: 1.25rem !important;
  }

  /* Section label */
  #experience .flex.items-center.gap-3 {
    margin-bottom: clamp(0.75rem, 2.5vw, 1.25rem) !important;
  }

  /* Title wrapper */
  #experience .word-wrap.mb-8 {
    margin-bottom: 0.35rem !important;
  }

  /* Pillars: tighter for mobile reading */
  .exp-pillar {
    padding: 0.85rem 0.75rem 0.85rem 1rem !important;
  }

  .exp-pillar h4 {
    font-size: clamp(1.05rem, 3.2vw, 1.25rem) !important;
    margin-bottom: 0.15rem !important;
  }

  .exp-pillar p {
    font-size: clamp(0.8rem, 2.2vw, 0.88rem) !important;
    line-height: 1.55 !important;
  }

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

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

  /* Inner flex gap */
  .exp-pillar .flex.items-start {
    gap: clamp(0.65rem, 2.5vw, 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: fluid mobile sizing */
  #featured-title {
    font-size: clamp(2.2rem, 8vw, 3rem) !important;
    line-height: 1.02 !important;
  }

  /* Logo badge: compact on mobile */
  #s3-logo-badge {
    top: -36px !important;
  }
  #s3-logo-badge-ring {
    width: 72px !important;
    height: 72px !important;
    border-width: 3px !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 */
  .s3-card-label {
    padding: 0.75rem 0 0 !important;
    gap: 0.65rem !important;
  }

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

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

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

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

  .s3-cta-divider-label {
    font-size: clamp(0.85rem, 2.5vw, 1rem) !important;
  }

  /* CTA button: better touch target */
  .s3-cta-wrap .loc-beam-container {
    min-height: 52px !important;
  }

  .s3-cta-wrap .loc-beam-container > div:last-child {
    padding: 0.85rem clamp(1.5rem, 5vw, 2.25rem) !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: 2rem !important;
  }

  /* Transition bridge: same premium line as desktop */
  .s3-transition-bridge {
    height: 2px !important;
    margin: 1.5rem 2rem !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;
  }
  .s3-transition-bridge::before {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

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

  #clube-livro {
    padding: clamp(4rem, 11vw, 5.5rem) 0 clamp(3rem, 8vw, 4rem) !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.2rem, 8vw, 3rem) !important;
    line-height: 0.98 !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: compact */
  #clube-quote-block {
    padding: 1rem 1.25rem !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.92rem, 2.6vw, 1.05rem) !important;
    line-height: 1.7 !important;
    padding-top: 0.25rem !important;
  }

  /* Steps: tighter vertical rhythm */
  .clube-step {
    padding: 1rem 0 !important;
    gap: 0.85rem !important;
  }

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

  .clube-step p {
    font-size: clamp(0.82rem, 2.3vw, 0.88rem) !important;
    line-height: 1.55 !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.15rem !important;
  }

  .clube-img-main > div[style*="position:absolute;bottom:0"] p {
    font-size: 0.7rem !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 4 — EXPERIENCE VIDEO (Mobile Polish)
     ═════════════════════════════════════════════════════════════════ */

  #experience-video {
    min-height: 80vh !important;
  }

  /* Content container: fluid padding */
  #experience-video > div[style*="z-index:10"] {
    padding: 0 clamp(1.25rem, 5vw, 2rem) !important;
    min-height: 80vh !important;
  }

  /* Headline: fluid sizing that stays impactful but doesn't overflow */
  #experience-video h2 {
    font-size: clamp(2.6rem, 9vw, 4rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.035em !important;
  }

  /* Gold text: ensure readability on mobile screens */
  .s5-gold-text {
    text-shadow: 0 2px 16px rgba(183,147,88,0.25) !important;
  }

  /* Subline: tighter, better contrast */
  #experience-video p[style*="max-width:400px"] {
    font-size: clamp(0.82rem, 2.3vw, 0.92rem) !important;
    max-width: 300px !important;
    line-height: 1.65 !important;
    margin-bottom: 1.75rem !important;
    color: rgba(255,255,255,0.58) !important;
  }

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

  /* CTA button: better touch target */
  #s5-cta {
    padding: 1rem clamp(2rem, 7vw, 3rem) !important;
    font-size: clamp(0.9rem, 2.5vw, 1.05rem) !important;
    min-height: 52px !important;
  }

  /* Sub-caption below CTA */
  #experience-video p[style*="margin-top:1.75rem"] {
    margin-top: 1rem !important;
    font-size: 0.52rem !important;
  }

  /* Bottom scroll hint: move up for thumb zone */
  #experience-video .s5-reveal-up[style*="position:absolute;bottom:2.5rem"] {
    bottom: 1.25rem !important;
  }

  /* Separator */
  .s5-sep {
    max-width: 240px !important;
    margin-bottom: 2rem !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     G. LOCATION SECTION (Mobile-First Redesign)
     ═════════════════════════════════════════════════════════════════ */

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

  /* Grid: stack vertically with tighter gap */
  #location .grid {
    gap: clamp(1.5rem, 5vw, 2.5rem) !important;
    padding-left: clamp(1.25rem, 5vw, 2rem) !important;
    padding-right: clamp(1.25rem, 5vw, 2rem) !important;
  }

  /* Heading: scale-down for mobile, better contrast */
  #location h2 {
    font-size: clamp(2.6rem, 11vw, 3.8rem) !important;
    line-height: 0.88 !important;
    margin-bottom: clamp(1.25rem, 3.5vw, 2rem) !important;
    padding-bottom: 0.2rem !important;
  }

  /* "Visite" in white, ensure readability */
  #location h2 span span {
    color: rgba(255,255,255,0.95) !important;
  }

  /* Description: better contrast */
  #location p[style*="max-width:400px"] {
    font-size: clamp(0.86rem, 2.4vw, 0.95rem) !important;
    max-width: 100% !important;
    line-height: 1.65 !important;
    margin-bottom: 1.25rem !important;
    color: rgba(255,255,255,0.45) !important;
  }

  /* Section badge */
  .loc-dk-badge {
    padding: 0.25rem 0.75rem !important;
  }

  /* Badge row */
  #location .loc-dr.d1 {
    margin-bottom: 1.75rem !important;
  }

  /* Data rows: tighter gap */
  #location div[style*="gap:3.5rem;margin-bottom:3.5rem"] {
    gap: 2rem !important;
    margin-bottom: 2rem !important;
  }

  /* Address text: fluid */
  #location .loc-dk-row p[style*="font-size:1.55rem"] {
    font-size: clamp(1.15rem, 3.8vw, 1.35rem) !important;
  }

  /* Row labels: slightly brighter for readability */
  #location .loc-dk-row h4 {
    color: rgba(255,255,255,0.28) !important;
  }

  /* Hours text: fluid */
  #location .loc-dk-row p[style*="font-size:2rem"] {
    font-size: clamp(1.4rem, 4.5vw, 1.7rem) !important;
  }

  #location .loc-dk-row p[style*="font-size:1.3rem"] {
    font-size: clamp(0.95rem, 3.2vw, 1.15rem) !important;
  }

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

  /* CTA button: proper touch target */
  .loc-btn-shimmer {
    min-height: 48px !important;
    padding: 0.9rem 1.8rem !important;
    font-size: 0.65rem !important;
  }

  /* Map container: tighter aspect on mobile */
  .ed-map-container {
    aspect-ratio: 4 / 5 !important;
    width: 100% !important;
    border-radius: 18px !important;
  }

  /* Map: right column top margin */
  #location .lg\:col-span-7 {
    margin-top: 0 !important;
  }

  /* Map bottom bar */
  .loc-map-bar {
    padding: 1rem 1rem 0.85rem !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    align-items: flex-start !important;
  }

  .loc-map-bar p[style*="font-size:1.1rem"] {
    font-size: 0.9rem !important;
  }

  /* Map "Ver no Maps" tag: brighter */
  .loc-map-bar > span {
    font-size: 0.48rem !important;
    padding: 0.4rem 0.85rem !important;
  }

  /* Dark watermark: hidden on mobile */
  #loc-dk-wm {
    display: none !important;
  }

  /* Cinematic bleed transition: shorter */
  div[style*="height:240px;margin-top:-240px"] {
    height: 120px !important;
    margin-top: -120px !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     H. FOOTER (Mobile Compact)
     ═════════════════════════════════════════════════════════════════ */

  #site-footer > div[style*="max-width:1340px"] {
    padding: 3rem clamp(1.25rem, 5vw, 2rem) 0 !important;
  }

  /* Footer grid: single column, tighter */
  .ft-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Brand tagline: readable */
  .ft-grid > div:first-child p[style*="max-width:320px"] {
    max-width: 100% !important;
    font-size: 0.82rem !important;
    margin-bottom: 1.25rem !important;
    color: rgba(255,255,255,0.42) !important;
  }

  /* Footer section labels: brighter for readability */
  .ft-grid p[style*="letter-spacing:0.28em"] {
    color: rgba(183,147,88,0.7) !important;
    margin-bottom: 1.5rem !important;
  }

  /* Footer nav links: larger touch targets */
  .ft-nav-link {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.72rem !important;
  }

  /* Footer contact text: readable */
  .ft-grid p[style*="font-weight:300"][style*="color:rgba(255,255,255,0.6)"] {
    color: rgba(255,255,255,0.55) !important;
  }

  /* Bottom bar: stack on very small screens */
  #site-footer div[style*="justify-content:space-between"][style*="padding:1.75rem"] {
    padding: 1rem 0 2rem !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.85rem !important;
    text-align: center !important;
  }

  /* Social icons: adequate sizing */
  .ft-social {
    width: 42px !important;
    height: 42px !important;
  }

  /* Footer orbs: hide on mobile */
  .ft-orb-1, .ft-orb-2 {
    display: none !important;
  }

  /* Footer divider: more visible */
  .ft-divider {
    opacity: 0.6 !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;
    }
  }
}