/* ============================================
   VILLA GIOVANNI — Ultra-Premium Design System
   ============================================ */

:root {
  --bg: #FAF8F5;
  --bg-warm: #F2EDE7;
  --bg-dark: #141210;
  --bg-dark-mid: #1E1B18;
  --bg-dark-alt: #2A2622;
  --text: #1E1B18;
  --text-mid: #6B635A;
  --text-light: #9E978F;
  --text-inv: #F2EDE7;
  --gold: #C6A96C;
  --gold-light: #D4BD89;
  --gold-dark: #A68B4B;
  --gold-muted: rgba(198,169,108,0.12);
  --white: #FFFFFF;
  --border: rgba(30,27,24,0.08);
  --border-gold: rgba(198,169,108,0.2);
  --glass: rgba(250,248,245,0.72);
  --glass-dark: rgba(20,18,16,0.82);
  --overlay-hero: linear-gradient(180deg, rgba(14,12,10,0.35) 0%, rgba(14,12,10,0.15) 30%, rgba(14,12,10,0.05) 50%, rgba(14,12,10,0.55) 75%, rgba(14,12,10,0.92) 100%);
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

  --font-h: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-b: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  --nav-h: 80px;
  --sec-y: clamp(80px, 12vw, 150px);
  --max-w: 1320px;
  --gap: clamp(20px, 4vw, 52px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.45, 0, 0.15, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.8s;
  --dur-fast: 0.4s;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
body { font-family:var(--font-b); font-size:16px; line-height:1.7; color:var(--text); background:var(--bg); overflow-x:hidden; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
ul,ol { list-style:none; }
::selection { background:var(--gold); color:var(--white); }

/* --- Grain overlay --- */
body::after {
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image: var(--grain); background-repeat:repeat; background-size:256px;
  opacity:0.5; mix-blend-mode:overlay;
}

/* --- Progress bar --- */
.scroll-progress {
  position:fixed; top:0; left:0; height:2px; background:var(--gold);
  z-index:10001; transform-origin:left; transform:scaleX(0); will-change:transform;
}

/* --- Typography --- */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-h); font-weight:400; line-height:1.1; letter-spacing:-0.02em; }
h1 { font-size:clamp(2.8rem, 6vw, 5.8rem); font-weight:300; }
h2 { font-size:clamp(2rem, 4vw, 3.6rem); font-weight:400; }
h3 { font-size:clamp(1.3rem, 2.2vw, 1.9rem); }
h4 { font-size:clamp(1.05rem, 1.4vw, 1.35rem); }

.overline {
  font-family:var(--font-b); font-size:0.68rem; font-weight:600;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:16px;
}
.overline::before { content:''; width:40px; height:1px; background:var(--gold); }

.section-sub {
  font-size:clamp(0.92rem, 1.2vw, 1.05rem); color:var(--text-mid);
  max-width:520px; margin-top:16px; line-height:1.85;
}

/* --- Layout --- */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--gap); }
section { padding:var(--sec-y) 0; position:relative; }

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.r { opacity:0; transform:translateY(50px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.r.in { opacity:1; transform:translateY(0); }
.r-up { opacity:0; transform:translateY(70px); }
.r-up.in { opacity:1; transform:translateY(0); }
.r-left { opacity:0; transform:translateX(-60px); }
.r-left.in { opacity:1; transform:translateX(0); }
.r-right { opacity:0; transform:translateX(60px); }
.r-right.in { opacity:1; transform:translateX(0); }
.r-scale { opacity:0; transform:scale(0.92); }
.r-scale.in { opacity:1; transform:scale(1); }
.r-clip { clip-path:inset(100% 0 0 0); transition:clip-path 1.2s var(--ease-out); }
.r-clip.in { clip-path:inset(0 0 0 0); }

/* Stagger children */
.stagger > * { opacity:0; transform:translateY(40px); transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.stagger.in > *:nth-child(1) { transition-delay:0.05s; }
.stagger.in > *:nth-child(2) { transition-delay:0.12s; }
.stagger.in > *:nth-child(3) { transition-delay:0.19s; }
.stagger.in > *:nth-child(4) { transition-delay:0.26s; }
.stagger.in > *:nth-child(5) { transition-delay:0.33s; }
.stagger.in > *:nth-child(6) { transition-delay:0.40s; }
.stagger.in > *:nth-child(7) { transition-delay:0.47s; }
.stagger.in > *:nth-child(8) { transition-delay:0.54s; }
.stagger.in > * { opacity:1; transform:translateY(0); }

/* Delay helpers */
[data-delay="1"] { transition-delay:0.1s!important; }
[data-delay="2"] { transition-delay:0.2s!important; }
[data-delay="3"] { transition-delay:0.3s!important; }
[data-delay="4"] { transition-delay:0.4s!important; }
[data-delay="5"] { transition-delay:0.5s!important; }

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h); display:flex; align-items:center;
  transition:all 0.5s var(--ease-smooth);
}
.nav--scrolled {
  background:var(--glass); backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,0.03);
}
.nav__inner {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--gap);
}
.nav__logo-img { height:36px; width:auto; transition:all 0.5s var(--ease-smooth); }
.nav:not(.nav--scrolled) .nav__logo-img { filter:brightness(0) invert(1); }
.nav__right { display:flex; align-items:center; gap:36px; }
.nav__links { display:flex; align-items:center; gap:36px; }
.nav__link {
  font-size:0.78rem; font-weight:500; letter-spacing:0.06em;
  color:rgba(255,255,255,0.75); transition:all var(--dur-fast) var(--ease-smooth);
  position:relative; padding:4px 0;
}
.nav__link::after {
  content:''; position:absolute; bottom:0; left:50%; width:0; height:1px;
  background:var(--gold); transition:all var(--dur-fast) var(--ease-out);
  transform:translateX(-50%);
}
.nav__link:hover { color:white; }
.nav__link:hover::after { width:100%; }
.nav--scrolled .nav__link { color:var(--text-mid); }
.nav--scrolled .nav__link:hover { color:var(--text); }

