/* ══════════════════════════════════════════════════════════════════
   RESERVATION PAGE — Giardini Café
   Premium Editorial — Final Refinement
   ══════════════════════════════════════════════════════════════════ */

/* ── NAVBAR — Sync with Index.html (Transparent top, Cream Scrolled) ─ */

/* Force footer reveals visible since reservation page lacks scroll triggers for them */
#site-footer .ft-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }

#navbar {
  background: transparent!important;
  backdrop-filter: none!important;
  -webkit-backdrop-filter: none!important;
  border-bottom: 1px solid transparent!important;
  transition: all 0.5s var(--expo)!important;
  padding: 2.25rem 5rem!important;
  opacity: 1!important; /* Ensure it's visible, the JS might fade it in too */
}
#navbar.is-scrolled {
  background: rgba(253, 251, 247, 0.94)!important;
  backdrop-filter: blur(14px)!important;
  -webkit-backdrop-filter: blur(14px)!important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05)!important;
  padding-top: 1.25rem!important;
  padding-bottom: 1.25rem!important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05)!important;
}
@media (max-width: 768px) {
  /* ── Navbar: absolute (não fixa) no mobile — igual ao menu.css ── */
  #navbar {
    position: absolute !important;
    top: 0 !important;
    padding: 1rem 1.25rem !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* Quando JS adiciona .is-scrolled, mantém absolute para não colar na tela */
  #navbar.is-scrolled {
    position: absolute !important;
    top: 0 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  #navbar .nav-logo {
    font-size: 1.3rem;
    color: #fff !important;
  }

  .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) !important;
    cursor: pointer;
  }

  /* ── Disable noise-overlay blend mode on mobile — biggest global GPU
     compositing win. mix-blend-mode forces GPU layer promotion for the
     entire page stack, causing stutter on every scroll tick. ── */
  .noise-overlay {
    mix-blend-mode: normal !important;
    opacity: 0.06 !important; /* Still provides grain feel, near-invisible */
  }

  /* Scanlines: remove on mobile (1px repeating-linear-gradient = lots of geometry) */
  .res-hero-scanlines {
    display: none !important;
  }
}

/* Logo */
.nav-logo { color: #fff!important; transition: color 0.4s var(--expo); flex: 1; display: flex; align-items: center; }
.is-scrolled .nav-logo { color: var(--c-dark)!important; }

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

/* Links */
.nav-link { color: rgba(255, 255, 255, 0.8)!important; transition: color 0.3s ease; }
.nav-link:hover { color: #fff!important; }
.is-scrolled .nav-link { color: rgba(26, 26, 26, 0.6)!important; }
.is-scrolled .nav-link:hover { color: var(--c-primary)!important; }

/* CTA Button */
.nav-cta {
  background: transparent!important;
  color: #fff!important;
  border: 1.5px solid rgba(255, 255, 255, 0.4)!important;
  border-radius: 999px!important;
  transition: all 0.4s var(--expo)!important;
}
.nav-cta:hover {
  background: #fff!important;
  color: var(--c-primary)!important;
  border-color: #fff!important;
  transform: translateY(-2px);
}
.is-scrolled .nav-cta {
  background: transparent!important;
  color: var(--c-primary)!important;
  border-color: var(--c-primary)!important;
}
.is-scrolled .nav-cta:hover {
  background: var(--c-primary)!important;
  color: var(--c-bg)!important;
}

/* Hamburger icon */
.nav-hamburger { color: #fff!important; }
.is-scrolled .nav-hamburger { color: var(--c-dark)!important; }

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */
/* ════ HERO WRAPPER FOR SCROLL PIN ════ */
#hero-pin-wrapper {
  position: relative;
  width: 100%;
  z-index: 100; /* Above env section (z:40) so hero covers it during pin */
  background: #0C1A10; /* Match dark theme start */
}
@media (max-width: 768px) {
  /* On mobile the green pin-spacer filler is visible between hero and
     section 2 during scroll. Make it transparent since the canvas
     covers the full viewport and we don't need a background fill. */
  #hero-pin-wrapper {
    background: transparent !important;
  }
  .pin-spacer {
    background: transparent !important;
  }
}
/* GSAP pin-spacer: ensure full width */
.pin-spacer {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.res-hero{
  position:relative;width:100%;min-height:680px;
  overflow:hidden;display:flex;flex-direction:column;
  background: #0C1A10;
  will-change: transform;
  /* Use dvh (dynamic viewport height) to handle mobile browser bar.
     Falls back to 100vh for older browsers. */
  height: 100vh;
  height: 100dvh;
  /* Paint containment: hero repaints don't trigger full-page relayout */
  contain: layout style;
}
/* When GSAP pins the hero (position:fixed), force it to cover full viewport */
@media (max-width: 1024px) {
  .res-hero[style*="fixed"] {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
  }
}

/* Canvas frame / Full Screen — Desktop only.
   On mobile, the card styles from the mobile override block apply instead. */
@media (min-width: 1025px) {
  #video-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
    opacity: 0; /* Managed by JS entrance */
    
    /* Reset global styles from components.css */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
}

#video-frame::before,
#video-frame::after,
#hero-viewport::after {
  display: none !important;
}

/* Override global components.css #seq-canvas on reservation page */
.res-hero #seq-canvas,
#seq-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  image-rendering: auto !important;
  backface-visibility: visible !important;
  object-fit: cover !important;
  filter: blur(12px);
  opacity: 0;
  transform: scale(1.05);
  transition: filter 2s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 1.5s ease, 
              transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.res-hero #seq-canvas.ready,
#seq-canvas.ready {
  filter: blur(0) contrast(1.05) brightness(1.02);
  opacity: 1;
  transform: scale(1);
}

/* ══ RESERVATION-PAGE MOBILE: override components.css + card video ═══
   components.css sets #hero-viewport to cream bg and #video-frame to
   a small card at max-width:1024px. We override both for the dark
   reservation hero, placing the video in a centered card.
   Animatable properties (width, height, border-radius, position)
   do NOT use !important — GSAP animates them to fill the screen.   */
@media (max-width: 1024px) {
  /* Force full-width dark hero — override components.css cream bg + width */
  #hero-pin-wrapper {
    width: 100vw !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .res-hero,
  #hero-viewport.res-hero {
    background: #0C1A10 !important;
    flex-direction: column !important;
    overflow: hidden !important;
    width: 100vw !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Video — fullscreen from start on mobile. No card, no expansion. */
  .res-hero #video-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #0a0a0a !important;
    margin: 0 !important;
    padding: 0 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    z-index: 1 !important;
    opacity: 0; /* JS entrance animation */
    transition: none !important;
  }
}

.res-hero-bg{display: none;} /* Video replaced by canvas */
.res-hero-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,rgba(4,8,6,.92) 0%,rgba(8,16,11,.7) 45%,rgba(4,8,6,.55) 100%);pointer-events:none}
@media(max-width:768px){
  /* Brighter on mobile — reduce overlay darkness so the video is more visible */
  .res-hero-overlay{background:linear-gradient(115deg,rgba(4,8,6,.62) 0%,rgba(8,16,11,.44) 45%,rgba(4,8,6,.30) 100%) !important;}
  .res-hero-vignette{opacity:0.5 !important;}
}
.res-hero-vignette{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 90% 80% at 30% 60%,transparent 30%,rgba(0,0,0,.55) 100%);pointer-events:none}
.res-hero-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.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.82' numOctaves='3' 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;mix-blend-mode:screen}
.res-hero-scanlines{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.018;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.8) 2px,rgba(0,0,0,.8) 3px)}
.res-hero-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:3}
.res-hero-orb-1{top:-20%;right:-5%;width:55vw;height:55vw;background:radial-gradient(circle,rgba(43,74,59,.14) 0%,transparent 65%);animation:s5-float-orb 22s ease-in-out infinite}
.res-hero-orb-2{bottom:-15%;left:30%;width:35vw;height:35vw;background:radial-gradient(circle,rgba(183,147,88,.08) 0%,transparent 65%);animation:s5-float-orb2 28s ease-in-out infinite 4s}
.res-hero-particles{position:absolute;inset:0;z-index:5;pointer-events:none}

/* ── Hero editorial container — defines the content grid ──────── */
.res-hero-container{
  position:relative;z-index:10;
  width:100%;max-width:1400px;
  margin:0 auto;
  padding:0 clamp(2rem, 5vw, 5rem);
  flex:1;
  display:flex;
  align-items:center;
}
@media (max-width: 768px) {
  /* Container: positioned in lower half so CTA sits above book/bottom */
  .res-hero-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 0 1.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100dvh !important;
    padding: 0 1.75rem !important;
    position: relative !important;
    text-align: center !important;
  }
  /* Content block: absolute position — immune to GSAP flex overrides */
  .res-hero-content {
    position: absolute !important;
    bottom: 28vh !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 1.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
  }
  /* Kicker */
  .res-hero-kicker {
    justify-content: center !important;
    width: 100% !important;
    font-size: .85rem !important;
    letter-spacing: .28em !important;
    margin-bottom: 1.5rem !important;
  }
  /* Title */
  .res-hero-title {
    font-size: clamp(4.8rem, 18vw, 7rem) !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 1.2rem !important;
    line-height: .87 !important;
  }
  /* Separator */
  .res-hero-sep {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1.2rem !important;
    width: 80px !important;
  }
  /* Body text */
  .res-hero-body {
    font-size: 1.35rem !important;
    text-align: center !important;
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 2.4rem !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,.85) !important;
  }
  /* CTA button */
  .res-hero-cta {
    font-size: .88rem !important;
    padding: 1.3rem 3.2rem !important;
    margin: 0 auto !important;
    letter-spacing: .22em !important;
    border-radius: 99px !important;
  }
  /* Scroll indicator */
  .res-hero-scroll {
    bottom: 1.5rem !important;
  }
}

/* ── Hero content block — left-anchored, tight rhythm ──────────── */
.res-hero-content{
  max-width:680px;
  padding:2rem 0;
}

.res-hero-kicker{
  display:flex;align-items:center;gap:.85rem;
  font-size:.57rem;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.4);
  margin-bottom:2rem;
}
.res-hero-kicker-line{width:20px;height:1px;background:rgba(255,255,255,.18);animation:resKickerLine 1.2s cubic-bezier(.16,1,.3,1) .6s both}
@keyframes resKickerLine{from{width:0;opacity:0}to{width:20px;opacity:1}}
.res-hero-kicker-dot{width:5px;height:5px;border-radius:50%;background:rgba(183,147,88,.8);animation:live-glow 2.2s ease-in-out infinite;flex-shrink:0}

.res-hero-title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(3.5rem,8vw,7.5rem);
  line-height:.88;letter-spacing:-.04em;
  color:#fff;font-weight:400;
  margin:0 0 1.75rem;
}
.res-hero-title em{font-style:italic;color:rgba(183,147,88,.9);display:block}

.res-hero-sep{
  width:56px;height:1px;
  background:linear-gradient(90deg,rgba(183,147,88,.5),transparent);
  margin-bottom:1.5rem;position:relative;overflow:hidden;
}
.res-hero-sep::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(183,147,88,.9),transparent);animation:resSepSweep 5s ease-in-out infinite 2s}
@keyframes resSepSweep{0%{left:-100%;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:200%;opacity:0}}

