/* ==========================================================================
   MOOGATOOGA COCO BEACH — folha de estilo
   Versão 4.2

   Organização do arquivo:
   01. Tokens (:root) ....... toda medida, cor, sombra e tempo vive aqui
   02. Base ................. reset, tipografia, utilitários
   03. Componentes .......... botões, rótulos, bandeiras
   04. Header e navegação
   05. Hero
   06. Faixa de diferenciais
   07. Estadia (combo)
   08. Flats
   09. Experiência
   10. Galeria
   11. Localização e passeios
   12. História
   13. Reservas
   14. Rodapé
   15. Lightbox
   16. Movimento
   17. Responsivo

   Para mudar o tom do site inteiro, mexa só no bloco 01.
   ========================================================================== */

/* 01. TOKENS ============================================================== */
:root{
  /* Cor — marca */
  --deep:#073840;
  --deep-2:#0d4650;
  --deep-3:#052c33;
  --teal:#087184;
  --gold:#edbd4d;
  --gold-2:#f4cb68;
  --gold-soft:#fbefc8;

  /* Cor — texto */
  --ink:#092f35;
  --ink-soft:#4e6a6e;

  /* Cor — superfície */
  --white:#fff;
  --cream:#f5f0e5;
  --cream-2:#fbf8f1;

  /* Cor — linhas (antes eram seis bejes quase iguais) */
  --line:#e8ddc8;      /* borda sobre creme */
  --line-soft:#efe8db; /* divisória sutil sobre branco */
  --line-field:#ddd2be;/* borda de campo de formulário */
  --line-dot:#d8cfbe;  /* pontinhos do carrossel */
  --surface-map:#d7e5e3;
  --surface-dark:#071f24;

  /* Cor — sobre fundo escuro */
  --on-deep:rgba(255,255,255,.74);
  --on-deep-mute:rgba(255,255,255,.52);
  --on-deep-line:rgba(255,255,255,.16);
  --on-deep-fill:rgba(255,255,255,.08);

  /* Espaço — escala de 4px */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-7:32px;
  --s-8:40px;
  --s-9:48px;
  --s-10:64px;
  --s-11:80px;
  --s-12:clamp(64px,7.5vw,112px); /* respiro de seção, fluido */

  /* Tipografia — 8 degraus */
  --label:.68rem;    /* rótulos em caixa alta */
  --text-xs:.74rem;
  --text-sm:.8rem;
  --text-md:.88rem;
  --text-lg:.96rem;
  --text-xl:1.06rem;
  --title-sm:1.3rem;
  --title-md:clamp(1.5rem,2.2vw,1.85rem);
  --title-lg:clamp(2.1rem,4vw,3.5rem);
  --title-xl:clamp(2.9rem,5.1vw,4.7rem);

  /* Forma */
  --r-sm:12px;
  --r-md:20px;
  --r-lg:28px;
  --r-pill:999px;

  /* Sombra */
  --shadow-sm:0 8px 24px rgba(7,56,64,.07);
  --shadow-md:0 16px 40px rgba(7,56,64,.10);
  --shadow-lg:0 28px 70px rgba(7,56,64,.16);

  /* Movimento */
  --dur-fast:.18s;
  --dur:.3s;
  --dur-slow:.6s;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Camadas */
  --z-raised:10;
  --z-header:100;
  --z-nav:110;
  --z-sticky:120;
  --z-top:1000;

  /* Estrutura */
  --shell:min(1320px,calc(100% - 64px));
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Manrope",Arial,sans-serif;
}

/* 02. BASE ================================================================ */
*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}

body{
  margin:0;
  min-width:320px;
  overflow-x:clip;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}

img{display:block;max-width:100%}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  font-optical-sizing:auto;
  line-height:1.08;
  text-wrap:balance;
}
h2{font-size:var(--title-lg);letter-spacing:-.032em}
h3{font-size:var(--title-sm);letter-spacing:-.015em}
p{text-wrap:pretty}

[hidden]{display:none!important}

.shell{width:var(--shell);margin-inline:auto}
.section{position:relative;padding:var(--s-12) 0}