.nav__cta {
  font-size:0.7rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--bg-dark); background:var(--gold); padding:10px 24px; border-radius:0;
  transition:all var(--dur-fast) var(--ease-smooth);
}
.nav__cta:hover { background:var(--gold-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(198,169,108,0.35); }

.lang-switch {
  display:flex; align-items:center; gap:7px;
  font-size:0.72rem; font-weight:600; letter-spacing:0.08em;
  color:rgba(255,255,255,0.6); transition:all var(--dur-fast) ease;
}
.nav--scrolled .lang-switch { color:var(--text-light); }
.lang-switch:hover { color:var(--gold); }
.lang-switch svg { width:18px; height:13px; border-radius:1px; }

/* Toggle */
.nav__toggle { display:none; flex-direction:column; gap:5px; width:28px; z-index:1001; padding:4px 0; }
.nav__toggle span { display:block; height:1.5px; width:100%; background:white; transition:all var(--dur-fast) ease; border-radius:2px; }
.nav--scrolled .nav__toggle span { background:var(--text); }
.nav__toggle.active span { background:var(--text)!important; }
.nav__toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav__toggle.active span:nth-child(2) { opacity:0; }
.nav__toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mobile-menu {
  position:fixed; inset:0; z-index:999; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  opacity:0; pointer-events:none; transition:opacity var(--dur-fast) ease;
}
.mobile-menu.active { opacity:1; pointer-events:all; }
.mobile-menu a { font-family:var(--font-h); font-size:2rem; font-weight:400; color:var(--text); transition:color var(--dur-fast) ease; }
.mobile-menu a:hover { color:var(--gold); }
.mobile-menu__lang { display:flex; gap:16px; margin-top:16px; }
.mobile-menu__lang a { font-family:var(--font-b); font-size:0.88rem; display:flex; align-items:center; gap:8px; }
.mobile-menu__lang svg { width:22px; height:16px; border-radius:2px; }

/* ============================================
   HERO — Cinematic
   ============================================ */
.hero {
  position:relative; height:100vh; height:100dvh; min-height:600px;
  display:flex; align-items:flex-end; overflow:hidden;
}
.hero__bg {
  position:absolute; inset:0;
  will-change:transform;
}
.hero__bg img {
  width:100%; height:115%; object-fit:cover; object-position:center 30%;
  transform:scale(1.1);
  animation:heroEntry 2.5s var(--ease-out) forwards;
}
@keyframes heroEntry { 0%{transform:scale(1.2); filter:brightness(0.5)} 100%{transform:scale(1.05); filter:brightness(1)} }

.hero__overlay { position:absolute; inset:0; z-index:1; background:var(--overlay-hero); }

.hero__content {
  position:relative; z-index:2; width:100%; max-width:var(--max-w);
  margin:0 auto; padding:0 var(--gap) clamp(60px, 10vh, 120px);
}
.hero__overline {
  font-family:var(--font-b); font-size:0.66rem; font-weight:600;
  letter-spacing:0.35em; text-transform:uppercase; color:var(--gold);
  margin-bottom:20px; opacity:0; transform:translateY(20px);
  animation:fadeUp 1s var(--ease-out) 0.6s forwards;
}
.hero__title {
  color:var(--white); margin-bottom:20px; max-width:700px;
  font-weight:300; letter-spacing:-0.03em;
  opacity:0; transform:translateY(40px);
  animation:fadeUp 1.2s var(--ease-out) 0.8s forwards;
}
.hero__title em { font-style:italic; color:var(--gold-light); }
.hero__desc {
  color:rgba(255,255,255,0.65); font-size:clamp(0.88rem, 1.1vw, 1rem);
  max-width:460px; line-height:1.9; margin-bottom:36px;
  opacity:0; transform:translateY(20px);
  animation:fadeUp 1s var(--ease-out) 1.1s forwards;
}
.hero__actions {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  opacity:0; transform:translateY(20px);
  animation:fadeUp 1s var(--ease-out) 1.35s forwards;
}
@keyframes fadeUp { to{opacity:1; transform:translateY(0)} }

.hero__scroll {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero__scroll-line { width:1px; height:48px; background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.4)); position:relative; overflow:hidden; }
.hero__scroll-line::after {
  content:''; position:absolute; top:-48px; width:1px; height:48px; background:var(--gold);
  animation:scrollLine 2s var(--ease-smooth) infinite;
}
@keyframes scrollLine { 0%{top:-48px} 100%{top:48px} }
.hero__scroll-text { font-size:0.55rem; letter-spacing:0.3em; text-transform:uppercase; color:rgba(255,255,255,0.35); }