.res-hero-body{
  font-size:.97rem;font-weight:300;
  color:rgba(255,255,255,.52);line-height:1.95;
  margin-bottom:2.25rem;max-width:460px;
}

.res-hero-cta{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(183,147,88,.9);text-decoration:none;
  padding:.9rem 2.2rem;
  border:1px solid rgba(183,147,88,.25);
  border-radius:99px;
  transition:all .4s cubic-bezier(.16,1,.3,1);
  position:relative;overflow:hidden;
}
.res-hero-cta::before{content:'';position:absolute;inset:0;background:rgba(183,147,88,.06);border-radius:inherit;opacity:0;transition:opacity .3s ease}
.res-hero-cta:hover{border-color:rgba(183,147,88,.5);transform:translateY(-2px);gap:1.1rem}
.res-hero-cta:hover::before{opacity:1}
.res-hero-cta svg{transition:transform .3s ease}
.res-hero-cta:hover svg{transform:translateX(4px)}

/* ── Legacy strip — kept for compat ────────────────────────────── */
.res-hero-strip{position:absolute;right:2.5rem;top:0;bottom:0;z-index:8;width:24px;display:flex;align-items:center;justify-content:center;overflow:hidden}
@media(max-width:1024px){.res-hero-strip{display:none}}
.res-hero-strip-inner{display:flex;flex-direction:column;animation:resStripScroll 12s linear infinite;white-space:nowrap}
.res-hero-strip-text{font-size:.45rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.1);writing-mode:vertical-rl;line-height:1}
@keyframes resStripScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* ── Scroll indicator — bottom center standalone ─────────────────── */
.res-hero-scroll{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  z-index:10;pointer-events:none;
}
.res-hero-scroll-label{
  font-family:'Inter',sans-serif;
  font-size:.46rem;font-weight:700;letter-spacing:.38em;
  text-transform:uppercase;
  color:rgba(255,255,255,.32);
  user-select:none;white-space:nowrap;
}
.res-hero-scroll-track{
  width:1px;height:32px;
  background:rgba(255,255,255,.1);
  position:relative;overflow:hidden;
}
.res-hero-scroll-dot{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:3px;height:6px;border-radius:3px;
  background:rgba(183,147,88,.55);
  animation:resScrollDot 2.2s ease-in-out infinite;
}
@keyframes resScrollDot{0%{top:-6px;opacity:0}20%{opacity:1}80%{opacity:.6}100%{top:36px;opacity:0}}

/* ── Hero vertical center line with "Reservar" label ─────────────── */
.res-hero-vline{
  position:absolute;
  right:clamp(4rem,12vw,16vw);
  top:50%;transform:translateY(-50%);
  z-index:9;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
}
.res-hero-vline-label{
  font-size:.48rem;font-weight:700;letter-spacing:.45em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  user-select:none;
  order:-1;
}
.res-hero-vline-track{
  width:1px;height:clamp(80px,12vh,130px);
  background:linear-gradient(to bottom,rgba(183,147,88,.4) 0%,rgba(183,147,88,.28) 40%,transparent 100%);
  position:relative;overflow:hidden;
}
.res-hero-vline-dot{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:4px;height:8px;border-radius:3px;
  background:rgba(183,147,88,.6);
  animation:resScrollDot 3s ease-in-out infinite;
}
@media(max-width:1024px){.res-hero-vline{display:none}}

/* ── Hero bottom info bar (legacy, now display:none) ─────────────── */
.res-hero-bar{display:none}
.res-hero-year{display:none}

/* ── Hero stats — kept for compat ──────────────────────────────── */
.res-hero-stats{position:absolute;bottom:0;left:0;right:0;z-index:10;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.06);background:rgba(4,8,6,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:1.35rem 5vw}
@media(max-width:768px){.res-hero-stats{display:none}}
.res-hero-stat{display:flex;flex-direction:column;gap:.3rem;padding:0 2.5rem 0 0}
.res-hero-stat-num{font-family:'Instrument Serif',serif;font-size:1.2rem;font-style:italic;color:rgba(255,255,255,.75);letter-spacing:-.02em;line-height:1}
.res-hero-stat-label{font-size:.5rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.25)}
.res-hero-stat-sep{width:1px;height:32px;background:rgba(255,255,255,.08);flex-shrink:0;margin-right:2.5rem}

.res-hero-reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.res-hero-reveal.is-visible{opacity:1;transform:translateY(0)}

/* ══════════════════════════════════════════════════════════════════
   ENVIRONMENT SELECTION SECTION — dark cinematic
   ══════════════════════════════════════════════════════════════════ */
.res-env-section{
  position:relative;z-index:40;
  /* Top starts with exact hero color (#0C1A10) for seamless transition
     when mobile browser bar collapses and reveals content below hero. */
  background:
    linear-gradient(135deg,rgba(43,74,59,.18) 0%,transparent 40%),
    linear-gradient(180deg,#0C1A10 0%,#0C1A10 120px,#0b1410 180px,#0e1812 55%,#131c15 100%);
  padding:6rem 0 6rem;overflow:hidden;
}
@media(max-width:768px){
  .res-env-section{
    padding-top:3rem !important;
  }
}
.res-env-section-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 15% 35%,rgba(43,74,59,.22) 0%,transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 75%,rgba(183,147,88,.09) 0%,transparent 65%),
    radial-gradient(ellipse 40% 30% at 50% 5%,rgba(43,74,59,.12) 0%,transparent 60%);
}
.res-env-section-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.038;
  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.82' numOctaves='3' 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;mix-blend-mode:screen;
}
.res-env-section-inner{
  position:relative;z-index:10;
  max-width:1400px;margin:0 auto;padding:0 4rem;
}
@media(max-width:1099px){.res-env-section-inner{padding:0 2rem}}
@media(max-width:480px){.res-env-section-inner{padding:0 1.25rem}}

/* Section label (dark version) */
.res-env-section .res-section-label{margin-bottom:1.5rem}
.res-env-section .res-section-label-dot{background:rgba(183,147,88,.8)}
.res-env-section .res-section-label-text{color:rgba(183,147,88,.72);font-size:.58rem}
.res-env-section .res-section-label-line{background:linear-gradient(to right,rgba(183,147,88,.15),transparent)}

.res-env-section-header{margin-bottom:3.5rem}
.res-env-section-hrow{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.res-env-section-title{font-family:'Instrument Serif',serif;font-size:clamp(2.1rem,3.8vw,3.2rem);letter-spacing:-.035em;color:rgba(255,255,255,.92);font-weight:400;margin:0;line-height:1.08}
.res-env-section-title em{font-style:italic;color:rgba(183,147,88,.88)}
.res-env-section-hint{font-size:.8rem;font-weight:300;color:rgba(255,255,255,.35);font-style:italic;font-family:'Instrument Serif',serif;margin:0;white-space:nowrap;align-self:flex-end}
@media(max-width:640px){.res-env-section-hint{display:none}}

/* ══════════════════════════════════════════════════════════════════
   ENVIRONMENT CARD GALLERY — 3 × 2 grid, large atmospheric cards
   ══════════════════════════════════════════════════════════════════ */
.res-env-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:10px;
  margin-bottom:1.75rem;
}
@media(max-width:900px){.res-env-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.res-env-cards{grid-template-columns:repeat(2,1fr);gap:7px}}

/* Individual card */
.res-env-card{
  position:relative;overflow:hidden;border-radius:14px;cursor:pointer;
  border:1px solid rgba(255,255,255,.06);
  transition:border-color .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1);
  background:#0c1510;aspect-ratio:4/3;
}
.res-env-card:focus-visible{outline:2px solid rgba(183,147,88,.6);outline-offset:3px}

/* Card image */
.res-env-card-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.65) brightness(.58);
  transition:filter .7s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
}

/* Card gradient overlay */
.res-env-card-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,8,6,.05) 0%,rgba(4,8,6,.18) 35%,rgba(4,8,6,.78) 75%,rgba(4,8,6,.94) 100%);
  transition:opacity .5s cubic-bezier(.22,1,.36,1);
}

/* Card hover instruction */
.res-env-card-hover-cue{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .35s ease;
  pointer-events:none;
}
.res-env-card-hover-cue span{
  font-family:'Inter',sans-serif;font-size:.58rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.2);
  border-radius:99px;padding:.42rem 1rem;
  background:rgba(255,255,255,.05);backdrop-filter:blur(8px);
}

/* Card content */
.res-env-card-content{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  padding:.9rem 1.1rem 1rem;
}
.res-env-card-name{
  font-family:'Instrument Serif',serif;
  font-size:1.08rem;font-style:italic;
  color:rgba(255,255,255,.92);line-height:1.2;
  display:block;letter-spacing:-.015em;
  transition:color .45s cubic-bezier(.22,1,.36,1);
}
@media(max-width:1100px){.res-env-card-name{font-size:.95rem}}
@media(max-width:640px){.res-env-card-name{font-size:.88rem}}
.res-env-card-cap{
  font-size:.46rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.26);margin-top:.3rem;display:block;
  transition:color .3s ease;
}

/* Selected checkmark badge */
.res-env-card-check{
  position:absolute;top:.75rem;right:.75rem;z-index:4;
  width:24px;height:24px;border-radius:50%;
  background:var(--c-primary);border:1.5px solid rgba(183,147,88,.5);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.5) rotate(-10deg);
  transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1);
}
.res-env-card-check svg{width:11px;height:11px;color:#fff}

/* === Hover === */
.res-env-card:hover{
  border-color:rgba(255,255,255,.12);
  transform:translateY(-5px);
  box-shadow:0 20px 48px -10px rgba(0,0,0,.5),0 4px 16px -4px rgba(0,0,0,.25);
}
.res-env-card:hover .res-env-card-img{filter:saturate(.85) brightness(.68);transform:scale(1.05)}
.res-env-card:hover .res-env-card-name{color:#fff}
.res-env-card:hover .res-env-card-cap{color:rgba(255,255,255,.5)}
.res-env-card:hover .res-env-card-hover-cue{opacity:1}

/* === Selected === */
.res-env-card.is-selected{
  border-color:rgba(183,147,88,.5);
  box-shadow:0 0 0 1px rgba(183,147,88,.14),0 16px 48px -8px rgba(0,0,0,.65);
  transform:translateY(-4px);
}
.res-env-card.is-selected .res-env-card-img{filter:saturate(.9) brightness(.68)}
.res-env-card.is-selected .res-env-card-check{opacity:1;transform:scale(1) rotate(0deg)}
.res-env-card.is-selected .res-env-card-name{color:rgba(183,147,88,.92)}
.res-env-card.is-selected .res-env-card-cap{color:rgba(183,147,88,.48)}

/* Card skeleton */
.res-env-card-skeleton{
  aspect-ratio:4/3;border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 75%);
  background-size:200% 100%;animation:skeletonShimmer 1.6s ease-in-out infinite;
}
@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── SELECTED SUMMARY BAR (below cards) ────────────────────────── */
.res-env-selected-bar{
  display:none;align-items:center;gap:1rem;
  padding:.9rem 1.4rem;
  background:rgba(43,74,59,.12);
  border:1px solid rgba(183,147,88,.16);
  border-radius:10px;margin-top:.5rem;
}
.res-env-selected-bar.is-visible{display:flex}
.res-env-selected-img-wrap{width:40px;height:40px;border-radius:7px;overflow:hidden;flex-shrink:0;border:1px solid rgba(183,147,88,.18)}
.res-env-selected-img-wrap img{width:100%;height:100%;object-fit:cover;filter:saturate(.75)}
.res-env-selected-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.18rem}
.res-env-selected-label{font-size:.46rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(183,147,88,.48)}
.res-env-selected-name{font-family:'Instrument Serif',serif;font-size:.98rem;font-style:italic;color:rgba(255,255,255,.78);line-height:1}
.res-env-selected-change{
  display:flex;align-items:center;gap:.4rem;
  font-family:'Inter',sans-serif;font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.32);background:transparent;
  border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:.45rem .8rem;
  cursor:pointer;transition:all .3s ease;white-space:nowrap;flex-shrink:0;
}
.res-env-selected-change:hover{color:rgba(183,147,88,.8);border-color:rgba(183,147,88,.2);background:rgba(183,147,88,.05)}