.skip-link{
  position:fixed;
  top:var(--s-3);
  left:var(--s-3);
  z-index:var(--z-top);
  padding:var(--s-3) var(--s-5);
  border-radius:var(--r-sm);
  background:var(--deep);
  color:#fff;
  transform:translateY(-140%);
  transition:transform var(--dur-fast) var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* 03. COMPONENTES ========================================================= */

/* Rótulo em caixa alta — peso 700 e mais tracking (800 pesava demais) */
.eyebrow{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  margin-bottom:var(--s-5);
  color:var(--teal);
  font-size:var(--label);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor}
.eyebrow-gold{color:var(--gold)}

.button{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  padding:var(--s-3) var(--s-6);
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-size:var(--text-md);
  font-weight:700;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),
             border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),color var(--dur) var(--ease);
}
.button:hover{transform:translateY(-2px)}
.button-gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 28px rgba(237,189,77,.24)}
.button-gold:hover{background:var(--gold-2);box-shadow:0 13px 30px rgba(237,189,77,.32)}
.button-deep{background:var(--deep);color:#fff}
.button-deep:hover{background:var(--deep-2)}
.button-outline{border-color:var(--line-field);background:#fff;color:var(--ink)}
.button-outline:hover{border-color:var(--deep);background:var(--deep);color:#fff}
.button-outline-light{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.04);color:#fff}
.button-outline-light:hover{background:rgba(255,255,255,.14)}
.button-block{width:100%}

/* Anel de foco único para tudo que é clicável */
.button:focus-visible,
.segmented-control button:focus-visible,
.lang-toggle button:focus-visible,
.footer-languages button:focus-visible,
.nav-toggle:focus-visible,
.gallery-item:focus-visible,
.gallery-arrow:focus-visible,
.story-chapter button:focus-visible,
.carousel-dots button:focus-visible,
.tour-row a:focus-visible{
  outline:3px solid rgba(237,189,77,.55);
  outline-offset:3px;
}

.segmented-control{
  display:flex;
  align-items:center;
  padding:var(--s-1);
  border-radius:var(--r-pill);
  background:var(--cream);
  white-space:nowrap;
}
.segmented-control button{
  min-height:36px;
  padding:var(--s-2) var(--s-4);
  border:0;
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--ink-soft);
  font-size:var(--text-xs);
  font-weight:700;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.segmented-control button.is-active{background:var(--deep);color:#fff}

.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-8);
  margin-bottom:var(--s-9);
}
/* o limite em ch vale para o título (onde 1ch é largo), nunca para o
   contêiner flex — ali 20ch daria ~160px e quebraria uma palavra por linha */
.section-heading>div:first-child{flex:1 1 auto;min-width:0}
.section-heading h2{max-width:20ch}
.section-heading p:not(.eyebrow){max-width:62ch;margin-top:var(--s-4);color:var(--ink-soft);font-size:var(--text-lg)}
.section-heading-inline{align-items:center}

/* Bandeiras em SVG — renderizam em qualquer sistema, inclusive Windows */
.flag-sprite{position:absolute;width:0;height:0;overflow:hidden}
.flag{
  width:20px;
  height:14px;
  flex:0 0 auto;
  display:block;
  border-radius:2px;
  fill:initial;
  stroke:none;
  box-shadow:0 0 0 1px rgba(9,47,53,.14);
}

/* Correção fotográfica única — dá unidade a fotos tiradas em condições diferentes */
.flat-media img,
.tour-thumb img,
.gallery-item img,
.story-visual img,
.hero-media img{filter:saturate(1.06) contrast(1.03)}

/* 04. HEADER ============================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  height:88px;
  /* sem backdrop-filter: ele criaria bloco de contenção e quebraria o menu fixo do celular */
  background:rgba(255,255,255,.97);
  border-bottom:1px solid rgba(7,56,64,.07);
  transition:box-shadow var(--dur) var(--ease),height var(--dur) var(--ease);
}
.site-header.is-scrolled{height:76px;box-shadow:var(--shadow-sm)}

.header-inner{
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--s-6);
}

.brand{justify-self:start;display:inline-flex;align-items:center;gap:var(--s-3);min-width:max-content}
.brand img{width:58px;height:58px;object-fit:contain;flex:0 0 auto;transition:width var(--dur) var(--ease),height var(--dur) var(--ease)}
.site-header.is-scrolled .brand img{width:50px;height:50px}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.brand-copy strong{font-family:var(--font-display);font-size:1.1rem;font-weight:600;letter-spacing:-.005em}
.brand-copy small{margin-top:5px;color:var(--ink-soft);font-size:.52rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase}

.main-nav{justify-self:center;display:flex;align-items:center;gap:var(--s-7)}
.main-nav>a{
  position:relative;
  padding:var(--s-2) 0;
  color:var(--ink-soft);
  font-size:var(--text-sm);
  font-weight:700;
  transition:color var(--dur-fast) var(--ease);
}
.main-nav>a:hover,.main-nav>a.is-current{color:var(--ink)}
.main-nav>a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--gold);
  transition:right var(--dur) var(--ease);
}
.main-nav>a:hover::after,.main-nav>a.is-current::after{right:0}