/* ============================================
   STAT BAR — with counters
   ============================================ */
.stat-bar { background:var(--bg-dark); position:relative; z-index:10; overflow:hidden; }
.stat-bar::before { content:''; position:absolute; inset:0; background:var(--grain); opacity:0.3; pointer-events:none; }
.stat-bar__inner { display:grid; grid-template-columns:repeat(4,1fr); max-width:var(--max-w); margin:0 auto; }
.stat-bar__item {
  padding:32px var(--gap); text-align:center;
  border-right:1px solid rgba(255,255,255,0.06);
  position:relative;
}
.stat-bar__item:last-child { border-right:none; }
.stat-bar__item::after { content:''; position:absolute; bottom:0; left:50%; width:0; height:1px; background:var(--gold); transform:translateX(-50%); transition:width 0.8s var(--ease-out); }
.stat-bar__item:hover::after { width:60%; }
.stat-bar__number {
  font-family:var(--font-h); font-size:clamp(1.5rem, 2.5vw, 2.2rem);
  color:var(--gold); font-weight:400; line-height:1.2;
}
.stat-bar__label { font-size:0.68rem; color:rgba(255,255,255,0.35); letter-spacing:0.14em; text-transform:uppercase; margin-top:4px; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-b); font-size:0.72rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  padding:15px 34px; position:relative; overflow:hidden;
  transition:all var(--dur-fast) var(--ease-smooth);
}
.btn svg { width:14px; height:14px; transition:transform var(--dur-fast) var(--ease-out); }
.btn:hover svg { transform:translateX(4px); }