/* ══════════════════════════════════════════════════════════════════
   RESERVATION FORM SECTION — Green Identity
   ══════════════════════════════════════════════════════════════════ */
.res-section{
  position:relative;
  z-index:60;
  padding:6rem 0 8rem;
  /* Green identity: continues from env section, lightens toward bottom */
  background: 
    radial-gradient(ellipse 75% 60% at 5% 12%, rgba(43,74,59,.25) 0%, transparent 65%),
    radial-gradient(ellipse 65% 55% at 95% 88%, rgba(25,48,36,.2) 0%, transparent 65%),
    linear-gradient(180deg, #141d15 0%, #1a2e24 45%, #0d1a12 100%);
  overflow:hidden;
}

/* ── RESERVAR scroll-driven horizontal word (like TEMPO in index) ─── */
.res-scroll-word{
  position:absolute;
  top:35%;left:0;
  z-index:0;pointer-events:none;
  overflow:hidden;width:100%;
  display:flex;align-items:center;
  user-select:none;
  will-change:transform;
}
.res-scroll-word-text{
  font-family:'Instrument Serif',serif;
  font-size:clamp(9rem,22vw,20rem);
  font-style:italic;
  font-weight:400;
  line-height:1;
  white-space:nowrap;
  letter-spacing:-.04em;
  color:rgba(255,255,255,.018);
  display:block;
  transform:translateX(30%);
  will-change:transform;
}
@media(max-width:768px){.res-scroll-word{display:none}}

/* Subtle top shadow continuing from env section */
.res-section::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:180px;
  background:linear-gradient(180deg,rgba(8,14,10,.45) 0%,transparent 100%);
  z-index:1;pointer-events:none;
}

.res-section-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.045;
  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.82' 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;mix-blend-mode:screen;
}

/* Side ambient orbs — green glow on dark field */
.res-section-ambient-1{
  position:absolute;top:8%;left:-5%;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(43,74,59,.22) 0%,transparent 65%);
  pointer-events:none;z-index:1;animation:resAmbient1 24s ease-in-out infinite;
}
.res-section-ambient-2{
  position:absolute;bottom:12%;right:-5%;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,50,38,.18) 0%,transparent 65%);
  pointer-events:none;z-index:1;animation:resAmbient2 30s ease-in-out infinite 6s;
}
@keyframes resAmbient1{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-16px)}}
@keyframes resAmbient2{0%,100%{transform:translate(0,0)}50%{transform:translate(-16px,12px)}}

/* Watermark — subtle serif brand text */
.res-section-watermark{
  position:absolute;bottom:-2%;right:-2%;z-index:0;pointer-events:none;
  font-family:'Instrument Serif',serif;font-size:clamp(8rem,18vw,16rem);
  font-style:italic;color:rgba(43,74,59,.04);
  letter-spacing:-.04em;line-height:1;
  white-space:nowrap;user-select:none;
  animation:resWatermarkFloat 20s ease-in-out infinite;
}
@keyframes resWatermarkFloat{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(-8px,6px) rotate(-1.5deg)}}

/* Top separator — gold-green shimmer */
.res-section-top-line{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(43,74,59,.3) 30%,rgba(183,147,88,.25) 50%,rgba(43,74,59,.3) 70%,transparent 95%);
  z-index:4;
}

/* ══ CONTAINER — wide centered ═══════════════════════════════════ */
.res-container{
  max-width:1300px;
  margin:0 auto;
  padding:0 5rem;
  position:relative;
  z-index:10;
}
@media(max-width:1199px){.res-container{padding:0 3rem}}
@media(max-width:1099px){.res-container{padding:0 2rem}}
@media(max-width:480px){.res-container{padding:0 1.25rem}}

/* Section Header — white text on green */
.res-section-header{
  margin-bottom:3.5rem;
  max-width:700px;
}
.res-section-label{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}
.res-section-label-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(183,147,88,.8);
  animation:live-glow 2.2s ease-in-out infinite;
  flex-shrink:0;
}
.res-section-label-text{
  font-size:.58rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(183,147,88,.72);
}
.res-section-label-line{
  flex:1;height:1px;
  background:linear-gradient(to right,rgba(255,255,255,.1),transparent);
}
.res-section-title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(2.4rem,3.8vw,3.5rem);
  letter-spacing:-.03em;
  color:rgba(255,255,255,.93);
  font-weight:400;margin:0 0 1.1rem;line-height:1.06;
}
.res-section-title em{font-style:italic;color:rgba(183,147,88,.88)}
.res-section-subtitle{
  font-size:1.02rem;font-weight:300;
  color:rgba(255,255,255,.5);
  line-height:1.85;font-style:italic;
  font-family:'Instrument Serif',serif;
}

/* ── FORM WRAP — lives directly on green background, no card ──────── */
.res-form-wrap{
  background:transparent;
  border-radius:0;
  padding:0;
  max-width:100%;
  margin:0;
  box-shadow:none;
  position:relative;
  overflow:visible;
}
.res-form-wrap::before{display:none}

/* ── ENV SUMMARY — premium contextual bridge ─────────────────────── */
.res-form-env-summary{
  display:none;
  align-items:center;
  gap:1.5rem;
  padding:1.4rem 1.6rem;
  margin-bottom:3rem;
  background:linear-gradient(135deg,rgba(43,74,59,.14) 0%,rgba(255,255,255,.025) 100%);
  border:1px solid rgba(255,255,255,.07);
  border-left:2px solid rgba(183,147,88,.38);
  border-radius:14px;
  position:relative;overflow:hidden;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
.res-form-env-summary::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 0% 50%,rgba(183,147,88,.06) 0%,transparent 70%);
}
.res-form-env-summary.is-visible{display:flex}

/* Thumbnail */
.res-form-env-thumb-wrap{
  width:64px;height:64px;border-radius:11px;overflow:hidden;flex-shrink:0;
  border:1px solid rgba(255,255,255,.1);
  position:relative;
}
.res-form-env-thumb-wrap img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) brightness(.82);
  transition:filter .6s ease;
}
.res-form-env-thumb-glow{
  position:absolute;inset:0;border-radius:11px;
  background:linear-gradient(135deg,rgba(183,147,88,.08) 0%,transparent 60%);
  pointer-events:none;
}

/* Text group */
.res-form-env-text{
  display:flex;flex-direction:column;gap:.35rem;
  flex:1;min-width:0;
}
.res-form-env-kicker{
  display:flex;align-items:center;gap:.5rem;
  font-size:.44rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(183,147,88,.58);
  line-height:1;
}
.res-form-env-kicker-dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(183,147,88,.7);flex-shrink:0;
  animation:live-glow 2.2s ease-in-out infinite;
}
.res-form-env-name{
  font-family:'Instrument Serif',serif;
  font-size:1.22rem;font-style:italic;
  color:rgba(255,255,255,.9);line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.015em;
}
.res-form-env-cap{
  font-size:.75rem;font-weight:300;
  color:rgba(255,255,255,.35);
  font-style:italic;font-family:'Instrument Serif',serif;
  line-height:1;
}