.header-actions{justify-self:end;display:flex;align-items:center;gap:var(--s-3)}
.lang-toggle{display:flex;align-items:center;gap:2px;padding:var(--s-1);border-radius:var(--r-pill);background:var(--cream)}
.lang-toggle button{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  border:0;
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--ink-soft);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.04em;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.lang-toggle button:hover{color:var(--ink)}
.lang-toggle button.is-active{background:var(--deep);color:#fff}

.header-cta{min-height:42px;padding-inline:var(--s-5);font-size:var(--text-sm)}
.cta-compact{display:none}

.nav-toggle,.mobile-current-lang,.mobile-nav-socials{display:none}
.mobile-current-lang{
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:#fff;
  color:var(--ink);
  font-size:var(--text-xs);
  font-weight:700;
}

/* 05. HERO ================================================================ */
.hero{position:relative;min-height:700px;display:flex;align-items:center;overflow:hidden;background:var(--deep)}
.hero-media,.hero-overlay{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
.hero-overlay{
  background:
    linear-gradient(180deg,rgba(3,28,33,.34) 0%,rgba(3,28,33,0) 20%),
    linear-gradient(0deg,rgba(6,48,55,.94) 0%,rgba(6,48,55,.42) 17%,rgba(6,48,55,0) 46%),
    linear-gradient(100deg,rgba(4,32,38,.74) 0%,rgba(4,32,38,.5) 34%,rgba(4,32,38,.14) 64%,rgba(4,32,38,0) 88%),
    radial-gradient(120% 95% at 78% 20%,rgba(255,241,214,.14) 0%,rgba(255,241,214,0) 58%);
}
.hero-content{position:relative;z-index:2;padding:var(--s-11) 0 176px}
.hero-content h1{
  max-width:16ch;
  color:var(--cream-2);
  font-size:var(--title-xl);
  letter-spacing:-.035em;
  line-height:1.03;
  text-shadow:0 4px 30px rgba(2,24,29,.32);
}
.hero-copy{max-width:52ch;margin-top:var(--s-5);color:rgba(255,255,255,.85);font-size:var(--text-xl);line-height:1.65}
.hero-actions{display:flex;gap:var(--s-3);margin-top:var(--s-7)}

.availability-bar{
  position:absolute;
  left:50%;
  bottom:var(--s-7);
  z-index:4;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  align-items:center;
  padding:var(--s-3) var(--s-4) var(--s-3) var(--s-6);
  border-radius:var(--r-md);
  background:#fff;
  box-shadow:var(--shadow-lg);
}
.availability-bar label{min-width:0;display:flex;flex-direction:column;gap:2px;padding:0 var(--s-6);border-right:1px solid var(--line)}
.availability-bar label:first-child{padding-left:0}
.availability-bar label>span{color:var(--ink-soft);font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.availability-bar input,.availability-bar select{width:100%;min-height:28px;padding:0;border:0;background:transparent;font-size:var(--text-sm);font-weight:700;outline:0}
.availability-bar input{appearance:none}
.availability-bar .button{min-width:188px;margin-left:var(--s-4)}
.availability-bar .button svg,.form-submit svg{width:20px;height:20px}

/* 06. DIFERENCIAIS ======================================================== */
.trust-strip{background:var(--deep);color:#fff}
.trust-grid{min-height:88px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center}
.trust-item{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5) var(--s-6)}
.trust-item:first-child{padding-left:0}
.trust-item svg{width:25px;height:25px;flex:0 0 auto;color:var(--gold)}
.trust-item div{display:flex;flex-direction:column;line-height:1.25}
.trust-item strong{font-size:var(--text-md)}
.trust-item span{margin-top:var(--s-1);color:var(--on-deep-mute);font-size:var(--text-xs)}

/* 07. ESTADIA ============================================================= */
.stay{background:var(--cream)}
.stay-grid{display:grid;grid-template-columns:1fr .93fr;gap:var(--s-11);align-items:center}
.stay-copy h2{max-width:18ch}
.stay-copy>p:not(.eyebrow){max-width:58ch;margin-top:var(--s-5);color:var(--ink-soft);font-size:var(--text-xl)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-7)}
.feature-grid>span{
  min-height:62px;
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  border-radius:var(--r-sm);
  background:#fff;
  font-size:var(--text-sm);
  font-weight:700;
}
.feature-grid i{color:var(--teal);font-style:normal}

.stay-card{padding:var(--s-9) var(--s-9) var(--s-8);border-radius:var(--r-lg);background:var(--deep);color:#fff;box-shadow:var(--shadow-lg)}
.card-topline{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5)}
.card-topline .eyebrow{margin:0}
.pill{padding:var(--s-1) var(--s-4);border-radius:var(--r-pill);background:rgba(237,189,77,.18);color:var(--gold);font-size:var(--text-xs);font-weight:700;text-transform:uppercase}
.stay-card h3{margin-top:var(--s-6);color:#fff;font-size:var(--title-md)}
.mobile-stay-list{display:none}
.stay-card dl{margin:var(--s-6) 0 0}
.stay-card dl div{display:flex;justify-content:space-between;gap:var(--s-5);padding:var(--s-3) 0;border-bottom:1px solid var(--on-deep-line)}
.stay-card dt{color:var(--on-deep-mute);font-size:var(--text-sm)}
.stay-card dd{margin:0;text-align:right;font-size:var(--text-sm);font-weight:700}
.stay-card dl div:first-child dd{color:var(--gold)}
.stay-card .button{margin-top:var(--s-6)}
.stay-card>small{display:block;margin-top:var(--s-4);color:var(--on-deep-mute);font-size:var(--text-xs);text-align:center}

/* 08. FLATS =============================================================== */
.flats{background:#fff}
.combo-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-3) var(--s-7);
  margin-bottom:var(--s-7);
  padding:var(--s-5) var(--s-6);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--cream-2);
}
.combo-bar-label{color:var(--teal);font-size:var(--label);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.combo-bar ul{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin:0;padding:0;list-style:none}
.combo-bar li{position:relative;padding-left:var(--s-5);font-size:var(--text-sm);font-weight:600}
.combo-bar li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--teal);font-weight:700}

.flat-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}
.flat-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:#fff;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.flat-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--shadow-md)}
.flat-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
.flat-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,32,38,.5),rgba(4,32,38,.08) 42%,transparent 70%);pointer-events:none}
.flat-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.flat-card:hover .flat-media img{transform:scale(1.04)}
.flat-index{
  position:absolute;
  z-index:2;
  left:var(--s-5);
  bottom:var(--s-3);
  color:#fff;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:-.02em;
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.flat-tag{
  position:absolute;
  z-index:2;
  top:var(--s-3);
  left:var(--s-3);
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.93);
  color:var(--ink);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.flat-body{flex:1;display:flex;flex-direction:column;padding:var(--s-6) var(--s-5) var(--s-5)}
.flat-body h3{font-size:var(--title-sm)}
.flat-body>p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--text-sm);line-height:1.6}
.flat-specs{display:grid;margin:auto 0 var(--s-5);padding:0;list-style:none}
.flat-specs li{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) 0;border-top:1px solid var(--line-soft)}
.flat-specs li:last-child{border-bottom:1px solid var(--line-soft)}
.flat-specs span{color:var(--ink-soft);font-size:var(--text-xs)}
.flat-specs strong{font-size:var(--text-xs);font-weight:700;text-align:right}
.flat-cta{min-height:45px;font-size:var(--text-xs)}
.flats-note{margin-top:var(--s-6);color:var(--ink-soft);font-size:var(--text-xs)}
.carousel-dots{display:none}