.btn--primary { background:var(--gold); color:var(--bg-dark); }
.btn--primary::before {
  content:''; position:absolute; inset:0; background:var(--gold-dark);
  transform:translateY(100%); transition:transform var(--dur-fast) var(--ease-out);
}
.btn--primary:hover::before { transform:translateY(0); }
.btn--primary span, .btn--primary svg { position:relative; z-index:1; }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(198,169,108,0.35); }

.btn--outline { color:var(--white); border:1px solid rgba(255,255,255,0.25); background:transparent; }
.btn--outline:hover { border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.05); }
.btn--outline-dark { color:var(--text); border:1px solid var(--border); background:transparent; }
.btn--outline-dark:hover { border-color:var(--gold); color:var(--gold); }
.btn--dark { background:var(--bg-dark); color:var(--white); }
.btn--dark::before { content:''; position:absolute; inset:0; background:var(--bg-dark-alt); transform:translateY(100%); transition:transform var(--dur-fast) var(--ease-out); }
.btn--dark:hover::before { transform:translateY(0); }
.btn--dark span, .btn--dark svg { position:relative; z-index:1; }
.btn--dark:hover { transform:translateY(-2px); }

.whatsapp-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; background:#25D366; color:white;
  font-size:0.76rem; font-weight:600; letter-spacing:0.06em;
  transition:all var(--dur-fast) var(--ease-smooth); overflow:hidden; position:relative;
}
.whatsapp-btn::before { content:''; position:absolute; inset:0; background:#1DA851; transform:translateY(100%); transition:transform var(--dur-fast) var(--ease-out); }
.whatsapp-btn:hover::before { transform:translateY(0); }
.whatsapp-btn span, .whatsapp-btn svg { position:relative; z-index:1; }
.whatsapp-btn svg { width:18px; height:18px; }
.whatsapp-btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(37,211,102,0.3); }

/* ============================================
   FEATURES — Elegant grid
   ============================================ */
.features { background:var(--bg); }
.features--alt { background:var(--bg-warm); }
.features__header { text-align:center; margin-bottom:64px; }
.features__header .overline { justify-content:center; }
.features__header .overline::before { display:none; }
.features__header .section-sub { margin:16px auto 0; }

.features__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.feature-card {
  background:var(--bg); padding:clamp(28px, 3vw, 48px); text-align:center;
  transition:all 0.5s var(--ease-smooth); position:relative; overflow:hidden;
}
.features--alt .feature-card { background:var(--bg-warm); }
.feature-card::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:0;
  background:var(--gold-muted); transition:height 0.6s var(--ease-out);
}
.feature-card:hover::before { height:100%; }
.feature-card__icon { width:48px; height:48px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; color:var(--gold); position:relative; z-index:1; }
.feature-card__icon svg { width:28px; height:28px; stroke-width:1.2; }
.feature-card__title { font-family:var(--font-h); font-size:1.15rem; margin-bottom:8px; position:relative; z-index:1; }
.feature-card__desc { font-size:0.82rem; color:var(--text-mid); line-height:1.75; position:relative; z-index:1; }

/* ============================================
   SPLIT SECTIONS (Intro / About)
   ============================================ */
.split { background:var(--bg-warm); }
.split--white { background:var(--bg); }
.split__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 6vw, 80px); align-items:center; }
.split__grid--reverse { direction:rtl; }
.split__grid--reverse > * { direction:ltr; }

.split__img { position:relative; overflow:hidden; }
.split__img-inner { aspect-ratio:4/5; overflow:hidden; position:relative; }
.split__img-inner img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.split__img:hover .split__img-inner img { transform:scale(1.04); }
.split__img-accent {
  position:absolute; top:20px; right:-20px; bottom:-20px; left:20px;
  border:1px solid var(--gold); opacity:0.15; z-index:-1;
}

.split__text .overline { margin-bottom:18px; }
.split__text h2 { margin-bottom:22px; }
.split__text p { color:var(--text-mid); margin-bottom:16px; line-height:1.9; font-size:0.92rem; }

.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin:28px 0 36px; }
.check-item { display:flex; align-items:center; gap:10px; font-size:0.86rem; color:var(--text); }
.check-item svg { width:16px; height:16px; color:var(--gold); flex-shrink:0; stroke-width:1.5; }