/* Alterar button */
.res-form-env-alter-btn{
  display:inline-flex;align-items:center;gap:.45rem;flex-shrink:0;
  font-family:'Inter',sans-serif;font-size:.5rem;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.28);
  background:transparent;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:.6rem 1rem;
  cursor:pointer;
  transition:color .45s cubic-bezier(.22,1,.36,1),
             border-color .45s cubic-bezier(.22,1,.36,1),
             background .45s cubic-bezier(.22,1,.36,1);
  white-space:nowrap;outline:none;
}
.res-form-env-alter-btn:hover{
  color:rgba(183,147,88,.82);
  border-color:rgba(183,147,88,.25);
  background:rgba(183,147,88,.06);
}
.res-form-env-alter-btn svg{opacity:.6;transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.res-form-env-alter-btn:hover svg{opacity:1;transform:translateX(-2px)}

/* Hide legacy elements */
.res-form-env-change{display:none}
.res-form-summary-pills{display:none}

/* ── FORM COLUMN — steps ─────────────────────────────────────────── */
.res-form-column{width:100%}

/* ══════════════════════════════════════════════════════════════════
   STEPS — Frameless, on green background
   ══════════════════════════════════════════════════════════════════ */
.res-step{
  display:grid;grid-template-columns:52px 1fr;gap:0 1.5rem;
  padding:2.5rem 0;
  border-top:1px solid rgba(255,255,255,.065);
  transition:background 0.7s cubic-bezier(.22,1,.36,1),
             border-radius 0.7s cubic-bezier(.22,1,.36,1);
  position:relative;z-index:1;
  border-radius:8px;
}
.res-step.has-open-widget{z-index:100}
.res-step:last-of-type{border-bottom:1px solid rgba(255,255,255,.065)}
.res-step:hover{
  background:rgba(255,255,255,.025);
  border-radius:12px;
}
/* Golden left accent bar on hover */
.res-step::before{
  content:'';
  position:absolute;left:-.5rem;top:50%;transform:translateY(-50%);
  width:2px;height:0;
  background:linear-gradient(to bottom,transparent,rgba(183,147,88,.45),transparent);
  border-radius:2px;
  transition:height .4s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.res-step:hover::before{height:60%}
.res-step::after{display:none}

.res-step-index{display:flex;flex-direction:column;align-items:center;padding-top:.3rem}
.res-step-num{
  font-family:'Instrument Serif',serif;
  font-size:1.65rem;color:rgba(255,255,255,.22);
  letter-spacing:-.03em;line-height:1;
  transition:color .55s cubic-bezier(.22,1,.36,1),text-shadow .55s ease;flex-shrink:0;
  position:relative;
}
.res-step:hover .res-step-num{color:rgba(183,147,88,.58)}
.res-step-bar{
  flex:1;width:1px;
  background:linear-gradient(to bottom,rgba(255,255,255,.07) 0%,rgba(183,147,88,.1) 50%,transparent 100%);
  margin-top:.6rem;min-height:16px;position:relative;overflow:hidden;
}
.res-step-bar::after{
  content:'';
  position:absolute;top:-100%;left:0;width:100%;height:60%;
  background:linear-gradient(to bottom,transparent,rgba(183,147,88,.35),transparent);
  animation:resStepBarFlow 4s ease-in-out infinite;
}
@keyframes resStepBarFlow{
  0%{top:-100%}100%{top:200%}
}

.res-step-body{min-width:0;position:relative;z-index:1}
.res-step-label{
  display:block;font-size:.62rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;
  color:rgba(183,147,88,.82);
  margin-bottom:.65rem;
}
.res-step-sublabel{
  display:block;font-size:1rem;font-weight:300;
  color:rgba(255,255,255,.48);margin-bottom:1.65rem;
  line-height:1.8;font-style:italic;
  font-family:'Instrument Serif',serif;
}
.res-step--info{padding-bottom:3rem}

/* ══════════════════════════════════════════════════════════════════
   CUSTOM DATEPICKER — dark premium, integrated with green UI
   ══════════════════════════════════════════════════════════════════ */
.rcd-wrap{position:relative;width:100%;max-width:320px;z-index:1}
.rcd-wrap.is-active{z-index:200}
.rcd-trigger{
  display:flex;align-items:center;gap:.85rem;
  width:100%;padding:1rem 1.25rem;
  font-family:'Inter',sans-serif;font-size:.88rem;font-weight:400;
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;cursor:pointer;
  transition:background .6s cubic-bezier(.22,1,.36,1),
             border-color .6s cubic-bezier(.22,1,.36,1),
             box-shadow .6s cubic-bezier(.22,1,.36,1);
  text-align:left;outline:none;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.rcd-trigger:hover:not([disabled]){background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2)}
.rcd-trigger:focus:not([disabled]){border-color:rgba(183,147,88,.55);box-shadow:0 0 0 3px rgba(183,147,88,.12)}
.rcd-trigger[disabled]{opacity:.25;pointer-events:none;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.05)}
.rcd-icon{flex-shrink:0;color:rgba(255,255,255,.45)}
.rcd-value{flex:1;color:rgba(255,255,255,.45);font-family:'Inter',sans-serif;font-size:.88rem;font-weight:300}
.rcd-value.has-date{color:rgba(255,255,255,.88);font-weight:400}

/* Calendar popup — dark green glass, not white */
.rcd-calendar{
  position:absolute;top:calc(100% + 8px);left:0;z-index:300;
  width:320px;
  background:rgba(14,22,17,.96);
  backdrop-filter:blur(32px);
  -webkit-backdrop-filter:blur(32px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  box-shadow:
    0 32px 80px -12px rgba(0,0,0,.8),
    0 8px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06);
  padding:1.35rem;
  opacity:0;transform:translateY(-10px) scale(.97);
  pointer-events:none;
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
.rcd-calendar.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.rcd-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.25rem;padding:0 .15rem;
}
.rcd-month{
  font-family:'Instrument Serif',serif;
  font-size:1rem;font-style:italic;
  color:rgba(255,255,255,.82);flex:1;text-align:center;
}
.rcd-nav{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  border-radius:8px;cursor:pointer;
  color:rgba(255,255,255,.4);
  transition:all .2s ease;
}
.rcd-nav:hover:not([disabled]){
  background:rgba(183,147,88,.12);
  border-color:rgba(183,147,88,.25);
  color:rgba(183,147,88,.85);
}
.rcd-nav[disabled]{opacity:.18;cursor:default;pointer-events:none}

.rcd-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.6rem}
.rcd-weekdays span{
  font-size:.46rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.2);
  text-align:center;padding:.4rem 0;
}
.rcd-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.rcd-day{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1;
  font-size:.8rem;font-weight:400;
  color:rgba(255,255,255,.62);
  border:none;background:transparent;
  border-radius:8px;cursor:pointer;
  transition:all .18s ease;
  position:relative;
}
.rcd-day:hover:not(.is-disabled):not(.is-selected):not(.is-empty){
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.9);
}
.rcd-day.is-today:not(.is-selected){
  font-weight:600;
  color:rgba(183,147,88,.9);
}
.rcd-day.is-today:not(.is-selected)::after{
  content:'';position:absolute;bottom:3px;left:50%;
  transform:translateX(-50%);
  width:4px;height:2px;border-radius:1px;
  background:rgba(183,147,88,.7);opacity:.8;
}
.rcd-day.is-selected{
  background:var(--c-primary);
  color:#fff;font-weight:600;
  box-shadow:0 4px 16px rgba(43,74,59,.5);
  border:1px solid rgba(255,255,255,.1);
}
.rcd-day.is-disabled,
.rcd-day.is-past{
  color:rgba(255,255,255,.14);
  cursor:not-allowed;
  text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.08);
}
.rcd-day.is-empty{pointer-events:none}

/* ══════════════════════════════════════════════════════════════════
   PARTY SIZE PILLS — premium, less dense
   ══════════════════════════════════════════════════════════════════ */
.res-pills{display:flex;flex-wrap:wrap;gap:.6rem}
.res-pill{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;padding:0;
  font-family:'Inter',sans-serif;font-size:.9rem;font-weight:500;
  color:rgba(255,255,255,.58);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;cursor:pointer;
  transition:all .45s cubic-bezier(.22,1,.36,1);
  user-select:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.res-pill:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.2);
  color:rgba(255,255,255,.9);
  transform:translateY(-2px);
  box-shadow:0 6px 18px -4px rgba(0,0,0,.3);
}
.res-pill.active{
  background:rgba(43,74,59,.8);
  color:#fff;
  border-color:rgba(43,74,59,.95);
  box-shadow:0 4px 20px -4px rgba(0,0,0,.4),0 0 0 1px rgba(183,147,88,.18);
  font-weight:600;
}

/* ══════════════════════════════════════════════════════════════════
   TIME SLOTS — premium, grouped clearly
   ══════════════════════════════════════════════════════════════════ */
.res-times-area{min-height:60px;position:relative}
.res-times-empty{
  font-size:.9rem;font-weight:300;
  color:rgba(255,255,255,.3);
  font-style:italic;font-family:'Instrument Serif',serif;padding:.5rem 0;
}
.res-times-skeleton{display:flex;flex-wrap:wrap;gap:.55rem}
.res-skeleton-pill{
  width:80px;height:44px;border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 75%);
  background-size:200% 100%;animation:skeletonShimmer 1.5s ease-in-out infinite;
}
.res-time-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:82px;height:46px;padding:0 1.2rem;
  font-family:'Inter',sans-serif;font-size:.84rem;font-weight:500;letter-spacing:.03em;
  color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;cursor:pointer;
  transition:all .45s cubic-bezier(.22,1,.36,1);
  user-select:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.res-time-pill:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.2);
  color:rgba(255,255,255,.92);
  transform:translateY(-2px);
  box-shadow:0 6px 18px -4px rgba(0,0,0,.3);
}
.res-time-pill.active{
  background:rgba(43,74,59,.8);
  color:#fff;
  border-color:rgba(43,74,59,.95);
  box-shadow:0 4px 20px -4px rgba(0,0,0,.4),0 0 0 1px rgba(183,147,88,.18);
  font-weight:600;
}
.res-time-group{width:100%;margin-bottom:.35rem}
.res-time-group-label{
  display:flex;align-items:center;gap:.75rem;
  font-size:.47rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.28);margin-bottom:1rem;
}
.res-time-group-label::after{content:'';flex:1;height:1px;background:linear-gradient(to right,rgba(255,255,255,.09),transparent)}
.res-time-group-pills{display:flex;flex-wrap:wrap;gap:.6rem}

/* ══════════════════════════════════════════════════════════════════
   FORM INPUTS — Glass, floating on green background
   ══════════════════════════════════════════════════════════════════ */
.res-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 2rem}
.res-form-field{display:flex;flex-direction:column}
.res-form-field.full-width{grid-column:1/-1}
.res-form-label{
  display:block;font-size:.48rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.48);
  margin-bottom:.65rem;
}
.res-form-input{
  font-family:'Inter',sans-serif;
  font-size:.9rem;font-weight:400;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:1.1rem 1.25rem;
  height:54px;
  transition:background .6s cubic-bezier(.22,1,.36,1),
             border-color .6s cubic-bezier(.22,1,.36,1),
             box-shadow .6s cubic-bezier(.22,1,.36,1),
             opacity .5s ease;
  width:100%;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  scroll-margin-top: 120px;
}
.res-form-input:hover:not(:disabled){
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.2);
}
.res-form-input:focus{
  outline:none;
  background:rgba(255,255,255,.12);
  border-color:rgba(183,147,88,.55);
  box-shadow:0 0 0 3px rgba(183,147,88,.12),inset 0 1px 0 rgba(255,255,255,.08);
}
.res-form-input::placeholder{
  color:rgba(255,255,255,.22);
  font-weight:300;
}
.res-form-input:disabled{
  opacity:.25;cursor:not-allowed;
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.05);
}
textarea.res-form-input{
  resize:none;
  min-height:110px;
  height:auto;
  line-height:1.82;
  padding:1.1rem 1.25rem;
}
.res-form-grid--info{gap:1.4rem 2rem}

/* ══════════════════════════════════════════════════════════════════
   CTA AREA — Integrated into green background
   ══════════════════════════════════════════════════════════════════ */
.res-cta-area{
  margin-top:3.5rem;padding-top:1.5rem;
}
.res-cta-divider{display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem}
.res-cta-divider-line{
  flex:1;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.1) 30%,rgba(255,255,255,.1) 70%,transparent);
}
.res-cta-divider-label{
  color:rgba(255,255,255,.55);
  white-space:nowrap;padding:0 .75rem;
  font-family:'Instrument Serif',serif;
  font-style:italic;font-size:.95rem;
  letter-spacing:-.01em;font-weight:300;
}
.res-cta-divider-ornament{
  width:5px;height:5px;border:1px solid rgba(183,147,88,.4);
  transform:rotate(45deg);flex-shrink:0;
  background:rgba(183,147,88,.1);
}
/* CTA — centered */
.res-cta-center{
  display:flex;flex-direction:column;
  align-items:center;
}
.res-submit-btn{
  display:flex;align-items:center;justify-content:center;gap:.85rem;
  width:100%;max-width:420px;
  padding:1.25rem 3rem;
  font-family:'Inter',sans-serif;font-size:.67rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
  background:#163628;
  border:1px solid rgba(183,147,88,.18);
  border-radius:99px;cursor:pointer;
  position:relative;overflow:hidden;
  transition:all .45s cubic-bezier(.22,1,.36,1);
  box-shadow:0 6px 22px -4px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
  transform:translateZ(0);
  will-change:transform;
}
.res-submit-btn::before{
  content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform:skewX(-18deg);z-index:1;pointer-events:none;
}
.res-submit-btn:hover::before{animation:resCtaSweep .85s ease-out forwards}
@keyframes resCtaSweep{0%{left:-75%}100%{left:150%}}
.res-submit-btn:hover{
  transform:translate3d(0,-2px,0);
  background:#1d4a35;
  border-color:rgba(183,147,88,.42);
  color:#fff;
  box-shadow:0 10px 32px -6px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
}
.res-submit-btn:active{transform:translate3d(0,0,0) scale(.99)}