/* 09. EXPERIÊNCIA ========================================================= */
.experience{min-height:640px;display:flex;align-items:center;overflow:hidden;background:var(--deep);color:#fff}
.experience-video,.experience-video-shade{position:absolute;inset:0;width:100%;height:100%}
.experience-video{object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.03)}
.experience-video-shade{
  background:
    linear-gradient(95deg,rgba(3,35,41,.88) 0%,rgba(3,35,41,.66) 42%,rgba(3,35,41,.34) 74%,rgba(3,35,41,.24) 100%),
    linear-gradient(0deg,rgba(3,35,41,.5),transparent 55%);
}
.experience-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s-10);align-items:center}
.experience-copy{padding:var(--s-9) 0}
.experience-copy h2{max-width:16ch;color:var(--cream-2);text-shadow:0 4px 25px rgba(0,0,0,.22)}
.experience-copy>p:not(.eyebrow){max-width:56ch;margin-top:var(--s-6);color:var(--on-deep);font-size:var(--text-lg)}
.experience-cta{margin-top:var(--s-7)}
.experience-list{
  display:grid;
  gap:var(--s-3);
  padding:var(--s-6);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-lg);
  background:rgba(3,35,41,.48);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px);
}
.experience-list>div{display:flex;gap:var(--s-4);align-items:center;padding:var(--s-5);border-radius:var(--r-sm);background:var(--on-deep-fill)}
.experience-list svg{width:22px;height:22px;flex:0 0 auto;color:var(--gold)}
.experience-list span{display:flex;flex-direction:column}
.experience-list strong{font-size:var(--text-md)}
.experience-list small{margin-top:2px;color:var(--on-deep-mute);font-size:var(--text-xs)}

/* 10. GALERIA — sangra de ponta a ponta, sem caixa =========================== */
.gallery{background:#fff;overflow:hidden}
.gallery-carousel{position:relative}
/* faixa que ultrapassa o shell e vai até as bordas da tela */
.gallery-bleed{width:100vw;margin-left:calc(50% - 50vw)}
.gallery-viewport{overflow:hidden}
.gallery-track{display:flex;gap:var(--s-3);will-change:transform;transition:transform var(--dur-slow) var(--ease)}
.gallery-item{
  position:relative;
  flex:0 0 clamp(260px,26vw,440px);
  aspect-ratio:4/3;
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:var(--r-sm);
  background:var(--cream);
}
.gallery-item:first-child{margin-left:max(var(--s-6),calc(50vw - var(--shell) / 2))}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,238,206,.05),rgba(3,35,41,.14));pointer-events:none}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-slide>span{
  position:absolute;
  z-index:2;
  right:var(--s-3);
  bottom:var(--s-3);
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  background:rgba(3,35,41,.5);
  color:#fff;
  font-size:var(--text-xs);
  font-weight:700;
  backdrop-filter:blur(8px);
}
.gallery-controls{display:flex;align-items:center;justify-content:center;gap:var(--s-5);margin-top:var(--s-7)}
.gallery-arrow{
  width:48px;
  height:48px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--deep);
  font-size:1.2rem;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.gallery-arrow:hover{transform:translateY(-2px);background:var(--deep);color:#fff}
.gallery-status{min-width:240px;display:grid;grid-template-columns:auto auto auto 1fr;gap:var(--s-2);align-items:center;color:var(--ink-soft);font-size:var(--text-xs)}
.gallery-status strong{color:var(--deep);font-size:var(--text-md)}
.gallery-status i{height:3px;margin-left:var(--s-2);overflow:hidden;border-radius:5px;background:var(--line)}
.gallery-status b{width:0;height:100%;display:block;border-radius:5px;background:var(--gold);transition:width var(--dur) var(--ease)}

/* 11. LOCALIZAÇÃO E PASSEIOS ============================================== */
.location{background:var(--cream)}
.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7)}
.location-card,.map-card{min-height:385px;border-radius:var(--r-md);overflow:hidden;background:#fff}
.location-card{padding:var(--s-8)}
.location-card h3{font-size:var(--title-md)}
.location-card>p{margin-top:var(--s-4);color:var(--ink-soft);font-size:var(--text-lg)}
.location-card ul{display:grid;gap:var(--s-3);margin:var(--s-6) 0;padding:0;list-style:none}
.location-card li{display:flex;gap:var(--s-3);align-items:flex-start;color:var(--ink-soft);font-size:var(--text-sm)}
.location-card li svg{width:18px;height:18px;flex:0 0 auto;color:var(--teal)}
.location-card .button{margin-top:var(--s-1)}
.map-card{position:relative;background:var(--surface-map)}
.map-card iframe{width:100%;height:100%;min-height:385px;border:0;filter:saturate(.65) contrast(.92)}

.tour-heading{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--s-10);align-items:end;margin-top:var(--s-12);scroll-margin-top:120px}
.tour-heading h2{max-width:20ch}
.tour-heading>p{padding-bottom:var(--s-1);color:var(--ink-soft);font-size:var(--text-lg)}