/* ============================================
   GALLERY PREVIEW — Masonry-style
   ============================================ */
.gallery-preview { background:var(--bg); overflow:hidden; }
.gallery-preview__header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; flex-wrap:wrap; gap:16px; }
.gallery-preview__grid { display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:auto auto; gap:12px; }
.gp-item { overflow:hidden; position:relative; cursor:pointer; }
.gp-item img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out), filter 0.6s ease; }
.gp-item:hover img { transform:scale(1.06); }
.gp-item__over {
  position:absolute; inset:0; background:rgba(14,12,10,0.4);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.5s var(--ease-smooth);
}
.gp-item:hover .gp-item__over { opacity:1; }
.gp-item__over span { color:white; font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:600; }
.gp-item--lg { grid-column:span 7; aspect-ratio:16/10; }
.gp-item--sm { grid-column:span 5; aspect-ratio:4/3; }
.gp-item--md { grid-column:span 4; aspect-ratio:1; }

/* ============================================
   ROOMS — Dark section
   ============================================ */
.rooms { background:var(--bg-dark); color:var(--text-inv); overflow:hidden; position:relative; }
.rooms::before { content:''; position:absolute; inset:0; background:var(--grain); opacity:0.3; pointer-events:none; }
.rooms .overline { color:var(--gold); }
.rooms .section-sub { color:rgba(255,255,255,0.4); }
.rooms__header { text-align:center; margin-bottom:64px; position:relative; z-index:1; }
.rooms__header .overline { justify-content:center; }
.rooms__header .overline::before { display:none; }
.rooms__header .section-sub { margin:16px auto 0; }
.rooms__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; position:relative; z-index:1; }
.room-card { position:relative; overflow:hidden; aspect-ratio:16/10; cursor:pointer; }
.room-card img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.room-card:hover img { transform:scale(1.06); }
.room-card__content {
  position:absolute; bottom:0; left:0; right:0;
  padding:32px; background:linear-gradient(to top, rgba(14,12,10,0.92) 0%, rgba(14,12,10,0.4) 60%, transparent 100%);
  transform:translateY(10px); opacity:0.85; transition:all 0.5s var(--ease-out);
}
.room-card:hover .room-card__content { transform:translateY(0); opacity:1; }
.room-card__title { font-family:var(--font-h); font-size:1.25rem; color:white; margin-bottom:6px; }
.room-card__meta { font-size:0.74rem; color:rgba(255,255,255,0.55); display:flex; gap:16px; flex-wrap:wrap; letter-spacing:0.04em; }

/* ============================================
   PRICING — Clean table
   ============================================ */
.pricing { background:var(--bg); }
.pricing__header { text-align:center; margin-bottom:56px; }
.pricing__header .overline { justify-content:center; }
.pricing__header .overline::before { display:none; }
.pricing__header .section-sub { margin:16px auto 0; }
.pricing__table { max-width:660px; margin:0 auto; }
.pricing__row {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px; border-bottom:1px solid var(--border);
  transition:all 0.4s var(--ease-smooth);
}
.pricing__row:first-child { border-top:1px solid var(--border); }
.pricing__row:hover { background:var(--bg-warm); padding-left:34px; }
.pricing__row--peak {
  background:var(--bg-dark); color:var(--white); border-color:transparent; margin:8px 0;
}
.pricing__row--peak:hover { background:var(--bg-dark-alt); padding-left:34px; }
.pricing__dates { font-size:0.88rem; }
.pricing__price { font-family:var(--font-h); font-size:1.3rem; font-weight:500; color:var(--gold); }
.pricing__price small { font-size:0.65rem; font-weight:400; opacity:0.6; margin-left:2px; font-family:var(--font-b); }
.pricing__note { text-align:center; margin-top:32px; font-size:0.8rem; color:var(--text-light); line-height:1.8; }

/* ============================================
   LOCATION
   ============================================ */