/* ── Shake micro-interaction — validation error feedback ───────────
   Short, tight, elegant. Amplitude stays under 5px so it reads as
   "a nudge", not a cartoon bounce. 0.32s total — gone before the
   user notices it was an animation at all.
─────────────────────────────────────────────────────────────────── */
@keyframes resSubmitShake {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(-5px); }
  36%  { transform: translateX(4px); }
  54%  { transform: translateX(-3px); }
  72%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
.res-submit-btn.is-shaking {
  animation: resSubmitShake 0.32s cubic-bezier(.36,.07,.19,.97) both !important;
}
.res-submit-btn.loading{pointer-events:none;opacity:.85}
.res-submit-btn.success{background:linear-gradient(135deg,#345e47 0%,#3a6350 100%);pointer-events:none}
.res-submit-btn.error{background:linear-gradient(135deg,#8C3131 0%,#723030 100%);pointer-events:none}
.res-cta-hint{
  margin-top:1.1rem;font-size:.65rem;
  color:rgba(255,255,255,.22);
  letter-spacing:.02em;font-style:italic;
  font-family:'Instrument Serif',serif;
  text-align:center;
}
.res-spinner{display:none;width:15px;height:15px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:resSpin .7s linear infinite}
.loading .res-spinner{display:block}
@keyframes resSpin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════════════
   FEEDBACK PANELS — glass on green
   ══════════════════════════════════════════════════════════════════ */
.res-feedback{margin-top:2rem;padding:2rem 2.25rem;border-radius:16px;opacity:0;transform:translateY(10px);transition:all .5s cubic-bezier(.16,1,.3,1);display:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.res-feedback.visible{opacity:1;transform:translateY(0);display:block}
.res-feedback-success{background:rgba(43,74,59,.18);border:1px solid rgba(43,74,59,.35)}
.res-feedback-error{background:rgba(140,49,49,.14);border:1px solid rgba(140,49,49,.28)}
.res-feedback-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;margin:0 auto .9rem}
.res-feedback-success .res-feedback-icon{background:rgba(43,74,59,.25);color:rgba(255,255,255,.85)}
.res-feedback-error .res-feedback-icon{background:rgba(140,49,49,.2);color:rgba(255,255,255,.85)}
.res-feedback-title{font-family:'Instrument Serif',serif;font-size:1.45rem;text-align:center;margin-bottom:.45rem;color:rgba(255,255,255,.9)}
.res-feedback-text{font-size:.84rem;color:rgba(255,255,255,.46);text-align:center;line-height:1.78}
.res-feedback-text a{color:rgba(183,147,88,.8);text-decoration:underline;text-underline-offset:3px}
.res-feedback-actions{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1.65rem;flex-wrap:wrap}
.res-feedback-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.8rem 1.6rem;font-family:'Inter',sans-serif;font-size:.63rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:none;border-radius:10px;cursor:pointer;transition:all .35s cubic-bezier(.16,1,.3,1);line-height:1}
.res-feedback-btn-primary{background:rgba(43,74,59,.7);color:#fff;border:1px solid rgba(255,255,255,.1)}
.res-feedback-btn-primary:hover{background:rgba(43,74,59,.9);transform:translateY(-2px);box-shadow:0 8px 24px -6px rgba(0,0,0,.4)}
.res-feedback-btn-secondary{background:transparent;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.12)}
.res-feedback-btn-secondary:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.res-feedback-link{display:block;text-align:center;margin-top:1rem;font-size:.7rem;font-weight:500;color:rgba(255,255,255,.25);text-decoration:none;transition:color .3s ease}
.res-feedback-link:hover{color:rgba(183,147,88,.7)}

/* ══════════════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */
.res-reveal{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.res-reveal.is-visible{opacity:1;transform:translateY(0)}

/* ══════════════════════════════════════════════════════════════════
   FOOTER TRANSITION
   ══════════════════════════════════════════════════════════════════ */
.res-to-footer{height:300px;background:linear-gradient(180deg,#f2ebe0 0%,#e0d5c2 15%,#c0b196 32%,#8a7a60 50%,#4a4030 68%,#1e1c14 85%,#0d1610 100%);position:relative;z-index:59;overflow:hidden;display:flex;align-items:center;justify-content:center}
.res-to-footer-line{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(183,147,88,.2) 35%,rgba(183,147,88,.4) 50%,rgba(183,147,88,.2) 65%,transparent 95%)}
.res-to-footer-ornament{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:2}
.res-to-footer-diamond{width:10px;height:10px;border:1px solid rgba(183,147,88,.3);transform:rotate(45deg);background:rgba(183,147,88,.08);animation:resBridgePulse 3s ease-in-out infinite}
@keyframes resBridgePulse{0%,100%{opacity:.5;transform:rotate(45deg) scale(1)}50%{opacity:1;transform:rotate(45deg) scale(1.2);box-shadow:0 0 16px rgba(183,147,88,.15)}}

/* Particles */
.res-hero-particle{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(183,147,88,.5);pointer-events:none;z-index:4;animation:resParticleRise linear infinite;opacity:0}
@keyframes resParticleRise{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:1}70%{opacity:.6}100%{opacity:0;transform:translateY(-140px) scale(0)}}

/* Compat stubs */
.res-interlude{display:none}
.res-split-layout{display:block}
.res-preview-column{display:none!important}

/* ══════════════════════════════════════════════════════════════════
   CINEMATIC SECTION DIVIDER — hero to environment transition
   ══════════════════════════════════════════════════════════════════ */
.res-section-divider{
  position:relative;z-index:51;
  display:flex;align-items:center;gap:0;
  padding:0;margin:0;
  background:#0c1510;
  height:48px;
  overflow:hidden;
}
.res-section-divider-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(183,147,88,.18) 40%,rgba(183,147,88,.18) 60%,transparent);
}
.res-section-divider-ornament{
  display:flex;align-items:center;justify-content:center;
  padding:0 1.5rem;flex-shrink:0;
}
.res-section-divider-diamond{
  display:block;width:8px;height:8px;
  border:1px solid rgba(183,147,88,.35);
  transform:rotate(45deg);
  background:rgba(183,147,88,.08);
  animation:resDivDiamondPulse 3s ease-in-out infinite;
}
@keyframes resDivDiamondPulse{
  0%,100%{opacity:.5;box-shadow:0 0 0 rgba(183,147,88,0)}
  50%{opacity:1;box-shadow:0 0 12px rgba(183,147,88,.15)}
}

/* ══════════════════════════════════════════════════════════════════
   BOTANICAL WATERMARK — env section — HIDDEN (replaced by scroll word)
   ══════════════════════════════════════════════════════════════════ */
.res-env-watermark{
  display:none!important;
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL-DRIVEN HORIZONTAL WORD — env section (like TEMPO in index)
   ══════════════════════════════════════════════════════════════════ */
.res-env-scroll-word{
  position:absolute;
  top:42%;left:0;
  z-index:0;pointer-events:none;
  overflow:hidden;width:100%;
  display:flex;align-items:center;
  user-select:none;
  will-change:transform;
}
.res-env-scroll-word-text{
  font-family:'Instrument Serif',serif;
  font-size:clamp(9rem,22vw,20rem);
  font-style:italic;
  font-weight:400;
  line-height:1;
  white-space:nowrap;
  letter-spacing:-.04em;
  color:rgba(255,255,255,.022);
  display:block;
  transform:translateX(30%);
  will-change:transform;
}
@media(max-width:768px){.res-env-scroll-word{display:none}}

/* ══════════════════════════════════════════════════════════════════
   FLOATING GOLDEN ACCENT LINES
   ══════════════════════════════════════════════════════════════════ */
.res-float-line{
  position:absolute;pointer-events:none;z-index:2;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(183,147,88,.12),transparent);
}
.res-float-line-1{
  top:35%;left:0;right:40%;
  animation:resFloatLine1 18s ease-in-out infinite;
}
.res-float-line-2{
  bottom:25%;left:50%;right:0;
  animation:resFloatLine2 22s ease-in-out infinite 4s;
}
@keyframes resFloatLine1{
  0%,100%{opacity:.3;transform:translateX(0)}
  50%{opacity:.7;transform:translateX(20px)}
}
@keyframes resFloatLine2{
  0%,100%{opacity:.2;transform:translateX(0)}
  50%{opacity:.5;transform:translateX(-15px)}
}
@media(max-width:768px){.res-float-line{display:none}}

/* ══════════════════════════════════════════════════════════════════
   GOLDEN CORNER ACCENTS — form section
   ══════════════════════════════════════════════════════════════════ */
.res-corner-accent{
  position:absolute;z-index:3;pointer-events:none;
  width:80px;height:80px;
}
.res-corner-tl{
  top:3rem;left:3rem;
  border-top:1px solid rgba(183,147,88,.08);
  border-left:1px solid rgba(183,147,88,.08);
  animation:resCornerFade 6s ease-in-out infinite;
}
.res-corner-br{
  bottom:8rem;right:3rem;
  border-bottom:1px solid rgba(183,147,88,.08);
  border-right:1px solid rgba(183,147,88,.08);
  animation:resCornerFade 6s ease-in-out infinite 3s;
}
@keyframes resCornerFade{
  0%,100%{opacity:.4}
  50%{opacity:1}
}
@media(max-width:1024px){.res-corner-accent{display:none}}

/* ══════════════════════════════════════════════════════════════════
   GOLDEN DUST PARTICLES — form section
   ══════════════════════════════════════════════════════════════════ */
.res-golden-dust{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.res-dust-mote{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(183,147,88,.35);
  animation:resDustFloat linear infinite;
  opacity:0;
}
@keyframes resDustFloat{
  0%{opacity:0;transform:translateY(0) translateX(0) scale(.3)}
  10%{opacity:1}
  50%{opacity:.6;transform:translateY(-80px) translateX(20px) scale(.8)}
  90%{opacity:.2}
  100%{opacity:0;transform:translateY(-180px) translateX(-10px) scale(.1)}
}

/* ══════════════════════════════════════════════════════════════════
   ENHANCED HERO EFFECTS
   ══════════════════════════════════════════════════════════════════ */

/* Hero title subtle text shadow for depth */
.res-hero-title{
  text-shadow:0 2px 40px rgba(0,0,0,.3),0 0 80px rgba(183,147,88,.06);
}

/* Hero CTA shimmer sweep on load */
.res-hero-cta::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(183,147,88,.12),transparent);
  transform:skewX(-15deg);pointer-events:none;
  animation:resCtaShimmer 4s ease-in-out infinite 3s;
}
@keyframes resCtaShimmer{
  0%{left:-100%;opacity:0}
  15%{opacity:1}
  100%{left:200%;opacity:0}
}

/* ══════════════════════════════════════════════════════════════════
   ENHANCED CARD EFFECTS
   ══════════════════════════════════════════════════════════════════ */

/* Inner glow on selected card */
.res-env-card.is-selected::after{
  content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 30px rgba(183,147,88,.08);
}

/* Subtle breathing border on selected */
.res-env-card.is-selected{
  animation:resCardBreath 3s ease-in-out infinite;
}
@keyframes resCardBreath{
  0%,100%{border-color:rgba(183,147,88,.4)}
  50%{border-color:rgba(183,147,88,.65)}
}

/* ══════════════════════════════════════════════════════════════════
   ENHANCED FORM EFFECTS
   ══════════════════════════════════════════════════════════════════ */

/* Input focus glow ring */
.res-form-input:focus{
  box-shadow:
    0 0 0 3px rgba(183,147,88,.1),
    0 0 20px rgba(183,147,88,.05),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Step number golden glow on hover */
.res-step:hover .res-step-num{
  text-shadow:0 0 16px rgba(183,147,88,.2);
}

/* Submit button — very subtle breathing shadow, natural tone */
.res-submit-btn{
  animation:resSubmitGlow 5s ease-in-out infinite;
}
@keyframes resSubmitGlow{
  0%,100%{box-shadow:0 4px 18px -4px rgba(0,0,0,.28)}
  50%{box-shadow:0 6px 26px -4px rgba(30,68,50,.45)}
}

/* ══════════════════════════════════════════════════════════════════
   ENHANCED SECTION LABEL — animated dot pulse
   ══════════════════════════════════════════════════════════════════ */
.res-section-label-dot{
  position:relative;
}
.res-section-label-dot::after{
  content:'';position:absolute;inset:-4px;
  border-radius:50%;
  border:1px solid rgba(183,147,88,.2);
  animation:resDotRing 2.5s ease-in-out infinite;
}
@keyframes resDotRing{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.6);opacity:0}
}