/* Índice editorial — substitui a grade de oito cards iguais */
.tour-list{margin-top:var(--s-8);border-top:1px solid var(--line)}
.tour-row{
  display:grid;
  grid-template-columns:var(--s-8) 148px minmax(0,1fr) 210px;
  gap:var(--s-6);
  align-items:center;
  padding:var(--s-5) var(--s-4);
  border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease);
}
.tour-row:hover{background:rgba(255,255,255,.6)}
.tour-num{
  align-self:start;
  padding-top:var(--s-2);
  color:var(--ink-soft);
  font-family:var(--font-display);
  font-size:var(--text-md);
  font-weight:600;
  letter-spacing:.04em;
}
.tour-thumb{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);background:var(--cream-2)}
.tour-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.tour-row:hover .tour-thumb img{transform:scale(1.06)}
.tour-info h3{font-size:var(--title-sm)}
.tour-info p{margin-top:var(--s-2);max-width:62ch;color:var(--ink-soft);font-size:var(--text-sm);line-height:1.6}
.tour-aside{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.tour-meta{color:var(--teal);font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.tour-row a{
  position:relative;
  color:var(--ink);
  font-size:var(--text-xs);
  font-weight:700;
}
.tour-row a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;opacity:.25;transition:opacity var(--dur-fast) var(--ease)}
.tour-row a:hover::after{opacity:1}

/* 12. HISTÓRIA ============================================================ */
.story{overflow:hidden;background:var(--deep);color:#fff}
.story .eyebrow{color:var(--gold)}
.story-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s-10);align-items:stretch}
.story-visual{position:relative;min-height:560px;margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--on-deep-fill)}
.story-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,30,35,.78) 0%,rgba(3,30,35,.12) 45%,transparent 70%);pointer-events:none}
.story-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--dur) var(--ease),transform 1.1s var(--ease)}
.story-visual.is-changing img{opacity:.15;transform:scale(1.025)}
.story-visual figcaption{position:absolute;z-index:2;left:var(--s-7);right:var(--s-7);bottom:var(--s-6);display:flex;flex-direction:column;gap:var(--s-2);color:#fff}
.story-visual figcaption span{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.25}
.story-visual figcaption a{color:rgba(255,255,255,.62);font-size:var(--text-xs)}
.story-visual figcaption a:hover{color:#fff}

.story-content{display:flex;flex-direction:column;justify-content:center}
.story-content h2{max-width:16ch;color:var(--cream-2);letter-spacing:-.03em}
.story-intro{max-width:54ch;margin-top:var(--s-5);color:var(--on-deep);font-size:var(--text-lg)}
.story-chapters{margin-top:var(--s-8);border-top:1px solid var(--on-deep-line)}
.story-chapter{border-bottom:1px solid var(--on-deep-line)}
.story-chapter h3{margin:0;font-family:var(--font-body);font-size:1rem;font-weight:400}
.story-chapter button{
  width:100%;
  display:flex;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-5) 2px;
  border:0;
  background:none;
  color:inherit;
  text-align:left;
}
.chapter-index{color:var(--gold);font-family:var(--font-display);font-size:var(--text-md);font-weight:600;letter-spacing:.06em}
.chapter-name{
  flex:1;
  color:rgba(255,255,255,.6);
  font-family:var(--font-display);
  font-size:var(--title-sm);
  font-weight:600;
  transition:color var(--dur) var(--ease);
}
.story-chapter:hover .chapter-name,.story-chapter.is-active .chapter-name{color:#fff}
.chapter-toggle{
  position:relative;
  width:24px;
  height:24px;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.chapter-toggle::before,.chapter-toggle::after{content:"";position:absolute;left:50%;top:50%;background:rgba(255,255,255,.8);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.chapter-toggle::before{width:9px;height:1.5px;transform:translate(-50%,-50%)}
.chapter-toggle::after{width:1.5px;height:9px;transform:translate(-50%,-50%)}
.story-chapter.is-active .chapter-toggle{border-color:var(--gold);background:rgba(237,189,77,.16)}
.story-chapter.is-active .chapter-toggle::before{background:var(--gold)}
.story-chapter.is-active .chapter-toggle::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.story-chapter-body{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity var(--dur) var(--ease),padding var(--dur) var(--ease)}
.story-chapter.is-active .story-chapter-body{max-height:520px;opacity:1;padding:0 var(--s-9) var(--s-6) var(--s-8)}
.story-chapter-body strong{display:block;color:var(--cream-2);font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;line-height:1.3}
.story-chapter-body p{margin-top:var(--s-2);color:var(--on-deep);font-size:var(--text-md);line-height:1.68}

/* 13. RESERVAS ============================================================ */
.booking{background:#fff}
.booking-grid{display:grid;grid-template-columns:1.25fr .78fr;gap:var(--s-10);align-items:start}
.booking .section-heading{margin-bottom:var(--s-6)}
.booking-form{padding:var(--s-7);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-sm)}
.form-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-4)}
.form-grid label{grid-column:span 2;display:flex;flex-direction:column;gap:var(--s-2)}
.form-grid label:nth-child(-n+2){grid-column:span 3}
.form-grid label>span,.extras legend{color:var(--ink-soft);font-size:var(--text-xs);font-weight:700}
.form-grid input,.form-grid select{width:100%;height:51px;padding:0 var(--s-4);border:1px solid var(--line-field);border-radius:var(--r-sm);background:#fff;outline:0;font-size:var(--text-sm)}
.form-grid input:focus,.form-grid select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(8,113,132,.12)}
.extras{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-5) 0;padding:0;border:0}
.extras legend{width:100%;margin-bottom:var(--s-1)}
.extras label{position:relative}
.extras input{position:absolute;opacity:0;pointer-events:none}
.extras span{
  display:inline-flex;
  min-height:39px;
  align-items:center;
  padding:var(--s-2) var(--s-4);
  border:1px solid var(--line-field);
  border-radius:var(--r-pill);
  font-size:var(--text-xs);
  font-weight:700;
  cursor:pointer;
}
.extras input:checked+span{border-color:var(--deep);background:var(--deep);color:#fff}
.extras input:focus-visible+span{outline:3px solid rgba(237,189,77,.55);outline-offset:3px}
.form-submit{min-height:52px}
/* aviso após o envio — o visitante precisa ver que alguma coisa aconteceu */
.form-feedback{
  display:none;
  align-items:center;
  gap:var(--s-3);
  margin-top:var(--s-4);
  padding:var(--s-4) var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--cream-2);
  color:var(--ink);
  font-size:var(--text-sm);
}
.form-feedback.is-visible{display:flex}
.form-feedback a{font-weight:700;text-decoration:underline}

.faq{margin-top:var(--s-7)}
.faq h3{margin-bottom:var(--s-3);font-size:var(--title-sm)}
.faq details{border:1px solid var(--line);border-bottom:0;background:#fff}
.faq details:first-of-type{border-radius:var(--r-sm) var(--r-sm) 0 0}
.faq details:last-child{border-bottom:1px solid var(--line);border-radius:0 0 var(--r-sm) var(--r-sm)}
.faq summary{display:flex;justify-content:space-between;gap:var(--s-5);padding:var(--s-5) var(--s-6);list-style:none;font-size:var(--text-sm);font-weight:700;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary span:last-child{color:var(--teal);font-size:var(--text-xl);transition:transform var(--dur-fast) var(--ease)}
.faq details[open] summary span:last-child{transform:rotate(45deg)}
.faq details p{padding:0 var(--s-6) var(--s-5);color:var(--ink-soft);font-size:var(--text-sm)}

.booking-aside{display:grid;gap:var(--s-5)}
.info-card{padding:var(--s-8);border-radius:var(--r-md);background:var(--cream)}
.info-card h3{margin-bottom:var(--s-5)}
.info-card dl{margin:0}
.info-card dl div{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.info-card dl div:last-child{border-bottom:0}
.info-card dt{color:var(--ink-soft);font-size:var(--text-xs)}
.info-card dd{max-width:66%;margin:0;text-align:right;overflow-wrap:anywhere;font-size:var(--text-xs);font-weight:700}
.combo-side-card{padding:var(--s-8);border-radius:var(--r-md);background:var(--deep);color:#fff;box-shadow:var(--shadow-sm)}
.combo-side-card .eyebrow{margin-bottom:var(--s-4)}
.combo-side-card>strong{display:block;color:#fff;font-family:var(--font-display);font-size:var(--title-md);line-height:1.15}
.combo-side-card ul{display:grid;gap:var(--s-2);margin:var(--s-5) 0 var(--s-6);padding:0;list-style:none}
.combo-side-card li{position:relative;padding-left:var(--s-5);color:var(--on-deep);font-size:var(--text-sm)}
.combo-side-card li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700}

/* 14. RODAPÉ ============================================================== */
.site-footer{padding:var(--s-11) 0 var(--s-6);background:var(--deep);color:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr .7fr .7fr 1.05fr 1.1fr;gap:var(--s-8)}
.brand-footer{color:#fff}
.footer-brand p{max-width:44ch;margin-top:var(--s-5);color:var(--on-deep-mute);font-size:var(--text-sm)}
.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)}
.footer-grid h3{
  margin:var(--s-2) 0 var(--s-1);
  color:var(--on-deep-mute);
  font-family:var(--font-body);
  font-size:var(--label);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.footer-grid a{color:var(--on-deep);font-size:var(--text-xs);transition:color var(--dur-fast) var(--ease)}
.footer-grid a:hover{color:#fff}
.footer-grid a span{display:block;color:var(--on-deep-mute);font-size:.62rem}
.photo-credits{
  margin-top:var(--s-7);
  padding:var(--s-5) 0;
  border-top:1px solid var(--on-deep-line);
  border-bottom:1px solid var(--on-deep-line);
  color:var(--on-deep-mute);
  font-size:var(--text-xs);
}
.photo-credits summary{width:max-content;color:var(--on-deep);font-weight:700;cursor:pointer}
.photo-credits>div{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin-top:var(--s-3)}
.photo-credits a:hover{color:#fff}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--s-5);
  margin-top:var(--s-9);
  padding-top:var(--s-5);
  border-top:1px solid var(--on-deep-line);
  color:var(--on-deep-mute);
  font-size:var(--text-xs);
}
.footer-languages{display:flex;align-items:center;gap:var(--s-2)}
.footer-languages button{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  border:1px solid var(--on-deep-line);
  border-radius:var(--r-pill);
  background:none;
  color:var(--on-deep-mute);
  font-size:var(--text-xs);
  font-weight:700;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.footer-languages button:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.footer-languages button.is-active{border-color:transparent;background:rgba(255,255,255,.1);color:#fff}
.footer-languages .flag{box-shadow:0 0 0 1px rgba(255,255,255,.25)}

.mobile-booking{display:none}

/* 15. LIGHTBOX ============================================================ */
.lightbox{
  width:min(1050px,calc(100% - var(--s-7)));
  max-width:none;
  padding:0;
  border:0;
  border-radius:var(--r-md);
  background:var(--surface-dark);
  color:#fff;
  box-shadow:0 28px 70px rgba(0,0,0,.45);
}
.lightbox::backdrop{background:rgba(2,20,24,.86);backdrop-filter:blur(5px)}
.lightbox figure{margin:0}
.lightbox figure img{width:100%;max-height:80vh;object-fit:contain}
.lightbox figcaption{padding:var(--s-4) var(--s-5);color:var(--on-deep);font-size:var(--text-sm)}
.lightbox-close,.lightbox-nav{
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  transition:background var(--dur-fast) var(--ease)}
.lightbox-close{top:var(--s-3);right:var(--s-3);font-size:1.7rem;line-height:1}
.lightbox-nav{top:50%;transform:translateY(-50%);font-size:1.3rem}
.lightbox-nav:hover,.lightbox-close:hover{background:rgba(0,0,0,.8)}
.lightbox-prev{left:var(--s-3)}
.lightbox-next{right:var(--s-3)}
.lightbox-close:focus-visible,.lightbox-nav:focus-visible{outline:3px solid rgba(237,189,77,.55);outline-offset:3px}

/* 16. MOVIMENTO =========================================================== */
body.js .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
body.js .reveal.is-visible{opacity:1;transform:none}

/* 17. RESPONSIVO ========================================================== */
@media (max-width:1340px){
  .main-nav{gap:var(--s-6)}
  .cta-full{display:none}
  .cta-compact{display:inline}
}

@media (max-width:1180px){
  :root{--shell:min(1120px,calc(100% - 48px))}
  .main-nav{gap:var(--s-5)}
  .header-cta,.lang-desktop{display:none}
  .mobile-current-lang{display:inline-flex}
  .flat-track{grid-template-columns:repeat(2,1fr)}
  .flat-media{aspect-ratio:16/10}
  .tour-row{grid-template-columns:var(--s-7) 120px minmax(0,1fr);gap:var(--s-5)}
  .tour-aside{grid-column:2/-1;flex-direction:row;align-items:center;justify-content:space-between}
  .footer-grid{grid-template-columns:1.35fr repeat(4,1fr);gap:var(--s-7)}
}

@media (max-width:900px){
  :root{--shell:min(100% - 40px,760px)}
  .site-header,.site-header.is-scrolled{height:84px}
  .header-inner{display:flex;justify-content:space-between;gap:var(--s-3)}
  .brand img,.site-header.is-scrolled .brand img{width:54px;height:54px}
  .nav-toggle{width:48px;height:48px;display:grid;place-content:center;gap:5px;padding:0;border:0;border-radius:var(--r-sm);background:var(--cream)}
  .nav-toggle span{width:22px;height:2px;display:block;border-radius:2px;background:var(--deep);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
  body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .nav-toggle span:nth-child(2){opacity:0}
  body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .main-nav{
    position:fixed;
    inset:84px 0 0;
    z-index:var(--z-nav);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    margin:0;
    padding:var(--s-8) var(--s-7);
    overflow-y:auto;
    background:var(--deep);
    color:#fff;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(100%);
    transition:transform .35s var(--ease),visibility .35s var(--ease);
  }
  body.menu-open .main-nav{visibility:visible;pointer-events:auto;transform:none}
  .main-nav>a{width:100%;padding:var(--s-4) 0;border-bottom:1px solid var(--on-deep-line);color:#fff;font-family:var(--font-display);font-size:1.45rem}
  .main-nav>a::after{display:none}
  .mobile-nav-socials{display:flex;gap:var(--s-5);margin-top:var(--s-7);color:var(--gold);font-size:var(--text-xs);font-weight:700}
  .hero{min-height:650px}
  .hero-content{padding-bottom:var(--s-11)}
  .availability-bar{display:none}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-item:nth-child(odd){padding-left:0}
  .stay-grid,.experience-grid,.booking-grid{grid-template-columns:1fr}
  .stay-grid{gap:var(--s-9)}
  .experience-grid{gap:var(--s-9)}
  .experience{min-height:0;padding-block:var(--s-11)}
  .experience-copy{padding:0}
  .section-heading{align-items:flex-start;flex-direction:column}
  .section-heading .segmented-control{align-self:flex-start}
  .location-grid{grid-template-columns:1fr}
  .tour-heading{grid-template-columns:1fr;gap:var(--s-5);margin-top:var(--s-11)}
  .story-grid{grid-template-columns:1fr;gap:var(--s-8)}
  .story-visual{min-height:460px}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
  .footer-grid>div:nth-child(4),.footer-grid>div:nth-child(5){margin-top:var(--s-5)}
}

@media (max-width:640px){
  :root{--shell:calc(100% - 36px)}
  html{scroll-padding-top:90px}
  body{padding-bottom:82px}
  .site-header,.site-header.is-scrolled{height:82px}
  .main-nav{inset:82px 0 0}
  .brand{gap:var(--s-2)}
  .brand img,.site-header.is-scrolled .brand img{width:50px;height:50px}
  .brand-copy strong{font-size:1rem}
  .brand-copy small{font-size:.46rem}
  .nav-toggle{width:46px;height:46px}

  .hero{min-height:760px;align-items:flex-end}
  .hero-media img{object-position:55% center}
  .hero-overlay{
    background:
      linear-gradient(180deg,rgba(3,28,33,.3) 0%,rgba(3,28,33,0) 24%),
      linear-gradient(0deg,rgba(5,42,49,.95) 0%,rgba(5,42,49,.72) 34%,rgba(5,42,49,.24) 62%,rgba(5,42,49,.04) 84%),
      radial-gradient(110% 60% at 70% 22%,rgba(255,241,214,.12) 0%,rgba(255,241,214,0) 60%);
  }
  .hero-content{width:100%;padding:280px 0 var(--s-8)}
  .hero-content h1{max-width:13ch;font-size:clamp(2.6rem,10vw,3.3rem);line-height:1.05}
  .hero-copy{margin-top:var(--s-4)}
  .hero-actions{display:grid;gap:var(--s-3);margin-top:var(--s-6)}
  .hero-actions .button{min-height:56px}

  .trust-grid{min-height:0;padding:var(--s-4) 0}
  .trust-item{gap:var(--s-3);padding:var(--s-3) var(--s-2)}
  .trust-item strong{font-size:var(--text-sm)}
  .trust-item span{font-size:.66rem}

  /* o conteúdo do celular passou a ser redesenhado, não escondido */
  .stay-card{padding:var(--s-7) var(--s-6)}
  .stay-card h3{font-size:1.4rem}
  .feature-grid{grid-template-columns:1fr;gap:var(--s-2);margin-top:var(--s-6)}
  .feature-grid>span{min-height:0;padding:var(--s-3) var(--s-4)}
  .mobile-stay-list{display:none}
  .stay-card .button{min-height:54px}

  .flats{overflow:hidden}
  .flats .section-heading .segmented-control{align-self:stretch;overflow-x:auto;scrollbar-width:none}
  .combo-bar{gap:var(--s-3);padding:var(--s-4) var(--s-5)}
  .combo-bar ul{gap:var(--s-2) var(--s-5)}
  .flat-track{
    width:auto;
    display:flex;
    gap:var(--s-4);
    margin-right:-18px;
    padding-right:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
  }
  .flat-track::-webkit-scrollbar{display:none}
  .flat-card{flex:0 0 min(82vw,348px);scroll-snap-align:start}
  .flat-media{aspect-ratio:4/3}
  .flat-specs{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-4) 0 var(--s-5)}
  .flat-specs li{padding:var(--s-2) var(--s-3);border:0;border-radius:var(--r-pill);background:var(--cream)}
  .flat-specs li:last-child{border-bottom:0}
  .flat-specs span{display:none}
  .flat-cta{min-height:50px;font-size:var(--text-sm)}
  .carousel-dots{display:flex;gap:var(--s-2);margin-top:var(--s-5)}
  .carousel-dots button{width:14px;height:4px;padding:0;border:0;border-radius:4px;background:var(--line-dot);transition:width var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
  .carousel-dots button.is-active{width:28px;background:var(--deep)}

  .experience-video{object-position:58% center}
  .experience-video-shade{background:linear-gradient(0deg,rgba(3,35,41,.96) 0%,rgba(3,35,41,.73) 68%,rgba(3,35,41,.48) 100%)}
  .experience-grid{gap:var(--s-6)}
  .experience-list{gap:var(--s-2);padding:var(--s-3);border-radius:var(--r-md)}
  .experience-list>div{padding:var(--s-4)}

  .gallery .section-heading{gap:var(--s-5)}
  .gallery-filters{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .gallery-item{flex-basis:78vw;border-radius:var(--r-sm)}
  .gallery-item:first-child{margin-left:18px}
  .gallery-controls{justify-content:space-between;gap:var(--s-3);margin-top:var(--s-5)}
  .gallery-status{min-width:0;flex:1}

  .location-card,.map-card{min-height:0}
  .location-card{padding:var(--s-6)}
  .map-card iframe{min-height:290px}
  .tour-heading{margin-top:var(--s-10)}
  .tour-list{margin-top:var(--s-6)}
  .tour-row{grid-template-columns:88px minmax(0,1fr);gap:var(--s-4);padding:var(--s-5) 0}
  .tour-num{display:none}
  .tour-info{grid-column:2}
  .tour-aside{grid-column:1/-1;margin-top:var(--s-1)}

  .story-visual{min-height:380px;border-radius:var(--r-md)}
  .story-visual figcaption{left:var(--s-5);right:var(--s-5);bottom:var(--s-5)}
  .story-visual figcaption span{font-size:var(--text-lg)}
  .story-chapters{margin-top:var(--s-7)}
  .story-chapter button{gap:var(--s-3);padding:var(--s-4) 2px}
  .chapter-name{font-size:1.15rem}
  .story-chapter.is-active .story-chapter-body{max-height:600px;padding:0 var(--s-2) var(--s-5) var(--s-7)}

  .booking-grid{gap:var(--s-8)}
  .booking-form{padding:var(--s-6)}
  .form-grid{grid-template-columns:1fr}
  .form-grid label,.form-grid label:nth-child(-n+2){grid-column:auto}
  .form-grid input,.form-grid select{height:56px}
  .form-submit{min-height:58px;margin-top:var(--s-5)}
  .faq summary{padding:var(--s-5)}
  .info-card,.combo-side-card{padding:var(--s-6)}

  .site-footer{padding:var(--s-10) 0 var(--s-7)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-7) var(--s-6)}
  .footer-brand{grid-column:1/-1}
  .footer-grid>div:nth-child(4),.footer-grid>div:nth-child(5){margin-top:0}
  .footer-grid>div:nth-child(5){grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  .footer-grid>div:nth-child(5) h3{grid-column:1/-1}
  .footer-bottom{flex-direction:column;align-items:flex-start;margin-top:var(--s-7)}
  .photo-credits>div{display:grid;gap:var(--s-2)}

  .mobile-booking{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:var(--z-sticky);
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-5);
    padding:var(--s-3) max(18px,env(safe-area-inset-left)) calc(var(--s-3) + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-right));
    border-top:1px solid var(--line);
    background:rgba(255,255,255,.97);
    box-shadow:0 -12px 34px rgba(7,56,64,.12);
    pointer-events:none;
    transform:translateY(115%);
    transition:transform var(--dur) var(--ease);
  }
  .mobile-booking.is-visible{pointer-events:auto;transform:none}
  .mobile-booking>span{display:flex;flex-direction:column;line-height:1.25}
  .mobile-booking small{color:var(--ink-soft);font-size:.66rem;font-weight:600}
  .mobile-booking strong{font-size:var(--text-lg)}
  .mobile-booking .button{min-width:132px;min-height:50px}
}

@media (max-width:390px){
  .hero-content h1{font-size:3rem}
  .brand-copy strong{font-size:.92rem}
  .nav-toggle{width:43px;height:43px}
  .trust-item strong{font-size:var(--text-xs)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  body.js .reveal{opacity:1;transform:none}
}