.location { background:var(--bg-warm); }
.location__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 6vw, 80px); align-items:start; }
.location__map { overflow:hidden; aspect-ratio:4/3; border:1px solid var(--border); }
.location__map iframe { width:100%; height:100%; border:0; }
.distance-list { margin-top:28px; }
.distance-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; border-bottom:1px solid var(--border);
  transition:padding var(--dur-fast) var(--ease-smooth);
}
.distance-item:hover { padding-left:8px; }
.distance-item:first-child { border-top:1px solid var(--border); }
.distance-item__left { display:flex; align-items:center; gap:12px; }
.distance-item__left svg { width:18px; height:18px; color:var(--gold); stroke-width:1.2; }
.distance-item__name { font-size:0.9rem; }
.distance-item__value { font-family:var(--font-h); font-size:0.98rem; color:var(--gold); font-weight:500; }

/* ============================================
   AMENITIES
   ============================================ */
.amenities { background:var(--bg-warm); }
.amenities__header { text-align:center; margin-bottom:56px; }
.amenities__header .overline { justify-content:center; }
.amenities__header .overline::before { display:none; }
.amenities__header .section-sub { margin:16px auto 0; }
.amenities__categories { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.amenity-cat__title { font-family:var(--font-h); font-size:1.2rem; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.amenity-cat__title svg { width:20px; height:20px; color:var(--gold); stroke-width:1.2; }
.amenity-cat li { font-size:0.85rem; color:var(--text-mid); padding:8px 0; border-bottom:1px solid rgba(30,27,24,0.05); display:flex; align-items:center; gap:10px; }
.amenity-cat li svg { width:12px; height:12px; color:var(--gold); stroke-width:2; flex-shrink:0; }

/* ============================================
   RULES
   ============================================ */
.rules { background:var(--bg); }
.rules__header { text-align:center; }
.rules__header .overline { justify-content:center; }
.rules__header .overline::before { display:none; }
.rules__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1000px; margin:48px auto 0; }
.rule-card {
  padding:32px 24px; border:1px solid var(--border); text-align:center;
  transition:all 0.5s var(--ease-smooth); position:relative; overflow:hidden;
}
.rule-card::before { content:''; position:absolute; top:0; left:50%; width:0; height:2px; background:var(--gold); transform:translateX(-50%); transition:width 0.5s var(--ease-out); }
.rule-card:hover::before { width:60%; }
.rule-card:hover { border-color:var(--border-gold); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.06); }
.rule-card svg { width:28px; height:28px; color:var(--gold); margin-bottom:16px; stroke-width:1.2; }
.rule-card__title { font-family:var(--font-h); font-size:1.05rem; margin-bottom:8px; }
.rule-card__desc { font-size:0.82rem; color:var(--text-mid); line-height:1.75; }

/* ============================================
   GALLERY PAGE
   ============================================ */
.gallery-page { padding-top:40px; }
.masonry { columns:3; column-gap:12px; }
.masonry__item {
  break-inside:avoid; margin-bottom:12px; overflow:hidden; cursor:pointer; position:relative;
}
.masonry__item img { width:100%; display:block; transition:transform 1.2s var(--ease-out); }
.masonry__item:hover img { transform:scale(1.04); }
.masonry__item-label {
  position:absolute; bottom:0; left:0; right:0; padding:14px 18px;
  background:linear-gradient(to top, rgba(14,12,10,0.8), transparent);
  color:white; font-size:0.72rem; font-weight:600; letter-spacing:0.08em;
  opacity:0; transform:translateY(8px); transition:all 0.5s var(--ease-out);
}
.masonry__item:hover .masonry__item-label { opacity:1; transform:translateY(0); }

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox {
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.5s var(--ease-smooth);
}
.lightbox.active { opacity:1; pointer-events:all; }
.lightbox__img { max-width:88vw; max-height:82vh; object-fit:contain; }
.lightbox__close { position:absolute; top:24px; right:24px; color:rgba(255,255,255,0.6); padding:8px; transition:color var(--dur-fast) ease; }
.lightbox__close:hover { color:white; }
.lightbox__close svg { width:28px; height:28px; stroke-width:1.2; }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); color:rgba(255,255,255,0.5); padding:16px; transition:color var(--dur-fast) ease; }
.lightbox__nav:hover { color:white; }
.lightbox__nav svg { width:32px; height:32px; stroke-width:1.2; }
.lightbox__nav--prev { left:16px; }
.lightbox__nav--next { right:16px; }
.lightbox__counter { position:absolute; bottom:24px; color:rgba(255,255,255,0.4); font-size:0.72rem; letter-spacing:0.2em; }
.lightbox__caption { position:absolute; bottom:48px; color:rgba(255,255,255,0.7); font-family:var(--font-h); font-size:1rem; }