/* ══════════════════════════════════════════════════════════════════
   ENHANCED SCROLL REVEAL — slight rotation on entry
   ══════════════════════════════════════════════════════════════════ */
.res-reveal{
  transform:translateY(24px) rotate(.3deg);
}
.res-reveal.is-visible{
  transform:translateY(0) rotate(0deg);
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:1199px){
  .res-section-ambient-1,.res-section-ambient-2{opacity:.55}
}
@media(max-width:1024px){
  .res-section-ambient-1,.res-section-ambient-2{display:none}
  .res-section{padding:5rem 0 5rem}
}

/* ══════════════════════════════════════════════════════════════════
   HERO MOBILE — Premium Fully Refined (≤ 767px)
   Estratégia:
     • Viewport seguro com 100svh (sem jump de iOS)
     • Conteúdo centralizado no eixo Y — text-align: center
     • Hierarquia clara: kicker < body < headline (dominante)
     • CTA: proporcional, 44px mínimo, cor gold legível
     • Scroll indicator: discreto mas visível
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Viewport ── */
  .res-hero{
    height: 100svh !important;
    min-height: 580px !important;
    max-height: 920px !important;
  }

  /* ── Container: content at upper portion, video card at bottom ── */
  .res-hero-container{
    padding: 0 1.75rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 10vh !important;
  }

  /* ── Content: flex column, centralizado, ritmo vertical controlado ── */
  .res-hero-content{
    max-width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important;
  }

  /* ── Kicker ── */
  .res-hero-kicker{
    font-size: .52rem !important;
    letter-spacing: .24em !important;
    gap: .6rem !important;
    margin-bottom: 1.25rem !important;
    justify-content: center !important;
    color: rgba(255,255,255,.35) !important;
  }
  .res-hero-kicker-line{
    width: 16px !important;
  }

  /* ── Título ── */
  .res-hero-title{
    font-size: clamp(2.8rem, 10.5vw, 4rem) !important;
    line-height: .94 !important;
    letter-spacing: -.035em !important;
    text-align: center !important;
    margin: 0 !important;
  }
  .res-hero-title em{
    display: block !important;
    color: rgba(183,147,88,.92) !important;
  }

  /* ── Separador: ESTÁTICO no mobile — sem animação, sem pseudo-elemento ── */
  .res-hero-sep{
    display: block !important;
    width: 32px !important;
    height: 1px !important;
    align-self: center !important;
    margin-top: 1rem !important;
    margin-bottom: 2rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: rgba(183,147,88,.45) !important;
    position: static !important;
    overflow: hidden !important;
    animation: none !important;
    transform: none !important;
  }
  .res-hero-sep::before,
  .res-hero-sep::after{
    content: none !important;
    display: none !important;
    animation: none !important;
    width: 0 !important;
    height: 0 !important;
    position: static !important;
  }

  /* ── Body ── */
  .res-hero-body{
    font-size: .88rem !important;
    line-height: 1.75 !important;
    color: rgba(255,255,255,.44) !important;
    margin: 0 0 2rem 0 !important;
    max-width: 300px !important;
    text-align: center !important;
  }

  /* ── CTA ── */
  .res-hero-cta{
    padding: .88rem 2rem !important;
    font-size: .60rem !important;
    letter-spacing: .18em !important;
    min-height: 44px !important;
    white-space: nowrap !important;
    align-self: center !important;
  }

  /* ── Scroll indicator: centrado exato na hero ── */
  .res-hero-scroll{
    position: absolute !important;
    bottom: clamp(1.25rem, 4svh, 2.25rem) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: max-content !important;
  }
  .res-hero-scroll-label{
    font-size: .42rem !important;
    letter-spacing: .32em !important;
    color: rgba(255,255,255,.28) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .res-hero-scroll-track{
    height: 28px !important;
    width: 1px !important;
    background: rgba(255,255,255,.08) !important;
    margin: 0 auto !important;
  }

  /* ── Overlay: reforçado para legibilidade do texto ── */
  .res-hero-overlay{
    background: linear-gradient(
      155deg,
      rgba(4,8,6,.90) 0%,
      rgba(8,16,11,.68) 45%,
      rgba(4,8,6,.55) 100%
    ) !important;
  }

  /* ── Seções abaixo da hero ── */
  .res-section{padding:4rem 0 4.5rem}
  .res-section-header{margin-bottom:2.25rem}
  .res-step{grid-template-columns:40px 1fr;gap:0 1rem;padding:1.75rem 0}
  .res-step:hover{padding-left:.75rem;margin:0 -.1rem}
  .res-step-num{font-size:1.2rem}
  .res-form-grid{grid-template-columns:1fr;gap:1.15rem}
  .res-pills{gap:.4rem}
  .res-pill,.res-time-pill{min-width:42px;height:40px;padding:0 .8rem;font-size:.78rem}
  .res-submit-btn{max-width:100%;padding:1.2rem 2rem}
  .rcd-calendar{width:calc(100vw - 3rem);max-width:310px;left:50%;transform:translateX(-50%) translateY(-8px) scale(.98)}
  .rcd-calendar.is-open{transform:translateX(-50%) translateY(0) scale(1)}
  .res-to-footer{height:200px}
  .res-env-section{padding:4rem 0 2.5rem}
  .res-form-env-summary{flex-wrap:wrap;gap:.75rem 1rem}
  .res-form-env-thumb-wrap{width:52px;height:52px}
}

/* ══════════════════════════════════════════════════════════════════
   HERO — Telas muito pequenas (≤ 480px — iPhone SE, Mini)
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:480px){

  /* Hero content: menos padding topo em telas bem pequenas */
  .res-hero-container{padding:0 1.25rem !important}
  .res-hero-content{
    padding-top: max(4.5rem, 64px) !important;
    padding-bottom: 1.25rem !important;
  }

  /* Kicker: ainda mais compacto */
  .res-hero-kicker{
    font-size: .50rem !important;
    margin-bottom: .9rem !important;
  }

  /* Headline: ligeiramente menor para não transbordar */
  .res-hero-title{
    font-size: clamp(2.45rem, 10vw, 3.2rem) !important;
    margin-bottom: 0 !important;
  }

  /* Body: ainda mais compacto */
  .res-hero-body{
    font-size: .82rem !important;
    margin-bottom: 1.5rem !important;
    max-width: 280px !important;
  }

  /* CTA: padding ligeiramente menor */
  .res-hero-cta{
    padding: .75rem 1.5rem !important;
    font-size: .60rem !important;
  }

  /* Restante das seções */
  .res-step{grid-template-columns:34px 1fr;padding:1.5rem 0}
  .res-step-num{font-size:1rem}
  .rcd-trigger,.res-form-input{font-size:.84rem}
  .res-cta-area{margin-top:2rem}
  .res-env-section-inner{padding:0 1.25rem}
  .res-form-env-summary{padding:1rem 1.25rem;gap:.75rem}
  .res-form-env-change{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   ENV CARDS — PARALLAX + FADE-IN ENTRANCE
   ══════════════════════════════════════════════════════════════════ */

/* Cards start invisible — JS/GSAP will animate them in */
.res-env-card.parallax-card{
  opacity:0;
  transform:translateY(48px) scale(.97);
  transition: none; /* GSAP controls transition */
}
.res-env-card.parallax-card.is-revealed{
  /* final state set by GSAP */
}

/* Parallax depth: card image moves at different rate than container */
.res-env-card .res-env-card-img{
  will-change: transform;
}

/* Section header reveal — starts invisible */
.res-env-header-reveal{
  opacity:0;
  transform:translateY(32px);
  filter:blur(8px);
  transition:none;
}
.res-env-header-reveal.is-revealed{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* ══════════════════════════════════════════════════════════════════
   FINAL POLISH LAYER
   ══════════════════════════════════════════════════════════════════ */

/* Card — glass edge highlight on hover (top-left rim light) */
.res-env-card::before{
  content:'';
  position:absolute;inset:0;z-index:6;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 45%);
  opacity:0;transition:opacity .5s ease;
}
.res-env-card:hover::before{opacity:1}

/* Card content bottom gradient — richer, warm tinted */
.res-env-card-overlay{
  background:linear-gradient(
    180deg,
    rgba(4,8,6,0) 0%,
    rgba(4,8,6,.12) 35%,
    rgba(6,14,8,.78) 72%,
    rgba(6,14,8,.95) 100%
  );
}

/* Form section — decorative right-edge vertical rule */
.res-section::after{
  content:'';
  position:absolute;top:10%;right:calc(5rem - 1px);bottom:10%;
  width:1px;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(43,74,59,.18) 20%,
    rgba(183,147,88,.1) 50%,
    rgba(43,74,59,.18) 80%,
    transparent
  );
  z-index:3;pointer-events:none;
  animation:resRulePulse 8s ease-in-out infinite;
}
@keyframes resRulePulse{
  0%,100%{opacity:.5}
  50%{opacity:1}
}
@media(max-width:1024px){.res-section::after{display:none}}

/* Section title — underline wipe on scroll entry */
.res-section-title{
  position:relative;display:inline-block;
}
.res-section-title::after{
  content:'';
  position:absolute;bottom:-.15em;left:0;
  height:1px;width:0;
  background:linear-gradient(90deg,rgba(183,147,88,.4),transparent);
  transition:width 1.2s cubic-bezier(.16,1,.3,1);
}
.res-reveal.is-visible .res-section-title::after{width:100%}

/* Env section title same treatment */
.res-env-section-title{position:relative;display:inline-block;}
.res-env-section-title::after{
  content:'';
  position:absolute;bottom:-.12em;left:0;
  height:1px;width:0;
  background:linear-gradient(90deg,rgba(183,147,88,.35),transparent);
  transition:width 1.4s cubic-bezier(.16,1,.3,1) .3s;
}
.res-reveal.is-visible .res-env-section-title::after{width:80%}

/* Pill active — gentle ambient glow */
.res-pill.active{
  box-shadow:
    0 4px 20px -4px rgba(0,0,0,.4),
    0 0 0 1px rgba(183,147,88,.18),
    0 0 16px rgba(43,74,59,.25);
}

/* Time pill active — same */
.res-time-pill.active{
  box-shadow:
    0 4px 20px -4px rgba(0,0,0,.4),
    0 0 0 1px rgba(183,147,88,.18),
    0 0 16px rgba(43,74,59,.25);
}

/* Nav link — subtle underline wipe on hover */
.nav-link{position:relative;}
.nav-link::after{
  content:'';
  position:absolute;bottom:-.2em;left:0;right:0;
  height:1px;width:0;
  background:currentColor;
  opacity:.35;
  transition:width .3s ease;
}
.nav-link:hover::after{width:100%}

/* Hero CTA — filled fill state on hover (solid gold) */
.res-hero-cta:hover{
  background:rgba(183,147,88,.1);
}

/* Kicker dot — second dot slightly delayed for stagger feel */
.res-hero-kicker-dot:last-of-type{
  animation-delay:1.1s;
}

/* Form env summary — animated border sweep */
.res-form-env-summary.is-visible{
  border-bottom-color:rgba(255,255,255,.07);
}
.res-form-env-summary::after{
  content:'';
  position:absolute;bottom:-1px;left:0;
  height:1px;width:0;
  background:linear-gradient(90deg,rgba(183,147,88,.25),transparent);
  transition:width 1s cubic-bezier(.16,1,.3,1);
}
.res-form-env-summary.is-visible::after{width:60%}
.res-form-env-summary{position:relative;}

/* Env section label line — animated width on reveal */
.res-reveal.is-visible .res-section-label-line{
  animation:resLabelLineGrow 1.5s cubic-bezier(.16,1,.3,1) .5s both;
}
@keyframes resLabelLineGrow{from{opacity:0;transform:scaleX(0);transform-origin:left}to{opacity:1;transform:scaleX(1)}}

/* Step label — gold underline dot on active step */
.res-step-label::after{
  content:'';display:inline-block;
  width:3px;height:3px;border-radius:50%;
  background:rgba(183,147,88,.5);
  margin-left:.5em;vertical-align:middle;
  animation:live-glow 2.2s ease-in-out infinite;
}

/* CTA divider ornament — scale in on reveal */
.res-reveal.is-visible .res-cta-divider-ornament{
  animation:resDiamondReveal .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes resDiamondReveal{from{transform:rotate(45deg) scale(0)}to{transform:rotate(45deg) scale(1)}}

/* Scrollbar — match dark green theme inside reservation page body */
body{
  scrollbar-width:thin;
  scrollbar-color:rgba(43,74,59,.35) rgba(0,0,0,.2);
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .res-hero-particle,.res-hero-sep::after,.res-submit-btn::before,.res-hero-cta::after{animation:none!important;display:none}
  .res-hero-bg video{filter:saturate(.5) brightness(.4)}
  .res-section-ambient-1,.res-section-ambient-2{animation:none!important}
  .res-env-card{transition:none!important}
  .res-env-card.is-selected{animation:none!important}
  .res-submit-btn{animation:none!important}
  .res-section-divider-diamond{animation:none!important}
  .res-env-watermark,.res-section-watermark,.res-float-line,.res-corner-accent{animation:none!important}
  .res-dust-mote{animation:none!important;display:none}
  .res-section-label-dot::after{animation:none!important}
  .res-step-bar::after{animation:none!important}
  .res-section::after{animation:none!important}
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE REFINEMENT — Environment Section & Cards
   Applies only below 767px. Desktop is untouched.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 1. ENV SECTION — breathing room ──────────────────────────── */
  .res-env-section {
    padding: 4rem 0 3rem !important;
  }
  .res-env-section-inner {
    padding: 0 1.25rem !important;
  }
  .res-env-section-header {
    margin-bottom: 2rem !important;
  }
  .res-env-section-title {
    font-size: clamp(1.7rem, 6.5vw, 2.2rem) !important;
    line-height: 1.1 !important;
  }

  /* ── 2. GRID — single column, generous gap ─────────────────────
     One card per row gives enough width for readable text and a
     proper image-to-content ratio. Gap adds vertical breathing room.
  ─────────────────────────────────────────────────────────────────── */
  .res-env-cards {
    grid-template-columns: 1fr !important;
    grid-template-rows: unset !important;
    gap: 14px !important;
    margin-bottom: 1.25rem !important;
  }

  /* ── 3. CARD — taller, no hover transform on touch ─────────────
     Aspect ratio 3/2 gives more vertical canvas so the gradient
     overlay has room to breathe and text sits clearly at the bottom.
  ─────────────────────────────────────────────────────────────────── */
  .res-env-card {
    aspect-ratio: 3 / 2 !important;
    border-radius: 16px !important;
    /* Disable lift transform on touch — no hover events anyway */
    transform: none !important;
  }
  .res-env-card:hover {
    transform: none !important;
  }
  .res-env-card.is-selected {
    transform: none !important;
    border-color: rgba(183,147,88,.55) !important;
    box-shadow: 0 0 0 1.5px rgba(183,147,88,.18), 0 8px 28px -6px rgba(0,0,0,.7) !important;
  }

  /* ── 4. OVERLAY — stronger gradient so text is always readable ──
     Extended dark zone from 45 % onwards ensures the name + cap
     text never compete with a bright area of the photo.
  ─────────────────────────────────────────────────────────────────── */
  .res-env-card-overlay {
    background: linear-gradient(
      180deg,
      rgba(4,8,6,.0) 0%,
      rgba(4,8,6,.10) 30%,
      rgba(4,8,6,.72) 62%,
      rgba(4,8,6,.96) 100%
    ) !important;
  }

  /* ── 5. CARD CONTENT — more padding, clearer hierarchy ─────────
     Extra bottom padding keeps text away from the rounded corner.
     Larger gap between name and cap gives vertical separation.
  ─────────────────────────────────────────────────────────────────── */
  .res-env-card-content {
    padding: 1rem 1.15rem 1.1rem !important;
  }
  .res-env-card-name {
    font-size: 1.05rem !important;
    line-height: 1.22 !important;
    letter-spacing: -.01em !important;
    color: rgba(255,255,255,.96) !important;
  }
  .res-env-card-cap {
    font-size: .5rem !important;
    letter-spacing: .2em !important;
    margin-top: .45rem !important;
    color: rgba(255,255,255,.38) !important;
  }

  /* Selected: gold tint on text */
  .res-env-card.is-selected .res-env-card-name {
    color: rgba(183,147,88,.96) !important;
  }
  .res-env-card.is-selected .res-env-card-cap {
    color: rgba(183,147,88,.52) !important;
  }

  /* ── 6. HOVER CUE — hide completely on touch ───────────────────
     "Clique para selecionar" is a hover label; on mobile it flashes
     on tap and crowds the card. Hide it entirely — the check badge
     is sufficient feedback.
  ─────────────────────────────────────────────────────────────────── */
  .res-env-card-hover-cue {
    display: none !important;
  }

  /* ── 7. SELECTED BADGE — smaller, top-left, discrete ───────────
     Moved to top-left so it doesn't overlap the environment name at
     bottom-left. Size reduced from 24 px to 20 px — still visible,
     never invasive.
  ─────────────────────────────────────────────────────────────────── */
  .res-env-card-check {
    width: 20px !important;
    height: 20px !important;
    top: .65rem !important;
    right: .65rem !important;
    border-width: 1px !important;
  }
  .res-env-card-check svg {
    width: 9px !important;
    height: 9px !important;
  }

  /* ── 8. SELECTED SUMMARY BAR — compact ─────────────────────────*/
  .res-env-selected-bar {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: .75rem !important;
    padding: .75rem 1rem !important;
    border-radius: 12px !important;
  }
  .res-env-selected-img-wrap {
    width: 36px !important;
    height: 36px !important;
  }
  .res-env-selected-name {
    font-size: .92rem !important;
  }
  .res-env-selected-change {
    font-size: .48rem !important;
    padding: .38rem .65rem !important;
  }

  /* ── 9. FORM SECTION — vertical breathing room ─────────────────*/
  .res-section {
    padding: 3.5rem 0 5rem !important;
  }
  .res-container {
    padding: 0 1.25rem !important;
  }
  .res-section-header {
    margin-bottom: 2.25rem !important;
  }
  .res-section-title {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
  }

  /* ── 10. STEPS — tighter index column ──────────────────────────*/
  .res-step {
    grid-template-columns: 38px 1fr !important;
    gap: 0 1rem !important;
    padding: 2rem 0 !important;
  }
  .res-step-num {
    font-size: 1.35rem !important;
  }

  /* ── 11. DATE PICKER — full width on mobile ─────────────────── */
  .rcd-wrap {
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE REFINEMENT — Passo 02 (Booking Details Section)
   Only affects max-width: 767px. Desktop untouched.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── 1. SECTION HEADER — compact title & subtitle ───────────────
     clamp() keeps the title fluid but caps it well below desktop.
     Subtitle line-height reduced: less vertical waste on scroll.
  ─────────────────────────────────────────────────────────────────── */
  .res-section-title {
    font-size: clamp(1.75rem, 8vw, 2.4rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 0.75rem !important;
    letter-spacing: -0.025em !important;
  }
  .res-section-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,0.42) !important;
  }
  .res-section-header {
    margin-bottom: 1.75rem !important;
  }
  .res-section-label-text {
    font-size: 0.5rem !important;
  }

  /* ── 2. ENV SUMMARY CARD — slimmer, more horizontal ────────────
     Reduced thumb from 64px → 48px: keeps image recognisable but
     saves ~16px of height. Padding tightened, gap between elements
     reduced so all info fits in ~2 lines max.
  ─────────────────────────────────────────────────────────────────── */
  .res-form-env-summary {
    padding: 0.85rem 1rem !important;
    gap: 0.85rem !important;
    margin-bottom: 1.75rem !important;
    border-radius: 12px !important;
    align-items: center !important;
  }
  .res-form-env-thumb-wrap {
    width: 48px !important;
    height: 48px !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
  }
  .res-form-env-text {
    gap: 0.2rem !important;
    min-width: 0 !important;
  }
  .res-form-env-kicker {
    font-size: 0.4rem !important;
    letter-spacing: 0.22em !important;
  }
  .res-form-env-name {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }
  .res-form-env-cap {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
  }
  .res-form-env-alter-btn {
    font-size: 0.44rem !important;
    padding: 0.42rem 0.7rem !important;
    border-radius: 7px !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.14em !important;
  }

  /* ── 3. PILLS (Quantidade de pessoas) — denser grid ────────────
     Fixed 4-column grid: each pill is smaller but still ~44px touch
     target. Gap reduced to 6px — tight but not cramped.
     Hover lift disabled on touch (no meaningful hover on mobile).
  ─────────────────────────────────────────────────────────────────── */
  .res-pills {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .res-pill {
    width: auto !important;
    height: 44px !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
  }
  .res-pill:hover {
    transform: none !important;
  }

  /* ── 4. STEPS — tighter padding, compact sublabel ───────────────
     Each step's internal vertical padding reduced by ~20%.
     Step sublabel: slightly smaller, tight line-height. Still reads
     well, just stops eating so much vertical space.
  ─────────────────────────────────────────────────────────────────── */
  .res-step {
    grid-template-columns: 36px 1fr !important;
    gap: 0 0.9rem !important;
    padding: 1.6rem 0 !important;
  }
  .res-step-num {
    font-size: 1.3rem !important;
  }
  .res-step-label {
    font-size: 0.54rem !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 0.5rem !important;
  }
  .res-step-sublabel {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
    color: rgba(255,255,255,0.4) !important;
  }

  /* ── 5. DATEPICKER TRIGGER — full width, compact ───────────────*/
  .rcd-wrap {
    max-width: 100% !important;
  }
  .rcd-trigger {
    padding: 0.82rem 1rem !important;
    font-size: 0.82rem !important;
  }

  /* ── 6. CTA AREA — full-width submit button ─────────────────────
     Submit button stretches to full width on mobile for easy tap.
     CTA divider label reduced in size to avoid wrapping.
  ─────────────────────────────────────────────────────────────────── */
  .res-submit-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 1.1rem 2rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.18em !important;
  }
  .res-cta-divider-label {
    font-size: 0.48rem !important;
    letter-spacing: 0.14em !important;
  }
  .res-cta-area {
    margin-top: 0.5rem !important;
  }

  /* ── 7. FORM FIELDS — full-width inputs, comfortable padding ────*/
  .res-form-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .res-form-input {
    padding: 0.82rem 1rem !important;
    font-size: 0.88rem !important;
  }
}

@media (max-width: 767px) {
  #site-footer .ft-reveal { opacity: 1 !important; transform: none !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;
  }

}