/* ============================================
   BEACHES
   ============================================ */
.beaches__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:56px; }
.beach-card { border:1px solid var(--border); overflow:hidden; transition:all 0.5s var(--ease-smooth); background:var(--bg); }
.beach-card:hover { border-color:var(--border-gold); transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,0.08); }
.beach-card__map { aspect-ratio:16/9; }
.beach-card__map iframe { width:100%; height:100%; border:0; }
.beach-card__body { padding:24px; }
.beach-card__tag { font-size:0.65rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; display:block; }
.beach-card__title { font-family:var(--font-h); font-size:1.2rem; margin-bottom:8px; }
.beach-card__desc { font-size:0.84rem; color:var(--text-mid); line-height:1.8; }
.beach-card--featured { grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; }
.beach-card--featured .beach-card__map { aspect-ratio:auto; min-height:300px; }
.beach-card--featured .beach-card__body { display:flex; flex-direction:column; justify-content:center; padding:36px; }

/* ============================================
   ATTRACTIONS
   ============================================ */
.attractions__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.attr-card { border:1px solid var(--border); overflow:hidden; transition:all 0.5s var(--ease-smooth); background:var(--bg); }
.attr-card:hover { border-color:var(--border-gold); transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,0.08); }
.attr-card__img { aspect-ratio:16/10; overflow:hidden; }
.attr-card__img img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.attr-card:hover .attr-card__img img { transform:scale(1.06); }
.attr-card__body { padding:24px; }
.attr-card__title { font-family:var(--font-h); font-size:1.15rem; margin-bottom:8px; }
.attr-card__desc { font-size:0.84rem; color:var(--text-mid); line-height:1.8; }
.attr-card__distance { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:0.72rem; color:var(--gold); font-weight:600; letter-spacing:0.06em; }
.attr-card__distance svg { width:13px; height:13px; stroke-width:1.5; }

/* ============================================
   CONTACT
   ============================================ */
.contact__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 6vw, 80px); align-items:start; }
.contact__info-item { display:flex; gap:16px; margin-bottom:32px; }
.contact__info-item svg { width:20px; height:20px; color:var(--gold); stroke-width:1.2; margin-top:3px; flex-shrink:0; }
.contact__info-item h4 { font-family:var(--font-h); font-size:1rem; margin-bottom:4px; }
.contact__info-item p { font-size:0.86rem; color:var(--text-mid); line-height:1.8; }

.contact__form { background:var(--bg-warm); padding:clamp(28px, 3.5vw, 48px); border:1px solid var(--border); }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:0.7rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-light); margin-bottom:8px; }
.form-group input, .form-group textarea, .form-group select {
  width:100%; padding:13px 16px; font-family:var(--font-b); font-size:0.9rem;
  color:var(--text); background:var(--bg); border:1px solid var(--border);
  transition:border-color 0.4s var(--ease-smooth); outline:none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--gold); }