/* ══════════════════════════════════════════════════════════════════
   MOBILE PERFORMANCE OPTIMIZER (≤ 767px)
   Kills GPU-heavy ops: backdrop-filter, infinite animations,
   will-change, and complex CSS filters.
   This single block is the biggest scroll-fluidity win on mobile.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ══ NUCLEAR: Kill ALL animations on mobile ══════════════════════
     Instead of listing 30+ selectors one by one, this wildcard
     kills every animation in every element on the page.
     This is the single biggest performance win on mobile. */
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }

  /* ── Whitelist: functional animations that MUST keep running ──── */
  .res-spinner {
    animation: resSpin 0.7s linear infinite !important;
    display: inline-block !important;
  }
  /* Hide the spinner inside the submit button on mobile */
  .res-submit-btn .res-spinner {
    display: none !important;
  }

  /* ── Mobile readability: brighten colors ─────────────────────────
     Dark editorial theme is elegant on desktop but too dim on
     mobile screens viewed in daylight. Boost contrast. */

  /* Step labels */
  .res-step-label {
    color: rgba(255,255,255,.92) !important;
  }
  .res-step-sublabel {
    color: rgba(255,255,255,.55) !important;
  }
  .res-step-num {
    color: rgba(183,147,88,.85) !important;
  }

  /* Section titles */
  .res-section-title {
    color: rgba(255,255,255,.95) !important;
  }
  .res-section-title em {
    color: rgba(183,147,88,.95) !important;
  }
  .res-section-subtitle {
    color: rgba(255,255,255,.55) !important;
  }
  .res-env-section-title {
    color: rgba(255,255,255,.95) !important;
  }

  /* Form inputs */
  .res-form-input {
    color: rgba(255,255,255,.9) !important;
    border-color: rgba(255,255,255,.18) !important;
  }
  .res-form-input::placeholder {
    color: rgba(255,255,255,.35) !important;
  }
  .res-form-label {
    color: rgba(255,255,255,.7) !important;
  }

  /* Pills */
  .res-pill,
  .res-time-pill {
    color: rgba(255,255,255,.8) !important;
    border-color: rgba(255,255,255,.15) !important;
  }
  .res-pill.active,
  .res-time-pill.active {
    color: #fff !important;
    background: rgba(43,74,59,.9) !important;
    border-color: rgba(183,147,88,.5) !important;
  }

  /* Environment card names — brighter for mobile */
  .res-env-card-name {
    color: rgba(255,255,255,.95) !important;
    font-size: 1rem !important;
  }
  .res-env-card-cap {
    color: rgba(255,255,255,.6) !important;
  }

  /* Submit button — high contrast */
  .res-submit-btn {
    background: rgba(43,74,59,.95) !important;
    color: #fff !important;
    border-color: rgba(183,147,88,.4) !important;
  }

  /* Datepicker — brighter text */
  .rcd-value {
    color: rgba(255,255,255,.65) !important;
  }
  .rcd-value.has-date {
    color: rgba(255,255,255,.95) !important;
  }
  .rcd-month {
    color: rgba(255,255,255,.9) !important;
  }

  /* Datepicker days — normal available days */
  .rcd-day {
    color: rgba(255,255,255,.7) !important;
  }
  .rcd-day.is-today:not(.is-selected) {
    color: rgba(183,147,88,1) !important;
  }
  /* Selected day — green background with white text */
  .rcd-day.is-selected {
    background: var(--c-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 16px rgba(43,74,59,.5) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
  }
  /* Disabled days (past + Mondays) — clearly dimmed + strikethrough */
  .rcd-day.is-disabled,
  .rcd-day.is-past {
    color: rgba(255,255,255,.14) !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
    text-decoration-color: rgba(255,255,255,.08) !important;
    pointer-events: none !important;
  }

  /* Section label */
  .res-section-label-text {
    color: rgba(183,147,88,.85) !important;
  }

  /* ── 2. Remove backdrop-filter (heaviest mobile GPU cost) ──── */
  .res-pill,
  .res-time-pill {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Compensate with slightly more opaque bg for readability */
    background: rgba(255,255,255,.1) !important;
  }
  .res-pill.active,
  .res-time-pill.active {
    background: rgba(43,74,59,.85) !important;
  }
  .rcd-trigger {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,.1) !important;
  }
  .rcd-calendar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(14,22,17,.98) !important;
  }
  .res-form-input {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,.1) !important;
  }
  .res-feedback {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .res-env-selected-bar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .res-env-card-hover-cue {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Env card images: remove saturate/brightness filter transitions on scroll */
  .res-env-card-img {
    filter: saturate(.7) brightness(.6) !important;
    transition: none !important;
  }
  .res-env-card.is-selected .res-env-card-img {
    filter: saturate(.85) brightness(.65) !important;
  }

  /* ── 3. Clear will-change (prevents GPU layer promotion leaks) ── */
  .res-scroll-word,
  .res-scroll-word-text,
  .res-env-scroll-word,
  .res-env-scroll-word-text,
  .res-submit-btn {
    will-change: auto !important;
  }
  .res-env-card .res-env-card-img {
    will-change: auto !important;
  }

  /* ── 4. Simplify transition durations (faster feel on touch) ── */
  .res-env-card {
    transition: border-color .25s ease, box-shadow .25s ease !important;
  }
  .res-env-card-img {
    transition: filter .4s ease !important;
    transform: none !important; /* disable parallax leftover */
  }
  .res-pill,
  .res-time-pill {
    transition: background .2s ease, border-color .2s ease, color .2s ease !important;
  }
  .res-form-input {
    transition: background .25s ease, border-color .25s ease !important;
  }

  /* ── 5. Disable hover transforms on touch (no hover on mobile) ── */
  .res-env-card:hover { transform: none !important; }
  .res-pill:hover     { transform: none !important; }
  .res-time-pill:hover { transform: none !important; }
  .res-feedback-btn-primary:hover { transform: none !important; }
  .res-feedback-btn-secondary:hover { transform: none !important; }

  /* ── 6. Env section BG: static on mobile (no GSAP parallax) ── */
  .res-env-section-bg {
    transform: none !important;
  }

  /* ── 7. Canvas: remove expensive blur filter and transition on mobile ── */
  #seq-canvas {
    filter: none !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
  #seq-canvas.ready {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* ── 8. Paint containment on scrollable sections ────────────── */
  .res-env-section,
  .res-section {
    contain: layout style;
  }

  /* ── 9. Kill skeleton shimmer animation ─────────────────────── */
  .res-env-card-skeleton,
  .res-skeleton-pill {
    animation: none !important;
    background: rgba(255,255,255,.06) !important;
  }

  /* ── 10. Orbs + ambient blobs: HIDE entirely on mobile ──────── */
  /* Each radial-gradient orb is 600-700px and forces its own
     compositing layer. Hiding them saves ~4 GPU layers. */
  .res-hero-orb,
  .res-hero-orb-1,
  .res-hero-orb-2,
  .res-section-ambient-1,
  .res-section-ambient-2 {
    display: none !important;
  }

  /* ── 11. Grain SVG textures: HIDE on mobile ─────────────────── */
  /* SVG feTurbulence + mix-blend-mode:screen is one of the most
     expensive rendering ops. On a 390px screen it's invisible. */
  .res-hero-grain,
  .res-env-section-grain,
  .res-section-grain {
    display: none !important;
  }

  /* ── 12. Decorative pseudo-elements: remove on mobile ───────── */
  /* Section ::before (top gradient), ::after (vertical rule),
     float-lines, corner accents, golden dust — all invisible
     on small screens but force extra compositing layers. */
  .res-section::before,
  .res-section::after {
    display: none !important;
  }
  .res-float-line,
  .res-float-line-1,
  .res-float-line-2 {
    display: none !important;
  }
  .res-corner-accent {
    display: none !important;
  }
  .res-golden-dust {
    display: none !important;
  }
  .res-section-watermark {
    display: none !important;
  }
  .res-section-top-line {
    display: none !important;
  }
  .res-env-section-bg {
    display: none !important;
  }

  /* ── 13. Env cards: remove ALL GPU filters on mobile ─────────── */
  /* filter:saturate()+brightness() on each card image forces
     GPU rasterization per-card. On mobile we show the natural
     image colors (slightly dimmed via overlay gradient). */
  .res-env-card-img {
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .res-env-card:hover .res-env-card-img,
  .res-env-card.is-selected .res-env-card-img {
    filter: none !important;
    transform: none !important;
  }

  /* Card container: instant state changes (no transition overhead) */
  .res-env-card {
    transition: none !important;
  }
  .res-env-card-overlay {
    transition: none !important;
  }
  .res-env-card-hover-cue {
    display: none !important;
  }

  /* ── 14. Form section: simplify backgrounds ─────────────────── */
  .res-section {
    background: linear-gradient(180deg, #0C1A10 0%, #131c15 100%) !important;
  }
  .res-env-section {
    background: linear-gradient(180deg, #0C1A10 0%, #0e1812 100%) !important;
  }

  /* ── 15. Scroll-driven word: already hidden by CSS, ensure it ── */
  .res-scroll-word,
  .res-env-scroll-word {
    display: none !important;
  }

  /* ── 16. Footer Adjustments ── */
  .ft-clube-link {
    display: none !important;
  }
}