.form-group textarea { min-height:120px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.quick-ref { background:var(--bg-warm); border:1px solid var(--border); padding:24px; margin-top:16px; }
.quick-ref h4 { font-family:var(--font-h); font-size:1.05rem; margin-bottom:12px; }
.quick-ref p { font-size:0.82rem; color:var(--text-mid); line-height:1.9; }

.contact__map { margin-top:var(--sec-y); overflow:hidden; border:1px solid var(--border); aspect-ratio:21/9; }
.contact__map iframe { width:100%; height:100%; border:0; }

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner { position:relative; padding:clamp(80px, 12vw, 130px) 0; overflow:hidden; }
.cta-banner__bg { position:absolute; inset:0; }
.cta-banner__bg img { width:100%; height:100%; object-fit:cover; opacity:0.2; }
.cta-banner__bg::after { content:''; position:absolute; inset:0; background:var(--bg-dark); }
.cta-banner__content { position:relative; z-index:1; text-align:center; }
.cta-banner__content h2 { color:var(--white); margin-bottom:16px; }
.cta-banner__content p { color:rgba(255,255,255,0.5); margin-bottom:36px; max-width:440px; margin-left:auto; margin-right:auto; font-size:0.95rem; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================
   PAGE HEADER
   ============================================ */
.page-header {
  padding-top:calc(var(--nav-h) + 56px); padding-bottom:56px;
  background:var(--bg-dark); text-align:center; position:relative; overflow:hidden;
}
.page-header::before { content:''; position:absolute; inset:0; background:var(--grain); opacity:0.3; pointer-events:none; }
.page-header h1 { color:var(--white); font-size:clamp(2.2rem, 4vw, 3.6rem); position:relative; }
.page-header p { color:rgba(255,255,255,0.4); margin-top:12px; font-size:0.95rem; position:relative; }
.page-header .overline { justify-content:center; position:relative; }

/* ============================================
   FOOTER
   ============================================ */
.footer { background:var(--bg-dark); padding:64px 0 28px; color:var(--text-inv); position:relative; overflow:hidden; }
.footer::before { content:''; position:absolute; inset:0; background:var(--grain); opacity:0.3; pointer-events:none; }
.footer__inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.06); position:relative; z-index:1; }
.footer__brand h3 { font-family:var(--font-h); font-size:1.5rem; font-weight:400; margin-bottom:16px; }
.footer__brand p { font-size:0.82rem; color:rgba(255,255,255,0.35); line-height:1.85; max-width:300px; }
.footer__col h4 { font-family:var(--font-b); font-size:0.68rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.28); margin-bottom:20px; }
.footer__col a { display:block; font-size:0.86rem; color:rgba(255,255,255,0.5); padding:5px 0; transition:all var(--dur-fast) var(--ease-smooth); }
.footer__col a:hover { color:var(--gold); padding-left:6px; }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; padding-top:28px; font-size:0.72rem; color:rgba(255,255,255,0.2); position:relative; z-index:1; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1024px) {
  .features__grid { grid-template-columns:repeat(2,1fr); }
  .rooms__grid { grid-template-columns:1fr; }
  .amenities__categories { grid-template-columns:repeat(2,1fr); }
  .attractions__grid { grid-template-columns:repeat(2,1fr); }
  .footer__inner { grid-template-columns:1fr 1fr; }
  .rules__grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  .nav__links, .lang-switch--desktop { display:none; }
  .nav__toggle { display:flex; }
  .stat-bar__inner { grid-template-columns:repeat(2,1fr); }
  .split__grid, .split__grid--reverse, .location__grid, .contact__grid { grid-template-columns:1fr; direction:ltr!important; }
  .features__grid { grid-template-columns:1fr; }
  .gp-item--lg { grid-column:span 12; }
  .gp-item--sm, .gp-item--md { grid-column:span 6; }
  .masonry { columns:2; }
  .amenities__categories { grid-template-columns:1fr; }
  .attractions__grid, .beaches__grid { grid-template-columns:1fr; }
  .beach-card--featured { grid-column:span 1; grid-template-columns:1fr; }
  .beach-card--featured .beach-card__map { min-height:200px; }
  .rules__grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .footer__inner { grid-template-columns:1fr; }
  .footer__bottom { flex-direction:column; gap:10px; text-align:center; }
  .hero__scroll { display:none; }
  .contact__map { aspect-ratio:16/9; }
}

@media (max-width:480px) {
  .masonry { columns:1; }
  .gp-item--lg, .gp-item--sm, .gp-item--md { grid-column:span 12; }
  .stat-bar__inner { grid-template-columns:1fr 1fr; }
  .check-grid { grid-template-columns:1fr; }
  .rules__grid { grid-template-columns:1fr; }
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }